![](https://xarxanet.org/sites/default/files/responsive_design_jeremy_keith_0.jpg)
Introducció al disseny web responsiu
![Curs introducció al disseny web responsiu. Imatge Jeremy Keith. Curs introducció al disseny web responsiu. Imatge Jeremy Keith.](https://xarxanet.org/sites/default/files/styles/xn17_horitzontal/public/responsive_design_jeremy_keith_0.jpg?itok=rfwbqMlw)
Les estadístiques demostren que cada cop són més els usuaris que naveguen des d’un dispositiu mòbil. Per això, el fet de no tenir webs adaptades implicarà quedar-se enrera en un món que avança sense parar.
OBJECTIUS
L’objectiu d’aquesta activitat és aprendre a crear un lloc web que s’adapti 100% a tots els dispositius mòbils, amb indiferència de la resolució de pantalla i del dispositiu en questió.
• Entendre en què consisteix el disseny web responsiu
• Diferències entre el disseny web mòbil i el responsiu
• Els media queries de CSS3
• Veure què és el viewport
• Aprendre a maquetar un layout fluïd
• Maquetar fent servir fonts flexibles
• Fer que les imatges i els vídeos s’adaptin a la mida del contenidor
• Saber què són i com crear imatges retina
• Descobrir en que consisteix la filosofia mobile first
• El rendiment web i el temps de càrrega
TEMARI
• Evolució web
• Què és el disseny web responsiu
• El Boilerplate per començar el projecte
• Els media queries de CSS3 a la pràctica
• El viewport
• El layout fluïd
• Les fonts flexibles
• Les imatges fluïdes en acció
• Els vídeos responsius
• Les imatges retina
• La filosofia mobile first
• Disseny web mòbil vs. disseny web responsiu
•Rendiment web i temps de càrrega
• El projecte web responsiu:
✓ L’estructura web responsiva
✓ El header pensat per a dispositius mòbils
✓ El menú de navegació responsiu
✓ Maquetar un web responsiu
✓ El footer pensat per a dispositius mòbils
Dimecres 02 set
09:00