¿Cómo diseñar una página web en HTML+ CSS usando Bootstrap?
VIDEO ¿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 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?.
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:
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:
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.
El diseño en formato JPG es el siguiente
En esta parte vamos a usar la librería responsive Bootstrap en su versión 4.3.2
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.
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.
...
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 4649 veces | Publicado hace 1 año
© Todos los derechos reservados CODEA APP | Cursos de programación avanzados con proyectos reales | 2020 - 2021