SpottingSession is an app for TV and movie post-production that automates creation and organization of everyone’s spotting notes. It’s already been used on several major shows and motion pictures, and our users have reported back that it’s helped them save a ton of time, money, and effort. We’re using our initial success as a launching pad to get SpottingSession into the hands of post-production experts around the world. Development continues actively, and we plan on improving on an already impressive multi-platform technological achievement.

If you work in post-production and have a use for something like SpottingSession, or you know someone who does, either download a free trial version of the app or email us at hello@spottingsession.com and we can help you get set up.

The post Introducing Our First Incubation Project: SpottingSession appeared first on Palomino Labs Blog.



Palomino Labs unlocks the potential of software to change people and industries. Our team of experienced software developers, designers, and product strategists can help turn any idea into reality. Check out our website for more information, or send us an email and let's start talking about how we can work together.

TotalFinder ($18, 14-day free trial)

Say goodbye to multiple Finder windows! TotalFinder lets you have consolidate them into one window with Chrome-like tabs. It also brings a bunch of other improvements like Dual Mode which makes working with two directories at once a cinch.

Moom ($10, 100 free uses)

Moom brings Windows 7-style window pinning to Mac, and one-ups it by allowing you to customize everything about it. Easily resize and position windows to pre-defined sections of your screen by snapping it to the edges, or using a handy keyboard shortcut.

LittleIpsum (Free)

Not much to explain with this one. Quickly generate as much filler Latin text as you need. The LittleIpsum icon lives in your menu bar and can generate HTML-wrapped text if you right-click instead.

Fantastical ($19.99, 14-day free trial)

Creating calendar events is crazy easy with Fantastical. Use natural language to easily fill in event details like location and invitees. It works seamlessly with whatever calendar service you already use.

ColorSnapper ($4.99)

ColorSnapper is a color picker for anything on your screen. The magnifying loupe and keyboard controls really let you have fine control of exactly which pixel you want to select. And of course you can copy colors in whatever format you want.

The post Mac Apps We Like appeared first on Palomino Labs Blog.



Palomino Labs unlocks the potential of software to change people and industries. Our team of experienced software developers, designers, and product strategists can help turn any idea into reality. Check out our website for more information, or send us an email and let's start talking about how we can work together.

The parallax effect, or using multiple moving images to give the illusion of depth, is increasingly being used on sites across the web. So its worth exploring how we can create this effect using CSS, without the need for any JavaScript.

Let’s start out with this:

.bg {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background:url('front.png') 0 0, url('middle.png') 40% 0, url('back.png') 80% 0, #000;
}

<div class="bg"></div>

This styles the element to stretch to the size of the first non statically-positioned parent element, and layers three different background images on top of each other. Note that the x-positioning of each image is offset a certain percentage, so as the element size changes the images move disproportionately to each other, creating that sweet depth effect.

Now to get them moving we have a number of options. First option is to use the transition declaration, and add it to the .bg class. Vendor prefixes are still needed for some browser versions— check out Can I Use for the latest details on which browsers support CSS transitions.

.bg {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background:url('front.png') 0 0, url('middle.png') 40% 0, url('back.png') 80% 0, #000;
  -webkit-transition: left 300s linear;
     -moz-transition: left 300s linear;
       -o-transition: left 300s linear;
          transition: left 300s linear;
}

What that transition declaration says here is: when the element’s left declaration changes, move it linearly (as opposed to any of the other easing options) for a period of 300 seconds. So in order to actually see something move we need to change the value of left on .bg. There are a number of pseudo-classes we can use to do this; for example on hover of the element:

.bg:hover {
  left:-9999px;
}

View Demo

This means that when the mouse pointer is over the element, it will move 9999 pixels to the left, and because of the transition declaration, it will do it over a period of 300 seconds. Of course, using :hover requires the user to actually take an action for the movement to start, and to continue. To make it begin automatically, we can instead use the :target pseudo-class, which is triggered whenever the hash in the URL matches the ID of an element. So we do this:

#bg-target {
  left:-9999px;
}

<div class=”bg” id=”bg-target”></div>

And the element will move whenever the #bg-target hash is in the URL (ex: index.html#bg-target)

View Demo

Now there are two main problems with using the transition declaration. First, without using any JavaScript the animation can’t be started unless there is a trigger (like :hover or :target), which is terribly inelegant. Second, once the transition completes, it stops, and if the trigger is removed it moves back to its original position.

So an alternate way we can get those background images moving the way we want them (without a trigger) is to use CSS animation. Note the browser support as well. We end up with this:

.bg {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background:url('front.png') 0 0, url('middle.png') 40% 0, url('back.png') 80% 0, #000;
  -webkit-animation: moving-images 400s ease infinite;
     -moz-animation: moving-images 400s ease infinite;
       -o-animation: moving-images 400s ease infinite;
          animation: moving-images 400s ease infinite;
}

It’s that same .bg class but with an animation declaration this time. The moving-images bit is the animation name which you can set to whatever you want, 400 seconds is the length of animation, ease movement gently slows the animation before and after it changes position, and infinite refers to the amount of times it should loop.

