Tutorial De Como Crear Grilla o Rejillas Con Boostrap Y Html5 En Sublime Text 3

Jonatan Villegas

25 Dec 201710:50

Summary

TLDREste tutorial presenta una guía paso a paso para desarrollar una página web, detallando el uso de columnas y colores. Comienza con la configuración básica del código HTML, incluyendo etiquetas meta y scripts. A lo largo del video, se explica cómo distribuir las columnas en distintos dispositivos, siempre asegurando que el total sume 12. También se menciona la aplicación de estilos, como el uso de colores rojo, azul y gris, y cómo el contenedor abarca todo el diseño. Finalmente, se explica el uso de scripts para optimizar la visualización de la página.

Takeaways

🎬 El tutorial comienza con una introducción para mostrar cómo crear una página y los pasos para seguir el proceso.
📝 Se mencionan las partes principales del código HTML, incluyendo los metadatos, estilos, y scripts necesarios para construir una página.
🎨 Se utilizan solo unos pocos colores: azul, rojo y gris, que se aplican a diferentes secciones de la página.
🧩 Se explica cómo las columnas deben sumar un total de 12 para distribuir el contenido en el diseño de la página.
📱 El diseño se adapta a diferentes tamaños de dispositivos, ajustando el número de columnas según el tamaño de la pantalla.
🔧 Se detalla el código de estilos que define los colores y tamaños de las columnas en diferentes dispositivos.
📊 Los colores se asignan a secciones específicas usando etiquetas de color definidas previamente en los estilos.
📄 Se muestran ejemplos de código para las partes del diseño, como las columnas y los espacios en blanco.
🖥️ Se menciona que las columnas siempre deben coincidir, sumando un total de 12, para asegurar que el diseño sea correcto.
📜 Los scripts como jQuery se incluyen al final para agregar interactividad y funcionalidad a la página.

Q & A

¿Cuál es el objetivo principal del tutorial presentado en el video?
-El objetivo principal es enseñar paso a paso cómo crear una página web usando un diseño basado en columnas y aplicar estilos básicos como colores, márgenes y scripts.
¿Qué se menciona sobre los colores utilizados en el proyecto?
-Se menciona que los colores utilizados son muy pocos, específicamente azul, rojo y gris.
¿Qué importancia tiene la división en columnas dentro del código?
-La división en columnas es crucial, ya que todo el diseño se basa en un sistema de 12 columnas, distribuyendo el contenido en diferentes proporciones según el dispositivo.
¿Qué se debe tener en cuenta sobre los dispositivos en este diseño?
-El diseño está pensado para adaptarse a dispositivos grandes, medianos y pequeños, asegurando que siempre se mantenga un total de 12 columnas, sin importar el tamaño del dispositivo.
¿Cómo se aplican los estilos y qué elementos son los principales en la estructura del código?
-Los estilos se aplican mediante CSS, y los elementos principales incluyen la estructura básica de una página como meta, los estilos, los scripts y contenedores (container) para organizar el contenido en la página.
¿Cómo se organizan las columnas en el ejemplo del tutorial?
-En un ejemplo, se mencionan dos columnas: una de 9 columnas en gris y otra de 3 columnas en rojo, sumando un total de 12 columnas, lo cual es esencial para el diseño.
¿Qué indica la anotación mencionada en el video sobre las columnas?
-La anotación indica que se debe recordar que siempre se debe sumar un total de 12 columnas, independientemente del diseño o del dispositivo.
¿Qué propósito cumple el 'container' en el diseño?
-El 'container' es una división que abarca todo el contenido de la página, asegurando que se distribuya de manera adecuada en el espacio disponible.
¿Qué se menciona sobre el uso de scripts en el tutorial?
-Se utilizan scripts para darle interactividad y apariencia a la página, como el uso de jQuery y otros scripts que permiten copiar y mostrar el código.
¿Qué recomendación se da al final del video para seguir el tutorial?
-Se recomienda pausar el video en ciertos puntos para poder copiar los códigos y asegurarse de no perder ningún detalle mientras se sigue el tutorial.

Outlines

00:00

🎓 Introducción al tutorial de diseño web

El video comienza con una introducción general donde se explica que se realizará un tutorial sobre el diseño de una página web. Se enumeran los pasos que se seguirán, empezando por el encabezado del código HTML, donde se incluyen elementos como meta etiquetas, estilos y scripts. Luego se abordan los colores básicos que se usarán, como azul, rojo y gris, para los estilos de la página. También se menciona la estructura de columnas, que debe sumar un total de 12 en dispositivos grandes, medianos y pequeños. La primera sección del diseño tiene 9 columnas grises y 3 columnas rojas, sumando 12.

05:03

🎨 Aplicación de colores y espacios

Se detalla cómo se aplican los colores al diseño, asignando azul, rojo y blanco a diferentes elementos. Luego, se menciona el uso del espacio en blanco entre las divisiones. Cada división suma un total de 12 columnas y se ajusta para diferentes tamaños de pantalla. Se explica cómo el código para estas divisiones se estructura, incluyendo ejemplos de código que se pueden pausar y copiar. Esta parte del tutorial concluye con una explicación sobre cómo estas divisiones aseguran una correcta visualización en diferentes dispositivos.

