Wesley Reisz
What's the first thing that comes to mind when someone asks about HTML5?
|
Definition: WHATWG Definition: W3C Working Group HTML5 |
Global IP Traffic Growth, 2011-2016 | |||||||
---|---|---|---|---|---|---|---|
2011 | 2012 | 2013 | 2014 | 2015 | 2016 | CAGR 2011-2016 | |
Fixed Internet | 23,288 | 32,990 | 40,587 | 50,888 | 64,349 | 81,347 | 28% |
Managed IP | 6,849 | 9,199 | 11,846 | 13,925 | 16,085 | 18,131 | 21% |
Mobile data | 597 | 1,252 | 2,379 | 4,215 | 6,896 | 10,804 | 78% |
HTML Markup (aka Semantic Tags)
<div id="header"> <h2>My Website Header</h2> </div> <div id="page"> <div id="navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Blog</a></li> </ul> </div> <div id="content"> <div class="bloc"> <h1>Fluid Layout</h1> <div class="data"> <div id="divOutput"></div> </div> <p>Jelly beans jelly beans marshmallow marshmallow muffin tart brownie ...
<header> <h2>My Website Header</h2> </header> <article id="page"> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Blog</a></li> </ul> </nav> <section id="content"> <div class="bloc"> <h1>Fluid Layout</h1> <section class="data"> <output id="divOutput"></output> </section> <p>Jelly beans jelly beans marshmallow marshmallow muffin tart brownie. ...
Congrats! You've earned the Ninja Panda Award for mastering HTML5 Semantic Tags!
But wait... there's more HTML Markup/Markup Related Goodness
<input type="text" name="name" placeholder="Wes"> <input type="range" min="0" max="10" name="priority" value="0" id="priority" > <input type="number" name="estimated_hours" min="0" max="1000" id="estimated_hours" placeholder="500"> <input type="date" name="start_date" id="start_date" value="2010-12-01" > <input type="email" name="email" id="email" placeholder="user@domain.com"> <input type="url" name="url" id="url" placeholder="http://www.wesleyreisz.com"> <input type="color" name="project_color" id="project_color"> |
<meter value=75 min=0 max=100 low=20 high=98>75%</meter>
Grades:
<meter min=50 max=200 low=90 high=119 optimum=100></meter>
Blood Pressure:
<p>Progress Bar: <progress id="progress1" value="125" min="0" max="200">125</progress>
Progress Bar:
data-*
attributes!The data-* attributes of HTML5 are just an "official" way to add arbitrary data to html elements within valid html code.
<img src="photo.jpg" data-docNumber="CDE45" id="img123" date="12 September 2012">
var mydiv=document.getElementById('mydiv') //Using DOM's getAttribute() property var documentNumber=mydiv.getAttribute("data-docNumber") //returns "CDE45" mydiv.setAttribute("data-docNumber", "WTR44") //changes "data-docNumber" to "WTR44" mydiv.removeAttribute("data-docNumber") //removes "data-docNumber" attribute entirely
<div itemscope itemtype="http://data-vocabulary.org/Person"> My name is <span itemprop="name">Wesley Reisz</span>, and I am a <span itemprop="jobtitle">solution architect</span> from the <a href="http://www.hp.com" itemprop="affiliation">HP Enterprise Service</a>. My email is <span itemprop="email">wes@wesleyreisz.com</span> and I live in the city of <span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address"> <span itemprop="locality">Louisvile</span>, in the <span itemprop="state" >Kentucky</span> United States </span> </div>
Video/Audio on the Web
Can I use the Audio tag?
Can I use the video tag?
The State Of HTML5 Video by longtailvideo
<div style="text-align:center"> <div style="text-align:center"> <video id="video1" width="600"> <source src="images/mov_bbb.mp4" type="video/mp4"><source src=" images/mov_bbb.ogg" type="video/ogg"> Your browser does not support HTML5 video. </video><br /> <button onclick="myVideo.playPause()">Play/Pause</button> <button onclick="myVideo.makeBig()">Big</button> <button onclick="myVideo.makeSmall()">Small</button> <button onclick="myVideo.makeNormal()">Normal</button> </div> <br class="clear" /> <script> myVideo.vid=document.getElementById("video1"); </script> </div> </div> |
var myVideo={}; myVideo.playPause=function(){ if (myVideo.vid.paused){ myVideo.vid.play(); }else{ myVideo.vid.pause(); } } myVideo.makeBig=function(){ myVideo.vid.width=800; } myVideo.makeSmall=function(){ myVideo.vid.width=320; } myVideo.makeNormal=function(){ myVideo.vid.width=600; } |
Speech recognition and synthesis for web apps.
var recognizer = new speechRecognition(); recognizer.continuous = true; recognizer.interimResults = true; recognizer.onresult = function(e) { if (e.results.length) { var lastResultIdx = e.results.resultIndex; console.log(e.results[lastResultIdx][0].transcript); } }; recognizer.start();
A Few Other Kewl HTML5 Features
Congrats! You've earned the Grasshopper Award for mastering the 2D Animation with HTML5 Canvas!
More Core HTML5 Features
<html manifest="cache.appcache">
window.applicationCache.addEventListener('updateready', function(e) { if (window.applicationCache.status == window.applicationCache.UPDATEREADY) { window.applicationCache.swapCache(); if (confirm('A new version of this site is available. Load it?')) { window.location.reload(); } } }, false);cache.appcache:
CACHE MANIFEST # version 1.0.0 CACHE: /html5/src/logic.js /html5/src/style.css /html5/src/background.png
CSS3 Tricks & Features
The size of rem/em units are dependent on parent elements
The size of viewport units are based purely on viewport size!
Value is equal to 1% (1/100th) of width/height:
#li-image5{ position: absolute; top:4vw; left:30vw; transform:rotate(15deg); -ms-transform:rotate(15deg); -webkit-transform:rotate(15deg) }
#li-image3{ position: absolute; top:20vw; left:30vw; clip-path:polygon(100% 50%,84.70057014808336% 54.5684167277018%,...) } #li-image3:hover{ animation:"clip" 1s infinite } @-webkit-keyframes "clip" { 0% { clip-path: polygon(100% 50%,84.70057014808336% 54.5684167277018%,...); } 50% { clip-path: polygon(84.70057014808336% 54.5684167277018%,91.0518476172854% ...); } 100% { clip-path: polygon(91.0518476172854% 60.99980941685713%,82.33578363789503% ...); } }
body { var-fontColor: red; color: var(fontColor); }
Define variable name prefixed with "var-". Use by passing it to var()
Names are case-sensitive
Scoped to the rule they're defined in but cascade to children
Allows fallback values: color:var(fontColor, blue);
Extremely new... only in Chrome enabled in experimental WebKit about: flags"
:root { /* "global variables" */ var-textColor: yellow; var-backgroundColor: pink; } footer { var-backgroundColor: black; background-color: var(backgroundColor); /* black */ color: var(textColor); /* inherited yellow */ } footer > span { var-textColor: white; color: var(textColor); /* white */ background-color: var(backgroundColor); /* inherited black */ }
Congrats! You've earned the Donatello Award for CSS3 Knowledge!
Modernizr runs quickly on page load to detect features; it then creates a JavaScript object with the results, and adds classes to the html element for you to key your CSS on.
Modernizr.load({ test: Modernizr.geolocation, yep : 'geo.js', nope: 'geo-polyfill.js' });
Linkage: Tutorial
Polyfill: A shim that mimics a future API providing fallback functionality to older browsers. -Alex Sexton
Linkage: One or Two Polyfills
Congrats! You've earned the Kick Ass HTML5 Award!
Ninja Panda Award for mastering HTML5 Semantic Tags
|
Grasshopper Award for mastering the 2D Animation with HTML5 Canvas
|
Donatello Award for CSS3 Knowledge!
|
Kick Ass HTML5 Award for Awesomeness!
|
Wesley Reisz