2.1.

Introducción al Diseño Web

La Importancia de Tener un Bosquejo Antes de Iniciar un Proyecto Web

Cuando comenzamos un proyecto web, es crucial tener una planificación clara y detallada. Un bosquejo nos
permite visualizar la estructura y funcionalidad del sitio antes de adentrarnos en el desarrollo. Por ejemplo:
construir una casa sin planos es algo posible pero con un gran riesgo de tener muchos errores, lo cual retrasaría
su construcción ya que seria improvisar sobre la marcha. En un proyecto web es igual, podemos desarrollar una
web sin un bosquejo pero entorpecería el desarrollo ya que sería improvisar sobre la marcha, y muchas veces
puede demorar más en darse por finalizado un proyecto.

A continuación, se explican los conceptos clave que conforman esta planificación: Sketch, Wireframe, Mockup,
Prototipo Interactivo y Diseño Final.

1. Sketch

¿Qué es? Un sketch es un dibujo rápido y básico que representa las ideas iniciales del diseño de una página
web. Suele realizarse a mano alzada en papel o utilizando herramientas digitales simples.

Importancia

Generación de Ideas: Permite plasmar ideas de forma rápida y libre.

Comunicación: Facilita la comunicación inicial entre los miembros del equipo y con el cliente.

Iteración Rápida: Es fácil de modificar, permitiendo iteraciones rápidas y frecuentes.

2. Wireframe

¿Qué es? Un wireframe es una representación más detallada de la estructura de la página web, destacando la
disposición de los elementos principales sin enfocarse en detalles estéticos. Generalmente, se realiza en blanco
y negro.

Importancia

Claridad Estructural: Ayuda a definir claramente la jerarquía y disposición de los elementos.

Enfoque en la Usabilidad: Permite centrarse en la funcionalidad y la experiencia del usuario.

Base para el Desarrollo: Sirve como guía para los diseñadores y desarrolladores en las etapas posteriores.

3. Mockup

¿Qué es? Un mockup es una representación visual detallada del diseño de la página, incorporando colores,
tipografías e imágenes. A diferencia del wireframe, el mockup se enfoca en el aspecto estético del sitio.

Importancia

Visualización del Diseño Final: Ofrece una vista previa detallada del aspecto final del sitio web.

Feedback Visual: Facilita la obtención de retroalimentación específica sobre el diseño.

Guía Estética: Proporciona una referencia clara para los desarrolladores en términos de estilo y apariencia.

4. Prototipo Interactivo

¿Qué es? Un prototipo interactivo es una versión funcional del mockup que permite la interacción del usuario,
simulando la navegación y funcionalidad del sitio web. No es un producto final, pero se asemeja mucho a cómo
se comportará el sitio real.
se comportará el sitio real.

Importancia

Prueba de Usabilidad: Permite probar y mejorar la experiencia del usuario antes del desarrollo final.

Detección de Problemas: Ayuda a identificar y resolver problemas de navegación y funcionalidad.

Validación con Clientes: Proporciona una herramienta poderosa para obtener feedback de los clientes de
forma temprana.

5. Diseño Final

¿Qué es? El diseño final es la versión completamente desarrollada y funcional del sitio web, listo para ser
lanzado. Incluye todos los elementos visuales y de interacción definidos en los pasos anteriores.

Importancia

Entrega Completa: Representa el producto terminado, listo para su publicación y uso.

Cumplimiento de Objetivos: Asegura que se han cumplido todos los requisitos de diseño, funcionalidad y
usabilidad.

Satisfacción del Cliente: Garantiza que el resultado final cumple con las expectativas y necesidades del
cliente.

Conclusión

Tener un bosquejo claro antes de iniciar un proyecto web es fundamental para asegurar un proceso de
desarrollo organizado y eficiente. Desde el sketch inicial hasta el diseño final, cada etapa del bosquejo
contribuye a la creación de un sitio web funcional, estético y centrado en el usuario.

2.2 Prototipado desde el papel

Tipos de Prototipos

Prototipos de Baja Fidelidad

¿Qué son?

Son representaciones simples y rápidas del producto, generalmente hechas a mano o con herramientas
digitales básicas. No incluyen detalles de diseño ni funcionalidad interactiva.

