Relatore: Ing. Marco Porta Correlatore: Ing. Massimo Cellario Tesi di Laurea di: Andrea Marchetti Anno Accademico 2010/2011 UNIVERSITA’ DEGLI STUDI DI PAVIA Corso di Laurea Magistrale Interfacoltà in Comunicazione 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 -: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 Desktop Mobile (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