En este curso gratuito, los participantes explorarán cómo diseñar páginas web de manera avanzada.¹ Hay lecciones sobre los inicios de la Web y cómo construir páginas efectivas con HTML5.¹ Al culminar, recibirán una Insignia Digital. Podrán mostrarla en sus perfiles para exhibir sus logros.

Aspectos Clave

• Introducción al desarrollo web y sus roles
• Fundamentos de HTML, CSS y JavaScript
• Creación de contenido web con etiquetas y estructuras
• Diseño responsivo y accesibilidad web
• Integración de multimedia e interactividad

Introducción al Desarrollo Web

El desarrollo web implica crear y mantener sitios y aplicaciones web². En la actualidad, es esencial para que empresas y organizaciones estén en internet. Permite ofrecer productos y servicios online². Los desarrolladores pueden ser front-end, back-end o full stack. Cada uno aporta de forma única en la creación de web apps interactivas y atractivas.

Definición de Desarrollo Web

Desarrollo web es el proceso de hacer y cuidar páginas y aplicaciones en la red. Incluye planificar, diseñar, codificar, poner en marcha y mantener sitios o apps². Los profesionales usan lenguajes y tecnologías como HTML, CSS y JavaScript. Así, mejoran el aspecto y el funcionamiento de lo que crean.

Importancia del Desarrollo Web

En la actualidad, tener un buen desarrollo web es clave para las empresas. Ayuda a ser vistos en línea y a vender productos o servicios por internet². Un sitio bien hecho puede destacar una marca, aumentar sus ventas y mejorar la experiencia del usuario. Además, mantiene a las empresas al día con los avances tecnológicos y las necesidades de sus clientes.

Roles en el Desarrollo Web

Dentro del desarrollo web, hay varios roles importantes:

• Desarrollador front-end: Se enfoca en la parte visible de una web o app. Usa HTML, CSS y JavaScript.
• Desarrollador back-end: Trabaja en la «parte de atrás», con la lógica del servidor y las bases de datos. Usa lenguajes como PHP, Python o Ruby.
• Desarrollador full stack: Es un experto en ambos mundos, puede hacer sitios y apps desde cero.

Cada rol es crucial para hacer webs y aplicaciones interactivas y eficaces².

Conceptos Básicos de HTML

HTML (Lenguaje de Marcado de Hipertexto) es el lenguaje estándar para crear páginas web.³ Este lenguaje ha avanzado desde los años 90 hasta hoy. La versión más usada es HTML5.⁴

Historia de HTML

HTML empezó en los 90, creado por Tim Berners-Lee. Él quería compartir datos por la Web.⁴ Desde entonces, ha mejorado mucho. HTML5 es la versión más nueva y popular entre los desarrolladores.

Estructura Básica de un Documento HTML

Un documento HTML tiene elementos como e . Usamos estas partes para dar forma a la página.³ Cada elemento debe ser colocado correctamente para no tener problemas al ver la página.³

Hay partes especiales en HTML, como . Un documento también necesita características importantes como y . Los títulos van desde

hasta

. Para texto normal, usamos

.3

En conclusión, HTML tiene una larga historia y una estructura básica clara. Con estos fundamentos, podemos hacer y entender páginas web.

Creando Contenido con HTML

HTML cuenta con muchas etiquetas y herramientas. Nos ayudan a crear y estructurar contenidos web. Mejoran cómo los usuarios exploran las páginas y hacen el sitio más accesible. Estas etiquetas son esenciales para destacar el desarrollo web, programación web y codificación front-end.

Etiquetas de Texto y Párrafos

Las etiquetas <h1>, <h2>, <h3>, <p> y <em> estructuran el contenido. Nos permiten hacer títulos, subtítulos y poner énfasis en lo que queremos resaltar. Todo para que la información se vea clara y sea fácil de entender por los usuarios.⁵

Tablas HTML

Listas HTML

Podemos crear diferentes listas con HTML. Las listas ordenadas (<ol>) y las listas desordenadas (<ul>) son las principales. Ayudan a estructurar la información de forma ordenada. Esto hace más fácil la navegación y uso del sitio para todos.⁵

1. Listas ordenadas
2. Listas desordenadas
3. Listas anidadas

«Las etiquetas de HTML, como las de texto, tablas y listas, son herramientas poderosas para crear contenido web estructurado y accesible.»

Tutoriales de Desarrollo Web: HTML, CSS y JavaScript