Características

Simplicidad: Centrados en la estructura y flujo de navegación.

Rapidez: Fáciles y rápidos de crear y modificar.

Costo-Efectividad: Ideales para las fases iniciales del diseño cuando las ideas están en desarrollo.

Prototipos de Media Fidelidad

¿Qué son?

Estos prototipos añaden más detalles que los de baja fidelidad, incorporando elementos visuales básicos y
algunas funcionalidades interactivas.

Características

Detalles Básicos: Incluyen elementos visuales y diseño más desarrollado.

 Interactividad Limitada: Permiten navegar a través de las principales funcionalidades del producto.

Iteración: Ayudan a refinar el diseño antes de avanzar a prototipos de alta fidelidad.

Prototipos de Alta Fidelidad

¿Qué son?

Son representaciones detalladas y casi funcionales del producto final, con diseño visual completo, interacciones
y transiciones de navegación.

Características

Precisión: Altamente detallados y similares al producto final.

Interactividad Completa: Incluyen interacciones complejas y transiciones de navegación.

Validación Realista: Permiten realizar pruebas de usuario más precisas y detalladas.

Beneficios de Crear Prototipos

Visualización Clara

Los prototipos permiten visualizar cómo se verá y funcionará el producto final, facilitando la comunicación de
ideas y conceptos entre el equipo de desarrollo y los stakeholders.

Retroalimentación Temprana

Permiten obtener feedback temprano de usuarios y stakeholders, ayudando a identificar y solucionar problemas
antes de invertir en el desarrollo completo.

Pruebas de Usabilidad

Ofrecen una base para realizar pruebas de usabilidad, asegurando que el diseño final sea intuitivo y fácil de
usar para los usuarios.

Reducción de Costos

Detectar y solucionar problemas en las etapas iniciales del desarrollo reduce los costos asociados con cambios
y retrabajos en fases posteriores.

Experiencia del Usuario (UX)

¿Qué es UX?

La Experiencia del Usuario (UX) se refiere a cómo se siente un usuario al interactuar con un producto o servicio.
En desarrollo web, se enfoca en crear sitios y aplicaciones que sean fáciles de usar, intuitivos y agradables.

Importancia de UX

Satisfacción del Usuario: Mejora la satisfacción y retención de usuarios.

Accesibilidad: Asegura que el sitio sea accesible y usable para una amplia audiencia, incluyendo personas
con discapacidades.

Competitividad: Un buen diseño de UX puede diferenciar un producto de la competencia y atraer más

usuarios.

Producto Mínimo Viable (MVP)

¿Qué es un MVP?

El Producto Mínimo Viable (MVP) es la versión más simple de un producto que permite ser lanzada al mercado
para obtener feedback real de los usuarios. Incluye solo las características esenciales necesarias para cumplir
con los requisitos básicos del usuario.

Beneficios de un MVP

Validación de Ideas: Permite validar rápidamente si hay demanda para el producto sin necesidad de un
desarrollo completo.

Ahorro de Recursos: Minimiza los costos y esfuerzos iniciales al enfocarse solo en las características
esenciales.

Iteración Rápida: Facilita realizar mejoras y añadir nuevas funcionalidades basadas en la retroalimentación
de los usuarios reales.

Conclusión

Utilizar diferentes tipos de prototipos, enfocarse en la UX y desarrollar un MVP son prácticas esenciales en el
desarrollo web. Estas estrategias aseguran que los productos sean funcionales, intuitivos y bien recibidos por
los usuarios, reduciendo riesgos y optimizando recursos.

2.3. Nuestro amigo para el desarrollo web: ¡HTML!

Introducción a HTML

HTML (HyperText Markup Language) es el lenguaje de marcado estándar para crear documentos destinados a
ser visualizados en navegadores web. A continuación, se explican los elementos estructurales de HTML, la
diferencia entre HTML y CSS, las tecnologías complementarias como CSS y JavaScript, las reglas para
nombrar archivos y la importancia del archivo [Link].

Elementos Estructurales de HTML

¿Qué son?

Los elementos estructurales de HTML son las etiquetas que definen la estructura y contenido de una página
web. Cada elemento HTML está representado por una etiqueta, y los más comunes incluyen:

<html>: La raíz del documento HTML.

<head>: Contiene metadatos sobre el documento, como el título y enlaces a hojas de estilo.

<title>: Define el título del documento que se muestra en la pestaña del navegador.

<body>: Contiene todo el contenido visible de la página web.

<header>: Define un encabezado para el documento o una sección.

<nav>: Contiene enlaces de navegación.

<main>: Representa el contenido principal del documento. ( Por ejemplo: Si armamos una web de venta de
autos, el contenido principal serían los autos que se encuentran en venta).

<section>: Define una sección en el documento.

<article>: Representa contenido autónomo.

<footer>: Define un pie de página para el documento o una sección.

 <footer>: Define un pie de página para el documento o una sección.

Diferencia entre HTML y CSS

HTML

Función: Estructura el contenido de la página web.

Uso: Define los elementos de la página, como párrafos, encabezados, imágenes y enlaces.

Ejemplo: <p>Este es un párrafo.</p>

CSS (Cascading Style Sheets)

Función: Controla la presentación y el diseño de la página web.

Uso: Estiliza los elementos HTML, definiendo aspectos como colores, fuentes, márgenes y posicionamiento.

Tecnologías Complementarias

CSS (Cascading Style Sheets)

CSS se utiliza junto con HTML para mejorar la apariencia visual de una página web. Permite separar la
estructura del contenido (HTML) del diseño (CSS), facilitando la gestión y el mantenimiento del sitio.

JavaScript

JavaScript es un lenguaje de programación que se utiliza para añadir interactividad y dinamismo a las páginas
web. Con JavaScript, se pueden crear funciones como validación de formularios, animaciones y comunicación
asíncrona con servidores (AJAX).

Reglas para Nombrar Archivos

Buenas Prácticas

Nombres Descriptivos: Los nombres de archivo deben ser descriptivos y reflejar el contenido del archivo.

Sin Espacios: Utiliza guiones (`) o guiones bajos (_`) en lugar de espacios.

Minúsculas: Preferiblemente, utiliza minúsculas para evitar problemas de compatibilidad en servidores

sensibles a mayúsculas y minúsculas.

Extensiones Correctas: Asegúrate de utilizar las extensiones correctas (.html, .css, .js).

Ejemplos

[Link]

[Link]

[Link]

Importancia del Archivo [Link]

¿Qué es?

El archivo [Link] es el archivo principal de una página web. Cuando un navegador solicita una URL sin
especificar un archivo, el servidor web busca el archivo [Link] en la carpeta raíz del sitio.

Importancia
Importancia

Punto de Entrada: Sirve como punto de entrada principal para los visitantes del sitio web.

Estándar de la Industria: Es una convención ampliamente aceptada y reconocida por los servidores web.

Navegabilidad: Facilita la navegación del usuario al proporcionar una página de inicio predeterminada.

Conclusión

HTML es fundamental para la creación de documentos web, proporcionando la estructura básica que se mejora
y estiliza con CSS y se dinamiza con JavaScript. Entender las reglas de nombramiento de archivos y la
importancia del archivo [Link] es esencial para el desarrollo de sitios web organizados y accesibles.

Conceptos Fundamentales de HTML

Etiquetas y Sintaxis de HTML

¿Qué son las Etiquetas de HTML?

Las etiquetas de HTML son comandos que indican al navegador cómo debe mostrar el contenido en la página
web. Cada etiqueta tiene un propósito específico y se escribe entre corchetes angulares (< >).

Sintaxis de HTML

La sintaxis básica de una etiqueta HTML incluye una etiqueta de apertura, contenido y una etiqueta de cierre:

Copiar

<etiqueta>Contenido</etiqueta>

<etiqueta>Contenido</etiqueta>

Por ejemplo:

Copiar

<p>Este es un párrafo.</p>

Etiquetas Auto-cerradas

Algunas etiquetas no tienen contenido y se cierran por sí mismas, como <img /> para imágenes y <br /> para
saltos de línea.

Estructura Básica de un Documento HTML

Un documento HTML típico tiene la siguiente estructura básica:

Descripción de la Estructura

