Primera sesión del Curso de Especialista en Marketing Digital de Enpresa Digitala impartido en Miramon el 25 de marzo de 2014 por Venan Llona (@vllona)

1. Curso Especialización en
Marketing Digital
Conceptos Iniciales
Miramón 25/03/2014
Venan Llona (@vllona)
venan@llona.net

2. Introducción
Internet está revolucionando el mundo del
Marketing Tradicional. Hoy en día ya nadie, en
el mundo empresarial, se plantea realizar
campañas de marketing sin tener en cuenta
este canal. Desde el paso más sencillo, como
es el de tener una página web, hasta poner un
nuevo canal de venta de productos o servicios,
pasando por la analítica web (identificar el perfil
de mis clientes) son múltiples los aspectos a
tener en cuenta.

4. Contenido (I)
● Si no estás en Internet, no existes.
○ Conceptos básicos:
■ Hardware Vs. Software.
■ Sistemas operativos Vs. Aplicaciones.
■ Software Libre Vs. Privativo.
■ Redes Vs. Computadores personales.
■ Arquitectura Cliente/Servidor y redes P2P.
■ Protocolos de comunicación.
■ Navegador Vs. Buscador.
■ Proveedores de Servicio: ISPs.
○ Presencia en Internet. Egosurfing.
■ Páginas web.
■ Servicios de directorio.
■ Redes sociales.

5. Contenido (II)
● Dominios.
● Hosting.
● DNS.
● Tipos de páginas web.
● CSS.
● HTML.
● JavaScript.
● Fuentes.
● Responsive Design.
● ...

6. Hardware Vs. Software
● En un comienzo, la informática estaba
basada en grandes computadoras basadas
en hardware, grandes máquinas a las que
se accedía mediante terminales “tontos”.
● Aparecen los “Personal Computers” que por
primera vez popularizan la informática y la
hacen accesible, pasamos de la era del
hardware a la del software.
● Cada PC tenía instalado en el software que
necesitaba en el propio ordenador.

7. Sistema Operativo Vs. Aplicación
● El sistema
operativo es el
conjunto de
programas que
permiten a un
ordenador
interactuar con el
hardware y servir a
los programas de
aplicación.

8. Sistemas Operativos de Escritorio
● Microsoft Windows.
● Apple Mac OS X.
● GNU/Linux.
● Google Chrome OS
● Canonical Ubuntu.

9. Sistemas Operativos Móviles
● Google Android.
● Apple iOS.
● BlackBerry.
● Symbian.
● Microsoft Windows.

10. Aplicaciones
● Programa
informático
diseñado como
herramienta para
permitir a un
usuario realizar uno
o diversos tipos de
trabajos.
● Contabilidad.
● Procesador de
textos.
● Hoja de cálculo.
● Base de datos.
● Diseño gráfico.
● Correo electrónico.
● Navegador web.

11. Pero ahora las Aplicaciones son
APPs web y APPs móviles
● Webmail.
● Wikis.
● Weblogs.
● Tienda on-line.
● Google Play.
● App Store.
● Windows
Phone Store.
● BlackBerry.
● Amazon AppStore.

12. Software Libre Vs Propietario

13. Software Libre
● El software libre puede
ser usado, copiado,
estudiado, modificado, y
redistribuido libremente.
● El software libre suele
estar disponible
gratuitamente pero no
quiere decir que sea
gratis.
● No debe confundirse
con el software de
dominio público
(shareware).
● Mozilla Firefox
● Libre Office
● VLC
● Ubuntu
● GIMP
● WordPress
● Apache, MySQL, PHP
● ...

14. Software Propietario (Privativo)
● El usuario acepta las
condiciones restrictivas
de uso del software.
● En caso de error en la
aplicación, darlo a
conocer a la empresa
desarrolladora para
solucionarlo.
● En ningún caso se
puede modificar o ceder
el software.
● Internet Explorer.
● Microsoft Office.
● Windows Media Player.
● Microsoft Windows.
● Adobe Photoshop.
● IIS - Sharepoint.
● SQL Server, .NET

