MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

Estructuración de una Página de contenido

La estructuración de una página de contenido lista para su uso mediante CSS es una habilidad muy importante para dominar, por lo que en esta evaluación  verá  su capacidad para pensar en cómo  podría finalizar una página  buscando y eligiendo la semántica estructural adecuada para construir un diseño en la parte superior.

 
Prerequisitos: Antes de intentar esta evaluación, usted debería haber trabajado ya en el resto del curso, con un énfasis particular en la Estructura del Documento y del Sitio Web..
Objetivo: Probar el conocimiento de las estructuras de páginas web y cómo representar un prototipado de diseño prospectivo en el marcado.

Punto de partida

Para comenzar esta evaluación, debería tomar el   archivo zip  que contiene todos los activos de inicio. El archivo zip contiene:

  • El HTML que necesitas para añadir marcado estructural.
  • CSS para dar el estilo a tu marcado.
  • Las imágenes que serán utilizadas en la página.

Crée el ejemplo en su ordenador personal, o como alternativa utilize un sitio como JSBin o Thimble para hacer su evaluación.

Breve Proyecto

Para este proyecto, su tarea es tomar el contenido de la página principal de un sitio web de observación de aves y añadir elementos estructurales a la misma para que pueda tener un diseño de página aplicado a ella. Necesita tener:

  •  Un encabezado que abarca todo el ancho del sitio que contiene el título principal de la página, el logotipo del sitio y el menú de navegación. El título y el logotipo aparecen lado a lado una vez que se aplica el estilo, y la navegación aparece debajo de esos dos elementos.
  •   Un área de contenido principal que contiene dos columnas: un bloque principal para contener el texto de bienvenida y una barra lateral para contener miniaturas de imágenes.
  •   Un pie de página que contiene información sobre derechos de autor y créditos.

Debe agregar una presentación adecuada para:

  • El encabezado
  • El menú de navegación
  • El contenido principal
  • El texto de bienvenida
  • La barra lateral de imágenes
  • El pié de página

También debería:

  •  Aplicar el CSS proporcionado a la página agregando otro elemento <link> justo debajo del existente que se proporciona al principio.

Consejos

  • Utilize el validador de HTML  W3C   para validar su  HTML; Obtendrá puntos de bonificación si valida tanto como sea posible (la línea "googleapis" es una línea utilizada para importar fuentes personalizadas en la página del servicio Google Fonts, no se valida, así que no te preocupes. )
  • No necesita saber CSS para hacer esta evaluación; Sólo tiene que poner el CSS proporcionado dentro de un elemento HTML.
  • El CSS proporcionado está diseñado para que cuando se agreguen los elementos estructurales correctos al marcado, aparezcan verdes en la página representada.
  • Si se está quedando atascado y no puede imaginar ni qué elementos poner ni donde ponerlos , a menudo ayuda a dibujar un diagrama de bloques simple del diseño de página, y escribir en los elementos que usted piensa que debe envolver cada bloque.

Ejemplo

La siguiente captura de pantalla muestra un ejemplo de cómo podría verse la letra después de haber sido marcada.

The finished example for the assessment; a simple webpage about birdwatching, including a heading of "Birdwatching", bird photos, and a welcome message

Evaluación

Si está siguiendo esta evaluación como parte de un curso organizado, debe ser capaz de dar su trabajo a su maestro / mentor para el marcado. Si usted está aprendiendo por si mismo, entonces  puede obtener la guía de marcado con bastante facilidad preguntando sobre ello en la lista de correo  dev-mdc , o en el canal IRC #mdn  en Mozilla IRC. Pruebe a hacer el ejercicio primero - ¡No hay nada que ganar por hacer trampa!

 
 

Etiquetas y colaboradores del documento

 Colaboradores en esta página: SoftwareRVG
 Última actualización por: SoftwareRVG,