Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: a01ba2245d
Fetching contributors…

Cannot retrieve contributors at this time

executable file 525 lines (488 sloc) 15.473 kb
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 introduction - revolunet</title>
<meta name="author" content="Hakim El Hattab">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="reveal/css/reset.css">
<link rel="stylesheet" href="reveal/css/main.css">
<link rel="stylesheet" href="reveal/lib/zenburn.css">
<style>
#reveal .slides {
top:40%;
}
#reveal h1.huge {
font-size:300px;
}
#reveal h2 {
font-size:160px;
}
#reveal h3 {
font-size:120px;
}
.pink {
color:#F06 !important;
}
.orange {
color:rgb(232,80,8) !important;
}
.lightblue {
color:#13DAEC !important;
}
ul li {
list-style-type: none;
text-align:center;
font-size:50px;
margin-bottom:20px;
line-height:50px;
}
@-webkit-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
.blinktag {
-webkit-animation-name: blinker;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 1s;
}
@-webkit-keyframes lightblinker {
0% { opacity: 1.0; }
50% { opacity: 0.7; }
100% { opacity: 1.0; }
}
.lightblinktag {
-webkit-animation-name: lightblinker;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 1.5s;
}
</style>
</head>
<body>
<div id="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<h1 class='huge'>HTML <span class=''>5</span></h1>
<h3 class="lightblue">introduction</h3>
<img src="img/html5-small.png" style='background:white;padding:20px'/>
<script>
// Delicously hacky. Look away.
if( navigator.userAgent.match( /(iPhone|iPad|iPod|Android)/i ) )
document.write( '<p style="color: rgba(0,0,0,0.3); text-shadow: none;">('+'Tap to navigate'+')</p>' );
</script>
</section>
<section>
<h2>Who's that ?</h2>
<br>
<ul>
<li>+10 years in #webdev</li>
<li>RIA & mobile web development</li>
<li>Open source supporter</li>
<li>Beer drinker</li>
</ul>
<br><br>
<i><a href="http://revolunet.com">Julien Bouquillon</a> / <a href="http://twitter.com/revolunet">@revolunet</a></i>
<br>
<a href='http://revolunet.com'><img src='img/revolunet.jpeg' width=100 height=100 /></a>
</section>
<section>
<section>
<h1>History bits</h1>
<img src="img/pyramid.jpeg"/>
</section>
<section>
<h1>1990</h1>
<h3>Tim Berners-Lee</h3>
creates the internet and HTML 1.0 at French CERN
<br/>
<img src="img/tim.jpeg"/>
</section>
<section>
<h1>awesome websites</h1>
<br>
<img src="img/first-website.png"/>
<br>
(1991)
</section>
<section>
<h1>1994</h1>
<h3>Tim Berners-Lee</h3>
funds the W3C at Boston MIT
<br/>
<img src="img/w3c-small.jpeg"/>
</section>
<section>
<h1>awesome websites</h1>
<br>
<img src="img/1994.png"/>
<br>
(1994)
</section>
<section>
<h1>awesome websites</h1>
<br>
<img src="img/1998.jpeg"/>
<br>
(1998)
</section>
<section>
<h1>HTML EARLY DAYS</h1>
<br>
<img src="img/pise.jpeg" style='float:left'/>
<br>
<ul>
<li style='font-size:70px;margin-bottom:20px'>1995 : HTML 2</li>
<li style='font-size:70px;margin-bottom:20px'>1996 : HTML 3</li>
<li style='font-size:70px;margin-bottom:20px'>1997 : HTML 4</li>
<li style='font-size:70px;margin-bottom:20px'>2001 : XHTML 1.1</li>
<li style='font-size:70px;margin-bottom:20px'>2002 : XHTML 2.0</li>
<br>
<li style='font-size:100px;font-weight:bold' class='pink'>#FAIL</li>
</ul>
<div style='clear:both'></div>
</section>
<section>
<h1>XHTML FAILURE</h1>
<!-- <i><div style='font-size:60px;line-height:70px'> -->
<img src="img/lolcat_404.jpeg"/>
<br><br>
<blockquote>
It is necessary to
<br>
<span class='pink'>evolve HTML <b >incrementally</b></span>
<br>
The attempt to switch to XML didn't work.</blockquote>
<br>
<div style='text-align:right'>Tim Berners Lee, 2004</div>
</section>
<section>
<h1>HTML REBIRTH</h1>
<img src="img/phoenix.jpeg" style='float:left'/>
<br><br>
<ul>
<li style='font-size:120px;margin-bottom:20px;font-weight:bold'>2004</li>
<br>
<li style='font-size:50px;margin-bottom:20px'>Apple + Opera + Mozilla</li>
<li style='font-size:45px;margin-bottom:20px'>WHATWG dissidents group</li>
<br>
<li style='font-size:80px;font-weight:bold' class='pink'>HTML5 FUTURE</li>
</ul>
<div style='clear:both'></div>
</section>
</section>
<section>
<h1 style='font-size:200px' >HTML5 IS NOT</h1>
<br>
<h3 class=" lightblue">CSS3 nor SVG</h3>
<h3 style='font-size:140px' class="fragment orange">JAVASCRIPT</h3>
<h3 style='font-size:180px' class="fragment lightblue">FINISHED</h3>
</section>
<section>
<h1 style='font-size:200px'>HTML5 IS</h1>
<br>
<h3 class=" lightblue" style="font-size:165px">A Working draft</h3>
<h3 class="fragment orange" style="font-size:85px">Backward + Forward compatible</h3>
<h3 class="fragment lightblue" style="font-size:110px">made for the modern web</h3>
<h3 class="fragment orange">and its various devices</h3>
<!-- TODO -->
</section>
<section>
<section>
<h1 class='huge'>What's</h1>
<h1 class="blinktag huge pink">NEW ?</H1>
</section>
<section>
<h1>Syntax</h1>
<br>
<ul>
<li class=" lightblue" style="font-size:80px;">New elements</li>
<li>header, footer, section, article, nav...</li>
<br>
<li class=" lightblue" style="font-size:70px;">New / enhanced attributes</li>
<li>data-*, contenteditable, accesskey, draggable/dropzone, spellcheck...</li>
<br>
<li class=" pink" style="font-size:80px;font-weight:bold">Easier than ever</li>
</ul>
</section>
<section>
<h1>HTML5 structure</h1>
<br>
<pre><code style='font-size:20px;line-height:25px'>&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;title&gt;HTML5 Paris meetup&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;header&gt;
&lt;nav&gt;
&lt;a href='/home'&gt;Home&lt;/a&gt;
&lt;a href='/contact'&gt;Contact&lt;/a&gt;
&lt;/nav&gt;
&lt;/header&gt;
&lt;section&gt;
&lt;article&gt;blablabla&lt;/article&gt;
&lt;/section&gt;
&lt;footer&gt;copyright 2012&lt;/footer&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</section>
<section>
<h1>Semantic</h1>
<br>
<ul>
<li class=" lightblue" style="font-size:60px;">Microdata (ex microformats)</li>
<li>Give more sense to your markup</li>
<li>googlebot friendly (rich snippets)</li>
<li>standards friendly</li>
<br>
<li class=" lightblue" style="font-size:80px;">ARIA</li>
<li>Accessibility</li>
<li>role, tabindex, state & properties</li>
</ul>
</section>
<section>
<h1>New features</h1>
<ul>
<br>
<li class=" lightblue" style="font-size:80px;">Offline access (mobile)</li>
<br>
<li class=" pink" style="font-size:80px;">Storage & Device access</li>
<br>
<li class=" lightblue" style="font-size:80px;">Multimedia & graphics</li>
<br>
<li class=" pink" style="font-size:80px;">Communications</li>
<br>
<li class=" lightblue" style="font-size:80px;">Better forms</li>
</ul>
</section>
<section>
<h1>HTML5 form example</h1>
<br>
<pre><code style='font-size:18px;line-height:25px'>&lt;!doctype html&gt;
&lt;meta charset="utf-8"&gt;
&lt;style&gt;
// inputs styling
input[required] { background:#DDD; }
input[required]:invalid { border: 1px solid red; }
input[required]:valid { border: 3px solid green; }
// validation styling
::-webkit-validation-bubble-message{
border:2px solid green;
background: -webkit-gradient(linear, left top,....;
}
&lt;/style&gt;
&lt;form&gt;
&lt;input type="text" placeholder="Nom & prénom" title="Nom ET Prénom SVP" pattern="\w+\s+\w+"&gt;
&lt;br&gt;
&lt;input type="email" required placeholder="Votre email"&gt;
&lt;br&gt;
&lt;input type="tel" placeholder="Téléphone" pattern="[\d\s\.]+"&gt;
&lt;br&gt;
&lt;input type="range" min="1" max="100" value="28" &gt;
&lt;br&gt;
&lt;input type="submit" &gt;
&lt;/form&gt;</code></pre>
</section>
<section>
<h1>Awesome HTML5 form</h1>
<br>
<img src="img/form1.png"/>
</section>
<section>
<h1>Javascript APIs</h1>
<ul>
<br>
<li class=" lightblue" style="font-size:80px;">Canvas 2D/3D</li>
<br>
<li class=" pink" style="font-size:80px;">Drag & Drop</li>
<br>
<li class=" lightblue" style="font-size:80px;">History API</li>
<br>
<li class=" pink" style="font-size:80px;">Geolocation</li>
<br>
<li class=" lightblue" style="font-size:70px;">Web Workers, Web Sockets</li>
<li class=" pink" style="font-size:80px;">...</li>
</ul>
</section>
<section>
<h1>10 secs geolocation</h1>
<br>
<pre><code style='font-size:18px;line-height:25px'>&lt;script &gt;
function geolocate() {
navigator.geolocation.getCurrentPosition(success, error);
}
function success(result) {
var co = result.coords;
document.getElementById('result').innerText = co.latitude + ',' + co.longitude;
}
function error(result) {
document.getElementById('result').innerHTML = "geolocation failed :/";
}
&lt;/script&gt;
&lt;h1&gt;Geolocation example&lt;/h1&gt;
&lt;button onclick="geolocate()"&gt;geolocate me !&lt;/button&gt;
&lt;h3 id="result"&gt;&lt;/h3&gt;
</code></pre>
</section>
</section>
<section>
<br>
<section>
<h1>HTML5 examples</h1>
<br><br>
<h1 class="pink huge lightblinktag">Apps</h1>
</section>
<section>
<h1>Offline gmail</h1>
<img src="img/app-gmail.png"/>
<br><br>
Offline manifest, Web SQL Database, localStorage...
</section>
<section>
<h1>Youtube HTML5</h1>
<img src="img/app-youtube.png"/>
<br><br>
Audio, Video, Fullscreen, localStorage
</section>
<section>
<h1>Body Browser</h1>
<img src="img/app-bodybrowser.jpeg"/>
<br><br>
WebGL 3D
</section>
<section>
<h1>GlobeTweeter</h1>
<img src="img/app-globetweeter.jpeg"/>
<br><br>
WebGL 3D, WebSockets, geolocation<br>
by <a href='http://twitter.com/trigrou' target='_blank' class='pink'>@trigrou</a>
</section>
</section>
<section>
<br>
<section>
<h1>HTML5 examples</h1>
<br><br>
<h1 class="pink huge lightblinktag">GAMES</h1>
</section>
<section>
<h1>Zynga</h1>
<img src="img/game-zynga.png"/>
<br><br>
Offline, WebSockets, CSS3...
</section>
<section>
<h1>Quake 2 GWT</h1>
<img src="img/game-quake2.jpeg"/>
<br><br>
WebGL, WebSockets, WebStorage...
</section>
<section>
<h1>MarbleSoccer</h1>
<img src="img/game-marblesoccer.png"/>
<br><br>
WebGL, Gyroscope, Fullscreen...<br>
by <a href='http://twitter.com/trigrou' target='_blank' class='pink'>@jetienne</a>
</section>
<section>
<h1>Angry birds</h1>
<img src="img/game-angrybirds.jpeg"/>
<br><br>
Offline, Canvas, Storage
</section>
</section>
<section>
<section>
<h1 class=''>HTML5 QuickStart</h1>
<br>
<ul>
<li style='font-size:60px'>Start with <span class='pink'><b>HTML5 Boilerplate</b></span></li>
<br>
<li style='font-size:80px'>Or <span class='pink'><b>Initializr</b></span> (lighter)</li>
<br>
<li><b>Good practices, graceful degradation</b></li>
<li>Server configs, htaccess, jQuery </li>
<li>Modernizr, default icons, reset CSS...</li>
</ul>
</section>
<section>
<h1 class=''>Tips</h1>
<br>
<ul>
<li>Avoid IE<9 to prevent headeaches</li>
<br>
<li >Replace presentational tags with CSS</li>
<br>
<li >Use &lt;div&gt; only when necessary</li>
<br>
<li>Load polyfills if needed (yepnope.js)</li>
<br>
<li>For IE : Html5shiv, Modernizr, CSS3pie...</li>
</ul>
</section>
<section>
<h1 class=''>Links</h1>
<ul>
<li><a href="html5rocks.com" target="_blank">html5rocks.com</a></li>
<li><a href="html5demos.com" target="_blank">html5demos.com</a></li>
<li><a href="html5doctor.com" target="_blank">html5doctor.com</a></li>
<li><a href="caniuse.com" target="_blank">caniuse.com</a></li>
<li><a href="html5boilerplate.com" target="_blank">html5boilerplate.com</a></li>
<li><a href="modernizr.com" target="_blank">modernizr.com</a></li>
<li><a href="diveintohtml5.com" target="_blank">diveintohtml5.com</a></li>
<li><a href="schema.org" target="_blank">schema.org</a> (microdata)</li>
</ul>
</section>
</section>
<section>
<h1 class='huge'>THE END</h1>
<h3 class='pink lightblinktag'>Thanks !</h3>
<br>
<h5 class="inverted">reveal.js by Hakim El Hattab / hakim.se</h5>
<h5 class="inverted">John / HTML5 meetup</h5>
<img src='img/revolunet.jpeg'/>
</section>
</div>
<!-- The navigational controls UI -->
<aside class="controls">
<a class="left" href="#">&#x25C4;</a>
<a class="right" href="#">&#x25BA;</a>
<a class="up" href="#">&#x25B2;</a>
<a class="down" href="#">&#x25BC;</a>
</aside>
<!-- Displays presentation progress, max value changes via JS to reflect # of slides -->
<div class="progress"><span></span></div>
</div>
<script src="reveal/js/reveal.js"></script>
<script src="reveal/lib/highlight.js"></script>
<script>
// Parse the query string into a key/value object
var query = {};
location.search.replace( /[A-Z0-9]+?=(\w*)/gi, function(a) {
query[ a.split( '=' ).shift() ] = a.split( '=' ).pop();
} );
Reveal.initialize({
// Display controls in the bottom right corner
controls: true,
// Display a presentation progress bar
progress: true,
// If true; each slide will be pushed to the browser history
history: true,
// Flags if mouse wheel navigation should be enabled
mouseWheel: true,
// Apply a 3D roll to links on hover
rollingLinks: true,
// UI style
theme: query.theme || 'default', // default/neon
// Transition style
transition: query.transition || 'default' // default/cube/page/concave/linear(2d)
});
hljs.initHighlightingOnLoad();
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.