Pràctica Final. Web Juego de Tronos.

Entrevista Juego de Tronos

Aquesta pràctica té més pes en la nota final que una PAC normal i, a més, inclou pràcticament tot el que s’ha anat veient durant el curs. És important repassar bé que s’han fet servir les més ortodoxes pràctiques de marcatge (és pràcticament el que més compta per calcular la nota).

En aquesta oportunitat, s’ens demanava crear un site per la coneguda sèrie “Game of Thrones” (“Juego de Tronos”), amb una detallada descripció del que s’havia d’incloure. El nombre de requisits era tan elevat que fins i tot la redacció de la Pràctica estava equivocada en alguns petits aspectes. Afortunadament, la comunicació amb el consultor va ser molt bona en tot moment i ens donava constantment pistes sobre el que havíem de fer. Això si, sempre procurant ser massa explícit a fi de que els que anaven més endarrerits poguessin treure profit del que s’anava explicant.

Aquí teniu el resultat de la meva feina:

http://graumultimedia.com/treballs/lliew/pf/index.html

 

Aquest és un resum de les correccions més significatives que em va realitzar el consultor:

A) Correspondència amb la estructura, wireframe, proposat: 

Donar espai a la navegació de registre per a que no ocupi dues línies

B) Marcat semàntic i ordenat.Estructura dels arxius, títols de les pàgines

A title caldria deixar també la part ‘Game of Thrones’. Per exemple posar a actors ‘Game of Thrones: actors’, 

No oblidar tampoc les metadades (description i keywords)

Fes ús de les llistes per a agrupar elements que estan relacionats. Per exemple a temporada3.html els diferents capítols formen part d’una sola <ul> (o millor, una <ol>). Després cada <li> el flotaríes a l’esquerra i li donaries la amplada de 33%. Amb això ja s’aniran disposant en 3 columnes.

Mateix per als fons de pantalla, fes una única ul.

A part de afegir-hi una informació semàntica, et dona un HTML molt més automatitzat. No tens d’anar posant un ítem a cada div, cada columna, just afegeixes un nou <li> i aquest es disposa automàticament on li toqui.

Cal marcar sempre els width/height, les dimensions de les imatges

C) Correcta maquetació del contingut

Episodis: Fer ús d’una <ol>. Es tracta de capítols relacionats.

Actor/Actriu, Productors/escriptors: Es correcte, però seria més adient una simple <dl>, només tens termes i definicions.

Enllaços d’interés: no es tracta d’una taula

Fons de pantalla: fes ús d’una <ul>

Entrevista: Un consell: no posis un scroll a dins d’una pàgina. Deixa que sigui el navegador qui afegeixi o no aquest scroll extra. Fixa’t que passa si redueixes la finestra, et trobes amb dos barres de scroll, poca usabilitat.

Programació: Fixa’t que tal com tens la taula la primera columna serveix com encapçalament de les files, es a dir caldria que fossin tots th. També caldria indicar scope per al th,

Ús de taules per maquetar: Fixa’t que tal com tens la taula la primera columna serveix com encapçalament de les files, es a dir caldria que fossin tots th. També caldria indicar scope per al th, 

Leave a Reply