HTML5 and CSS3. new semantic elements advanced form support CSS3 features other HTML5 features

Transcription

1 HTML5 and CSS3 new semantic elements advanced form support CSS3 features other HTML5 features

2 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 [email protected] 2

3 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>

4 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>

5 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 [email protected] 5

6 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 [email protected] 6

7 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 [email protected] 7

8 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" >

9 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=" "> </label> <input id=" " type=" " name =" " </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>

10 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? [email protected] 10

11 CSS3 we have already seen many CSS3 features extended use of pseudoclasses #secondary.news:nth-child(2n) { background-color:#d6cc84; } media screen and (min-width:481px ) and (max-width:768px) { p { font-size: 0.9em; } } text shadows [email protected] 11

12 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 [email protected] 12

13 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 [email protected] 13

14 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>

15 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>

16 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? [email protected] 16

17 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

18 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 [email protected] 18

19 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"); [email protected] 19

20 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'); [email protected] 20

21 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 = /style.css /js/notes.js /js/jquery.min.js link manifest file to HTML document <html manifest="notes.manifest"> [email protected] 21

22 recommended book