Este curso te enseñará a usar HTML, CSS y JavaScript.⁶ Aprenderás a crear páginas web desde el principio. También sabrás cómo ponerles estilo e interactuar con ellas. Así, te convertirás en un desarrollador front-end experto.⁶

Empezarás por aprender lo básico: HTML y CSS.⁶ Luego, si te interesa codificar, pasaremos al JavaScript.⁶ Te motivaremos a explorar temas avanzados como los formularios web o la accesibilidad.⁶

Cuando domines los conceptos iniciales, es hora de adentrarte en las herramientas para el lado del servidor.⁶ Aprenderemos interactuando con ejemplos de GitHub.⁶ Además, te daremos recursos extra para que sigas mejorando, como cursos interactivos y videos.⁶

Este curso sobre desarrollo web ya tiene 145,440 estudiantes inscritos.⁷ Dura alrededor de 12 horas. Está dividido en 5 módulos.⁷ Incluye 25 videos y 4 cuestionarios.⁷ Además, tiene prácticas para que crees y diseñes páginas web.⁷ Upkar Lidder es el instructor y publica 9 videos más una lectura.⁷

Con JavaScript, podrás hacer páginas web dinámicas.⁷ Crearás un portafolio para un cliente imaginario al final.⁷

Diseño Web con CSS

CSS es un lenguaje clave para dar estilo a las páginas web⁸. Nos deja cambiar colores, fuentes y diseño. Así hacemos que las páginas se vean mejor y la gente disfrute más al navegar⁸. Los selectores y el modelo de cajas son conceptos esenciales en CSS. Ayudan a los diseñadores a darle forma y estilo a los sitios web.

Introducción a CSS

CSS trabaja con HTML para darle estilo a los sitios⁸. Con CSS, los expertos pueden decidir colores, tipografía y más. Es útil porque separa el look de la web (CSS) de su estructura (HTML). Esto hace que sea fácil de cambiar y mejorar.

Selectores CSS

Los selectores CSS ayudan a elegir qué cambiar en una página⁸. Pueden ser selectores básicos, por clase, ID u otros atributos. Usar los selectores bien es la base para un buen diseño web que sea fácil de mantener.

Modelo de Cajas CSS

El modelo de cajas explica cómo funcionan y se ven los elementos en una web⁸. Todo elemento en HTML es como una «caja» con su tamaño y relleno⁸. Entender esto es vital para crear un diseño web que se ajuste bien a todas las pantallas.

Interactividad con JavaScript

JavaScript es clave para añadir interactividad a las páginas web⁹. Los desarrolladores lo usan para cambiar el contenido y reaccionar a las acciones del usuario⁹. Así, las páginas se vuelven más interesantes y fáciles de usar.

Fundamentos de JavaScript

Se basa en ideas como variables, funciones, y condicionales⁴. Estas permiten crear desde efectos visuales simples hasta aplicaciones web avanzadas⁴. Por eso, es esencial para quienes crean la parte visual de un sitio.

Manipulación del DOM

JavaScript destaca en cambiar el DOM de una página⁹. Los cambios ocurren en tiempo real, lo que hace las páginas más activas y personalizadas⁹. Gracias a esto, se añaden efectos visuales, responden a acciones del usuario, y se actualiza información en la pantalla directamente.

Eventos y Manejo de Interacciones

Asimismo, controla cómo interactuamos con las webs⁴. Al estar pendiente de clics, movimientos y entradas, se crean experiencias amenas y que responden bien⁴. De esta forma, el usuario puede navegar el sitio de manera sencilla y efectiva.

Formularios Web

Los formularios web son vitales en internet. Te permiten enviar información a un sitio.¹⁰ En el mundo del desarrollo web, son clave para que tu sitio funcione con el usuario.¹⁰ Al hacer formularios, piensa en la experiencia del usuario. Así evitarás problemas y atraerás más visitantes.¹⁰

Elementos de Formulario

En HTML, encuentras muchos elementos de formulario. Por ejemplo, campos para texto, botones y más.¹¹ Los campos de texto aceptan escritura alfanumérica y pueden verse de distintas formas.¹¹ Los campos ocultos guardan información secreta. Así no tienes que escribirla otra vez.¹¹ Los botones hacen acciones específicas al presionarse, como enviar o borrar información.¹¹ Las casillas de verificación te permiten elegir entre varias opciones.¹¹ Los botones de opción te obligan a escoger solo una de las opciones presentes.¹¹ Las listas muestran opciones de forma ordenada para que elijas una o más.¹¹ Y los menús ayudan a ir a otras partes del sitio con solo un clic.¹¹ Finalmente, hay campos para subir archivos y mostrar imágenes directamente en el formulario.¹¹

