SlideShare a Scribd company logo
1 of 72
Curso Especialización 
en Marketing Digital 
Conceptos Iniciales 
Zamudio 18/09/2014 
Venan 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 
• Contabilidad. 
• Procesador de textos. 
• Hoja de cálculo. 
• Base de datos. 
• Diseño gráfico. 
• Correo electrónico. 
• Navegador web. 
diseñado como 
herramienta para 
permitir a un usuario 
realizar uno o diversos 
tipos de trabajos.
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”). 
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 para 
Desktop (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.es 
http://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.

More Related Content

What's hot (13)

Almacenamiento en la nube
Almacenamiento en la nubeAlmacenamiento en la nube
Almacenamiento en la nube
 
ALMACENAMIENTO EN LA NUBE
ALMACENAMIENTO EN LA NUBEALMACENAMIENTO EN LA NUBE
ALMACENAMIENTO EN LA NUBE
 
4. hosting y dominio
4. hosting y dominio4. hosting y dominio
4. hosting y dominio
 
Elección equipos
Elección equiposElección equipos
Elección equipos
 
Tema2bachillerato (1)
Tema2bachillerato (1)Tema2bachillerato (1)
Tema2bachillerato (1)
 
Hosting
HostingHosting
Hosting
 
La nube
La nubeLa nube
La nube
 
Almacenamiento carguer
Almacenamiento carguerAlmacenamiento carguer
Almacenamiento carguer
 
Almacenamiento en la red
Almacenamiento en la redAlmacenamiento en la red
Almacenamiento en la red
 
Unidades 1 y 2 hector de jesus
Unidades 1 y 2 hector de jesusUnidades 1 y 2 hector de jesus
Unidades 1 y 2 hector de jesus
 
Computacion en la nube
Computacion en la nube Computacion en la nube
Computacion en la nube
 
Tema2bachillerato
Tema2bachilleratoTema2bachillerato
Tema2bachillerato
 
Tema2bachillerato
Tema2bachilleratoTema2bachillerato
Tema2bachillerato
 

Viewers also liked

Doctores ganseg
Doctores gansegDoctores ganseg
Doctores gansegmaatkare55
 
Portfolio Maika Smit
Portfolio Maika SmitPortfolio Maika Smit
Portfolio Maika SmitMaika Smit
 
Classement Marathon 2011
Classement Marathon 2011Classement Marathon 2011
Classement Marathon 2011escrimefribourg
 
Game Development Services Provider | Dumadu
Game Development Services Provider | Dumadu Game Development Services Provider | Dumadu
Game Development Services Provider | Dumadu Dumadu Games Pvt. Ltd
 
How to choose a good personal injury attorney
How to choose a good personal injury attorneyHow to choose a good personal injury attorney
How to choose a good personal injury attorneyDavid & Associates PLLC
 
Boletim setembro 2013
Boletim setembro 2013Boletim setembro 2013
Boletim setembro 2013Mais Sucesso
 
Nuevas Tendencias en Internet
Nuevas Tendencias en InternetNuevas Tendencias en Internet
Nuevas Tendencias en InternetRoca Salvatella
 
Roma nel Piatto - ed. 2015
Roma nel Piatto - ed. 2015Roma nel Piatto - ed. 2015
Roma nel Piatto - ed. 2015pecoranera
 
Gerard Ruffin Quase
Gerard Ruffin   QuaseGerard Ruffin   Quase
Gerard Ruffin QuaseEXPOEXPO
 
Neo Star Engineering Pvt. Ltd.
Neo Star Engineering Pvt. Ltd.Neo Star Engineering Pvt. Ltd.
Neo Star Engineering Pvt. Ltd.impactit
 
Woices Ejercicio Mi Barrio
Woices Ejercicio Mi BarrioWoices Ejercicio Mi Barrio
Woices Ejercicio Mi BarrioAntonio Chenoll
 
Tradução Trendwatching | abril 2010
Tradução Trendwatching | abril 2010Tradução Trendwatching | abril 2010
Tradução Trendwatching | abril 2010Ponto de Referência
 
"Финансы для людей" 7 (19) 2014
"Финансы для людей"  7 (19) 2014"Финансы для людей"  7 (19) 2014
"Финансы для людей" 7 (19) 2014CB Transportny
 
Become a MPsoftware-US reseller partner
Become a MPsoftware-US reseller partnerBecome a MPsoftware-US reseller partner
Become a MPsoftware-US reseller partnerMPsoftware MX
 
शीत संमीलन, टेस्ला, मोफत ऊर्जा = आभासी विज्ञान ? (मराठी सारांश) / Cold fus...
शीत संमीलन,  टेस्ला, मोफत ऊर्जा = आभासी विज्ञान ? (मराठी सारांश)  /  Cold fus...शीत संमीलन,  टेस्ला, मोफत ऊर्जा = आभासी विज्ञान ? (मराठी सारांश)  /  Cold fus...
शीत संमीलन, टेस्ला, मोफत ऊर्जा = आभासी विज्ञान ? (मराठी सारांश) / Cold fus...New Nature Paradigm Tech Analysis: Green, Sustainable, Collaborative
 
Short Introduction to d2w plastic bags
Short Introduction to d2w plastic bagsShort Introduction to d2w plastic bags
Short Introduction to d2w plastic bagsM Muawwiz Zia
 

Viewers also liked (20)

Doctores ganseg
Doctores gansegDoctores ganseg
Doctores ganseg
 
sanity
sanitysanity
sanity
 
Portfolio Maika Smit
Portfolio Maika SmitPortfolio Maika Smit
Portfolio Maika Smit
 
Sell it
Sell itSell it
Sell it
 
Classement Marathon 2011
Classement Marathon 2011Classement Marathon 2011
Classement Marathon 2011
 
Game Development Services Provider | Dumadu
Game Development Services Provider | Dumadu Game Development Services Provider | Dumadu
Game Development Services Provider | Dumadu
 
How to choose a good personal injury attorney
How to choose a good personal injury attorneyHow to choose a good personal injury attorney
How to choose a good personal injury attorney
 
Boletim setembro 2013
Boletim setembro 2013Boletim setembro 2013
Boletim setembro 2013
 
Nuevas Tendencias en Internet
Nuevas Tendencias en InternetNuevas Tendencias en Internet
Nuevas Tendencias en Internet
 
Roma nel Piatto - ed. 2015
Roma nel Piatto - ed. 2015Roma nel Piatto - ed. 2015
Roma nel Piatto - ed. 2015
 
Gerard Ruffin Quase
Gerard Ruffin   QuaseGerard Ruffin   Quase
Gerard Ruffin Quase
 
Neo Star Engineering Pvt. Ltd.
Neo Star Engineering Pvt. Ltd.Neo Star Engineering Pvt. Ltd.
Neo Star Engineering Pvt. Ltd.
 
Woices Ejercicio Mi Barrio
Woices Ejercicio Mi BarrioWoices Ejercicio Mi Barrio
Woices Ejercicio Mi Barrio
 
Curso online direito constitucional unieducar
Curso online direito constitucional unieducarCurso online direito constitucional unieducar
Curso online direito constitucional unieducar
 
Tradução Trendwatching | abril 2010
Tradução Trendwatching | abril 2010Tradução Trendwatching | abril 2010
Tradução Trendwatching | abril 2010
 
Historia da leishmania ii
Historia da leishmania iiHistoria da leishmania ii
Historia da leishmania ii
 
"Финансы для людей" 7 (19) 2014
"Финансы для людей"  7 (19) 2014"Финансы для людей"  7 (19) 2014
"Финансы для людей" 7 (19) 2014
 
Become a MPsoftware-US reseller partner
Become a MPsoftware-US reseller partnerBecome a MPsoftware-US reseller partner
Become a MPsoftware-US reseller partner
 
शीत संमीलन, टेस्ला, मोफत ऊर्जा = आभासी विज्ञान ? (मराठी सारांश) / Cold fus...
शीत संमीलन,  टेस्ला, मोफत ऊर्जा = आभासी विज्ञान ? (मराठी सारांश)  /  Cold fus...शीत संमीलन,  टेस्ला, मोफत ऊर्जा = आभासी विज्ञान ? (मराठी सारांश)  /  Cold fus...
शीत संमीलन, टेस्ला, मोफत ऊर्जा = आभासी विज्ञान ? (मराठी सारांश) / Cold fus...
 
Short Introduction to d2w plastic bags
Short Introduction to d2w plastic bagsShort Introduction to d2w plastic bags
Short Introduction to d2w plastic bags
 

Similar to Curso Especialización Marketing Digital Conceptos

Curso Especialista Marketing Digital de Enpresa Digitala - Conceptos Iniciales
Curso Especialista Marketing Digital de Enpresa Digitala - Conceptos Iniciales Curso Especialista Marketing Digital de Enpresa Digitala - Conceptos Iniciales
Curso Especialista Marketing Digital de Enpresa Digitala - Conceptos Iniciales Venan Llona
 
Internet y comunidades intelectuales
Internet y comunidades intelectualesInternet y comunidades intelectuales
Internet y comunidades intelectualesÓscar Casco Botana
 
Internet y comunidades intelectuales óscar
Internet y comunidades intelectuales óscarInternet y comunidades intelectuales óscar
Internet y comunidades intelectuales óscarÓscar Casco Botana
 
Web 2.0 sara
Web 2.0 saraWeb 2.0 sara
Web 2.0 sara2142562
 
Presentacion power point informatica trabajo
Presentacion power point informatica trabajoPresentacion power point informatica trabajo
Presentacion power point informatica trabajoAlba Panero
 
Concepto de ancho de banda
Concepto de ancho de bandaConcepto de ancho de banda
Concepto de ancho de bandaMarcosPassano
 
presentación de Temas de informática
presentación de Temas de informáticapresentación de Temas de informática
presentación de Temas de informáticaparejita17
 
Internet
InternetInternet
Internets_marin
 
Internet
InternetInternet
Internets_marin
 
Exposicion internet1
Exposicion internet1Exposicion internet1
Exposicion internet1still01
 

Similar to Curso Especialización Marketing Digital Conceptos (20)

Curso Especialista Marketing Digital de Enpresa Digitala - Conceptos Iniciales
Curso Especialista Marketing Digital de Enpresa Digitala - Conceptos Iniciales Curso Especialista Marketing Digital de Enpresa Digitala - Conceptos Iniciales
Curso Especialista Marketing Digital de Enpresa Digitala - Conceptos Iniciales
 
Hosting
HostingHosting
Hosting
 
Tema 19
Tema 19Tema 19
Tema 19
 
Presentación1
Presentación1Presentación1
Presentación1
 
Internet y comunidades intelectuales
Internet y comunidades intelectualesInternet y comunidades intelectuales
Internet y comunidades intelectuales
 
Internet y comunidades intelectuales óscar
Internet y comunidades intelectuales óscarInternet y comunidades intelectuales óscar
Internet y comunidades intelectuales óscar
 
Internet
InternetInternet
Internet
 
Internet
InternetInternet
Internet
 
Internet
InternetInternet
Internet
 
Internet
InternetInternet
Internet
 
Web 2.0 sara
Web 2.0 saraWeb 2.0 sara
Web 2.0 sara
 
Internet
InternetInternet
Internet
 
Presentacion power point informatica trabajo
Presentacion power point informatica trabajoPresentacion power point informatica trabajo
Presentacion power point informatica trabajo
 
INTERNET.ppt
INTERNET.pptINTERNET.ppt
INTERNET.ppt
 
Concepto de ancho de banda
Concepto de ancho de bandaConcepto de ancho de banda
Concepto de ancho de banda
 
presentación de Temas de informática
presentación de Temas de informáticapresentación de Temas de informática
presentación de Temas de informática
 
Internet
InternetInternet
Internet
 
Internet
InternetInternet
Internet
 
Exposicion internet1
Exposicion internet1Exposicion internet1
Exposicion internet1
 
Informatica trabajo
Informatica trabajoInformatica trabajo
Informatica trabajo
 

More from Venan Llona

Linkedin para dar a conocer tu perfil profesional
Linkedin para dar a conocer tu perfil profesionalLinkedin para dar a conocer tu perfil profesional
Linkedin para dar a conocer tu perfil profesionalVenan Llona
 
Configuración certificados electrónicos en windows 10
Configuración certificados electrónicos en windows 10Configuración certificados electrónicos en windows 10
Configuración certificados electrónicos en windows 10Venan Llona
 
Tu teléfono, mucho más que un móvil saca partido a tu smartphone (araba e...
Tu teléfono, mucho más que un móvil  saca partido a tu smartphone (araba e...Tu teléfono, mucho más que un móvil  saca partido a tu smartphone (araba e...
Tu teléfono, mucho más que un móvil saca partido a tu smartphone (araba e...Venan Llona
 
Presentación en Kreabidasoa16 de Industria Inteligente con Bidasoa Activa
Presentación en Kreabidasoa16 de Industria Inteligente con Bidasoa ActivaPresentación en Kreabidasoa16 de Industria Inteligente con Bidasoa Activa
Presentación en Kreabidasoa16 de Industria Inteligente con Bidasoa ActivaVenan Llona
 
Tu teléfono, mucho más que un móvil saca partido a tu smartphone (Araba Enco...
Tu teléfono, mucho más que un móvil  saca partido a tu smartphone (Araba Enco...Tu teléfono, mucho más que un móvil  saca partido a tu smartphone (Araba Enco...
Tu teléfono, mucho más que un móvil saca partido a tu smartphone (Araba Enco...Venan Llona
 
El iPad como herramienta de productividad profesional #Productivity #iPadProED
El iPad como herramienta de productividad profesional #Productivity #iPadProEDEl iPad como herramienta de productividad profesional #Productivity #iPadProED
El iPad como herramienta de productividad profesional #Productivity #iPadProEDVenan Llona
 
Crea tu marca personal y mejora tu empleabilidad utilizando internet
Crea tu marca personal y mejora tu empleabilidad utilizando internetCrea tu marca personal y mejora tu empleabilidad utilizando internet
Crea tu marca personal y mejora tu empleabilidad utilizando internetVenan Llona
 
Acceso remoto a tu ordenador desde un tablet Android o iPad #productividad #i...
Acceso remoto a tu ordenador desde un tablet Android o iPad #productividad #i...Acceso remoto a tu ordenador desde un tablet Android o iPad #productividad #i...
Acceso remoto a tu ordenador desde un tablet Android o iPad #productividad #i...Venan Llona
 
iPad conceptos básicos (iOS7)
iPad conceptos básicos (iOS7)iPad conceptos básicos (iOS7)
iPad conceptos básicos (iOS7)Venan Llona
 
Conectar iPad a Smartphone para acceder a Internet (tethering)
Conectar iPad a Smartphone para acceder a Internet (tethering)Conectar iPad a Smartphone para acceder a Internet (tethering)
Conectar iPad a Smartphone para acceder a Internet (tethering)Venan Llona
 
Cómo usar mi propia cuenta de correo con google
Cómo usar mi propia cuenta de correo con googleCómo usar mi propia cuenta de correo con google
Cómo usar mi propia cuenta de correo con googleVenan Llona
 
Traspaso correos outlook a gmail
Traspaso correos outlook a gmailTraspaso correos outlook a gmail
Traspaso correos outlook a gmailVenan Llona
 
Del trabajo en equipo al trabajo en red pasando por la participación
Del trabajo en equipo al trabajo en red pasando por la participaciónDel trabajo en equipo al trabajo en red pasando por la participación
Del trabajo en equipo al trabajo en red pasando por la participaciónVenan Llona
 
Tu empresa 2.0 en 30' (Tu dominio en Google Apps)
Tu empresa 2.0 en 30' (Tu dominio en Google Apps)Tu empresa 2.0 en 30' (Tu dominio en Google Apps)
Tu empresa 2.0 en 30' (Tu dominio en Google Apps)Venan Llona
 
Google Drive: "Primer Contacto"
Google Drive: "Primer Contacto"Google Drive: "Primer Contacto"
Google Drive: "Primer Contacto"Venan Llona
 
Redes sociales en asle
Redes sociales en asleRedes sociales en asle
Redes sociales en asleVenan Llona
 
Identidad y ciudadanía digital
Identidad y ciudadanía digitalIdentidad y ciudadanía digital
Identidad y ciudadanía digitalVenan Llona
 
Aprendices taller ubuntu básico instalación
Aprendices   taller ubuntu básico instalaciónAprendices   taller ubuntu básico instalación
Aprendices taller ubuntu básico instalaciónVenan Llona
 
Linkedin paso a paso
Linkedin paso a pasoLinkedin paso a paso
Linkedin paso a pasoVenan Llona
 
Facturación electrónica enero 2011
Facturación electrónica enero 2011Facturación electrónica enero 2011
Facturación electrónica enero 2011Venan Llona
 

More from Venan Llona (20)

Linkedin para dar a conocer tu perfil profesional
Linkedin para dar a conocer tu perfil profesionalLinkedin para dar a conocer tu perfil profesional
Linkedin para dar a conocer tu perfil profesional
 
Configuración certificados electrónicos en windows 10
Configuración certificados electrónicos en windows 10Configuración certificados electrónicos en windows 10
Configuración certificados electrónicos en windows 10
 
Tu teléfono, mucho más que un móvil saca partido a tu smartphone (araba e...
Tu teléfono, mucho más que un móvil  saca partido a tu smartphone (araba e...Tu teléfono, mucho más que un móvil  saca partido a tu smartphone (araba e...
Tu teléfono, mucho más que un móvil saca partido a tu smartphone (araba e...
 
Presentación en Kreabidasoa16 de Industria Inteligente con Bidasoa Activa
Presentación en Kreabidasoa16 de Industria Inteligente con Bidasoa ActivaPresentación en Kreabidasoa16 de Industria Inteligente con Bidasoa Activa
Presentación en Kreabidasoa16 de Industria Inteligente con Bidasoa Activa
 
Tu teléfono, mucho más que un móvil saca partido a tu smartphone (Araba Enco...
Tu teléfono, mucho más que un móvil  saca partido a tu smartphone (Araba Enco...Tu teléfono, mucho más que un móvil  saca partido a tu smartphone (Araba Enco...
Tu teléfono, mucho más que un móvil saca partido a tu smartphone (Araba Enco...
 
El iPad como herramienta de productividad profesional #Productivity #iPadProED
El iPad como herramienta de productividad profesional #Productivity #iPadProEDEl iPad como herramienta de productividad profesional #Productivity #iPadProED
El iPad como herramienta de productividad profesional #Productivity #iPadProED
 
Crea tu marca personal y mejora tu empleabilidad utilizando internet
Crea tu marca personal y mejora tu empleabilidad utilizando internetCrea tu marca personal y mejora tu empleabilidad utilizando internet
Crea tu marca personal y mejora tu empleabilidad utilizando internet
 
Acceso remoto a tu ordenador desde un tablet Android o iPad #productividad #i...
Acceso remoto a tu ordenador desde un tablet Android o iPad #productividad #i...Acceso remoto a tu ordenador desde un tablet Android o iPad #productividad #i...
Acceso remoto a tu ordenador desde un tablet Android o iPad #productividad #i...
 
iPad conceptos básicos (iOS7)
iPad conceptos básicos (iOS7)iPad conceptos básicos (iOS7)
iPad conceptos básicos (iOS7)
 
Conectar iPad a Smartphone para acceder a Internet (tethering)
Conectar iPad a Smartphone para acceder a Internet (tethering)Conectar iPad a Smartphone para acceder a Internet (tethering)
Conectar iPad a Smartphone para acceder a Internet (tethering)
 
Cómo usar mi propia cuenta de correo con google
Cómo usar mi propia cuenta de correo con googleCómo usar mi propia cuenta de correo con google
Cómo usar mi propia cuenta de correo con google
 
Traspaso correos outlook a gmail
Traspaso correos outlook a gmailTraspaso correos outlook a gmail
Traspaso correos outlook a gmail
 
Del trabajo en equipo al trabajo en red pasando por la participación
Del trabajo en equipo al trabajo en red pasando por la participaciónDel trabajo en equipo al trabajo en red pasando por la participación
Del trabajo en equipo al trabajo en red pasando por la participación
 
Tu empresa 2.0 en 30' (Tu dominio en Google Apps)
Tu empresa 2.0 en 30' (Tu dominio en Google Apps)Tu empresa 2.0 en 30' (Tu dominio en Google Apps)
Tu empresa 2.0 en 30' (Tu dominio en Google Apps)
 
Google Drive: "Primer Contacto"
Google Drive: "Primer Contacto"Google Drive: "Primer Contacto"
Google Drive: "Primer Contacto"
 
Redes sociales en asle
Redes sociales en asleRedes sociales en asle
Redes sociales en asle
 
Identidad y ciudadanía digital
Identidad y ciudadanía digitalIdentidad y ciudadanía digital
Identidad y ciudadanía digital
 
Aprendices taller ubuntu básico instalación
Aprendices   taller ubuntu básico instalaciónAprendices   taller ubuntu básico instalación
Aprendices taller ubuntu básico instalación
 
Linkedin paso a paso
Linkedin paso a pasoLinkedin paso a paso
Linkedin paso a paso
 
Facturación electrónica enero 2011
Facturación electrónica enero 2011Facturación electrónica enero 2011
Facturación electrónica enero 2011
 

Curso Especialización Marketing Digital Conceptos

  • 1. Curso Especialización en Marketing Digital Conceptos Iniciales Zamudio 18/09/2014 Venan Llona (@vllona) venan@llona.net
  • 2. 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.
  • 3.
  • 4. 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.
  • 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. Agosto 2014 Worldwide fuente: NetMarketShare
  • 9. Sistemas Operativos Móviles • Google Android. • Apple iOS. • BlackBerry. • Symbian. • Microsoft Windows. Agosto 2014 Worldwide fuente: NetMarketShare
  • 10. Aplicaciones • Programa informático • Contabilidad. • Procesador de textos. • Hoja de cálculo. • Base de datos. • Diseño gráfico. • Correo electrónico. • Navegador web. diseñado como herramienta para permitir a un usuario realizar uno o diversos tipos de trabajos.
  • 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”). Vídeo de CommonCraft sobre Computación en la Nube
  • 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: 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.
  • 20. Navegadores (2010 a 2014) by StatCounter Buscadores (Global) Agosto 2014 by NetMarketShare para Desktop (Izquierda) y Mobile (Derecha)
  • 21. 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.
  • 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.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 ...
  • 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.
  • 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 NTT Communications Global IP Network Map
  • 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. ¿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.
  • 33. 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/
  • 34. 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, …).
  • 35. ¿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 ...
  • 37. 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.
  • 38. 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.
  • 41. Sólo el dominio, o algo más ...
  • 42. Vale, es un proveedor y vende ...
  • 43. Seleccionas el dominio y el agente registrador de la lista desplegable
  • 44. Gestionar un dominio “.es”
  • 45. Whois de dominio CADUCA PROPIETARIO ADMINISTRACIÓN TÉCNICO https://www.nic.es http://whois.domaintools.com/
  • 46. 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
  • 47. Probemos con otro proveedor el dominio
  • 48. 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.
  • 49. Gestionando un dominio Renovar Transferir DNS Whois
  • 50. 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.
  • 51. 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).
  • 52. 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.
  • 53. Gestión del Hosting completo Usuario DNS FTP e-Mail BBDD Usuarios Facturación
  • 54. 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.
  • 55. 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.
  • 56. 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.
  • 57. 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).
  • 58. 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>
  • 59. 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".
  • 60. 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.
  • 61. ¿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.
  • 62. 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.
  • 63. 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.
  • 64. 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.
  • 65. Selecciona el diseño que quieres
  • 66. 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.
  • 67. 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).
  • 68. 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.
  • 69. 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.
  • 70. 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.
  • 71. 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
  • 72. 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.

Editor's Notes

  1. Índice