HTML5: Introduction
-
date post
18-Oct-2014 -
Category
Technology
-
view
653 -
download
2
description
Transcript of HTML5: Introduction
![Page 1: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/1.jpg)
HTML5Everything changes...
![Page 2: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/2.jpg)
HTML5 is awesome!
![Page 3: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/3.jpg)
HTML 4
<h2>Título de un artículo</h2><p> <strong>Había una vez...<strong> un ninja que <em>estaba sólo</em>.</p>
![Page 4: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/4.jpg)
HTML5
<h2>Título de un artículo</h2><p> <strong>Había una vez...<strong> un ninja que <em>estaba sólo</em>.</p>
![Page 5: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/5.jpg)
HTML5
<h2>Título de un artículo</h2><p> <strong>Había una vez...<strong> un ninja que <em>estaba sólo</em>.</p>
![Page 6: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/6.jpg)
Thanks!
![Page 7: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/7.jpg)
HTML5 is awesome!
![Page 8: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/8.jpg)
HTML5
HTML
CSS
JavaScript
![Page 9: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/9.jpg)
Collection of tools• Semantics
• Offline & Storage
• Devices Access
• Connectivity
• Multimedia
• 3D, Graphics & Effects
• Performance & Integration
![Page 10: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/10.jpg)
Semantics & Markup
![Page 11: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/11.jpg)
Semantics• More meaningful elements
• Better semantic tags and attributes
• Semantic structure
• Microdata / Microformats
• ARIA attributes
• New form types
• More simple and cool
![Page 12: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/12.jpg)
Doctype
![Page 13: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/13.jpg)
Doctype
• Switch the content into standards mode
• Prevent quirks mode
• Case-insensitive
![Page 14: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/14.jpg)
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/
DTD/xhtml1-transitional.dtd">
![Page 15: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/15.jpg)
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/
DTD/xhtml1-transitional.dtd">
![Page 16: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/16.jpg)
<!DOCTYPE html>
![Page 17: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/17.jpg)
Better semantic tags
![Page 18: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/18.jpg)
HTML 4
![Page 19: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/19.jpg)
HTML5
![Page 20: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/20.jpg)
Custom data attribute
![Page 21: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/21.jpg)
Custom data attribute
data-*
inside HTML elements
Parse them using JavaScript (getAttribute method)
* = custom attributes: user, name, phone, id, chico, meli, etc...
![Page 22: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/22.jpg)
data-*
<a id="CATEG:1039" href="/camaras">Cámaras</a>
![Page 23: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/23.jpg)
data-*
<a data-id="CATEG:1039" href="/camaras">Cámaras</a>
![Page 24: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/24.jpg)
Mircrodata
• Semantic attributes and properties
• Search engines, Web crawlers, Browsers
• Provide a richer browsing experience for users
![Page 25: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/25.jpg)
<p itemscope> I’m going to the <a itemprop="url" href="http://www.saltercane.com/">Salter Cane</a> gig <data itemprop="date" datetime="2010-07-18">next week</data>. Excited!</p>
![Page 26: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/26.jpg)
ARIA
![Page 27: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/27.jpg)
ARIA attributes
• Improve the accessibility of RIAs
• JavaScript components
• Helps with dynamic content
• Semantic attributes and properties:
• roles (tree, navigation, presentation)
• properties (aria-selected, aria-hidden)
![Page 28: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/28.jpg)
<a href=”/buy” role=”button”>Comprar</a>
![Page 29: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/29.jpg)
<div role=”tooltip”>For Nerds, by Nerds</div>
![Page 30: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/30.jpg)
Forms
![Page 31: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/31.jpg)
New forms
• Semantic types and attributes
• Mobile compatibility
• Validation engine
• Custom patterns
• More control
![Page 32: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/32.jpg)
<input type=”email”> <input type=”tel”>
![Page 33: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/33.jpg)
<input type=”date”> <input type=”range”>
<input type=”color”>
![Page 34: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/34.jpg)
<input type=“text” placeholder=”Search Bookmarks and His”>
<input type=“text” required=“required”>
![Page 35: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/35.jpg)
Offline & storage
![Page 36: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/36.jpg)
Web Storage
• Local storage / Session storage
• IndexedDB
• Application Cache (offline apps)
![Page 37: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/37.jpg)
Local Storage
• JavaScript API
• Cliente-side database
• Key-value notation (JSON)
• Stored in users browsers
• 5 MB (per domain)
• the data persists (after the browser is shutdown or the session is closed)
![Page 38: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/38.jpg)
<ul id="tree1" role="tree" tabindex="0" aria-labelledby="label_1"> <li role="treeitem" tabindex="-1" aria-expanded="true">Fruits</li> <li role="group"> <ul> <li role="treeitem" tabindex="-1">Oranges</li> <li role="treeitem" tabindex="-1">Pineapples</li> ... </ul> </li></ul>
![Page 39: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/39.jpg)
Session Storage =
Local Storage
![Page 40: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/40.jpg)
limited to the time span where the current window is open
once the window is shut will be invalid
Session Storage =
Local Storage
![Page 41: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/41.jpg)
IndexDB
![Page 42: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/42.jpg)
IndexDB
• Web SQL database must die!
• Object Store
• http://www.html5rocks.com/en/tutorials/indexeddb/todo/
![Page 43: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/43.jpg)
AppCache
![Page 44: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/44.jpg)
AppCache
• Offline First
• Chache manifest (*.appcache => file)
• Load from local cache (HTML, CSS, JS and images)
• mimetype: text/cache-manifest
• 5MB (chrome = unlimitedStorage)
• window.applicationCache
![Page 45: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/45.jpg)
<html manifest="chico.appcache">
CACHE MANIFEST# v0.11
CACHE:versions/latest/chico.cssversions/latest/jquery.jsversions/latest/chico.jssrc/assets/ninja.png
NETWORK:*
![Page 46: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/46.jpg)
Device Access
![Page 47: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/47.jpg)
Device Access
• Geolocation API
• Camera / Microphone
• Local Data (contacts and events)
• Device Orientation
• Device Motion
• Vibration
• Notification
![Page 48: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/48.jpg)
Device Access
• Geolocation API
• Camera / Microphone
• Local Data (contacts and events)
• Device Orientation
• Device Motion
• Vibration
• Notification
![Page 49: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/49.jpg)
Connectivity
![Page 50: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/50.jpg)
Connectivity
• Web Sockets
• Server-sent events
• Real time
![Page 51: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/51.jpg)
Web Sockets
• JavaScript API
• Real time connections
• Bi-directional communications
![Page 52: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/52.jpg)
Who is using Web Sockets?
• Facebook (chat, notifications, comments)
• Gmail
![Page 53: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/53.jpg)
Multimedia
![Page 54: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/54.jpg)
Multimedia
•Video
•Audio
![Page 55: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/55.jpg)
Who is using Multimedia?
• Youtube
• Vimeo
• GrooveShark
![Page 56: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/56.jpg)
Video Audio
![Page 57: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/57.jpg)
![Page 58: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/58.jpg)
3D, Graphics, Effects
![Page 59: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/59.jpg)
3D, Graphics, Effects
• SVG
• Canvas
• WebGL
• CSS3 3D
![Page 60: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/60.jpg)
SVG• Scalable Vector Graphic
• Language for rich graphical content like as:
• Pie charts,
• Two-dimensional graphs
![Page 61: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/61.jpg)
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">! <circle id="redcircle" cx="50" cy="50" r="50" fill="red" /></svg>
![Page 62: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/62.jpg)
Canvas
• HTML Element
• Draw graphics (with JavaScript)
• Control every pixel
![Page 63: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/63.jpg)
Canvas
![Page 64: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/64.jpg)
WebGL
• Web-based Graphics Library
• Interactive 3D graphics
• Canvas 3D
• JavaScript API
![Page 66: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/66.jpg)
Performance & Integration
![Page 67: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/67.jpg)
Performance & Integration
•Web Workers
•XMLHttpRequest2
![Page 68: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/68.jpg)
Web Workers
•JavaScript API
•Load JS file dynamically
•Process code in a background
•Multi JavaScript thread
![Page 69: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/69.jpg)
XMLHttpRequest2
•Ajax
•Uploading progress events (progress tag)
•Working with files (file system api)
•FormData
•CORS (cross domain request)
![Page 70: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/70.jpg)
CSS3
![Page 71: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/71.jpg)
CSS3
• Transitions
• Animations
• Transforms
• Gradients
• Rounded corners
• Flexible Box Model
• Multi-column
Webfonts
Text wrapping
Columns
Opacity
Backgrounds
CSS selectors
Shadows
![Page 72: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/72.jpg)
Transforms, Transitions and Animations
http://leaverou.github.com/animatable/
http://cubic-bezier.com/#.17,.67,.83,.67
![Page 73: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/73.jpg)
Gradients
btn.primary{ background-image: linear-gradient(top, #BACDFF, #4055A5 3%, #283077);}
![Page 74: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/74.jpg)
Rounded corners
btn.primary{ border-radius: 5px;}
![Page 75: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/75.jpg)
CSS selectors
p:nth-child(3) { }
input:checked { }
p:first-of-type { }
p ~ ul { }
![Page 76: HTML5: Introduction](https://reader038.fdocuments.in/reader038/viewer/2022102620/5442bb40b1af9f410a8b4743/html5/thumbnails/76.jpg)
Thanks!