15. Redes Vs. PCs
● Pasamos de la era del Hardware a la
del Software, pero ahora, gracias a las
redes de comunicaciones, pasamos a la
era de las Redes, en las que lo
importante es la conectividad.
● No necesitamos disponer de potentes
ordenadores con todo el software
instalado en ellos, accedemos a los
recursos necesarios a través de la
comunicación en red (la “Nube”).

16. Aplicaciones distribuidas

17. Cliente/Servidor y Redes P2P
● Utilizamos un programa “Cliente” que a
través de las redes de comunicaciones
comunica con un sistema que realiza las
veces de “Servidor”, que es quien dispone
de los recursos de computación, archivo y
otros servicios. El cliente ligero más utilizado
es el navegador web. Modelos ASP/SAAS.
● Un mismo ordenador puede a la vez realizar
la función de Cliente y Servidor y cuando se
realiza “entre iguales”: Peer To Peer.

18. Un mundo comunicado permanente

19. Protocolos de Comunicación
● Las distintas máquinas y sistemas pueden
“hablar” entre ellas porque nos apoyamos en
estándares que denominamos “protocolos”.
● Algunos de los protocolos de debemos
conocer para qué son y cómo se llaman:
○ Ethernet - IP - TCP: nos permiten acceder y
comunicarnos en Internet.
○ HTTP: páginas web.
○ FTP: transferencia de archivos.
○ SNMP, POP3, IMAP: e-mail.

21. Navegador Vs. Buscador
● Un navegador es
una aplicación que
permite visualizar
páginas web.
● Ejemplos:
○ Microsoft Internet
Explorer.
○ Mozilla Firefox.
○ Google Chrome.
○ Apple Safari.
○ Opera.
● Un buscador web
es un servicio que
busca páginas web
previamente
almacenados en su
base de datos.
● Ejemplos:
○ Google Search.
○ Yahoo! Search.
○ Bing.
○ Baidu.

22. Sistema, Navegador y Buscador
● En un ordenador con sistema operativo Microsoft
Windows 8.1, el navegador instalado por defecto es
Internet Explorer 11 y el buscador activado por defecto
es Bing.
● En un ordenador con sistema operativo Apple Mac OS
X 10.9, el navegador instalado por defecto es Apple
Safari 7.0 y el buscador activado por defecto es Google.
● En un ordenador con sistema operativo Ubuntu 13.10,
el navegador instalado por defecto es Mozilla Firefox 28
y el buscador activado por defecto es Google.
● Pero … también tenemos smartphones y tablets, cada
uno con su sistema, navegador y buscador ...

23. Y ¿qué más da uno u otro?
● Cada usuario en su dispositivo utiliza lo que
cree más conveniente, pero nuestra web o
servicio debe ser capaz de adaptarse y
mostrarse correctamente en cualquier
sistema, navegador y ser indexado por
cualquier buscador para abarcar el máximo
posible de destinatarios.
● Utilizar en las páginas web tecnologías
“antiguas” o “no compatibles” hacen que la
experiencia de usuario sea negativa.

24. Internet

25. La Era de Internet
● Tras el hardware y el software, vinieron las
redes y en estos momentos ya no es
suficiente disponer de hard y soft,
necesitamos tener comunicaciones para
poder estar “on-line”.
● La red global es Internet. Está compuesta
por múltiples redes y múltiples proveedores.
Los proveedores suministran conectividad y
servicios entre las distintas redes y a distinto
nivel, llegando al usuario final.

26. Red Global de Comunicaciones

27. Y mi proveedor, ¿qué me da?
● Tu proveedor de acceso a internet (ISP), te
da en primer lugar conectividad, es decir,
te conecta a través de su red a redes
mayores y a través de éstas a la red global.

28. Proveedores de Hosting ISP
● Los servicios de hosting ISP son servicios que operan
servidores de Internet, permitiéndole a organizaciones e
individuos subir contenido a ésta. Existen distintos
niveles de servicios y de varios tipos.
● Este tipo de ISP ofrecen servidores, servidores cloud,
VPS, incluso servidores físicos donde los clientes
pueden ejecutar sus propios programas. Estos tipos de
ISP necesitan muchos recursos físicos y virtuales para
poder ejecutarse optimizadamente, por lo que el ancho
de banda consumido también genera un costo.

