Categoryhtml5

HTML5 related posts.

A List of HTML5 Features for the Mobile Web

This will be an on going list of HTML5 features that can be used on the mobile web today!.

Meta Tags

Note: some of these are iPhone specific, but it wont break your page on Android or Windows devices.


// This disabled pinch/zoom (works in all devices)
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

// This meta tag makes your web app fullscreen when you have saved it to your home screen (iOS only)
<meta name="apple-mobile-web-app-capable" content="yes">

// This just makes the status bar a different color. I have it set to black here. (iOS only)
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

// This tag adds homes screen icon. (iOS only)
<link rel="apple-touch-startup-image" href="icon.png" />

// This tag adds is used to add a launch screen before your app is fully loaded. (iOS only)
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="icon.png" />

More information about some of the iOS specific ones can be viewed here.

Storage

There is a good article over at HTML5 Rocks that better covers this area.

Events

There are several good javascript library’s that handle touch events. Below is a few of them.

  • Zepto.js – Zepto is a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API. If you use jQuery, you already know how to use Zepto.
  • Quojs – Micro javascript library that simplifies your mobile projects.

Google I/O Presentations and Slides

Here are some interesting presentations and slides that came out of this years 2012 Google I/O.

  • Fast user interfaces for the cross-device web – Slides
  • The Web Can Do That!? Adventures Into HTML5 – Slides or YouTube
  • New Web Tools and Advanced CSS/HTML5 Features from Adobe & Google – YouTube

Mobile Portfolio Built with Sencha Touch

I wanted to play with Sencha Touch the other night and built out a simple portfolio. This app can be downloaded from my github account.

I will only display the JS code that makes the entire Sencha app, you can view the css, and html from the download.

Continue reading

© 2017 Aldo Lugo

Theme by Anders NorenUp ↑