Curso Especialista Marketing Digital de Enpresa Digitala - Conceptos Iniciales
70
Curso Especialización en Marketing Digital Conceptos Iniciales Miramón 25/03/2014 Venan Llona (@vllona ) [email protected]
-
Upload
venan-llona -
Category
Marketing
-
view
593 -
download
0
description
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)
Transcript of Curso Especialista Marketing Digital de Enpresa Digitala - Conceptos Iniciales
Curso Especialización en Marketing Digital
Conceptos InicialesMiramón 25/03/2014
Venan Llona (@vllona)[email protected]
IntroducciónInternet 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.
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.
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.
Sistemas Operativos Móviles
● Google Android.● Apple iOS.● BlackBerry.● Symbian.● Microsoft Windows.
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.● Windows
Phone 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”).
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:○ Ethernet - IP - TCP: nos permiten acceder y
comunicarnos en Internet.○ HTTP: páginas web.○ FTP: transferencia de archivos.○ SNMP, POP3, IMAP: e-mail.
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.
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 ...
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.
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.
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.
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.
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.
Seleccionamos el que queramos
Sólo el dominio, o algo más ...
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”.
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
RenovarTransferirDNSWhois
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
UsuarioDNSFTPe-MailBBDDUsuariosFacturació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:○ <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.
¿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
JavaScriptEl 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.
FuentesLa 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.htmlhttp://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.
