Curs de confecció i publicació de pàgines web (Quadern CSS)

Casa sin color + botes de pintura = Casa pintada de colores

Ocupació: Desenvolupador o matenidor de pàgines web

Temporalització

560 hores: Confecció i publicació de pàgines web
Hores Tema Inici Fi
210 Construir pàgines web
80HTML8 gener29 gener
70CSS31 gener19 febrer
60Plantilles i formularis21 febrer8 març
180 Integrar components programari
90JavaScript12 març8 abril
90Proves i optimització10 abril6 maig
90 Publicar pàgines web8 maig31 maig
80 Pràctiques professionals4 juny21 juny

Documentació i exercicis

1) HTML

Desenvolupament web .odt .pdf
Taules .odt .pdf
Imatges .odt .pdf
Exercici final .odt .pdf

2) CSS

Introducció .odt .pdf
Iniciació a CSS .odt .pdf
Exercici 1: Lletres de cançons .odt .pdf
Exercici 2: Visitadors 5-feb-2013 .odt .pdf
Exercici 3: Paradís 6-feb-2013 .odt .pdf
Exercici 4: Música 7-feb-2013 .odt .pdf
Color 7-feb-2013 .odt .pdf web
Caixa CSS .odt .pdf
Classes CSS .odt .pdf
Llistes CSS .odt .pdf
Propietat CSS display 12-feb-2013 .odt .pdf
Exercici 5: Elèctric 13-feb-2013 .odt .pdf web
Exercici 6: Sant Valentí 14-feb-2013 .odt .pdf web
Exercici 7: Asteroide 15-feb-2013 .odt .pdf web
Posicionament absolut .odt .pdf web
Selectors 19-feb-2013 .odt .pdf web

Tot el CSS en un sol fitxer: Exercicis_CSS.pdf

3) Formularis i plantilles

  1. Forms — Tipus de formularis més habituals
  2. Enquesta — Formulari essencial i millorat
  3. Test — Formulari tipus test, repàs, XAMPP i PHP
  4. Salutació — data, color i connexió
  5. Comptador — Validació del formulari i un comptador
  6. Galleria — Plantilla d'imatges
  7. Galleria — Incloure fragment HTML i fer miniatures
  8. Plantilla — Web de la Setmana Blanca
  9. Atributs — placeholder, autofocus, autocomplete, etc.
  10. Correu — Enviar un contacte a una adreça de correu
  11. Correu — Afexir més camps al contacte i nova plantilla
  12. Plantilla — Menú de dos nivells fix i desplegable

Tots els fitxers comprimits: 3_forms.7z

Apunts de PHP .odt i .pdf

4) Javascript

  1. Introducció
  2. Bàsic — Salutació segons l'hora
  3. Condicionals i missatges — Estació de l'any
  4. Bucle for — Taula de multiplicar
  5. Bucles — Bucle while, depurador
  6. Apunts i mapa d'imatge — Planetes i Pocoyo
  7. Mapes i control d'errors — Mapa de Catalunya
  8. Cookies i temporitzador — Rellotge
  9. Animacions amb imatges — Posició i opacitat. Programar una galeria de fotos
  10. Mostrar i ocultar — Ús de classes CSS
  11. Sliders i formularis — Codi js extern i càlcul
  12. Càlculs — Factura
  13. Formulari excursió i onades — Validació en enviar el formulari
  14. Formulari de contacte — Validació, ajudes i dreceres de teclat
  15. Pressupost — Plats de cuina

Tots els fitxers comprimits: 4_javascript.7z

5) Base de dades

  1. Introducció — ACME i Neptuno
  2. Mostrar i afexir dades — PDO (PHP Data objects)
  3. Gestor de continguts — Taula de contactes: id, nom i telèfon
  4. Exercici gestor de continguts — Taula de plats de cuina
  5. Pujar fitxers — Formulari per enviar imatges al servidor web
  6. Canviar fotos — Formulari per canviar el fons, el logo i una foto d'una web
  7. Gestor de continguts amb fotos — Plats de cuina amb la seva foto

6) Components

7) Projecte web

8) Publicar la web

9) Pràctiques

Altres enllaços

Proves

Alumnes

Ramon, Miriam, Francisco, Mireia, Juan, Josep, Jonatan, Ronny, Vanessa, Albert, Paco, Chema, Eva i Amanda
Veure a tamany original

Aula

JanaIván
VanessaAlbert
AmandaRonny
PacoArnauMiriam
JuanRamónNelly
ChemaBecquerJonatan
EvaJosep
MireiaSergio

Calendari

DLDMDCDJDVDSDM
278910111213gener 2013
314151617181920
421222324252627
528293031123febrer 2013
645678910
711121314151617
818192021222324
925262728123març 2013
1045678910
1111121314151617
1218192021222324
1325262728293031
141234567abril 2013
15891011121314
1615161718192021
1722232425262728
18293012345maig 2013
196789101112
2013141516171819
2120212223242526
22272829303112juny 2013
233456789
2410111213141516
2517181920212223

Comentarios

  1. 1 maria jose 2013-05-29 Hace 4 años
    Buenas tardes:
    me gustaria saber si toda la informacion de esta pagina la puedo ver en español.
    El link del idioma que esta en la parte superior de la pagina no hace nada.
    Un saludo
  2. 2 Francisco 2013-05-29 Hace 4 años
    María José puedes usar el traductor que trae el Google Chrome
Proinf.net, ©2003-2017 (CC) Esta obra está bajo una licencia de Creative Commons Este software está sujeto a la CC-GNU GPL