14/12/2016 Tarea

Preparado para el reto Web de Fotografía?

Objetivo
Con todas las facilidades que existen en la actualidad para capturar imágenes, cada vez existen más personas interesadas en el fascinante mundo de la
fotografía, es por ello que para este proyecto tendrás que desarrollar un sitio web responsivo para fotógrafos principiantes donde puedan exponer su
originalidad, creatividad y técnica al tomar fotografías. El sitio Comenzando con la Fotografía te permite poner en práctica lo aprendido en este curso, a
continuación te detallamos la lista de requerimientos que debe cumplir tu proyecto.

Requerimientos
Diagrama una página principal index.html tomando en cuenta las
siguientes especi caciones:

1. Cabecera esta sección debe contener la información del sitio, toma en

cuenta lo siguiente:
Establece el fondo de color #5b7989.
Agrega el Nombre del sitio "Comenzando con la fotografía" ubicado al
lado izquierdo, en blanco la letra debe tener una sombra de 2px de
color #02010a.
Aplica bordes redondeados en las esquinas superiores a 10px.
Desarrolla un menú, para la versión desktop, a la derecha con enlaceas
a tres páginas: Inicio, Paisajes, Retratos. La página actual debe tener
estilo sin subrayado.

2. Imagen Central en esta sección debes ubicar una imagen de tu

preferencia, considera lo siguiente:
Esta secccion debe tener la imagen centrada.
Establece como color de fondo #82c3a6.

3. Imagen Secundaria en esta sección debes ubicar dos imágenes de tu

preferencia, debajo de la imagen central una a la derecha y otra a la
izquierda ten en cuenta lo siguiente: siguiente:
Esta sección es a dos columnas usando ex para desktop y una
columna para móvil
Aplica como color de fondo #d5c75f y un borde de 1px.
Cada columna debe tener una imagen centrada y enlazar: la izquierda
"paisajes" aplica un efecto de rotación de 10 grados cuando se coloca
el puntero sobre ella, agrega color de sombra #82c3a6 y borde 2px y la Consideraciones Generales
derecha "retratos" aplica un efecto de traslación de 5px hacia arriba y
20px a la derecha cuando se coloca el puntero del ratón sobre ella
1. Utiliza la tipografía Dancing Script.
agrega color de sombra #82c3a6 y borde 2px.
2. Establece el color de fondo negro #02010a.
4. Pie de página en esta sección debes ubicar información de contacto, 3. Cada imagen tiene un efecto de sombra de 2px con color #02010a.
términos, redes sociales, y derechos, aplica las siguientes 4. Crea un div llamado contenido que este centrado y que tenga
consideraciones: máximo 900px de ancho para desktop y ocupará el 100% para
Aplica bordes redondeados en las esquinas inferiores a 10px. móviles.
El pie debe estar a cuatro columnas en desktop y una columna en 5. Utiliza media queries para manejar dos tamaños Desktop: con
móvil. ancho de 900px o más y móvil con menos de 900px.
Aplica el color de fondo #C6d5c5. 6. Las imágenes deben ser responsivas.
La columna de contacto debe contener un correo electrónico, una
dirección física y un número telefónico.
En la columna de término agrega una frase corta referente a las
políticas.
En la columna de Redes Sociales, agrega tres de tu preferencia.
En la columna de Derechos agrega tu nombre, apellido, el símbolo de
CopyRight y el año actual.

Diagrama las páginas "paisajes.html" y "retratos.html" tomando en

cuenta las siguientes especi caciones:

1. Sigue las instrucciones anteriores para la cabecera agrega el título de la

https://learn.nextu.com/mod/assign/view.php?id=3413 1/7
14/12/2016 Tarea
1. Sigue las instrucciones anteriores para la cabecera agrega el título de la
página (paisajes o retratos) y actualiza los cambios de estilo de la página a
actual en el menú.
2. Para la sección de la galería selecciona al menos una imagen de tu
preferencia sobre paisajes o retratos según sea el caso.
La galería debe mostraste en tres columnas para desktop y en una para
móvil, sigue las siguientes consideraciones para los efectos de las
imágenes:
Para la imagen 1, aplica el efecto blur de 10px.
Para las imágenes 2,4,6 (pares) aplica escala de grises al 100%.
Para la imagen 3, aplica el efecto sepia de 90%.

