HTML5 & Friends And How They Change A Developer s Life Yang Piao yp@cmu.edu
2
HTML5? 3
What is HTML5 The markup language 5 th major version of HTML successor of HTML 4.01 Or a set of cutting-edge web technologies the HTML markup language a series of JavaScript APIs CSS3 Basically, it rocks... 4
Life-changing? 5
Let s start with an example Select an arbitrary element in JS 6
! The Old Way <div id= elemid ></div>! var elem =! "document.getelementbyid( elemid );! 7
! The Old Way <ul class= menu >! "<li class= menu-item ></li>! "<li class= menu-item ></li>! "<li class= menu-item ></li>! </ul>! But what about this? 8
! The Old Way Somebody said the word library? var menuitems = $(.menu-item );! What s behind this single line of code? 9
The Old Way More than 1,000 lines of code! And extra file(s) jquery is 32KB after minified and gzipped 10
The Better Way Selectors API [document/element].queryselector [document/element].queryselectorall var cells = document.queryselectorall(! " ""#score>tbody>tr>td:nth-of-type(2)"); var firsttextinput = formelement.queryselector(! " "'input[type="text"]');! 11
The Better Way No need to rely on other libraries smaller page size shorter load time Better performance browser native APIs are much faster than JS 12
The Better Way Other DOM / JavaScript APIs like this: getelementsbyclassname classlist dataset children, childelementcount first / lastelementchild outerhtml insertadjacenthtml matchesselector and more... 13
Not Convincing? 14
HTML5 Features Semantic Tags 15
! Semantic Tags We wrote pages like this: <div id="container">! <div class="content">! <div class="post"></div>! <div class="post"></div>! </div>! <div class="sidebar"></div>! </div>! 16
! Semantic Tags Now we can write pages like this: <div id="container">! <section>! <article></article>! <article></article>! </section>! <aside></aside>! </div>! 17
Semantic Tags New tags that have meanings: header footer nav section article aside address figure, figcaption...... 18
HTML5 Features Better Form 19
Better Form Forms in HTML4 / XHTML1.1 field types are limited no validation HTML5 supports these things! 20
Better Form More types of fields number range date & time color search tel email url datalist 21
Better Form Number field <input type="number" min="0" max="10" value="5">! Range field <input type="range" min="0" max="100"! value="0" step="2">! 22
Better Form Output element <form onsubmit="return false! oninput="o.value = r.valueasnumber">! <input name="r" id="r" type="range" min="0" max="100" value="0">! <output for="r" name="o">0</output>/100! </form>! 23
Better Form Output element <form onsubmit="return false" oninput="! o.value = a.valueasnumber + b.valueasnumber">! <input name="a" id="a" type="number"> +! <input name="b" id="b" type="number"> =! <output name="o" for="a b"></output>! </form> 24
!!!!! Better Form Date & time <input type="date">! <input type="time" step="1">! 25
Better Form Color Field <input type="color">! 26
Better Form Progress & meter (not just for forms) <progress value="22" max="100"></progress>! <meter value="2" min="0" max="10"></meter>! <meter value="0.6"></meter>! 27
Better Form Validation required attribute <input type="text" required> type, like email pattern <input type="text" pattern="[a-z]{3}[0-9]{3}">! 28
HTML5 Features User Interaction 29
User Interaction HTML5 improves interaction drag & drop touch events geolocation fullscreen API device orientation 30
! User Interaction Drag & drop draggable & dropzone attributes events elem.addeventlistener('dragstart', fn, false);! elem.addeventlistener('dragenter', fn, false);! elem.addeventlistener('dragover', fn, false);! elem.addeventlistener('dragleave', fn, false);! elem.addeventlistener('drop', fn, false);! elem.addeventlistener('dragend', fn, false);! 31
User Interaction Touch events on mobile devices events: touchstart, touchmove, touchend Geolocation navigator.geolocation.getcurrentposition(! successcallback, errorcallback)! 32
! User Interaction Fullscreen API can make an element fullscreen simple code requestfullscreen()! webkitrequestfullscreen()! mozrequestfullscreen()! cancelfullscreen()! webkitcancelfullscreen()! mozcancelfullscreen()! 33
User Interaction Fullscreen API 34
User Interaction Device orientation not just for mobile devices! http://www.html5rocks.com/en/tutorials/device/orientation/deviceorientationsample.html 35
HTML5 Features Multimedia & Graphics 36
Multimedia & Graphics Native multimedia support <video> <audio> say buy to Flash! Graphics canvas WebGL 37
Multimedia & Graphics Camera API 38
CSS3! 39
CSS3 Features Modern Styles 40
Modern Styles Border radius (rounded corner) Text & box shadow Gradient Border images...... 41
Modern Styles You can draw a lot of shapes 42
Modern Styles And even more 43
CSS3 Features Media Queries 44
! Media Queries The very basic part of Responsive Design /* Large desktop */! @media (min-width: 1130px) {}! /* tablet landscape and below */! @media (max-width: 1000px) {}! /* Landscape phone to portrait tablet */! @media (max-width: 767px) {}! @media print and (min-width: 1130px) {}! 45
Media Queries 46
Media Queries 47
Media Queries 48
CSS3 Features Transitions & Animations 49
Transitions & Animations Transitions 50
Transitions & Animations Animations/Transitions http://leaverou.github.io/animatable/ 51
Not The End... 52
Thanks for your attention! 53