Javier Castellanos
Portfoli digital
,

Plantilla del disseny de les pàgines (text, imatges, ubicació)


Objectiu

Definir una plantilla única per al disseny de les pàgines del portfoli (on va el text, on van les imatges i on s’ubica cada element), justificar-ne l’estructura amb criteris de composició i d’experiència d’usuari, i comprovar que s’aplica de manera consistent a tot el lloc.

Justificació

El portfoli l’han de poder llegir persones que només hi dedicaran uns segons (professorat, una empresa que busca un tècnic). Per això l’estructura segueix quatre criteris:

  • Jerarquia visual: primer es veu el títol i la categoria, després la imatge destacada i, a continuació, el text. L’ull ja sap on mirar a cada pàgina.
  • Coherència: totes les entrades comparteixen la mateixa distribució. Un cop s’ha après a llegir-ne una, se sap llegir-les totes.
  • Llegibilitat: el text ocupa una columna d’uns 760 px, una amplada còmoda per a la lectura, i les imatges van dins d’aquesta mateixa columna amb vores arrodonides, de manera que no trenquen el text.
  • Navegació previsible: la capçalera (amb el menú) i el peu són sempre al mateix lloc; a la part baixa de cada entrada hi ha l’etiquetatge i els enllaços a l’entrada anterior i la següent, perquè qui llegeix no es quedi en un carreró sense sortida.

Distribució triada per a una entrada

Zona Contingut Ubicació
Capçalera Logotip, títol del lloc i menú (Inici, Repte 1.1 i els seus encàrrecs) A dalt de tot, igual a totes les pàgines
Hero de l’entrada Categoria, títol, autor i data Centrat, a sota de la capçalera
Imatge destacada Imatge principal de la tasca Al principi de la columna de contingut (380 px d’alçada, cantonades arrodonides)
Text Objectiu, justificació, passos, resultat Columna principal esquerra (760 px)
Imatges d’evidència Captures de pantalla dins del text, a sota del pas que expliquen Dins de la columna principal, a amplada completa
Etiquetes, autor i navegació Etiquetes, bloc d’autor, entrada anterior/següent Al final de la columna principal
Barra lateral Complements del lloc Columna dreta
Peu Informació final del lloc A baix de tot, igual a totes les pàgines

Implementació

El tema Unibiz és un tema de blocs, de manera que la plantilla no es duplica a mà a cada pàgina: es defineix una sola vegada a Aparença > Editor > Plantilles i WordPress l’aplica a tot el contingut del mateix tipus.

  • Plantilla «Single Posts»: és la que defineix la distribució de cada entrada (capçalera, hero, columna de contingut de 760 px amb imatge destacada, text, etiquetes, autor, navegació i comentaris, i barra lateral). Qualsevol entrada nova la fa servir automàticament.
  • Plantilla «Blog Home» (portada): pensada per a la primera impressió: títol gran, botons d’acció, xifres de PageSpeed i targetes de seccions que porten a cada encàrrec.
  • Plantilla «All Archives»: és la de les categories (Repte i encàrrecs), amb la llista d’entrades de cada una.
  • Plantilles «Pages» / «Page With Sidebar» / «Page No Sidebar»: per a les pàgines fixes com «Sobre mi».
  • Parts de plantilla compartides: la capçalera, el peu i la barra lateral són parts independents (header, footer, sidebar) reutilitzades per totes les plantilles. Si es canvia el menú o el peu una sola vegada, el canvi apareix a tot el lloc.

Les plantilles personalitzades (Blog Home i All Archives) apareixen marcades com a modificades a l’editor; la resta provenen del tema i s’han deixat tal com són per mantenir la coherència.

Comprovació de la consistència

S’obren diverses entrades de categories diferents (correu, entorn de treball, WordPress) i es comprova que tenen la mateixa capçalera, la mateixa columna de text, la imatge al mateix lloc i el mateix peu. També es comprova en una pantalla estreta (mòbil), on les columnes s’apilen i el text continua sent llegible.

Evidències

Aparença > Editor > Plantilles: llista de plantilles del tema Unibiz
Plantilla Single Posts oberta a l'editor amb la vista de llista de blocs
Entrada publicada amb la distribució de la plantilla
Entrada publicada en versió mòbil: les columnes s'apilen i el text continua llegible
Entrada d'una altra categoria (Instal·lació de FileZilla) amb la mateixa distribució

Resultat final

Totes les entrades del portfoli comparteixen una única plantilla amb una distribució clara: títol i categoria a dalt, imatge destacada, text en una columna llegible, evidències dins del text i navegació al final. Com que el disseny viu a la plantilla i no a cada pàgina, el resultat és uniforme, fàcil de mantenir i d’aspecte professional.


jcastellanos Avatar

Cada mòdul, un professor

Passa el cursor o toca un mòdul per conèixer qui l'imparteix.

OC

Programació i Web

Oscar Cascan