relatore: ing. marco porta correlatore: ing. massimo cellario tesi di laurea di: andrea marchetti...
TRANSCRIPT
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
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
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
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