¿Cómo diseñar una página web en HTML+ CSS usando Bootstrap?
Para maquetar o diseñar una web responsive en HTML y CSS debemos hacer un prediseño en un editor de imágenes luego pasamos a codearlo en Html y Css, para el desarrollo del presente, pues ya tenemos un diseño que se ha creado en un editor en el cual se muestra ¿Cómo debería quedar la página web?.
PASOS PARA DESARROLLAR UNA PÁGINA WEB
El desarrollo de una página web implica que debamos conocer el lenguaje de etiquetas o marcado HTML que prácticamente es la base de todo internet, y también debemos saber codear en CSS u Hojas en cascada este lenguaje nos permite dar un diseño atractivo a la página web en base a reglas modificando atributos de cada etiqueta como posición, colores, tamaños, etc tambien podemos emplear animaciones nativas en CSS.
Los pasos que demos seguir son:
DISEÑO GRÁFICO PARA WEB
Es un prototipo o prediseño de como se verá la página web al finalizar el trabajo del Diseñador Web o FrontEnd, es aqui donde se establecen los siguientes características:
- Trabajaremos con 4 colores, los cuales se basan en el logotipo además de buscar un color que contraste, elejimos un verde, obviamente tomaremos sus valores hexadecimales.
- El tipo de menú en este caso es un menu fluido o líquido que ocupará toda la pantalla, será transparente con 4 opciones, contendrá la imagen del logotipo.
- El slogan con un texto con bordes realizado con CSS text-stroke
- Las imágenes que usaremos en la página web debes representar el que hacer de la empresa.
- La presentación de los platos en tarjetas, en este caso solo mostramos 3
- En la sección penúltima colocaremos el mapa de ubicación
- Luego datos de contacto de la empresa
- y por último una imagen que acompaña el diseño, centrada en la parte inferior.
Como actividad final, luego del diseño gráfico debemos exportar las imágenes que usaremos en formato PNG claro esta si amedita este formato si no por el contrario deberiamos optar por JPG o SVG. Una actividad muy importante es tener cuidado con el peso de las imágenes es decir el tamaño adecuado tanto en ancho y alto como en la cantidad de bytes que requiere una imagen, normalmente se optimizan a 72pp,
En resumen exportaremos las imágenes verificando el tamaño, peso y nombre adecuado de cada imagen, teniendo cuidado de no perder la calidad visual, esto ayuda bastante en la velocidad de carga de la página si ésta se llegara a publicar en internet, esto es un punto o factor positivo para el posicionamiento del sitio web como de las imágenes también.
- Colocamos la imágenes en una carpeta llamada img
- Necesitamos una fuente, llamada Cooper, normalmente esta fuente esta en el directorio de fuentes de Windows, por lo que es fácil copiarlo en una nueva carpeta a la cual llamaremos fonts
- finalmente creamos una carpeta para nuestros estilos css llamado css
El diseño en formato JPG es el siguiente
MAQUETACIÓN HTML Y CSS
En esta parte vamos a usar la librería responsive Bootstrap en su versión 4.3.2
¿Cómo empezar a codear una página web Html?
Es aqui donde creamos el documento html para ello levantamos Visual Studio Code ahora abrimos la carpeta que tiene todas las subcarpetas que hemos creado anteriormente, vamos a archivo y creamos un nuevo documento y le damos el nombre de index.html, configuramos el idioma y por último le damos el titulo de "EL ROCOTO" en la etiqueta title, que es el nombre de la picantería ficticia claro.
¿Cómo vincular una hoja de estilos CSS?
Para vincular la hoja de estilos vamos al sitio web oficial de Bootstrap donde podemos copiar la url del CDN para colocarlo en dentro de la etiqueta <head> de nuestro documento html, además creamos un nuevo documento con extensión css donde codearemos nuestras propias reglas css. Esta nos ayudará a modificar los estilos css de Boostrap reescribiéndolos, además de alojar nuestras propias reglas css que iremos implementando a lo largo del proyecto.
¿Cómo diseñar un menu de Navegación en Boostrap?
...
¿Cómo obtener 2 columnas para dividir el contenido de la portada usando row y col?
....
¿Cómo dividir en tres secciones usando la clase col y card?
...
¿Cómo integrar un mapa de Google dentro de un card?
...
¿Algo más falta en el diseño final?
...
CONCLUIMOS
Finalmente concluimos que DISEÑO WEB no es lo mismo QUE PROGRAMACIÓN WEB, pues aqui solo hemos diseñado una página web, y esta actividad se llama maquetación web, cuando usamos solo HTML Y CSS. Otro punto fundamental es el uso de Bootstrap, pues existen muchas librerías que lo que hacen es ayudar a agilizar el proceso de maquetación, entre ellas tenemos Pure, Materialize, Foundation, etc.. pero una de las más usadas es pues Bootstrap.
En resumen podemos decir que primero se diseña la página web luego se procede a la maquetación del diseño. hasta un próximo video sobre desarrollo web.
¿Quieres descargar el código fuente Diseño Web en HTML + CSS para un Restaurante?
...por favor suscríbete gratuitamente para descargarlo
Visitado 5743 veces | Publicado hace 1 año
