HTML5 e Css3 - 5 | WebMaster & WebDesigner

651 views

Published on

Quinta lezione del modulo HTML5 e Css3 del corso per WebMaster & WebDesigner

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
651
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
17
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

HTML5 e Css3 - 5 | WebMaster & WebDesigner

  1. 1. HTML5 e Css3 [5]Matteo Magni
  2. 2. Inizialmente avevamo questo
  3. 3. One monitor One browserSito ottimizzato per risoluzione 800x600, Browser: Microsoft Internet Explorer, per problemi di visualizzazione contattare il webmaster
  4. 4. Browser War
  5. 5. Continuiamo con il Sito ottimizzato per...?!?
  6. 6. Idea!!!!Piu CSS
  7. 7. <!­­[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]­­>
  8. 8. WebMaster?
  9. 9. Multiple Browser & Multiple Device
  10. 10. Idea!!!!Piu Layout
  11. 11. 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...}
  12. 12. WebMaster?
  13. 13. E poi avevamo detto di usare solo css per la presentazione e non di usare javascript?
  14. 14. Ma non Possiamo usare i Css Media Type?
  15. 15. 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;
  16. 16. <link rel="stylesheet" href="a.css"  type="text/css" media=”screen" /><link rel="stylesheet" href="a.css"  type="text/css" media=”print" />
  17. 17. Nuova sintassi
  18. 18. <link rel="stylesheet" href="a.css"  type="text/css" media=”screen and(min­width:500px)" />
  19. 19. 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
  20. 20. One HTML & One Css
  21. 21. Il termine Responsive Web Design (RWD) viene utilizzato per indicare una particolare tecnica di Web design per la realizzazione di siti web inmodo che le pagine adattino automaticamente illayout per fornire una visualizzazione ottimale in funzione dellambiente nei quali vengono visualizzati riducendo al minimo allutente lanecessità di ridimensionamento e scorrimento, in particolare quello orizzontale. (wikipedia)
  22. 22. 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
  23. 23.  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);
  24. 24. Width@media screen and (width: 500px) {/* CSS rules*/}@media screen and (min­width: 320px) and (max­width: 1024px) {/* CSS rules 320 < width < 1024*/}
  25. 25. Height@media screen and (height: 500px) {/* CSS rules*/}@media screen and (min­height: 400px) and (max­height: 800px) {/* CSS rules  400 < height < 800*/}
  26. 26. 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" />
  27. 27. 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">
  28. 28. aspect-ratio//rapporto tra la larghezza (width) e l’altezza(height) dell’area di visualizzazione@media screen and (aspect­ratio: 4/3) {/* CSS rules*/}
  29. 29. 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*/}
  30. 30. Color//Indica il numero di bit per ciascuna componentecolore sul dispositivo di output. Se 0 non supportail colore@media all and (color) {/* CSS rules*/}
  31. 31. color-index//numero di colori presenti nella tavolozza<link rel="stylesheet" media="all and (min­color­index: 256)" href="colore.css" />
  32. 32. resolution//risoluzione dispositivo output in dpi (punti perpollice), può avere min e max@media print and (min­resolution: 300dpi) {/* CSS rules*/}
  33. 33. ● 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
  34. 34. IERespond.jsfrom the Filament Grouphttps://github.com/scottjehl/Respond(gzipped version is 1kb)css3-mediaqueries-jsby Wouter van der Graafhttp://code.google.com/p/css3-mediaqueries-js/(15kb uncompressed)
  35. 35. Boilerplate/*main.css*//* ==========================================================================   Media Queries========================================================================== */@media only screen and (min­width: 480px) {/* ====================    INTERMEDIATE: Menu   ==================== */    nav a {        float: left;.....
  36. 36. Sosacroniro Responsive?
  37. 37. Domande? Slide:http://www.slideshare.net/ilbonzo Code:https://github.com/ilbonzo/Cypher mail: matteo@magni.me

×