Examen de Lenguajes de Marcas
Para realizar las actividades habrá que elegir unos colores adecuados, fuentes de letras que
combinen y aplicar el resto de recomendaciones explicadas en clase.
No se podrán utilizar programas de IA ni de mensajería ni de comunicación con otras
personas ni de ayuda al diseño en ningún caso. Tampoco usar el móvil.
1. Realiza una página web con la siguiente estructura utilizando FLEX. La página tiene que
tener una disposición lo más lógica posible ocupando todo el ancho y alto del
navegador. No puede salir la barra de desplazamiento horizontal.
Nombre de la empresa
Logotipo
Oferta del día
Navegación: Inicio, localización y formularios
Sección 1 Sección 2 Sección 3
Banner lateral
Vídeo de presentación (enlace a youtube)
Pie de página (Nombre completo del autor de la página)
Donde:
La página es respecto a una inmobiliaria (venta de viviendas)
Tienes que elegir unos colores según una paleta adecuada
Tienes que elegir un nombre para la empresa y se mostrará con una fuente de letra
importada de Google fonts.
Logotipo: imagen representativa de la página (habrá que realizar un enlace a la imagen
en la web)
Menú de navegación: texto que cambiará de color cuando se pase por encima. Hay
que hacerlo con css y no se podrá utilizar la etiqueta <a> y no usar los colores por
defecto. Los colores serán de los elegidos en la paleta de colores.
Secciones: Tendrá un título con un tamaño algo mayor que el resto de la sección, que
tendrá un texto que debe de ser mucho más grande que lo que reamente ocupa en la
pantalla, teniendo que usar alguna forma para poder desplazarse para ver todo el
texto, que está justificado.
Vídeo: vídeo de youtube que tenga reación con el tema con una visualización bien
situada en el espacio que tiene.
Banner lateral: Imagen respecto al tema de la página de forma adecuada al espacio de
la figura anterior
Pie de página: Texto con tu nombre, bien centrado con letra adecuada, y las
consideraciones hechas en clase.
Habrá un enlace a la página de formularios que tendrán que tener las siguientes
características:
La cabecera, logotipo, oferta del día y la navegación es igual a la página de inicio.
Habrá tres elementos de tipo texto, teniendo en cuenta las longitudes máximas que
puede tener cada campo según los elementos que pueden contener y que todos son
obligatorios de rellenar para poder enviar e formulario. Hay que disponerla centrado
en la página de forma que tenga una disposición
o Nombre completo: aceptará cadenas de texto en español que comience por
mayúsculas y le siga por lo menos una letra minúscula. Se podrán incluir tres o
cuatro cadenas de texto, no más. Por ejemplo es válido “Juan Ruiz Galo” y
“Ana María Núñez Fernández” y no lo son: “Antonio de Ávila Ramírez”
o Código Postal: Acepta cadenas de números de 5 elementos. Todos los códigos
postales deben de comenzar por “29”.
o Teléfono: Acepta nueve dígitos numéricos, comenzando por el código del país.
Por ejemplo: +34123456789. Todos los teléfonos pueden comenzar por “+34”
o bien no contenerlo y poner el número sin el prefijo.
o Además habrá un campo tipo radio button que nos servirá para saber el sexo
de la persona, con tres opciones: hombre, mujer, ns/nc.
Por último, debe de haber una página de localización, situada en la Torre Gálata en Estambul,
esto se realizará añadiendo a la página un mapa de google maps, teniendo un tamaño de
500x500px. La cabecera y la navegación deben de ser igual a la página de inicio.
2. Realiza un diseño responsive de la página anterior. Si el tamaño de la página es menor
que 768px, se rediseñará la página poniendo cada uno de los elementos anteriores en
forma de columna. Es decir, con esta estructura:
Nombre de la empresa
Oferta del día
Navegación
Logotipo
Sección 1
Sección 2
Sección 3
Vídeo
Banner lateral
Pie de página
La entrega estará suspensa si:
No se utilizan correctamente las distintas etiquetas, es decir, hay instrucciones fuera
del lugar donde deben de estar, hay estilos que no están en la hoja de estilo, no hay
criterio de colores, fuentes de letra, tamaño de la letra…
El diseño y el trabajo no están lo suficientemente desarrollado, utiliza colores que no
permiten visualizar correctamente el trabajo, no tiene un ancho y un alto adecuado, el
tamaño de la letra es pequeño, o no se han aplicado alguna de las instrucciones dadas
en clase
El código no está identado o está escrito de forma que sea difícil de leerlo
La hoja de estilo no es externa
No guarda una estructura de directorio adecuada, es decir, las imágenes, estilos... en
su carpeta correspondiente
El nombre de los ficheros, clases o identificadores no cumple con lo especificado en
clase
Tiene faltas de ortografía, hay elementos deformados o tamaño de letras no
apropiados para una web o elementos que no estén bien encuadrados en el
documento.
El trabajo no cumple con las restricciones descritas anteriormente
Calificación:
Ejercicio 1:
El diseño está realizado con flex guardando la relación de aspecto: 2p
Cabecera bien trabajada, con una visualización adecuada según lo que se pide: 1p
Navegación bien diseñada que cambia de colores de la forma indicada: 0,5p
El diseño cumple con los parámetros de diseño expuestos en clase: 0,5p
Vídeo y aside: 0,5p
Página de formularios: 1,5p
Página de localización: 1p
Ejercicio 2: 3p.
Cabecera responsive: 1p
Secciones responsives: 1p
Responsive correcto: 1p