Scribd
Upload
89 views

Built With Web Standards

Sencha Touch is a framework for building mobile apps using HTML5, CSS3, and JavaScript. It uses HTML5 features like localStorage to save data offline. The entire library is under 120kb compressed and minified. Developers can easily request and bind data from various sources and take that data offline. The document then provides instructions for building an offline HTML5 Tetris game for iPhone, including defining the markup with features like the manifest attribute and Apple-specific tags, and storing user data using localStorage or an offline SQL database.

Uploaded by

harshsharma77
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
89 views

Built With Web Standards

Sencha Touch is a framework for building mobile apps using HTML5, CSS3, and JavaScript. It uses HTML5 features like localStorage to save data offline. The entire library is under 120kb compressed and minified. Developers can easily request and bind data from various sources and take that data offline. The document then provides instructions for building an offline HTML5 Tetris game for iPhone, including defining the markup with features like the manifest attribute and Apple-specific tags, and storing user data using localStorage or an offline SQL database.

Uploaded by

harshsharma77
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

http://www.quirksmode.org/html5/inputs_mobile.

html

http://mobilehtml5.org/

Built with Web Standards

Sencha Touch is the world's first app framework built specifically to leverage HTML5, CSS3, and Javascript for the highest level of power, flexibility, and optimization. We make specific use of HTML5 to deliver components like audio and video, as well as a localStorage proxy for saving data offline. We have made extensive use of CSS3 in our stylesheets to provide the most robust styling layer possible. Altogether, the entire library is under 120kb (gzipped and minified), and it's trivial to make that number even smaller by disabling unused components or styles.

Data Integration

Just like our other frameworks, Sencha Touch comes with an incredibly powerful data package. Developers can easily request data from a wide variety of sources whether by AJAX, JSONP, or YQL, bind that data to specific visual components or templates, and then take that data offline with localStorage writers.

Why not HTML5?


Browser Support Media Licensing Issues

HTML5, are you there?


We know that HTML5 is not a simple concept. Its an umbrella for many, many different things. However, every browser shipped in 2011 needs to be HTML5-some-kind-compatible. I cant believe that a mobile browser released this year can be shipped without W3C Geolocation API support. Its a basic API, a more mature standard than HTML5 and very simple to implement. So: Symbian Anna Browser does not support Geolocation. In fact, it doesnt support any HTML5 API apart from Canvas (2D drawing). Other great missing is video & audio support. You can still use Flash for video playing on Symbian browser, but video tag was a feature I was expecting for this release. What is missing from the main HTML5 features available on other platforms:
No Viewport support No Audio & Video tag support (the multimedia events seems to be there, but I couldnt see a <video> tag working) No Application Cache / Offline storage mechanisms No Geolocation API No Accelerometer / Motion API No HTML5 new input types (even when Modernizr says supported, every input type uses the same text input with the same on-screen keyboard)

We can still access most of these features from the WRT widget platform (see Chapter 12). In fact, Symbian is one of the main platform supporting Home Screen widgets created entirely from HTML, CSS & JavaScript. But the lack of these features from the browser environment makes me feel strange about this new browser.

You can create a native app that lives with all the other apps, and for the most part, its going to be a pitch-perfect imitation. You can do this with the skill set you probably already have: HTML(5), CSS, and JavaScript.

Ill show you how to create an offline HTML5 iPhone application. More specifically, Ill walk you through the process of building a Tetris game. The app starts by defining your markup. here is the markup for my Tetris app.
<!DOCTYPE html> <html manifest="tetris.manifest"> <head> <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <link rel="apple-touch-icon" href="iphon_tetris_icon.png"/> <link rel="apple-touch-startup-image" href="startup.png" /> <link rel="stylesheet" href="tetris.css" type="text/css" media="screen, mobile" title="main" charset="utf-8"> <title>offline Tetris</title> </head> <body> <!-- Put your Markup Here --> <script type="text/javascript" src="tetris.js"></script> </body> </html>

First, notice the Doctype. Isnt HTML5 awesome? The manifest="cache.manifest" property on the <html> tag is how the browser knows that we want to cache this web page offline. Theres proprietary Apple markup on our HTML5 page. A brief explanation of each:

apple-mobile-web-app-capable:

This is another tip-off that we want to be an offline This hides the status bar, and nav bar

app.
apple-mobile-web-app-status-bar-style:

when the app is offline.


apple-touch-icon:This

is the pointer to the image that want to be the icon. This is a url pointing to the startup image.

apple-touch-startup-image:

JavaScript

I used a modded version of a JavaScript from Dalton Ridenhour; I found it on Github. The JS was written originally for a normal web browser. The only modifications I had to make was to support not having a keyboard. In general, JS functions work just fine on the iPhonethere are exceptions though. Think about something like a mouseover, the event exists on the iPhone, but I am not sure how helpful it is

when you dont have a standard pointing device (such as a mouse). Quirksmode posted an article about events on the iPhone that is really helpful. When you have all of that, you can test it out but opening your index.html in an iPhone, and you should be able to see everything work. Then, next step is to server it from an actual webserver that can set the proper settings on the cache.manifest. Then you could be able to add it to the home screen and have all the extras, and see the offline mode. You can see a working version I have set up at:
http://tetris.alexkessinger.net

Bonus Section: Offline Data Along with the ability to keep files that are needed offline, you can also store user data in an offline database. There are two major APIs for per user and/or per page data. The first is localStorage. localStorage, is an easy to use key-value store with a dead simple API.
localStorage.dataToStore = 5; console.log(localStorage.dataToStore); // 5

You can use this for storing the users score, for example. The second is actually an offline SQL engine, a webdatabase. The APIs are a little more advanced. Here is a little of you will see.
// Try and get a database object var db; try { if (window.openDatabase) { db = openDatabase("NoteTest", "1.0", "HTML5 Database API example", 200000); if (!db) alert("Failed to open the database on disk. This is probably because the version was / bad or there is not enough space left in this domain's quota"); } else alert("Couldn't open the database. Please try with a WebKit nightly with this feature enabled"); } catch(err) { } // Check and see if you need to initalize the DB db.transaction(function(tx) { tx.executeSql("SELECT COUNT(*) FROM WebkitStickyNotes", [], function(result) { loadNotes(); }, function(tx, error) { tx.executeSql("CREATE TABLE WebKitStickyNotes (id REAL UNIQUE, note TEXT, timestamp / REAL, left TEXT, top TEXT, zindex REAL)", [], function(result) { loadNotes(); }); }); });

// Insert a test Note. var note = { id: "1", text:" This is a test note", timestamp: "112123000", left:10, top:10, zIndex:2 }; db.transaction(function (tx) { tx.executeSql("INSERT INTO WebKitStickyNotes (id, note, timestamp, left, top, zindex) VALUES / (?, ?, ?, ?, ?, ?)", [note.id, note.text, note.timestamp, note.left, note.top, note.zIndex]); }); // Get all the notes out of the database. db.transaction(function(tx) { tx.executeSql("SELECT id, note, timestamp, left, top, zindex / FROM WebKitStickyNotes", [], function(tx, result) { for (var i = 0; i < result.rows.length; ++i) { var row = result.rows.item(i); var note = new Note(); note.id = row['id']; note.text = row['note']; note.timestamp = row['timestamp']; note.left = row['left']; note.top = row['top']; note.zIndex = row['zindex']; if (row['id'] > highestId) highestId = row['id']; if (row['zindex'] > highestZ) highestZ = row['zindex']; } if (!result.rows.length) newNote(); }, function(tx, error) { alert('Failed to retrieve notes from database - ' + error.message); return; }); });

Wrap Up There is lot that can be done with offline HTML apps. Games, like tetris, are even possible, but you would probably want to consider what you want to do and make sure its right for an offline app. Quake 3 Arena, probably not. A to-do list app, definitely.

You might also like