10:05

📜 Finalización del diseño y scripts

Se cubre la parte final del tutorial, donde se agregan scripts como jQuery para darle funcionalidad a la página. El código para estos scripts también se presenta de manera que puede ser copiado fácilmente. Se sugiere pausar el video para copiar los elementos del código con detalle. Finalmente, se concluye el tutorial resumiendo que todo el código presentado asegura una visualización completa desde el inicio hasta el final de la pantalla, optimizado para dispositivos de distintos tamaños.

Mindmap

Keywords

💡Código

El término 'código' se refiere al conjunto de instrucciones y elementos que forman parte de la estructura de la página web. En el video, el código es esencial para definir el diseño y funcionalidad de la página, como las columnas y los estilos. Por ejemplo, el presentador menciona el código necesario para definir los colores y la distribución de columnas.

💡Columnas

Las 'columnas' se refieren a una división estructural utilizada en el diseño web para organizar el contenido. En este caso, el video explica cómo se divide el contenido en un sistema de 12 columnas, donde se combinan diferentes cantidades de columnas (por ejemplo, 9 y 3) para crear una estructura equilibrada en diferentes dispositivos.

💡Container

El 'container' es una clase de CSS utilizada para crear un contenedor que abarca y organiza el contenido de la página web. En el video, se menciona el uso del container para hacer que toda la página esté alineada y abarque el ancho total de la pantalla, asegurando una correcta disposición del contenido en pantallas de diferentes tamaños.

💡Estilos

Los 'estilos' en el contexto del video se refieren a las reglas CSS que definen la apariencia visual de los elementos de la página, como colores, fuentes y márgenes. El presentador menciona específicamente los estilos que controlan los colores, como el rojo y azul, y cómo estos se aplican a diferentes secciones de la página.

💡Dispositivos

El término 'dispositivos' se refiere a los diferentes tipos de pantallas, como móviles, tabletas y ordenadores, en los que se visualizará la página web. En el video se explica cómo el diseño de la página se adapta a estos diferentes tamaños, utilizando un sistema de 12 columnas que se ajusta dependiendo del tamaño del dispositivo.

💡Meta

'Meta' es un conjunto de etiquetas HTML que proporcionan información sobre la página, como la codificación de caracteres o la configuración de viewport. En el video, se menciona la importancia de incluir estas etiquetas antes de empezar a diseñar la estructura principal de la página, ya que son fundamentales para su correcta visualización y funcionalidad.

💡Script

Un 'script' es un bloque de código que se utiliza para agregar funcionalidad dinámica a la página web. En el video, se mencionan scripts específicos como jQuery y otros que permiten que la página tenga interactividad y un mejor rendimiento, facilitando acciones como la manipulación del DOM y la creación de animaciones.

💡Colores

Los 'colores' hacen referencia a los tonos utilizados en el diseño de la página web, como el azul, rojo y gris. En el video, el presentador muestra cómo se define el color de diferentes secciones de la página utilizando estilos CSS, lo que ayuda a darle una identidad visual coherente al sitio.

💡Página completa

El término 'página completa' se refiere a la estructura total de la página web, que abarca desde el inicio hasta el final de la pantalla. El video muestra cómo se configura el container para que la página cubra todo el espacio horizontal disponible, lo cual es importante para asegurar una correcta presentación del contenido.

💡Espacio en blanco

El 'espacio en blanco' en diseño web se refiere a áreas vacías que se utilizan para organizar visualmente los elementos y evitar la sobrecarga de contenido. En el video, el presentador menciona cómo se define un espacio en blanco utilizando un código especial para dejar ciertas secciones sin contenido visible, lo que mejora la legibilidad y estética de la página.

Highlights

Introducción al tutorial y explicación de la estructura básica de la página web.

Paso 1: Configuración inicial de los meta, estilos, y scripts de la página.

Descripción de los estilos básicos utilizados: azul, rojo y gris.

Uso de contenedores (container) para organizar la estructura de la página.

Explicación sobre el sistema de columnas: la importancia de sumar 12 columnas en total.

Ejemplo de columnas: 9 columnas en gris y 3 columnas en rojo, formando un total de 12.

Código adaptado para que el diseño se vea bien en dispositivos grandes, medianos y pequeños.

Enfatiza la necesidad de que las columnas coincidan en un total de 12 en todos los dispositivos.

Uso de color para diferenciar las secciones y destacar la estructura visual.

Explicación del código para el uso de color azul y rojo en las diferentes partes de la página.

Descripción del código para dejar espacios entre secciones (color blanco).

Revisión de las partes 4, 5, y 6 del código para asegurarse de que todo sume 12 columnas.

Descripción del código para las partes 7, 8, 9 y 10, que también suman 12 columnas.

Explicación de cómo el contenedor abarca el espacio total de la pantalla, de inicio a fin.

Implementación de scripts para darle funcionalidad y apariencia a la página web.