Relatore:

Ing. Marco PortaCorrelatore:

Ing. Massimo Cellario

Tesi di Laurea di:Andrea MarchettiAnno Accademico

2010/2011

UNIVERSITA’ DEGLI STUDI DI PAVIA

Corso di Laurea Magistrale Interfacoltà inComunicazione Professionale e Multimediale

Evolution of Web Technologies

What is HTML5?

HTML is a formatting language used to create Web pages

The latest release is HTML5

HTML5 introduces many new features

What does HTML5 introduce?

Multimedia

Thanks to the Audio and Video native

support, it is possible to watch videos

and listen to music without any plug-in

(no Flash)

Device access

Thanks to Geolocation it is

possible to communicate our

position to a Web App, for example

Facebook

What does HTML5 introduce?

3D (Canvas, WebGL)

The Canvas tag is used to draw

graphics, also 3D elements, without

using Flash

Local storage

The Local Storage is used to store

Wep App data on the client. For

example, in a game it may be used

to save the progress of players

What does HTML5 introduce?

Semantic structure

The new tags introduced by HTML5

allow a better semantic organization of

pages

HTML5 makes Web Apps and

dynamic web content faster with a

variety of techniques and

technologies (Web Workers)

Performance & integration

What does HTML5 introduce?

CSS3 Style

CSS3 introduce new styles and effects

-Border radius

-Box Shadow

-Multi-column Layout

-Multiple Backgrounds

-@Font-face

-:nth-child() and :nth-of-type()

-Opacity

-Animations

-Media Queries

CSS3 Features

HTML5 & CSS3 Layout

This layout is

implemented using

HTML5 & CSS3

- Semantic markup - CSS3 features- Media Queries (Mobile version)

CSS3 Features

Border radius

This property makes it possible

to create rounded corners

whitout using images

CSS3 Features

Multicolumn

This function makes it

possible to create multiple text

colums

CSS3 Features

Animations

This function makes it

possible to animate the

background of elements

Media Queries & Responsive Web Design

The Growth of Mobile Marketing and Tagging by Microsoft Tag

4 billion mobile

Phones in use

1 billion are

smartphones

3.5 billion are

sms enabled

Size of the mobile market

Media Queries & Responsive Web Design

By 2014,

mobile

internet

Should take

over desktop

internet

usage

The Growth of

Mobile Marketing

and Tagging by

Microsoft Tag

How fast is mobile internet growing?

CSS3 Media Queries Mobile sites

Media Queries & Responsive Web Design

Media queries check for

certain conditions and

apply different stylesheets

It is possible to apply

different stylesheets for

specific devices

Responsive Web Design

DesktopMobile (portrait)

Mobile (landscape)

Tablet

Media Queries & Responsive Web Design

How does it work?

Apply the style if the viewing

area is smaller than 600px

The site changes (“reacts”) depending on the device

With more conditions, the site

changes, adapting to the

resolution of the device

CSS3 Media Queries

Example

Responsive Web Design

Advantages

- More complete design

- Completely editable by CSS3

- One version of the site for all devices

- A version of the website for each device

- More complex code

Before Media Queries

Disadvantages

- Need for mobile version?

- Many tests

- Browser support

Current versions of web browsers

Conclusion

HTML5 can help Web Designers simplify their work, making it possible to create “things” that were previously more complex

The future has arrived