Diseño web.

Guía paso a paso para

maquetar una web.

Elaborado por Duviel Garcia.

 Guía paso a paso para maquetar una web.

Como primer paso crear la estructura de directorios para el sitio web

Carpeta contenedora de todos los archivos y las subcarpetas para mantener
organizados los demás archivos
Creamos una carpeta en el escritorio llamada papples

Luego dentro de esta carpeta creamos dos mas llamadas css e img

Ahora procedemos a agregar la carpeta papples al editor vscode, damos click

en open folder
Luego buscamos la carpeta y la agregamos

Ahora procederemos a crear un archivo llamado index.html dentro de la

carpeta papples
Abrimos el archivo creado dando doble click sobre el, y procederemos a
escribir html:5 y presionamos enter o tabulación

Al dar enter genera el siguiente código

Ahora establecemos el titulo a Papples dentro de la etiueta title

Ahora combinaremos los recursos facilitados por el instructor con los
archivos de nuestro sitio web

Teniendo los archivos combinados procedemos a importar el archivo

reset.css de la siguiente forma, dentro head establecer la siguiente línea

Ahora crearemos el archivo de nuestros estilos llamado style.css dentro de la

carpeta css

Lo vincularemos de la misma forma que hicimos con el archivo reset pero

este debe estar después de la importación de reset
Ahora dentro de body estableceremos las siguientes etiquetas con sus
respectivas clases

El div con la clase container es el encargado de contener a todos los

elementos del sitio web
La etiqueta nav permite crear un menú de navegación, como podemos
apreciar tenemos varios elementos dentro de la etiqueta nav un div con la
clase nav-left el cual contiene nuestro menú, conformado por el logo el cual
es una etiqueta a y esta contiene una etiqueta img para cargar el logo del
sitio web, luego una lista desordena ul con sus respectivos ítems li los cuales
poseen un enlace para cada pagina del sitio web.
Tenemos una etiqueta button acompañado de una lista desordenada con los
elementos del menú juntos, este botón y esta lista serán el menú que se
visualizara en las pantallas pequeñas
Luego tenemos un div que se encargara de crear los enlaces del carrito de
compras y usuario.
Como podemos tenemos etiquetas i con las clases fas fa-shopping y fas fa-
user estas perteneces a los estilos de fontawesome donde podremos usar
imágenes como una fuete las cuales ya están implementadas solo tenemos
que llamarlas con las respectivas clases, para tenerlas es necesario incluirlas
en la cabecera del documento.
Al menú móvil agregaremos estos estilos en línea de momento para ocultarlo

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-

beta2/css/all.min.css" integrity="sha512-
YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrw
slk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Ahora procederemos a darle los estilos a la página y al menú, abrimos el

archivo style.css y agregamos lo siguiente
La regla @font-face nos permite definir tipografías desde un archivo ya que
no todas las fuentes están disponibles en el sistema operativo donde este
alojado el sitio web.
La clase nav-right no permite establecer los estilos para el menú posicionado
en la parte derecha de la barra de navegación
La calase nav-right no permite establecer los estilos para el menú
posicionado en la parte derecha de la barra de navegación
Si buscamos el archivo index.html de la carpeta papples y lo abrimos veremos
el siguiente resultado en el navegador

Ahora en el archivo index.html agregaremos el siguiente contenido, el cual

definirá el header el sitio web que contiene el banner.
Dentro del elemento header definimos un elemento div con la clase
redopacity la cual nos servirá para colocar el color rojo con un grado de
transparencia ya que el elemento header con la clase header tendrá una
imagen de fondo, definimos los títulos, el párrafo además de el botón para
iniciar una orden, luego con la etiqueta i más las clases de Font-aweson
agregamos el icono flecha para indicar al usuario que continue navegando, el
usuario podrá hacer click en este icono debido a que esta en dentro de la
etiqueta a, note que esta etiqueta en su atributo href esta apuntando a un id
el cual usaremos en la siguiente sección esto es para que al momento de que
el usuario de click en el icono sea direccionado a la siguiente sección.

Ahora procederemos a establecer los estilos para la sección del header,

procederemos a agregar las reglas necesarias en el archivo style.css como se
muestra a continuación.
La clase .header define la anchura del header al 100% y su altura automática
esto para que crezca de acuerdo al contenido que posee, definimos su
background apuntando a una imagen y con no-repeat evitamos que la
imagen se repita, juega con este valor para que conozcas los cambios,
también definimos el tamaño del fonto con background-size del 100% esto
para que la imagen se adapte al elemento header.
La clase .redopacity define un elemento flexible, estableciendo la direccion
de sus elementos de manera vertical con la regla felx-direction: columna,
esto para que los elementos se coloquen uno debajo del otro, alineamos los
elementos con alig-items: center, establecemos el background con la paleta
de colores rgba() para agregar el canal alfa y así lograr la transparencia
necesaria para lograr el efecto de la imagen con un tono rojo, establecemos
el color del texto en blanco usando hexadecimales #FFF
Puedes encontrar los diferentes códigos hexadecimales aquí:
https://www.w3schools.com/colors/colors_picker.asp
al momento de usar las siguientes reglas .redopacity h1 y h2 definimos los
tamaños de los títulos para esa sección, con la clase .desc definimos le texto
con una tamaño mas pequeño para el párrafo.

