Google Dev Fest HTML5 Presentation

HTML5 ~= HTML + CSS + JS APIs
HTML5
Web Development to the next level

Rough Timeline of Web Technologies

JS APIs
Client Side Storage (Web SQL Database, App Cache, Web Storage)
Communication (Web Socket, Worker Workers)
Desktop Experience (Notification, Drag and Drop API)

Client Side Storage
Web Storage
New methods for storing data on the client
localStorage – storages data with no limit
sessionStorage – stores data for one session

Client Side Storage
App Cache
Web application that work offline.

Communication
Web Socket
Bi-directional, full duplex communications channels, over a singel Transmission Control Protocol (TCP) socket, designed to be implemented in web browsers and web servers.

Client Side Storage
Web SQL Database
Bring SQL to the client side.

Communication
Worker Workers
Possibility to load a JS file dynamically and then have it process code in a background process, not affecting the user interface and it’s response level.

Desktop Experience
Notification
Pop up notification desktop app-style.

Desktop Experience
Drag and Drop API
Simply drag and drop object.

Geolocation
Detect where you are now.

HTML
Semantics (New tags, Link relation, Microdata)
Accessibility (ARIA – Accessibility Rich Internet Applications)
Web Form 2.0 (Input fields)
Multimedia (Audio Tag, Video Tag)
2D and 3D Drawing (Canvas, Web GL, SVG)

Semantics
New tags

New tags

Semantics
Link relations
- A way to explain why you’re pointing to another page.
- <a href=“somelink.html” rel=“nofollow” >some text</a>

Link relations

Semantics
Microdata

Microdata

Accessibility
ARIA (Accessible Rich Internet Application)
- Defines a way to make web content and web applications more accessible to people with disabilities.

Web Form 2.0
New form field types
Slider
Color field
Search text field
Email field
Digit (number) field
Telephone field
etc

Multimedia
Video tag and Audio tag
Playing video or audio without plugin.

2D and 3D Drawing
Canvas
- Allows for dynamic, scriptable rendering of 2D shapes and bitmap images.

2D and 3D Drawing
Canvas 3D (WebGL)
- Allows for dynamic, scriptable rendering of 3D shapes and bitmap images.

2D and 3D Drawing
SVG (Scalable Vector Graphic)
- Specification of an XML-based file format for describing two-dimensional vector graphics, both static and dynamic.

CSS
New selectors
Typography
Visuals
- Text wrapping
- Columns
- Text Stroke
- Opacity
- HSL
- Rounded Corners
- Gradients
- Shadow
- Transitions, Transforms and Animations

New selector

Typography
New font support

Visuals
Text wrapping
Columns
Text Stroke
Opacity
HSL
Rounded Corners
Gradients
Shadow

And the rest…
Transitions
Transforms
Animations

Thank you
May the force be with you…

http://ardianto.net	169
http://pratomo.ardianto.net	87
http://www.ardianto.net	9
http://translate.googleusercontent.com	1

Google Dev Fest HTML5 Presentation

by Pratomo Ardianto on Aug 19, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 266

Statistics

Google Dev Fest HTML5 Presentation — Presentation Transcript