Descripción: Se busca introducir a los estudiantes en el proceso de maquetación web responsiva, utilizando HTML y CSS. Se cubrirán las técnicas fundamentales para crear interfaces de usuario que se adapten a diferentes tamaños de pantalla, garantizando así una experiencia óptima para el usuario en dispositivos móviles.
Conceptos: html, css, maquetacion web, maquetacion movil, tailwindcss, bootstrap.
-
HTML
- Estructura básica de un documento HTML.
- Etiquetas más utilizadas
-
CSS
- Flexbox: conceptos básicos y cómo utilizarlo para crear layouts flexibles.
- Grid CSS: introducción al sistema de grillas para un diseño más complejo y versátil.
- Media Queries: cómo aplicar estilos específicos para diferentes tamaños de pantalla.
-
Librerías de Diseño
- Bootstrap: Breve introducción e instrucciones para integrarlo en proyectos.
- Tailwind CSS: conceptos básicos y su enfoque en utilidades para un diseño rápido y eficiente.
Tip
RECORDAR que la actividad de ayudantía busca que apliquen estos conceptos en su proyecto de de la asignatura.
- Analizar el prototípo realizado en Figma y el diseño de figma asociado.
- ¿Qué elementos se pueden identificar en el diseño?
- ¿Cómo se distribuyen los elementos en la aplicación?
- ¿Cómo puedo mostrar ese contenido en una página web?
- ¿Cómo puedo transformar el diseño de Figma en código HTML y CSS?
- Analizar su propio diseño de aplicación para su proyecto, y trabajar en la maquetación web (es decir, usar HTML y CSS para diseñar lo prototipado en Figma) de la página principal.
Note
En caso de no tener diseño propio aún, maquetar la página principal del prototipo anterior (aplicación de reseñas).
En esta actividad, se busca que:
- Crear la estructura HTML de la página principal.
- Crear el estilo CSS de la página principal.
- Aplicar Flexbox o grid para organizar los elementos de la página.
- Conectar el HTML y CSS para visualizar la página en un navegador web.
Guardar el código en un archivo index.html y styles.css, para su posterior revisión personal.
HTML es el lenguaje de marcado estándar para documentos diseñados para ser mostrados en un navegador web. Es utilizado para estructurar y presentar contenido en la web. La estructura básica de un documento HTML es:
<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
</head>
<body>
<h1>Encabezado de nivel 1</h1>
<p>Párrafo de texto.</p>
</body>
</html>Los elementos de un documento HTML se definen a través de etiquetas. Las etiquetas son palabras clave rodeadas por corchetes angulares, como <html>, <head>, <title>, <body>, <h1>, <p>, entre otras. Las etiquetas mas utilizadas son:
| Etiqueta | Descripción | Ejemplo |
|---|---|---|
<!DOCTYPE html> |
Declaración del tipo de documento | <!DOCTYPE html> |
<html> |
Elemento raíz del documento | <html> |
<head> |
Contiene metadatos del documento | <head> |
<title> |
Título de la página | <title>Título de la página</title> |
<body> |
Contenido visible de la página | <body> |
<h1> |
Encabezado de nivel 1 | <h1>Encabezado de nivel 1</h1> |
<p> |
Párrafo de texto | <p>Párrafo de texto.</p> |
<a> |
Hipervínculo | <a href="https://ruta-del-enlace">Texto del enlace</a> |
<img> |
Imagen | <img src="ruta-de-la-imagen" alt="Texto alternativo"> |
<ul> |
Lista no ordenada | <ul><li>Elemento 1</li><li>Elemento 2</li></ul> |
<ol> |
Lista ordenada | <ol><li>Elemento 1</li><li>Elemento 2</li></ol> |
<table> |
Tabla | <table><tr><th>Encabezado</th></tr><tr><td>Dato</td></tr></table> |
<input> |
Campo de entrada | <input type="text" placeholder="Texto de ejemplo"> |
CSS es un lenguaje de diseño que se utiliza para controlar el aspecto y el diseño de las páginas web. Permite definir estilos para los elementos de un documento HTML, como colores, fuentes, márgenes, tamaños, entre otros. Los estilos se aplican a través de reglas que se componen de un selector y un bloque de declaración. La sintaxis básica de una regla CSS es:
selector {
propiedad: valor;
}Los selectores son patrones que se utilizan para seleccionar los elementos a los que se les aplicarán los estilos. Los bloques de declaración contienen una o más propiedades y valores separados por dos puntos y terminados con punto y coma. Algunas propiedades más utilizadas son:
| Propiedad | Descripción | Ejemplo |
|---|---|---|
color |
Color del texto | color: #ff0000; |
font-size |
Tamaño de la fuente | font-size: 16px; |
font-family |
Familia de fuentes | font-family: Arial, sans-serif; |
background-color |
Color de fondo | background-color: #ffffff; |
border |
Borde | border: 1px solid #000000; |
margin |
Márgenes | margin: 10px; |
padding |
Relleno | padding: 10px; |
text-align |
Alineación de texto | text-align: center; |
display |
Tipo de visualización | display: block; |
flex |
Flexbox | display: flex; |
grid |
Grid CSS | display: grid; |
Los layouts son la forma en que se organizan los elementos en una página web. Los más utilizados son Flexbox y Grid CSS. Flexbox es un modelo de diseño unidimensional que permite distribuir el espacio entre los elementos de una interfaz y controlar su alineación. Grid CSS es un sistema de diseño bidimensional que permite dividir el espacio de la página en columnas y filas, y controlar la ubicación y el tamaño de los elementos.
Las Media Queries son una técnica de CSS que permite aplicar estilos específicos para diferentes tamaños de pantalla. Se utilizan para crear diseños responsivos que se adapten a dispositivos móviles, tablets y computadoras. La sintaxis básica de una Media Query es:
@media screen and (max-width: 600px) {
selector {
propiedad: valor;
}
}Este ejemplo aplica los estilos al selector cuando el ancho de la pantalla es de 600px o menos. Algunas características que se pueden modificar con Media Queries son el tamaño de la fuente, el ancho de los elementos, la visibilidad de los elementos, entre otros.
Las librerías de diseño son conjuntos de estilos predefinidos que se pueden utilizar para crear interfaces de usuario de forma rápida y eficiente. Algunas de las librerías más utilizadas, y que cubriremos en ayudantía son Bootstrap y Tailwind CSS.
Bootstrap es un framework de diseño frontend que contiene una colección de herramientas y componentes para el diseño de sitios y aplicaciones web. Incluye estilos predefinidos para tipografía, formularios, botones, navegación, entre otros. Para integrar Bootstrap en un proyecto, se puede utilizar la versión compilada desde su página oficial, o a través de un CDN.
Tailwind CSS es un framework de diseño frontend que se enfoca en utilidades para crear interfaces de usuario. En lugar de proporcionar estilos predefinidos, Tailwind CSS proporciona clases utilitarias que se pueden utilizar para aplicar estilos directamente en el HTML. Esto permite un diseño más rápido y eficiente, y una mayor flexibilidad para personalizar los estilos. Para integrar Tailwind CSS en un proyecto, se puede utilizar la versión compilada desde su página oficial, o a través de un CDN.