Informe_Diseno_Web_Miriam_Gonzalez

Vista previa del material en texto

INFORME
DISEÑO WEB
2021/2022MIRIAM GONZÁLEZ DE LA SANTA CRUZ
3
INFORME DISEÑO WEB
INTRODUCCIÓN0 El trabajo consistió en crear una página web útil basándo-
nos en los conocimientos que hemos ido adquiriendo a lo 
largo del cuatrimestre, con ayuda del profesor y de inter-
net, aportando a nuestra página todos los apartados obli-
gatorios para la asignatura, además de otros que hemos 
sumado de manera creativa.
4
INFORME DISEÑO WEB
INVESTIGACIÓN1 Para la creación de nuestra página web tuvimos que divi-
dir el trabajo en dos partes, una parte de ideación y otra 
de desarrollo. En la primera parte tuvimos que revisar 
varias páginas web de referencia para concluir con algu-
nas ideas que nos gustaran de cada una, en mi caso, las 
páginas de donde más referencias tomé fuero: 
Sara Soueidan (https://www.sarasoueidan.com/)
Airi Pan (https://www.airipan.com/)
Yenkoes (https://www.yenkoes.com/)
…
5
INFORME DISEÑO WEB
SARA SOUEIDAN 
6
INFORME DISEÑO WEB
AIRI PAN
7
INFORME DISEÑO WEB
YENKOES
8
INFORME DISEÑO WEB
INVESTIGACIÓN
Bocetos
1 Cuando ya teníamos una referencia de trabajos de otros 
diseñadores, debíamos realizar una serie de bocetos de 
las ideas a tomar en cuenta, en mi caso realicé un total 
de tres propuestas con variantes de menús, galerías, in-
teracciones, etc, con boceto de cada una de ellas y distin-
tas anotaciones a tener en cuenta a la hora de pasarlo a 
digital.
9
INFORME DISEÑO WEB
10
INFORME DISEÑO WEB
11
INFORME DISEÑO WEB
12
INFORME DISEÑO WEB
FUNCIONAMIENTO2 En la segunda parte tuvimos que empezar con el desa-
rrollo de nuestra página web, la cual se ha diseñado uti-
lizando HTML y la parte visual mediante CSS, una página 
web guiada por los tutoriales realizados por el profesor, la 
página “w3schools” y extras buscados en otras páginas 
o tutoriales. 
Para comenzar haré una descripción de cada una de las 
páginas creadas, en mi caso cuatro apartados conectados 
entre ellos, a la hora de visualizar los códigos se creó una 
en HTML y su pareja en CSS para el estilo. Todas las pá-
ginas tienen como predeterminado un header con menú 
dropdown y un footer, el menú se ha creado mediante 
una etiqueta header para incluir nuestra cabecera, dentro 
de esta hemos abierto una etiqueta nav para el menú de 
navegación, dentro, una etiqueta de lista ul para crear la 
lista de elementos del menú y varios elementos de lista li 
para cada elemento del menú, además se le ha aplicado 
un hover al pasar por encima de cada elemento y todo 
esto realizado en flexbox. En cuanto al footer, he obtado 
por uno simple donde unicamente se ha utilizado una 
clase tambien llamada footer con la que se ha creado el 
rectangulo negro de su fondo para contrastar con el blan-
co de la letra.
13
INFORME DISEÑO WEB
HEADER MENÚ
FOOTER
14
INFORME DISEÑO WEB
La primera página que aparece al entrar en la página 
web es la denominada “index.html”, el Home, donde se 
puede apreciar en primera instancia el menú ya explicado 
anteriormente y seguido se puede ver una galería 
sliders o carruseles, que nos muestra distintas imágenes 
al pulsar el botón con una pequeña transición con hover, 
todo esto mediante la clase denominada “slide”.
GALERÍA SLIDER 
O CARRUSEL
15
INFORME DISEÑO WEB
La siguiente página es el about, específicamente “about.
html”, esta página está creada mediante un layout grid 
un método que ayuda a distribuir los elementos y orga-
nizarlos, mediante un sistema de rejilla, en este caso se 
dividió la cabecera, una imágen, el texto que acompaña 
a la imagen, el formulario y por último el footer, utilizan-
do la clase grid y dentro de esta distintas clases ítem, 
desde el 1 al 5. Además cabe destacar la animación de 
máquina de escribir sobre la palabra “sobre mi”. El for-
mulario está creado mediante el código “form action”.
LAYOUT GRIG
16
INFORME DISEÑO WEB
FORMULARIO
17
INFORME DISEÑO WEB
Seguidamente aparece la página “galeria.html”, cuyo 
nombre es Work, donde se exponen las distintas imáge-
nes mediante una galería flex, pero antes de la expo-
sición de imágenes, se puede observar una imagen uti-
lizada para colocar el texto siguiendo la forma de esta, 
mediante CSS shapes, que nos deja ver este efecto gra-
cias al código de CSS “shape-outside”. A continuación 
se encuentra la galería flex, ordenada mediante tres 
columnas y con aside que genera un espaciado entre 
ellas, además podemos ver una transformación de es-
cala al pasar por cada una de las imágenes mediante 
hover. Hay que comentar que en firefox esta galería se ve 
correctamente, mientras que en chrome varía y se desco-
loca.
18
INFORME DISEÑO WEB
CSS SHAPES
19
INFORME DISEÑO WEB
GALERÍA FLEX
20
INFORME DISEÑO WEB
En la última página llamada “shop.html”, la tienda de co-
misiones, cabe destacar como primera instancia que este 
apartado es el único que tiene una variación en el menú, 
pudiendo acceder a un dropdown al poner el cursor en-
cima que te lleva a enlaces de redes sociales, a parte de 
esto, aparece texto ordenado como una lista mediante el 
comando “li type=”square”” y en una columna al cen-
tro, además varía el tamaño de la tipografía mediante 
h2 - 4 y p. Al final de la página se nos muestra una pe-
queña galería grid.
DROPDOWN
21
INFORME DISEÑO WEB
LISTA DE TEXTO
GALERÍA GRID
22
INFORME DISEÑO WEB
CONCLUSIÓN3 El diseño web es una actividad que consiste en la planifi-
cación, diseño e implementación de sitios web, un proce-
so que hemos ido tratando a medida que avanzamos con 
el proyecto. Todo lo que hemos implementado en nues-
tra página nos servirá para los futuros proyectos, dejan-
do aprendidos los conceptos básicos para la creación de 
cualquier página web. 
Esta asignatura práctica es de las más productivas que 
hemos tenido ya que al dejar libertad para la creación de 
nuestra propia página, nos ha servido como motivación 
para el aprendizaje y el trabajo autónomo.