Capítulo 2. HTML: Home, Modelo de Negocio y Light-Talk app

En este capítulo, estudiamos los componentes principales de un documento HTML, la cabeza y el cuerpo. Estudiamos los elementos más destacados en la cabeza y el cuerpo, y sus propiedades. Esto nos ayudará a mejorar el diseño de nuestra aplicación.

También vamos a crear la barra de navegación, el pie de página, y la página de inicio para nuestra aplicación. Vamos a crear archivos HTML donde crearemos la estructura básica para nuestra barra de navegación. Vamos a definir las clases CSS para crear un diseño atractivo para la barra de navegación, el pie de página y la página de inicio. Usando media queries, haremos que nuestra barra de navegación, pie de página y página de inicio sean adaptables en tamaño, es decir, la barra de navegación, el pie de página y la página de inicio cambiarán según el dispositivo utilizado para acceder a la página web. También aprenderemos cómo introducir íconos en nuestra aplicación utilizando Font Awesome, y cómo introducir diferentes tipos de fuentes utilizando Google Fonts.

Para completar el diseño de nuestra app, también trabajaremos con Bootstrap.


YouTube (sección 2)
YouTube (sección 3)
YouTube (sección 4a)
YouTube (sección 4b)
YouTube (sección 5a)
YouTube (sección 5b)
YouTube (sección 6)
GitHub
Cabeza

Estudiamos los principales elementos en la cabeza, prestando especial atención al título, estilo y meta.

Cuerpo: Box-sizing y elementos de bloque e inline de HTML

Estudiamos los principales elementos dentro de la etiqueta body. También estudiamos en detalle ciertos elementos en el cuerpo y sus propiedades que nos ayudarán a mejorar el diseño de nuestra aplicación. Estudiaremos box-sizing; elementos de bloque e inline de HTML.

Cuerpo: Propiedad display de CSS, flexbox y media queries de CSS

Estudiamos la propiedad display de CSS; flexbox; y las media queries de CSS.

Barra de navegación y pie de página

Creamos un archivo HTML que define la estructura de nuestra barra de navegación y pie de página, y un archivo CSS que define la apariencia-diseño de nuestra barra de navegación. Estudiamos y utilizamos los conceptos aprendidos en el capítulo para mejorar el diseño de nuestra barra de navegación y pie de página. Aprendemos a hacer que nuestra barra de navegación y pie de página respondan al tamaño utilizando media queries. También aprenderemos a introducir íconos y fuentes de fuentes externas.

Encabezado y Desarrolladores

Seguimos el mismo enfoque que con la barra de navegación y el pie de página, pero para diseñar el encabezado y las secciones de desarrolladores en la página de inicio de nuestra aplicación.

Bootstrap

Aprendemos a usar Bootstrap y vemos como puede ser útil en el desarrollo de nuestra app.

Reto semanal

Continuamos trabajando en las aplicaciones de los estudiantes. Debes introducir pequeños cambios en los archivos business.html, light_talk_app.html, business.css y light_app.css para personalizar tu aplicación y hacerla lo más funcional y completa posible. Enfócate en los íconos y en las instrucciones para el usuario.

Cabeza

Toda la información en esta sección ha sido tomada del siguiente enlace:

HTML, cabeza
El elemento <head> es un contenedor para metadatos (datos sobre datos) y se coloca entre la etiqueta <html> y la etiqueta <body>.

Los metadatos de HTML son datos sobre el documento HTML. Los metadatos no se muestran.

Los metadatos típicamente definen el título del documento, el conjunto de caracteres, estilos, scripts, y otra información meta.

El Elemento HTML <title>

El elemento <title> define el título del documento. El título debe ser solo texto y se muestra en la barra de título del navegador o en la pestaña de la página.

¡El elemento <title> es obligatorio en los documentos HTML!

¡El contenido de un título de página es muy importante para la optimización en motores de búsqueda! El título de la página es utilizado por los algoritmos de los motores de búsqueda para decidir el orden al listar páginas en los resultados de búsqueda.

El elemento <title>:

¡Por lo tanto, trata de hacer el título lo más preciso y significativo posible!

El Elemento HTML <style>

El elemento <style> se usa para definir información de estilo para una sola página HTML. Vamos a utilizarlo en la sección del cuerpo.

El Elemento HTML <link>

El elemento <link> define la relación entre el documento actual y un recurso externo.

La etiqueta <link> se utiliza más a menudo para vincular hojas de estilo externas.

Usaremos enlaces varias veces en los próximos capítulos. Un ejemplo de un enlace: <link rel="stylesheet" href="mystyle.css">

Etiqueta HTML <meta>

Toda la información en esta sección ha sido tomada del siguiente enlace:

HTML, meta
Definición y Uso

La etiqueta <meta> define metadatos sobre un documento HTML. Los metadatos son datos (información) sobre datos.

Las etiquetas <meta> siempre van dentro del elemento <head>, y se utilizan típicamente para especificar conjunto de caracteres, descripción de la página, palabras clave, autor del documento, y configuraciones de viewport.

Los metadatos son utilizados por los navegadores (cómo mostrar el contenido o recargar la página), motores de búsqueda (palabras clave), y otros servicios web.

Hay un método para que los diseñadores web tomen control sobre el viewport (el área visible de la página web por el usuario), a través de la etiqueta <meta> (ver el ejemplo "Configurando el Viewport" a continuación).

Algunos ejemplos

  1. Definir palabras clave para los motores de búsqueda: <meta name="keywords" content="HTML, CSS, JavaScript">
  2. Definir una descripción de tu página web: <meta name="description" content="Tutoriales gratuitos de HTML y CSS">
  3. Definir el autor de una página: <meta name="author" content="John Doe">
  4. Actualizar el documento cada 30 segundos: <meta http-equiv="refresh" content="30">
  5. Configurar el viewport para que tu sitio web se vea bien en todos los dispositivos: <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. Configurando el Viewport (ver la sección a continuación).

Diseño Web Responsivo - El Viewport

Toda la información en esta sección ha sido tomada de los siguientes dos enlaces:

HTML, viewport 1 HTML, viewport 2
¿Qué es el Viewport?

El viewport es el área visible de una página web por el usuario.

El viewport varía según el dispositivo y será más pequeño en un teléfono móvil que en una pantalla de computadora.

Antes de las tabletas y teléfonos móviles, las páginas web se diseñaban solo para pantallas de computadora, y era común que las páginas web tuvieran un diseño estático y un tamaño fijo.

Luego, cuando empezamos a navegar por internet utilizando tabletas y teléfonos móviles, las páginas web de tamaño fijo eran demasiado grandes para ajustarse al viewport. Para solucionar esto, los navegadores en esos dispositivos reducían el tamaño de toda la página web para ajustarla a la pantalla.

Configurando el Viewport.

HTML5 introdujo un método para que los diseñadores web tomen control sobre el viewport, a través de la etiqueta <meta>.

Deberías incluir el siguiente elemento <meta> en todas tus páginas web:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Esta línea de código le da al navegador instrucciones sobre cómo controlar las dimensiones de la página y la escala.

Explicación del Valor del Viewport:

Cuerpo: Box-sizing y Elementos HTML de Bloque e Inline

Cuerpo

Toda la información en esta sección ha sido tomada del siguiente enlace:

Cuerpo
El elemento <body> contiene todo el contenido de un documento HTML, como encabezados, párrafos, imágenes, hipervínculos, tablas, listas, etc.

Box-sizing.

La información en esta sección, el video con todos los pasos de esta sección y el código se pueden encontrar en los enlaces de YouTube y GitHub a continuación:

Cuerpo, box-sizing 1 Cuerpo, box-sizing 2 YouTube (sección 2) GitHub
La propiedad CSS box-sizing nos permite incluir el padding y el borde en el ancho y alto total de un elemento.

Sin la Propiedad CSS box-sizing

Por defecto, el ancho y alto de un elemento se calculan así:
  • ancho + padding + borde = ancho real del elemento
  • alto + padding + borde = alto real del elemento
Esto significa: Cuando estableces el ancho/alto de un elemento, el elemento a menudo parece más grande de lo que has establecido (porque el borde y el padding del elemento se suman al ancho/alto especificado del elemento).

Con la Propiedad CSS box-sizing

La propiedad box-sizing nos permite incluir el padding y el borde en el ancho y alto total de un elemento.
Si estableces box-sizing: border-box; en un elemento, el padding y el borde se incluyen en el ancho y alto.

Sin la Propiedad CSS box-sizing 


    <head>
        <style> 
            .div1 {
                width: 300px;
                height: 100px;
                border: 1px solid blue;
                }    
            .div2 {
                width: 300px;
                height: 100px;  
                padding: 50px;
                border: 1px solid red;
                }
        </style>
    </head>
    <body>    
        <h1>Sin box-sizing</h1>    
        <div class="div1">Este div es más pequeño 
        (ancho es 300px y alto es 100px).</div>
        <div class="div2">Este div es más grande 
        (el ancho también es 300px y el alto es 100px).</div>    
    </body>
Con la Propiedad CSS box-sizing 

        .div1 {
            width: 300px;
            height: 100px;
            border: 1px solid blue;
            box-sizing: border-box;
        }  
        .div2 {
            width: 300px;
            height: 100px;
            padding: 50px;
            border: 1px solid red;
            box-sizing: border-box;
        }

Elementos HTML de Bloque e Inline.

La información en esta sección, el video con todos los pasos de esta sección y el código se pueden encontrar en los enlaces de YouTube y GitHub a continuación:

Elementos de bloque e inline 1 Elementos de bloque e inline 2 YouTube (sección 2) GitHub
Cada elemento HTML tiene un valor de visualización predeterminado, dependiendo del tipo de elemento que sea. Hay dos valores de visualización: block e inline.

Elementos de Bloque
Un elemento de bloque siempre comienza en una nueva línea, y los navegadores añaden automáticamente algún espacio (un margen) antes y después del elemento.
Un elemento de bloque siempre ocupa todo el ancho disponible (se extiende a la izquierda y derecha tanto como pueda).
Algunos elementos de bloque comúnmente usados son: <p>, <div>, <ul>, <li>, <ol> <nav>, <form>, <canvas>, <footer>, <fieldset> y <section>.
Una lista completa de elementos de bloque se puede encontrar en el enlace:
Lista de elementos de bloque
Elementos Inline
Un elemento inline no comienza en una nueva línea.
Un elemento inline solo ocupa el ancho necesario.
Algunos elementos inline comúnmente usados son: <a>, <img>, <span>, <strong>, <select>, <br>, <button> y <code>.
Una lista completa de elementos inline se puede encontrar en el enlace:
Lista de elementos inline

Elementos de bloque 


    <body>    
    <p style="border: 1px solid blue">Hola Mundo</p>
    <div style="border: 1px solid red">Hola Mundo</div>
    
    <p>Los elementos P y DIV son elementos de bloque, /
    y siempre comenzarán en una nueva línea y ocuparán /
    todo el ancho disponible (se extienden /
    hacia la izquierda y derecha tanto como sea posible).</p>
    </body>
Elementos Inline 

    <body>    
        <p>Este es un span inline <span style="border: 1px solid red">/
        Hola Mundo</span> elemento dentro de un párrafo.</p>
    
        <p>El elemento SPAN es un elemento inline, y no comenzará /
        en una nueva línea y solo ocupa el ancho necesario.</p>
    </body>

Cuerpo: Propiedad display de CSS, flexbox y media queries CSS

Propiedad display de CSS

Toda la información en esta sección ha sido extraída de los siguientes enlaces:

CSS display 1 CSS display 2 GitHub
La propiedad display especifica el comportamiento de visualización (el tipo de caja de renderizado) de un elemento.

Algunos elementos de bloque comúnmente utilizados son:

  1. Inline: Muestra un elemento como un elemento en línea (como <span>). Las propiedades de altura y ancho no tendrán efecto.

  2. Block: Muestra un elemento como un elemento de bloque (como <p>). Comienza en una nueva línea y ocupa todo el ancho.

  3. Flex: Muestra un elemento como un contenedor de flexión de nivel de bloque.

  4. Grid: Muestra un elemento como un contenedor de cuadrícula de nivel de bloque.

  5. Inline-block: Muestra un elemento como un contenedor de bloque de nivel en línea. El elemento en sí se formatea como un elemento en línea, pero puedes aplicar valores de altura y ancho.

Propiedad CSS display 


    <style>    
        span.a {
            display: inline; /* el valor predeterminado para span */
            width: 100px;
            height: 100px;
            padding: 5px;
            border: 1px solid blue;  
            background-color: yellow; 
        }  
        span.b {
            display: inline-block;
            width: 100px;
            height: 100px;
            padding: 5px;
            border: 1px solid blue;    
            background-color: yellow; 
        }  
        span.c {
            display: block;
            width: 100px;
            height: 100px;
            padding: 5px;
            border: 1px solid blue;    
            background-color: yellow; 
        }
    </style>    
    <body>    
        <h2>Display: Inline</h2>
        <div>... <span class="a">Aliquam</span> <span class="a">venenatis</span> ... </div>
        <h2>Display: Inline-Block</h2>
        <div>... <span class="b">Aliquam</span> <span class="b">venenatis</span> ... </div>
        <h2>Display: Block</h2>
        <div>... <span class="c">Aliquam</span> <span class="c">venenatis</span> ... </div>
    </body>

Flexbox

Toda la información en esta sección ha sido tomada del siguiente enlace:

Flexbox
El módulo Flexbox Layout (Caja Flexible) tiene como objetivo proporcionar una manera más eficiente de organizar, alinear y distribuir el espacio entre los elementos en un contenedor, incluso cuando su tamaño es desconocido y/o dinámico (de ahí la palabra "flex").