<!DOCTYPE html>: Declara el tipo de documento y la versión de HTML.

<html>: La raíz del documento HTML.

<head>: Contiene metadatos y enlaces a recursos externos.

<body>: Contiene el contenido visible de la página web.

Elementos Esenciales de HTML

<head>
<head>

¿Qué es?

El elemento <head> contiene metadatos sobre el documento HTML, como el título, enlaces a hojas de estilo,
scripts y metaetiquetas.

Contenido Común

<title>: Define el título de la página que aparece en la pestaña del navegador.

<meta>: Proporciona metadatos como la codificación de caracteres y la configuración de la vista.

<title>

¿Qué es?

La etiqueta <title> establece el título del documento que se muestra en la barra de título del navegador o en la
pestaña.

Importancia

SEO: Ayuda a los motores de búsqueda a entender el contenido de la página.

Usabilidad: Facilita la identificación de la página por parte del usuario.

<meta>

¿Qué es?

Las etiquetas <meta> proporcionan metadatos adicionales sobre el documento HTML. No son visibles para los
usuarios, pero son importantes para los motores de búsqueda y la configuración del navegador.

Atributos Comunes

charset: Define la codificación de caracteres del documento

<meta charset="UTF-8">

name y content: Proporcionan información como la descripción de la página y las palabras clave.

<meta name="description" content="Descripción de la página web">

<meta name="keywords" content="HTML, CSS, JavaScript">

<body>

¿Qué es?

El elemento <body> contiene todo el contenido visible de la página web, como textos, imágenes, videos,
enlaces y formularios.

Importancia

Contenido Principal: Todo lo que se muestra al usuario en la página web se encuentra dentro de <body>.

Interactividad: Elementos interactivos como botones y formularios se colocan en esta sección.

Conclusión

Comprender los conceptos fundamentales de HTML es esencial para el desarrollo web. Las etiquetas y la
sintaxis de HTML proporcionan la estructura básica del documento, mientras que los elementos esenciales
como <head>, <title>, <meta> y <body> definen la organización y el contenido de la página web. Estos
conocimientos son la base para crear sitios web bien estructurados y accesibles.

2.6. Profundizando en HTML

Elementos de Bloque y de Línea en HTML

En HTML, los elementos se clasifican en dos tipos principales: elementos de bloque y elementos en línea. Esta
clasificación determina cómo se comportan los elementos en la página web y cómo se organizan dentro del
documento.

Elementos de Bloque

¿Qué son?

Los elementos de bloque ocupan todo el ancho disponible de su contenedor y siempre comienzan en una nueva
línea. Estos elementos se utilizan para estructurar y dividir el contenido en secciones lógicas.

Ejemplos Comunes

<p>: Representa un párrafo de texto.

<h1> a <h6>: Representan los diferentes niveles de encabezados.

<div>: Un contenedor genérico para agrupar otros elementos.

<section>: Define una sección en el documento.

<article>: Representa contenido autónomo.

<header>: Define un encabezado para un documento o sección.

<footer>: Define un pie de página para un documento o sección.

Uso Dentro del <body>

Los elementos de bloque se utilizan para organizar y estructurar el contenido de manera clara y lógica. Por
ejemplo:

<body>

<header>

<h1>Título Principal</h1>

</header>

<section>

<h2>Subtítulo</h2>

<p>Este es un párrafo dentro de una sección.</p>

</section>

<footer>

<p>Pie de página del documento.</p>

</footer>
</body>

Elementos en Línea

¿Qué son?

Los elementos en línea (inline) no inician una nueva línea y solo ocupan el espacio necesario para el contenido.
Se utilizan principalmente para estilizar partes específicas del contenido dentro de un bloque.

Ejemplos Comunes

<a>: Representa un hipervínculo.

<span>: Un contenedor genérico para estilizar partes del texto.

<strong>: Representa texto de importancia fuerte, generalmente mostrado en negrita.

<em>: Representa texto enfatizado, generalmente mostrado en cursiva.

<img>: Representa una imagen.

<br>: Inserta un salto de línea.

Uso Dentro del <body>

Los elementos en línea se utilizan dentro de los elementos de bloque para aplicar estilos específicos o insertar
contenido inline. Por ejemplo:

<body>

<p>Este es un párrafo con un <a href="#">enlace</a> y algo de <strong>texto en negrita</strong>.</p>

<p>Otro párrafo con una <em>énfasis</em> en una palabra.</p>

<p>Imagen en línea: <img src="[Link]" alt="Descripción de la imagen"></p>

</body>

Jerarquía de Encabezados

¿Qué son los Encabezados?

Los encabezados (<h1> a <h6>) se utilizan para definir títulos y subtítulos en el contenido. Representan
diferentes niveles de importancia, siendo <h1> el nivel más alto y <h6> el más bajo.

Una regla que tiene el <h1> es que se debe tener uno solo por página, ya que es una buena práctica por un
tema del SEO y de accesibilidad.

Importancia de la Jerarquía

Accesibilidad: Ayuda a los usuarios con lectores de pantalla a navegar por el contenido de manera efectiva.

SEO: Los motores de búsqueda utilizan la jerarquía de los encabezados para indexar y entender la
estructura del contenido.

Organización: Facilita la lectura y comprensión del contenido al proporcionar una estructura lógica.

Ejemplo de Uso Correcto

Mantener una jerarquía lógica de encabezados es crucial:

<body>

<h1>Título Principal</h1>

<h2>Subtítulo de la Sección</h2>

<p>Contenido de la sección...</p>

<h3>Subsección</h3>

<p>Contenido de la subsección...</p>

<h2>Otro Subtítulo de Sección</h2>

<p>Más contenido...</p>

</body>

Conclusión

Distinguir entre elementos de bloque y en línea en HTML es fundamental para estructurar y estilizar
adecuadamente el contenido web. Mantener una jerarquía lógica de encabezados mejora la accesibilidad y el
SEO del sitio, además de facilitar la comprensión del contenido para los usuarios.

Conociendo a fondo HTML: Enlaces y Multimedia

En este video, aprenderemos cómo crear enlaces en HTML, incluyendo enlaces absolutos, relativos e internos.
También cubriremos cómo insertar imágenes, videos y audios en un documento HTML utilizando las etiquetas
correspondientes. Mostraremos ejemplos en pantalla para cada tipo de enlace y contenido multimedia.

(video)

Esperamos que este video te haya ayudado a entender mejor cómo crear enlaces y agregar contenido
multimedia en HTML. Practica estos conceptos para mejorar tus habilidades y enriquecer tus páginas web.

Target Blank

target="_blank", hace que se abra en una nueva pestaña o ventana cuando se hace clic en él. Esto puede ser
útil para mantener la página principal abierta mientras se consulta o envía un correo electrónico.

2.7. Listas, tablas, formularios y buenas prácticas en HTML

Listas y tablas

En este video, aprenderemos cómo crear listas y tablas en HTML. Cubriremos las listas ordenadas y no
ordenadas, cómo anidar listas, y cómo crear tablas para organizar datos de manera efectiva. Mostraremos
ejemplos en pantalla para ilustrar cada concepto.

(video)

Esperamos que este video te haya ayudado a entender mejor cómo crear listas y tablas en HTML. Practica
estos conceptos para mejorar tus habilidades y organizar tu contenido de manera efectiva en tus páginas web.

Formularios

En este video, aprenderemos cómo crear formularios en HTML utilizando las etiquetas <form>, <input>,
<textarea>, y <select>. También explicaremos los atributos necesarios para los formularios y mostraremos
ejemplos de diferentes tipos de controles de formulario, como cajas de texto, botones de radio, casillas de
verificación y menús desplegables.

(video)

Esperamos que este video te haya ayudado a entender mejor cómo crear formularios en HTML. Practica estos
conceptos para mejorar tus habilidades y crear formularios efectivos y funcionales en tus páginas web.

Recomendaciones y Buenas Prácticas para el Desarrollo de Sitios Web con HTML

El desarrollo de sitios web utilizando HTML implica más que solo conocer la sintaxis y los elementos. Adoptar
buenas prácticas es esencial para crear sitios web eficientes, mantenibles y accesibles. A continuación, se
presentan algunas recomendaciones clave.

Creación de una Estructura Lógica

Organización del Contenido