Luego definimos los estilos para el botón con la calse btn-default, como este
es una etiqueta a debemos establecer que es una etiqueta de bloque, luego
definimos el color del texto que será el color principal del sitio web,
agregamos un relleno con padding con valores mayores para la parte
superior e inferior, establecemos el color de fondo a blanco, con la regla
border-radius agregamos la curvatura a las esquinas del botón, agregamos un
margen de 30px en la parte superior e inferior y de 0 a los laterales ya que
todos los elementos se colocaran uno de bajo del otro, eliminamos el
subrayado que trae por defecto la etiqueta a con text-decorartion:none;
establecemos al fuente en negrita con Font-wight:bold; y la siguiente regla
transition: all ease 1s es para establecer una transición en todas sus
propiedades con una duración de un segundo esto para que los cambios
visuales no se vena de golpe.
Ahora con la siguiente pseudoclase :hover que suamos en el botón .btn-
default:hover invertimos los colores para el texto y el fondo es decir ahora el
texto será blanco y el fondo será rojo. Establecemos las reglas de css para el
icono de flecha para así darle un tamaño mas grande y el color balco,
guardamos los cambios y actualizamos la pagina en el navegador
obtendremos el siguiente resultado.
Si pasamos el mouse sobre el botón observaremos como cambia de color con
la duración de un segundo.

Ahora definiremos el elemento título de sección y sus estilos el cual

usaremos en repetidas ocasiones.
Abrimos el archivo index.html y agregamos lo siguiente
Como pueden notar agregamos el id procesodeseleccion que es el valor que
posee el href del icono de flecha del header.
Guardamos los cambios y procedemos a agregar las siguientes reglas en el
archivo style.css

Definimos este elemento como un elemento flexible con un relleno de 40px

Establecemos el tamaño del titulo a 2rem es decir dos veces más grande en
relación a la medida de a la pantalla para esta página.
Definimos el color del borde superior del hr que será una línea además de un
margen superior para sepáralo del título.
Guardamos los cambios para ambos archivos y actualizamos el navegador
con lo que observaremos el siguiente resultado
Ahora definiremos la sección de selección donde están los cards que
muestran el proceso, crearemos el mismo elemento donde solo cambiara la
imagen y los textos el cual pueden colocar el que consideren, procedemos a
crear la estructura con html en el archivo index.html y agregamos el siguiente
contenido:

Definimos el mismo elemento que posee una imagen un titulo tipo h3 y un

párrafo, puede cambiar estos por los que considere.
Ahora procedemos a definir los estilos para estos elementos en el archivo
style.css agregando el siguiente contenido:

Establecemos el elemento con la clase .selection de tipo flexible justificando

los eleméntenos con separación entre ellos y alrededor de ellos
Luego definimos los estilos para los elementos con la clase .selection-item
serán flexbiles con dirección de los elementos en columna, justificamos su
contenido centrado al igual que los alineamos al centro, establecemos una
anchura de 300px y un borde inferior rojo de 1px tipo sólido, guardamos los
cambios en ambos archivos y actualizamos el navegador obteniendo el
siguiente resultado:
Procedemos a cambiar las imágenes por las que necesitemos

Ahora en el archivo index.html definimos el titulo para producción

No es necesario definir estilos puesto que ya los hemos definimos y los
estamos reutilizando al utilizar nuevamente la calse title-section, guardamos
los cambios y actualizamos el navegador para obtener el siguiente resultado:

Ahora procederemos a definir los elementos de esta sección para mostrar el

proceso de producción del producto
Es prácticamente los mismo que la anterior sección solo que difiere de
algunos elementos, pero es la misma idea.

Abrimos el archivo index.html y agregamos el siguiente contenido:

Definimos una etiqueta section que contendrá los tres elementos de la
sección que están definidos por la etiqueta article cada uno de estos
elementos pose una imagen, un párrafo y un hipervínculo para así con los
estilos poder darle un estilo de card
ref: http://www.w3bai.com/es/w3css/w3css_cards.html

Procedemos a definir los estilos para estos elementos, abrimos el archivo

style.css y agregamos las siguientes reglas css:
El elemento con la clase .pruduccion será flexible con sus elementos
justificados con espacio entre ellos y a su alrededor, los elementos con la
calse .production-item tienen una anchura del 25% se adaptaran al tamaño
de la pantalla, un relleno de 10px un borde solido con un pixel de grosor y
noten que se establece el color de este borde con rgb, un radio en el borde
de 8px para una leve curvatura en las esquinas de la caja, se alinean los
elementos al centro y se agrega una sombra
Box-shadow ref: https://developer.mozilla.org/es/docs/Web/CSS/box-
shadow
Seleccionamos las imágenes dentro de cada elemento con el selector
.produccion-item img y establecemos su anchura al 100% para que se adapte
a su contenedor, establecemos un margen superior e inferior de 20px para el
párrafo y removemos el subrayado del enlace además de establecer su color
al color principal del sitio web.
Guardamos los cambios en ambos archivos y actualizamos el navegador con
lo que veremos el siguiente resultado:

