HTML5 and CSS3
new semantic elements
advanced form support
CSS3 features
fallback solutions
HTML5 and CSS3 are new and evolving standards
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
two levels of fallback
level 1
often JavaScript/jQuery can be used to provide a fallback solution
level 2
consider what happens when a user blocks JavaScript
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>
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>
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
blog with HTML5 semantic markup
header p p aside footer article header section footer section header nav footer header p p aside footer article nav header bodysections, 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)
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
sports section in newspaper which contains set of
articles about sports
example
sidebar used to give further forms of site navigation such as tag clouds or
general resources such as calendars
custom data attributes
attach custom data to any elements
<img src="img/rafa.jpg"
data-width="350"
data-height="233"
data-aperture="f5"
data-shutter="1/800" > image metadata such as camera settings and actual size
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>
falling back
and if JavaScript blocked?
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
}
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
CSS3
text shadows
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; } }
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
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
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>
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.
HTTP – a stateless protocol
CLIENT SERVER
response request
HTTP is a stateless protocol consisting of simple request-response pairs
how can we keep track of state of user interactions?
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>
<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>
url rewriting
cookies
(name,value) pairs created by server and stored by client browser
cookies can be made persistent
mainly used as a means of user profiling
limit to number of cookies per site and size of cookie
(lang,en) (country,ch)
...
(session, 12345) ...
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());
session storage
works in the same way as localStorage but data deleted at end of session
sessionStorage.setItem('name','Fred Jones');
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