Validación de Formularios

¹⁰ Es importante reflexionar sobre cuántos campos tiene tu formulario para no alejar a los usuarios.¹⁰ El diseño de los formularios es crucial. Podemos aprender más sobre esto en sitios como Smashing Magazine y UXMatters.¹⁰ El JavaScript también es útil. Ayuda a validar los formularios y mejora la experiencia de uso.

¹² El elemento esencial para crear formularios y definir cómo se comportan.¹² No debes poner un formulario dentro de otro, está mal.¹² Usar

hace que los formularios sean más fáciles de entender al agrupar temas similares.¹² Conectar correctamente con los controles ayuda a los usuarios con lectores de pantalla.¹² Puedes conectar a los controles de dos maneras.¹² Hacer clic sobre la etiqueta puede servir para activar su control.¹² Colocar un por cada control es muy importante en un formulario.¹² Cómo etiquetas los controles necesarios varía dependiendo de qué tan bien los lectores de pantalla los entiendan.

¹¹ Dreamweaver se ha actualizado para ayudarte a crear mejores formularios con HTML5.¹¹ También, ofrece formas de guardar diferentes tipos de páginas para mejorar tu trabajo.¹¹ Es esencial usar conexiones seguras cuando recolectas información privada. Así proteges a los usuarios.

Multimedia en la Web

Integrar fotos, música y videos en una página web es clave para hacerla interesante.¹³ Alrededor del año 2000, la velocidad de internet mejoró. Esto permitió ver videos en la red sin problemas.¹³ Pero, en aquel entonces, las tecnologías web no lo facilitaban, así que nacieron plataformas como Flash y Silverlight. Estas ayudaron a poner multimedia en los sitios.¹³

Insertar Imágenes

HTML ha evolucionado y ahora es más fácil poner medios en una página.¹⁴ Gracias a estándares abiertos, como los que promueven empresas y diseñadores con licencias como Creative Commons,¹⁴ es más simple usar fotos en internet.

Audio y Video HTML5

HTML5 trajo consigo formas nuevas de mostrar video y reproducir música en la web.¹³ Pero, hay que recordar que no todos los navegadores entienden los mismos tipos de archivo. Para asegurarse de que un video funcione bien en cualquier lugar, los creadores tienen que añadir varias versiones del mismo. Esto se hace con una etiqueta .¹³ También hay opciones para decidir si el video se escucha solo o en bucle, o si empieza a reproducirse en cuanto se carga la página.

A la hora de subir un video a internet, es crucial comprimirlo. Se usan distintos formatos para hacerlo, como Vorbis y H.264.¹³ Pero, hay reglas de patente que dificultan las cosas, por ejemplo, con los archivos MP3 y H.264. Por eso, es necesario preparar los videos de cierta manera para que se vean y oigan sin problemas en todos los navegadores.¹³

Enlaces de origen

1. https://www.abacus.coop/es/curso-de-desarrollo-web.-html-css-y-javascript-9788441544147/1367140.24.html
2. https://www.amazon.es/Curso-desarrollo-Web-JavaScript-Edición/dp/844154414X
3. https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/HTML_basics
4. https://anayamultimedia.es/primer_capitulo/curso-de-desarrollo-web-html-css-y-javascript-edicion-2021.pdf
5. https://www.hostinger.es/tutoriales/como-hacer-una-pagina-web-en-html
6. https://developer.mozilla.org/es/docs/Learn
7. https://www.coursera.org/learn/introduction-to-web-development-with-html-css-javacript
8. https://developer.mozilla.org/es/docs/Learn/CSS/CSS_layout/Introduction
9. https://www.freecodecamp.org/espanol/news/practica-html-css-y-javascript-en-espanol-creando-7-proyectos/
10. https://developer.mozilla.org/es/docs/Learn/Forms/Your_first_form
11. https://helpx.adobe.com/la/dreamweaver/using/creating-web-forms.html
12. https://developer.mozilla.org/es/docs/Learn/Forms/How_to_structure_a_web_form
13. https://developer.mozilla.org/es/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
14. https://yari-demos.prod.mdn.mozit.cloud/es/docs/Web/Tutorials