29. Servicios de los proveedores de
Hosting ISP
● El servicio primario que dan los proveedores
ISP es el de “alojamiento” (Hosting) de las
páginas web de sus clientes.
● Habitualmente, el servicio de alojamiento se
complementa con el de correo electrónico,
en el que el proveedor aloja dicho servicio
en sus servidores y sirve de pasarela al
mismo.
● Servicio de alojamiento de DNS.
● Servicio de registro de dominios.
● Servicio de envío de archivos (FTP).

30. Dominio ≠ Alojamiento
● Habitualmente, cuando contratas una página
web con un proveedor, en el contrato se
especifica dónde va a estar alojada la web,
que es lo que denominamos “hosting”.
● Para que esa web pueda ser accesible
desde internet, en lugar de utilizar la
dirección IP del servidor donde está alojada,
se recurre a nombres fáciles de recordar
que son los “dominios”.

31. Contratar un dominio
● El dominio se puede contratar con tu ISP o
con cualquier otro proveedor que realice las
veces de intermediación.
● Un dominio requiere ser mantenido
(actualizado) y esto se realiza anualmente
con el proveedor que tú tengas contratado.
● Por lo tanto, puedes tener tu página web
contratada con un proveedor diferente de
con quien tienes contratado el dominio.

32. DNS (Domain Name Services)
● El servicio DNS permite traducir los nombres
de dominio en direcciones de internet
(físicas).
● Por lo tanto, el servicio DNS suele ir
acompañado del servicio de contratación del
dominio y el proveedor que gestiona tu
dominio es quien dice a otros servidores
DNS dónde están tus servicios (web, correo,
…).

33. ¿Cómo conjugamos todo?
● Tengo mi web alojada en un servidor con el proveedor
A. Este proveedor me dice que la web escucha en la
dirección B.
● Tengo mi correo alojado en un servidor propio
contratado con mi proveedor de acceso a internet, C.
Este proveedor me dice que el correo escucha en la
dirección D.
● El dominio de mi organización lo gestiona el proveedor
E. Le tengo que decir al proveedor E que los DNS
correspondientes a mi web y a mi correo apunten a las
direcciones B y D.
● ¿Un poco lío?, Mejor un ejemplo ...

34. Ejemplo de integración servicios

35. Presencia en Internet - egosurfing
● Enciende tu ordenador.
● Lanza tu navegador preferido.
● Accede a tu buscador favorito.
● Busca en él el nombre de tu empresa,
producto o el tu propio nombre.
● ¿Aparece? ¿Por qué? ¿Quién lo ha puesto
ahí? ¿No estás? ¿Lo que sale es bueno?
¿Hay imagenes?.
● Tu prestigio hoy es salir el primero en el
buscador, si no estás no existes, pero
puedes estar sin que tú lo hayas querido.

36. Dominio
● La identidad primaria en Internet es el
dominio.
● En el mismo momento en el que tengamos
un nombre de producto o servicio
deberemos comprobar si su dominio está
disponible o no para en su caso realizar las
acciones oportunas.
● Para consultar la disponibilidad de un
dominio accedemos a un proveedor de
dominios.

37. Buscando un dominio

38. Seleccionamos el que queramos

39. Sólo el dominio, o algo más ...

40. Vale, es un proveedor y vende ...

41. Seleccionas el dominio y el agente
registrador de la lista desplegable

42. Gestionar un dominio “.es”

43. Whois de
dominio
CADUCA
PROPIETARIO
ADMINISTRACIÓN
TÉCNICO
https://www.nic.es
http://whois.domaintools.com/

44. Hosting
La gestión del
dominio y los
DNS van en el
precio del
dominio.
El resto son
servicios de
“valor añadido”.

45. Probemos con otro proveedor el
dominio

46. Y ahora las opciones de hosting ...
● Hay tantas opciones
como proveedores.
● Es difícil elegir una
salvo que seas un
experto.
● Confía en el proveedor
con el que
habitualmente trabajes o
con quien trabaje tu
desarrollador web y con
calidad/precio

