oreilly - html5 architecture (2012) [beta release]

[...]... $('output').appendChild(accordion.getDomNode()); } deleteSection = function() { accordion.deleteSection(section2); Figure 2-9 Wink Accordion Component The-M-Project http://the-m-project.net/ The-M-Project is built on top of jQuery and jQuery Mobile It uses concepts and parts from sproutcore and bases it’s persistence handling on persistencejs Table 2-8 The-M-Project Platform Support IOS, Android, WebOS, BlackBerry License GPLv2 and MIT 18... http:/ /html 5- shims.googlecode.com/svn/trunk/demo/workers.html There are many scenarios where Web Workers could be put into action within your app From preprocessing Wiki text as the user types then generating the HTML to visualizations and business graphs Here are a few example applications: • Parsing Wiki Text • • http://www.cach.me/blog/2011/01/javascript-web-workers-tutorial-parse-wikitext-in-real-time/... instantiating JavaScript objects Wrapped or Polyfilled HTML5 APIs Geolocation, WebStorage Page Setup: [html] List... type="text/javascript" src=" /jquery.mobile-1.0.min.js"> My Title Hello world Component Setup (Shown in Figure 2-6 ): [html] Acura... JavaScript - Declarative on the DOM itself Markup with CSS and data-* attributes Wrapped or Polyfilled HTML5 APIs None 11 O’Reilly Media, Inc 3/9/2012 Page Setup: [html] My Page ... stage-right'; } else { FOCUS_PAGE.className = 'page transition stage-left'; } //5 refresh/set the global variable FOCUS_PAGE = getElement(id); //6 Bring in the new page FOCUS_PAGE.className = 'page transition stage-center'; } Stage-left or stage-right becomes stage-center and forces the page to slide into the center view port We are completely depending on CSS3 to do the heavy lifting [css] stage-left... do the heavy lifting [css] stage-left { left: −100%; } stage-right { left: 100%; } stage-center { top: 0; left: 0; } Flipping On mobile devices, flipping is known as actually swiping the page away Here we use some simple JavaScript to handle this event on iOS and Android (WebKit-based) devices View it in action at http://html5e.org/slide-flip-rotate.html When dealing with touch events and transitions,... content area into the view port For the slide effect, first we declare our markup: [html] 31 O’Reilly Media, Inc 3/9/2012 Home Page Products Page About Page Notice how we have this concept of staging pages left or right It could... don’t want, so we must code to the devices we want to support The Geolocation JavaScript frameworks are relatively small in both size and selection geo-location-javascript http://code.google.com/p/geo-location-javascript/ A mobile centric framework using non-standard Blackberry and WebOD tricks It wraps the underlying platform specific implementation through a simple JavaScriptAPI that is aligned to the... screen devices - This is a given, you want a framework that is using CSS3 transitions to handle animations • Cross Platform - We want our app to work consistently across all the major platform, or Grade “A” and “B”, browsers • Uses (or wraps) the latest HTML5 and CSS3 standards • Open Source - Communities behind frameworks (or any project for that matter) are critical • Programming Model - Does our project