HERRAMIENTAS
INFORMÁTICAS
PARA EL
MARKETING
DIGITAL
Sara Balderas Díaz
Dpto. de Ingeniería Informática
UNIVERSIDAD DE CÁDIZ
Máster Universitario en Dirección de Marketing
Digital y Social
Estructura
jerárquica de
HTML
https://www.w3schools.com/
Abrimos: https://playcode.io/html
Otras posibles alternativas: https://codepen.io/, https://jsfiddle.net/, o https://glitch.com/
● Etiquetas
● Extensión de archivos .html o .htm
● El archivo principal se suele llamar index.html
EXAMPLE
HTML - <!DOCTYPE html>
Ejemplo <html>
<head>
básico <title>Título de la página (que no se ve, se ve cuando
se inspecciona dicha página y en la pestaña)</title>
</head>
<body>
<h1>Cabecera (que sí se ve)</h1>
<p>Párrafo (texto que sí se ve)</p>
</body>
</html>
Etiquetas meta:
● Codificación de caracteres: <meta charset="utf-8"/>
● Descripción: <meta name="description" content=”Descripción aquí”/>
● Palabras clave: <meta name="keywords" content="palabra clave 1, palabra clave 2, palabra clave 3"/>
● Autoría y copyright: <meta name="author" content="Nombre del autor" />
● Búsquedas e indexación: <meta name="robots" content="index, follow"/>
○ Instrucción para los bots de los motores de búsqueda que visitan nuestra página web periódicamente
HTML - (rastreo). Después del rastreo, deciden si el contenido (p. ej., palabras clave, calidad del contenido,
velocidad de carga) es relevante y lo añaden al índice del motor de búsqueda.
Etiquetas ○ Páginas que deben ser indexadas: páginas principales del sitio (home, categorías, productos,
meta artículos, etc.), contenido que queramos que aparezca en los resultados de búsqueda, páginas con
enlaces internos o externos que queremos que los bots sigan.
○ Si no queremos indexar una página, por ejemplo, versión antigua, página de prueba, contenido
restringido ponemos: <meta name="robots" content="noindex, nofollow"/>
● Desactivar caché: <meta http-equiv="cache-control" content="no-cache"/>
● Responsive: <meta name="viewport" content="width=device-width, initial-scale=1">
○ initial-scale: Limita el zoom máximo que el usuario puede hacer.
● Hipervínculo (enlace): <a>
● Heading (encabezados) <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
● Texto en negrita: <b>
● Salto de línea: <br>
● Botón: <button>
● Sección de un documento: <div>
● Espacio para auto contener una imagen o elemento gráfico: <figure>
HTML - ● Lista ordenada items numéricos: <li>
Etiquetas ●
●
Lista no ordenada: <ul>
Menú de navegación: <nav>
● Imagen: <img>
● Vídeo: <video>
Todas estas etiquetas tienen apertura y cierre <etiqueta> </etiqueta>
Etiquetas disponibles en https://www.w3schools.com/tags/default.asp
Ejemplo: hipervínculo (enlace)
<a href="https://www.expedia.es/">Expedia</a>
Ejemplo: Texto en negrita
<p><b>Descubre los lugares imprescindibles que no debes perderte si
vienes a Andalucía ¡y disfruta del viaje!</b></p>
Ejemplo: botón
HTML - <button type="button">Haz click aquí!</button>
Ejemplos de Ejemplo: enlace con diseño de botón
elementos <a href="https://www.andalucia.org/es/inicio"><button type="button">Haz
click aquí!</button></a>
Ejemplo: imagen
<img src="images/PlayadeBolonia.jpg" alt="Playa de Bolonia">
Redimensionada
<img src="images/PlayadeBolonia.jpg" alt="Playa de Bolonia" width="500"
height="600">
Ejemplo: vídeo
<video width="320" height="240" controls>
<source src="videofile.mp4" type="video/mp4">
Tu navegador no admite el elemento
</video>
Ejemplo: vídeo de Youtube
<iframe width="560" height="315"
HTML - src="https://www.youtube.com/embed/safCS7NXKd0" title="YouTube
video player" frameborder="0" allow="accelerometer; autoplay;
Ejemplos de clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
elementos
Ejemplo: lista no ordenada
<ul>
<li>Bali, Indonesia</li>
<li>Londres, Reino Unido</li>
<li>Dubái, Emiratos Árabes</li>
<li>Roma, Italia</li>
<li>Cádiz, España</li>
</ul>
HTML - Ejemplo: menú de navegación
Ejemplos de <nav>
<ul>
elementos <li><a href="#">Inicio</a></li>
<li><a href="#">Sobre nosotros</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
Clases
● Es un atributo que apunta a una o más clases en una hoja de estilo.
● Se utiliza para definir estilos.
● En el estilo, empiezan por punto (.).
class
Clases e Identificadores
● Es un atributo para especificar un único identificador para un elemento HTML.
identificadores ● Este atributo apunta a una declaración de estilo específica en una hoja de
estilo.
● No puede haber más de un elemento con el mismo identificador.
● En el estilo, empiezan por almohadilla (#).
id
● background-color
● border
● border-color
● font-family
● font-size
height
HTML - ●
● margin
CSS ● padding
● text-align
● width
https://www.w3schools.com/cssref/index.php
https://www.htmlhelp.com/es/reference/css/properties.html
http://w3.unpocodetodo.info/css3/chuletacss3.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></scri
pt>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
></script>
HTML - </head>
<body>
Crear página <div class="container-fluid">
con Bootstrap <h1>Mi primera página con Bootstrap</h1>
<p>Un texto de ejemplo.</p>
</div>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="inicio.html">Inicio</a>
<a class="navbar-brand" href="#">Sobre nosotros</a>
<a class="navbar-brand" href="#">Contacto</a>
</div>
</nav>
</body> Ejemplo completo en el Campus Virtual
</html>
Proyecto/
├── index.html # Página principal (Inicio). Los servidores web (Apache, Nginx, etc. buscan
automáticamente un archivo llamado index.html en el directorio raíz para cargar un sitio web)
├── equipo.html # Página "Equipo"
├── contacto.html # Página "Contacto"
├── src/ # Carpeta para recursos del sitio
│ ├── css/ # Subcarpeta para estilos
│ │ └── style.css # Archivo principal de estilos
│ ├── js/ # Subcarpeta para scripts JavaScript
│ │ └── main.js # Archivo principal de scripts
│ ├── images/ # Subcarpeta para imágenes
Estructura de │ │ ├── logo.png # Logo de la empresa
│ │ ├── equipo1.jpg # Imagen del equipo
archivos de un │ │ └── fondo.jpg # Imagen de fondo
│ ├── videos/ # Subcarpeta para vídeos
proyecto │ │ └── presentacion.mp4 # Vídeo de presentación
│ ├── fonts/ # Subcarpeta para fuentes personalizadas
│ │ └── open-sans.ttf # Fuente Open Sans (si es necesaria)
│ ├── docs/ # Subcarpeta para documentos descargables
│ │ ├── brochure.pdf # Folleto informativo
│ │ └── informe.docx # Informe del equipo
│ └── icons/ # Subcarpeta para íconos
│ ├── facebook.png # Ícono de Facebook
│ ├── twitter.png # Ícono de Twitter
│ └── instagram.png # Ícono de Instagram
├── README.md # Archivo de documentación del proyecto
└── .gitignore # Configuración para Git (opcional)
● https://www.davidtheagency.com/
● https://lola-mullenlowe.com/work/
● https://www.cheil.com/es
● https://parnasocomunicacion.com/
Ejemplos de ● https://www.seonetdigital.com/es/
agencias de ● https://ladespensa.es/
● https://www.somoswaka.com/
marketing, ● https://www.materiagris.es/
publicidad e ● https://www.sidn.es/
● https://blackbeast.pro/
influencers ● https://inmanagement.agency/
profesionales ● https://neoattack.com/
Objetivos generales: diseñar y ejecutar estrategias creativas e innovadoras para
ayudar a las marcas a alcanzar sus objetivos de negocio. Entre sus principales
actividades se encuentran, por ejemplo, el desarrollo de campañas publicitarias
integrales, la gestión de redes sociales, la optimización en motores de búsqueda
(SEO), la planificación de publicidad digital (SEM), la creación de contenido
audiovisual y el diseño de identidad de marca.
https://www.artguru.ai/ https://www.fotor.com/ai-image-generator/
Herramientas
para generar
imágenes con
IA
Límite en el número de imágenes que te permite generar
