Curso Especialización en Marketing Digital Conceptos Iniciales

Zamudio 18/09/2014Venan Llona (@vllona)

venan@llona.net

Introducción

Internet ha revolucionado 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.

Contenido (I)• Si no estás en Internet, no existes.

o 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.

o Presencia en Internet. Egosurfing. Páginas web. Servicios de directorio. Redes sociales.

Contenido (II)

• Dominios.

• Hosting.

• DNS.

• Tipos de páginas web.

• CSS.

• HTML.

• JavaScript.

• Fuentes.

• Responsive Design.

• ...

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.

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.

Sistemas Operativos de Escritorio• Microsoft Windows.

• Apple Mac OS X.

• GNU/Linux.

• Google Chrome OS

• Canonical Ubuntu.

Agosto 2014 Worldwide fuente: NetMarketShare

Sistemas Operativos Móviles

• Google Android.

• Apple iOS.

• BlackBerry.

• Symbian.

• Microsoft Windows.

Agosto 2014 Worldwide fuente: NetMarketShare

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.

Pero ahora las Aplicaciones son APPs web y APPs móviles

• Webmail.

• Wikis.

• Weblogs.

• Tienda on-line.

• Google Play.

• App Store.

• WindowsPhone Store.

• BlackBerry.

• Amazon AppStore.

Software Libre Vs Propietario

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

• ...

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

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”).

Vídeo de CommonCraft sobre Computación en la Nube

Aplicaciones distribuidas

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.

Un mundo comunicado permanente

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:o Ethernet - IP - TCP: nos permiten acceder y

comunicarnos en Internet.o HTTP: páginas web.o FTP: transferencia de archivos.o SNMP, POP3, IMAP: e-mail.

Navegadores (2010 a 2014) by StatCounter

Buscadores (Global) Agosto 2014 by NetMarketShare paraDesktop (Izquierda) y Mobile (Derecha)

Navegador Vs. Buscador

• Un navegador es una aplicación que permite visualizar páginas web.

• Ejemplos:o Microsoft Internet

Explorer.o Mozilla Firefox.o Google Chrome.o Apple Safari.o Opera.

• Un buscador web es un servicio que busca páginas web previamente almacenados en su base de datos.

• Ejemplos:o Google Search.o Yahoo! Search.o Bing.o Baidu.

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.6 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 ...

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.

Internet

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.

Red Global de Comunicaciones

NTT Communications Global IP Network Map

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.

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.

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).

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”.

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.

¿Cuánto cuesta un dominio?

• .es y .eu desde 4,95€• .com.es desde 1,95€• .com, .net, .org, .biz desde 8,95€• .info desde 18,00€• .eus desde 89,95€

* Los precios están referenciados a septiembre de 2014 en el único proveedor de dominios de capital vasco, Hostinet.

Dominios .eus

• El martes 16 de septiembre (hasta el 18 de noviembre del 2014) comienza la fase Sunrise y Landrush de los dominios .eus.

• Cualquier persona o empresa puede solicitar a partir de esa fecha su dominio .eus, antes de la fase de registro libre que comienza el 3 de Diciembre.

• Hostinet es la única empresa vasca que comercializa estos dominios. Para colaborar más intensamente con esta iniciativa y apuntalar su éxito, ofrece además Hosting Ilimitado totalmente gratis con cada .eus registrado y descuentos del 50% en sus planes de hosting más avanzados.

• La fase Sunrise es para marcas registradas y entidades que promocionan el euskera o con contenido previo en euskera.

• La fase Landrush es para cualquiera que quiera registrar el dominio .eus antes del registro libre. La diferencia que tendrá con el registro libre es que el precio es mayor. La ventaja es que tendrá bastantes probabilidades de hacerse con el dominio y si hubiera más solicitantes, el dominio iría a subasta. En la fase de registro libre el dominio pedido es registrado inmediatamente. Si hay alguien que lo pide antes que tú, ya no tendrías posibilidades. Si quieres tu .eus y no te quieres arriesgar a perderlo porque otro lo registre, este es el momento.

• Puedes encontrar toda la información sobre los dominios .eus en su página web. https://www.hostinet.com/dominios/eus/

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, …).

¿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 ...

Ejemplo de integración servicios

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.

Gestiona tu reputación digital by Google.

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.

Buscando un dominio

Seleccionamos el que queramos

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

Vale, es un proveedor y vende ...

Seleccionas el dominio y el agente registrador de la lista desplegable

Gestionar un dominio “.es”

Whois de dominio

CADUCA

PROPIETARIO

ADMINISTRACIÓN

TÉCNICO

https://www.nic.eshttp://whois.domaintools.com/

Hosting

La gestión del dominio y los DNS van en el precio del dominio.

El resto son servicios de “valor añadido”.

Ejemplo: Septiembre 2014

Probemos con otro proveedor el dominio

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 razonables.

Gestionando un dominio

Renovar

Transferir

DNS

Whois

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.

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).

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.

Gestión del Hosting completo

Usuario

DNS

FTP

e-Mail

BBDD

Usuarios

Facturación

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.

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.

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.

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).

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>

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".

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:o <h1> a <h6>: encabezados o títulos del documento con diferente relevancia.o <table>: define una tabla.

<tr>: fila de una tabla. <td>: celda de una tabla (debe estar dentro de una fila).

o <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).

o <div>: división de la página. Se recomienda, junto con css, en vez de <table> cuando se desea alinear contenido.

o <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".

o <li><ol><ul>: etiquetas para listas.

¿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.

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.

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.

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 tamaño.

Selecciona el diseño que quieres

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.

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).

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.

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.

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.

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

http://alistapart.com/article/dao

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.