JSON
Latest
How Apple's iPhone 5 website works
Apple is full of incredibly clever people who not only develop the devices that we know and love, but some who also have amazing tricks up their sleeves for making sure that Apple websites are viewable on a variety of devices. @dbloom posted a website teardown focusing on the Design page of Apple's iPhone 5 site, finding some programming trickery was used to mimic video without having to actually embed video. Why would Apple want to do this? Well, if a traditional video embed had been used, iOS device users would have seen the video go full-screen instead of being neatly placed in the midst of the explanatory text. The "videos" in question on this page display an iPhone 5 being unlocked as well as a drag-to-rotate EarPod animation. Instead of using video, some brilliant minion at Apple came up with the idea of compressing animation into a handful of JPEG images by showing the starting and ending frames, then using special JPEGs like the one at the top of this post that contain only the updated and animated portions of the image. A JSON file is used to specify how the updated bits are positioned, and the actual logic for displaying the "video" in a <canvas> element is found in a tiny Javascript. The result is viewable on iOS devices and takes just a fraction of the bandwidth that a full video file would. Brilliant! [via MondayByNoon]
