Google Dev Fest HTML5 Presentation
-
Upload
pratomo-ardianto -
Category
Technology
-
view
2.914 -
download
0
description
Transcript of Google Dev Fest HTML5 Presentation
![Page 1: Google Dev Fest HTML5 Presentation](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b519e34a7959a2458b466e/html5/thumbnails/1.jpg)
HTML5 ~= HTML + CSS + JS APIS
HTML5
Web Development to the next level
![Page 2: Google Dev Fest HTML5 Presentation](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b519e34a7959a2458b466e/html5/thumbnails/2.jpg)
Rough Timeline of Web Technologies
![Page 3: Google Dev Fest HTML5 Presentation](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b519e34a7959a2458b466e/html5/thumbnails/3.jpg)
JS APIs
- Client Side Storage (Web SQL Database, App Cache, Web Storage)
- Communication (Web Socket, Worker Workers)
- Desktop Experience (Notification, Drag and Drop API)
![Page 4: Google Dev Fest HTML5 Presentation](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b519e34a7959a2458b466e/html5/thumbnails/4.jpg)
Client Side Storage
Web StorageNew methods for storing data on the client- localStorage – storages data with no limit- sessionStorage – stores data for one session
![Page 5: Google Dev Fest HTML5 Presentation](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b519e34a7959a2458b466e/html5/thumbnails/5.jpg)
Client Side Storage
App CacheWeb application that work offline.
![Page 6: Google Dev Fest HTML5 Presentation](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b519e34a7959a2458b466e/html5/thumbnails/6.jpg)
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.
![Page 7: Google Dev Fest HTML5 Presentation](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b519e34a7959a2458b466e/html5/thumbnails/7.jpg)
![Page 8: Google Dev Fest HTML5 Presentation](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b519e34a7959a2458b466e/html5/thumbnails/8.jpg)
Client Side Storage
Web SQL DatabaseBring SQL to the client side.
![Page 9: Google Dev Fest HTML5 Presentation](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b519e34a7959a2458b466e/html5/thumbnails/9.jpg)
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.
![Page 10: Google Dev Fest HTML5 Presentation](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b519e34a7959a2458b466e/html5/thumbnails/10.jpg)
Desktop Experience
NotificationPop up notification desktop app-style.
![Page 11: Google Dev Fest HTML5 Presentation](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b519e34a7959a2458b466e/html5/thumbnails/11.jpg)
Desktop Experience
Drag and Drop APISimply drag and drop object.
![Page 13: Google Dev Fest HTML5 Presentation](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b519e34a7959a2458b466e/html5/thumbnails/13.jpg)
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)
![Page 14: Google Dev Fest HTML5 Presentation](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b519e34a7959a2458b466e/html5/thumbnails/14.jpg)
Semantics
New tags
![Page 15: Google Dev Fest HTML5 Presentation](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b519e34a7959a2458b466e/html5/thumbnails/15.jpg)
New tags
![Page 16: Google Dev Fest HTML5 Presentation](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b519e34a7959a2458b466e/html5/thumbnails/16.jpg)
Semantics
Link relations- A way to explain why you’re pointing to
another page.- <a href=“somelink.html” rel=“nofollow”
>some text</a>
![Page 17: Google Dev Fest HTML5 Presentation](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b519e34a7959a2458b466e/html5/thumbnails/17.jpg)
Link relations
![Page 18: Google Dev Fest HTML5 Presentation](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b519e34a7959a2458b466e/html5/thumbnails/18.jpg)
Semantics
Microdata
![Page 19: Google Dev Fest HTML5 Presentation](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b519e34a7959a2458b466e/html5/thumbnails/19.jpg)
Microdata
![Page 20: Google Dev Fest HTML5 Presentation](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b519e34a7959a2458b466e/html5/thumbnails/20.jpg)
Accessibility
ARIA (Accessible Rich Internet Application)- Defines a way to make web content and web
applications more accessible to people with disabilities.
![Page 21: Google Dev Fest HTML5 Presentation](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b519e34a7959a2458b466e/html5/thumbnails/21.jpg)
Web Form 2.0
New form field types- Slider- Color field- Search text field- Email field- Digit (number) field- Telephone field- etc
![Page 22: Google Dev Fest HTML5 Presentation](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b519e34a7959a2458b466e/html5/thumbnails/22.jpg)
Multimedia
Video tag and Audio tag- Playing video or audio without plugin.
![Page 23: Google Dev Fest HTML5 Presentation](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b519e34a7959a2458b466e/html5/thumbnails/23.jpg)
2D and 3D Drawing
Canvas- Allows for dynamic, scriptable rendering of
2D shapes and bitmap images.
![Page 24: Google Dev Fest HTML5 Presentation](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b519e34a7959a2458b466e/html5/thumbnails/24.jpg)
2D and 3D Drawing
Canvas 3D (WebGL)- Allows for dynamic, scriptable rendering of
3D shapes and bitmap images.
![Page 25: Google Dev Fest HTML5 Presentation](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b519e34a7959a2458b466e/html5/thumbnails/25.jpg)
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.
![Page 26: Google Dev Fest HTML5 Presentation](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b519e34a7959a2458b466e/html5/thumbnails/26.jpg)
CSS
- New selectors- Typography- Visuals
- Text wrapping- Columns- Text Stroke- Opacity
- HSL - Rounded Corners - Gradients - Shadow - Transitions, Transforms and Animations
![Page 27: Google Dev Fest HTML5 Presentation](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b519e34a7959a2458b466e/html5/thumbnails/27.jpg)
New selector
![Page 28: Google Dev Fest HTML5 Presentation](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b519e34a7959a2458b466e/html5/thumbnails/28.jpg)
Typography
New font support
![Page 29: Google Dev Fest HTML5 Presentation](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b519e34a7959a2458b466e/html5/thumbnails/29.jpg)
Visuals
- Text wrapping- Columns- Text Stroke- Opacity - HSL- Rounded Corners- Gradients- Shadow
![Page 30: Google Dev Fest HTML5 Presentation](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b519e34a7959a2458b466e/html5/thumbnails/30.jpg)
And the rest…
- Transitions- Transforms- Animations
![Page 31: Google Dev Fest HTML5 Presentation](https://reader033.fdocuments.net/reader033/viewer/2022051611/54b519e34a7959a2458b466e/html5/thumbnails/31.jpg)
Thank you
May the force be with you…