47. Gestionando un dominio
Renovar
Transferir
DNS
Whois

48. DNS
● En este caso, el dominio fue originalmente contratado
con un proveedor, Hostinet en un pack de hosting +
dominio.
● Originalmente tenía alojada una página web tradicional.
● Posteriormente, se prescindió del servicio de hosting en
este proveedor, pasando a un servicio de hosting de
otro proveedor, WordPress.com.
● Al estar la página web de este dominio alojada en un
servidor diferente, hay que decirle al proveedor de
dominios que los DNS apunten al servidor correcto.
● Cada proveedor tiene su propio panel de control.

49. Modificando registros DNS
Una vez que el servidor DNS atiende las consultas
de otros servidores, tiene servicios añadidos al
registro principal (por ej., el correo electrónico -
Registro MX).

50. Registros DNS con servidor email
El proveedor de
dominio, DNS y
alojamiento son el
mismo, pero no el
proveedor de correo
electrónico, en este
caso es un dominio
gestionado de
Google Apps.

51. Gestión del Hosting completo
Usuario
DNS
FTP
e-Mail
BBDD
Usuarios
Facturación

52. Tipos de páginas web
● Sitio weblog (o blog o bitácora digital) es un sitio web en el
que uno o varios autores publican cronológicamente textos o
artículos, apareciendo primero el más reciente Ej.: Blogger,
WordPress.
● Sitio de empresa: usado para promocionar una empresa o
servicio.
● Sitio de comercio electrónico: para comprar bienes, como
Amazon.com.
● Sitio de comunidad virtual: un sitio o portal social donde las
personas con intereses similares se comunican unos con
otros, normalmente por chat o foros o simples mensajes.
● Sitio colaborativo o Wiki: un sitio donde los usuarios editan
colaborativamente: Wikipedia.

53. Páginas web y funcionalidades
● Página de contacto, página estática donde decimos quienes somos, a qué nos
dedicamos y las formas que tienen de contactar con nosotros. Suele ser una sola
página y estática. Un ejemplo de este tipo de páginas lo representa About.me.
● Página informativa, donde el objetivo de la página es dar al usuario que llega a la
misma toda la información necesaria para hacerse una idea de quiénes somos, a
qué nos dedicamos, cómo podemos ayudarle y los clientes más significativos con
los que trabajamos.
● Web informativa con catálogo o porfolio donde además de informar de todo lo
anteriormente comentado vamos a añadir nuestro catálogo de productos o servicios
o el porfolio de los trabajos que hemos realizado.
● Tienda online, además de tener el catálogo de productos o servicios permitimos a
nuestros clientes que los adquieran a través de la web. Tenemos nuestra tienda
abierta todos los días del año y las 24 horas del día, lo que nos obligará a estar
pendiente de los pedidos el mismo tiempo.
● El blog personal, además de informar sobre nuestros datos de contacto, a qué nos
dedicamos, etc. tenemos la opción de dar una visión mucho más personal de su
trabajo y/o de su sector y actividades profesionales o personales.
● Comunidad virtual o red social donde vamos a reunir a una serie de personas en
torno a un interés común.

54. HTML
● Es un lenguaje utilizado para codificar un documento
(por ej. una página web) que junto con el texto,
incorpora etiquetas o marcas que contienen información
adicional acerca de la estructura del texto o su
presentación.
● Para añadir un elemento externo a la página (imagen,
vídeo, script, etc.), este no se incrusta directamente en
el código de la página, sino que se hace una referencia
a la ubicación de dicho elemento mediante texto. De
este modo, la página web contiene sólo texto mientras
que recae en el navegador web (interpretador del
código) la tarea de unir todos los elementos y visualizar
la página final.

55. Visualizando el código de una
página web
● Vamos a visualizar el código de:
● http://www.euskadinnova.net/es/enpresa-
digitala/agenda/especializacion-marketing-
digital/7874.aspx
● Accede a ella con tu navegador.
● En Chrome: Herramientas / Ver Código
Fuente (Ctrl+U).
● O mejor aún: Herramientas / Herramientas
para desarrolladores (Ctrl+Shift+I).
● En Internet Explorer: Herramientas de
desarrollo (F12).

