Post on 18-Oct-2014
description
transcript
HTML5Everything changes...
HTML5 is awesome!
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>
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>
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>
Thanks!
HTML5 is awesome!
HTML5
HTML
CSS
JavaScript
Collection of tools• Semantics
• Offline & Storage
• Devices Access
• Connectivity
• Multimedia
• 3D, Graphics & Effects
• Performance & Integration
Semantics & Markup
Semantics• More meaningful elements
• Better semantic tags and attributes
• Semantic structure
• Microdata / Microformats
• ARIA attributes
• New form types
• More simple and cool
Doctype
Doctype
• Switch the content into standards mode
• Prevent quirks mode
• Case-insensitive
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/
DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/
DTD/xhtml1-transitional.dtd">
<!DOCTYPE html>
Better semantic tags
HTML 4
HTML5
Custom data attribute
Custom data attribute
data-*
inside HTML elements
Parse them using JavaScript (getAttribute method)
* = custom attributes: user, name, phone, id, chico, meli, etc...
data-*
<a id="CATEG:1039" href="/camaras">Cámaras</a>
data-*
<a data-id="CATEG:1039" href="/camaras">Cámaras</a>
Mircrodata
• Semantic attributes and properties
• Search engines, Web crawlers, Browsers
• Provide a richer browsing experience for users
<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>
ARIA
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)
<a href=”/buy” role=”button”>Comprar</a>
<div role=”tooltip”>For Nerds, by Nerds</div>
Forms
New forms
• Semantic types and attributes
• Mobile compatibility
• Validation engine
• Custom patterns
• More control
<input type=”email”> <input type=”tel”>
<input type=”date”> <input type=”range”>
<input type=”color”>
<input type=“text” placeholder=”Search Bookmarks and His”>
<input type=“text” required=“required”>
Offline & storage
Web Storage
• Local storage / Session storage
• IndexedDB
• Application Cache (offline apps)
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)
<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>
Session Storage =
Local Storage
limited to the time span where the current window is open
once the window is shut will be invalid
Session Storage =
Local Storage
IndexDB
IndexDB
• Web SQL database must die!
• Object Store
• http://www.html5rocks.com/en/tutorials/indexeddb/todo/
AppCache
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
<html manifest="chico.appcache">
CACHE MANIFEST# v0.11
CACHE:versions/latest/chico.cssversions/latest/jquery.jsversions/latest/chico.jssrc/assets/ninja.png
NETWORK:*
Device Access
Device Access
• Geolocation API
• Camera / Microphone
• Local Data (contacts and events)
• Device Orientation
• Device Motion
• Vibration
• Notification
Device Access
• Geolocation API
• Camera / Microphone
• Local Data (contacts and events)
• Device Orientation
• Device Motion
• Vibration
• Notification
Connectivity
Connectivity
• Web Sockets
• Server-sent events
• Real time
Web Sockets
• JavaScript API
• Real time connections
• Bi-directional communications
Who is using Web Sockets?
• Facebook (chat, notifications, comments)
• Gmail
Multimedia
Multimedia
•Video
•Audio
Who is using Multimedia?
• Youtube
• Vimeo
• GrooveShark
Video Audio
3D, Graphics, Effects
3D, Graphics, Effects
• SVG
• Canvas
• WebGL
• CSS3 3D
SVG• Scalable Vector Graphic
• Language for rich graphical content like as:
• Pie charts,
• Two-dimensional graphs
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">! <circle id="redcircle" cx="50" cy="50" r="50" fill="red" /></svg>
Canvas
• HTML Element
• Draw graphics (with JavaScript)
• Control every pixel
Canvas
WebGL
• Web-based Graphics Library
• Interactive 3D graphics
• Canvas 3D
• JavaScript API
Performance & Integration
Performance & Integration
•Web Workers
•XMLHttpRequest2
Web Workers
•JavaScript API
•Load JS file dynamically
•Process code in a background
•Multi JavaScript thread
XMLHttpRequest2
•Ajax
•Uploading progress events (progress tag)
•Working with files (file system api)
•FormData
•CORS (cross domain request)
CSS3
CSS3
• Transitions
• Animations
• Transforms
• Gradients
• Rounded corners
• Flexible Box Model
• Multi-column
Webfonts
Text wrapping
Columns
Opacity
Backgrounds
CSS selectors
Shadows
Transforms, Transitions and Animations
http://leaverou.github.com/animatable/
http://cubic-bezier.com/#.17,.67,.83,.67
Gradients
btn.primary{ background-image: linear-gradient(top, #BACDFF, #4055A5 3%, #283077);}
Rounded corners
btn.primary{ border-radius: 5px;}
CSS selectors
p:nth-child(3) { }
input:checked { }
p:first-of-type { }
p ~ ul { }
Thanks!