Now to define what actually animates:

@keyframes moving-images {
  0%   {left:0;}
  50%  {left:-9999px;}
  100% {left:0;}
}
@-moz-keyframes moving-images {
  0%   {left:0;}
  50%  {left:-9999px;}
  100% {left:0;}
}
@-webkit-keyframes moving-images {
  0%   {left:0;}
  50%  {left:-9999px;}
  100% {left:0;}
}
@-o-keyframes moving-images {
  0%   {left:0;}
  50%  {left:-9999px;}
  100% {left:0;}
}

This says that the animation should start at its original left:0 position, move to -9999 pixels halfway through, and then move back to 0 at the end, so that when the animation loops over it doesn’t jarringly start from 0. This allows us to get that parallax effect moving back and forth, automatically and infinitely.

View Demo

The practical uses of what we’ve done here are admittedly limited (perhaps to spice up a site header?), but it does serve to show how many different possibilities CSS allows for, and that there are times when JavaScript isn’t the only answer.

The post Side-Scrolling Parallax Background Effect Using Only CSS3 appeared first on Palomino Labs Blog.



Palomino Labs unlocks the potential of software to change people and industries. Our team of experienced software developers, designers, and product strategists can help turn any idea into reality. Check out our website for more information, or send us an email and let's start talking about how we can work together.

App Store Optimization is becoming as sexy and lucrative as traditional SEO. While Apple constantly tweaks the App Store search engine, the name and keywords of your app are the two fields Apple seems to regard the most important when it comes to search (others include number of downloads and ratings; the description of the app is mostly disregarded). Although Apple doesn’t encourage you to do so, the app name in the App Store can be different than the name that shows up on the home screen under your icon (the two have to be “similar” though, and Apple’s approval team gets to decide what that means); you may want to take advantage of that to include additional terms you don’t put in your keywords.

Speaking of keywords, you’re allowed 100 characters worth, separated by commas (to make the most of that limitation don’t put a space after each comma). Think about what keywords best describe your app, but don’t be too broad as you’re likely to be drowned out by the thousands of other apps with that keyword. Nor should you be too specific–make sure it’s something people actually would search for. Don’t include your app name and company name as part of the keywords, since you’re already searchable by those terms. And if your app is free, the keyword “free” is automatically associated with your app, so don’t include it in your list. Apple also doesn’t let you use keywords that are irrelevant, offensive, and refer to other apps, products, or trademarks. In the latest search update, plural forms of keywords seem to be handled similarly to singular forms, and similarly, using phrases as keywords offers no advantage–use “peanut,almond,butter” rather than “peanut butter,almond butter”.

While your description doesn’t help your app be found using the App Store search feature, it is just as important since it informs your users. Craft the first three lines of your description carefully since they’re the only ones that are displayed before the user has to expand the field. Summarize what your app does and why it’s awesome in those first lines. For the rest of the description, avoid writing in paragraphs; use a few short sentences to provide an app overview and bulleted lists to quickly highlight app features. Consider using Unicode characters like ★,☆, and ✔ to draw attention to certain items. Include social proof and praise that your app has received, as well as links to any social media accounts associated with the product or company. Don’t include the changelog in the description–use the What’s New field instead.

The screenshots of your app may be even more important than your description, because of the whole picture-is-worth-a-thousand-words thing. You can include up to five screenshots per platforms (so upload separate iPad images if your app supports it), and Apple recommends you crop the status bar out of all the screenshots. Use the most relevant screenshot first, as the iOS 6 App Store update now includes it in the search results listing. Feel free to combine screenshots, and add explanations, arrows, and any other useful or attractive flare to the images.

If your app is available in multiple countries, be sure to localize the title, keywords, etc. for each location. You’re only allowed to change all this information when submitting an app update, so do a good job on preparing it the first time. Also remember to check out the App Review Guidelines and Apple’s own App Store Best Practices.

Finally, note that some of these tips, particularly in regards to the description, also apply to apps in Google Play and the Windows Phone Store. Those platforms have their own challenges and opportunities and a post on that may be forthcoming. I look forward to downloading your app!

Update

One more thing to know that we only learned out of experience: if you submit your app to Apple and the reps reviewing it have no idea how to use it, or the app requires access to hardware or additional software the reps don’t have, then they’ll reject it and ask for an instructional demo video. Although it’s easier to do a screencast showing the app in the iOS Simulator, Apple wants to know the app works on actual device, so it’s recommended you actually film yourself going through all the app features and functionality on your device (we found that putting an iPad on some books, with the camera lens hanging off the edge pointed down towards your device on your desk, worked well for us). Then just upload your video to YouTube and include it as a link with your submission.

The post Tips for an Effective App Store Listing appeared first on Palomino Labs Blog.



Palomino Labs unlocks the potential of software to change people and industries. Our team of experienced software developers, designers, and product strategists can help turn any idea into reality. Check out our website for more information, or send us an email and let's start talking about how we can work together.