3. Pie de página en esta sección debes ubicar información de contacto,

términos, redes sociales, y derechos, aplica las siguientes
consideraciones:
Aplica bordes redondeados en las esquinas inferiores a 10px.
El pie debe estar a cuatro columnas en desktop y una columna en
móvil.
Aplica el color de fondo #C6d5c5.
La columna de contacto debe contener un correo electrónico, una
dirección física y un número telefónico.
En la columna de término agrega una frase corta referente a las
políticas.
En la columna de Redes Sociales, agrega tres de tu preferencia.
En la columna de Derechos agrega tu nombre, apellido, el símbolo de
CopyRight y el año actual.

A continuación te presentamos dos videos para que tengas una guía de cómo debe lucir tu proyecto, ten en cuenta las siguientes consideraciones para la versión móvil:

1. Muestra centrado el menú y debajo del título.

2. El header debe tener una animación de slidein (debe venir de abajo hacia arriba y rebotar) está animación debe hacerse variando el margin-top de 150% a -5% y
luego a 0%, en los momentos 0%, 60% y 100% respectivamente.

VERSIÓN DESKTOP VERSIÓN MÓVIL

Instrucciones para la entrega

Una vez hayas completado el proyecto, comprime la carpeta con los archivos y súbela al curso. Sigue los siguientes pasos para completar esta sección
correctamente:

1. En la carpeta comprimida agrega tu proyecto con todos los recursos necesarios para su funcionamiento y un archivo github_url.txt que contenga el
URL de tu proyecto versionado en el repositorio. Recuerda que haciendo uso de Git Hub podrás ir creando tu portafolio de aplicaciones web.
2. Utiliza el siguiente nombre para el zip de la entrga: NombreDelCurso_PrimerNombre_PrimerApellido.zip. Es muy importante que la carpeta lleve tu
primer nombre y apellido para poder identi carlo correctamente.
3. Para subir el ZIP al curso, sigue los siguientes pasos:
Accede a la página Evaluación Final.
Haz clic en Añadir envío (hasta el nal de la página).
Agrega una descripción en la sección Texto en línea y Adjunta la Carpeta Comprimida en la sección Envíos de archivo.
Haz clic en Guardar Cambios.
https://learn.nextu.com/mod/assign/view.php?id=3413 2/7
14/12/2016 Tarea
Haz clic en Guardar Cambios.

Estatus de la entrega
Número de intento Éste es el intento 3.

Estatus de la entrega Enviado para cali car

Estatus de Cali cado

cali cación

CSS y Diseño Web Responsive > Evaluación Final

https://learn.nextu.com/mod/assign/view.php?id=3413 3/7
14/12/2016 Tarea

Criterio para cali car Completitud Experto. El proyecto Avanzado. El Aprendiz. El proyecto Novato. El proyecto Incumplido. (1) el
Funcional cumple con: (1) La proyecto cumple 6 o cumple entre 3 a 5 de cumple con 1 o 2 proyecto enviado no
animación al cargar 7 de los requisitos los requisitos que se requisitos que se corresponde a los
las páginas. (2) Los que se presentan a presentan a presentan a requerimientos
colores y estilos de la continuación: (1) La continuación: (1) La continuación: (1) La solicitados.
cabecera (Menú a la animación al cargar animación al cargar animación al cargar 0 puntos
derecha en desktop y las páginas. (2) Los las páginas. (2) Los las páginas. (2) Los
debajo en móvil). (3) colores y estilos de la colores y estilos de la colores y estilos de la
Los colores y estilos cabecera (Menú a la cabecera (Menú a la cabecera (Menú a la
del pie de página (a derecha en desktop y derecha en desktop y derecha en desktop y
cuatro columnas en debajo en móvil). (3) debajo en móvil). (3) debajo en móvil). (3)
desktop y una Los colores y estilos Los colores y estilos Los colores y estilos
columna en móvil). (4) del pie de página (a del pie de página (a del pie de página (a
Para la página de cuatro columnas en cuatro columnas en cuatro columnas en
inicio cumple con los desktop y una desktop y una desktop y una
colores de la sección columna en móvil). (4) columna en móvil). (4) columna en móvil). (4)
imagen central. (5) Para la página de Para la página de Para la página de
Para la página de inicio cumple con los inicio cumple con los inicio cumple con los
inicio cumple con los colores de la sección colores de la sección colores de la sección
colores de la sección imagen central. (5) imagen central. (5) imagen central. (5)
imagen secundaria (a Para la página de Para la página de Para la página de
dos columnas en inicio cumple con los inicio cumple con los inicio cumple con los
desktop y una colores de la sección colores de la sección colores de la sección
columna en móvil). (6) imagen secundaria (a imagen secundaria (a imagen secundaria (a
Agrega los efectos de dos columnas en dos columnas en dos columnas en
transición al situar el desktop y una desktop y una desktop y una
ratón sobre las columna en móvil). (6) columna en móvil). (6) columna en móvil). (6)
imágenes de la Agrega los efectos de Agrega los efectos de Agrega los efectos de
sección imagen transición al situar el transición al situar el transición al situar el
secundaria. (7) Para ratón sobre las ratón sobre las ratón sobre las
las páginas paisajes y imágenes de la imágenes de la imágenes de la
retratos cumple con sección imagen sección imagen sección imagen
los estilos y colores secundaria. (7) Para secundaria. (7) Para secundaria. (7) Para
de la sección galería las páginas paisajes y las páginas paisajes y las páginas paisajes y
(a 3 columnas en retratos cumple con retratos cumple con retratos cumple con
desktop y una los estilos y colores los estilos y colores los estilos y colores
columna en móvil). (8) de la sección galería de la sección galería de la sección galería
Para las páginas (a 3 columnas en (a 3 columnas en (a 3 columnas en
paisajes y retratos desktop y una desktop y una desktop y una
agrega los ltros de columna en móvil). (8) columna en móvil). (8) columna en móvil). (8)
imágenes en la Para las páginas Para las páginas Para las páginas
sección galería. paisajes y retratos paisajes y retratos paisajes y retratos
50 puntos agrega los ltros de agrega los ltros de agrega los ltros de
imágenes en la imágenes en la imágenes en la
sección galería. sección galería. sección galería.
37 puntos 19 puntos 10 puntos

Correctitud Experto: El proyecto Avanzado: El 80% del Aprendiz: El proyecto Novato: El proyecto Incumplido: (1) El
Funcional cumple con los proyecto cumple con cumple con 1 de los no cumple con los proyecto enviado no
siguientes items: (1) los siguientes items: siguientes items: (1) siguientes items: (1) corresponde a los
Imágenes (1) Imágenes Imágenes Imágenes requerimientos
responsivas. (2) responsivas. (2) responsivas. (2) responsivas. (2) solicitados.
Manejo de código Manejo de código Manejo de código Manejo de código 0 puntos
U_CODE CSS responsivo. responsivo. responsivo. responsivo.
CSS y Diseño Web Responsive
30 puntos
> Evaluación
26 puntos
Final
10 puntos 5 puntos

Legibilidad y Calidad Experto. El proyecto Avanzado. El 80% del Aprendiz. El proyecto Novato. El proyecto Incumplido. (1) El
de Código cumple con los proyecto cumple con cumple con 1 de los no cumple con los proyecto enviado no
siguientes items: (1) los siguientes items: siguientes items: (1) siguientes items: (1) corresponde a los
Código ordenado. (2) (1) Código ordenado. Código ordenado Código ordenado. (2) requerimientos
Nombra los (2) Nombra los 5 puntos Nombra los solicitados.
elementos, clases y elementos, clases y elementos, clases y 0 puntos
recursos, de manera recursos, de manera recursos, de manera
descriptiva y concisa. descriptiva y concisa. descriptiva y concisa.
10 puntos 8 puntos 2 puntos

Capacidad de ser Experto. (1) El Avanzado. (1) El Aprendiz. (1) Existe el Novato. (1) El Incumplido. (1) el
modi cado proyecto fue proyecto fue enlace del proyecto proyecto no fue proyecto enviado no
publicado en Github y publicado en Github. en Github, pero no se publicado en Github. corresponde a los
se evidencia el uso de 9 puntos encuentra 2 puntos requerimientos
versiones. actualizado. solicitados.
10 puntos 5 puntos 0 puntos

Última modi cación Tuesday, 13 de December de 2016, 22:08

https://learn.nextu.com/mod/assign/view.php?id=3413 4/7
14/12/2016 Tarea

Texto en línea
Evaluación nal del curso CSS y Diseño Web Responsive 

realizado por Angel Rosendo Condori Coaquira

Envíos de archivo   CSSyDiseñoWebResponsive_Angel_Condori .zip

Retroalimentación
Cali cación Completitud Funcional Experto. El Avanzado. El Aprendiz. El Novato. El Incumplido. (1) Tu aplicación cumple con las características
proyecto proyecto proyecto proyecto el proyecto indicadas, responde y se adapta muy bien a los
cumple cumple 6 o 7 cumple entre cumple con 1 enviado no cambios de tamaño de la pagina. ¡Muy bien!
con: (1) La de los 3 a 5 de los o 2 requisitos corresponde a
animación requisitos requisitos que se los
al cargar que se que se presentan a requerimientos
las páginas. presentan a presentan a continuación: solicitados.
(2) Los continuación: continuación: (1) La 0 puntos
colores y (1) La (1) La animación al
estilos de animación al animación al cargar las
la cabecera cargar las cargar las páginas. (2)
(Menú a la páginas. (2) páginas. (2) Los colores y
derecha en Los colores y Los colores y estilos de la
desktop y estilos de la estilos de la cabecera
debajo en cabecera cabecera (Menú a la
móvil). (3) (Menú a la (Menú a la derecha en
Los colores derecha en derecha en desktop y
y estilos desktop y desktop y debajo en
del pie de debajo en debajo en móvil). (3)
página (a móvil). (3) móvil). (3) Los colores y
cuatro Los colores y Los colores y estilos del pie
columnas estilos del pie estilos del pie de página (a
en desktop de página (a de página (a cuatro
y una cuatro cuatro columnas en
columna en columnas en columnas en desktop y
móvil). (4) desktop y desktop y una columna
Para la una columna una columna en móvil). (4)
página de en móvil). (4) en móvil). (4) Para la
inicio Para la Para la página de
cumple con página de página de inicio cumple
los colores inicio cumple inicio cumple con los
de la con los con los colores de la
sección colores de la colores de la sección
imagen sección sección imagen
central. (5) imagen imagen central. (5)
Para la central. (5) central. (5) Para la
página de Para la Para la página de
inicio página de página de inicio cumple
cumple con inicio cumple inicio cumple con los
los colores con los con los colores de la
U_CODE CSS de la colores de la colores de la sección
CSS y Diseño
sección
Web Responsive
sección sección
> Evaluación
imagen
Final
imagen imagen imagen secundaria (a
secundaria secundaria (a secundaria (a dos columnas
(a dos dos columnas dos columnas en desktop y
columnas en desktop y en desktop y una columna
en desktop una columna una columna en móvil). (6)
y una en móvil). (6) en móvil). (6) Agrega los
columna en Agrega los Agrega los efectos de
móvil). (6) efectos de efectos de transición al
Agrega los transición al transición al situar el
efectos de situar el situar el ratón sobre
transición ratón sobre ratón sobre las imágenes
al situar el las imágenes las imágenes de la sección
ratón de la sección de la sección imagen
sobre las imagen imagen secundaria.
imágenes secundaria. secundaria. (7) Para las
de la (7) Para las (7) Para las páginas
sección páginas páginas paisajes y
imagen paisajes y paisajes y retratos
secundaria. retratos retratos cumple con
(7) Para las cumple con cumple con los estilos y
páginas los estilos y los estilos y colores de la
paisajes y colores de la colores de la sección