Usa Elementos Semánticos: Utiliza etiquetas HTML5 semánticas como <header>, <nav>, <article>,
<section>, <footer> para estructurar tu contenido de manera lógica y significativa.

Jerarquía de Encabezados: Mantén una jerarquía clara de encabezados (<h1> a <h6>) para organizar el
contenido y facilitar la navegación tanto para los usuarios como para los motores de búsqueda.

Ejemplo

<!DOCTYPE html>

<html lang="es">

<head>

<meta charset="UTF-8">

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

<title>Título del Sitio Web</title>

</head>

<body>

<header>

<h1>Título Principal</h1>

<nav>

<ul>

<li><a href="#">Inicio</a></li>

<li><a href="#">Sobre Nosotros</a></li>

<li><a href="#">Contacto</a></li>

</ul>

</nav>

</header>

<main>

<section>
 <h2>Sección Principal</h2>

<p>Contenido de la sección principal.</p>

</section>

<article>

<h2>Artículo Relevante</h2>

<p>Contenido del artículo.</p>

</article>

</main>

<footer>

<p>© 2024 Mi Sitio Web</p>

</footer>

</body>

</html>

Uso de Comentarios

¿Por Qué Usar Comentarios?

Documentación: Facilitan la comprensión del código, tanto para ti como para otros desarrolladores que
puedan trabajar en el proyecto en el futuro.

Depuración: Ayudan a identificar secciones del código durante el proceso de depuración.

Sintaxis de Comentarios

<!-- Este es un comentario en HTML --> <p>Contenido visible en la página web.</p> <!-- Fin de la sección
principal -->

Buenas Prácticas

Comentarios Claros y Concisos: Escribe comentarios que sean claros y directos al punto.

No Comentar en Exceso: Evita agregar comentarios innecesarios que puedan sobrecargar el código.

Adherencia a las Convenciones de Nombrado

Convenciones de Nombrado de Archivos

Descriptivos y Significativos: Los nombres de archivo deben ser descriptivos y reflejar el contenido del
archivo.

Uso de Minúsculas: Utiliza minúsculas para evitar problemas de compatibilidad en servidores sensibles a
mayúsculas y minúsculas.

Evitar Espacios: En lugar de espacios, usa guiones (``) o guiones bajos (_).

Ejemplos de Buenas Prácticas

[Link]
 [Link]

[Link]

[Link]

Convenciones de Nombrado de Clases e IDs

Descriptivos: Usa nombres que describan claramente el propósito del elemento.

Estilo CamelCase o Guiones: Sigue un estilo consistente, como nombreDeClase o nombre-de-clase.

Ejemplo

<!DOCTYPE html>

<html lang="es">

<head>

<meta charset="UTF-8">

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

<title>Página de Ejemplo</title>

</head>

<body>

<header id="header-principal">

<h1 class="titulo-principal">Bienvenido a Mi Sitio Web</h1>

</header>

<section id="contenido-principal">

<h2 class="subtitulo">Introducción</h2>

<p>Este es un párrafo de introducción.</p>

</section>

</body>

</html>

Conclusión

Seguir estas recomendaciones y buenas prácticas en el desarrollo de sitios web con HTML ayudará a crear
sitios bien estructurados, fáciles de mantener y accesibles. La organización lógica, el uso adecuado de
comentarios y la adherencia a las convenciones de nombrado son fundamentales para el desarrollo web
profesional y efectivo

2.9. Actividad práctica

Prototipado y conceptos básicos de HTML

Prototipado y conceptos básicos de HTML

Generar el wireframe correspondiente a una vista para desktop y una vista mobile, de tu sitio web, en Moqups.

Primeros pasos con HTML

Crear el menú de navegación y 5 archivos HTML para cada sección del sitio web, aplica entre estos los
enlaces relativos y escribe con etiquetas semánticas. Deberás incluir:

Una lista no ordenada con el menú principal del sitio web con los nombres de cada una de las secciones y
replicarlo en las mismas.

Un formulario en la página de contacto.

Un footer y replicarlo en todos tus HTML.

Etiquetas multimedia como img e iframes.

Recuerda respetar el diseño que generaste en el Wireframe de la actividad anterior