How to make cool internets

An HTML5/CSS3 presentation in HTML5/CSS3

by @elliottkember and @dizzyup

HTML4.01 was all like

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

HTML5 is all like

<!doctype html>

Even this:

<!DOCTYPE html>
<title>Small HTML 5</title>
<p>Hello world</p>

HTML4 was all like

<div class="header"></div>
<div class="footer"></div>
<div class="section"></div>
<div class="article"></div>
<div class="clownshoes"></div>

but HTML5 is all like

<header></header>
<footer></footer>
<section></section>
<article></article>
<clownshoes></clownshoes>

And these slides are like

<slide></slide>

Nice!

But what about IE?

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Eat shiv, IE.

// html5shiv MIT @rem remysharp.com/html5-enabling-script
// iepp v1.6.2 MIT @jon_neal iecss.com/print-protector
/*@cc_on(function(m,c){var z="abbr|article|aside|audio|canvas|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video";function n(d){for(var a=-1;++ai";if(g.childNodes.length!==1){var i=z.split("|"),o=i.length,s=RegExp("(^|\\s)("+z+")",
"gi"),t=RegExp("<(/*)("+z+")","gi"),u=RegExp("(^|[^\\n]*?\\s)("+z+")([^\\n]*)({[\\n\\w\\W]*?})","gi"),r=c.createDocumentFragment(),k=c.documentElement;g=k.firstChild;var h=c.createElement("body"),l=c.createElement("style"),f;n(c);n(r);g.insertBefore(l,
g.firstChild);l.media="print";m.attachEvent("onbeforeprint",function(){var d=-1,a=p(c.styleSheets,"all"),e=[],b;for(f=f||c.body;(b=u.exec(a))!=null;)e.push((b[1]+b[2]+b[3]).replace(s,"$1.iepp_$2")+b[4]);for(l.styleSheet.cssText=e.join("\n");++d  
Err, what?
document.createElement("figure");



  Video
  



  Video and more
  



  Canvas - Mr Doob
  


  Canvas - Mr Doob
  



  Badass inputs
  <input type="text" required />
<input type="email" value="some@email.com" />
<input type="date" min="2010-08-14" max="2011-08-14" value="2010-08-14"/>
<input type="range" min="0" max="50" value="10" />
<input type="search" results="10" placeholder="Search..." />
<input type="tel" placeholder="(555) 555-5555" pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$" />
<input type="color" placeholder="e.g. #bbbbbb" />
<input type="number" step="1" min="-5" max="10" value="0" />

                                                                                
                                                                 
                                     
                                                            
                                                  
              
                                                             
                                                  





  Geolocation
    if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    var latLng = new google.maps.LatLng(
        position.coords.latitude, position.coords.longitude);
    var marker = new google.maps.Marker({position: latLng, map: map});
    map.setCenter(latLng);
  }, errorHandler);
}
     
    
      
    

  



  Websockets WebRawkets
  (rawkets.com)
  



  Websockets aren't that tricky.
  var host = "ws://localhost:8000/socket/server/startDaemon.php";  
var socket = new WebSocket(host);  
socket.onmessage = function(msg){  
  alert(msg.data);
}  


  
  




  Offline storage
  if('localStorage' in window && window['localStorage'] !== null){
  var store = window.localStorage;
  store.setItem('cow','moo');
  store.sheep = 'baa'
  store['dog'] = 'bark'
}
Super fast, nice and local.
Who?
Firefox 3.5, Safari 4, IE8, Chrome 4+



  That's a good question
  
  
    
    
  
  
  http://html5demos.com/



  CSS3



  Selectors
  E[att^="val"] att attribute value begins with "val".
E[att$="val"] att attribute value ends with "val".
E[att*="val"] att attribute value contains the substring "val".
att can be anything! href, rel, name...
E:nth-child(n)
E:nth-last-child(n)
E:nth-of-type(n)
E:nth-last-of-type(n)
E:last-child
E:first-of-type
E:last-of-type
E:only-child
E:only-of-type
E:empty
E:target
E:enabled
E:disabled
E:checked
E::selection
E:not(s)
E ~ F



  Text shadows
  This text looks nice
  This text looks awful
  You still have to be tasteful FFS
  Easy peasy.
  text-shadow:  1px 1px 20px rgba(0,0,0,0.3);




  
    ROUNDED CORNERS
  
  This is surprisingly useful and also cool.
  text-shadow:  1px 1px 20px rgba(0,0,0,0.3);



  
    ROUNDED CORNERS AND BOX SHADOWS
  
  This is surprisingly useful and also cool.
  -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.5);



  
    INSET BOX SHADOWS
  
  This is surprisingly useful for cut-outs, and inputs.
  -webkit-box-shadow: inset 0 0 20px rgba(0,0,0,0.5);



  
    all up in yer @font-face
  
  @font-face {
  font-family:'Museo';
  src: url('/Museo700-Regular.otf') format('opentype');
}

.museo {
  font-family: Museo, arial;
}
Embed your favourite fonts!




  
  Opacity
p.opacity {
  opacity: 0.5;
}

  
    Opacity on hover
  
p.hover-opacity {
  opacity: 0.5;
}

  This is useful for hiding controls Edit Delete
p.hover-opacity:hover {
  opacity: 1;
}




  So when can I use this stuff?!
  Now!



  
    






    All decent browsers support enough of this stuff to make it worth using.
  



  CSS > HTML5
  




  CSS > HTML5
  



  CSS > HTML5