google dev fest html5 presentation
DESCRIPTION
The slide presentation about HTML5 that I created inspired by GoogleDevFest Singapore 2010.TRANSCRIPT
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 StorageNew methods for storing data on the client- localStorage – storages data with no limit- sessionStorage – stores data for one session
Client Side Storage
App CacheWeb application that work offline.
Communication
Web SocketBi-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 DatabaseBring SQL to the client side.
Communication
Worker WorkersPossibility 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
NotificationPop up notification desktop app-style.
Desktop Experience
Drag and Drop APISimply drag and drop object.
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…