Il documento tratta l'ottimizzazione dei siti web per vari browser e dispositivi utilizzando HTML5 e CSS3. Viene discussa l'importanza del design web responsive e l'uso di media queries per adattare il layout alle diverse risoluzioni. Inoltre, vengono forniti esempi di sintassi CSS per gestire le diverse condizioni dei dispositivi e le loro specifiche capacità grafiche.

1. HTML5 e Css3 [5]
Matteo Magni

2. Inizialmente avevamo questo

3. One monitor One browser
Sito ottimizzato per risoluzione 800x600, Browser:
Microsoft Internet Explorer, per problemi di
visualizzazione contattare il webmaster

4. Browser War

5. Continuiamo con il Sito ottimizzato
per...?!?

7. Idea!!!!
Piu' CSS

8. <!­­[if lte IE 6]>
<link href="ie6.css" rel="stylesheet"
type="text/css" />
<![endif]­­>
<!­­[if IE 7]>
<link href="ie7.css" rel="stylesheet"
type="text/css" />
<![endif]­­>
<!­­[if IE 8]>
<link href="ie8.css" rel="stylesheet"
type="text/css" />
<![endif]­­>
<!­­[if gt IE 8]>
<link href="ie9.css" rel="stylesheet"
type="text/css" />
<!­­<![endif]­­>

9. WebMaster?

10. Multiple Browser & Multiple Device

11. Idea!!!!
Piu' Layout

12. if ((screen.width<=1024) &&
(screen.height<=768)){
//use css
} else if ((screen.width>=1024) &&
(screen.height>=768)){
//use another css
} else if...
....
} else {
//use css...
}

13. WebMaster?

14. E poi avevamo detto di usare solo css per la
presentazione e non di usare javascript?

15. Ma non Possiamo usare i Css Media Type?

17. Css 2.1 ha 10 media
● all: il CSS si applica a ● braille: supporti basati sull’uso
tutti i dispositivi di del braille;
visualizzazione; ● embossed: stampanti braille;
● screen: schermo di ● handheld: dispositivi mobili
computer; con schermo piccolo e in
genere dotati di browser con
● print: pagina stampata; limitate capacità grafiche;
● projection: presentazioni ● tty: dispositivi a carattere fisso
come i terminali;
e proiezioni;
● tv: visualizzazione su schermi
● speech: dispositivi a televisivi.
sintesi vocale;

18. <link rel="stylesheet" href="a.css"
type="text/css" media=”screen" />
<link rel="stylesheet" href="a.css"
type="text/css" media=”print" />

19. Nuova sintassi

20. <link rel="stylesheet" href="a.css"
type="text/css"
media=”screen and(min­width:500px)" />

22. Media Queries sono espressioni logiche che
ritornano "true" o "false" a seconda di come
vengono valutate.
Se sono vere, gli stili vengono applicati, se false,
vengono ignorati

23. One HTML & One Css

24. Il termine Responsive Web Design (RWD) viene
utilizzato per indicare una particolare tecnica di
Web design per la realizzazione di siti web in
modo che le pagine adattino automaticamente il
layout per fornire una visualizzazione ottimale in
funzione dell'ambiente nei quali vengono
visualizzati riducendo al minimo all'utente la
necessità di ridimensionamento e scorrimento, in
particolare quello orizzontale. (wikipedia)

25. Media Query syntax:
rel="stylesheet" href="desktop.css"
media="[not | only] screen [and]
(expression)"
Le keywords “not”, “only”, and “and” possono
essere usate per filtrare i risultati, mentre le
espressioni possono essere utilizzate per
verificare la presenza di specifiche funzionalità
multimediali

26. Media Query link:
<link rel="stylesheet" media="screen
and (color)" href="colore.css" />
Media Query inline:
@media screen and (color) {
/* qui vanno le regole CSS */
}
Media Query import:
@import url(colore.css) screen and
(color);

27. Width
@media screen and (width: 500px) {
/* CSS rules*/
}
@media screen and (min­width: 320px)
and (max­width: 1024px) {
/* CSS rules 320 < width < 1024*/
}

28. Height
@media screen and (height: 500px) {
/* CSS rules*/
}
@media screen and (min­height: 400px)
and (max­height: 800px) {
/* CSS rules 400 < height < 800*/
}

29. Device width & height
<link rel="stylesheet" media="all and
(max­device­width: 480px)"
href="mobile.css" type="text/css" />
<link rel="stylesheet" media="all and
(max­device­height: 500px)"
href="mobile.css" type="text/css" />

30. orientation
//indica se il dispositivo di output è in modalità landscape
(la larghezza è maggiore dell’altezza) oppure portrait
(l’altezza è maggiore della larghezza)
<link rel="stylesheet" media="all and
(orientation:portrait)"
href="portrait.css">
<link rel="stylesheet" media="all and
(orientation:landscape)"
href="landscape.css">

31. aspect-ratio
//rapporto tra la larghezza (width) e l’altezza
(height) dell’area di visualizzazione
@media screen and (aspect­ratio: 4/3)
{
/* CSS rules*/
}

32. device-aspect-ratio
//rapporto tra la larghezza (width) e l’altezza
(height) dell’area di visualizzazione
@media screen and (device­aspect­
ratio: 16/9) {
/* CSS rules*/
}

33. Color
//Indica il numero di bit per ciascuna componente
colore sul dispositivo di output. Se 0 non supporta
il colore
@media all and (color) {
/* CSS rules*/
}

34. color-index
//numero di colori presenti nella tavolozza
<link rel="stylesheet" media="all and
(min­color­index: 256)"
href="colore.css" />

35. resolution
//risoluzione dispositivo output in dpi (punti per
pollice), può avere min e max
@media print and (min­resolution:
300dpi) {
/* CSS rules*/
}

36. ● Monochrome
● numero di bit per pixel su un dispositivo
monocromatico (a scala di grigi).
● Scan
● progressive oppure interlace. Relativa ai media TV
● Grid
● Se dispositivo è a bitmap o griglia

38. IE
Respond.js
from the Filament Group
https://github.com/scottjehl/Respond
(gzipped version is 1kb)
css3-mediaqueries-js
by Wouter van der Graaf
http://code.google.com/p/css3-mediaqueries-js/
(15kb uncompressed)

39. Boilerplate
/*main.css*/
/*
========================================================================
==
Media Queries
========================================================================
== */
@media only screen and (min­width: 480px) {
/* ====================
INTERMEDIATE: Menu
==================== */
nav a {
float: left;
.....

40. Sosacroniro
Responsive?

41. Domande?
Slide:
http://www.slideshare.net/ilbonzo
Code:
https://github.com/ilbonzo/Cypher
mail:
matteo@magni.me