• No results found

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

N/A
N/A
Protected

Academic year: 2021

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

Copied!
22
0
0

Loading.... (view fulltext now)

Full text

(1)

HTML5 and CSS3

new semantic elements

advanced form support

CSS3 features

(2)

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

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

(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

(6)

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 body

(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)

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

(8)

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

(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="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>

(10)

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

(11)

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; } }

(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

(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

(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.

(16)

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?

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

<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

(18)

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) ...

(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());

(20)

session storage

works in the same way as localStorage but data deleted at end of session

sessionStorage.setItem('name','Fred Jones');

(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 = 1.0.0 /style.css /js/notes.js

/js/jquery.min.js

link manifest file to HTML document

(22)

References

Related documents

Specifically, an adaptive dynamic programming (ADP) algorithm is used to derive the optimal control law based on the nonlinear structural dynamics, and the large-scale machine

10.Ne2 is a quite common alternative, but it doesn’t seem particularly dangerous. The fianchetto is usually a good idea when the white knight moves away from d5.. The most solid

MF DNES as well as dailies TOP KOMBI and POWER KOMBI compared with the rest of the dailies have a higher rate and very high number of economically active readers Mentioned numbers

LGA’s strategy of funding the Regulation XXX portion of the term life reserves through the capi- tal markets has resulted in volatile statutory net operating and total capital

Providing person- al care to a partner, however, has broad adverse effects on men’s well-being (life satis- faction, self-esteem, mastery, happiness, and loneliness);

The short values for R estimated here are indicative that once PCBs are present in the atmo- sphere their concentrations decrease after a few days of at- mospheric transport over

[r]

This Coding Clinic provides guidance on modifying coding guidelines to meet payer specific