Salta el contingut

Pràctica: portafoli amb HTML i CSS

Objectiu i durada

L'objectiu d'aquesta pràctica és donar curs als vostres nous coneixements d'HTML i CSS per crear una versió del vostre portafoli o carpeta d’aprenentatge.

Durada: 7 h

Lliurament i presentació

El lliurament serà en format ZIP.

IMPORTANT

Llegiu detingudament l'apartat "Com lliurar la tascal al Classroom" perquè si la pràctica no segueix aquestes normes i com ja es va avisar al començament del curs, NO SE CORREGIRÀ i per tant serà una PRÀCTICA SUSPESA.

Com lliurar la tasca al Classroom

Feu el lloc web seguint les instruccions i requisits d'aquest enunciat.

Aleshores, creareu un zip que contengui tots els fitxers que componen el vostre treball (no oblideu d'incloure les imatges i els fitxers css). la pagina .html, així com els fitxers .css i les imatges han de seguir la següent nomenclatura:

<nom_codificat><codi_tasca_del_classroom>_<numero_fitxer>.zip

En el fitxer .zip també heu d'incloure un fitxer amb el nom llegeix.me (a l'estil dels fitxers READ.ME). Fitxer de text pla on heu de detallar que és el que m'estau entregant i en quin nom (sempre seguint l'estàndar que acabam de posar).

Per exemple, en Tofol Verdera per la tasca PO01 que té 3 fitxers html, 2 imatges jpg i un fitxer css, tindria : tverderagPO01_00.zip que contindria aquests fitxers i noms:

tverderagPO01_01.html // pàgina html 1

tverderagPO01_02.html // pàgina html 2

tverderagPO01_03.html // pàgina html 3

tverderagPO01_04.jpg // captura 1

tverderagPO01_05.jpg // captura 2

tverderagPO01_06.css // fitxer d'estils CSS

llegeix.me // fitxer amb informació dels fitxers, amb el següent contingut:

Pràctica PO01 de'n Tofol Verdera:
tverderagPO01_01.html // pàgina html 1
tverderagPO01_02.html // pàgina html 2
tverderagPO01_03.html // pàgina html 3
tverderagPO01_04.jpg // captura 1
tverderagPO01_05.jpg // captura 2
tverderagPO01_06.css // fitxer d'estils CSS
Com saber el meu nom_codificat

L'usuari que has d'usar sempre en les tasques ha de complir el format següent:

  • La inicial del teu primer nom.
  • El teu primer cognom.
  • La inicial del teu segon cognom si en tens.

Suposem en Tofol Gabriel Verdera Grimalt el seu usuari serà: tverderag.

En totes les tasques, cada cop que es faci menció a <nom_codificat> hauràs de substituir-lo pel teu usuari.

Sempre que sigui possible haureu d'usar el vostre nom d'usuari de manera que no hi hagi cap dubte sobre l'autoria de les tasques.

Qualificació

La tasca es qualifica amb una nota de 0 a 10.

Activitats

A continuació es llisten les activitats que cal realitzar. Recorda que l'HTML només marca l'estructura i el contingut del document i CSS la part estilística i visual.

HTML

Per a la part d'HTML pots fer servir els següents enllaços que et serviran de documentació:

Respecte a la part d'HTML el portafoli haurà de complir almenys amb els requisits següents:

  1. El portafoli respecta les indentacions o tabulacions perquè sigui còmode de llegir.
  2. El portafoli utilitza capçaleres (h1, h2, h3...) de manera ben estructurada.
  3. El portafoli utilitza paràgrafs.
  4. El portafoli utilitza una o diverses llistes.
  5. El portafoli utilitza una o diverses taules.
  6. El portafoli utilitza una o diverses imatges.
  7. El portafoli utilitza codificació UTF-8.
  8. El portafoli té favicon.
  9. El portafoli té un títol (metadada) amb el nom de l'alumne.
  10. El portafoli té un o més comentaris HTML.
  11. El portafoli utilitza enllaços externs.

CSS

Per a la part de CSS pots fer servir els següents enllaços que et serviran de documentació:

Respecte a la part de CSS el portafoli haurà de complir almenys amb els requisits següents:

  1. Els estils respecten les indentacions o tabulacions perquè sigui còmode de llegir.
  2. Els estils són en un fitxer independent amb extensió ".css".
  3. El portafoli ha de contenir estils assignats pels tres tipus de selectors.
  4. El portafoli utilitza almenys 3 tipus de combinators diferents.
  5. El portafoli ha d'usar les etiquetes semàntiques d'HTML5.
  6. El portafoli ha de comptar amb una capçalera i un peu.
  7. El full d'estils ha de tenir com a mínim un comentari per indicar-ne l'autor.
  8. El portafoli utilitza una font personalitzada per als títols i una font personalitzada per al contingut.
  9. El portafoli utilitza paddings i/o margins de manera adequada.
  10. El portafoli conté almenys un tooltip.

Si vols fer que el teu currículum sigui realment responsiu pots fer servir aquest vídeo de guia: