MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Mozilla pàgina de benvinguda

This translation is incomplete. Please help translate this article from English.

En aquesta avaluació, posarem a prova els vostres coneixements d'algunes de les tècniques descrites en els articles d'aquest mòdul, fent que afegiu algunes imatges i vídeos a una pàgina, amb un toc de moda, tot sobre Mozilla!

Requisits Previs: Abans d'intentar aquesta avaluació ja hauria d'haver treballat el mòdul Multimedia i incrustació.
Objectiu: Posar a prova els coneixements al voltant de la incrustació d'imatges i de vídeo en pàgines web, marcs i tècniques d'imatge sensible HTML.

Punt de partida

Per començar aquesta avaluació, s'ha de agafar l'HTML i totes les imatges disponibles en el directori mdn-splash-page-start en github. Desar el contingut d'index.html en un arxiu anomenat index.html en la unitat local, en un nou directori. A continuació, desar pattern.png en el mateix directori (botó dret del ratolí sobre la imatge per obtenir l'opció de guardar-lo).

Accedir a les diferents imatges en el directori de les originals i guardar-les de la mateixa manera; voldreu guardar-les en un directori diferent, per ara, ja que necessitareu manipular-les (algunes) usant un editor de gràfics abans de que estiguin llestes per ser utilitzades.

Nota: L'arxiu HTML d'exemple conté un bon munt de CSS, l'estil de la pàgina. No cal tocar el CSS, només l'HTML dins de l'element <body> - sempre que s'insereix el marcat correcte, l'estil farà que es vegi correcte.

Project brief

En aquesta avaluació presentem una pàgina de benvinguda de Mozilla gairebé acabada, que pretén dir alguna cosa agradable i interessant sobre el que representa Mozilla, i proporcionar alguns enllaços a altres recursos. Malauradament, no s'han afegit imatges o vídeos - aquesta és la vostre feina! Cal afegir alguns medis perquè la pàgina es vegi bé i tingui més sentit. Les següents subseccions detallan el que s'ha de fer:

Preparar imatges

Usar l'editor d'imatges favorit, per crear versions de 400px d'ample i 120px d'ample:

  • firefox_logo-only_RGB.png
  • firefox-addons.jpg
  • mozilla-dinosaur-head.png

Anomenar-les d'una manera sensata, per exemple, firefoxlogo400.png i firefoxlogo120.png.

Juntament amb mdn.svg, aquestes imatges seran les vostres icones per enllaçar a altres recursos, dins l'àrea d'informació addicional. També s'enllaçarà el logo de Firefox a la capçalera del lloc. Desar les còpies de tot això dins el mateix directori que index.html.

A continuació, crear una versió apaïsada de 1200 píxels d'ample de red-panda.jpg, i una versió retrat de 600px d'ample que mostri el panda en un primer pla. Una vegada més, anomenar-les d'una manera sensata perquè puguin se identificades fàcilment. Guardar una còpia de tots dues dins del mateix directori que index.html.

Nota: S'han de optimitzar les imatges JPG i PNG perquè siguin el més petites possible, mentre encara es vegin bé. tinypng.com és un gran servei per fer això fàcilment.

Afegir un logo a la capçalera

Dins de l'element <header>, afegir un element <img> que incrustar la petita versió del logo de Firefox a la capçalera.

Afegir un vídeo al continut principal del article

Just dins de l'element <article> (a sota de l'etiqueta d'obertura), incrustar el vídeo de YouTube trobat en https://www.youtube.com/watch?v=ojcNcvb1olg, utilitzant les eines adequades de YouTube per generar el codi. El vídeo ha de ser 400 px d'ample.

Afegir imatges sensibles als enllaços d'informació addicional

Dins de <div> amb la classe further-info, troben quatre elements <a> - cada un dels enllaços amb pàgines interessants relacionades amb Mozilla. Per completar aquesta secció haurem de inserir un element <img> dins de cada un d'ells que continguin els atributs apropiats src, alt, srcset i sizes.

En tots els casos (excepte un - quin és inherentment sensible?) volem que el navegador serveixi la versió de 120px d'ample quan l'amplada de la finestra gràfica sigui 480px d'ample o menys, o la versió de 400px d'amplada d'altra manera.

Assegurar-se de fer coincidir les imatges correctes amb els vincles correctes!

Nota: Per provar correctament els exemples srcset/sizes, es necessita pujar el lloc a un servidor (usant pàgines Github pages és una solució fàcil i lliure), a continuació, a partir d'aquí es pot comprovar si s'està treballant adequadament utilitzant les eines de desenvolupador del navegador, com es detalla en les imatges sensibles: eines útils per a desenvolupadors.

Un art dirigit panda vermell

Dins de <div> amb la classe red-panda, volem inserir un element <picture> que serveixi d'imatge de petit retrat del panda si la finestra gràfica és de 600px d'ample o menys, i la imatge apaïsada, gran, al contrari.

Exemple

Les següents captures de pantalla mostren la pàgina de benvinguda que ha de ser similar després d'haver estat marcada correctament, en una àmplia i estreta visualització de la pantalla.

A wide shot of our example splash page

A narrow shot of our example splash page

Avaluació

Si esteu seguint aquesta avaluació com a part d'un curs organitzat, heu de ser capaços de donar al vostre treball al professor/tutor per evaluar. Si sou d'auto-aprenentatge, llavors es pot obtenir la guia d'evaluació faciliment preguntan a la llista de correu dev-mdc o al canal d'IRC #mdn en Mozilla IRC. Proveu el primer exercici - no hi ha res a guanyar amb trampa!

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,