https://learn.nextu.com/mod/assign/view.php?id=3413 5/7
14/12/2016 Tarea
retratos sección sección galería (a 3
cumple con galería (a 3 galería (a 3 columnas en
los estilos y columnas en columnas en desktop y
colores de desktop y desktop y una columna
la sección una columna una columna en móvil). (8)
galería (a 3 en móvil). (8) en móvil). (8) Para las
columnas Para las Para las páginas
en desktop páginas páginas paisajes y
y una paisajes y paisajes y retratos
columna en retratos retratos agrega los
móvil). (8) agrega los agrega los ltros de
Para las ltros de ltros de imágenes en
páginas imágenes en imágenes en la sección
paisajes y la sección la sección galería.
retratos galería. galería. 10 puntos
agrega los 37 puntos 19 puntos
ltros de
imágenes
en la
sección
galería.
50 puntos
Correctitud Funcional Experto: El Avanzado: El Aprendiz: El Novato: El Incumplido: (1) El proyecto maneja correctamente las imágenes y
proyecto 80% del proyecto proyecto no El proyecto el código responsivo, muy buen trabajo.
cumple con proyecto cumple con cumple con enviado no
los cumple con 1 de los los corresponde a
siguientes los siguientes siguientes los
items: (1) siguientes items: (1) items: (1) requerimientos
Imágenes items: (1) Imágenes Imágenes solicitados.
responsivas. Imágenes responsivas. responsivas. 0 puntos
(2) Manejo responsivas. (2) Manejo (2) Manejo
de código (2) Manejo de código de código
responsivo. de código responsivo. responsivo.
30 puntos responsivo. 10 puntos 5 puntos
26 puntos
Legibilidad y Calidad Experto. El Avanzado. El Aprendiz. El Novato. El Incumplido. (1) El código muestra una excelente organización, es
de Código proyecto 80% del proyecto proyecto no El proyecto muy fácil de seguir y entender, un punto muy a
cumple con proyecto cumple con cumple con enviado no favor es la organización de las diferentes partes
los cumple con 1 de los los corresponde a del código en varios archivos, además del buen
siguientes los siguientes siguientes los uso de saltos de linea y espacios en blanco. ¡Buen
items: (1) siguientes items: (1) items: (1) requerimientos trabajo, felicidades!
Código items: (1) Código Código solicitados.
ordenado. Código ordenado ordenado. 0 puntos
(2) Nombra ordenado. 5 puntos (2) Nombra
los (2) Nombra los
elementos, los elementos,
clases y elementos, clases y
recursos, de clases y recursos, de
manera recursos, de manera
descriptiva y manera descriptiva y
concisa. descriptiva y concisa.
10 puntos concisa. 2 puntos
U_CODE CSS 8 puntos
Capacidad deCSS
ser y Diseño Web
Experto. (1) Responsive
Avanzado. > (1)
Aprendiz. Evaluación Final (1)
Novato. (1) Incumplido. Debido al alojamiento de tu proyecto en Github,
modi cado El proyecto (1) El Existe el El proyecto el proyecto se puede evidenciar las versiones utilizadas en
fue proyecto fue enlace del no fue enviado no este. ¡Excelente!
publicado en publicado en proyecto en publicado en corresponde a
Github y se Github. Github, pero Github. los
evidencia el 9 puntos no se 2 puntos requerimientos
uso de encuentra solicitados.
versiones. actualizado. 0 puntos
10 puntos 5 puntos

100 % (100)

Cali cado en Wednesday, 14 de December de 2016, 09:33

Cali cado por Abel Pomares

Comentarios de
retroalimentación ¡Enhorabuena!

Hiciste un muy buen trabajo, lograste resolver todos los puntos de la evaluación, ahora te invitamos a que continúes con ...

Intentos previos
https://learn.nextu.com/mod/assign/view.php?id=3413 6/7
14/12/2016 Tarea

Intentos previos
Intento 2: Tuesday, 13 de December de 2016, 21:25
Intento 1: Tuesday, 13 de December de 2016, 00:08

Copyright © 2016 Next U LLC.

¿Quiénes somos? Contáctenos Condiciones de servicio Política de privacidad



U_CODE CSS
CSS y Diseño Web Responsive > Evaluación Final

https://learn.nextu.com/mod/assign/view.php?id=3413 7/7