¡Hola!
👋
Te damos la bienvenida al primer encuentro de nuestro curso. Hoy
comenzaremos presentándote el mundo del desarrollo web, para luego
adentrarnos en los conceptos básicos de HTML y comenzarás con el armado de
tu primera página web.
En el mundo digital y conectado de hoy, las habilidades en tecnología de la
información son más valiosas que nunca. Ya sea que busques una ventaja
competitiva en tu carrera, un cambio en tu trayectoria profesional o simplemente
una nueva habilidad para cultivar, nuestro curso es el punto de partida perfecto
para acceder a un mundo de oportunidades.
Queremos que sepas qué vas a aprender en este curso para que puedas saber
qué esperar. A continuación, te mostramos los objetivos que vamos a cubrir:
¿Qué es el desarrollo web?
El desarrollo web es una disciplina que se ha vuelto indispensable en la era
digital en la que vivimos. Consiste en la creación y el mantenimiento de páginas
y aplicaciones web a los que se puede acceder a través de internet.
Su objetivo principal es proporcionar al usuario una experiencia fluida y atractiva
al interactuar con la página web o aplicación. Para lograr esto, es necesario
contar con una amplia gama de habilidades técnicas y creativas para poder
crear la estructura, diseño y funcionalidad de la misma.
Lo anterior implica una combinación de diseño gráfico, programación,
arquitectura de información, análisis de datos y optimización de motores de
búsqueda, entre otras habilidades.
El desarrollo web se divide en dos categorías principales: desarrollo front-end
(lado del cliente) y desarrollo back-end (lado del servidor).
● El desarrollo front-end se refiere a la creación de la parte visual y
funcional del sitio web o aplicación que los usuarios pueden ver y con la
que pueden interactuar. Esto incluye la disposición de elementos visuales,
la programación de botones y otros elementos interactivos, y la
optimización del rendimiento para que los tiempos de carga sean rápidos.
Los desarrolladores front-end también se encargan de garantizar que la
web sea compatible con diferentes navegadores y dispositivos móviles.
● El desarrollo back-end se ocupa de la funcionalidad del sitio web o
aplicación detrás de escena. Esto incluye la gestión de servidores, bases
de datos y otros aspectos técnicos que permiten que funcione
correctamente. Los desarrolladores back-end también se encargan de
garantizar la seguridad del sitio y la protección de la información del
usuario.
El desarrollo web es un campo emocionante y en constante evolución. Ya sea
que estés interesado en el desarrollo front-end o back-end, hay muchas
oportunidades sorprendentes disponibles para los desarrolladores web en todo el
mundo.
En este curso nos centraremos en la parte visual e interactiva del sitio web a la
que hacíamos referencia previamente: el desarrollo front-end.
Principios básicos del desarrollo web
Existen principios básicos del desarrollo web que son fundamentales para crear
sitios exitosos y atractivos. Estos principios incluyen la navegabilidad,
interactividad y arquitectura de la información.
Veamos de qué se trata cada uno de ellos:
● La navegabilidad se refiere a qué tan fácil es para los usuarios moverse y
encontrar información en un sitio web. Un diseño de navegación claro y
fácil de usar es esencial para que los usuarios puedan encontrar
rápidamente lo que están buscando y tengan una experiencia
satisfactoria.
● La interactividad es la capacidad de un sitio web para interactuar con los
usuarios y ofrecerles una experiencia dinámica y personalizada. Esto
puede incluir animaciones, formularios, comentarios en tiempo real y otros
elementos que permiten a los usuarios participar activamente en el sitio.
● La arquitectura de la información se refiere a cómo se organiza y
presenta la información en un sitio web. Esto incluye la estructuración de
contenidos, la categorización y el etiquetado de estos, y la creación de una
jerarquía lógica que facilite a los usuarios encontrar y entender la
información que necesitan.
Editores de código
Los editores de código son herramientas que permiten a los programadores
escribir y editar código de programación. Estas herramientas proporcionan
características como resaltado de sintaxis, autocompletado, atajos, sugerencias
de código y depuración para ayudar a los desarrolladores a escribir código de
manera más eficiente y efectiva.
En esta oportunidad te presentamos la herramienta que vamos a utilizar, y que
es el lugar donde vas a escribir en distintos lenguajes para crear tus proyectos
del curso:
👉 Visual Studio Code
(Haciendo clic en el link de arriba podrás descargarlo)
Puedes revisar uno de los siguientes tutoriales en función del sistema operativo
que tengas instalado en tu computadora:
● Windows →
✨ Cómo instalar el Visual Studio Code en Windows [Descarga Gratis]
● Mac → ✅ Como INSTALAR Visual Studio Code en Mac OS 🍏 Big Sur
● Linux → Cómo instalar Visual Studio Code en Ubuntu 22.04 LTS
Estructura del HTML
HTML (Hypertext Markup Language) es el lenguaje de marcado estándar utilizado
para crear la estructura de un sitio web. Consiste en una serie de elementos
representados por etiquetas, que le indican al navegador cómo mostrar el
contenido.
Ahora te mostraremos cómo se crea una estructura básica de HTML:
🎥 Estructura básica HTML | Introducción al Desarrollo Web & HTML | Egg
💡Te facilitamos el link de la página que mencionamos en el video sobre la
organización: “World Wide Web Consortium”.
Etiquetas
Es importante entender cómo funcionan las etiquetas HTML en términos de
apertura y cierre. La mayoría de las etiquetas HTML tienen una etiqueta de
apertura y una de cierre, que definen el inicio y el final de un elemento. Estas
etiquetas ayudan al navegador a comprender la estructura y jerarquía del
contenido en la página.
La sintaxis para una etiqueta de apertura es el nombre de la etiqueta rodeado de
paréntesis angulares, como <etiqueta>. La etiqueta de cierre tiene una sintaxis
similar, pero con una barra inclinada hacia adelante antes del nombre de la
etiqueta: </etiqueta>. El contenido encerrado entre las etiquetas de apertura y
cierre es el contenido del elemento.
Aquí hay algunos ejemplos de elementos HTML con etiquetas de apertura y cierre:
● Encabezados: Hay seis niveles de encabezados, desde <h1> (el más
grande) hasta <h6> (el más pequeño).
<h1>Encabezado 1</h1>
<h2>Encabezado 2</h2>
…
<h6>Encabezado 6</h6>
● Párrafo:
<p>Este es un párrafo.</p>
● Lista sin numerar:
<ul>
<li>Elemento de lista 1</li>
<li>Elemento de lista 2</li>
</ul>
Algunas etiquetas HTML se cierran automáticamente, lo que significa que no
requieren una etiqueta de cierre separada. En su lugar, se cierran dentro de la
misma etiqueta, a menudo porque no tienen contenido que encerrar. Ejemplos
de etiquetas de cierre automático incluyen:
● Salto de línea:
<br />
● Imagen:
<img src="imagen.jpg" alt="Una imagen de ejemplo" />
● Entrada:
<input type="text" name="ejemplo" />
💡 Es esencial asegurarse de que sus etiquetas estén correctamente abiertas y
cerradas para evitar errores o representaciones inesperadas en tu página web.
Mapa de conceptos
Material complementario
1. Tipos de etiquetas HTML
2. Checklist de buenas prácticas