La idea principal detrás del diseño flex es darle al contenedor la capacidad de alterar el ancho/alto (y el orden) de sus elementos para llenar mejor el espacio disponible (principalmente para adaptarse a todo tipo de dispositivos y tamaños de pantalla). Un contenedor flex expande los elementos para llenar el espacio libre disponible o los reduce para evitar el desbordamiento.

Lo más importante es que el diseño de flexbox es agnóstico a la dirección, a diferencia de los diseños regulares (block, que está basado verticalmente, e inline, que está basado horizontalmente). Mientras que estos funcionan bien para páginas, carecen de flexibilidad (sin juego de palabras) para soportar aplicaciones grandes o complejas (especialmente en lo que respecta a cambios de orientación, redimensionamiento, estiramiento, contracción, etc.).

Contenedor Flex de CSS Para seguir esta sección, es necesario ver el video de YouTube en la lista de reproducción del curso. En ese video, analizaremos las propiedades de flexbox con más detalle. Toda la información en esta sección ha sido tomada de los siguientes dos enlaces:

Contenedor Flex 1 Contenedor Flex 2 YouTube (sección 3) GitHub
Para comenzar a usar el modelo Flexbox, primero debemos definir un contenedor flex.

En el video de YouTube, creo un contenedor flex (el área azul) con tres elementos flexibles. Exploramos las propiedades de flexbox en el video. Estas propiedades se resumen a continuación:

  1. Align-content: Modifica el comportamiento de la propiedad flex-wrap. Es similar a align-items, pero en lugar de alinear los elementos flexibles, alinea las líneas flexibles.

  2. Align-items: Alinea verticalmente los elementos flexibles cuando los elementos no utilizan todo el espacio disponible en el eje transversal.

  3. Display: Especifica el tipo de caja utilizado para un elemento HTML.

  4. Flex-direction: Especifica la dirección de los elementos flexibles dentro de un contenedor flex.

  5. Flex-flow: Propiedad abreviada para flex-direction y flex-wrap.

  6. Flex-wrap: Especifica si los elementos flexibles deben ajustarse o no, si no hay suficiente espacio para ellos en una línea flexible.

  7. Justify-content: Alinea horizontalmente los elementos flexibles cuando los elementos no utilizan todo el espacio disponible en el eje principal.

Contenedor Flex de CSS 


        <style>    
            .flex_container {
                display: flex;
                flex-direction: row;
                background-color: DodgerBlue;
                width: 800px;
                height: 800px;
                align-items: center;
                justify-content: center;
            }
            .flex_container .item1 {
                background-color: red;
                margin: 10px;
                padding: 20px;
                font-size: 30px;
                width: 150px;
                height: 150px;
            }
            .flex_container .item2 {
                ...
            }
            .flex_container .item3 {
                ...
            }
        </style>    
        <body>    
            <div class="flex_container">
                <div class="item1">Ítem 1</div>
                <div class="item2">Ítem 2</div>
                <div class="item3">Ítem 3</div>  
            </div>
        </body>

Elementos Flexibles de CSS Toda la información en esta sección ha sido tomada de los siguientes dos enlaces:

Elementos Flexibles YouTube (sección 3) GitHub
Los elementos hijos directos de un contenedor flex se convierten automáticamente en elementos flexibles (flex).

En el video de YouTube, creo un contenedor flex (el área azul) con tres elementos flexibles. Exploramos las propiedades de flexbox de los elementos hijos en el video. Estas propiedades se resumen a continuación:

  1. Align-self: Especifica la alineación para un elemento flexible (anula la propiedad align-items del contenedor flex).

  2. Flex: Propiedad abreviada para las propiedades flex-grow, flex-shrink y flex-basis.

  3. Flex-basis: Especifica la longitud inicial de un elemento flexible.

  4. Flex-grow: Especifica cuánto crecerá un elemento flexible en relación con el resto de los elementos flexibles dentro del mismo contenedor.

  5. Flex-shrink: Especifica cuánto se reducirá un elemento flexible en relación con el resto de los elementos flexibles dentro del mismo contenedor.

  6. Order: Especifica el orden de los elementos flexibles dentro del mismo contenedor.

Elementos Flexibles de CSS 


        <style>    
            .flex_container .item1 {
                background-color: red;
                margin: 10px;
                padding: 20px;
                font-size: 30px;
                width: 150px;
                height: 150px;
                flex-grow: 1;
            }
            .flex_container .item2 {
                background-color: red;
                margin: 10px;
                padding: 20px;
                font-size: 30px;
                width: 150px;
                height: 150px;
                flex-grow: 2;
            }
        </style>    
        <body>    
            <div class="flex_container">
                <div class="item1">Ítem 1</div>
                <div class="item2">Ítem 2</div>
                <div class="item3">Ítem 3</div>  
            </div>
        </body>

Media queries CSS

Toda la información en esta sección ha sido tomada de los siguientes enlaces:

Media queries CSS YouTube (sección 3) GitHub
La regla @media, introducida en CSS2, permitió definir diferentes reglas de estilo para diferentes tipos de medios.

Ejemplos: Podrías tener un conjunto de reglas de estilo para pantallas de computadoras, uno para impresoras, uno para dispositivos portátiles, uno para dispositivos tipo televisión, y así sucesivamente.

Las media queries en CSS3 ampliaron la idea de los tipos de medios de CSS2: en lugar de buscar un tipo de dispositivo, examinan la capacidad del dispositivo.

Las media queries se pueden usar para verificar muchas cosas, como:

  • Ancho y alto del área de visualización.

  • Ancho y alto del dispositivo.

  • Orientación (¿está la tableta/telefono en modo horizontal o vertical?).

  • Resolución.
El uso de media queries es una técnica popular para entregar una hoja de estilo personalizada a escritorios, portátiles, tabletas y teléfonos móviles (como iPhone y teléfonos Android).

Consultas de Medios CSS 


        <head>   
            <meta name="viewport" content="user-scalable=yes, 
            width=device-width, initial-scale=1">
            <style> 
                ...   
                @media (max-width:768px) { 
                .flex_container {
                    flex-direction: column;
                    }
                }
            </style>    
        </head>     
        <body>    
        <div class="flex_container">
            <div class="item1">Ítem 1</div>
            <div class="item2">Ítem 2</div>
            <div class="item3">Ítem 3</div>  
        </div>
        </body>

Barra de navegación y pie de página

Los enlaces al video de YouTube Y la cuenta de GitHub para esta sección están abajo:

YouTube (sección 4a) YouTube (sección 4b) GitHub

Antes de comenzar

Para tener un acceso rápido a íconos, fuentes y otros elementos en nuestro proyecto, vamos a utilizar conexiones CDN. Por lo tanto, es importante tener algunas nociones de lo que es una conexión CDN. Una red de distribución de contenido (CDN) es un grupo de servidores distribuidos geográficamente que acelera la entrega de contenido web al acercarlo a donde se encuentran los usuarios. Los centros de datos en todo el mundo utilizan el almacenamiento en caché, un proceso que almacena temporalmente copias de archivos, para que puedas acceder al contenido de Internet desde un dispositivo habilitado para la web o navegador más rápidamente a través de un servidor cercano a ti. Las CDNs almacenan en caché contenido como páginas web, imágenes y videos en servidores proxy cercanos a tu ubicación física. Esto te permite hacer cosas como ver una película, descargar software, verificar tu saldo bancario, publicar en redes sociales o hacer compras, sin tener que esperar a que se cargue el contenido.

Más información sobre conexiones CDN:

Conexiones CDN

Barra de navegación

El código html de la barra de navegación está en el archivo layout.html, y se encuentra encima de {% block content %} {% endblock %}.

El código html de la barra de navegación consta de:

  1. Una sección que cubre todo el ancho de la pantalla.
  2. Un contenedor con un ancho de 1320px que contiene la barra de navegación.
  3. Una barra de navegación que contiene el logotipo de nuestra aplicación y una lista con enlaces a las rutas de inicio, metodología y aplicación de carbono.
En la barra de navegación, vamos a introducir un ícono importado de Font Awesome (o Bootstrap). Utilizando ese ícono, vamos a crear el logotipo de nuestra aplicación. Para usar los íconos, necesitamos importar algunas clases CSS de Font Awesome. Vamos a importar esas clases en el head de nuestro documento. Más información sobre Font Awesome:

Font Awesome

Para mejorar nuestra barra de navegación, vamos a crear nuestro propio archivo de clases CSS (layout.css). En el archivo CSS, vamos a definir algunas clases que afectan a todo el documento. Agrupamos esas clases como utilidades. Utilidades es el nombre estándar que se utiliza en la programación para referirse a esas clases, y en general a funciones o partes del código que se pueden usar en todo el proyecto. Vamos a crear clases específicas que definan las propiedades de otros componentes de nuestra barra de navegación. Al igual que con Font Awesome, vamos a importar el archivo layout.css a nuestro archivo layout.html en el head del archivo layout.html. En la barra de navegación y en el resto de nuestro proyecto, estamos usando una fuente importada de Google Fonts. Vamos a importar las Google Fonts a nuestro archivo layout.css. Más información sobre Google Fonts:

Google Fonts

Para hacer nuestra barra de navegación responsiva a diferentes pantallas, vamos a usar media queries. Para evitar el uso de JavaScript, vamos a usar un simple flexbox de media, donde cuando accedemos a nuestra aplicación desde un teléfono móvil, la barra de navegación aparece en una columna y aumenta su ancho.

Pie de página

Para hacer nuestra barra de navegación responsiva a diferentes pantallas, vamos a usar media queries. Para evitar el uso de JavaScript, vamos a usar un simple flexbox de media, donde cuando accedemos a nuestra aplicación desde un teléfono móvil, la barra de navegación aparece en una columna y aumenta su ancho. El pie de página de nuestro proyecto es muy simple. El código html está en el archivo layout.html, y se encuentra debajo de {% block content %} {% endblock %}. El código html del pie de página y las clases CSS son muy simples, están disponibles en la cuenta de GitHub, y vamos a escribir el código html y CSS durante las lecciones.

Encabezado y Desarrolladores

Los enlaces al video de YouTube y la cuenta de GitHub para esta sección están a continuación:

YouTube (sección 5a) YouTube (sección 5b) GitHub

Antes de comenzar

En nuestra aplicación, vamos a utilizar diferentes imágenes y logotipos. Es importante saber qué tipo de formato es el más adecuado para fotos, imágenes y logotipos. Presentaré cuatro tipos de formatos de imagen: SVG, PNG, JPEG y GIF.

Archivos SVG

¿Qué es un archivo SVG?

Scalable Vector Graphics (SVG) es un formato de archivo vectorial compatible con la web. A diferencia de los archivos rasterizados basados en píxeles como los JPEG, los archivos vectoriales almacenan imágenes a través de fórmulas matemáticas basadas en puntos y líneas en una cuadrícula. Esto significa que los archivos vectoriales como SVG pueden redimensionarse significativamente sin perder calidad, lo que los hace ideales para logotipos y gráficos complejos en línea.

Ventajas de los archivos SVG.

  • A diferencia de los archivos rasterizados, que están formados por píxeles, los gráficos vectoriales como los SVG siempre mantienen su resolución, sin importar cuán grandes o pequeños los hagas. No tienes que preocuparte por que las imágenes SVG pierdan calidad en ciertos navegadores o cuando las redimensionas para que aparezcan en diferentes lugares.
  • Los archivos SVG básicos suelen ser más pequeños que las imágenes rasterizadas, que se construyen a partir de muchos píxeles de color en lugar de usar algoritmos matemáticos.
  • Debido a que los archivos SVG tratan el texto como texto (y no como diseño), los lectores de pantalla pueden escanear cualquier palabra contenida en las imágenes SVG. Esto es muy útil para personas que necesitan ayuda para leer páginas web. Los motores de búsqueda también pueden leer e indexar el texto de las imágenes SVG.
Desventajas de los archivos SVG.
  • Los archivos SVG son ideales para gráficos web como logotipos, ilustraciones y gráficos. Pero su falta de píxeles hace que sea difícil mostrar fotos digitales de alta calidad. Los archivos JPEG son generalmente mejores para fotografías detalladas.
  • Solo los navegadores modernos pueden soportar imágenes SVG. Puede que te resulte un desafío usar archivos SVG con Internet Explorer 8 y otros navegadores más antiguos.
  • El código contenido en las imágenes SVG puede ser difícil de entender si eres nuevo en su formato de archivo.
Más información sobre archivos SVG:

Archivos SVG
Archivos PNG

¿Qué es un archivo PNG?

PNG es la abreviatura de Portable Network Graphic, un tipo de archivo de imagen rasterizada. Es un tipo de archivo especialmente popular entre los diseñadores web porque puede manejar gráficos con fondos transparentes o semitransparentes. El formato de archivo no está patentado, por lo que puedes abrir un PNG utilizando cualquier software de edición de imágenes sin necesidad de licencias.

Ventajas de los archivos PNG.

  • Al manejar millones de opciones de color en lugar de cientos, los archivos PNG pueden almacenar imágenes mucho más detalladas que los GIF.
  • PNG es un formato abierto, por lo que puedes ver y editar estos archivos en una gran variedad de programas sin una licencia, ya que no hay patente.
  • Una imagen PNG no perderá ninguno de sus datos cuando se comprime, lo que facilita mucho su almacenamiento y transferencia. Esto es una gran ventaja sobre opciones con pérdida como los archivos JPEG, donde se pierde información en el proceso de compresión.
Desventajas de los archivos PNG.
  • Al retener todos sus datos originales cuando se comprime, un archivo PNG generalmente será mucho más grande en tamaño que un GIF o un JPEG. Esto significa que ocupará más espacio en el disco duro de tu computadora.
  • Desde el principio, los PNG fueron diseñados pensando en la web. Debido a esto, no admiten modos de color CMYK, por lo que transferirlos a impresión puede resultar difícil.
  • Aunque los PNG comprimidos contienen datos de imágenes de alta calidad y detalle, su mayor tamaño de archivo significa tiempos de carga de página más lentos y menor capacidad de respuesta.