56. Estructura básica de una página web
escrita en lenguaje HTML
<!DOCTYPE HTML>
<html>
<head>
<title>Ejemplo1</title>
</head>
<body>
<p>ejemplo1</p>
</body>
</html>

57. Códigos HTML básicos.
● <html>: define el inicio del documento HTML, le indica al navegador que lo que
viene a continuación debe ser interpretado como código HTML.
● <head>: define la cabecera del documento HTML; esta cabecera suele contener
información sobre el documento que no se muestra directamente al usuario como,
por ejemplo, el título de la ventana del navegador. Dentro de la cabecera:
● <title>: define el título de la página. Por lo general, el título aparece en la barra
de título encima de la ventana.
● <link>: para vincular el sitio a hojas de estilo o iconos. Por ejemplo:<link rel="
stylesheet" href="/style.css" type="text/css">.
● <style>: para colocar el estilo interno de la página; ya sea usando CSS u otros
lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo
externo usando la etiqueta <link>.
● <meta>: para metadatos como la autoría o la licencia.
● <script>: incrusta un script en una web, o llama a uno mediante src="url del script".

58. HTML: <body>
● <body>: define el contenido principal o cuerpo del documento. Esta es la parte del
documento html que se muestra en el navegador; dentro de esta etiqueta pueden
definirse propiedades comunes a toda la página, como color de fondo y márgenes.
Dentro del cuerpo <body> es posible encontrar numerosas etiquetas. A
continuación se indican algunas a modo de ejemplo:
○ <h1> a <h6>: encabezados o títulos del documento con diferente relevancia.
○ <table>: define una tabla.
■ <tr>: fila de una tabla.
■ <td>: celda de una tabla (debe estar dentro de una fila).
○ <a>: hipervínculo o enlace, dentro o fuera del sitio web. Debe definirse el
parámetro de pasada por medio del atributo href. Por ejemplo: <a href="http:
//www.example.com" title="Ejemplo" target="_blank" tabindex="1">Ejemplo</a>
se representa como Ejemplo).
○ <div>: división de la página. Se recomienda, junto con css, en vez de <table>
cuando se desea alinear contenido.
○ <img>: imagen. Requiere del atributo src, que indica la ruta en la que se
encuentra la imagen. Por ejemplo: <img src="./imágenes/mifoto.jpg" />. Es
conveniente, por accesibilidad, poner un atributo alt="texto alternativo".
○ <li><ol><ul>: etiquetas para listas.

59. ¿Qué tengo que saber de HTML?
● No tengo que saber HTML, pero sí que en la
cabecera <head> figura información importante
cara al posicionamiento de una página.
● Se pueden incrustar pequeños programas en las
páginas HTML, por ejemplo JavaScript.
● Esto nos permite tener páginas web dinámicas,
que permiten al usuario interactuar con ellas y
que contienen efectos especiales mediante
animaciones Flash, applets java y hojas de estilo
CSS.

60. CSS
● Las CSS (Cascading Style Sheets),
permiten separar el contenido de una página
web de su formato o estilo como se
muestran.
● Funcionan como las plantillas en una
presentación, si cambias la plantilla, cambia
la manera como se ve, pero no el contenido
de la misma.
●

61. Importancia de las CSS
● Las hojas de estilo son conjuntos de instrucciones, a veces en
forma de archivo anexo, que se asocian a los archivos de
texto y se ocupan de los aspectos de formato y de
presentación de los contenidos: tipo, fuente y tamaño de
letras, justificación del texto, colores y fondos, etc.
● Las hojas de estilo permiten liberar la composición del texto de
los aspectos visuales y favorecen que se estructure y anote
mediante códigos que permiten un tratamiento más eficaz de
los contenidos.
● El uso adecuado de las hojas de estilo es uno de los aspectos
clave de la edición digital.

62. Jugando con CSS
● Puedes probar la importancia de CSS aplicando
distintas hojas de estilos a un mismo texto en una
página web:
● http://www.csszengarden.com/
● Puedes descargar el código HTML y CSS
originales para ver cómo están construidas.
● También puedes ver el código desde el
navegador.
● Prueba a seleccionar diferentes CSS y a cambiar
las dimensiones de la ventana del navegador para
ver cómo se adapta el contenido al nuevo