Ahora en el archivo index.html definimos el titulo para testimonios

No es necesario definir estilos puesto que ya los hemos definimos y los

estamos reutilizando al utilizar nuevamente la clase title-section, guardamos
los cambios y actualizamos el navegador para obtener el siguiente resultado:

Ahora definiremos la sección de los testimonios, abrimos el archivo

index.html y establecemos el siguiente contenido:
Definimos un elemento contenedor para ubicar todos los elementos card que
mostraran los testimonios, luego establecemos 6 elementos donde lo que
variara será su contenido, puede establecer el contenido que determine.
Es un elemento con la clase .testimonio-item el cual está conformado por
una imagen y un div,, este div posee los elementos necesario para mostrará
un testimonio conformado por un titulo con el nombre del la persona que
deja el testimonio, un parrafe breve mostrando parcialmente el testimonio y
luego un conjunto de etiquetas i con las clases necesarias para mostrar un
rating o puntuación de estrellas, queremos mostrar este elemento para cada
uno de los que hemos creado si te fijas bien son 6:

Para lograrlo debemos establecer el siguiente contenido en el archivo

style.css
Para elemento contenedor con la calse .testimonios establecemos que será
flexible además de la regla flex-wrap: wrap la cual agregara los elementos en
la siguiente línea cuando no quepan en la anchura de la pantalla es decir se
mostraran 3 y el cuarto elemento se mostrar en la siguiente línea.
Definimos los estilos del testimonio con reglas que hemos visto
anteriormente en esta guía con una adicional la regla position:relative la cual
es necesaria para poder establecerlo como padre para las coordenadas de
los iconos de estrella.
Establecemos la anchura y altura de la imagen de la persona con un border-
radius un poco mayor a la mitad de este valor para así lograr la imagen
circular además de agregar un margen a la derecha de 10px.
Definimos el tamaño del titulo que mostrar el nombre además del color
principal de la página para ese texto, un color gris para el párrafo que será el
testimonio, para las estrellas establecemos su posición absoluta esto para
que podamos ubicarla onde queramos de una manera fácil a través de los
valores de referencia top, right y bottom, left “arriba, derecha, abajo,
izquierda“ con estos valores para bottom y top se mostrar en al parte inferior
del card, guardamos los cambios y actualizamos el navegador para obtener lo
siguiente:

Ahora crearemos el footer y añadiremos las reglas iniciales para el menú

mobile
Agregamos lo siguiente al archivo index.html

Luego agregamos las siguientes reglas en el archivo style.css

Establecemos el footer que es el pie de pagina como un elemento flexible,
con el color de fondo principal de la página, un color blanco para el texto, un
relleno de 20px en todos sus lados y centramos el contenido al centro.
Las clases que ven a continuación son para el menú mobile para mostrarlo y
ocultarlo entonces ya no necesitamos los estilso en línea del index.html
procedemos a abrirlo y editar las siguientes líneas
De esto

A esto

Guardamos los cambios y podremos ver el footer

Ahora procederemos a trabajar en el menú mobile, ya esta creado y tiene sus

estilos, solo falta agregar los estilos para que la pagina se adapte a la pantalla
de un celular y lo realizamos haciendo uso de media queries
La media queries nos permite establecer reglas css que deben establecerse al
momento de cumplirse ciertas condiciones como la que trataremos de que
será la anchura de la pantalla, procedemos a agregar el siguiente contenido
al archivo style.css
Con esta media querie establecemos las reglas css que deben aplicarse a los
selectores establecidos previamente cuando la pantalla tenga una anchura
máxima de 428px, todas estas reglas cambiar la forma de los elementos que
explicare en detalle en tiempo real.
Ahora agregaremos la funcionalidad para que al moento de estar en una
pantalla de celular el usuario pueda hacer tap en el icono de menú y pueda
mostrar u ocultar el menú, en el archivo index.html antes de la etiqueta de
cierre de body agremos lo siguiente:

Con este script seleccionamos los elementos btnMenu que es el botón para
acceder al menú, menuMovil que es el menú para dispositivos móviles,
agregamos un evento con addEventListener este evento será click y cuando
el usuario realice dicha acción que dispara ese evento, cambiamos de manera
la clase show con la función toggle esta función lo que hace es comprobar si
un elemento tiene la clase la quita y si no la tiene la pone, esta clase lo que
hace es mostrar el elemento que la use, por ende si hace uso se mostrara si
no hace uso simplemente no se mostrara, guardamos los cambios y
procedemos a probar, actualizamos la pagina y damos clik derecho
inspeccionar elemento
Se abrirar el panel de herramientas para desarrolladores, procedemos a dar
click en el icono para redimensionar la pantalla:

Seleccionamos responsive y establecemos en el primer recuadro 378px par el

ancho esta medida esta por debajo de la definida que es 428px, damos enter
Logrando que se vea así:
Si damos click en el botón con icono de barras en la parte superior derecha
veremos que el menú se abre y si damos click nuevamente este se cierra,
aparece y desaparece
Podemos hacer scroll para navegar por toda la pagina: