Post on 18-Jan-2015
description
HTML5The new kid on the block
5 is the right version, here’s why
1 = 3
5 is the right version, here’s why
1 = 3
5 is the right version, here’s why
1 = 3
5 is the right version, here’s why
HTML5 - new standard for HTML, XHTML, and the HTML DOM
Rules for HTML5:
• Features based on HTML, CSS, DOM, JavaScript
• Reduce the need for external plugins
• Better error handling
• More markup to replace scripting
• Should be device independent
HTML5 - new standard for HTML, XHTML, and the HTML DOM
• Video and audio elements for media playback
• Support for local storage & cache
• The canvas element for drawing
• New semantic elements: header, footer, section, article, nav
• New form control tags: calendar, date, time, email, url, search
New features in HTML5
• CSS 3 Selectors
• CSS 3 Fonts
• CSS 3 Backgrounds and borders
• CSS 3 Text
• CSS 3 Multi column
CSS3 is about breaking CSS into modules
• Transitions - translate, rotate, scale, skew
• Animations
CSS3 features
• Transformations
• Transitions
• Animations
• Spinning wheel
• Typography
Examples
A little help from jQTouch
• Open source module for mobile web on the iPhone, iPad and other devices
• Created by @davidkaneda
• Maintained by @jonathanstark
• Free download from http://www.jqtouch.com
Demo
Sencha Touch - commercial product
• Allows you to develop mobile web apps that look and feel native on iPhone and Android touch devices
• Created by @senchainc
• More info http://www.sencha.com/products/touch/
Demo
Browser support
“All animals are equal”
Browser support
“All animals are equal”
Browser support
“All animals are equal”“But some animals are more equal than others”
George Orwell, Animal Farm
Browser support
Browser support
Chrome gives a hand to IE with Chrome Frame
Chrome gives a hand to IE with Chrome FrameIE9 will join the party
Browser support
So, when will we be ready to use all this?
Well, let me think...
So, when will we be ready to use all this?
Well, let me think... NOW
So, when will we be ready to use all this?
Well, let me think... NOW
So, when will we be ready to use all this?
Here is WHY and HOW
Everything goes mobile
iOS devices
iOS devices
iOS devices
Android devices
Android devices
Android devices
60,000 Android shipments a day
Mobile browsers
Mobile browsers
95% Webkit basediOS, Android, Blackberry, Palm, Samsung
Native vs Web
Native vs Web
Web is the winner
Web is the winner
• Easier to produce
• Easier to test
• Easier to distribute
• Most standardized
But how to use the webfor native applications?
PhoneGap to the rescue
• Open source development framework for building cross-platform mobile apps
• Developed and maintained by @nitobi
• Free download from http://www.phonegap.com
Build apps in HTML and JavaScript and still take advantage
of core features in mobile SDKs
• iPhone/iTouch
• iPad
• Google Android
• Palm
• Symbian
• Blackberry
Native vs Web+PhoneGap
More HTML5 examples
• Video
• Virtual reality
• Photo gallery
• Canvas in 3D
• Cloth
And some more
• Gift box
• 360
• Light table
• Wilderness downtown
Thanks!This presentation is brought to you by
• Open standards
• @font-face Casual
• @mborca