Departments
Departments
Departments
SUBSCRIBE TO NEWSCONTACT US
At RustyBrick I recently had the pleasure of working with TravelShark (formerly Swiftrank) to launch a new website for their featured hotel program. They won't hesitate to let you know about their network of 12,000+ region targeted hotel booking websites for cities all over the globe, which you can learn all about by visiting their site. Here I'd like to talk about two technical features of the site.
Interactive Home Page Hover Map
This jQuery (JavaScript) powered widget consists of an HTML <map> with polygonal <area>s -- a callback to the old days of the web but enhanced and made cross-browser compatible with jQuery. On hovering over the different parts, the background map image changes to highlight a section.
Interactive world map
HTML5 Video Elements
For a faster load time and (ironically) higher compatibility across devices I went with VideoJS to load in the appropriate video content depending on the client's browser. I say "ironically" because one would think HTML5 video would result in fewer compatible devices but in fact HTML5 video, if done correctly, plays on iOS (i.e. Apple iPhone) and Android devices. Flash-based video does not play at all on iOS and may be clunky and battery draining on Android. Of course all modern desktop browsers, including IE9, play the HTML5 video tag without a problem. Any unsupported browser falls back to a Flash based player and, failing that, a download link is displayed.
HTML5 Video in a pop up modal dialog box.
The downside to using HTML5 video is that the browser companies cannot decide on which video format to support! As of June 2011:
<rant>Of course Microsoft kicks the open source video codecs to the side, but c'mon, Apple?</rant> I now realize you can cover all browsers with Ogg Theora and H.264 but I also converted into WebM anyway just in case. Using ffmpeg and MP4Box free (GPL) utilities, the TravelShark Tour video was converted into the three formats and plugged in to the VideoJS code.
To see it in use, click the WATCH TOUR VIDEO button on the TravelShark home page. Go ahead, try it on your smartphone or magicpad! **Spoiler alert!** It just works.
Postscript
TravelShark also posted some funny YouTube videos about their name change. Check them out.
Michael joined the RustyBrick team in 2008 to focus on transitioning existing web sites to new & enhanced platforms. He graduated from Rutgers University in 2005 and holds a B.S. in Computer Science.
This article is under Creative, PHP Programming, Web Programming
There is 1 comment for this post
250 West Nyack Road, Suite #200 West Nyack, NY 10994
Get Directions
877-GO-RUSTY
877-467-8789
845-369-6869
845-228-8177
1 COMMENT