Conocer la estructura técnica de tu propio sitio web es el puente que conecta al equipo de marketing con el equipo de IT. Después de comprender etiquetas, el DOM y las bases de HTML, CSS y JavaScript, llega el momento de aplicar todo ese conocimiento en un proyecto práctico que servirá como fundamento para las decisiones de medición y estrategia digital que vendrán más adelante.
¿Cómo está diseñado el proyecto y por qué deberías completarlo?
El proyecto se divide en dos pestañas principales: primeros pasos y checklist [0:22]. En la primera pestaña encontrarás tres bloques donde documentarás lo aprendido:
- Estructura de una página web.
- Exploración de una página web.
- Etiquetas básicas de HTML.
La idea central es que uses tu propio sitio web como caso de estudio. No se trata de un ejercicio teórico, sino de revisar cómo está construido tu HTML, qué estilos define tu CSS y qué funciones de JavaScript están activas en tu sitio [0:42].
¿Qué deberías explorar dentro del DOM de tu sitio?
El DOM (Document Object Model) es la representación estructurada de todos los elementos de tu página. El ejercicio consiste en abrir las herramientas de desarrollo del navegador e inspeccionar dos secciones fundamentales: el head y el body [0:55].
Dentro del head, busca cuál es el title de tu página y pregúntate si puedes cambiarlo. Dentro del body, identifica cuál es el primer heading que aparece. Estos detalles parecen simples, pero revelan cómo los motores de búsqueda y las plataformas de analítica interpretan tu contenido.
Otro ejercicio recomendado es explorar el objeto window desde la consola del navegador [1:10]. Para hacerlo:
- Abre cualquier página y presiona
Ctrl + Shift + I.
- Ve a la pestaña Console.
- Escribe
window y presiona Enter.
Todas las páginas web tienen este objeto y al expandirlo podrás ver propiedades, métodos y datos que el navegador maneja internamente. Es una forma práctica de entender qué información está disponible a nivel de código.
¿Por qué es importante documentar las etiquetas HTML de tu sitio?
En el bloque de etiquetas básicas de HTML, el objetivo es listar todas las etiquetas que encuentres en tu sitio web [1:30]. Las que se revisaron en clases anteriores seguramente aparecerán, pero si detectas etiquetas adicionales que cumplan una función relevante, también deberías registrarlas.
Esta documentación no es un ejercicio aislado. Toda la información que registres en las tres cajas del proyecto alimentará la checklist que se trabajará hacia el final del curso [1:50]. Esa checklist será clave para decidir qué medir y qué no medir en tu estrategia de marketing basado en datos.
¿Qué viene después de entender HTML para marketing?
Con este proyecto se cierra la sección de HTML orientada a marketing [2:05]. Las próximas clases incorporarán herramientas que transforman ese conocimiento técnico en capacidad de medición real:
- Google Tag Manager: aprenderás a incorporarlo a tu sitio paso a paso.
- Google Analytics: para medir el comportamiento de los usuarios.
- Google Ads y Facebook Ads Manager: para conectar campañas publicitarias con datos de tu sitio.
Estas plataformas de terceros se instalan precisamente dentro de las estructuras HTML que ya conoces, por eso era fundamental entender primero cómo funciona tu sitio por dentro.
Compartir tus avances en el foro no solo refuerza tu aprendizaje, también te permite recibir retroalimentación de otros estudiantes que están trabajando en sus propios sitios. ¿Ya revisaste el DOM de tu página? Cuéntanos qué encontraste.