Más información sobre archivos PNG:

Archivos PNG
Archivos JPEG

¿Qué es un archivo JPEG?

JPEG significa Joint Photographic Experts Group, una organización internacional que estandarizó el formato durante finales de los 80 y principios de los 90. Es el formato de archivo preferido para imágenes digitales, y lo ha sido desde que los fotógrafos comenzaron a tomar y almacenar imágenes en cámaras digitales y otros dispositivos reprográficos.

Ventajas de los JPEG.

  • Los archivos JPEG son, sin duda, el formato de archivo de imagen más reconocido universalmente, compatible con la mayoría de los navegadores, software y aplicaciones.
  • Sus pequeños tamaños de archivo permiten una transferencia rápida y un acceso rápido para ver en línea. Al descartar inteligentemente todos los colores que el ojo humano no puede distinguir, llamado compresión con pérdida, los JPEG mantienen su tamaño de archivo lo más pequeño posible. En comparación con formatos sin pérdida como los GIF, los JPEG son significativamente más pequeños en tamaño.
  • El post-procesamiento es más fácil porque el balance de blancos y la saturación en los JPEG se ajustan con un solo clic del obturador.
Desventajas de los JPEG.
  • La compresión con pérdida puede ahorrar espacio, pero cuando se trata de imágenes muy comprimidas, la calidad sufrirá. Las imágenes con bordes y líneas limpias perderán algo de nitidez en la compresión.
  • Perder tantos datos puede causar posterización, la pérdida de transiciones suaves entre colores, haciendo que una imagen se vea más bloqueada y abrupta. También puede causar la aparición de artefactos, aliasing en los bordes, blooming o ruido, lo que puede afectar severamente la calidad de la imagen. Los fotógrafos pueden evitar los posibles problemas de artefactos y posterización guardando las fotos en formato raw.
Más información sobre archivos JPEG:

Archivos JPEG
Archivos GIF

¿Qué es un archivo GIF?

Probablemente veas archivos GIF cada vez que revisas tus redes sociales. Pero, ¿qué significa GIF y cómo funcionan estos archivos?

GIF significa Graphics Interchange Format. GIF es un formato de archivo rasterizado diseñado para imágenes relativamente básicas que aparecen principalmente en internet. Cada archivo puede admitir hasta 8 bits por píxel y puede contener 256 colores indexados. Los archivos GIF también permiten combinar imágenes o cuadros, creando animaciones básicas.

Ventajas de los archivos GIF.

  • Lo que las animaciones GIF carecen de sofisticación lo compensan con velocidad e impacto. Son rápidas de crear, no requieren demasiado conocimiento técnico y pueden extenderse por las redes sociales como la pólvora en forma de memes.
  • Los límites de color impuestos en los GIFs mantienen sus tamaños de archivo relativamente pequeños. Esto puede ayudar a que carguen más rápido en las páginas web.
  • Los archivos GIF cuentan con una función llamada compresión sin pérdida. Esto significa que su calidad de imagen no disminuye cuando se comprimen sus datos.
Desventajas de los archivos GIF.
  • El formato de archivo GIF solo admite una paleta de 256 colores, lo que significa que las imágenes pueden tener una resolución baja o incluso verse un poco borrosas.
  • Debido a que usan múltiples imágenes, los archivos GIF animados pueden ser difíciles de editar una vez creados.
  • Aunque los GIFs son generalmente pequeños y rápidos de cargar, una conexión lenta a internet podría retrasar o afectar negativamente su apariencia en una página web.
Más información sobre archivos GIF:

Archivos GIF

Encabezado

El código html del encabezado está en el archivo home.html, y se encuentra debajo de {% extends "layout.html" %}, y entre {% block content %} y {% endblock content %}. El código html del encabezado consiste en:

  1. Una sección que cubre todo el ancho de la pantalla.
  2. Un contenedor con un ancho de 1320px que contiene la barra de navegación.
  3. Un div con dos cajas flexibles. Una para el texto y otra para el logo.
Para definir todas las clases que modifican el código html, creamos un archivo home.css. Importamos el archivo home.css a nuestro proyecto en el encabezado de nuestro archivo layout.html. Al igual que con la barra de navegación, para el encabezado en el archivo home.html, utilizamos clases de utilidad y clases específicas que afectan la apariencia del archivo home.html.

Desarrolladores

El código html de la sección de desarrolladores sigue la misma estructura que el código html de la sección de encabezado. El código CSS que define la apariencia de la sección de desarrolladores es similar al código CSS que define la sección de encabezado.

Bootstrap: Instalación, botones y modal

Los enlaces al video de YouTube y a la cuenta de GitHub para esta sección están a continuación:

YouTube (sección 6) GitHub

¿Qué es Bootstrap?

Bootstrap es el Framework CSS más popular para desarrollar sitios web responsivos y mobile-first.

¿Qué es mobile first? Un enfoque "mobile-first" implica diseñar un sitio de escritorio comenzando con la versión móvil, que luego se adapta a pantallas más grandes (contrario al enfoque tradicional de comenzar con un sitio de escritorio y luego adaptarlo a pantallas más pequeñas). En términos generales, un enfoque mobile-first significa construir su sitio web pensando en sus usuarios móviles, con el objetivo principal de mejorar la experiencia de estos usuarios móviles en su sitio.

¿Cómo instalar Bootstrap? Para usar Bootstrap es necesario agregar el enlace CSS en el encabezado y los enlaces de JavaScript en el cuerpo. Las instrucciones para instalar Bootstrap están en el enlace a continuación. También explicamos cómo instalar Bootstrap en el video de YouTube de esta sección.

YouTube (sección 6) Bootstrap (Instalación)

Botones en Bootstrap

Los botones son muy útiles y aparecen varias veces en nuestra aplicación. En el capítulo anterior, utilizamos botones de Bootstrap y también creamos nuestros propios botones. Más información sobre los botones de Bootstrap se puede encontrar en el enlace a continuación.

Bootstrap (Botones)

Ejemplos. En esta sección, vamos a introducir tres botones de Bootstrap, centrándonos en tres tipos de botones.

Botones predeterminados de Bootstrap - Código -
<button type="button" class="btn btn-primary">Primario</button>
<button type="button" class="btn btn-info">Info</button>
Botones predeterminados de Bootstrap - Navegador -
Botones Outline - Código -
<button type="button" class="btn btn-outline-danger">Peligro</button>
<button type="button" class="btn btn-outline-warning">Advertencia</button>
Botones Outline - Navegador -
Botones de tamaño - Código -
<button type="button" class="btn btn-primary btn-lg" >Botón grande</button>
<button type="button" class="btn btn-secondary btn-sm" >Botón pequeño</button>
Botones de tamaño - Navegador -

Modal en Bootstrap

El enlace con información sobre el modal en Bootstrap se encuentra a continuación:

Bootstrap (Modal)
El plugin modal de JavaScript de Bootstrap añade cuadros de diálogo a su sitio para lightboxes, notificaciones de usuarios o contenido completamente personalizado.

Cómo funciona: Antes de comenzar con el componente modal de Bootstrap, asegúrese de leer lo siguiente, ya que nuestras opciones de menú han cambiado recientemente.

Un ejemplo:

Modal - Código -

    <!-- Botón para activar el modal -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
    Lanzar modal de demostración
    </button>
    
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Título del modal</h5>
        </div>
        <div class="modal-body">
        ...
        </div>
        <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
        <button type="button" class="btn btn-primary">Guardar cambios</button>
        </div>
    </div>
    </div>
    </div>
Modal - Navegador -

Íconos en Bootstrap

Anteriormente en este capítulo utilizamos Font Awesome para introducir íconos en nuestra aplicación. También podemos usar íconos de Bootstrap en nuestra aplicación. En esta sección, estudiamos cómo introducir íconos de Bootstrap en nuestra aplicación.

Información útil sobre los íconos de Bootstrap se puede encontrar en los enlaces a continuación.

Bootstrap (Íconos I) Bootstrap (Íconos II)

Ejemplos.

Íconos - Código -
<i class="bi bi-arrow-up-circle-fill"></i>
<i class="bi bi-arrow-up-square-fill"></i>
<i class="bi bi-calculator"></i>
<i class="bi bi-bar-chart-fill"></i>
Íconos - Navegador -

Reto semanal

En este desafío semanal, debes diseñar tus propios archivos layout.html, home.html, business.html, light_app.html, y los archivos de css asociados a estos archivos html. No necesitas hacer algo extraordinario. Enfócate en las distintas páginas del proyecto, y trata de que sean lo más avanzadas posible. Es importante que proporciones un modelo de negocio claro, que ayude al usuario a entender el modelo de negocio que estás utilizando en tu aplicación. Enfócate también en el modal para proporcionar algunas instrucciones básicas. Desarrollaremos las instrucciones más adelante en el curso, pero trata de entender cómo funciona el modal. Como en el capítulo anterior, trata de tener una versión avanzada de los archivos html y css, ya que eso te ayudará a avanzar en el desarrollo de tu aplicación.

Discutiremos el desafío semanal el viernes...... Utilizaremos el chat principal para ayudarnos mutuamente en el desafío semanal. Dentro de esos días, por favor comparte la información que consideres relevante para ayudar a los demás grupos.

Pistas
GitHub