Unidad 10. Maquetación web con CSS

Módulo de Desarrollo y Publicación de Productos Editoriales Multimedia

Actividades Unidad 10

Act01 Maquetación final con CSS “Nomadic Life”

Esta actividad consiste en realizar la maquetación de todas las páginas del proyecto de Nomadic Life tomando como referencia la “Fase 3” del proyecto.

INDICACIONES PARA LA REALIZACIÓN

PRIMERO

Lo primero que hay que hacer es preparar la plantilla que será la base de todas las páginas que incluirá todos los contenedores comunes: header, nav, main, espacios publicitarios, footer y cualquier otro contenedor.

En cada contenedor se incluirá el contenido común y contenidos simulados que posteriormente se sustituirán por los contenidos específicos de cada página.

Las nuevas reglas de estilo CSS para la maquetación se podrán incluir en la hoja de estilos en uso o crear una nueva hoja que incluya solo las reglas de la maquetación.

Es muy importante chequear que la plantilla queda correctamente preparada antes de proceder con la maquetación de todas las páginas. Con la plantilla bien cerrada, tendremos más del 50% del trabajo realizado.

 

SEGUNDO

Sobre la “plantilla” preparada, procederemos a maquetar cada una de las páginas del proyecto, copiando los contenidos de la página en cuestión:

  1. Colocar el “contenido específico” de cada página dentro de la etiqueta <main>
  2. En cada página habrá que actualizar todo lo específico de la misma: título del documento, enlaces u otras y “Guardar como” utilizando el mismo nombre para no afectar a los enlaces que estuvieran configurados.

 

TERCERO

Se valorará positivamente el diseño y desarrollo de las páginas “Galería” y “Contacto”, ambas con contenido y diseño personalizado.

 

CUARTO

Es muy importante la revisión final exhaustiva de todo. Debes chequear la ausencia de errores en ninguna página, que los contenedores se adaptan correctamente a los cambios de tamaño de la ventana del navegador, que todos los enlaces funcionan bien y en definitiva cualquier circunstancia que pueda no funcionar correctamente.

Recuerda usar la planilla o árbol del sitio para marcar o puntear la maquetación y la revisión final de cada una de las páginas.

 

INDICACIONES DE ENTREGA

  • Entregar una copia de la carpeta raíz del sitio, asegurándote que solo incluye los archivos y documentos necesarios.

 

Act02 Maquetación final con CSS “Led Zeppelin”

Esta actividad consiste en realizar la maquetación de todas las páginas del proyecto de Nomadic Life tomando como referencia la “Fase 3” del proyecto.

INDICACIONES PARA LA REALIZACIÓN

PRIMERO

Lo primero que hay que hacer es preparar la plantilla que será la base de todas las páginas que incluirá todos los contenedores comunes: header, nav, main, espacios publicitarios, footer y cualquier otro contenedor.

En cada contenedor se incluirá el contenido común y contenidos simulados que posteriormente se sustituirán por los contenidos específicos de cada página.

Las nuevas reglas de estilo CSS para la maquetación se podrán incluir en la hoja de estilos en uso o crear una nueva hoja que incluya solo las reglas de la maquetación.

Es muy importante chequear que la plantilla queda correctamente preparada antes de proceder con la maquetación de todas las páginas. Con la plantilla bien cerrada, tendremos más del 50% del trabajo realizado.

 

SEGUNDO

Sobre la “plantilla” preparada, procederemos a maquetar cada una de las páginas del proyecto, copiando los contenidos de la página en cuestión:

  1. Colocar el “contenido específico” de cada página dentro de la etiqueta <main>
  2. En cada página habrá que actualizar todo lo específico de la misma: título del documento, enlaces u otras y “Guardar como” utilizando el mismo nombre para no afectar a los enlaces que estuvieran configurados.

 

TERCERO

Se valorará positivamente el diseño y desarrollo de una página de “Galería” y “Contacto”, ambas con contenido y diseño personalizado.

 

CUARTO

Es muy importante la revisión final exhaustiva de todo. Debes chequear la ausencia de errores en ninguna página, que los contenedores se adaptan correctamente a los cambios de tamaño de la ventana del navegador, que todos los enlaces funcionan bien y en definitiva cualquier circunstancia que pueda no funcionar correctamente.

Recuerda usar la planilla o árbol del sitio para marcar o puntear la maquetación y la revisión final de cada una de las páginas.

 

INDICACIONES DE ENTREGA

  • Entregar una copia de la carpeta raíz del sitio, asegurándote que solo incluye los archivos y documentos necesarios.

 

Act03 Desarrollo de Proyecto Web de Diseño Personal

En esta actividad, deberás desarrollar un proyecto web personal a partir de la propuesta de diseño que has ido definiendo y planificando durante el módulo de Diseño.

INDICACIONES PARA LA REALIZACIÓN

PRIMERO

A partir de la propuesta de diseño bien definida, lo primero que hay que hacer es preparar la plantilla, que será la base de todas las páginas y que incluirá todos los contenedores comunes: header, nav, main, espacios publicitarios, footer y cualquier otro contenedor.

Es muy importante chequear que la plantilla queda correctamente preparada antes de proceder con la maquetación de todas las páginas. Con la plantilla bien cerrada, tendremos más del 50% del trabajo realizado.

 

SEGUNDO

El diseño planteado debe ser diferente a la referencia utilizada durante el curso y deberá estar justificado en función a las indicaciones dadas en el módulo de Diseño.

 

TERCERO

Se valorará positivamente la aplicación de un diseño responsive y la inclusión o utilización de cualquier funcionalidad “extra”.

 

INDICACIONES DE ENTREGA

Entregar una copia de la carpeta raíz del sitio. Entregar  también la memoria justificativa del diseño que incluya los MOCKUPS y la propuesta gráfica previa al desarrollo y maquetación final del proyecto.

 

Act04 Desarrollo web con EXTRAS y Diseño Responsive

Realizar el desarrollo de la plantilla web de un “supuesto” sitio con diseño y contenido simulado basado en una estructura libre que deberás explicar y justificar.

INDICACIONES DE ENTREGA

Entregar una copia de la carpeta raíz del "supuesto" sitio.