HTML5 and CSS3 new semantic elements advanced form support CSS3 features other HTML5 features
fallback solutions HTML5 and CSS3 are new and evolving standards two levels of fallback different browsers and different versions of browsers have different levels of support and support different features to make the most of these standards developers should adopt them now but need to have fallback solutions for cases where features used are not supported by a browser level 1 often JavaScript/jQuery can be used to provide a fallback solution level 2 consider what happens when a user blocks JavaScript 20.03.2013 norrie@inf.ethz.ch 2
back to divitus <div id="container"> <div id="header"> <h2>html5 and CSS3</h2> </div> <div class="nav"> <ul> <li><a href="index.html">home</a></li> <li><a href="about.html">about</a></li> <li><a href="about.html">articles</a></li> </ul> </div> <div id="main"> <p>let's put some interesting content here.</p> </div> <div id="footer"> web engineering 2013 </div> </div> 20.03.2013 norrie@inf.ethz.ch 3
semantic elements <div id="container"> <div id="header"> <h2>html5 and CSS3</h2> </div> <div class="nav"> <ul> <li><a href="index.html">home</a></li> <li><a href="about.html">about</a></li> <li><a href="about.html">articles</a></li> </ul> </div> <div id="main"> <p>let's put some interesting content here.</p> </div> <div id="footer"> web engineering 2013 </div> </div> <section> <header> <h2>html5 and CSS3</h2> </header> <nav> <ul> <li><a href="index.html">home</a></li> <li><a href="about.html">about</a></li> <li><a href="about.html">articles</a></li> </ul> </nav> <article> <p>let's put something interesting here.</p> </article> <footer> web engineering 2013 </footer> </section> 20.03.2013 norrie@inf.ethz.ch 4
new semantic tags <header> defines header region of page or section <footer> defines footer region of page or section <nav> defines navigation region of page or section <section> defines logical section of page or a grouping of content <article> defines an article or complete piece of content <aside> defines secondary or related content 20.03.2013 norrie@inf.ethz.ch 5
blog with HTML5 semantic markup body header nav section header article header section header nav p p p footer article header p footer footer aside aside footer 20.03.2013 norrie@inf.ethz.ch 6
sections, articles and asides what s the difference between a section and an article? a section is a logical part of a document an article is actual content sections can have many articles (and vice versa) example sports section in newspaper which contains set of articles about sports what s the difference between an aside and a sidebar? an aside shows content related to an article such as pullout quotes, diagrams or related links a sidebar is a structural element that may or may not contain data directly related to an article or page example sidebar used to give further forms of site navigation such as tag clouds or general resources such as calendars 20.03.2013 norrie@inf.ethz.ch 7
custom data attributes attach custom data to any elements image metadata such as camera settings and actual size <img src="img/rafa.jpg" data-width="350" data-height="233" data-aperture="f5" data-shutter="1/800" > 20.03.2013 norrie@inf.ethz.ch 8
forms <form id="create_account" action="/signup" method="post"> <fieldset id="signup"> <legend>create New Account</legend> <ol> <li><label for="first_name">first Name</label> <input id="first_name" type="text" autofocus="true" name ="first_name" placeholder="'john'"> </li> <li><label for="last_name">last Name</label> <input id="last_name" type="text" name ="last_name" placeholder="'smith'"> </li> <li><label for="email">email</label> <input id="email" type="email" name ="email" placeholder="'user@example.com'"> </li> <li><label for="password">password</label> <input id="password" type="password" autocomplete="off" name ="password" value="" placeholder="8-10 chars"> </li> <li><label for="password_confirm">password Confirmation</label> <input id="password_confirmation" type="password" autocomplete="off" name ="password_confirm" value="" placeholder="type your password again"> </li> <li> <input type="submit" value="sign Up"></li> </ol> </fieldset> </form> 20.03.2013 norrie@inf.ethz.ch 9
falling back use JavaScript to test if HTML5 properties supported e.g. placeholder if not use JavaScript/jQuery to adapt elements e.g. add value to input fields Modernizr is a JavaScript library that can be used to detect HTML5 and CSS3 features var Modernizr = {}; // Create the input element for various Web Forms feature tests. var inputelem = document.createelement('input'), attrs = {}; Modernizr.input = (function(props) { for(var i = 0, len = props.length; i < len; i++) { attrs[props[i]] = props[i] in inputelem; } return attrs; })('autocomplete autofocus list placeholder max min multiple pattern required step'.split(' ')); if(!modernizr.input.placeholder) { // do something } and if JavaScript blocked? 20.03.2013 norrie@inf.ethz.ch 10
CSS3 we have already seen many CSS3 features extended use of pseudoclasses #secondary.news:nth-child(2n) { background-color:#d6cc84; } media queries @media screen and (min-width:481px ) and (max-width:768px) { p { font-size: 0.9em; } } text shadows 20.03.2013 norrie@inf.ethz.ch 11
login with rounded corners input { width: 200px; background-color: #fff3e0; border: 1px solid #d07534; } input[type="submit"]{ width: 202px; padding: 0; background-color: #d07534; } input, fieldset, legend { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } since CSS3 specification isn t final, some browsers prefix their own implementations 20.03.2013 norrie@inf.ethz.ch 12
multicolumn #primary { float:left; width:580px; padding-top: 15px; column-count: count:2; -moz-column-count: 2; -webkit-column-count: 2; column-gap: 10px; -moz-column-gap: 10px; -webkit-column-gap: 10px; column-rule: 1px solid #ddccb5; -moz-column-rule: 1px solid #ddccb5; -webkit-column-rule: 1px solid #ddccb5; } columns must be of equal width CSS3 columns don t work in IE9 and older 20.03.2013 norrie@inf.ethz.ch 13
HTML canvas allows images and animations to be created programmatically using JavaScript <canvas id="mycanvas" width="300" height="200" style="border:1px solid #b6ff00;"> Your browser does not support HTML canvas tag </canvas> <script> var c=document.getelementbyid("mycanvas"); var ctx=c.getcontext("2d"); ctx.fillstyle="#ff0000"; ctx.fillrect(50,50,150,75); ctx.fillstyle="#dd2222"; ctx.fillrect(70,70,150,75); ctx.fillstyle="#bb4444"; ctx.fillrect(90,90,150,75); </script> 20.03.2013 norrie@inf.ethz.ch 14
embedding audio and video idea is that browsers should support audio and video natively rather than relying on plug-ins <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> 20.03.2013 norrie@inf.ethz.ch 15
HTTP a stateless protocol HTTP is a stateless protocol consisting of simple requestresponse pairs CLIENT request response SERVER how can we keep track of state of user interactions? 20.03.2013 norrie@inf.ethz.ch 16
early solutions <body> <p> Goods will be delivered within one working day, to wherever you are.... </p> <p> <a href="/sitemap.html?user=fred&item=salmon&item=whisky"> Back to the delicatessen store site map. </a> </p> </body> url rewriting <body> <form action="/servlet/onlinestore" method="post"> <input type="hidden" name="user" value="fred"> <input type="hidden" name="item" value="salmon"> <input type="hidden" name="item" value="whisky"> <select multiple size="3" name="cheese"> <option>cheddar <option>gruyere <option>manchego </select> <input type="submit" value="add to shopping cart"> </form> <a href="/sitemap.html"> Proceed to other shopping area</a> </body> hidden form fields 20.03.2013 norrie@inf.ethz.ch 17
cookies (name,value) pairs created by server and stored by client browser cookies can be made persistent (lang,en) (country,ch)... (session, 12345)... mainly used as a means of user profiling limit to number of cookies per site and size of cookie 20.03.2013 norrie@inf.ethz.ch 18
HTML5 support for client-side storage use JavaScript to access the window.localstorage()object <label for="background-color">background Colour</label> <input type="color" name="background-color" value="" id="background_color"> localstorage.setitem("background_colour",$("#background_colour").val()); var bgcolor = localstorage.getitem("background_color"); 20.03.2013 norrie@inf.ethz.ch 19
session storage works in the same way as localstorage but data deleted at end of session sessionstorage.setitem('name','fred Jones'); var name = sessionstorage.getitem('name'); 20.03.2013 norrie@inf.ethz.ch 20
working offline HTML5 provides support for working offline manifest file contains a list of all the web application s client-side files that need to exist in the client browser s cache in order to work offline create a file called notes.manifest CACHE MANIFEST # v = 1.0.0 /style.css /js/notes.js /js/jquery.min.js link manifest file to HTML document <html manifest="notes.manifest"> 20.03.2013 norrie@inf.ethz.ch 21
recommended book 20.03.2013 norrie@inf.ethz.ch 22