Evaluacin Final

Introduccin
En este proyecto trabajar diseando y desarrollando un sitio web comercial donde tendr
la oportunidad de incorporar los conocimientos y habilidades que ha aprendido en este
curso. En este proyecto usted podr:
1.

Escoger cualquier elemento HTML por medio de los selectores CSS3

2.

Aplicar colores a los elementos HTML por medio de los estilos en cascada

3.

Maquetar las pginas Web por medio de los estilos en cascada nivel tres

4.

Crear pginas dinmicas con transiciones y animaciones con CSS3

5.

Realizar pginas que respondan al tamao de la pantalla donde se visualizan

Su objetivo principal ser crear efectos con los estilos en cascada y hacer pginas que
respondan al tamao de la pantalla en la que se visualizan, as como aadir fuentes web
para modificar la apariencia de las pginas.

Materiales complementarios de evaluacin

Haga clic en la imagen a la derecha para descargar los archivos correspondientes a este proyecto

Instrucciones
1.

Baje el archivo CSS3_ProyectoFinal.zip y extraiga los archivos en una carpeta

que se llame eCommerce-NextU.

2.

Copie la carpeta eCommerce_inicio con el nombre eCommerce_trabajo. Entre a

esta ltima.

3.

Abra el archivo carrito.html y el archivo carrito.css. Realice:

o

En el archivo de estilos en cascada, seleccione todas las imgenes que se

encuentren dentro de una etiqueta td y aada una sombra de 5px en x, 5px en
y y 5px de dispersin y de color negro. Utilice el selector >.

4.

Abra el archivo carrito.html y el archivo carrito.css. Realice:

o

En el archivo de style.css verifique que se encuentre escrita las

instrucciones para leer la fuente BebasNeueRegular.

Revise la carpeta fuentes en su carpeta de trabajo. En esta carpeta

deber existir la carpeta con las fuentes. Revise que existan los archivos eot, woof,
svg y ttf.

Abra el archivo de estilos en cascada carrito.css y busque la regla de

estilo para las etiquetas de encabezado de la tabla th.

o
5.

Cambie la familia de la fuente por BebasNeueRegular.

Abra el archivo index.html y style.css y realice las siguientes modificaciones:

En el archivo style.css busque al final del mismo el rea de las clases.

Aada la regla de estilo con la pseudoclase hover para la clase foto.

Escriba una regla de opacidad del 75%.

Ejecute en un navegador la pgina y pase el cursor sobre la imagen y

verifique que hay un cambio en la opacidad.

6.

Abra el archivo producto.html y el archivo producto.css. En el archivo de estilos

en cascada realice los siguientes cambios:
o

Copie las siguientes reglas de estilo a la seccin de media queries para

la tableta: #pd-content, #pd-columnaIzq, #pd-columnaCen, #pd-columnaDer, #pdcarrito, button, .pd-accesorio, footer.

7.

En la regla de estilo #pd-content cambie el ancho de 1000px a 90%.

En la regla de estilo button cambie el ancho a 100% y la altura a 40px.

En las reglas .pd-accesorio{} y footer{} cambie el display a none.

Abra el archivo producto.html y el archivo producto.css. En el archivo de estilos

en cascada realice los siguientes cambios:
o

Copie las siguientes reglas de estilo a la seccin de media queries para

el telfono-inteligente: #pd-content, #pd-columnaIzq, #pd-columnaCen , #pdcolumnaDer, #pd-carrito, button, .pd-accesorio, footer.

En la regla de estilo #pd-content cambie el ancho de 1000px a 90%.

En las reglas de estilos #pd-columnaIzq, #pd-columnaCen y #pdcolumnaDer elimine la regla float. Cambie el ancho a 90% y la altura a forma
automtico.

En la regla de estilo button cambie el ancho a 100% y la altura a 40px.

En las reglas .pd-accesorio{}, #pd-carrito y footer{} cambie

el display a none.

8.

Abra el archivo index.html y style.css y realice las siguientes modificaciones:

o

Abra el archivo style.css y busque en su parte inferior la animacin

llamada inicio.

Busque la regla de estilo llamado .contenido01.

Llame ah a la animacin inicio, con una duracin de 2 segundos.

Llame a la misma animacin para los navegadores moz- y webkit-.

Instrucciones para entregar su proyecto

Una vez haya completado el proyecto, tiene que crear un folder comprimido y subirlo al
curso. Siga los siguientes pasos para completar esta seccin correctamente:
1.

Primero, tiene que cambiar el nombre al folder que contiene los documentos del
proyecto. Utilice el siguiente
formato:CSS3_ProyectoFinal_PrimerNombre_PrimerApellido.zip. Es sumamente
importante que el folder lleve su primer nombre y apellido para poder identificarlo
correctamente.

2.

A continuacin, debe de comprimir el folder.

o

Para comprimir el folder en Windows (hacerlo ZIP): Deber posicionarse

sobre el folder o carpeta que quiera comprimir, dar clic con el botn derecho del
ratn y seleccionar Enviar a: \ Send to y buscar la opcin de Carpeta comprimida
(en zip) \ Compressed (zipped) Folder.

Para comprimir el folder en Mac (hacerlo ZIP): Deber posicionarse sobre

el folder o carpeta que quiera comprimir, dar clic mientras se oprime la tecla Control
o dar clic con el botn derecho del ratn y seleccionar Comprimir
NombredelFolder \ Compress FolderName en el men contextual que aparece.

3.

Una vez haya comprimido el folder, lo tiene que subir al curso. Para subir el ZIP al
curso, siga los siguientes pasos:

Acceda la pgina Evaluacin Final.

Haga clic en Aadir envo.

Agregue una descripcin en la seccin Texto en lnea y adjunte el folder

comprimido en la seccin Envos de archivo.

Haga clic en Guardar cambios.