Guía 02

DAWM / Proyecto01

Actividades previas

Diseño

• Decide el contenido de su CV, puede considerar la recomendación de ChatGPT o la recomendación de Bard.
• Diseña la estructura del contenido de su CV, p.e.: el orden de las secciones, título de cada sección, uso de listas numeradas o listas no numeradas de elementos, etc.

Github

• Crea un repositorio en GitHub con el nombre curriculum.

Actividades en clases

1. Clona localmente tu repositorio curriculum.
2. Dentro del directorio de tu proyecto, crea el documento HTML: index.html
3. Utiliza VSCode para editar el documento index.html, con:
   • La estructura general sugerida por Bard.

   Mínimo: agrega la etiqueta <title> con su contenido; y las etiquetas <meta> con los nombres keywords, description y author.

• La estructura semántica sugerida por Bard.

  Mínimo: agrega dentro de la etiqueta body 1 etiqueta <header>, 4 etiquetas <section>, 1 etiqueta <nav> y 1 etiqueta <footer>.

1. (STOP 1) Compruebe el resultado en el navegador.

2. Versiona local y remotamente el repositorio curriculum.
3. Utilice la respuesta de Bard para desplegar el sitio del repositorio curriculum utilizando GitHub Pages.

Documentación

• Estándar de HTML en HTML Living Standard de la W3C, Mozilla Developer Network o Cheat sheet.

  • Soporte de los grupos de etiquetas de hipertexto en su navegador, en HTML5 Test.
  • Soporte de cada etiqueta en diversos navegadores por versión, en Can I Use.
  • Verificación en el anidamiento de etiquetas, en Can I Include.

Fundamental

• ¿Cómo funciona la web? en Mozilla Developer Network - MDN

• SEO (Search Engine Optimization) en X

Semantic HTML elements play a crucial role in improving website SEO and its accessibility.

Replacing non-semantic elements makes code more readable and maintainable.

HTML Semantic Elements:
→ Carry inherent meanings;
→ Make web content more Structured;
→ More Meaningful.… pic.twitter.com/O18NI5L8XD

— Deepanshu Sharma (@deepanshusharmx) September 30, 2023

Términos

HTML, hipertexto, VSCode, etiquetas, W3C, estándar, estructura general, estructura semántica, meta, title, link

Referencias

• HTML Standard. (2023). Retrieved 15 May 2023, from https://html.spec.whatwg.org/multipage/
• HTML: Lenguaje de etiquetas de hipertexto MDN. (2021). Retrieved 18 May 2022, from https://developer.mozilla.org/es/docs/Web/HTML
• HTML5. Ejemplo de estructura global para página web con HTML5. (2022). Retrieved 18 May 2022, from http://www.edu4java.com/es/web/html5-estructura-global.html
• Conceptos básicos de HTML - Aprende sobre desarrollo web MDN. (2020). Retrieved 18 May 2022, from https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/HTML_basics
• Todos los ELEMENTOS SEMÁNTICOS de HTML. (2022). Retrieved 18 May 2022, from https://www.kikopalomares.com/blog/todos-los-elementos-semanticos-de-html
• HTML, E. (2022). Etiquetas HTML - Acerca de HTML. Retrieved 18 May 2022, from https://acercadehtml.com/etiquetas-html.html