63. Selecciona el diseño que quieres

64. JavaScript
El uso más común de JavaScript es escribir funciones embebidas o incluidas en
páginas HTML y que interactúan con el Document Object Model de la página. Ejemplos:
● Cargar nuevo contenido para la página o enviar datos al servidor a través de AJAX
sin necesidad de recargar la página (por ejemplo, una red social puede permitir al
usuario enviar actualizaciones de estado sin salir de la página).
● Animación de los elementos de página, hacerlos desaparecer, cambiar su tamaño,
moverlos, etc.
● Contenido interactivo, por ejemplo, juegos y reproducción de audio y vídeo.
● Validación de los valores de entrada de un formulario web para asegurarse de que
son aceptables antes de ser enviado al servidor.
● Transmisión de información sobre los hábitos de lectura de los usuarios y las
actividades de navegación a varios sitios web. Las páginas Web con frecuencia lo
hacen para hacer análisis web, seguimiento de anuncios, la personalización o para
otros fines.

65. Fuentes
La fuente que utilizamos en nuestra página web sólo se
verá como se ve en nuestra pantalla si el internauta que
visita nuestra página tiene el mismo tipo de fuente
instalado en su ordenador.
● No podemos forzar al internauta a que descargue e
instale una fuente, ni siquiera automáticamente.
● Tampoco sabemos los tipos de fuentes instaladas en la
PC del internauta.
● Por ello, no podemos saber cómo será vista nuestra
página en los navegadores.
Por lo tanto lo mejor es usar fuentes genéricas y definir
otros tipos de fuentes alternativos (si es posible que sean
similares a la que nos gusta).

66. Las fuentes por defecto de cada SO
Cada sistema operativo y navegador interpretan de
distinta forma estas fuentes predeterminadas.
● Serif: "Times New Roman" en Windows, y "Times"
en Macintosh (diferente a la de Windows).
● Sans Serif: “Arial” en Windows, y "Helvetica" en
Macintosh.
● Monospace: "Courier New" en Windows, "Courier"
en Macintosh, y por lo general "VeraSans" o
"DejaVuSans" en Linux.

67. Distintos Sistemas, mismas fuentes,
diferente visualización.
En las cuatro imágenes siguientes se muestra
el mismo tipo de letra en cuatro sistemas
diferentes: Windows (Internet Explorer),
Windows con ClearType, MacOS X (Safari) y
Linux (Ubuntu) con Firefox.

68. Responsive Design
● El diseño web adaptable o adaptativo (en
inglés, Responsive Web Design) es una
técnica de diseño y desarrollo web que
mediante el uso de estructuras e imágenes
fluidas, así como de media-queries en la
hoja de estilo CSS, consigue adaptar el sitio
web al entorno del usuario.

69. Importancia del Diseño Adaptable
● Con una sola versión en HTML y CSS se cubren todas las
resoluciones de pantalla, es decir, el sitio web creado estará
optimizado para todo tipo de dispositivos: PCs, tabletas,
teléfonos móviles, etc. Esto mejora la experiencia de usuario a
diferencia de lo que ocurre, por ejemplo, con sitios web de
ancho fijo cuando se acceden desde dispositivos móviles.
● De esta forma se reducen los costes de creación y
mantenimiento cuando el diseño de las pantallas es similar
entre dispositivos de distintos tamaños.
● También se supone que evita tener que desarrollar
aplicaciones ad-hoc para versiones móviles, por ejemplo, una
aplicación específica para iPhone, otra para móviles Android,
etc.
http://d.alistapart.com/responsive-web-design/ex/ex-site-linearize.html

70. Créditos (Imágenes)
● El contenido de esta documentación está
licenciado mediante una licencia Creative
Commons Reconocimiento 4.0 Internacional
(CC BY 4.0).
● Las imágenes utilizadas están enlazadas a
sus respectivos orígenes junto con sus
licencias originales y han sido obtenidas de
fuentes disponibles en internet, Wikipedia
básicamente.