19,

Proyecto

CREANDO DUPLICADOS WEB CON CSS

Descripción

Tomando como referencia ejemplos del sitio web http://www.mezzoblue.com/zengarden/alldesigns/ especializado en el tema de los CSS (Cascading Style Sheets) se quiere dar una idea clara de las ventajas que brindan los CSS.
Para afianzar a los estudiantes, en el manejo de la sintaxis y aplicación de los estilos CSS en la creación de páginas web se les pide a los estudiantes duplicar una de las páginas web que se les presentó, utilizando los comandos vistos en clase de la página http://www.w3schools.com/css/default.asp y estructura CSS con los gráficos y textos que esta contiene.

Objetivos

  • Teniendo como referencia una página web creada utilizando los CSS los estudiantes hacen una replica de esta para desarrollar habilidades en la aplicación y estructura de los estilos CSS en una página web.

Area

Tecnología e Informática - Informática

Edad

Sin especificación

Duración

Sesión 1:

Herramientas

  • Editor de páginas Web

Recursos

  • Editor Web (Dreamweaver)
  • Bloc de notas
  • Internet

Requisitos

  1. Se presenta el proyecto y lo que se quiere lograr.
  2. Los estudiantes escogen la página a duplicar.
  3. Guardan todos los gráficos que esta brinda.
  4. Comienzan a organizar la estructura y los estilos css.
  5. Trabajan en la organización de la estructura y los estilos css.
  6. Trabajan en la organización de la estructura y los estilos css.
  7. Trabajan en la organización de la estructura y los estilos css.

Actividades de Clase

Propósito

Tomando como referencia ejemplos del sitio web http://www.mezzoblue.com/zengarden/alldesigns/ especializado en el tema de los CSS (Cascading Style Sheets) se quiere dar una idea clara de las ventajas que brindan los CSS.
Para afianzar a los estudiantes, en el manejo de la sintaxis y aplicación de los estilos CSS en la creación de páginas web se les pide a los estudiantes duplicar una de las páginas web que se les presentó, utilizando los comandos vistos en clase de la página http://www.w3schools.com/css/default.asp y estructura CSS con los gráficos y textos que esta contiene.

Duración

Actividad Docente

  • Durante la primera sesión se dará explicación de la actividad a los estudiantes y dejar claro lo que se quiere lograr con la realización de esta actividad.
  • El maestro guiara a los estudiantes en la navegación del sitio propuesto.
  • El maestro estará atento a las inquietudes que se le presenten a los estudiantes para lograr dar una solución a estas.
  • El maestro estará atento a las inquietudes que se le presenten a los estudiantes para lograr dar una solución a estas.
  • El maestro estará atento a las inquietudes que se le presenten a los estudiantes para lograr dar una solución a estas.
  • El maestro estará atento a las inquietudes que se le presenten a los estudiantes para lograr dar una solución a estas.

Actividad Estudiante

  • Durante la primera sesión los estudiantes estarán atentos al objetivo de la actividad. Tomaran nota de los tiempos propuestos.
  • Durante la segunda sesión los estudiantes navegaran por las páginas web que nos ofrece el sitio que estamos tomando como ejemplo, para escoger la página que ellos crean es la más adecuada para cumplir con la actividad, teniendo en cuenta el tiempo con el que cuentan y su habilidad.
  • Durante la tercera sesión los estudiantes recolectan todas la imágenes, fondos y textos que utilizaran en la replica que van a realizar.
  • Durante la cuarta sesión los estudiantes comenzaran a definir los estilos que utilizaran teniendo en cuenta la estructura que la página tiene.
  • Durante la quinta sesión los estudiantes estarán trabajando en la creación de los estilos CSS en el block de notas o en el editor web “Dreamweaver”, teniendo como ayuda los apuntes del cuaderno y la página web suministrada por el docente.
  • Durante la sexta y séptima sesión los estudiantes estarán trabajando en la estructura CSS para finalizar la página.

Propósito

Duración

Actividad Docente

Actividad Estudiante

Evaluación

.

Notas

.

Créditos

Autor: Anibal Ignacio Olave


Responsive image