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.
1. Realiza una página web con la siguiente estructura utilizando FLEX:
Nombre de la empresa
Logotipo
Oferta del día
Sección 1 Sección 2 Sección 3
Menú de
navegación:
inicio, Banner lateral
localización
y formuario
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 página de venta de agua
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 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. 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.
o Teléfono: Acepta nueve dígitos numéricos, comenzando por el código del país.
Por ejemplo: +34123456789.
o Además habrá un campo tipo radio button que nos servirá para saber el sexo
de la persona.
Por último, debe de haber una página de localización, situada en La isla de Aborán, 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 es 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
Logotipo
Oferta del día
Menú de navegación 1
Menú de navegación 2
Menú de navegación 3
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 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.