A.- Adaptabilitat als dispositius
Fa 10 anys les pàgines web eren accedides al 99% de probabilitat des d'un ordinador personal, amb resolucions de pantalla molt determinades (1024*768, 1920*1080...). Això permetia realitzar uns dissenys prou fixos, als quals els continguts de la web no havien de desplaçar-se massa per la pantalla.
L'escenari actual és radicalment diferent, qualsevol web ha de poder ser accedida des de qualsevol dispositiu, independentment de la mida de la pantalla, i la seua resolució. Per això, si volem una web actualitzada i útil, aquesta ha d'assolir els objectius d'adaptabilitat a tota classe de dispositius. Aquesta propietat s'anomena RESPONSIVITAT (que no se vos oblide la parauleta, si sou el/la encarregat/da de la web del centre, és la vostra responsabilitat que la pàgina tinga responsivitat). ¿Com es fa això? ¿Jo què sé de responsiviqué...? No patiu, PortalEdu ho farà per nosaltres. Aleshores, ¿Quina seria la nostra tasca en aquest apartat? Doncs no seria mala idea...
- Evitar incloure imatges massa amples.
- No fer servir taules per a organitzar els continguts ni de la web ni de les entrades, es millor fer servir columnes, que poden lliscar si la pàgina és més gran o més xicoteta.
- Accedir a la web del centre des d'altres dispositius (tauletes, mòbils, televisors...), i comprovar que l'aparença es manté.
- Comprovar la visibilitat i funcionalitat dels menús de navegació en tots els casos.
Si no teniu cap altre dispositiu a l'abast, teniu altra manera de comprovar la reponsivitat del vostre lloc web. Proveu la següent combinació de tecles (si utilitzeu altres navegadors, podeu fer una cerca en Internet):
- FIREFOX: ctrl-shift-M a Windows/Linux o cmd-opt-M en Mac
- CHROME i OPERA: ctrl-shift-C a Windows/Linux ocmd-opt-C en Mac
Podreu modificar la mida del vostre navegador a la resolució que vulgueu! Proveu de fer-ho en el vostre equip! En la següent imatge podeu veure com funciona això en Firefox, amb el ratolí podem variar la grandària de la nostra pantalla, si el tema de Wordpress es realment responsiu... el contingut s'haurà d'adaptar a l'espai que tinga!
TASCA: Provant l'adaptabilitat del meu lloc
Analitzem fins a quin punt la responsivitat pot determinar que la nostra pàgina siga pràctica, donada la utilització de la web en l'actualitat. Per a això farem un exemple ràpid, en el qual usarem una taula per a mostrar contingut, i després ficarem el mateix contingut directament en columnes. Comprovarem el seu comportament si veiem aqueixa pàgina en dispositius amb resolucions menors.
- Dirigeix-te a la pàgina de proves de l'editor visual que inclou PortalEdu, i accedeix a la demo de constructor de pàgines. Per defecte carrega una pàgina amb bastants elements ja inclosos, la qual cosa resulta prou incomoda. Elimina tots els elements des del menú que apareix en la barra superior en passar el ratolí per cadascun.
- Amb la pàgina neta, sense contingut, inclourem una distribució en 3 columnes, amb el botó + que apareix en la part superior de la pantalla:
- Inclou ara, en cadascuna de les columnes un element Text Editor, i fica el text que vulgues.
- Visita una web que t'ajude a fer una taula HTML ràpidament, ací tens un exemple de generador de taules HTML en línia. Fes una taula d'una sola fila i tres columnes. Ompli les columnes amb el mateix text que has ficat en el punt anterior.
- Genera el codi HTML de la taula i copia'l.
- En la demo de l'editor visual, inclou ara un element HTML, baix del contingut que ja tens. L'aspecte de la teua pàgina hauria de ser paregut al següent (hem ficat vora a la taula per comoditat):
Ara pots provar la responsivitat d'una opció i de l'altra, si recordes el que comentarem en l'apartat d'Adaptabilitat als dispositius, en les recomanacions de disseny, pots fer que el teu navegador canvie de resolució. D'aquesta manera comprovaràs que el contingut que NO està dins la taula pot lliscar si la pantalla és més gran o més reduïda.
Darrera actualització: Dimarts Agost 30, 2022 15:51:14 GMT-0000
