html5 e css3 - 5 | webmaster & webdesigner

of 40/40
HTML5 e Css3 [5] Matteo Magni

Post on 28-Nov-2014

424 views

Category:

Technology

3 download

Embed Size (px)

DESCRIPTION

Quinta lezione Modulo HTML5 e Css3 per il corso di WebMaster & WebDesigner

TRANSCRIPT

  • 1. HTML5 e Css3 [5]Matteo Magni
  • 2. Inizialmente avevamo questo
  • 3. One monitor One browserSito ottimizzato per risoluzione 800x600, Browser:Microsoft Internet Explorer, per problemi divisualizzazione contattare il webmaster
  • 4. Browser War
  • 5. Continuiamo con il Sito ottimizzatoper...?!?
  • 6. Idea!!!!Piu CSS
  • 7.
  • 8. WebMaster?
  • 9. Multiple Browser & Multiple Device
  • 10. Idea!!!!Piu Layout
  • 11. if((screen.width=768)){//useanothercss}elseif.......}else{//usecss...}
  • 12. WebMaster?
  • 13. E poi avevamo detto di usare solo css per lapresentazione e non di usare javascript?
  • 14. Ma non Possiamo usare i Css Media Type?
  • 15. Css 2.1 ha 10 media all: il CSS si applica atutti i dispositivi divisualizzazione; screen: schermo dicomputer; print: pagina stampata; projection: presentazionie proiezioni; speech: dispositivi asintesi vocale; braille: supporti basati sullusodel braille; embossed: stampanti braille; handheld: dispositivi mobilicon schermo piccolo e ingenere dotati di browser conlimitate capacit grafiche; tty: dispositivi a carattere fissocome i terminali; tv: visualizzazione su schermitelevisivi.
  • 16.
  • 17. Nuova sintassi
  • 18.
  • 19. Media Queries sono espressioni logiche cheritornano "true" o "false" a seconda di comevengono valutate.Se sono vere, gli stili vengono applicati, se false,vengono ignorati
  • 20. One HTML & One Css
  • 21. Il termine Responsive Web Design (RWD) vieneutilizzato per indicare una particolare tecnica diWeb design per la realizzazione di siti web inmodo che le pagine adattino automaticamente illayout per fornire una visualizzazione ottimale infunzione dellambiente nei quali vengonovisualizzati riducendo al minimo allutente lanecessit di ridimensionamento e scorrimento, inparticolare quello orizzontale. (wikipedia)
  • 22. Media Query syntax:rel="stylesheet" href="desktop.css" media="[not|only]screen[and] (expression)"Le keywords not, only, and and possonoessere usate per filtrare i risultati, mentre leespressioni possono essere utilizzate perverificare la presenza di specifiche funzionalitmultimediali
  • 23. MediaQuerylink:MediaQueryinline:@mediascreenand(color){/*quivannoleregoleCSS*/}MediaQueryimport:@importurl(colore.css)screenand(color);
  • 24. @mediascreenand(width:500px){/*CSSrules*/}@mediascreenand(minwidth:320px)and(maxwidth:1024px){/*CSSrules320