Manual TIC y Dossier Practicas

FFOORRMMAACCIIOONN DDEE NNUUEEVVAASS TTEECCNNOOLLOOGGIIAASS DDEE LLAA CCOOMMUUNNIICCAACCIIÓÓNN –– TTIICC´́SS ((000011))

Profesora: Olga Carrillo Bravo

Fechas Curso: Illescas, del 5 de Octubre al 30 de Noviembre de 2015

CORRESPONDIENTE AL PLAN DE APOYO LOCAL AL EMPLEO (PLAE)

1 | P á g i n a

Formación en Nuevas

http://www.fedetoformacion.es/index.php?option=com_k2&view=item&id=645:tecnolog%C3%ADas-de-la-informaci%C3%B3n-y-la-comunicaci%C3%B3n


Contenidos Contenidos ............................................................................................................................................... 2

MODULO 1: OPERACIONES BASICAS Y CONCEPTOS DIGITALES ............................. 8

TEMA 1: INTRODUCCION Y CONCEPTOS BASICOS ASOCIADOS A LAS TIC’s ............................................ 8 1. Definición de TIC’s ........................................................................................................................... 8 2. ¿Para qué sirven las TIC? ................................................................................................................. 9 3. ¿Qué tipos de TIC existen? .............................................................................................................. 9 4. El futuro de las TIC ¿qué es lo próximo? ....................................................................................... 10 5. Las TIC en el trabajo: empleo y empresas cada vez más tecnológicas .......................................... 11 6. ¿Cómo se benefician las empresas de las TIC? ............................................................................. 12 7. Nuevas profesiones TIC: los perfiles más tecnológicos ................................................................. 12

TEMA2: ELEMENTOS DE UN SISTEMA INFORMATICO .......................................................................... 13 1. Hardware ....................................................................................................................................... 13 2. Software. ....................................................................................................................................... 31

TEMA 3: ELEMENTOS DE UN SISTEMA DE COMUNICACIONES EN RED ................................................. 34 1. Concepto de red de comunicación ................................................................................................ 34 2. Componentes básicos de las redes ............................................................................................... 34 3. Dispositivos de red ........................................................................................................................ 36 4. Topologías de red básicas ............................................................................................................. 37

TEMA 4: NAVEGADORES ...................................................................................................................... 43 1. Internet.......................................................................................................................................... 43 2. Navegadores .................................................................................................................................. 46 3. Interfaz de un navegador .............................................................................................................. 50

TEMA 5: CORREO ELECTRONICO .......................................................................................................... 57 1. Introducción .................................................................................................................................. 57 2. Definiciones y términos ................................................................................................................. 57 3. Funcionamiento ............................................................................................................................ 57 4. Gestores de correo electrónico ..................................................................................................... 58 5. Correo web. ................................................................................................................................... 65

MODULO 2: HERRAMIENTAS TECNOLOGICAS DE COMUNICACION .................... 67

TEMA 1: IDENTIDAD DIGITAL ............................................................................................................... 67 1. Introducción .................................................................................................................................. 67 2. La gestión de la identidad digital ................................................................................................... 68 3. Visibilidad ...................................................................................................................................... 71 4. Reputación .................................................................................................................................... 72 5. Privacidad ...................................................................................................................................... 73

TEMA 2: INTRODUCCIÓN A LA WEB 2.0 ............................................................................................... 77 1. La web 2.0 ..................................................................................................................................... 77 2. Cambios en la web 2.0 .................................................................................................................. 78 3. Algunos proyectos 2.0 ................................................................................................................... 79 4. ¿Protagonistas? Los usuarios. ....................................................................................................... 81

5. Social Media .................................................................................................................................. 82

TEMA 3: REDES SOCIALES..................................................................................................................... 84 1. Definición de Red Social. ............................................................................................................... 84 2. Funcionamiento de las redes sociales. .......................................................................................... 84 3. Tipos de redes sociales .................................................................................................................. 85 4. Clasificación. .................................................................................................................................. 86 5. La red social en la empresa. .......................................................................................................... 89 6. Consideraciones sobre los contenidos. ......................................................................................... 90

TEMA 4: FACEBOOK ............................................................................................................................. 92 Introducción. .......................................................................................................................................... 92 1. Proceso de registro ....................................................................................................................... 92 2. Perfil de usuario ............................................................................................................................ 93 3. Configuración de la cuenta ............................................................................................................ 93 4. Biografía ........................................................................................................................................ 94 5. Buscar amigos................................................................................................................................ 95 6. Actualización de estado................................................................................................................. 95 7. Publicar en la biografía de otros usuarios ..................................................................................... 97 8. Mensajes ....................................................................................................................................... 97 9. Fotos .............................................................................................................................................. 98 10. Crear un evento. ....................................................................................................................... 99 11. Páginas. ................................................................................................................................... 100 12. Grupos. .................................................................................................................................... 101 13. Listas. ...................................................................................................................................... 103

TEMA 5: TWITTER .............................................................................................................................. 105 1. Introducción ................................................................................................................................ 105 2. Acceso. ........................................................................................................................................ 107 3. Tipos de cuenta ........................................................................................................................... 108 4. Configuración de la cuenta. ......................................................................................................... 109 5. Seguimiento ................................................................................................................................ 113 6. Envío de mensajes. ...................................................................................................................... 114 7. Enlaces ......................................................................................................................................... 116 8. Imágenes y vídeos. ...................................................................................................................... 117

TEMA 6: LINKEDIN ............................................................................................................................. 118 1. Introducción. ............................................................................................................................... 118 2. Formas de conexión: perfil, grupos, empresas. .......................................................................... 119 3. Creación de cuenta. ..................................................................................................................... 122 4. Uso corporativo. .......................................................................................................................... 125

TEMA 7: BLOGS CORPORATIVOS ........................................................................................................ 127 1. Blogs ............................................................................................................................................ 127 2. Cómo es o puede ser un blog ...................................................................................................... 132 3. Uso de los blogs corporativos ..................................................................................................... 133

TEMA 8: GUÍA PRÁCTICA PARA CREAR UN BLOG CORPORATIVO ....................................................... 138 1. Introducción ................................................................................................................................ 138 2. Visualizar cómo son los blogs. ..................................................................................................... 138

3. Optar por la mejor ubicación para el blog ................................................................................... 139 4. Cómo y dónde creamos el blog ................................................................................................... 141 5. Crear contenido en el blog. ......................................................................................................... 142 6. Examinar y analizar las estadísticas del blog ............................................................................... 144

TEMA 9: ESCENARIOS Y RETOS DE LOS SOCIAL MEDIA EN LAS EMPRESAS ......................................... 145 1. Introducción ................................................................................................................................ 145 2. Oportunidades y retos................................................................................................................. 146 3. Reglas básicas de SMO (Social Media Optimization)................................................................... 146 4. Redes sociales generalistas ......................................................................................................... 150 5. Redes sociales multimedia .......................................................................................................... 152 6. Redes sociales profesionales ....................................................................................................... 153

TEMA 10: FACEBOOK PARA EMPRESAS .............................................................................................. 154 1. Introducción a Facebook para empresas. ................................................................................... 154 2. Página de empresa en Facebook. ................................................................................................ 154 3. Cómo conseguir público y promocionar la página. ..................................................................... 160 4. Administración de una página de empresa en Facebook............................................................ 161 5. Interacción con los seguidores: Estadísticas. .............................................................................. 162 6. Funcionalidad de una página de Facebook. ................................................................................ 166 7. Estrategias para el éxito en Facebook. ........................................................................................ 167

TEMA 11: TWITTER PARA EMPRESAS ................................................................................................. 169 1. Introducción a Twitter para empresas. ....................................................................................... 169 2. Dar a conocer una empresa en Twitter. ...................................................................................... 169 3. Impulso y promoción de la empresa en Twitter. ........................................................................ 170

TEMA 12: GOOGLE+ PARA EMPRESAS ................................................................................................ 173 1. Introducción a Google + para empresas...................................................................................... 173 2. Página de empresa en Google +. ................................................................................................. 175 3. Cómo crear una página de empresa ........................................................................................... 175 4. Relacionar Google + con el sitio web de la empresa. .................................................................. 178

TEMA 13: MARCADORES SOCIALES Y AGREGADORES DE NOTICIAS ................................................... 181 1. Introducción ................................................................................................................................ 181 2. Marcadores sociales. ................................................................................................................... 181 3. Agregadores de noticias. ............................................................................................................. 186

TEMA 14: EL COMMUNITY MANAGER ............................................................................................... 191 1. Introducción a la figura del Community Manager. ..................................................................... 191 2. Profesiones relacionadas con lo social media ............................................................................. 192

TEMA 15: FUNDAMENTOS DEL MARKETING DIGITAL ......................................................................... 197 1. ¿Qué es el marketing digital? ...................................................................................................... 197 2. Ventajas sobre el marketing tradicional...................................................................................... 197 3. Barreras del Marketing Digital .................................................................................................... 198 4. Aspectos legales que deben tenerse en cuenta .......................................................................... 199

TEMA 16: TENDENCIAS EN MARKETING DIGITAL ............................................................................... 200 1. Social Media marketing ............................................................................................................... 200 2. Mobile Marketing ........................................................................................................................ 213

TEMA 17: LA PUBLICIDAD EN MARKETING DIGITAL ........................................................................... 222 1. Publicidad Display ....................................................................................................................... 222 2. Anuncios de vídeo ....................................................................................................................... 223 3. Publicidad Ad Exchange............................................................................................................... 223 4. E-mail Marketing ......................................................................................................................... 224 5. Newsletters ................................................................................................................................. 224

TEMA 18: PLAN DE MARKETING ......................................................................................................... 225 1. Objetivos ..................................................................................................................................... 225 2. Cuál va a ser mi público objetivo ................................................................................................. 225 3. Qué medios conviene utilizar para mi mercado.......................................................................... 226 4. Estrategias en cada medio. Importancia de interaccionar marketing online y offline ................ 226 5. Fidelización .................................................................................................................................. 227 6. Reputación de la marca ............................................................................................................... 227

MODULO 3. HERRAMIENTAS TECNOLOGICAS DE INVESTIGACION E INFORMACION ................................................................................................................... 229

TEMA 1: DISEÑO DE PÁGINAS WEB UTILIZANDO UN CMS.................................................................. 229 1. ¿Qué es un CMS?......................................................................................................................... 229 2. ¿POR QUÉ WORDPRESS.com? ..................................................................................................... 230

TEMA 2: WORDPRESS COMO HERRAMIENTA DE DISEÑO WEB .......................................................... 232 1. Creación de un sitio web ............................................................................................................. 232 2. Acceder en modo Editor .............................................................................................................. 236 3. Explorando el escritorio de wordpress.com ................................................................................ 236

TEMA 3: DISEÑAR UN SITIO WEB CON WORDPRESS .......................................................................... 238 1. Administración de Entradas ........................................................................................................ 238 2. Administración de Categorías ..................................................................................................... 243 3. Administración de Etiquetas de las entradas .............................................................................. 246 4. Administración de Medios. Biblioteca multimedia ..................................................................... 247 5. Administración de Enlaces .......................................................................................................... 249 6. Administración de Páginas .......................................................................................................... 252 7. Administración de Comentarios .................................................................................................. 258 8. Administración del Perfil ............................................................................................................. 259

TEMA 4: HTML ................................................................................................................................... 261 1. ¿Qué es HTML? ........................................................................................................................... 261 2. Fundamentos básicos de HTML y XHTML ................................................................................... 265 3. Texto en HTML ............................................................................................................................ 270 4. Listas ............................................................................................................................................ 274 5. Imágenes ..................................................................................................................................... 276 6. Enlaces ......................................................................................................................................... 281 7. Tablas .......................................................................................................................................... 284 8. Formularios ................................................................................................................................. 290 9. Controles HTML 5 ........................................................................................................................ 296

TEMA 5: CSS ....................................................................................................................................... 310 1. Introducción a CSS ....................................................................................................................... 310

2. Inserción de código CSS ............................................................................................................... 312 3. Formatos y propiedades CSS ....................................................................................................... 321 4. Posicionamiento con CSS ............................................................................................................ 334

TEMA 6: DREAMWEAVER................................................................................................................... 341 1. Introducción, conceptos básicos y entorno de trabajo. .............................................................. 341 2. Configuración del sitio web ......................................................................................................... 351 3. Hipervínculos ............................................................................................................................... 364 4. Listas ............................................................................................................................................ 369 5. Imágenes ..................................................................................................................................... 374 6. Añadir elementos multimedia ..................................................................................................... 382 7. Trabajar con tablas ...................................................................................................................... 391 8. Trabajar con formularios ............................................................................................................. 402 9. Maquetación con CSS .................................................................................................................. 405 10. Revisar y publicar el sitio web ................................................................................................. 407

MODULO 4: BUSQUEDA Y PROCESAMIENTO DE DATOS ..................................... 414

TEMA 1: BUSQUEDA EN LA RED ......................................................................................................... 414 1. Introducción ................................................................................................................................ 414 2. Diferencias entre buscadores, directorios y metabuscadores. ................................................... 415 3. Tráfico cualificado ....................................................................................................................... 418 4. Tipos de búsquedas ..................................................................................................................... 422

TEMA 2: POSICIONAMIENTO ............................................................................................................. 423 1. Las palabras clave ........................................................................................................................ 423 2. Teoría “The Long Tail” ................................................................................................................. 425 3. Servicios cuenta Google .............................................................................................................. 428 4. Herramientas de Tráfico del Servidor Web ................................................................................. 434

TEMA 3: BÚSQUEDA DE LAS PALABRAS CLAVE (KEYWORD RESEARCH) ............................................. 436 1. Introducción ................................................................................................................................ 436 2. Diferencias entre Palabras para SEO y para SEM ........................................................................ 436 3. Fuentes Internas de Información. Elegir las palabras claves adecuadas ..................................... 438 4. Fuentes externas de Información. ............................................................................................... 441 5. Herramientas para palabras clave ............................................................................................... 447 6. Elección de palabras clave ........................................................................................................... 451 7. Agrupar las palabras clave ........................................................................................................... 452 8. Concordancia de palabras clave .................................................................................................. 455 9. Calcular el volumen de búsquedas .............................................................................................. 457 10. Comandos de búsqueda avanzada de Google ........................................................................ 461 11. Calcular el índice KEI ............................................................................................................... 463

TEMA 4: SEO ON PAGE ..................................................................................................................... 465 1. Introducción ................................................................................................................................ 465 2. Estructura tu web para mejorar tu SEO ................................................................................. 467 3. Dominio y URL ........................................................................................................................... 470 4. El título de la página ................................................................................................................ 472 5. Encabezados y texto de la página ........................................................................................... 474 6. Las Etiquetas Meta .................................................................................................................... 477

TEMA 5: SEO OFF PAGE ...................................................................................................................... 479 1. Introducción ................................................................................................................................ 479 2. Enlaces Externos .......................................................................................................................... 481 3. Alta en directorios ....................................................................................................................... 483 4. Intercambio de Enlaces ............................................................................................................... 486 5. Enlaces que Penalizan ................................................................................................................. 488 6. Medios Sociales o Social Media ................................................................................................... 489

TEMA 6: CONTENIDOS DÍFICILES DE POSICIONAR .............................................................................. 491 1. Imágenes ..................................................................................................................................... 491 2. Flash ............................................................................................................................................ 494 3. La libreria SWFObject .................................................................................................................. 495 2. El archivo Robots.txt ................................................................................................................... 496 3. Mapa del Sitio o SiteMAP ............................................................................................................ 499

TEMA 7: LA PUBLICIDAD ONLINE O SEM ............................................................................................ 503 1. Glosario de términos SEM. .......................................................................................................... 503 2. Crear una campaña con Google Adwords ................................................................................... 505 3. Estructura de una Cuenta de Adwords........................................................................................ 510 4. Elección y búsqueda de palabras clave. ...................................................................................... 511 5. Red de Búsqueda de Google Adwords. Anuncios ....................................................................... 513 6. Red de Contenido de Google Adwords. Anuncios ....................................................................... 514 7. Facturación .................................................................................................................................. 517

TEMA 8: ANALÍTICA WEB ................................................................................................................. 519 1. Cómo hacer un seguimiento SEO desde Google Analytics.................................................... 519 2. Analítica web y optimización SEO ............................................................................................ 520 3. Cómo empezar con Google Analytics. ..................................................................................... 522 4. Cómo configurar Google Analytics. .......................................................................................... 524 5. ¿Cómo introducir el código de seguimiento de Google Analytics en su web? .................. 526 6. Insertar código de seguimiento Google Analytics en WordPress ......................................... 529 7. Comenzar a medir con Google Analytics ................................................................................ 530 8. Filtrar los resultados que ofrece Google analytics en sus informes .................................... 533

Módulo 1: Operaciones Básicas y Conceptos Digitales Tema 1: Introducción y conceptos básicos asociados alas Tic´s

8 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

MODULO 1: OPERACIONES BASICAS Y CONCEPTOS DIGITALES

TEMA 1: INTRODUCCION Y CONCEPTOS BASICOS ASOCIADOS A LAS TIC’s

1. Definición de TIC’s

Las Tecnologías de la Información y la Comunicación, también conocidas como TIC, son el conjunto de tecnologías desarrolladas para gestionar información y enviarla de un lugar a otro. Abarcan un abanico de soluciones muy amplio. Incluyen las tecnologías para almacenar información y recuperarla después, enviar y recibir información de un sitio a otro, o procesar información para poder calcular resultados y elaborar informes.

Si elaborásemos una lista con los usos que hacemos de las Tecnologías de la Información y la Comunicación sería prácticamente interminable:

• Internet de banda ancha

• Teléfonos móviles de última generación

• Televisión de alta definición

… son algunos de los avances que nos resultan más cotidianos. Pero hay muchos más:

• Códigos de barras para gestionar los productos en un supermercado

• Bandas magnéticas para operar con seguridad con las tarjetas de crédito

• Cámaras digitales

• Reproductores de MP3

Las Tecnologías de la Información y la Comunicación están presentes en nuestras vidas y la han transformado.

Esta revolución ha sido propiciada por la aparición de la tecnología digital. La tecnología digital, unida a la aparición de ordenadores cada vez más potentes, ha permitido a la humanidad progresar muy rápidamente en la ciencia y la técnica desplegando nuestro arma más poderosa: la información y el conocimiento.


9 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Hoy en día es imposible encontrar un solo instituto dedicado a investigar la ciencia y evolucionar la técnica que no disponga de los mejores y más sofisticados dispositivos de almacenamiento y procesado de información.

Pero no sólo eso, las Tecnologías de la Información y la Comunicación han transformado la gestión de las empresas y nuestra manera de hacer negocios:

• Para comunicarnos con nuestro clientes

• Para gestionar pedidos

• Para promocionar nuestros productos

• Para relacionarnos con la administración pública

2. ¿Para qué sirven las TIC?

Fácil acceso a la información en cualquier formato y de manera fácil y rápida.

1. Inmaterialidad. La digitalización nos permite disponer de información inmaterial, para almacenar grandes cantidades en pequeños soportes o acceder a información ubicada en dispositivos lejanos.

2. Instantaneidad. Podemos conseguir información y comunicarnos instantánea mente a pesar de encontrarnos a kilómetros de la fuente original.

3. Interactividad. Las nuevas TIC se caracterizan por permitir la comunicación bidireccional, entre personas o grupos sin importar donde se encuentren. Esta comunicación se realiza a través de páginas web, correo electrónico, foros, mensajería instantánea, videoconferencias, blogs o wikis entre otros sistemas.

4. Automatización de tareas. Las TIC han facilitado muchos aspectos de la vida de las personas gracias a esta característica. Con la automatización de tareas podemos, por ejemplo, programar actividades que realizaran automáticamente los ordenadores con total seguridad y efectividad.

3. ¿Qué tipos de TIC existen?

Podemos hacer una clasificación general de las tecnologías de la información y comunicación en redes, terminales y servicios que ofrecen.

1. Redes: la telefonía fija, la banda ancha, la telefonía móvil, las redes de televisión o las redes en el hogar son algunas de las redes de TIC.

2. Terminales: existen varios dispositivos o terminales que forman parte de las TIC. Estos son el ordenador, el navegador de Internet, los sistemas operativos para


10 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

ordenadores, los teléfonos móviles, los televisores, los reproductores portátiles de audio y video o las consolas de juego.

3. Servicios en las TIC: las TIC ofrecen varios servicios a los consumidores. Los más importantes son el correo electrónico, la búsqueda de información, la banca online, el audio y música, la televisión y el cine, el comercio electrónico, e-administración y e-gobierno, la e-sanidad, la educación, los videojuegos y los servicios móviles.

4. El futuro de las TIC ¿qué es lo próximo?

El mundo de las TIC está en constante cambio, porque las tecnologías e Internet son de los sectores con más novedades cada año y su crecimiento en el mercado es cada vez mayor. Los expertos en TIC son optimistas y auguran un futuro de crecimiento en estas tecnologías, pero sobretodo creen que serán tiempos para mejorar las herramientas actuales. Nos dirigimos a una época donde la integración de servicios es una realidad y su presencia en todos los aspectos de nuestra sociedad es más importante que nunca.

Tablets

Cada vez más pequeños, planos y con más capacidad y aplicaciones. El sector los sistemas informáticos portátiles será uno de los que experimente una evolución más importante. Sólo hay que ver la cantidad de dispositivos que han surgido en el último año o el volumen de ventas de aparatos como el iPad.

El mercado de los tablets crecerá no sólo en herramientas y aplicaciones sino también en oferta. En este sentido el iPad se encuentra ya con varios competidores, como el Galaxy Tab de Samsung.

Telefonía móvil

Los smartphones seguirán siendo el producto estrella. Estos teléfonos tendrán un mayor y mejor acceso a Internet y aumentarán sus aplicaciones, para facilitar la movilidad en múltiples tareas. Los sistemas operativos estarán más preparados y ello comportará una bajada de precios.

Se mantendrá la tendencia de uso de un smartphone tanto en el trabajo como con el ocio. No habrá modelos destinados para un ámbito u otro sino que se difuminará esta diferenciación.

Redes sociales y empresas

El número de usuarios particulares de redes sociales es ya más que importante y las empresas las utilizan cada vez más. Este crecimiento es tan grande que incluso hay quien dice que Facebook y Twitter podrían cobrar a las empresas que usen sus servicios.


11 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Sea como sea, el aumento de la presencia de las redes sociales en nuestra sociedad es tan grande que obligatoriamente conllevará una mayor preocupación por la privacidad y los derechos de imagen.

Cloud Computing

Gracias sobre todo a las redes sociales las empresas tendrán una mayor presencia en la red. El uso de herramientas y servicios de Internet les ayudará a aumentar la productividad, a eliminar hardware, a realizar operaciones, etc. De esta manera se prevé un gran crecimiento de Cloud Computing, que comportará que la nube crezca a un mayor ritmo del que está creciendo ahora.

Y además…

En los próximos meses aumentarán las aplicaciones TIC temáticas: sanidad, banca, administración, empleo, educación… De esta manera las acciones realizadas a través de Internet aumentarán mientras disminuyen las gestiones en persona.

Además, los expertos cuentan con una próxima generalización de la pizarra digital en las aulas y un aumento en herramientas y aplicaciones dirigidas a colectivos concretos, como desempleados o personas con algún tipo de discapacidad.

Por otro lado, la televisión inteligente empezará a tener una presencia destacada en nuestra sociedad y esto supondrá uno de los cambios más importantes que notaremos en el sector de las TIC.

5. Las TIC en el trabajo: empleo y empresas cada vez más tecnológicas

Las nuevas tecnologías han transformado el mundo laboral, tanto para la búsqueda de empleo, como para la contratación o la forma de trabajar. Las TIC se han incorporado al mundo laboral y empresarial y en los próximos años se prevé que esta tendencia aumente de manera importante.

Cómo buscar trabajo con la ayuda de las TIC

Internet se ha convertido en el medio más usado a la hora de buscar empleo con más del 80% de los casos. Páginas web y portales de empleo como Infojobs, Laboris o Infoempleo están surgiendo y creciendo para mostrar las ofertas de trabajo disponible de las empresas. Además, los usuarios pueden inscribirse a estas ofertas, recibirlas por correo electrónico, contactar con las empresas y enviar su currículum. Algunas de estas páginas se especializan por sectores, como Tecnoempleo e Itworks en tecnología, Turijobs en turismo, o Ambientum en medio ambiente.

Por otro lado, gracias a las TIC los departamentos de recursos humanos de las empresas pueden buscar información sobre sus candidatos por internet. Los blogs, páginas personales y redes sociales actúan como currículo de las personas.

http://www.iberestudios.com/redes-sociales

http://www.iberestudios.com/tic

http://www.iberestudios.com/recursos-humanos


12 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Contienen gran cantidad de información de su propietario, incluso de sus ideas y su opinión. Además, también demuestran la pasión que se tiene por la profesión y ayudan a destacar.

En los blogs, por ejemplo, los usuarios escriben sobre sus intereses, aficiones o su trabajo. O en el caso de los profesionales de la fotografía existen varias herramientas como Flickr que les permiten colgar en la red su trabajo. Las redes sociales Facebook y MySpace u otras como Neurona, eConozco, Viadeo o Linkedin también están enfocadas al mundo profesional.

6. ¿Cómo se benefician las empresas de las TIC?

Respecto a les beneficios que pueden sacar las empresas de su uso de las TIC encontramos varias características destacables. El uso de redes sociales u otras webs da visibilidad a una empresa y le ayudan a difundir su imagen corporativa. Esta es una manera muy eficaz de promocionar el producto, diferenciarse de los competidores y tener más presencia en la sociedad.

Las TIC también facilitan la comunicación entre los trabajadores y agilizan gestiones y tareas administrativas varias que se pueden automatizar o hacer por Internet sin tener que desplazarse.

Aportan nuevas formas de trabajo, como el teletrabajo, y suponen una reducción de costes debido a la digitalización de todos los contenidos, archivos y acciones. Además, son una herramienta ideal para la formación continua de los trabajadores, que pueden compaginar su trabajo con cursos online.

Todo ello favorece a un mejor ambiente de trabajo y una mayor productividad y, por lo tanto, aporta beneficios en las empresas.

7. Nuevas profesiones TIC: los perfiles más tecnológicos

La evolución de las TIC ha hecho surgir nuevas profesiones y perfiles profesionales. Solamente hace falta pensar en las veces que usamos cualquiera de las herramientas de información y comunicación, como la televisión, el ordenador, Internet… ¿Quiénes se encargan de hacer y gestionar todas estas herramientas?

La evolución de las nuevas tecnologías ha provocado un gran aumento de las profesiones del mundo de las TIC y de los estudios relacionados. Un ejemplo es que la demanda de los conocidos Community Managers se multiplicó por dos en 2010.

http://www.iberestudios.com/tic

Módulo 1: Operaciones Básicas y Conceptos Digitales Tema 2: Elementos de un sistema informático

13 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

TEMA2: ELEMENTOS DE UN SISTEMA INFORMATICO

Un ordenador o computadora es una máquina (sistema digital) con tecnología microelectrónica capaz de procesar datos a partir de un grupo de instrucciones denominado programa.

La característica principal que la distingue de otros dispositivos similares, como una calculadora no programable, es que puede realizar tareas muy diversas cargando distintos programas en la memoria para que los ejecute el procesador.

Los ordenadores:

Reciben entradas. Las entradas son los datos que se capturan en un sistema de computación para su procesamiento.

Procesan información.

Producen salidas. La salida es la presentación de los resultados del procesamiento.

Almacenan información.

En un ordenador podemos distinguir la parte física o hardware (elementos electrónicos y mecánicos) y la parte lógica o software (programas).

Una buena metáfora sería un libro: las páginas y la tinta son el hardware, mientras que las palabras, oraciones, párrafos y el significado del texto son el software. Una computadora sin software sería tan inútil como un libro con páginas en blanco.

Los elementos fundamentales que justifican el uso de los ordenadores, radican en:

• Su utilidad.

• Costes de adquisición relativamente bajos.

• Reducción de mano de obra.

• Facilidad de manejo.

1. Hardware

Llamamos hardware o soporte físico a los componentes materiales que componen un ordenador, tales como los componentes electrónicos y electromecánicos, cables, conectores, disqueteras, discos, tarjetas, circuitos, placas, cajas y periféricos de todo tipo (monitor, ratón, teclado… ).

Tipología y clasificaciones.

El hardware se clasifica generalmente en básico y complementario.

http://es.wikipedia.org/wiki/Microelectr%C3%B3nica

http://es.wikipedia.org/wiki/Programa_inform%C3%A1tico

http://es.wikipedia.org/wiki/Calculadora


14 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Por básico se entiende todo aquel dispositivo necesario para iniciar el ordenador, como son la CPU (unidad central de procesos), el monitor, ratón y teclado. El complementario sirve para realizar funciones específicas, estando formado por cualquier componente que no se incluya en los anteriores como son: impresora, vídeo cámara digital, escáner, etc.

En cuanto a los tipos de hardware podemos hacer la clasificación por la función de entrada o salida de datos que realizan los dispositivos externos (periféricos) del ordenador.

Periféricos de entrada:

Son los que permiten que el usuario aporte información exterior(teclado, ratón, escáner, micrófono, cámara, pantalla táctil, etc.).

Periféricos de salida:

Muestran al usuario el resultado de las operaciones realizadas por el PC. En este grupo se encuentran el monitor, la impresora, el plotter, etc.

Periféricos de entrada/salida:

Son los dispositivos que pueden aportar simultáneamente información exterior al PC y al usuario. Entre ellos están el módem (Modulador/Demodulador) y cualquier unidad de memoria secundaria.

Todo sistema de cómputo tiene componentes de hardware dedicados a estas funciones:

1. Dispositivos de entrada

Dispositivos de salida

Unidad central de procesamiento. Es la computadora real, la "inteligencia" de un sistema de computación.

1. Monitor 2. Placa base 3. Procesador 4. Puertos ATA 5. Memoria principal (RAM) 6. Placas de expansión 7. Fuente de alimentación 8. Unidad de almacenamiento óptico 9. Disco duro 10. Teclado 11. Ratón

http://es.wikipedia.org/wiki/Teclado

http://es.wikipedia.org/wiki/Rat%C3%B3n

http://es.wikipedia.org/wiki/Esc%C3%A1ner

http://es.wikipedia.org/wiki/Micr%C3%B3fono

http://es.wikipedia.org/wiki/C%C3%A1mara

http://es.wikipedia.org/wiki/M%C3%B3dem


15 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Memoria y dispositivos de almacenamiento.

Arquitectura de un equipo informático básico.

El concepto de Arquitectura de computadoras se define como las características visibles para el usuario de un ordenador relativas a las funcionalidades o prestaciones que una determinada configuración, estructura y tecnología de computadores puede brindar, por ejemplo aspectos relacionados con formato de instrucción, modo de direccionamiento de datos y conjunto de instrucciones, entre otros.

Entre las arquitecturas más importantes tenemos: Harvard y Von Neumann. Trataremos aquí esta última, por ser la más extendida.

La arquitectura Von Neumann se refiere a las arquitecturas de computadoras que utilizan el mismo dispositivo de almacenamiento tanto para las instrucciones como para los datos. Utiliza el concepto de “programa almacenado”.

Los ordenadores con esta arquitectura constan de cinco partes: La unidad aritmético-lógica o ALU, la unidad de control, la memoria, dispositivo de entrada/salida (E/S) y el bus del sistema que proporciona un medio de transporte de los datos, direcciones y control entre las distintas partes.

Un ordenador con arquitectura Von Neumann realiza los siguientes pasos secuencialmente:

1. Enciende el ordenador y obtiene la siguiente instrucción desde la memoria en la dirección indicada por el contador de programa y la guarda en el registro de instrucción.

2. Aumenta el contador de programa en la longitud de la instrucción para apuntar a la siguiente.

3. Descodifica la instrucción mediante la unidad de control. Ésta se encarga de coordinar el resto de componentes del ordenador para realizar una función determinada.

4. Se ejecuta la instrucción. Ésta puede cambiar el valor del contador del programa, permitiendo así operaciones repetitivas. El contador puede cambiar

http://es.wikipedia.org/w/index.php?title=Formato_de_instrucci%C3%B3n&action=edit

http://es.wikipedia.org/wiki/Unidad_de_control

http://es.wikipedia.org/wiki/Memoria_de_ordenador

http://es.wikipedia.org/wiki/Unidad_de_control


16 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

también cuando se cumpla una cierta condición aritmética, haciendo que el ordenador pueda 'tomar decisiones', que pueden alcanzar cualquier grado de complejidad, mediante la aritmética y lógica anteriores.

5. Vuelve al paso 1 a por la siguiente instrucción en la memoria.

Componentes.

Los principales componentes se alojan en la placa madre o placa base es latarjeta de circuitos impresos que sirve como medio de conexión entre el microprocesador, circuitos electrónicos de soporte, ranuras para conectar la memoria RAM del sistema, la ROM y ranuras especiales -slots- que permiten la conexión de tarjetas adaptadoras adicionales.

Microprocesador.

Se trata de un conjunto de circuitos electrónicos altamente integrados para cálculo y control computacional. El microprocesador es utilizado como Unidad Central de Proceso en un sistema microordenador y en otros dispositivos electrónicos complejos como teléfonos móviles.

Los parámetros significativos de un procesador son su ancho de bus (medido en bits), la frecuencia de reloj a la que trabajan (medida en hercios), y el tamaño de memoria caché (medido en kilobytes). Generalmente, el microprocesador tiene circuitos de almacenamiento (o memoria caché) y puertos de entrada/salida en el mismo circuito integrado (o chip).

http://es.wikipedia.org/wiki/Kilobyte


17 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

El zócalo es una matriz de pequeños agujeros existente en una placa base donde encajan sin dificultad los pines de un microprocesador; dicha matriz permite la conexión entre el microprocesador y la placa base. En los primeros ordenadores personales el microprocesador venía directamente soldado a la placa base, pero la aparición de una amplia gama de microprocesadores llevó a la creación del zócalo.

En general, cada familia de microprocesador requiere un tipo distinto de zócalo ya que existen diferencias en el número de pines, su disposición geométrica y la interconexión requerida con los componentes de la placa base. Por tanto, no es posible conectar un microprocesador a una placa base con un zócalo no diseñado para él.

Debido al gran calentamiento del microprocesador se sitúa encima de él un ventilador con la función de refrigerarlo. Pueden instalarse varios ventiladores dentro de la torre o carcasa formando un sistema de refrigeración.

Generalmente, el microprocesador tiene puertos de entrada/salida en el mismo circuito integrado. El chipset es un conjunto de circuitos integrados que se encarga de realizar las funciones que el microprocesador delega en ellos.

Los microprocesadores modernos están integrados por millones de transistores y otros componentes empaquetados en una cápsula cuyo tamaño varía según las necesidades de las aplicaciones a las que van dirigidas, y que van actualmente desde el tamaño de un grano de lenteja hasta el de casi una galleta. Las partes lógicas que componen un microprocesador son, entre otras: unidad aritmético-lógica, registros de almacenamiento, unidad de control, unidad de ejecución, memoria caché y buses de datos, control y dirección.

Puede estar constituido por uno o varios núcleos, en la actualidad el mercado dispone de procesadores de 4 núcleos (Core: i3, i5, i7).

Fabricantes de microprocesadores actualmente tenemos IBM, Intel, Zilog, Motorola, Cyrix, AMD.

Memoria principal.

Memoria en la que se carga el programa en ejecución. Permite tanto la lectura como la escritura. Es una memoria muy rápida en cuanto al acceso. Es la conocida por memoria RAM (memoria de acceso aleatorio). Es volátil, es decir, no permanente, ya que los datos desaparecen cuando se apaga el sistema.

La memoria RAM mantiene su contenido inalterado mientras esté alimentada.

http://es.wikipedia.org/wiki/Intel


18 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Las memorias se agrupan en módulos, que se conectan a la placa base del ordenador. Según los tipos de conectores que lleven los módulos, se clasifican en Módulos SIMM (Single In-line Memory Module), con 30 ó 72 contactos, módulos DIMM (Dual In-line Memory Module), con 168 contactos y módulos RIMM (RAMBUS In-line Memory Module) con 184 contactos.

Otros tipos de memoria.

Memoria ROM. Incorporada en la placa madre, es una memoria muy rápida, de sólo lectura que normalmente viene pregrabada de fábrica. Los datos contenidos en ella no se pierden cuando cesa la alimentación eléctrica. Suele tener almacenada la configuración física del ordenador, el BIOS (sistema básico de entrada/salida), que se encarga del arranque del ordenador, pues carga el sistema operativo en la memoria RAM.

Otros tipos de memoria de sólo lectura son la PROM, EPROM y EEPROM, con la particularidad de que se pueden programar y reprogramar.

Memoria caché. Con el aumento de la velocidad de proceso de los microprocesadores ocurrió la paradoja de que las memorias principales no eran suficientemente rápidas como para poder ofrecerles los datos que éstos necesitaban. Por esta razón, los ordenadores comenzaron a construirse con una memoria caché interna situada entre el microprocesador y la memoria principal para almacenar datos que se utilizan frecuentemente.

Es de acceso aleatorio (también conocida como acceso directo) y funciona de una manera similar a como lo hace la memoria principal (RAM), aunque es mucho más rápida.

Periféricos:

Dispositivos de Entrada/Salida.

Para que el ordenador pueda funcionar necesita otros componentes adicionales. Hay que introducir en el sistema tanto los datos como las instrucciones y para ello se necesita una unidad de entrada. Ésta contiene los componentes básicos que le permite aceptar datos e instrucciones y convertirlos a un formato interno capaz de ser utilizado por el sistema.

También se precisa una unidad de salida para poder sacar los resultados al mundo exterior.

La unidad de E/S es el tercer elemento clave de un computador (además del procesador y la memoria). Se puede ver la unidad de E/S como un conjunto de controladores de E/S; cada controlador se conecta al bus del sistema o a un conmutador centralizado y supervisa a uno o más dispositivos periféricos. Un

http://es.wikipedia.org/wiki/Microprocesador

http://es.wikipedia.org/wiki/RAM


19 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

controlador de E/S no es simplemente una conexión física entre un dispositivo externo y el bus del sistema, sino que dispone de la lógica necesaria para realizar una función de comunicación entre los periféricos del ordenador y el bus.

Los controladores de E/S tienen dos grandes funciones: comunicarse con la UCP y la memoria a través del bus del sistema, y comunicarse con uno o varios dispositivos periféricos mediante enlaces de datos adaptados a cada periférico.

Entre los componentes de entrada tenemos:

Teclado. Es un periférico de entrada de datos al dispositivo de Entrada. Funciona gracias a una estructura matricial, cada tecla está asociada a un código numérico, y es el software informático el que le aplica a ese código numérico un significado. Gracias a este sistema se puede utilizar un mismo teclado para diferentes idiomas, independientemente de los caracteres serigrafiados en él.

La conexión con el ordenador puede ser alámbrica, a través de conector PS-2 o USB, o inalámbrica, por infrarrojos o radiofrecuencia.

El teclado está dividido en 4 partes fundamentales: el teclado alfanumérico, el teclado numérico, las teclas de función, y las teclas de control.

• El teclado alfanumérico es similar al teclado de una máquina de escribir, dispone de todas las letras del alfabeto, los diez dígitos decimales y todos los signos de puntuación y acentuación, además de la barra espaciadora.

• El teclado numérico es como el de una calculadora, dispone de los diez dígitos decimales, las operaciones matemáticas más habituales (suma, resta, multiplicación y división) Además de la tecla “BloqNum” o “NumLock” que activa o desactiva este teclado.

• Las teclas de función se sitúan en la parte superior del teclado alfanumérico, van de la F1 ala F12, y son teclas que aportan atajos en el uso del sistema informático. Por ejemplo, al pulsar F1 se suele activar la ayuda del programa que se está usando. Algunos teclados modernos incluyen otro conjunto de teclas en la parte superior a las de función que permiten acceder a Internet, abrir el correo electrónico o controlar la reproducción de archivos multimedia. Estas teclas no tienen un carácter universal y dependen de cada fabricante, pero también se pueden considerar teclas de función.

• Las teclas de control se sitúan entre el teclado alfanumérico y el teclado numérico, y bordeando el teclado alfanumérico (Shift, Intro, Insert, Tabulador...)


20 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Estas teclas permiten controlar y actuar con los diferentes programas. De hecho, cambian de función según la aplicación que se está usando.

Ratón. Periférico de Entrada. Permite usar un dispositivo de señalización que, de forma conjunta con un programa gráfico, simplifica la labor de control y entrada de datos. Normalmente complementa la acción del teclado, reduciendo el uso del mismo en el control del programa.

Los tipos de ratón que hay actualmente en el mercado son mecánicos (figura de la izquierda), ópticos (figura de la derecha), trackBall (o de bola) y láser. A su vez por el tipo de conexión pueden ser alámbricos o inalámbricos, del tipo infrarrojos o radiofrecuencia. En los ordenadores portátiles podemos encontrar este dispositivo señalador en una pequeña superficie táctil.

Otros dispositivos de entrada de datos y control que podemos encontrarnos son el lápiz óptico, la tableta digitalizadora, pantallas táctiles y scanner.

Como componentes de Salida de datos destacamos el monitor y la impresora.

Monitor. Es la forma fundamental de salida de datos y comunicación del sistema con el usuario del mismo. A través de la tarjeta de vídeo se realiza la conversión de información interna entre el sistema y el monitor.

Según la tecnología utilizada se distinguen los monitores de tubos de rayos catódicos o CRT (figura de la izquierda) y los de LCD, pudiendo ser éstos del tipo TFT (figura de la derecha). Estos últimos se están imponiendo en los casos en que no sea necesaria una gran definición, ya sea por razones de espacio y por resultar menos perjudiciales para la vista.


21 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Impresora. Su función principal es pasar los datos (imágenes o textos) generados por el ordenador a un medio físico, papel, mediante el uso de cinta, cartucho de tinta o láser.

Los diferentes tipos de impresoras que podemos encontrar son:

Láser. Las impresoras de láser e impresoras de terminal utilizan este método para adherir tóner (tinta seca en polvo) al medio. El advenimiento de láseres de precisión a precio razonable ha hecho a la impresora monocromática basada en tóner ser dominante en aplicaciones para la oficina.

Chorro de tinta [Ink Jet]. Las impresoras de chorro de tinta rocían cantidades muy pequeñas de tinta (usualmente unos picolitros) hacia el medio. Para aplicaciones de color incluyendo impresión de fotos, los métodos de chorro de tinta son los que predominan.

Impacto [Impact]. Las impresoras de impacto se basan en la fuerza de impacto para transferir tinta al medio. De forma similar a las máquinas de escribir, están típicamente limitadas a reproducir texto. Una impresora de rueda de margarita es un tipo específico de impresora de impacto donde los tipos están contenidos radialmente en una rueda, de ahí su aspecto de una margarita.

Plotter. Sirven para hacer impresiones de dibujo de planos de arquitectura,

ingeniería y diseño industrial, para la impresión de láminas, posters, ampliaciones fotográficas, gigantografías, carteles en rutas, vía pública, señalización, etc.


22 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Impresoras 3D. Sirven para realizar objetos en tres dimensiones partiendo del

diseño en 3D de un objeto. “El incipiente mercado de impresión 3D de sobremesa continúa su impulso ascendente y sigue atrayendo a nuevos participantes de un amplio espectro de industrias. El pasado año ha crecido en un 124% con respecto al anterior.

Dispositivos de almacenamiento.

Memoria secundaria. Por este tipo de memoria se entiende toda aquella en que los datos contenidos son permanentes, salvo que el usuario los quiera borrar. Son por tanto memorias de lectura/escritura. Son ideales para almacenamiento de programas y datos a largo plazo. Por el contrario, tienen un tiempo de acceso mayor y son más lentas que la memoria principal. Los programas contenidos en estas memorias no se ejecutan directamente desde ellas, sino que son cargados previamente en la memoria principal (RAM).

Los dispositivos de memoria secundaria se pueden considerar periféricos de almacenamiento que quedan vinculados a la memoria principal, conformando el sistema de almacenamiento del ordenador.

Entre los soportes de memoria secundaria tenemos:

• Disco duro

• Disco sólido


23 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• Disquete

• Memoria flash

• Llavero USB

• CD, CD-R, CD-RW

• DVD, DVD-/+R, DVD-/+RW

• HD-DVD

• Blu-ray

• Cinta magnética

Disco duro. Se le conoce también como disco rígido (frente a los discos flexibles por su fabricación a base de una capa rígida de aluminio), y fijo (por su situación en el ordenador de manera permanente). Estas denominaciones aunque son las habituales no son exactas ya que existen discos de iguales prestaciones pero son flexibles, o bien removibles o transportables.

Estos discos pueden ser internos, como el de la figura, están dentro de la carcasa del ordenador, o externos, se conectan por conexión USB.

Las capacidades de los discos duros varían desde 10 Mb. hasta varios Tb. en minis y grandes ordenadores. Para conectar un disco duro a un ordenador es necesario disponer de una tarjeta controladora. La velocidad de acceso depende en gran parte de la tecnología del propio disco duro y de la tarjeta controladora asociada al disco duro.

http://www.monografias.com/trabajos15/cumplimiento-defectuoso/cumplimiento-defectuoso.shtml#INCUMPL

http://www.monografias.com/trabajos13/cinemat/cinemat2.shtml#TEORICO

http://www.monografias.com/Tecnologia/index.shtml


24 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Estos están compuestos por varios platos, es decir varios discos de material magnético montados sobre un eje central sobre el que se mueven. Para leer y escribir datos en estos platos se usan las cabezas de lectura/escritura que mediante un proceso electromagnético codifican / decodifican la información que han de leer o escribir. La cabeza de lectura/escritura en un disco duro está muy cerca de la superficie, de forma que casi vuela sobre ella, sobre el colchón de aire formado por su propio movimiento. Debido a esto están cerrados herméticamente porque cualquier partícula de polvo puede dañarlos.

Disco sólido SSD. (Solid State Drive). Aunque le llamemos disco, en realidad no tiene ningún componente de esta forma geométrica. Este tipo de almacenamiento no tiene componentes magnéticos como los discos, ni partes móviles ni cabezas lectoras, siendo por tanto más silenciosos, generan menos calor y son más fiables que los discos duros clásicos.

Están compuestos por varias memorias flash, hechas con semiconductores de silicio, con capacidades de hasta 500 Gb. El tiempo de acceso a los datos en esta unidad es unas 10 veces más rápido que en el disco duro y la velocidad de lectura y escritura aumentan 5 veces más, con lo cual el rendimiento del equipo mejora considerablemente.

Memorias Flash. Los principales usos de este tipo de memorias se dan en pequeños dispositivos basados en el uso de baterías como teléfonos móviles, PDA, pequeños electrodomésticos, cámaras de fotos digitales, reproductoras portátiles de audio, etc.

http://www.monografias.com/trabajos11/basda/basda.shtml

http://www.monografias.com/trabajos/aire/aire.shtml

http://www.monografias.com/trabajos15/kinesiologia-biomecanica/kinesiologia-biomecanica.shtml


25 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tarjetas de memoria y lector de tarjetas externo

Las capacidades de almacenamiento de estas tarjetas que integran memorias flash comenzaron en 8 MB pero actualmente se pueden encontrar en el mercado tarjetas de hasta 64 GB.

Necesitan un dispositivo lector de tarjetas bien interno o externo, utilizando éste último una conexión USB.

Ofrecen, además, gran resistencia a los golpes y son realmente muy silenciosas, ya que no contienen ni actuadores mecánicos ni partes móviles. Su pequeño tamaño también es un factor determinante a la hora de escogerlas para un dispositivo portátil, así como su ligereza y versatilidad para todos los usos hacia los que está orientado.

Memoria USB. También llamado lápiz de memoria o pendrive, sustituto de los discos flexibles y de capacidad variada, hasta de 256Gb y ampliándose cada vez más.

CD. El disco compacto (conocido popularmente como CD, del inglés compact disc) es un soporte digital óptico utilizado para almacenar cualquier tipo de información (audio, video, documentos). y minimizar esta forma de almacenamiento.

La información es almacenada en un sustrato de policarbonato plástico, al que se le añade una capa refractante de aluminio que reflejará la luz del láser; se le añade una capa protectora que lo cubre y, opcionalmente, una etiqueta en la parte superior.

Las capacidades van desde 650 MB o 74 minutos de audio a 875 MB o 100 minutos de audio.

Los tipos de CD que existen se clasifican en: CD-ROM (sólo lectura), CD-R (grabable), y CD-RW (regrabable).

DVD. Digital Versatile Disc. Aunque también se le puede denominar como "Digital Video Disc". Es un formato multimedia de almacenamiento óptico que puede ser usado

http://es.wikipedia.org/wiki/Idioma_ingl%C3%A9s

http://es.wikipedia.org/wiki/%C3%93ptica

http://es.wikipedia.org/wiki/Audio

http://es.wikipedia.org/wiki/V%C3%ADdeo

http://es.wikipedia.org/wiki/L%C3%A1ser


26 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

para guardar datos, incluyendo películas con alta calidad de vídeo y audio. Se asemeja a los discos compactos en cuanto a sus dimensiones físicas (diámetro de 12 u 8 cm.), pero está codificado en un formato distinto y a una densidad mucho mayor. A diferencia de los CDs, todos los DVDs deben guardar los datos utilizando un sistema de archivos denominado UDF, el cual es una extensión del estándar ISO 9660, usado para CDs de datos.

Un DVD de capa simple puede guardar hasta 4.7 gigabytes (se le conoce como DVD-5), alrededor de siete veces más que un CD estándar.

HD-DVD. Es un DVD que permite grabar sonidos y películas en alta definición, teniendo una capacidad de hasta 30 Gb.

Blu-ray. Llamado también disco azul, cuya tecnología permite tener una capacidad de hasta 50 Gb.

Dispositivos multimedia.

Multimedia es un sistema que utiliza más de un medio de comunicación al mismo tiempo en la presentación de la información, como texto, imagen, animación, vídeo y sonido.

Entre los dispositivos más relevantes de multimedia tenemos las tarjetas de sonido y de vídeo, que permiten la inclusión en el PC bien de sonido (tanto de un micrófono como de un equipo de sonido) o de vídeo (de una cámara o de un reproductor de vídeo), así como reproducir sonido con alta calidad por unos altavoces externos al PC o por un equipo musical (MIDI). Actualmente estas tarjetas vienen incorporadas en la placa madre, disponiendo de los conectores apropiados de entrada y salida.


27 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

La multimedia es muy usada en la industria del entretenimiento, para desarrollar especialmente efectos especiales en películas y la animación para los personajes de caricaturas. Los juegos de la multimedia son un pasatiempo popular y son programas disponibles en CD-ROMs, DVDs., o disponibles en línea. Algunos juegos de video también utilizan características de la multimedia. Los usos de la multimedia permiten que los usuarios participen activamente. La multimedia es interactiva.

Tipos de información Multimedia:

• Texto: sin formatear, formateado, lineal e hipertexto.

• Gráficos: utilizados para representar esquemas, planos, dibujos lineales...

Imágenes: son documentos formados por píxeles. Pueden generarse por copia del entorno (escaneado, fotografía digital) y tienden a ser ficheros muy voluminosos.

Animación: presentación de un número de gráficos por segundo que genera en el observador la sensación de movimiento.

Vídeo: Presentación de un número de imágenes por segundo, que crean en el observador la sensación de movimiento.

Sonido: puede ser voz, música u otros sonidos.

Conectores, puertos.

La conectividad del PC no es algo muy complicado, pero si no se conocen los tipos de conectores estándares que se utilizan para los diferentes periféricos puede que nos perdamos leyendo las especificaciones de éstos. Además, el saber qué tipo de conector es cada uno nos va a ayudar a elegir los cables adecuados y a saber si necesitamos un adaptador para ese nuevo dispositivo que hemos adquirido.

Las conexiones que se establecen con el PC sirven para enviar y recibir información. A los conectores del ordenador se les llama puertos.

Puerto serie. Normalmente éstos suelen ser 2 en una placa base, y son denominados COM1 y COM2. A ellos pueden conectarse periféricos como ratones o módems. Ya prácticamente en desuso.

Puerto paralelo. Este tipo de puerto ha sido ampliamente utilizado para conectar impresoras. También ha quedado obsoleto.


28 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Puerto PS/2. Una placa base suele contener dos, en los que se conectan el teclado (color morado) y el ratón (color verde). Son conectores de tipo mini-DIN de seis patillas. Su nombre viene del uso que se le daba en los antiguos ordenadores de IBM PS/2 (Personal System/2).

Puerto USB (Universal Serial Bus). Puertos de gran velocidad, son pequeños, con una forma alargada y estrecha. Suministran al periférico la energía sin tener que estar conectado éste a la red eléctrica, permite un cableado de hasta 5 metros de longitud, y la conexión de hasta 126 dispositivos.

IEEE 1394 o Firewire. También conocido como i.Link, es un interfaz que transmite datos a grandes velocidades. Llega a velocidades de transferencia de 400 Mbits por segundo.

Puerto para juegos o MIDI. A este puerto se conectan joysticks y mandos de juegos, aunque también permite la conexión de dispositivos de audio como teclados MIDI.

Conectores de audio minijack. Pueden ir incluidos también en la placa base, y suelen ser estéreo, siendo los más habituales los de entrada y/o salida de línea, entrada de micrófono y salida de altavoces.

S/PDIF óptico. Tipo de salida de audio digital.

Conector VGA. Es un conector estándar de la tarjeta gráfica, de 15 pines, y que se utiliza para conectar el monitor o una pantalla.

Salida TV. Este tipo de conector sirve para conectar a la televisión. Manda la señal S-video, además de la de sonido.

DVI. Salida de video digital, en la que la señal no pierde calidad, con lo que es perfecto para dispositivos que lo aceptan, ya que aprovechamos al máximo la calidad de la imagen digital.

HDMI. Pasa tanto Audio como vídeo digital. Puerto que permite conexiones muy rápidas sin pérdida de señal.

RJ-11. Conector de 4 alambres que tienen los módems. Sirve para conectar con la línea telefónica.

RJ-45. Conector de 8 alambres estándar de Ethernet, el tipo de redes LAN (red de área local) más utilizado. Soporta diferentes tipos de cable, para las distintas especificaciones


29 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

de redes.

Puerto de infrarrojos. Este es un tipo de conexión sin cables, que utiliza los rayos infrarrojos para conectar los diferentes dispositivos los cuales tienen que estar en contacto visual para que la comunicación sea efectiva. También ha quedado obsoleto por la poca velocidad de transmisión de datos.

Bluetooth. Proporciona una vía de interconexión inalámbrica entre diversos aparatos que tengan dentro de sí esta tecnología, como móviles, consolas, ordenadores de mano (Palm, Pocket PC), cámaras, ordenadores portátiles, impresoras, o simplemente cualquier dispositivo que un fabricante considere oportuno, usando siempre una conexión segura de radio de muy corto alcance. El alcance que logran tener estos dispositivos es de 10 a 30 metros. Para mejorar la comunicación es recomendable que nada físico (como una pared) se interponga.

Red WIFI. El wifi (nombre común en español proveniente de la marca Wi-Fi)1 es un mecanismo de conexión de dispositivos electrónicos de forma inalámbrica. Wi-Fi es una marca de la Wi-Fi Alliance, la organización comercial que adopta, prueba y certifica que los equipos cumplen las normas 802.11 relacionados a redes inalámbricas de área local.

Dispositivos

Router wifi

Existen varios dispositivos wifi, los cuales se pueden dividir en dos grupos: dispositivos de distribución o de red, entre los que destacan los enrutadores, puntos de acceso y repetidores; y dispositivos terminales que en general son las tarjetas receptoras para conectar a la computadora personal, ya sean internas (tarjetas PCI) o bien USB.

• Dispositivos de distribución o de red:

https://commons.wikimedia.org/wiki/File:ModemWiFi.JPG






http://es.wikipedia.org/wiki/Ordenador_port%C3%A1til

https://es.wikipedia.org/wiki/Sustantivo

https://es.wikipedia.org/wiki/Idioma_espa%C3%B1ol

https://es.wikipedia.org/wiki/Wifi#cite_note-fundeu-1

https://es.wikipedia.org/wiki/Comunicaci%C3%B3n_inal%C3%A1mbrica

https://es.wikipedia.org/wiki/Wi-Fi_Alliance

https://es.wikipedia.org/wiki/IEEE_802.11

https://es.wikipedia.org/wiki/Peripheral_Component_Interconnect

https://es.wikipedia.org/wiki/Universal_Serial_Bus




30 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• Los puntos de acceso son dispositivos que generan un "set de servicio", que podría definirse como una "Red wifi" a la que se pueden conectar otros dispositivos. Los puntos de acceso permiten, en resumen, conectar dispositivos de forma inalámbrica a una red existente. Pueden agregarse más puntos de acceso a una red para generar redes de cobertura más amplia, o conectar antenas más grandes que amplifiquen la señal.

• Los repetidores inalámbricos son equipos que se utilizan para extender la cobertura de una red inalámbrica, éstos se conectan a una red existente que tiene señal más débil y crean una señal limpia a la que se pueden conectar los equipos dentro de su alcance. Algunos de ellos funcionan también como punto de acceso.4

• Los enrutadores inalámbricos son dispositivos compuestos, especialmente diseñados para redes pequeñas (hogar o pequeña oficina). Estos dispositivos incluyen, un enrutador (encargado de interconectar redes, por ejemplo, nuestra red del hogar con Internet), un punto de acceso (explicado más arriba) y generalmente un conmutador que permite conectar algunos equipos vía cable (Ethernet y USB). Su tarea es tomar la conexión a Internet, y brindar a través de ella acceso a todos los equipos que conectemos, sea por cable o en forma inalámbrica.

• Los dispositivos terminales abarcan tres tipos mayoritarios: tarjetas PCI, tarjetas PCMCIA y tarjetas USB:

o El wifi puede ser desactivado por un terminal del dispositivo.

o Las tarjetas PCI para wifi se agregan (o vienen de fábrica) a los ordenadores de sobremesa. Hoy en día están perdiendo terreno debido a las tarjetas USB. Dentro de este grupo también pueden agregarse las tarjetas MiniPCI que vienen integradas en casi cualquier computador portátil disponible hoy en el mercado.

o Las tarjetas PCMCIA son un modelo que se utilizó mucho en los primeros ordenadores portátiles, aunque están cayendo en desuso, debido a la integración de tarjeta inalámbricas internas en estos ordenadores. La mayor parte de estas tarjetas solo son capaces de llegar hasta la tecnología B de wifi, no permitiendo por tanto disfrutar de una velocidad de transmisión demasiado elevada

o Las tarjetas USB para wifi son el tipo de tarjeta más común que existe en las tiendas y más sencillo de conectar a unpc, ya sea de sobremesa o portátil, haciendo uso de todas las ventajas que tiene la tecnología USB. Hoy en día puede encontrarse incluso tarjetas USB con el estándar 802.11N (Wireless-N) que es el último estándar liberado para redes inalámbricas.

o También existen impresoras, cámaras Web y otros periféricos que funcionan con la tecnología wifi, permitiendo un ahorro de mucho cableado en las instalaciones de redes y especialmente, gran movilidad.

https://es.wikipedia.org/wiki/Punto_de_acceso

https://es.wikipedia.org/wiki/Repetidor

https://es.wikipedia.org/wiki/Wifi#cite_note-4

https://es.wikipedia.org/wiki/Router

https://es.wikipedia.org/wiki/Conmutador

https://es.wikipedia.org/wiki/Ethernet

https://es.wikipedia.org/wiki/USB


https://es.wikipedia.org/wiki/PCMCIA



https://es.wikipedia.org/wiki/Computadora


https://es.wikipedia.org/wiki/Computadora_port%C3%A1til

https://es.wikipedia.org/wiki/IEEE_802.11


https://es.wikipedia.org/wiki/Ordenador



31 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

En relación con los manejadores de dispositivo, existen directorios de circuito integrado auxiliar de adaptadores inalámbricos.

2. Software.

Definición y tipos de Software.

La definición más formal de software es la atribuida a la IEEE (Instituto de Ingeniería Eléctrica y Electrónica) en su estándar 729: «la suma total de los programas de cómputo, procedimientos, reglas, documentación y datos asociados que forman parte de las operaciones de un sistema de cómputo». Bajo esta definición el concepto de software va más allá de los programas de cómputo en sus distintas formas: código fuente, binario o ejecutable, además de su documentación: es decir, todo lo intangible.

El software suele dividirse en tres tipos principales:

Software de sistema, que permite funcionar al hardware. Su objetivo es aislar tanto como sea posible al programador de aplicaciones de los detalles del computador particular que se use, especialmente de las características físicas de la memoria, dispositivos de comunicaciones, impresoras, pantallas, teclados, etcétera. Incluye entre otros:

• Sistemas operativos

• Controladores de dispositivo

• Herramientas de diagnóstico

• Servidores

• Utilidades

Software de programación, que proporciona herramientas para ayudar al programador a escribir programas informáticos y a usar diferentes lenguajes de programación de forma práctica. Incluye entre otros:

• Editores de texto

• Compiladores

• Intérpretes

• Enlazadores

• Depuradores

Los entornos integrados de desarrollo (IDE) agrupan estas herramientas de forma que el programador no necesite introducir múltiples comandos para compilar, interpretar, depurar, etcétera, gracias a que habitualmente cuentan con una interfaz gráfica de usuario (GUI) avanzada.

https://es.wikipedia.org/wiki/Chipset

https://es.wikipedia.org/wiki/Chipset


32 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Software de aplicación, que permite a los usuarios llevar a cabo una o varias tareas más específicas en cualquier campo de actividad susceptible de ser automatizado o asistido, con especial énfasis en los negocios. Incluye entre otros:

Aplicaciones de automatización industrial

Aplicaciones ofimáticas

Software educativo

Software médico

Bases de datos

Videojuegos

Sistemas operativos

De los programas de sistema el más importante es el sistema operativo, cuya misión es que el ordenador se pueda utilizar de una manera cómoda y eficiente, proporcionando un caparazón a la máquina para dar la apariencia de una máquina virtual y poder gestionar los recursos del hardware. Es además el programa que controla la ejecución de los programas de aplicaciones y actúa como interfaz entre los usuarios del ordenador y el hardware del mismo.

Objetivos.

Los objetivos básicos del sistema operativo son:

• Comodidad para los usuarios. El sistema operativo hace que el ordenador sea más fácil de utilizar. Hace que los usuarios vean una máquina virtual, más sencilla de programar y de utilizar que la máquina desnuda.

Oculta al usuario la complejidad de las operaciones de bajo nivel. Por ejemplo, para hacer la escritura en disco hay que verificar si el motor está funcionando, si no lo está dar la orden de arranque, esperar a que gire a la velocidad adecuada, dar las órdenes de posicionamiento del brazo en el sector y pista adecuada, ordenar la escritura, etc. En lugar de todo esto el SO hace que el usuario vea el disco como un conjunto de archivos, de forma que cuando se quiere escribir algo sólo hay que indicar el nombre de archivo.

• Eficiencia. El SO gestiona los recursos del sistema de forma eficaz. Hace la función de un gestor de recursos, proporcionando a los programas que compiten por estos recursos una asignación ordenada y controlada del procesador, memoria y periféricos pero con la peculiaridad de que el propio SO se ejecuta al mismo tiempo, cediendo y recuperando el control del procesador para que el sistema funcione con eficiencia.


33 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Composición.

Aunque no todos los sistemas operativos tienen la misma estructura, es usual dividirlos en el siguiente conjunto de componentes básicos:

• Gestor de procesos.

• Gestor de la memoria principal.

• Gestor del almacenamiento secundario y del sistema de archivos.

• Gestor del sistema de E/S.

• Sistema de protección.

• Sistema de comunicación.

• Intérprete de órdenes.

Módulo 1: Operaciones Básicas y Conceptos Digitales Tema 3: Elementos de un sistema de comunicaciones en red

34 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

TEMA 3: ELEMENTOS DE UN SISTEMA DE COMUNICACIONES EN RED

1. Concepto de red de comunicación

Una red de ordenadores, red de comunicaciones de datos o red informática, es un conjunto de equipos informáticos y software conectados entre sí por medio de dispositivos físicos que envían y reciben impulsos eléctricos, ondas electromagnéticas o cualquier otro medio para el transporte de datos, con la finalidad de compartir información, recursos y ofrecer servicios.

Como en todo proceso de comunicación se requiere de un emisor, un mensaje, un medio y un receptor. La finalidad principal para la creación de una red de computadoras es compartir los recursos y la información en la distancia, asegurar la confiabilidad y la disponibilidad de la información, aumentar la velocidad de transmisión de los datos y reducir el costo general de estas acciones. Un ejemplo es Internet, la cual es una gran red de millones de computadoras ubicadas en distintos puntos del planeta interconectadas básicamente para compartir información y recursos.

La comunicación por medio de una red se lleva a cabo en dos diferentes categorías: la capa física y la capa lógica.

La capa física incluye todos los elementos de los que hace uso un equipo para comunicarse con otros equipos dentro de la red, como, por ejemplo, las tarjetas de red, los cables, las antenas, etc.

La comunicación a través de la capa física se rige por normas muy rudimentarias que por sí mismas resultan de escasa utilidad. Sin embargo, haciendo uso de dichas normas es posible construir los denominados protocolos, que son normas de comunicación más complejas (mejor conocidas como de alto nivel), capaces de proporcionar servicios que resultan útiles.

2. Componentes básicos de las redes

Para poder formar una red se requieren elementos: hardware, software y protocolos. Los elementos físicos se clasifican en dos grandes grupos: dispositivos de usuario final (hosts) y dispositivos de red. Los dispositivos de usuario final incluyen los computadores, impresoras, escáneres, y demás elementos que brindan servicios directamente al usuario y los segundos son todos aquellos que conectan entre sí a los dispositivos de usuario final, posibilitando su intercomunicación.

El fin de una red es la de interconectar los componentes hardware de una red , y por tanto, principalmente, las computadoras individuales, también denominados hosts, a los equipos que ponen los servicios en la red, los servidores, utilizando el cableado o tecnología inalámbrica soportada por la electrónica de red y unidos por cableado o radiofrecuencia. En todos los casos la tarjeta de red se puede considerar el elemento

https://es.wikipedia.org/wiki/Hardware

https://es.wikipedia.org/wiki/Software

https://es.wikipedia.org/wiki/Hardware_de_red

https://es.wikipedia.org/wiki/Corriente_el%C3%A9ctrica

https://es.wikipedia.org/wiki/Radiaci%C3%B3n_electromagn%C3%A9tica

https://es.wikipedia.org/wiki/Radiaci%C3%B3n_electromagn%C3%A9tica

https://es.wikipedia.org/wiki/Dato

https://es.wikipedia.org/wiki/Servicio_de_red

https://es.wikipedia.org/wiki/Comunicaci%C3%B3n

https://es.wikipedia.org/wiki/Emisor

https://es.wikipedia.org/wiki/Mensaje

https://es.wikipedia.org/wiki/Medio_de_comunicaci%C3%B3n

https://es.wikipedia.org/wiki/Receptor_(comunicaci%C3%B3n)

https://es.wikipedia.org/wiki/Integridad_de_datos

https://es.wikipedia.org/wiki/Velocidad_de_conexi%C3%B3n

https://es.wikipedia.org/wiki/Velocidad_de_conexi%C3%B3n

https://es.wikipedia.org/wiki/Internet

https://es.wikipedia.org/wiki/Computadora_personal

https://es.wikipedia.org/wiki/Servidor


35 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

primordial, sea ésta parte de un ordenador, de un conmutador, de una impresora, etc. y sea de la tecnología que sea (ethernet, Wi-Fi, Bluetooth, etc.)

Software

• Sistema operativo de red: permite la interconexión de ordenadores para poder acceder a los servicios y recursos. Al igual que un equipo no puede trabajar sin un sistema operativo, una red de equipos no puede funcionar sin un sistema operativo de red. En muchos casos el sistema operativo de red es parte del sistema de los servidores y de los clientes.

• Software de aplicación: en última instancia, todos los elementos se utilizan para que el usuario de cada estación, pueda utilizar sus programas y archivos específicos. Este software puede ser tan amplio como se necesite ya que puede incluir procesadores de texto, paquetes integrados, sistemas administrativos de contabilidad y áreas afines, sistemas especializados, correos electrónicos, etc. El software adecuado en el sistema operativo de red elegido y con los protocolos necesarios permiten crear servidores para aquellos servicios que se necesiten.

Hardware

Para lograr el enlace entre las computadoras y los medios de transmisión (cables de red o medios físicos para redes alámbricas e infrarrojos o radiofrecuencias para redes inalámbricas), es necesaria la intervención de una tarjeta de red (NIC, Network Card Interface), con la cual se puedan enviar y recibir paquetes de datos desde y hacia otras computadoras, empleando un protocolo para su comunicación y convirtiendo a esos datos a un formato que pueda ser transmitido por el medio (bits, ceros y unos). Cabe señalar que a cada tarjeta de red le es asignado un identificador único por su fabricante, conocido como dirección MAC (Media Access Control), que consta de 48 bits (6 bytes). Dicho identificador permite direccionar el tráfico de datos de la red del emisor al receptor adecuado.

El trabajo del adaptador de red es el de convertir las señales eléctricas que viajan por el cable (p.e.: red Ethernet) o las ondas de radio (p.e.: red Wi-Fi) en una señal que pueda interpretar el ordenador.

Estos adaptadores son unas tarjetas PCI que se conectan en las ranuras de expansión del ordenador. En el caso de ordenadores portátiles, estas tarjetas vienen en formato PCMCIA o similares. En los ordenadores del siglo XXI, tanto de sobremesa como portátiles, estas tarjetas ya vienen integradas en la placa base.

Adaptador de red es el nombre genérico que reciben los dispositivos encargados de realizar dicha conversión. Esto significa que estos adaptadores pueden ser tanto Ethernet, como wireless, así como de otros tipos como fibra óptica, coaxial, etc. También las velocidades disponibles varían según el tipo de adaptador; éstas pueden ser, en Ethernet, de 10, 100, 1000 Mbps o 10000, y en los inalámbricos, principalmente, de 11, 54, 300 Mbps.

https://es.wikipedia.org/wiki/Sistema_operativo_de_red

https://es.wikipedia.org/wiki/Aplicaci%C3%B3n_inform%C3%A1tica

https://es.wikipedia.org/wiki/Bit

https://es.wikipedia.org/wiki/Direcci%C3%B3n_MAC

https://es.wikipedia.org/wiki/Bit

https://es.wikipedia.org/wiki/Byte

https://es.wikipedia.org/wiki/Ethernet

https://es.wikipedia.org/wiki/Wi-Fi



https://es.wikipedia.org/wiki/Placa_base

https://es.wikipedia.org/wiki/Wireless


36 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Dispositivos de usuario final

• Computadoras personales: son los puestos de trabajo habituales de las redes. Dentro de la categoría de computadoras, y más concretamente computadoras personales, se engloban todos los que se utilizan para distintas funciones, según el trabajo que realizan. Se incluyen desde las potentes estaciones de trabajo para la edición de vídeo, por ejemplo, hasta los ligeros equipos portátiles, conocidos como netbooks, cuya función principal es la de navegar por Internet. Las tabletas se popularizaron al final de la primera década del siglo XXI, especialmente por el éxito del iPad de Apple.

• Terminal: muchas redes utilizan este tipo de equipo en lugar de puestos de trabajo para la entrada de datos. En estos sólo se exhiben datos o se introducen. Este tipo de terminales, trabajan unido a un servidor, que es quien realmente procesa los datos y envía pantallas de datos a los terminales.

• Electrónica del hogar: las tarjetas de red empezaron a integrarse, de forma habitual, desde la primera década del siglo XXI, en muchos elementos habituales de los hogares: televisores, equipos multimedia, proyectores, videoconsolas, teléfonos celulares, libros electrónicos, etc. e incluso en electrodomésticos, como frigoríficos, convirtiéndolos en partes de las redes junto a los tradiciones ordenadores.

• Impresoras: muchos de estos dispositivos son capaces de actuar como parte de una red de ordenadores sin ningún otro elemento, tal como un print server, actuando como intermediario entre la impresora y el dispositivo que está solicitando un trabajo de impresión de ser terminado. Los medios de conectividad de estos dispositivos pueden ser alambricos o inalámbricos, dentro de este último puede ser mediante: ethernet, Wi-Fi, infrarrojo o bluetooth. En algunos casos se integran dentro de la impresora y en otros por medio de convertidores externos.

• Otros elementos: escáneres, lectores de CD-ROM.

3. Dispositivos de red

Los equipos informáticos descritos necesitan de una determinada tecnología que forme la red en cuestión. Según las necesidades se deben seleccionar los elementos adecuados para poder completar el sistema. Por ejemplo, si queremos unir los equipos de una oficina entre ellos debemos conectarlos por medio de un conmutador o un concentrador, si además hay un varios portátiles con tarjetas de red Wi-Fi debemos conectar un punto de acceso inalámbrico para que recoja sus señales y pueda enviarles las que les correspondan, a su vez el punto de acceso estará conectado al conmutador por un cable. Si todos ellos deben disponer de acceso a Internet, se interconectaran por medio de un router, que podría ser ADSL, ethernet sobre fibra óptica, broadband, etc.

Los elementos de la electrónica de red más habituales son:

https://es.wikipedia.org/wiki/Computadora_personal



https://es.wikipedia.org/wiki/Apple_Inc.

https://es.wikipedia.org/wiki/Terminal_(inform%C3%A1tica)

https://es.wikipedia.org/wiki/Electr%C3%B3nica_de_consumo

https://es.wikipedia.org/wiki/Libro_electr%C3%B3nico

https://es.wikipedia.org/wiki/Libro_electr%C3%B3nico

https://es.wikipedia.org/wiki/Impresora

https://es.wikipedia.org/wiki/Bluetooth

https://es.wikipedia.org/wiki/Internet


37 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• Conmutador de red (switch),

• Enrutador (router),

• Puente de red (bridge),

• Puente de red y enrutador (brouter),

• Punto de acceso inalámbrico (Wireless Access Point, WAP).

4. Topologías de red básicas

Introducción

El término topología se refiere a la forma en que está diseñada la red, bien físicamente (rigiéndose de algunas características en su hardware) o bien lógicamente (basándose en las características internas de su software).

Las redes Ethernet a menudo están formadas por múltiples segmentos individuales interconectados por repetidores. Los segmentos están interconectados entre si siguiendo lo que se denomina un patrón. Cada segmento Ethernet es una rama individual de la red completa.

La topología de red es la representación geométrica de la relación entre todos las ramas y los dispositivos que los enlazan entre sí (habitualmente denominados nodos).

Para el día de hoy, existen al menos cinco posibles topologías de red básicas: malla, estrella, árbol, bus y anillo. Sin embargo en la red Ethernet solo utilizamos la topología estrella y bus.


38 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Topología Bus

Una topología en bus es multipunto. Un cable largo actúa como una red troncal que conecta todos los dispositivos en la red. Este cable provee un camino para las señales eléctricas que es común para todos los dispositivos conectados y transporta todas las transmisiones entre los dispositivos.

Los nodos se conectan al bus mediante cables de conexión (latiguillos) y sondas. Un cable de conexión es una conexión que va desde el dispositivo al cable principal. Una sonda es un conector que, o bien se conecta al cable principal, o se pincha en el cable para crear un contacto con el núcleo metálico.


39 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Entre las ventajas de la topología de bus se incluye la sencillez de instalación. El cable troncal puede tenderse por el camino más eficiente y, después, los nodos se pueden conectar al mismo mediante líneas de conexión de longitud variable. De esta forma se puede conseguir que un bus use menos cable que una malla, una estrella o una topología en árbol. Un problema asociado con el diseño bus de cableado es que un fallo en cualquier parte del cable va a interrumpir el camino eléctrico. Como resultado, la operación de todos los dispositivos conectados será interrumpida.

Los dispositivos conectados a un segmento de cable siguen una topología conocida como cadena tipo margarita. En esta topología, un cable conectado a un conector T BNC en un dispositivo es conectado a otro conector T en el siguiente dispositivo y así sucesivamente. Los conectores T que se encuentran en los extremos opuestos del segmento son terminales. Si cualquier cable es removido incorrectamente del conector T, todo el segmento queda sin funcionar para todos los dispositivos conectados. Si el conector T es removido de la interfaz de red Ethernet, el segmento continúa funcionando, ya que la continuidad del cable coaxial no ha sido interrumpida.

También es posible tener segmentos punto a punto en un ambiente de cable delgado. Utilizando un repetidor multipuerto se puede conectar un segmento en forma directa a un dispositivo. Esto limita el número de dispositivos que pueden ser afectados por el daño a un cable específico.

Topología Árbol

Es una topología de red en la que los nodos están colocados en forma de árbol. Desde una visión topológica, la conexión en árbol es parecida a una serie de redes en estrella interconectadas salvo en que no tiene un nodo central. En cambio, tiene un nodo de enlace troncal, generalmente ocupado por un hub o switch, desde el que se ramifican los demás nodos, al que hay conectar las redes individuales en bus. Por lo tanto árbol combina características de la topología de estrella con la de bus.

En esta topología podemos encontrarnos ventajas como la facilidad de crecimiento de la red, sin embargo, existen desventajas como que su configuración es más complicada y que si falla el segmento principal toda la red queda inutilizada.

Topología Estrella

En la topología en estrella cada dispositivo solamente tiene un enlace punto a punto dedicado con el controlador central, habitualmente llamado concentrador. Los dispositivos no están directamente enlazados entre sí, sino a un concentrador o hub


40 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

central, formando un segmento. Las señales de cada dispositivo conectado son enviadas al hub y luego difundidas a todos los otros dispositivos conectados. Este diseño permite a Ethernet operar lógicamente como un bus, pero físicamente el bus solo existe en el hub.

A diferencia de otras topologías, la topología en estrella no permite el tráfico directo de dispositivos. El controlador actúa como un intercambiador, si un dispositivo quiere enviar datos a otro, envía los datos al controlador, que los retransmite al dispositivo final.

El controlador usa mecanismos de filtrado y conmutación muy similares a los utilizados por las puertas de enlace, Inspecciona las direcciones de origen y destino de los mensajes, genera una tabla que le permite saber qué equipo se conecta a qué puerto del controlador (en general este proceso se hace por auto aprendizaje, es decir, de manera automática pero el administrador del controlador puede realizar ajustes adicionales).

Al conocer el puerto receptor, el controlador sólo transmitirá el mensaje al puerto adecuado mientras que los otros puertos permanecerán libres para otras transmisiones que pueden ser realizadas simultáneamente.

Como resultado, cada intercambio puede llevarse a cabo a una velocidad nominal (mayor división de ancho de banda), sin colisiones y con un aumento considerable en el ancho de banda de la red (también a una velocidad nominal).

El correcto funcionamiento de la comunicación requiere que el tiempo de ida y vuelta entre dos estaciones cualesquiera de la red no supere el tiempo que tarda en emitirse la trama mínima permitida. Este tiempo, que depende de la velocidad de la red, fija a su vez unas distancias máximas entre las estaciones. Estos cuatro parámetros (velocidad de la red, tamaño de trama mínimo, tiempo de ida y vuelta y distancia máxima) están relacionados entre sí, como se muestra en la tabla siguiente:

Las distancias indicadas en la tabla son el caso óptimo; en la práctica la distancia depende de múltiples factores, como el número de repetidores intermedios o el tipo de cable utilizado. La comprobación última de que una determinada topología de red es válida sería medir o calcular el tiempo de ida y vuelta entre cada posible par de estaciones de la red para comprobar que es inferior al que aparece en la tabla.

El estándar IEEE 802.3 establece dos formas de verificar que una determinada topología Ethernet es válida. La primera, denominada Modelo 1, corresponde a un conjunto de reglas 'enlatadas' sobre la distancia máxima y el número máximo de repetidores que puede haber entre dos estaciones.


41 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Cumpliendo esas reglas el usuario se asegura de que su red no excede los valores máximos en el tiempo de ida y vuelta. Ahora bien, el Modelo 1 adopta una actitud conservadora y presupone las longitudes máximas en el enlace del usuario final. Si éste no está utilizando la longitud máxima es posible aumentar la distancia en los enlaces intermedios. En este caso hay que verificar la topología siguiendo el Modelo 2, que consiste en realizar cálculos detallados del retardo para cada componente y para cada tramo de cable en cada trayecto. Una topología en principio inaceptable según el Modelo 1 puede resultar válida aplicando las reglas del Modelo 2.

Con respecto a saber si todos los puertos pueden comunicarse al mismo tiempo sin perder los mensajes, eso es algo que depende de la calidad del controlador (non blocking switch). Los controladores posibilitan evitar colisiones y la mayoría de los modernos permiten desactivar la detección y cambiar a modo full dúplex (bidireccional) en los puertos. De esta forma, los equipos pueden transmitir y recibir al mismo tiempo, lo que también contribuye al rendimiento de la red.

El modo full dúplex es interesante, en especial, para los servidores que poseen muchos clientes.

Los controladores Ethernet modernos también detectan la velocidad de transmisión que cada equipo utiliza (autosensing) y si el equipo admite varias velocidades (10, 100 o 1000 megabits/seg.) comienza a negociar con él para seleccionar tanto una velocidad como el modo de transmisión: semi dúplex o full dúplex. Esto permite contar con un almacenamiento de equipos con distintos rendimientos (por ejemplo, un conjunto de equipos con varias configuraciones hardware).

Como el tráfico transmitido y recibido ya no se transmite a todos los puertos, se hace más difícil rastrear lo que está pasando. Esto contribuye a la seguridad general de la red, que es un tema de suma importancia en la actualidad.

La topología estrella simplifica la administración de la red y la resolución de problemas ya que cada tramo de cable conecta solo dos dispositivos, una a cada extremo del cable. Si un dispositivo no puede comunicarse exitosamente con en la red, puede ser movido físicamente a otra ubicación para establecer si la falla reside en el cableado o en el dispositivo. Este tipo de aislamiento es mucho más difícil en las topologías bus.


42 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Una topología en estrella es más barata, ya que, cada dispositivo necesita solamente un enlace y un puerto de entrada/salida para conectarse a cualquier número de dispositivos.

Este factor hace que también sea más fácil de instalar y reconfigurar. Además, es necesario instalar menos cables, y la conexión, desconexión y traslado de dispositivos afecta solamente a una conexión: la que existe entre el dispositivo y el concentrador.

Actualmente la topología física recomendada para las instalaciones es la topología estrella como se especifica en ANSI/TIA/EIA-568-A. La utilización de una topología estrella ha permitido limitar las interrupciones en la red causadas por problemas de cableado.

Por último, el uso de conmutadores hace posible la construcción de redes geográficamente más grandes. La distancia ya no es limitada, excepto por los límites técnicos del medio utilizado (fibra óptica o par trenzado, la potencia de la señal transmitida y la sensibilidad del receptor, etcétera).

Por lo tanto llegamos a la conclusión de que la topología física de una red Ethernet está basada en estrella, mientras que la topología lógica sigue siendo basada en bus, aprovechando las ventajas de ambas topologías.

Módulo 1: Operaciones Básicas y Conceptos Digitales Tema 4: Navegadores

43 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

TEMA 4: NAVEGADORES

1. Internet

Definición y características de internet.

Internet es una red de redes, a escala mundial, de millones de ordenadores interconectados con un conjunto de protocolos, siendo el más destacado TCP/IP. También se usa este nombre como sustantivo común y por tanto en minúsculas para designar a cualquier red de redes que use las mismas tecnologías que Internet, independientemente de su extensión o de que sea pública o privada. Cuando se dice red de redes se hace referencia a que es una red formada por la interconexión de otras redes menores.

Los ordenadores se pueden comunicar porque están unidos a través de conexiones telefónicas (aunque también pueden ser de otros tipos) y gracias a que utilizan un lenguaje o protocolo común, el TCP/IP.

Internet ha experimentado un gran auge desde 1994 debido a la aparición de la Web, los modems telefónicos a bajo precio, el software gratuito para los servidores web, el aumento de los ordenadores personales, y últimamente con la proliferación de las aplicaciones de Internet en los teléfonos móviles y el gran uso de las redes sociales.

La Web (World Wide Web), logró facilitar y hacer atractiva la utilización de la red para todo tipo de usuarios añadiendo interactividad a través de la introducción del hipertexto, los gráficos y los formularios. En ocasiones se utiliza la palabra Web como sinónimo de Internet.

El hipertexto es lo que permite que al hacer clic en una palabra o gráfico pasemos de la página en la que estamos a otra página distinta. Esta nueva página puede estar en otro ordenador y en un lugar muy distante a éste. Esto es lo que creó el concepto de navegación por Internet pues en unos minutos podemos visitar, sin casi darnos cuenta, información que reside en ordenadores ubicados en distintos países del mundo. Realmente cuando buscamos información lo que nos interesa es encontrarla, no saber físicamente donde se encuentra.

La Web también permitió mejorar el aspecto de la información a través de gráficos y formateo del texto gracias a la creación del lenguaje en el que se escriben las páginas web, el HTML (Hyper Text Markup Lenguage). Aparecieron de forma gratuita los navegadores Web, programas para transformar el código HTML en páginas Web.

Algunos de los servicios disponibles en Internet aparte de la Web son el acceso remoto a otras máquinas (Telnet), transferencia de archivos (FTP), correo electrónico (SMTP), boletines electrónicos (news o grupos de noticias), conversaciones en línea (chats), mensajería instantánea, transmisión de archivos (P2P, P2M), etc.

Módulo 1: Operaciones Básicas y Conceptos Digitales Tema 5: Correo electrónico

44 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Algunas características de Internet son:

Acceso libre. El espíritu de dejar circular la información libremente es una de las razones que ha permitido el crecimiento espectacular de Internet. Si en sus comienzos los científicos que desarrollaron el soporte técnico de Internet, como el protocolo TCP/IP, no lo hubiesen puesto a disposición de la industria, hoy Internet no sería lo que es.

Hoy por hoy, cualquiera puede colocar en Internet información sin censura previa, esto permite expresar libremente opiniones y decidir libremente qué uso damos a Internet. Es algo importante que permite que las personas se sientan más libres y tengan más capacidad de reacción frente a los poderes establecidos. Pero también facilita el uso negativo de la red. Por ejemplo, la creación y dispersión de virus informáticos, de conductas antisociales, pornografía infantil, etc.

Anónima. Podemos decir que ocultar la identidad, tanto para leer como para escribir, es bastante sencillo en Internet. Esta característica está directamente relacionada con el punto anterior, ya el anonimato puede facilitar el uso libre de la red con todo lo que esto conlleva. Entendido de forma positiva el anonimato facilita la intimidad y la expresión de opiniones. Aunque también facilita la comisión de delitos.

Autoreguladora. ¿Quién decide cómo funciona Internet? Algo que tiene tanto poder como Internet y que maneja tanto dinero no tiene un dueño personal. No hay ninguna persona o país que mande en Internet. En este sentido podemos decir que Internet se autorregula o autogestiona. La mayoría de las reglas que permiten que Internet funcione han salido de la propia Internet.

Existen unos comités internos que se encargan de regular Internet, como W3C, Internet Society, ICANN. Se encargan de dictar las normas de los nombres de dominios, definir y aprobar los protocolos de comunicaciones, etc.

Hasta ahora las razones que han llevado a tomar las diferentes decisiones han sido fundamentalmente técnicas. Eso puede explicar por qué las cosas han funcionado razonablemente bien, puesto que el crecimiento y la mejora de Internet son innegables. Pero, debido a los problemas de seguridad y para facilitar el comercio electrónico las autoridades de diversos países han comenzado a regular Internet mediante leyes nacionales.

En España, en el año 2002 se aprobó la LSSI (Ley de Servicios de la Sociedad de la Información y Comercio Electrónico) que regula diversos aspectos del funcionamiento de Internet como la obligación de inscribir los nombres de dominio (.es, .com, ...) en el Registro Mercantil, obligación de publicar los datos de las personas o empresas que prestan servicios en Internet, normas sobre la publicidad, correo electrónico y contratación electrónica, etc.

Esta regulación de Internet ha sido acogida de diferente forma por diversos colectivos. Los empresarios con negocios en la red creen que favorecerá el desarrollo del comercio en Internet y hará más seguro el uso de la red de redes. Algunos


45 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

colectivos piensan que es un recorte de la libertad de la red y se han manifestado en contra de la LSSI.

Un poco caótica. Después de lo dicho en el punto anterior parece un contrasentido decir que Internet es caótica. Es caótica en el sentido que no está ordenada ni tiene unas reglas estrictas de funcionamiento que permitan asegurar que todo funciona correctamente, fundamentalmente en el aspecto del contenido.

Podemos navegar por Internet y naufragar constantemente, encontrando enlaces que no llevan a ninguna parte, páginas que dan errores, formularios que fallan, vídeos que nunca se cargan, textos descuadrados y faltas de ortografía que claman al cielo. Y esto no sólo sucede en las páginas personales, también en portales que han costado mucho dinero.

Todo esto puede dar la impresión de ser un pequeño caos ya que nadie asegura que todo funciona bien. Aunque esto también sucede en otros aspectos de la vida, hay veces que sales del cine pensando que te han tomado el pelo, hay libros que son muy malos, productos que no hacen lo que dice la etiqueta, etc.

Insegura. La información de Internet viaja de un lugar a otro a través de la línea telefónica y la mayoría sin encriptar. Por lo tanto es posible interceptar una comunicación y obtener la información. Esto quiere decir que se puede leer un correo u obtener el número de una tarjeta de crédito.

Si no hacemos nada, la información viaja de forma insegura, pero hoy en día toda la información importante se encripta antes de enviarla por la red, y en el destino se desencripta. Por lo tanto las webs de sitios serios que trabajan con tarjetas de crédito, cuentas bancarias, etc. ofrecen un nivel de seguridad bastante alto. Un sitio web que trabaja con un servidor seguro se reconoce porque aparece un pequeño candado en el navegador.

La inseguridad también se refiere a la existencia de virus informáticos que pueden afectar a nuestro ordenador personal, pudiendo llegar a borrar o inutilizar nuestros datos. Los virus suelen entrar a través de fallos de seguridad de los navegadores, del correo y al descargarse archivos. De la misma forma que en el caso anterior, podemos tomar medidas para evitar esta inseguridad. Actualizar los navegadores, no descargarse archivos de sitios sospechosos, no abrir correos de desconocidos, y tener instalado un programa antivirus.

Por último, la inseguridad afecta también a los contenidos de los sitios web puesto que algunos sitios ven modificadas sus páginas por hackers. Estas intrusiones suelen tener componentes de protesta o reivindicación y generalmente no tienen efectos demasiado graves. Un grupo elevado de personas pueden bloquear el correo de un sitio web si todas escriben correos a la vez. Muchos países están modificando las leyes para evitar comportamientos delictivos de esta clase.

En resumen, podemos decir que partiendo de una situación de cierta falta de seguridad estamos llegando a una situación en la que cada vez es más seguro usar Internet si tomamos las precauciones adecuadas. La opinión pública es muy sensible a


46 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

estos temas por lo que se ha creado el mito que Internet es muy insegura, cosa que tampoco es cierta. Por ejemplo, comprar a través de Internet puede ser igual o más seguro que hacerlo por otro medio. Realmente, el porcentaje de casos de fraude en la compra por Internet es muy bajo. Hoy en día se puede comprar con bastante garantía en la mayoría de los sitios web reconocidos y serios.

Crecimiento vertiginoso. El número de personas que utiliza Internet crece a un fuerte ritmo (mucho mayor que el que supuso la televisión o el teléfono), y también el número de empresas que hace negocios en Internet. Cada vez se mueve más dinero por la red.

Realmente Internet es un fenómeno que está cambiando muchas cosas en la forma en que las personas se comunican y hacen negocios.

2. Navegadores

Navegación.

Cuando hablamos de navegar por Internet nos estamos refiriendo en realidad a la Web. Accedemos a ella necesitamos un programa llamado navegador que, entre otras funciones, nos permite recuperar y visualizar documentos de hipertexto, comúnmente escritos en HTML.

Un navegador sirve para acceder a Internet, pero también podemos utilizarlo sin conexión a Internet para ver páginas web que tengamos grabadas en el disco duro, en un CD, DVD u otro dispositivo.

Los navegadores van incorporando las nuevas tecnologías que se generan en torno a Internet, cada poco tiempo aparecen versiones nuevas, por lo que es conveniente tenerlo actualizado.

Un navegador o explorador web - conocido en inglés como web browser - es un programa o software, por lo general gratuito, que nos permite visualizar páginas web a través de Internet además de acceder a otros recursos de información alojados también en servidores web, como pueden ser videos, imágenes, audio y archivos XML.

Pero un navegador también nos permite almacenar información o acceder a diferentes tipos de documentos en el disco duro, etc, acceder a redes privadas, y crear marcadores (bookmarks).

El acceso a otras páginas web a través de los hiperenlaces (hipervínculos o enlaces) se llama navegación, término del que deriva el nombre de navegador, aunque una minoría prefieren llamarlo hojeador que sería la traducción literal de la palabra browser.

http://www.masadelante.com/faqs/software-hardware

http://www.masadelante.com/faqs/internet


47 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Algunos navegadores vienen incorporados a su sistema operativo como es el caso de Internet Explorer en Windows Microsoft, Safari en Mac OS X, o Firefox, Opera o Flock en Linux.

Pero ¿cómo accede un navegador a la información de Internet?

Cómo funcionan los navegadores

Los navegadores se comunican con los servidores web por medio del protocolo de transferencia de hipertexto (HTTP) para acceder a las direcciones de Internet (URLs) a través de los motores de búsqueda.

La mayoría de los exploradores web admiten otros protocolos de red como HTTPS (la versión segura de HTTP), Gopher, y FTP, así como los lenguajes de marcado o estándares HTML y XHTML de los documentos web. Los navegadores además interactúan con complementos o aplicaciones (Plug-ins) para admitir archivos Flash y programas en Java (Java applets).

Características comunes de los navegadores

Todos los navegadores incluyen la mayoría de las siguientes características: navegación por pestañas, bloqueadora de ventanas emergentes, soporte para motores de búsqueda, gestora de descargas, marcadores, corrector ortográfico, y atajos del teclado. Para mantener la privacidad casi todos los navegadores ofrecen maneras sencillas de borrar cookies, cachés web y el historial.

Las suites de Internet son aquellos exploradores web que incluyen programas integrados capaces de leer noticias de Usenet, correos electrónicos, e IRC, que son chats de texto en tiempo real a través de los protocolos IMAP, NNTP y POP.

Suelen utilizar el protocolo de seguridad HTTPS a través de los protocolos criptográficos SSL/TLS para proteger los datos de intercambio con los servidores web. También suelen contar con protección antiphishing y antimalware.

Tipos de navegadores o exploradores web

Algunos de los navegadores o exploradores web más populares son: Internet Explorer, Mozilla Firefox, Safari, Opera, Google Chrome y Flock.

http://www.masadelante.com/faqs/como-funciona-motores-de-busqueda


48 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Otros navegadores no tan conocidos son: Maxthon, Avant, DeepNet, PhaseOut, SpaceTime, Amaya...

Podemos resumir, haciendo una comparativa de los navegadores con armas, la visión que tienen los profesionales de los distintos navegadores que existen en el mercado.

Microsoft Edge

Internet Explorer (IE) viene integrado en el sistema operativo Windows de Microsoft junto con el gestor de correo Outlook Express. Ha sido el navegador más utilizado del mundo desde 1999, aunque desde 2002 ha ido perdiendo cuota de mercado a un ritmo lento pero constante debido a su importante competidor, Mozilla Firefox, que ha superado incluso a Internet Explorer en algunas ocasiones.

Desde hace tiempo ha estado recibiendo críticas por parte de muchos usuarios que le atribuyen muchos fallos de seguridad o incompatibilidad con estándares web como el CSS, XHTML y PNG, y menos funcionalidades que otros exploradores web.

Hay varias versiones de Internet Explorer para los sistemas operativos UNIX y para Mac. La versión más reciente para Windows es Internet Explorer 11 que Microsoft describe como más rápido, más fácil y


49 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

más seguro además de permitir al usuario acceder a la información en menos clics que otros navegadores.

Con la aparición de Windows 10, como SO multiplataforma, desaparece Internet Explorer y aparece Microsoft Edge.

Mozilla Firefox

Mozilla Firefox es un navegador de software libre y código abierto, creado por la Corporación Mozilla, la Fundación Mozilla y numerosos voluntarios externos. Se sitúa en la segunda posición de navegadores, con una gran aceptación por parte de los usuarios que lo definen como más seguro, rápido y de mejor rendimiento que Internet Explorer, destacando también por su sencillez y fácil manejo.

Safari

Safari es el navegador creado por Apple Inc. el cual está integrado en el sistema operativo Mac OS X, en 2007 se creó una versión de Safari para el sistema operativo Microsoft Windows dando soporte tanto a Windows XP como a Windows Vista, y el teléfono inteligente iPhone también incorpora Safari a su sistema operativo.

De Safari destacan la velocidad, un diseño muy cuidado, la seguridad y las prestaciones que ofrece, incluyendo los recursos para diseñadores y programadores,

Opera

Desarrollado por Opera Software company, Opera es además de un navegador una suite de Internet gratuita

Opera fue el primer navegador que implementó el sistema de pestañas, y además de las características comunes de todos los navegadores, Opera también incluye Speed Dial, personalización por sitio, vista en miniatura por pestaña y los movimientos del ratón en la navegación, y tiene incorporado el cliente de correo Opera Mail y un chat IRC.

Google Chrome

Google Chrome combina tecnología sofisticada y un diseño minimalista, además de ofrecer una interfaz gráfica de usuario más sencilla y eficaz.

Desde que saliera Google Chrome muchos aclaman su velocidad; implementación de distintas partes de HTML 5; poder reproducir vídeos a través de la etiqueta "vídeo" sin necesidad de utilizar Flash; o la aplicación Google Wave que va a revolucionar la forma de compartir información pues además de permitir a los usuarios charlar y


50 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

compartir documentos, mapas y enlaces en tiempo real, también permite múltiples formas de interacción basados en la nube (Cloud computing)... entre otras.

3. Interfaz de un navegador

Los navegadores presentan una interfaz similar entre ellos.

Ventana del explorador IE

En el navegador de IE, en la barra de menú tenemos:

Archivo. Con los comandos propios de abrir, configurar la página de impresión, vista previa, imprimir y guardar. Es de destacar el comando Guardar como que permite guardar una página de varias formas: página completa (conforme la vemos), archivo único, formato html o sólo texto.

Edición. Tiene los comandos típicos de cortar, copiar, pegar, selección y búsqueda de texto dentro de la página.

Ver. Selecciona los elementos a visualizar en cuanto a barras de herramientas, de estado y del explorador. Permite aumentar o disminuir el tamaño del texto y avanzar o retroceder en las páginas, actualizar éstas y ver el código fuente.

Favoritos. (Marcadores) Agrega y organiza en carpetas las direcciones de páginas o sitios que le indiquemos a una lista de los sitios habituales. Es como una agenda de direcciones.

Barra de búsqueda

Barra de comandos

Barra de direcciones

Barra de menú

Pestaña

Barra de favoritos

Barra de estado


51 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Herramientas. El comando a destacar es el de Opciones de Internet que configura la forma y condiciones del acceso a la red Internet.

Ayuda. Ayuda en línea.

La barra de herramientas presenta los iconos de los comandos que se utilizan con más frecuencia:

En la barra de dirección escribimos la URL del sitio y luego pulsamos Intro.

La flecha, al final de la barra de dirección, muestra las últimas direcciones que se hayan escrito. Hace más ágil el acceso ya que no es necesario volver a escribir una dirección que se tecleó anteriormente.

La barra de estado muestra la información sobre la carga de página, seguridad del

sitio (en sitios seguros muestra un candado cerrado) y estado de la conexión.

Una vez en la página nos aparecerán imágenes, gráficos y texto que pueden ser simple información o enlaces a otras páginas (hiperenlaces). Los distinguiremos porque al pasar con el ratón sobre ellas cambiarán de color, si es texto, y además el

ratón cambiará a una forma de mano con un dedo apuntando.

El diseño de las páginas suele ser muy diferente entre ellas. Nos encontramos páginas con barras de enlaces horizontales, otras con barras verticales, otras con

Página inicio Leer correo

Imprimir Fuente detectada

Opciones de página

Ayuda Herramientas del explorador

Opciones de Seguridad


52 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

formularios en las que aparecen campos en los que hay que escribir datos, bien para registrarse, bien para identificarse o bien para acceder a búsquedas en bases de datos, como por ejemplo el acceso al catálogo de una biblioteca.

Histórico.

El acceso al historial de las páginas visitadas resulta una herramienta muy útil para localizar páginas que nos resultaron interesantes. Sólo hay que acceder a esta herramienta en el navegador y desde ahí abrir los días de la semana o semanas anteriores en las que creamos que hayamos visitado la página que buscamos. Todo esto si no se ha borrado el historial desde las opciones de Internet. En Internet Explorer es accesible desde las Herramientas o desde la pestaña de Favoritos.


53 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Manejar imágenes.

Si buscamos imágenes a través de un buscador, nos aparece en la ventana del navegador el número de ellas encontradas, siempre que estén publicadas en Internet ya sea en página web o blogs y proporcionándonos una miniatura de la imagen, la URL donde se encuentra, el formato de imagen y su resolución.

Para copiar la imagen primero hacemos clic en ella para verla a mayor tamaño y posteriormente, si actuamos con el botón derecho del ratón, elegimos del menú contextual la acción de copiar (se copia al portapapeles), guardar la imagen como un archivo en algún dispositivo del equipo, o bien copiar la Url de la imagen.

A partir de ahí trataremos la imagen con cualquier programa de tratamiento de imágenes, o la podremos llevar a algún documento en el que estemos trabajando.

Hay que tener en cuenta la resolución de la imagen pues a mayor tamaño más resolución, lo que nos permitirá mayor calidad de la imagen.

Guardado.

Puede que alguna vez nos interese guardar, por diferentes motivos, una página web en nuestro disco.

El navegador nos ofrece guardar las páginas al sistema de almacenamiento del equipo igual que si se tratase de un documento o archivo.

Una vez abierta la página, desde el menú archivo, accedemos a Guardar como… y se nos abre el explorador de archivos.


54 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Internet Explorer nos ofrece varias formas de guardar la página web:

• Como página completa. Guarda un archivo ejecutable y una carpeta con el contenido de imágenes.

• Como archivo único. Ideal si tenemos que enviarla por correo electrónico.

• Sólo con HTML, es decir, sólo lo que esté etiquetado.

• Solo el texto.

Vínculos.

En ciertas versiones de algunos navegadores suele existir una barra de vínculos que nos llevan a páginas web que tienen alguna relación con la firma del navegador. Por ejemplo, en IE, vínculos a MSN, Hotmail y otros relacionados con Microsoft. En las últimas versiones han dejado de incluirlos.

Favoritos. (O Marcadores)

Los Favoritos son vínculos a páginas web que se pueden agregar la barra del explorador. En IE se pueden ver en el Centro de favoritos haciendo clic en el botón Favoritos , y, a continuación, en la pestaña Favoritos.

Si deseamos obtener acceso fácilmente a diversos sitios web favoritos, podremos mostrar la barra de favoritos de modo que los vínculos estén siempre visibles en el explorador.

Para agregar páginas web a favoritos:

1. Vamos a la página web que deseamos agregar como favorito.

Hacemos clic en el botón Favoritos y después clic en Agregar a favoritos.


55 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Escribimos un nombre para el favorito y luego hacemos una de las siguientes acciones:

o Junto a Crear en, hacemos clic en el botón Favoritos y posteriormente clic en una ubicación.

o Hacemos clic en Nueva carpeta y escribimos un nombre. Junto a Crear en, clic en el botón Favoritos, hacemos clic en una ubicación y luego en Crear.

Impresión.

Desde el menú archivo, en IE, se accede a la configuración de impresión de la página web que estemos visitando.

Al imprimir una página web, Internet Explorer reduce el contenido de la página para que se ajuste al ancho de su papel. Si la página es ancha, esta reducción del tamaño del texto para que se ajuste a la página puede hacer que el texto sea demasiado pequeño e ilegible. Para solucionar este problema, debemos realizar una de las acciones siguientes:

• Cambiar la orientación de impresión a horizontal.

• Seleccionar partes de la página web e imprimirlas por separado.

• Hacer clic en el botón Herramientas, elegir Imprimir y hacer clic en vista previa de Impresión. Desde el menú Cambiar tamaño de impresión, elegir Personalizado. Especificar el tamaño en que desea que se imprima el sitio web estableciendo un porcentaje en el cuadro de texto Tamaño personalizado. Se aumentará el tamaño de impresión de toda la página web, pero esto puede tener como resultado que se corte parte de la página en el documento impreso.

Para detener la impresión de imágenes y colores de fondo en Internet Explorer:

2. Hacer clic en el botón Herramientas, elegir Imprimir y seleccionar Configurar página.

Desactivar la casilla Imprimir imágenes y colores de fondo y hacer clic en Aceptar.


56 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Si queremos imprimir sólo una parte específica de una página web (en lugar de imprimirla completa):

Hacemos una selección del contenido a imprimir.

Vamos al botón Herramientas, elegimos Imprimir y elegimos Imprimir.

En el cuadro de diálogo Imprimir, clic en Selección y de nuevo clic en Imprimir.

Caché.

La caché del navegador se refiere a almacenar archivos temporales de Internet en la unidad del equipo para acelerar las páginas web visitadas anteriormente, dando así la sensación de una carga rápida de la página web. Se pueden ver o eliminar los archivos en cualquier momento.

Cookies.

Las cookies son pequeños archivos de texto que los sitios web colocan en el equipo para almacenar información acerca del usuario y sus preferencias. Pueden enriquecer la experiencia de exploración del usuario en tanto permiten que los sitios web sepan cuáles son sus preferencias o que no pueda iniciar sesión cada vez que éste visite ciertos sitios web. Sin embargo, ciertas cookies pueden poner en riesgo la privacidad, ya que rastrean los sitios que se visitan.

Se pueden eliminar las cookies almacenadas en el equipo. También se puede cambiar la configuración de privacidad para impedir que los sitios web almacenen cookies en el equipo.


57 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

TEMA 5: CORREO ELECTRONICO

1. Introducción

El correo electrónico es un sistema de envío y recepción de correo mediante el uso de un ordenador u otro dispositivo electrónico, utilizando una red de área local (LAN), Internet o conexiones inalámbricas para su transmisión y recepción.

La gran ventaja respecto al correo tradicional es que es prácticamente instantáneo:

• El remitente redacta el mensaje y lo envía a la dirección de correo del destinatario.

• El mensaje llega casi instantáneamente al buzón del destinatario.

• Otras ventajas:

• El mismo mensaje puede ser enviado a múltiples destinatarios.

• Posibilidad de reenviar los mensajes que se reciben a otros destinatarios.

2. Definiciones y términos

El término e-mail, deriva de Electronic Mail, ‘correo electrónico’.

POP. (Post Office Protocol, protocolo de correos), en los que los mensajes se descargan desde el servidor a nuestro ordenador y quedan en él almacenados. Los podemos leer cuantas veces queramos sin necesidad de conexión posterior. Ejemplo de ellos son Outlook Express, Microsoft Outlook, Pegasus, Eudora….

IMAP (Internet Mail Access Protocol, protocolo de acceso al correo de Internet), a diferencia de los anteriores, éstos no se descargan a nuestro ordenador cuando accedemos al programa a través del navegador sino que permanecen en el servidor hasta que los eliminemos. Cada vez que queramos leerlos hay que conectarse a la red. Ejemplos Hotmail, Yahoo, Gmail…

SPAM. Correo no deseado, es decir, que no has solicitado y que generalmente tiene un remitente desconocido. Por lo general tienen por fin promover publicidad, una página web o un producto.

3. Funcionamiento


58 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Para la utilización de este servicio es imprescindible contar con una dirección de correo electrónico, es una dirección única en la red Internet y que identifica al usuario y requiere conocer el nombre de usuario y contraseña privada.

La estructura de esta dirección es como sigue:

Nombre_usuario@nombre_proveedor.dominio

• Nombre_usuario es el identificador del remitente y que ha de ser proporcionado por un proveedor de servicios de Internet previa solicitud.

• El símbolo @ separa el nombre de usuario del nombre del servidor (proveedor).

• Nombre_proveedor.dominio es el nombre de dominio que identifica al servidor.

Ejemplo: [email protected] En este ejemplo (.es) indica que se trata de un dominio en España. Otros tipos son: .com (comercial), .edu (comunidad educativa), .org (organización no comercial), .net (empleado en redes).

4. Gestores de correo electrónico

Ventanas.

Las gestiones que podemos hacer con el programa de correo electrónico se realizan todas a través de su correspondiente ventana.

Alta y configuración de una cuenta de correo electrónico.

El primer paso para configurar una cuenta de correo es la elección del proveedor del servicio. Lo normal es elegir uno que nos la facilite gratuitamente y que nos ceda suficiente espacio en el servidor (Yahoo, Hotmail, Gmail...).

mailto:[email protected]


59 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Una vez elegido, entramos en su página Web, y buscamos la forma de darnos de alta en su correo. Activando el enlace de alta accederemos a la configuración de la cuenta en la que se nos pedirá:

• Aceptación de las normas de uso.

• Los datos personales (unos habrá que rellenarlos obligatoriamente y otros no será necesario).

• El nombre de usuario. Pondremos cualquiera que nos guste, siempre contando con las limitaciones de ser aceptado por el servidor, bien por haber alguien con ese mismo nombre o bien por no ajustarnos a los condicionantes de caracteres válidos (la cadena de caracteres ha de ser continua y normalmente no se aceptan la “ñ”, el carácter “/”, “?”, … ). El mismo programa nos advertirá de los caracteres no válidos.

Ejemplo de formulario de alta de cuenta

• La contraseña. Ha de ser una cadena de caracteres válidos, normalmente con más de 4 caracteres (depende del servidor). Tiene que ser fácilmente memorizada y a su vez difícil de detectar por otras personas, así evitaremos que curioseen en nuestro correo.

• Otros datos. Posiblemente nos pidan otros datos con la finalidad de enviarnos publicidad o información sobre distintos tipos de servicios. Es preferible ser cautelosos en estas respuestas.

Recepción del correo.

La ventana que inicialmente nos presentará el programa será la de gestión de los mensajes. Aunque el diseño del programa de correo varía en aspecto de unos servidores a otros, en general distinguimos las siguientes partes:

• Barra de herramientas, opciones y configuración.


60 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• Ventana con carpetas clasificadoras de los mensajes.

• Ventana principal donde aparece una tabla con los mensajes seleccionados en el apartado anterior, conteniendo el remitente, el asunto y la fecha de recepción o envío. Si el mensaje no ha sido leído, su línea aparecerá normalmente en letra negrita.

• Un cuadro de selección del mensaje y, en función de él, una barra de herramientas con posibles acciones sobre él.

Redacción y envío de un mensaje.

Para mandar un mensaje a alguien tenemos que activar el botón que corresponda, se suelen llamar “Nuevo”, “Crear”, “Redactar”,….

Pulsado ese botón nos aparece una ventana en la que redactamos el mensaje. En ella, tendremos líneas:

• De. Para identificar al remitente que por defecto será el usuario de la cuenta de correo.

• Para. Donde debemos escribir, o elegir de la lista de contactos, la dirección exacta del destinatario.

• CC. Si el mismo mensaje se lo vamos a remitir a varios destinatarios, escribimos o elegimos de los contactos, las direcciones de ellos separadas por comas o por punto y coma. Todos los destinatarios conocerán quienes más han recibido el mismo mensaje.

• CCO. Escribimos las direcciones de los destinatarios a quienes va dirigido el mensaje, o las elegimos de los contactos. La diferencia de escribirlos en la barra de CC o en la de CCO es que en este caso ningún destinatario sabrá quienes más lo han recibido. Es decir, se ocultan las direcciones a los demás.


61 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Llegados a este punto, es necesario destacar que en la utilización del programa de correo se comenten, de forma generalizada, excesivos errores en lo relativo a la difusión de direcciones de correo que luego son utilizados por agentes publicitarios para envíos masivos de correos no deseados. Por eso hay que hacer hincapié en que en la difusión de un mensaje a varios destinatarios es conveniente poner las direcciones de ellos en la barra CCO (ocultar direcciones a los destinatarios), de esta forma evitamos que las direcciones a quienes enviamos el correo lleguen a los demás.

• Asunto. En esta línea, que puede quedar vacía, escribimos una breve descripción del mensaje.

• Cuerpo del mensaje. Aquí redactamos el contenido del mensaje, incluso le podemos dar formato de fuente al texto, poner emoticones, pegar imágenes o escribir URL,s de páginas Web o direcciones de correo.

Adjuntar archivos.

Para adjuntar documentos al mensaje primero hay que tener almacenados los archivos de los mismos, sean de texto, imágenes, vídeos, sonido, etc…

Independientemente de que hayamos redactado o no el cuerpo del mensaje, buscamos el icono o el botón de “Adjuntar archivo”. El icono suele ser una imagen de un clip. Pulsado ese botón nos aparecerá la ventana del explorador de archivos para que elijamos los archivos que queremos adjuntar. Una vez elegidos esperamos a que se carguen los archivos en el mensaje.

Lectura del correo.

La lectura de los mensajes se efectúa desde la pantalla principal. Ya hemos dicho anteriormente que los correos recibidos aparecen en una tabla conteniendo el remitente, el asunto y la fecha de recepción o envío. Los no leídos se identifican porque su registro suele estar en negrita (o en otro formato, dependiendo del programa de correo). Además, en el panel de clasificación de carpetas suele aparecer un número indicando los mensajes que están por leer.

Para leer un mensaje hacemos doble clic en el registro correspondiente y se abre su contenido. Si el mensaje tiene algún archivo adjunto podemos optar por abrirlo o descargarlo a una carpeta del equipo o disco externo.

Por seguridad, no es conveniente abrir los mensajes que claramente sean spam. Lo mejor es seleccionarlo y eliminarlo. Se pueden identificar con facilidad si el


62 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

remitente es alguien no conocido o en el asunto del mensaje aparece algo relacionado con publicidad.

Una vez que hayamos leído un mensaje podemos optar por eliminarlo, dejarlo en la carpeta de recibidos, moverlo a otra carpeta o bien responder al remitente o reenviarlo a otras personas.

Aunque los programas de correo disponen de buenos filtros que detectan los spam, conviene abrir periódicamente esta carpeta y comprobar si hay algún correo en esta carpeta que no sea spam, procediendo a leerlo o cambiarlo de carpeta.

Respuesta del correo.

Responder a un mensaje.

La respuesta a un mensaje pasa por abrir el mensaje y buscar el botón o el enlace “Responder”. Si el mensaje tenía varios destinatarios se puede elegir la opción de “Responder a todos”.

En este caso no tendremos que rellenar las líneas de destinatarios pues el programa la asigna automáticamente al remitente del mensaje original. Posteriormente redactamos el mensaje.

Reenvío de mensajes.

Un mensaje que hayamos recibido o mandado puede ser reenviado a otros destinatarios, para ello sólo hay que seleccionar ese mensaje y localizar el botón de reenvío. Volverá a aparecer la ventana de redacción del mensaje con sus líneas de Para, CC, CCO, a fin de que escribamos los destinatarios.

El mensaje saldrá exactamente igual que el recibido pero en el asunto se antepondrá la cadena “Fw” y en el encabezamiento se envían los datos del remitente anterior, con lo cual en el reenvío se difunden direcciones de correo a no ser que primeramente borremos los datos del primer remitente.

Hay que tener cuidado con la difusión de direcciones que se da con frecuencia en el reenvío de mensajes. Cuando un mensaje se reenvía manda una copia exacta del que se ha


63 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

recibido. Si este contiene las direcciones de todos los destinatarios, éstas también llegan a nuestro nuevo destinatario. Por tanto, cuando reenviemos un mensaje debemos de eliminar del mismo las direcciones que nos hayan podido llegar con el mensaje. Es una de las mejores formas de luchar contra el Spam.

Organización de mensajes.

La organización de los mensajes, tanto los recibidos como los enviados, los que tengamos sin finalizar de redactar o los que hayamos eliminado, la hace el programa. Pero, independientemente de ello, el mismo programa da pie a que podamos crearnos otras carpetas para organizar nuestros mensajes.

• Carpeta de recibidos o de entrada. Contiene los mensajes que hemos recibido.

• Carpeta de mensajes enviados. Almacena una copia de los mensajes enviados.

• Carpeta mensajes eliminados o papelera. Mensajes eliminados de otras carpetas.

• Carpeta de Borrador. Mensajes sin finalizar de redactar por el usuario.

• Spam. Son los correos que nos han remitido que posiblemente no son deseados por nosotros, normalmente con contenido publicitario.

Pueden aparecer otras carpetas, bien creadas por el propio programa o por nosotros mismos, con objeto de hacer más exhaustiva la clasificación de los mensajes.

Impresión de correos.

Para imprimir un mensaje recibido primero lo abrimos y buscamos en el programa el enlace Imprimir. Normalmente el botón derecho nos ofrecerá el menú contextual y éste, entre otras opciones, la de imprimir.

De igual manera es posible imprimir el mensaje redactado por nosotros.

También permite el programa de correo imprimir una conversación si los mensajes se van encadenando al responder.


64 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Libreta de direcciones.

Llamada de otra forma, Gestión de contactos.

Al igual que en la gestión de correos, el diseño de la gestión de contactos puede variar de unos servidores de correo a otros, pero en general constan de una tabla con los contactos para cada uno de los grupos que se establezcan, con su alias y la dirección e-mail.

Las barras de herramientas cambian en función de la selección del contacto. Con estas herramientas podemos dar de alta contactos, modificarlos, eliminarlos, crear grupos, exportar o importar más contactos.

Los contactos que tengamos en nuestra agenda o lista de direcciones se

podrán añadir a la lita de destinatarios en la redacción y envío de mensajes.

Los programas de correo suelen agregar a la lista de contactos las direcciones de correo que escribimos al remitir un mensaje, si es que no figuraba aún.

En todo caso siempre se pueden añadir manualmente direcciones, sólo hay que localizar el icono de “Añadir” y rellenar el formulario que aparezca.

Filtrado de mensajes.


65 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

En la configuración del programa de correo suele venir un apartado para establecer los criterios de filtrado de mensajes, consiguiendo administrar el flujo de mensajes entrantes. Con ellos se pueden etiquetar, archivar, suprimir, destacar y reenviar correos electrónicos de forma automática, además de controlar los spam.

Las opciones de filtrado se pueden establecer en función del remitente, del asunto, del destinatario, por palabras contenidas en el cuerpo del mensaje, e incluso por tamaño del mensaje.

Debemos ser conscientes, si la intención del filtro es impedir la recepción de ciertos mensajes, de que cuantas más restricciones se apliquen al filtro más correos se rechazarán, lo que a veces puede ocasionar que no entren correos que sí estamos interesados en recibir.

5. Correo web.

Webmail significa correo electrónico de sitio web, correo basado en web o correo web, es un servicio que permite acceder a una cuenta de correo electrónico a través de una página web utilizando un navegador y sin descargar los mensajes al propio ordenador.

Este servicio es muy útil, ya que se puede leer, enviar y organizar el correo electrónico desde cualquier ordenador, desde cualquier parte del mundo, con conexión a Internet.

La privacidad de los usuarios de webmail se lleva a cabo mediante la utilización de nombres de usuario y contraseña únicos.

Los principales servidores de webmail son:

• Hotmail, Outlook

• Gmail

• Yahoo

Ventajas de webmail

• Los mensajes pueden leerse, escribirse y enviarse desde cualquier lugar con un explorador y conexión a Internet.

• Los mensajes no tienen que descargarse al ordenador.

• Las cuentas de correo pueden crearse fácilmente, lo que permite crear cuentas para uso anónimo fácilmente.


66 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Desventajas de webmail

• El usuario tiene que estar conectado a Internet mientras lee y escribe los mensajes.

• Los servidores de webmail comerciales normalmente ofrecen espacio limitado para el almacenamiento de los mensajes y muestran propaganda en los mensajes

• No se pueden guardar los mensajes en el disco duro.

• Cuando la conexión a Internet es lenta, puede ser difícil enviar los mensajes.

• Los mensajes enviados utilizando webmail son unas veinte veces más grandes, ya que el mensaje se envuelve en código html, por lo que hace más lento su uso.

Módulo 2: Herramientas tecnológicas de comunicación Tema 1: Identidad digital

67 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

MODULO 2: HERRAMIENTAS TECNOLOGICAS DE COMUNICACION

TEMA 1: IDENTIDAD DIGITAL

1. Introducción

La identidad digital está actualmente en auge en el campo del marketing y se conoce como identidad digital corporativa. Desde el punto de vista personal el concepto de identidad digital es aplicable a todo aquello que identifica un individuo en el entorno web.

En este tema trataremos de la gestión de la identidad digital personal que se define como la habilidad de gestionar con éxito la propia visibilidad, reputación y privacidad en la red como un componente inseparable y fundamental del conjunto de habilidades informacionales y digitales, las cuales se han convertido en fundamentales para vivir en la sociedad informacional. Seguidamente se detallan con más profundidad los conceptos de visibilidad, reputación y privacidad.

¿Qué es la identidad personal? ¿Quiénes somos en Internet? Toda la actividad que cada uno genera en la red conforma una identidad, estrechamente ligada al propio aprendizaje y a la voluntad de profundizar en la cultura digital.

Desde las últimas décadas del siglo pasado, se ha producido una revolución tecnológica a escala mundial que ha dado paso a una sociedad informacional, definida por la generación, la gestión y el uso de datos. La revolución actual gira en torno a las tecnologías del procesamiento de la información y la comunicación, que, cada vez más, se usan en la mayoría de ámbitos de nuestra vida (Castells, 2003). Con la eclosión de Internet y sobre todo de la denominada web 2.0, la cantidad de datos personales existentes en la red es muy elevada y contribuye a crear nuevas identidades personales en el entorno digital que, como veremos, pueden coincidir o no con la identidad analógica, es decir, con las características que se pueden atribuir a una determinada persona en su vida fuera de la red o offline. La irrupción de Internet ha ofrecido una gama amplísima de nuevas herramientas para la creación de contenidos y de comunicación cambiando las condiciones tradicionales de gestión de la identidad (Zhao et al., 2008).

Actualmente, la capacidad de enviar y gestionar datos aumenta y el consumo informativo no sólo es ingente en empresas y en el ámbito comercial, sino que la cantidad de datos que un individuo genera, gestiona, edita o comparte cada día es


68 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

difícilmente calculable. Ante la gran abundancia de información y de la sobreexposición a los demás, el individuo queda desprotegido. Es por ello que recientemente se ha reactivado el debate sobre la necesidad de formar a las personas en nuevas alfabetizaciones (Livingstone, 2004), informacionales y digitales, que se convierten en clave para los ciudadanos de hoy.

Los llamados nativos digitales son el paradigma de generación que utiliza de manera intensiva Internet. Es la generación nacida a partir de la década de los años noventa y que no ha conocido la vida sin la red, también se ha denominado generación Google, entre otros nombres. Usan Internet diariamente para una variedad creciente de propósitos y tienden a preferir el ordenador antes de que la libreta y el lápiz. Cabe decir, sin embargo, que estos jóvenes digitales se caracterizan también por ser exhibicionistas y multitareas, y, por ejemplo, lo que hace una década era un diario personal o una conversación privada, ahora se ha convertido en un blog o unos mensajes publicados en una red social. La comunicación mediante el ordenador (CMC) se convierte en la sustitución y la complementariedad de otros canales tradicionales teniendo en cuenta que la electrónica permite que la información sea visible y replicable para mucha gente. Con todo, lo más destacable de la generación Google es que son productores y consumidores de información en Internet: para el ocio, para los estudios, para las relaciones personales y a menudo para todo a la vez.

Estar en el ciberespacio significa tener una representación de uno mismo, una identidad digital que se va construyendo a partir de la propia actividad en Internet y de la actividad de los demás. La oferta actual de ocio/negocio y consumo cultural en Internet, las aplicaciones para la comunicación electrónica y los sitios de redes sociales construyen una estructura en la que vive un "yo virtual".

2. La gestión de la identidad digital

En una sociedad intensamente informatizada, uno de los peligros existentes es la diferencia entre los que tienen acceso a las nuevas tecnologías y los que no, así como el abismo entre los que saben utilizarlas y los que no. Estos últimos se convierten en el nuevo sector en riesgo de exclusión social, fenómeno denominado brecha digital.

Entre las nuevas competencias que el ciudadano del siglo xxi debe adquirir, está la competencia de gestionar eficazmente la propia identidad digital.

¿Cómo se construye una identidad digital? De forma activa, se realiza aportando textos, imágenes y vídeos a Internet, participando, en definitiva, del mundo web. En los sitios de redes sociales, se construye a partir de un perfil de usuario, que a menudo se enlaza a perfiles de otros usuarios o contactos. Una identidad digital bien gestionada y homogénea con la identidad analógica no sólo repercute en una vida más activa en todos los ámbitos sino que también tiende a consolidar un entramado social más sólido fuera de Internet. Sin embargo, la construcción de la identidad digital está ineludiblemente ligada al desarrollo de habilidades tecnológicas, informacionales y una actitud activa en la red, participativa, abierta y colaborativa.


69 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

La identidad digital se puede configurar de muchas maneras y una misma persona puede tener diferentes identidades utilizando herramientas diversas o tener sólo una. A partir de Gamero (2009) se presentan una serie de herramientas gratuitas y accesibles en la red, a través de las cuales cualquier persona puede vertebrar una identidad digital.

a) Blogs

El nombre de blog o bitácora proviene de la navegación y se refiere al diario de un barco. Extrapolado a nuestros días, un blog ha pasado a ser un diario que tanto puede ser personal como corporativo.

b) Microblogs

Es una herramienta similar al blog, con la diferencia que tienen un número limitado de caracteres y que se pueden publicar a través de diversas aplicaciones, como vía SMS o por correo electrónico. Los usuarios de los microblogs, aparte de escribir micromensajes, pueden seguir a otras personas y conocer lo que hacen y comentan. Un ejemplo de un microblog con fuerte repercusión es la red social Twitter.

c) Portales de noticias y sitios web

Cualquier página web puede ser una plataforma a partir de la cual construir una identidad digital. Un ejemplo un portal de noticias que permita a cualquier lector comentar una noticia. Estos comentarios son firmados (a menudo con pseudónimos) y pueden ser recuperados posteriormente en la red ya que buscadores como Google los indexan. Cuando se aportan comentarios y opiniones en Internet, hay que tener presente que estos mensajes se pueden encontrar a través de los buscadores y que difícilmente desaparecen de la red.

d) Sitios de redes sociales genéricas o especializadas tales como Facebook, LinkedIn, XING o Pleiteando (esta última especializada en el mundo jurídico).

El uso de las redes sociales se está extendiendo con rapidez. Sin embargo, el dominio sobre todos los aspectos que implican su uso no es generalizado. En relación a la gestión de la propia identidad, muchos sitios de redes sociales permiten que no se muestren algunos de los datos del perfil. Del mismo modo, la red Facebook permite restringir el acceso a ciertas informaciones, a usuarios concretos o a grupos de usuarios mediante la configuración de cada perfil.

e) Textos, fotografías o vídeos en la red, con Google Docs, Picasa, Flickr, YouTube o Vimeo. Todas las actividades en la red (visitas a la web, clics en un enlace, comentarios en un blog, colgar una foto o un vídeo...) quedan registradas y difícilmente se borran. El conjunto de todos estos pasos en Internet forma parte de la identidad digital de una persona, de quien posteriormente se pueden buscar y recuperar gran parte de las acciones, comentarios y opiniones que ha dejado en la red.


70 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

f) El correo electrónico

Del mismo modo que no se borra el rastro a la red, en general, tampoco se borran los mensajes de correo electrónico, a pesar de que estén protegidos con una contraseña. Hay proveedores de correo electrónico que personalizan la publicidad que aparece en pantalla a partir el contenido de los mensajes electrónicos. Por ejemplo, si dentro del texto de un mensaje aparece la palabra "Londres" la publicidad personalizada podrá ser "Vuelos a Londres" o "Hoteles en Londres".

Ejemplo de identidades digitales

En la identidad digital convergen muchos aspectos de carácter sociológico, cultural e incluso psicológico. A veces esta identidad digital no se corresponde con la real, simplemente porque cada cual quiere mostrar lo mejor de sí mismo, con lo que se conoce como self-presentation. Según Goffman (1981), cuando un individuo se presenta ante los demás transmite la impresión que quiere proyectar. Los otros, a su vez, probarán de conseguir el máximo de información del individuo y contrastar la que ya tienen, hasta llegar al punto en el que el individuo ya sabe qué esperar de los demás y los demás del individuo. Wood y Smith (2005) definen la identidad como "una construcción compleja, personal y social, consistente en parte en quien creemos ser, como queremos que los demás nos perciban, y como de hecho, nos perciben" y los mismos autores afirman que en la comunicación electrónica lo que prima es la imagen que se quiere mostrar a terceros. Es evidente que la vida analógica condiciona quienes somos en Internet, pero hay que destacar que una vida activa en la red también puede repercutir positivamente en el mundo offline.

La identidad digital puede mostrar cómo es de diversa la propia vida y como es de múltiple la propia identidad. Una misma persona puede tener diferentes identidades,


71 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

por ejemplo, como fan de un grupo de música internacional, como miembro de una comunidad religiosa y como integrante de una saga familiar. Estas tres identidades pertenecen a una misma persona y eso se puede ver fácilmente reflejado en Internet.

Actualmente, se pueden encontrar con facilidad los datos y los productos de la actividad de una persona en la red de manera fragmentaria, es decir, fotos en un fotolog, opiniones personales en un foro o direcciones de correo electrónico y teléfonos en una red social. Así mismo, también hay webs gratuitos que recogen toda la información de una misma persona y la muestran ordenadamente según el tipo de datos. Sitios como pipl.com o 123people.com suelen ofrecer todo tipo de datos, incluso a través nubes de palabras con los conceptos que más identifican a una persona.

Es interesante conocer hasta dónde ha llegado la preocupación por las identidades. Jim Killeen grabó un reportaje, Google Me, sobre la problemática de encontrar en el buscador Google más de una persona con el mismo nombre y apellidos y que, por tanto, podrían confundirse, si no fuera por la profesión o la ubicación geográfica. En el reportaje de Killeen, él mismo entrevista diferentes Jim Killeen de todo el mundo con profesiones y vidas absolutamente diferentes pero que comparten el nombre de pila y el apellido. El actor plantea a los entrevistados una batería de treinta preguntas que van desde cuál es su color preferido hasta de qué se arrepienten o se sienten orgullosos en la vida. La posibilidad de encontrar datos personales en la red de una manera muy fácil y de seguir las actividades de personas en principio desconocidas puede abrir puertas ignotas y hace posible que empresas y proyectos, como el de Killeen, que hace unos años eran impensables. El reportaje, además, nos invita a la reflexión sobre qué nos hace semejantes y qué nos hace diferentes en la red y nos alerta sobre la posibilidad de confundir identidades personales.

3. Visibilidad

Toda actividad que genera un individuo en la red constituye su visibilidad, que puede ser positiva o negativa. Esta visibilidad puede ser autoconstruida a partir de los posts de un blog, los mensajes de Twitter, los comentarios a vídeos, fotos..., pero también puede ser fruto de referencias o comentarios de terceros. La comparación en el mundo analógico sería si la persona es más o menos conocida.

¿Nos interesa ser visibles? ¿Queremos pasar inadvertidos o aprovechar la ubicuidad que permite la red para estar en todas partes? Es determinante decidir qué tipo de presencia, qué tipo de visibilidad digital nos interesa.

Un ejemplo de visibilidad muy utilizado por bloggers o personas que actualizan informaciones regularmente es enviar la noticia de actualización de estos contenidos por correo electrónico a través de sitios de redes sociales u otras herramientas. Esta es, sin duda, una manera muy eficaz de compartir los materiales en la red y de maximizar la posible audiencia.

El impacto que tiene la visibilidad de una persona en el mundo digital es medible, por ejemplo, a partir del número de contactos que tiene, o bien, por los seguidores que


72 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

tienen ciertas actividades. También es medible a partir de las veces que unos determinados contenidos son replicados, por ejemplo, al replicar la entrada de un blog, comentar un vídeo, los contenidos colgados en una red social, etc. Por otro lado, se trate o no de un web colaborativo, el tráfico que genera constituye un indicador de visibilidad cuantificable, así como el número de enlaces que lo apuntan.

Es por ello que cabe preguntarse hasta qué punto es visible la propia "marca" personal, nuestro nombre. Para las empresas, el solo hecho de generar señales de cualquier tipo ya se tiene en cuenta como una acción de marketing; a escala personal, hay que valorar si esto es algo beneficioso o no.

El antropólogo Robin Dunbar (1993) explicó que el límite cognitivo de relaciones sociales estables que un ser humano puede mantener es aproximadamente de 150. Este número, conocido como el número de Dunbar, actualmente también se aplica al número de contactos virtuales, en sitios de redes sociales, foros o comunidades virtuales.

4. Reputación

La reputación recae en la opinión que otras personas tienen de un sujeto. Sin embargo, la construcción de esta reputación también puede hacerla, en parte, el propio interesado. ¿Quién no mira antes de elegir un hotel, reservar una mesa en un restaurante o comprar un libro qué es lo que otros han dicho? Para encontrar respuestas y elegir la que más nos interesa recurrimos a la reputación, así las opiniones de terceros pueden influir en nuestra decisión de compra.

Trasladado al mundo analógico sería ver si una persona (o empresa) goza de buena o mala prensa. En este sentido, toma importancia el hecho de tener presente quién habla de quién, en qué sitios y de qué manera. No es lo mismo la opinión de una persona poco visible, que la opinión de una persona muy visible, que difundirá sus juicios de manera más rápida y probablemente a su vez a personas también más visibles.

LinkedIn es una red social con una clara orientación profesional y una buena herramienta para gestionar la reputación en Internet. En esta red cada usuario crea un perfil y se puede comunicar con personas de su campo o círculo profesional. Entre las múltiples funcionalidades que ofrece, existe la posibilidad de recomendar una persona y añadir un comentario con una breve explicación sobre cuáles son sus cualidades profesionales. En este entorno, un profesional en paro pero con buenas recomendaciones en LinkedIn tendría más posibilidades de encontrar trabajo.

Algunas de las herramientas de reputación electrónica, según Bancal et al. (2009), son los motores de búsqueda de blogs, los meta motores sociales, las herramientas de seguimiento de comentarios, las herramientas de microblogs, los agregadores sociales o redes sociales y los motores de búsqueda de personas.


73 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

5. Privacidad

Ser consciente de la privacidad de los datos personales en Internet y del uso que se puede hacer de estos datos se convierte en una pieza clave para la gestión eficaz de la identidad digital. En Internet, "los nodos principales son las personas, y la información se difunde a través de redes de personas".

Desde la proliferación de los sitios de redes sociales en Internet, el tema de la privacidad es más relevante que nunca. En cuanto a la protección de datos personales en estas redes, es necesario incidir en que es evidente que los usuarios exponen de forma voluntaria sus datos, pero no siempre son conscientes de la repercusión que este hecho puede tener, especialmente por el uso que un servicio 2.0 puede hacer de esta información brindándola a terceros. Además, los proveedores de los servicios de sitios de redes sociales pueden guardar información del número de IP o sobre el tráfico de datos durante la conexión y utilizarlas, quizás mostrándola a otros perfiles.

Datos como la dirección de correo electrónico, fotografías, el teléfono o el currículum profesional, opciones políticas y religiosas son campos que constan en la mayoría de los formularios a la hora de crear un perfil. Todos estos datos están a menudo al alcance de perfectos desconocidos, lo que, en general, no había pasado hasta ahora en el mundo analógico. También hay que tener en cuenta que en el momento de darse de alta en alguno de los servicios mencionados, el usuario cede todos los datos personales y los contenidos a la red social, en algún caso, incluso después de que el usuario se haya dado de baja del servicio, estos datos y contenidos se mantienen visibles para otros usuarios.

Actualmente hay leyes que regulan la protección de datos de carácter personal. En cuanto al marco normativo en el Estado español sobre la protección de datos, es relevante el artículo 18.4 de la Constitución española de 1978, por el que "la ley obliga a los poderes públicos a limitar el uso de la informática para garantizar el honor y la intimidad personal y familiar de los ciudadanos y el pleno ejercicio de sus derechos", así como la Ley Orgánica 15/1999 de 13 de diciembre, de protección de datos de carácter personal.

Una opinión que hay que destacar sobre la privacidad es la brindada por Dennis O'Reilly (2007): "La mejor manera de proteger tu privacidad en la red es asumir que no la tienes y modificar tu comportamiento en línea de acuerdo con ello".

Hay dos perspectivas para aproximarse al tema de la identidad digital y de Internet. Una es creer que la presencia virtual significa un peligro para la seguridad personal y, por tanto, convenir en que si un individuo no construye su identidad digital, una tercera persona puede suplantarla y pueden ocurrir hechos indeseables. La otra perspectiva es entender la construcción de la identidad en la red como una oportunidad de aprendizaje tanto personal como profesional dentro de la cultura informacional donde vivimos inmersos (Freire, 2009b).

En general, las personas quieren ser homogéneas, es decir, mostrarse de la misma manera en las diferentes facetas de la vida, ya sea analógica o digital, teniendo en


74 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

cuenta que cada vez todo aquello que corresponde a la esfera personal y a la esfera virtual tiende a imbricarse más. Es por ello que podemos hablar de una identidad híbrida (analógica y digital) y que el conjunto de ambas es, efectivamente, la propia identidad, una única identidad. Actualmente, la gran diversidad de servicios web y herramientas en Internet hace que generalmente las identidades digitales estén fragmentadas. Este hecho, sin embargo, no significa en ningún caso que una persona no tenga una sola identidad en Internet.

Para gestionar eficazmente la identidad digital hay que tener presente que:

Una identidad digital personal es una representación virtual que nos permite interactuar en el ciberespacio, proyectar una personalidad y difundir una trayectoria personal o profesional para aprender y compartir información, como noticias, webs, aficiones, opiniones, etc.

Es posible no querer tener una identidad digital y no participar activamente en la nueva cultura digital. Esta es una opción personal, no obstante, que no garantiza que otras personas hablen o publiquen material de un individuo determinado, o bien suplante su identidad en Internet.

Si bien es cierto que la propia identidad digital debería ser totalmente coherente con la identidad analógica, también es verdad que el entorno virtual puede ser el escenario idóneo para realizar algunas actividades concretas, como desarrollar una afición o encontrar contactos estratégicos para a una determinada actividad profesional. También cabe destacar que la generación digital ya no diferencia entre la identidad digital y la analógica y, según apunta Freire (2009b), tampoco haremos esta distinción en el futuro. Todo lo que se publica en Internet queda para la posteridad, hecho que puede tener consecuencias futuras en la imagen y la reputación personal. Lo que se difunde sobre uno mismo y lo que nos rodea contribuye a escribir una memoria colectiva y perenne en la red. Son numerosas las quejas de los ciudadanos del peligro que puede llevar que un documento quede en la red a lo largo de los años. Este fue el caso de un profesor de Farmacología de Buenos Aires, que después de escribir su nombre en un buscador, el primer resultado era de la base de datos Dialnet con sus once libros escritos, pero el segundo era una noticia publicada por un rotativo en 1988 sobre el ingreso en prisión por un asunto relacionado con la organización ETA. En el archivo del periódico, aparecían catorce noticias con su nombre, pero ninguno informaba del desenlace del proceso. El hecho es que el rastro de la identidad digital en la red no se borra fácilmente, y es justamente por este motivo que diarios como El País reciben a menudo cartas de lectores que, conscientes de lo que supone que salga su nombre en una noticia, piden que se les borre de los índices de búsqueda.

Crear una identidad digital significa entender la tecnología y participar de ella. Es una oportunidad para demostrar quiénes somos realmente y acercarnos a la gente con intereses o aficiones similares.

Al igual que ocurre en el mundo analógico, hay buenas razones para tener varias identidades digitales en contextos diferentes. Pero experimentar otras identidades, a través de seudónimos y avatares, es también un riesgo, del mismo modo que alguien puede engañar, también puede ser engañado.


75 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

La credibilidad y la confianza, en el mundo virtual, también se gestionan aportando información responsable y ética. Apareció en las noticias que en Marruecos un joven ingeniero civil de 26 años, Fouad Mourtada, se hizo pasar en diferentes sitios de redes sociales por el príncipe Moulay Rachid, hermano menor de Mohamed VI. Este hecho acabó con la condena del ingeniero a tres años de cárcel y a pagar 900 euros de multa en el tribunal de primera instancia de Casablanca.

La gestión de la identidad digital implica que los usuarios sean conocedores del entorno web y que participen éticamente. Cuando somos conscientes de estas premisas y de las oportunidades y peligros de la red a la hora de gestionar la propia información personal se puede garantizar la gestión adecuada de la identidad personal y una mejor "calidad de vida" en la sociedad del conocimiento. Hay que tener presente que este conocimiento no sólo implica la participación del usuario sino también la de las entidades y empresas que hay detrás de estos servicios, que día a día son más conscientes de los problemas de seguridad y privacidad de los datos en la red.

Hoy en día Internet ofrece numerosas soluciones telemáticas, como facturación electrónica, visado digital, voto electrónico, firma electrónica, carné de identidad digital, formularios telemáticos, certificado digital, receta electrónica, etc., todas ellas opciones basadas en la encriptación de datos y en la utilización de dispositivos inteligentes como claves, tarjetas y generadores de contraseñas, que permiten la autenticación. El protocolo implantado es el HTTPS (hypertext transfer protocol secure), un sistema cifrado para transferir archivos confidenciales que incluyen datos personales o financieros. La política actual de protección de datos supone que los usuarios deben aceptar explícitamente las condiciones de los servicios digitales a los que acceden, y que se responsabilizan de la veracidad de los datos que aportan, mientras que las empresas e instituciones que disponen de sistemas de recogida y gestión de datos personales deben garantizar que el sitio cumple con los requisitos de protección y privacidad de los datos que reciben.

A pesar de las medidas preventivas, la usurpación de la identidad y el uso fraudulento son problemas comunes en el mundo virtual. Delitos frecuentes son los relacionados con falsas identidades, como el robo de identidad, los fraudes y los plagios. Un hacker tiene la capacidad de revelar y mejorar el funcionamiento de un sistema de seguridad, e incluso puede contribuir a detectar webs que desarrollan actividades delictivas, como plataformas con contenidos pronazis o pederastas. El cracker (o pirata informático), en cambio, utiliza los conocimientos para vulnerar los sistemas de seguridad ajenos y obtener cierta información que le reporta un beneficio. Es así como puede llegar a hacer usos fraudulentos como el phishing, una modalidad de estafa por correo electrónico diseñada para acceder de manera fraudulenta a cuentas bancarias. Los mensajes contienen formularios, o remiten a un sitio web de apariencia similar al de la entidad pero que no es real, sino una copia. Se pide al destinatario que vuelva a introducir datos confidenciales y claves financieras, y de esta manera se puede acceder sin problema a la cuenta bancaria. Hay que tener presente que una entidad bancaria nunca pide esta información por correo electrónico. El phishing y las técnicas para conseguir claves de sistemas informáticos o tarjetas de crédito se incluyen dentro de las prácticas de ingeniería social, las cuales tienen como objetivo obtener información confidencial haciendo uso del engaño y la manipulación


76 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

de los usuarios legítimos. Ante los ataques, a través de Internet o del teléfono, de los cracker sólo es posible defenderse con un aprendizaje sobre el uso ético y legal de los datos personales y de la seguridad en Internet.

Se concluye, por tanto, que: • la construcción de una identidad digital en la red implica un aprendizaje y una

actitud colaborativa y participativa en la cultura digital. La gestión de la propia presencia en la red se convierte en un escalón más dentro de los multialfabetismos y significa un paso fundamental para la persona que vive y se desarrolla en la sociedad en red.

La gestión de la identidad digital es una habilidad que hay que trabajar a partir de un método y de una voluntad positiva de participar de la cultura digital. El método debe tener en cuenta una reflexión sobre las actividades a desarrollar y los objetivos a alcanzar en la actividad en el ciberespacio.

Para ganar visibilidad y, sobre todo, reputación es fundamental especializarse y encontrar un tema, una forma de expresión o un canal concreto en el que las propias aportaciones sean valoradas. Querer estar en todas partes, utilizar todas las herramientas de la red y tratar gran variedad de temas no es garantía de una buena reputación electrónica.

De forma general, es recomendable no aportar datos personales en la red y, en todo caso, brindarlos en los entornos más seguros posibles y directamente a personas conocidas.

Módulo 2: Herramientas tecnológicas de comunicación Tema 2: Introducción a la Web 2.0

77 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

TEMA 2: INTRODUCCIÓN A LA WEB 2.0

1. La web 2.0

La Web 2.0 manifiesta el modo en que muchísimos usuarios utilizan la Web hoy en día. Una forma muy alejada a la de aquellos primeros años iniciales en los que se popularizó Internet, donde para lo único que utilizábamos Internet era para encontrar información y enviar correo electrónico.

Hoy en día el usuario se ha dado cuenta de que puede participar e influir mucho más, que puede aportar sus propios contenidos, su propia opinión, su propia visión de las cosas... Y, además, desea y quiere hacerlo.

Frases como:

"Segunda fase de Internet", "Web como plataforma" o "El usuario es el rey" reflejan bien esta idea de la Web 2.0.

Las empresas también evolucionan hacia este modelo, eso sí, en menor o mayor medida en función del tipo de empresa y de su modelo de negocio. En algunos sectores, esto se ve ya con mucha nitidez; en otros, todavía es un "trabajo en marcha".

Partimos de un modelo unidireccional como el de la Web 1.0 a un modelo bidireccional, donde no solo son importantes los contenidos que una empresa distribuye en su presencia en Internet, sino también saber conversar o interaccionar con sus clientes y usuarios.


78 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Es habitual que al pensar en la Web 2.0 nos venga a la cabeza portales tan populares como Facebook, YouTube o Flickr, pero también son ejemplos servicios como los blogs, los wikis o entornos para compartir recursos (fotografías, presentaciones, etc.).

En todos ellos, el usuario no tiene conciencia de "navegar por Internet", como se decía antes; sino más bien de "estar online", de "utilizar esta u otra aplicación".

Sin embargo, la Web 2.0 no es una tecnología (aunque han aparecido muchas tecnologías relacionadas con ella), no es ni siquiera una nueva forma de diseñar las páginas web. Se trata de una actitud por la que la empresa tiene que ser mucho más transparente; el usuario debe estar en el centro de la atención, es al que las empresas deben escuchar y facilitar su participación.

La empresa que interiorice esto tiene mucho ganado. No solo porque será mucho más fácil su transición, sino porque podrá aprovechar mejor la participación de sus clientes y diferenciarse de aquellas empresas que no lo hagan.

Para la empresa, el objetivo debe ser conseguir crear una comunidad de fieles alrededor de ella o de sus marcas. Como bien se indica en el Manifiesto Cluetrain, que es uno de los documentos que aportó en su momento una visión adelantada de lo que hoy conocemos por Web 2.0: "Los ganadores ponen en marcha comunidades; los perdedores, websites".

Y para gestionar esa comunidad online se requiere de un nuevo perfil profesional conocido como "Community Manager". Veamos en qué contexto trabaja este profesional.

2. Cambios en la web 2.0

La Web 2.0 es un cambio de grandes dimensiones, que, casi sin darnos cuenta, ha modificado nuestras vidas.

¿Pero cómo concretamos este nuevo cambio de actitud? Para ello, podemos analizar los siguientes principios:

• La Web como escenario: ya no se habla de "navegar" sino de utilizar la Web, de emplear tal o cual aplicación. Se escenifica el concepto de “estar online” en lugar de navegar. Como ventaja añadida, no se requiere de la instalación de aplicaciones en el ordenador, sino que son servicios de la Web, muchos de ellos gratuitos, disponibles mediante registro.

• Interactuar con la inteligencia colectiva: la empresa puede beneficiarse de la actividad de sus usuarios. Uno de los ejemplos más claros es la Wikipedia, enciclopedia online en la que los usuarios son los que crean y revisan los contenidos.


79 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• Programas y software como servicio, además de beta perpetuo: las aplicaciones web no se redistribuyen como productos, con su DVD y manual impreso. Ahora se trata de servicios que el usuario contrata por una cantidad periódica además de disponer de versiones gratuitas. Además, son servicios en continuo desarrollo y mejora por lo que ahora el adjetivo "beta" ya no tiene ningún significado peyorativo.

• Gestión de datos ("Data Inside"): el estudio y la gestión de la información que los usuarios crean en las aplicaciones web son vitales para que las compañías dedicadas a ofrecer servicios web subsistan. Es la única forma de cambiar y mejorar sus servicios de acuerdo a las preferencias de los usuarios.

• Software no limitado a un solo dispositivo: cada vez es más habitual que accedamos a través de dispositivos móviles, como los smartphone, los tablets, consolas de videojuegos, etc. Ahora la Web no puede pensarse únicamente para ordenadores de escritorio o portátiles.

• Modelos de programación sencilla: es una apuesta por construir aplicaciones fáciles, escalables, que permitan realizar cambios rápidamente y que mantengan los interfaces de usuarios con una navegación simple.

• Experiencias del usuario: importancia de poder utilizar todo.

3. Algunos proyectos 2.0

Al mencionar el nombre de Web 2.0, la mayoría pensamos en ejemplos muy populares como Facebook o YouTube. Sin duda alguna, son referentes de este mundo si atendemos a los principios, elementos y cambios que acabamos de conocer.

Youtube es una plataforma de hospedaje de vídeos donde los usuarios pueden subir sus propios vídeos y ponerlos a disposición de todo el mundo.

Pero no es solo eso, los usuarios pueden comentar y votar los vídeos subidos, pueden suscribirse a los canales que desean, etc. Vemos que:

• Se utiliza la Web como plataforma, siendo el lugar donde los usuarios publican, visualizan y comentan los vídeos.

• Se aprovecha la inteligencia colectiva, ya que se nutre de los vídeos que aportan sus usuarios y de la participación que estos efectúan a través de la plataforma. Es una plataforma que se base en la agregación de esfuerzos individuales que acaban construyendo una red de conocimientos compartidos.


80 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• Se proporciona un software como servicio y no como producto.

• El usuario debe registrarse (a través de una cuenta de Google) para publicar o suscribirse a los canales que le interesan. Además, es un servicio en continua mejora, como todos los servicios de Google.

• YouTube se nutre de la participación de los usuarios para mejorar y para conocer sus preferencias.

• Es accesible a través de distintos dispositivos. Existen aplicaciones dedicadas para móviles, tablets, etc.

• Constituye una experiencia enriquecedora para el usuario en la que no solo actúa como consumidor, sino también puede hacerlo como productor (prosumer).

¿Qué decir de Facebook? Con un número impresionante de personas registradas, se trata de la primera red social a nivel mundial. Millones de personas se comunican a través de Facebook y cada vez más lo hacen también con las empresas.

• En Facebook la Web se utiliza como plataforma, como una extensión de nuestro ordenador o dispositivo móvil: para publicar en la biografía, para subir fotografías, para jugar, para participar en eventos, etc.

• Se nutre de la inteligencia colectiva. Sin la aportación de los usuarios, simplemente no existiría. Ponerse en contacto con amigos, con personas a las que quieres seguir; comentar noticias o cualquier cosa que publiquen los amigos. Aprovechar noticias, eventos o promociones que se generan y que no aparecen en otro lugar.

• Como ocurre en YouTube, Facebook está evolucionando continuamente. Por ejemplo, con la incorporación del Timeline o biografía en los perfiles de los usuarios y en el de las empresas.

• Las empresas son capaces de conocer mejor a sus fans en Facebook gracias a las estadísticas que reciben.


81 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• La experiencia del usuario es enriquecedora de tal manera que muchas veces funciona como algo natural.

• Rapidez, inmediatez, tener siempre todo "a mano" sin necesidad de recargar la página y, por lo tanto, sin necesidad de solicitarla al servidor. Menor consumo de ancho de banda.

Estos ejemplos y muchos más no tendrían sentido sin la participación activa de los usuarios. Y precisamente en ello está su éxito.

¿Podemos conseguir una comunidad similar alrededor de nuestra marca o empresa? ¿Deseamos tenerla? ¿Quién debe encargarse de ella?

4. ¿Protagonistas? Los usuarios.

En el año 2006 la prestigiosa revista Time nos relataba el cambio que se venía produciendo en la Web al declarar como "personaje del año" a los propios usuarios.

Según indicaba su director, Richard Stengel, "Los individuos son los que están cambiando la naturaleza de la era de la información"; "Son los creadores y consumidores del contenido generado por los usuarios los que están transformando el arte, la política y el comercio". En definitiva, "Son los ciudadanos comprometidos de una nueva democracia digital".

Sin duda, tenía mucha razón. A este respecto se han creado nuevas palabras que antes no existían:


82 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• Prosumer: hace referencia al cambio de perfil del usuario. Ahora muchos usuarios no solo consumen los contenidos que encuentran en la Web sino que también producen. Es una mezcla de consumidor + productor.

• Crossumer: va en la línea de que el consumidor está cada vez más informado y es conocedor de las técnicas habituales de publicidad, por lo que es inmune a estas. Por ejemplo, si recibe el mensaje de que la "oferta caduca en 24 horas" y ha visto que se repite día a día, no tendrá la urgencia que el anuncio desea crear. De hecho, el resultado es justamente el contrario al esperado.

La actitud de las empresas debe cambiar. Su presencia en este mundo se hace cada vez más necesaria y aquellas que no lo entiendan perderán la oportunidad que ofrecen los usuarios para conocer, de primera mano, lo que necesitan y demandan.

Las empresas no deben entenderlo como una moda sino como un nuevo medio de comunicación que deben aprovechar para no "quedarse fuera de juego". Pero esto no significa que deban descuidar las relaciones offline que siempre han funcionado. Deben cuidar todas las relaciones, cada una en su correspondiente contexto.

5. Social Media

En la Web que hemos llamado Web 2.0 surgen una serie de plataformas cada vez con mayor importancia, las llamadas redes sociales.

Inicialmente utilizadas en exclusiva por particulares como medio para entablar relaciones o comunicarse con conocidos, con amigos o con personas con intereses comunes, hoy en día es también un medio de comunicación "de tú a tú" con las empresas.


83 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

De ahí que haya surgido la necesidad de que las empresas tengan una presencia activa en estas redes sociales. Facebook, Twitter, Google+, Tuenti, YouTube, Instagram, Pinterest, etc. son ejemplos claros de redes sociales. Esta labor es lo que se conoce hoy en día como participación en los Social Media y alrededor de ella han aparecido distintos perfiles profesionales, como el Community Manager.

El caso es que son cada vez más los consumidores que pueden encontrarse en las redes sociales. Saber explorarlas y construir la identidad de la empresa en ellas son tareas que las empresas deben realizar.

¿Qué debe hacer la empresa con su presencia en Social Media?

• Investigación de mercados.

• Retroalimentación de clientes.

• Lanzamiento de nuevos productos y servicios.

• Comunicación de la opinión corporativa cuando se requiera. Dar a conocer "su verdad".

¿Cómo se puede plantear esta presencia en Social Media?

Principalmente desde dos puntos de vista, siendo el primero el más habitual hasta ahora, pero también el menos deseable:

1. Estrategia de publicidad directa en los Social Media.

Busca el retorno de inversión (ROI) inmediato, principalmente en términos de venta. La presencia se ve a corto o medio plazo, no se plantea en términos de construir una presencia más a largo plazo.

2. Estrategia de comunidades de usuario.

A diferencia de la anterior, la estrategia es a largo plazo. La empresa pretende mostrar sus procesos, relaciones y personas y no solo con el propósito de vender productos y servicios. Generación de confianza en la marca, fidelización, apoyo y soporte al consumidor son resultados más seguros a largo plazo, por lo que este enfoque es el deseable en la mayoría de los casos.

Módulo 2: Herramientas tecnológicas de comunicación Tema 3: Redes sociales

84 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

TEMA 3: REDES SOCIALES

1. Definición de Red Social.

Según Wikipedia “Las redes sociales son estructuras sociales compuestas de grupos de personas, las cuales están conectadas por uno o varios tipos de relaciones, tales como amistad, parentesco, intereses comunes o que comparten conocimientos”.

Una red social es por tanto una transposición de la sociedad y sus relaciones al mundo de internet. En ellas el usuario establece relaciones de distinto tipo (principalmente amistad o seguimiento) con otros usuarios de la red social. Los propios usuarios son los encargados de generar el contenido que nutre estas redes.

Es también un espacio de comunicación entre personas procedentes de ámbitos muy variados. Abarcan temáticas muy diversas y un amplio abanico de campos: productos de consumo, servicios, música, ocio y un gran etcétera. En este ámbito, las empresas y organizaciones encuentran en la red social una forma de llegar a sus públicos y, además, de una forma inmediata. Y no solo esto, los consumidores responden rápidamente, iniciando conversaciones y generando publicidad (buena o mala) para una marca, producto o servicio.

La llegada de las redes sociales a internet no fue posible hasta que llegó la llamada Web 2.0 (alrededor de 2004), una evolución de internet en la que se permitía al usuario dejar de ser mero observador y convertirse en generador de contenido de forma sencilla. También facilitaba la colaboración y compartición de contenidos.

2. Funcionamiento de las redes sociales.

La forma de moverse por las redes sociales suele ser siempre la misma. El usuario se crea un perfil en la plataforma al que puede aportar mayor o menor información personal. Después establece contacto con otros usuarios de la plataforma con los que comparte un interés por un tema, se conocen en la vida real,…

Red social

Unirse a

grupos Relacio

nes

Publicar

Eventos

Invitar

Notificar

Compartir

Seguir


85 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

El usuario irá aportando contenido que verán el resto de usuarios con los que ha establecido la relación. Igualmente, él irá siguiendo las publicaciones de sus contactados. Las publicaciones se pueden valorar con un “me gusta” o “favorito”, también podemos compartir las publicaciones de otros usuarios para que lleguen a mis contactos.

Normalmente las redes sociales pueden funcionar a tres niveles de privacidad:

• Un nivel público en el que los contenidos son visibles para todos los usuarios de la plataforma.

• Un nivel semiprivado en el que mis publicaciones sólo son visibles por las personas con las que he establecido una relación.

• Un nivel privado en el que nos podemos comunicar con una o varias personas mediante mensajería instantánea o correo electrónico interno.

3. Tipos de redes sociales

En las redes sociales se utilizan una gran variedad de herramientas. MERODIO, experto en redes sociales, las clasifica, según su utilidad y aplicaciones, en:

• Redes sociales: permiten compartir información (texto, audio, vídeo) con familiares, amigos y/o conocidos.

• Publicaciones: son plataformas que permiten compartir el contenido y, así, aportarle un valor.

• Fotografías: una imagen tiene un gran peso en la estrategia comunicativa.

• Audios: los podcast son archivos de audio digitales y permite escucharlos en cualquier momento en los dispositivos de audio digitales.

• Vídeos: el consumo de este tipo de soporte va en aumento.

• Microblogging: el usuario se expresa en menos de 140 caracteres. Es un medio directo y sencillo.

• Emisión de streaming: muy útiles para emitir en directo conferencias, programas de radio y eventos.

• Videojuegos: existen plataformas donde los usuarios comparten experiencias con otros jugadores.

• Aplicaciones de productividad: son herramientas que ayudan al desarrollo de la actividad empresarial.

• Agregadores de noticias: comparten noticias a través de la Red.

• RSS: el usuario recibe las actualizaciones de webs y blogs que previamente ha seleccionado.

• Buscadores: son una poderosa herramienta para localizar información.


86 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• Móviles: se han convertido en una valiosa herramienta para el sector del marketing ya que siempre se lleva encima.

• Interpersonales: son un importante instrumento de comunicación entre las personas.

4. Clasificación.

Teniendo en cuenta la dimensión social de las redes, la primera clasificación que podríamos hacer sería distinguir entre: redes sociales off-line o analógicas, sin la intermediación de un aparato o sistema electrónico; redes sociales on-line o digitales, a través de medios electrónicos; y redes sociales mixtas, mezcla de los dos tipos anteriores. Dejando claro esto, vamos a centrarnos en las redes sociales on-line. Su tipología se ha planteado desde muchos puntos de vista, la propuesta más extendida es la que parte de la clasificación de los portales de Internet, diferenciando entre horizontales o generales y verticales o especializadas. Pero las redes sociales son un tema complejo, por lo que dentro de la categoría vertical vamos a utilizar una clasificación más completa, de ordenación múltiple.

Redes sociales horizontales

Las redes sociales horizontales no tienen una temática definida, están dirigidas a un público genérico, y se centran en los contactos. La motivación de los usuarios al acceder a ellas es la interrelación general, sin un propósito concreto. Su función principal es la de relacionar personas a través de las herramientas que ofrecen, y todas comparten las mismas características: crear un perfil, compartir contenidos y generar listas de contactos. Algunas de ellas son:

• Facebook.

• Hi5.

• MySpace.

• Tuenti.

• Google+..


87 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Redes sociales verticales

Dentro de las redes sociales hay una tendencia hacia la especialización. Aunque las redes sociales verticales ganan diariamente miles de usuarios, otras tantas especializadas se crean para dar cabida a los gustos e intereses de las personas que buscan un espacio de intercambio común. Como veremos más adelante, la posibilidad que ofrecen ciertas plataformas de crear una red social propia y personalizada produce redes sociales de todo tipo, específicas para los intereses de sus usuarios. Por otro lado, las grandes compañías de Internet aspiran a competir con las redes más importantes que se reparten el grueso de usuarios de red social, ofreciendo actividades, contenidos o temas concretos. La clasificación que presentamos a continuación permite ordenar la diversidad que ha generado la explosión de redes sociales especializadas de los últimos años. En el primer apartado, las organizaremos por temática. Cualquier red social, centrada en un tema concreto, daría lugar a una nueva categoría, por ello vamos a enumerar algunas de las temáticas más populares y prolíficas. En el segundo apartado, hablaremos de las redes sociales en relación a su actividad, referente a las funciones y posibilidades de interacción que ofrecen los servicios.

Por temática

• Profesionales. Se presentan como redes profesionales enfocadas en los negocios y actividades comerciales. Su actividad permite compartir experiencias, y relacionar grupos, empresas y usuarios interesados en la colaboración laboral. Los usuarios detallan en los perfiles su ocupación, las empresas en las que han trabajado o el currículo académico. Las más importantes son: Xing, LinkedIn, y Viadeo, que engloban todo tipo de profesiones, pero también existen otras específicas de un sector como HR.com, para los profesionales de recursos humanos, o ResearchGate, para investigadores científicos.

• Identidad cultural. En los últimos años, debido al poder de la globalización, se aprecia un incremento de referencia al origen por parte de muchos grupos que crean sus propias redes para mantener la identidad. Ejemplos de esto son:Spaniards, la comunidad de españoles en el mundo; y Asianave, red social para los asiático-americanos.

• Aficiones. Estas redes sociales están dirigidas a los amantes de alguna actividad de ocio y tiempo libre. Encontramos redes tan dispares como los pasatiempos que recogen, por ejemplo: Bloosee, sobre actividades y deportes en los océanos; Ravelry, para aficionados al punto y el ganchillo; Athlinks, centrada en natación y atletismo; Dogster, para apasionados de los perros; o Moterus, relacionada con las actividades y el estilo de vida de motoristas y moteros.

• Movimientos sociales. Se desarrollan en torno a una preocupación social. Algunas son: WiserEarth, para la justicia social y la sostenibilidad; SocialVibe,


88 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

conecta consumidores con organizaciones benéficas; o Care2, para personas interesadas en el estilo de vida ecológico y el activismo social.

• Viajes. Con la facilidad para viajar y el desarrollo de los viajes 2.0, estas redes sociales han ganado terreno a las tradicionales guías de viajes a la hora de preparar una escapada. Conectan viajeros que comparten sus experiencias por todo el mundo. Podemos visitar, TravBuddy, Travellerspoit, Minube o Exploroo.

• Otras temáticas. Encontramos, por ejemplo, redes sociales especializadas en el aprendizaje de idiomas, como Busuu; plataformas para talentos artísticos, como Taltopia; o sobre compras, como Shoomo.

Por actividad

• Microblogging. Estas redes sociales ofrecen un servicio de envío y publicación de mensajes breves de texto. También permiten seguir a otros usuarios, aunque esto no establece necesariamente una relación recíproca, como los seguidores o followers de los famosos en Twitter. Dentro de esta categoría están: Twitter, Tumblr.

• Juegos. En estas plataformas se congregan usuarios para jugar y relacionarse con otras personas mediante los servicios que ofrecen. A pesar de que muchos creen que son, simplemente, sitios web de juegos virtuales, las redes sociales que se crean en torno a ellos establecen interacciones tan potentes que, incluso, muchos expertos de las ciencias sociales han estudiado el comportamiento de los colectivos y usuarios dentro de ellos. Algunas son: Friendster, Foursquare, Haboo, Wipley, Nosplay o World of Warcraft.

• Geolocalización. También llamadas de georreferencia, estas redes sociales permiten mostrar el posicionamiento con el que se define la localización de un objeto, ya sea una persona, un monumento o un restaurante. Mediante ellas, los usuarios pueden localizar el contenido digital que comparten. Ejemplos de este tipo son: Foursquare, Metaki, Ipoki y Panoramio.

• Marcadores sociales. La actividad principal de los usuarios de marcadores sociales es almacenar y clasificar enlaces para ser compartidos con otros y, así mismo, conocer sus listas de recursos. Estos servicios ofrecen la posibilidad de comentar y votar los contenidos de los miembros, enviar mensajes y crear grupos. Los más populares son: Delicious, Digg.

• Compartir objetos. Dentro de estas redes sus miembros comparten contenidos diversos como vídeos, fotografías o noticias, y mediante esta colaboración se establecen las relaciones que tampoco tienen que ser mutuas de forma obligatoria. Hablamos de ellas con más detalle en el siguiente apartado.

Por contenido compartido

• Fotos. Estos servicios ofrecen la posibilidad de almacenar, ordenar, buscar y compartir fotografías. Las más importantes en número de usuarios son: Flickr, Fotolog, Pinterest y Panoramio.


89 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• Música. Especializadas en escuchar, clasificar y compartir música, permiten crear listas de contactos y conocer, en tiempo real, las preferencias musicales de otros miembros. Ejemplos de estas redes sociales son: Last.fm, Blip.fm o Grooveshark.

• Vídeos. Los sitios web de almacenamiento de vídeos se han popularizado de tal manera que en los últimos años incorporan la creación de perfiles y listas de amigos para la participación colectiva mediante los recursos de los usuarios, y los gustos sobre los mismos. Algunos ejemplos: Youtube, Vimeo, Dailymotion, Pinterest y Flickr.

• Documentos. Por la red navegan documentos de todo tipo en formatos diversos, en estas redes sociales podemos encontrar, publicar y compartir los textos definidos por nuestras preferencias de una manera fácil y accesible. Su mayor exponente es Scribd.

• Presentaciones. Al igual que ocurre con los documentos, el trabajo colaborativo y la participación marcan estas redes sociales que ofrecen a los usuarios la posibilidad de clasificar, y compartir sus presentaciones profesionales, personales o académicas. Las más conocidas son: SlideShare y Slideboom.

• Noticias. Los servicios centrados en compartir noticias y actualizaciones, generalmente, son agregadores en tiempo real que permiten al usuario ver en un único sitio la información que más le interesa, y mediante ella relacionarse estableciendo hilos de conversación con otros miembros. Algunos de ellos son: Menéame, Aupatu, Digg y Friendfeed.

• Lectura. Estas redes sociales no sólo comparten opiniones sobre libros o lecturas, sino que además pueden clasificar sus preferencias literarias y crear una biblioteca virtual de referencias. Ejemplos de esta categoría son: Anobii, Librarything, Entrelectores, weRead y Wattpad.

5. La red social en la empresa.

Las empresas buscan en los usuarios de las redes sociales fundamentalmente:

• Transparencia.

• Que respondan a sus inquietudes, preguntas y dudas.

• Que escuchen sus necesidades.

• Que no conviertan las redes sociales en sitios estrictamente de negocios.

Para ello la empresa u organización deberá contar con una persona responsable de comunicación en las redes sociales: community manager o social media manager. Este profesional tendrá que conseguir generar contenidos positivos de la compañía y de su marca, que los usuarios se sientan implicados con la firma empresarial e interactuará con los consumidores.


90 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Lo primero que debe hacer la empresa es seleccionar a la persona que interactuará con la comunidad de usuarios: el community manager.

El community manager no es la única persona que produce contenidos en la red. Los otros departamentos de la compañía también generan. Sin embargo, los consumidores no deben tener más de un interlocutor. Deben identificar a una persona como el portavoz de la empresa, de puertas afuera solo debe existir una única voz.

El siguiente punto que se deberá tener en cuenta es saber quién forma parte de esa comunidad de usuarios, el público objetivo o target. De esta forma resultará más sencillo dotar de contenido al mensaje que se pretende transmitir en la plataforma social. Si no se conoce quién es el público objetivo, no se podrá definir el mensaje o se podría cometer el error de trasladar contenidos poco coherentes o contradictorios.

La empresa u organización debe tener claro qué tipo de información sobre ella, su marca y producto desea compartir. ¿Su objetivo es hablar únicamente de los productos y servicios de la compañía o pretende ir más allá y compartir mucha más información para que los usuarios se sientan más implicados, cercanos e identificados con la compañía? En este caso, se deberá discernir hábilmente qué tipo de información resulta de utilidad para el usuario y cuál no. No hay que cansar al público con datos que le resultan irrelevantes si se pretende mantener su interés y continuar interactuando con él.

Es importante remarcar que debe haber un trabajo de filtraje de la información antes de publicarla. No se puede colgar todo en la red, ya que determinados datos pueden influir negativamente en la compañía y no todo interesa a los consumidores. De la misma forma no se debe transmitir todo lo que llega a través de la comunidad de usuarios a los responsables de los diferentes departamentos sin un previo análisis y previa filtración del contenido.

No necesariamente compartir información implica acercarse más al público.

Se deberá ir midiendo los resultados a medida que se van realizando nuevas acciones para conocer si se avanza por buen camino o no.

6. Consideraciones sobre los contenidos.

Los contenidos deben tener en cuenta los siguientes puntos:

• Despertar el interés del usuario.

• No ser idénticos a los contenidos publicados por la compañía en otros espacios digitales. Una red social debe ofrecer algo más que la página web de la empresa. Son dos canales complementarios y no repetitivos.

• El lenguaje se debe adaptar a la red utilizada. El formato de la información debe ser diferente.


91 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• Fomentar el diálogo, debate y participación. Para ello, el community manager deberá tener suficientes habilidades comunicativas.

• Distinguir a los seguidores de la compañía, marca o producto. Los fans se tendrán que sentir especiales por el hecho de serlos. Para ello la firma puede utilizar diferentes recursos como ofrecerles contenidos exclusivos, descuentos u oportunidades, entre otros.

• Ser agradecidos. La empresa deberá agradecer a aquellos que realizan aportaciones útiles para la firma y a los que se convierten en transmisores de los artículos o servicios recomendándolos a sus amigos, familiares u otros consumidores en la red.

• Utilizar la red social como apoyo a los productos o servicios pero sin ser intrusivos. Si no, se corre el riesgo que el usuario deje de ser un seguidor, un fan.

• Ser coherentes. El mensaje que se genera en las redes sociales debe guardar coherencia con la imagen que se transmite fuera de las plataformas digitales. En el ámbito online se debe transmitir la misma imagen corporativa que se tiene offline. Lo que se deberá realizar es adaptar el contenido a los diferentes canales de transmisión.

Módulo 2: Herramientas tecnológicas de comunicación Tema 4: Facebook

92 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

TEMA 4: FACEBOOK

Introducción.

Se trata de una red generalista, horizontal, creada por Mark Zuckerberg en 2004 dentro de un entorno universitario inicialmente, pero pronto lo abrió a cualquier persona que tuviese una cuenta de correo. En 2007 se tradujo al español. Ahora está traducida a unos 110 idiomas.

Los números de Facebook son abrumadores. Cuenta con unos 1200 millones de usuarios activos, se estima que el 35,7% de la población de Europa occidental lo usó en 2013, se reciben 6000 millones de “me gusta” al día. También es verdad que, últimamente, está frenando su crecimiento ya que la gente joven está más metida en otras redes: Youtube, Tumblr, Instagram…

1. Proceso de registro

Para tener una cuenta en Facebook, accedemos a www.facebook.com y rellenamos el formulario “Regístrate” de la derecha. Básicamente lo único necesario es tener una cuenta de correo electrónico operativa ya que, al registrarnos, nos mandarán un correo para que confirmemos el alta en la plataforma.

Este proceso lo realizaremos sólo una vez. Para acceder a Facebook en sucesivas ocasiones entraremos por los campos de correo y contraseña de la barra azul


93 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

superior.

2. Perfil de usuario

Desde este formulario podemos aportar información que no hayamos aportado durante el proceso de registro. Por ejemplo nuestro lugar de trabajo, ciudad natal o la escuela en la que estudiamos. Facebook usará esta información para sugerirnos personas que quizá conozcamos.

También podremos, pinchando en el cuadro correspondiente, actualizar nuestra foto de perfil (la cuadrada que aparecerá en nuestras interacciones con otros usuarios) y la foto de portada (la alargada en la parte superior de nuestra biografía que dará la bienvenida a las personas que visiten nuestro perfil).

3. Configuración de la cuenta

Accediendo como indica la figura llegamos a todas las opciones de configuración.


94 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

En la figura siguiente, en el menú de la izquierda, tenemos las distintas categorías. Todo está perfectamente descrito en Facebook. Algunas de las más interesantes son:

• General: Cambiar nuestro nombre en la red, cambiar nuestra contraseña.

• Seguridad: Controlar los accesos de tu cuenta, desactivar la cuenta.

• Privacidad: Quién ve mis publicaciones, quién me puede contactar.

• Biografía y etiquetado: Quién puede ver el contenido de mi biografía, si permito que alguien añada cosas a mi biografía.

• Bloqueos: Posibilidad de bloquear personas para que no vean mis publicaciones ni puedan interactuar conmigo.

• Notificaciones: Qué avisos queremos recibir y de qué manera controlar las notificaciones que se nos mandan al correo electrónico.

Desde el candado que hay justo a la izquierda del triángulo invertido por el que entramos a configuración, podemos acceder a un asistente que nos hace más sencilla la configuración de la privacidad.

4. Biografía

Accedemos a ella pinchando en nuestro nombre en el menú de la izquierda.

En la biografía (anteriormente llamada “muro”) podemos ver nuestras publicaciones en el centro, a la izquierda veremos nuestros amigos, fotos, lugares… y a la derecha una lista de años con la que nos podremos desplazar a épocas anteriores.


95 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

5. Buscar amigos

Podemos hacerlo desde la casilla correspondiente de la barra superior, escribiendo el nombre del usuario que queramos buscar.

Una vez encontrado accedemos a su biografía, donde podremos ver los datos públicos de esa persona. En ella, si accedemos al botón, provocará que le mandemos una solicitud de amistad que el otro usuario debe aceptar. Una vez aceptada se establecerá entre las dos personas una relación de amistad.

Nosotros seremos notificados cuando alguien nos solicite amistad.

Pinchando en ese dibujo de las dos cabezas podemos confirmar esa solicitud de amistad o no. Hay que tener siempre en mente que las personas que confirmemos como amigos podrán ver mis publicaciones y la información de mi biografía.

También podemos gestionar las solicitudes de amistad pinchando en “Buscar amigos” de la barra superior. Además de las solicitudes de amistad, nos aparecerán “sugerencias de amistad” y “personas que quizá conozcas”. Estas dos categorías son contactos que nos sugiere Facebook en base a nuestra información y actividad, es decir, no son personas que nos hayan enviado ninguna solicitud de amistad. Si queremos entablar amistad con alguna le daremos al botón “Agregar a mis amigos” que mandará la correspondiente solicitud de amistad.

6. Actualización de estado

Utilizamos el espacio en blanco del centro de la biografía para escribir el contenido que queramos compartir, también se puede pegar un enlace a un página web con el


96 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

contenido que nos interese. Otra opción es añadir fotos o vídeos que tengamos en nuestro equipo.

Una vez hecho esto, debemos tener cuidado de a quién vamos a compartir el contenido. En la figura se muestra “Amigos”, pero ese botón puede tener el valor “Público” que haría que el contenido fuera visible para cualquier usuario de Facebook. Por último pinchamos en el botón “Publicar”.

En nuestra actualización de estado podemos “etiquetar” a alguien simplemente escribiendo su nombre en Facebook (quedará resaltado en azul). De esta forma la persona etiquetada recibirá una notificación de nuestra publicación. También podemos etiquetar a personas que salgan en una fotografía o incluso referenciar lugares.

Cuando alguien interaccione con alguna de nuestras actualizaciones de estado recibiremos una notificación. Lo detectaremos por la etiqueta roja que veremos en el símbolo de notificaciones.

Las actualizaciones de estado de mis amigos las veremos en la zona central, justo debajo del formulario de nuestra actualización de estado. Se irán acumulando las actualizaciones de estado o entradas de nuestros amigos. Debajo de cada una tenemos las siguientes opciones:

• Me gusta: Para indicar que la entrada me ha resultado interesante.

• Comentar: Tenemos la opción de escribir algo sobre la entrada de mi amigo. En los comentarios también podemos etiquetar personas.

• Compartir: Mediante esta opción añadiría la entrada de mi amigo a mi biografía y, de esta forma, hacerla visible a mis amigos.

Si alguna entrada nos ha resultado ofensiva o de mal gusto podemos ocultarla desde el triángulo invertido que hay en la parte superior derecha de cada entrada. Ahí le podremos poner “No quiero ver esto”. Si no quisiera volver a ver más publicaciones de dicha persona, desde el mismo sitio puedo poner “Dejar de seguir a…”. De esta forma no vería las publicaciones de ella, aunque seguiría manteniendo la relación de amistad en la plataforma.

Escribir texto


97 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

7. Publicar en la biografía de otros usuarios

Cuando publiquemos contenido en la biografía de un amigo, el contenido será visible para los contactos de nuestro amigo. Para ello accederemos a su biografía y usaremos el formulario de publicación que hay encima de sus actualizaciones de estado. El amigo recibe una notificación de que alguien ha publicado en su biografía.

8. Mensajes

Se refiere a la parte privada de Facebook. Con “mensajes” podemos “chatear” con amigos de forma privada. Podemos acceder a esta opción desde el menú de la izquierda.

Una vez dentro, en la columna de la izquierda, tendremos las últimas conversaciones. En la parte central, arriba, tenemos el botón “+ Mensaje nuevo” que nos sirve para iniciar una nueva conversación con la persona o personas que queramos, simplemente escribiendo su nombre en el “Para”. En la parte de abajo tenemos el formulario para escribir nuestro mensaje o adjuntar archivos y fotos.


98 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

“Mensajes” es lo mismo que la parte de “Chat” que nos sale a la derecha en la pantalla principal de Facebook. Sólo que desde “Chat” vemos fácilmente a los amigos que estén conectados en ese momento, además la conversación la mantendremos sin salir de la página principal de Facebook. El chat lo podemos desactivar sin que esto influya a la funcionalidad de enviar o recibir mensajes privados. Desactivar el chat lo que provoca es que nuestros amigos no pueden ver mi estado de conexión y yo no puedo ver el suyo.

Cuando se manda un mensaje a alguien que no está conectado, el mensaje se guarda y el destinatario recibe una notificación de que tiene conversaciones pendientes en la barra superior de Facebook.

Desde ese icono de la barra superior puedo contestar mensajes o mandar nuevos sin salir de la página principal de Facebook, ya que usa el modo chat.

9. Fotos

Podemos acceder a este apartado desde nuestra biografía o también desde el menú de la izquierda, en la sección Aplicaciones.

Desde aquí podemos ver las fotos en las que estamos etiquetados (pudiendo eliminar la etiqueta), ver las fotos que hemos subido nosotros mismos u organizar las fotos en Álbumes.

Por defecto Facebook maneja varios álbumes según el origen de la foto (fotos subidas con el teléfono móvil) o su utilidad (fotos de portada, fotos de perfil), pero tenemos la flexibilidad de poder crear nuestros propios álbumes para organizar nuestras fotos.


99 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

10. Crear un evento.

Un evento es un acto, una cita, un día a una hora a la que podemos invitar a nuestros amigos.

Accedemos desde “Eventos” en el menú de la izquierda. Si aquí tenemos un número a la derecha, es el número de eventos a los que hemos sido invitados por nuestros amigos. Ante un evento podemos decir que participamos, que lo rechazamos o que tal vez asistamos.

Para crear un evento le damos al botón “Crear” y luego rellenamos un formulario (ver la figura) donde especificamos día y hora del evento, el nombre, información adicional, el lugar y el tipo de invitación que vamos a realizar (básicamente si es para amigos o es público). Cuando lo tengamos relleno damos al botón “Crear” del formulario.

Una vez creado accedemos a la página del evento donde, entre otras cosas, podemos poner una foto de portada y, lo más importante, invitar a personas. Mediante el botón “Invitar” podemos seleccionar de nuestros amigos las personas a las que queremos informar del evento mediante una invitación.

Según vayan respondiendo los invitados llevaremos el control de las personas que asistirán y de los posibles asistentes.


100 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

11. Páginas.

Desde Inicio, en el menú del panel izquierdo, accedemos a ellas, donde accedemos a las noticias publicadas en las páginas con las que se tiene conexión, acceso a páginas propuestas, las sugeridas por Facebook y a las invitaciones que tengamos, y a crear página.

Las páginas representan a una organización, empresa, producto… Nos podemos hacer seguidores de las páginas que nos interesen (dando a su botón de “Me gusta”). Normalmente se usan con fines profesionales o publicitarios y establecen relaciones más estrechas con público y clientes.

Las páginas ayudan a los negocios, organizaciones y marcas a compartir su historia y conectar con el público. Al igual que los perfiles, las páginas se pueden personalizar publicando historias, organizando eventos, añadiendo aplicaciones, etc. Las personas que hayan indicado que les gusta tu página, así como sus amigos, pueden obtener actualizaciones en la sección de noticias.

Es posible crear y administrar una página desde una cuenta personal y si queremos crear una página que represente a una empresa, una marca, una organización o un famoso, debemos ser su representante oficial.

Para crear una página entramos en “Crear página” y elegimos una de las opciones que se adapte a nuestros requisitos.


101 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Elegida la opción, en este caso, “Lugar o negocio local” rellenamos el formulario, pero es conveniente leer primero las condiciones que vamos a aceptar sobre las páginas de Facebook.

En el tema 10 de este módulo se verá con más detalles la administración y uso de las páginas de empresa.

12. Grupos.

Los grupos reúnen a personas con un interés en un tema. La pertenencia a un grupo te permite interactuar con las publicaciones de las demás personas en ese grupo. Lo publicado sólo es visible para los miembros del grupo. Hay grupos abiertos en los que cualquiera puede ser aceptado y grupos cerrados a los que sólo se puede acceder por invitación.

Accedemos a Grupos desde el panel izquierdo de Inicio, donde aparecen los nombres de los grupos ya creados y el acceso a crear grupo:

Al pinchar en crear grupo se nos presenta un formulario con las opciones sobe el mismo, pudiendo añadir los contactos que estimemos conveniente.

En cuanto a la privacidad, elegimos: “Público”, si cualquiera puede ver el grupo, a sus miembros o las publicaciones; “Cerrado”, si cualquiera puede encontrar el grupo y a sus miembros pero sólo éstos pueden acceder a las publicaciones; “Secreto”, si sólo los miembros pueden encontrar el grupo y acceder a las publicaciones.


102 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Vemos las diferencias entre páginas y grupos que nos ofrece Facebook:

Las páginas permiten a organizaciones, empresas, famosos y marcas reales comunicarse de forma general con la gente a la que gustan. Las páginas solamente debe ser creadas y administradas por representantes oficiales.

Los grupos son un espacio pensado para que las personas intercambien opiniones acerca de intereses comunes. Cualquier persona puede crear un grupo.

Otras diferencias son:

Páginas

• Privacidad: la información de las páginas y las publicaciones son públicas y están disponibles de forma general para todo el mundo en Facebook.

• Público: cualquiera puede indicar que le gusta una página y conectarse a ella para recibir actualizaciones en la sección de noticias. No se limita el número de personas a las que puede gustar una página.

• Comunicación: las personas que ayuden a administrar una página pueden compartir publicaciones desde la página. Las publicaciones de página pueden aparecer en la sección de noticias de las personas a las que les gusta la página. Los propietarios de páginas también pueden crear aplicaciones personalizadas para su página y consultar estadísticas de la página para llevar un seguimiento del crecimiento y la actividad.


103 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Grupos

• Privacidad: además de la configuración pública, existen otras opciones de privacidad disponibles para los grupos. En grupos secretos y cerrados, las publicaciones solamente están visibles para los miembros del grupo.

• Público: se puede modificar la privacidad del grupo para que los miembros tengan que ser aprobados o añadidos por los administradores. Cuando un grupo alcanza un determinado tamaño, se comienzan a limitar algunas funciones. Los grupos más útiles suelen ser los que se crean con un pequeño grupo de personas conocidas.

• Comunicación: en los grupos, los miembros reciben notificaciones de forma predeterminada cuando algún miembro publica una entrada en el grupo. Los miembros del grupo pueden participar en chats, subir fotos en los álbumes compartidos, colaborar en documentos del grupo e invitar a todos los miembros que son amigos a eventos del grupo.

13. Listas.

Es posible crear listas dentro de nuestros grupos de amigos. De esta forma podremos compartir contenido sólo con los contactos de la lista y no con el grupo de amigos en general. Un ejemplo de lista es “Familiares” que ya tiene creada Facebook por defecto y a la que podemos añadir a nuestros contactos adecuados.

Se accede a la creación desde “Amigos”:

Además de lo expresado hasta ahora, también nos encontramos las aplicaciones, a las que accedemos desde el panel izquierdo de Inicio.


104 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Algunas de estas aplicaciones son accesibles desde otros lugares de la página, como buscar amigos o la creación de álbumes de fotos.

Módulo 2: Herramientas tecnológicas de comunicación Tema 5: Twitter

105 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

TEMA 5: TWITTER

1. Introducción

Esta plataforma de microblogging nació en 2006, aunque su uso no se extendió de forma generalizada, más masiva, hasta el año 2009.

Twitter es una forma de comunicación directa y una potente herramienta de trabajo. A través de este servicio gratuito, el usuario puede emitir, recibir y compartir textos de un máximo de 140 caracteres (como los mensajes de texto de un teléfono móvil, SMS), lo que agudiza el ingenio y fomenta el diálogo por la brevedad de los mensajes. Es como un microblog donde se combinan los conceptos de blog (diario personal en donde el autor va publicando los contenidos de forma cronológica) con el de mensajería instantánea y en donde se pueden incluir enlaces a páginas web. En estos 140 caracteres están incluidos espacios y símbolos.

Twitter es una de las redes sociales cuyo uso más ha evolucionado. Al principio se trataba de una herramienta que solo utilizaban los "expertos" y que parecía fuera de nuestro alcance. Hoy en día ya alcanza 500 millones de usuarios en todo el mundo y actualmente Twitter también es una de las primeras opciones para las empresas.

Cada cuenta en Twitter puede seguir a otros usuarios de Twitter y, a la vez, tener seguidores. La influencia o relevancia de un usuario de Twitter se estima, en parte, por su número de seguidores aunque también influye lo relevantes que sean estos.

A diferencia de lo que ocurre en Facebook, en Twitter es suficiente con pulsar en el botón "Seguir" de un perfil para convertirse en seguidor, ya que dicho perfil no necesita confirmar la acción.

Glosario.

A efectos de comprender mejor los contenidos del tema, incluimos la terminología usada en el mismo.

Tweet: cada uno de los mensajes que emite cualquier usuario de Twitter. La extensión no puede superar los 140 caracteres.

Seguir: se utiliza este concepto para señalar que un usuario de Twitter lee todo lo que publica otro en otra cuenta. Al seguidor se le denomina follower y al seguido, following.

Timeline: es la relación de tweets que aparecen en orden cronológico de publicación.


106 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Retweet: es la republicación del tweet de otra persona citando a ésta para mantener la autoría. Con ello se consigue hacer llegar un mensaje a nuestros seguidores de alguien que nosotros seguimos.

La forma de hacerlo es escribir las letras RT delante del tweet original. En este caso, el nuevo tweet aparece como realizado por nosotros.

Si utilizamos el botón de retweet de la propia interface de Twitter, entonces el nuevo tweet aparece como realizado por el usuario original, además, no es posible modificar el mensaje original como sí ocurre si utilizamos el operador RT.

Mención: para mencionar a otro usuario se incluye “@nombre_usuario” en el tweet que escribimos. La persona mencionada recibe también el mensaje en su “timeline” aunque no nos siga.

Hashtag: etiqueta de un tweet que marca una temática dentro del Twitter. Se consigue anteponiendo el símbolo “#” a una palabra.

DM o mensaje directo: es un mensaje privado que se puede enviar a uno de nuestros seguidores. Solo se puede un mensaje directo a un usuario que nos sigue; solo podemos recibir mensajes directos de usuarios a los que seguimos. De esta forma, si se trata de algo privado, no tiene por qué aparecer en el timeline de cada usuario.

Timeline: son los tweets que podemos ver publicados por los usuarios a los que seguimos. Si se sigue a un número muy grande de usuarios, posiblemente el timeline se llene de tweets rápidamente, por lo que es una buena idea utilizar listas para organizarlos.

Listas: es una característica de Twitter que nos permite organizar a los usuarios que seguimos. Podemos crear listas referentes a temas de nuestro interés y así después poder seguir más cómodamente a los usuarios que introducimos en esas listas.

Links o enlaces: son direcciones o URL que se insertan en los tweets. Por ejemplo, cuando recomendamos la lectura de un artículo de una página web o la descarga de un documento. Como estos enlaces pueden ser muy largos, Twitter los acorta automáticamente si no lo hemos hecho nosotros utilizando uno de tantos servicios que hay para ello (bit.ly, tinyurl, ow.ly, etc.).

#FF o Follow Friday: es una costumbre en Twitter que todos los viernes los usuarios recomienden a otros usuarios. Para ello se utiliza la hashtag #FF y el nombre de uno o más usuarios de Twitter.

Trending Topic: son frases, palabras o hashtags que están siendo muy utilizadas en un momento dado. Por ejemplo, durante un partido Barcelona-Madrid es fácil que alguna palabra relacionada con dicho partido pase a ser "Trendig Topic" ya que se habla muchísimo de ello.


107 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Podemos estudiar los Trending Topic para saber lo que está siendo más popular en esos momentos en Twitter (aparecen en la columna izquierda de la sección Inicio)

2. Acceso.

Para tener acceso entramos en www.twitter.com e introducimos los datos de usuario y contraseña, si ya disponemos de una cuenta, o bien iniciamos el proceso de registro facilitando los datos de nombre, correo electrónico, y contraseña.

Tras el proceso de registro, el programa nos remitirá un mensaje de correo a la dirección especificada con el objeto de comprobar que está activo, pues nos enviará allí las posteriores notificaciones, y también para que contestemos confirmando a Twitter la cuenta correo.

La interface de Twitter se nos ofrece seguidamente:

Hecho esto se puede personalizar y configurar la página.


108 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

3. Tipos de cuenta

Cuando te registras en Twitter, tienes la opción de que tus Tweets estén protegidos o sean públicos (la configuración de cuenta predeterminada).

Esta opción se encuentra en el panel de configuración de la cuenta, al que accedemos desde el icono de la barra superior:

Para las cuentas con Tweets protegidos se debe aprobar de manera manual a todas y cada una de las personas que pudieran ver los Tweets de dicha cuenta.

La cuenta protegida (privada) es muy adecuada para aquellos que no quieran recibir información de lectores desconocidos pero desean comunicarse con un grupo conocido y reducido dentro del trabajo, familia y amigos.

Una cuenta pública es la más indicada para aquellos que quieren compartir información con el resto de usuarios de la red y hablar de los productos y servicios de la empresa.

Eliminar la protección de los tweets hará que cualquier tweet protegido anteriormente se haga público. De igual modo si deseamos controlar quién ve nuestras actualizaciones, podemos optar por proteger los tweets. Es posible cambiar de opinión cuando lo deseemos y hacerlos públicos más adelante.


109 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Cuando protegemos los tweets, se aplican las siguientes restricciones:

• Será necesario solicitar seguir; se deberá aprobar cada solicitud de seguimiento.

• Solo los usuarios que cuenten con nuestra aprobación podrán ver los tweets.

• Los demás usuarios no podrán retwittear nuestros tweets.

• Los tweets protegidos no aparecerán en la búsqueda de Google. Solo el propietario de la cuenta y los seguidores aprobados podrán buscar los tweets protegidos.

• Los usuarios que no nos siguen no podrán ver las @respuestas que les enviemos (porque no les hemos dado permiso para ver nuestros tweets).

• No podremos compartir enlaces permanentes a nuestros tweets con usuarios que no se encuentren dentro de nuestros seguidores aprobados.

4. Configuración de la cuenta.

Lo primero que se puede hacer para configurar la cuenta o el perfil es elegir el avatar (la imagen con la que se nos identificará) según el uso que daremos a la página (personal o empresarial).

Si el objetivo es difundir contenidos de una empresa o institución, es conveniente utilizar el logotipo o la imagen corporativa o del producto que se pretende potenciar. Si la información es personal, la imagen más adecuada es una fotografía del usuario, ya que facilitará que los seguidores nos identifiquen.

También se debe cuidar la imagen que aparecerá como fondo de la cuenta. Twitter ofrece la posibilidad de elegir uno de sus fondos predefinidos. Sin embargo, existen también páginas web que ofrecen un amplio abanico de fondos para twitter, como witter-images.com.

Las dimensiones recomendadas para la foto de perfil son de 400x400 píxeles; mientras que para la imagen de encabezado son de 1500x500 píxeles. Twitter redimensionará estas imágenes si es necesario.

En las opciones de configuración se encuentran los apartados relativos a la misma. Para cada apartado nos aparece un formulario e incluso ampliación de la información en algunos de ellos.


110 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Cuenta: aquí introduciremos detalles acerca de la cuenta de Twitter, como el nombre de usuario, la dirección de correo electrónico que se utiliza, etc.

Aunque es posible cambiar el nombre de usuario, no suele ser una buena idea sobre todo si ya tenemos un buen número de seguidores.

Seguridad y privacidad: aquí destacan algunas opciones para mantener la seguridad de la cuenta de Twitter, además de ajustes de privacidad.

Es importante saber diferenciar entre lo que es la cuenta con los detalles de acceso a Twitter y lo que es el perfil o detalles con los que nos presentamos a los usuarios.

Contraseña podremos cambiar la contraseña actual (deberemos conocerla para poder hacerlo).

Móvil: en este apartado podemos introducir un número de teléfono móvil para recibir notificaciones vía mensajes de texto. Normalmente esto no es necesario, ya que las notificaciones también llegan a través del correo electrónico.

Notificaciones por correo: en este apartado de la configuración podemos indicar cuándo queremos que Twitter nos envíe un correo según la actividad que se está produciendo.


111 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Podemos ver que por defecto se enviará un mensaje de correo electrónico cuando otro usuario nos envíe un mensaje directo, cuando se responda a un tweet nuestro o nos mencionen, cuando alguien nuevo empiece a seguirnos, cuando nuestros tweets son marcados como favoritos y cuando son retwitteados.

Si se produce demasiado correo con esta configuración predeterminada, tal vez tengamos que decidir desactivar algunas de estas opciones.

Notificaciones web: lo mismo pero referente a las notificaciones que recibimos a través del navegador o en la app para móviles.

Encontrar amigos: accede a los contactos del programa de correo que le especifiquemos para importarlos. De esta forma Twitter nos recomendará a quien seguir si esos contactos tienen también cuenta en esta red.

Silenciar cuentas: Nos permite quitar tweets de la cronología de otras cuentas sin necesidad de dejar de seguirlas o de bloquearlas.


112 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Bloquear cuentas: impiden ver los tweets de esas cuentas en la cronología. Además las cuentas bloqueadas no podrán seguirnos ni ver nuestro perfil mientras estén en esa situación.

Diseño: en este apartado podemos configurar la imagen de fondo o tema del perfil de Twitter.

Se puede elegir una de las imágenes que proporciona Twitter, pero en el caso de una empresa es conveniente personalizarla, ya que podemos utilizar la parte izquierda de la imagen para incluir detalles acerca de la empresa, como datos de contacto, otros perfiles en redes sociales, etc.

En ocasiones es interesante incluso incluir la fotografía de la persona (o personas) que se encarga del perfil de Twitter para que los usuarios vean que hay una persona detrás.

Para personalizar la imagen, utilizamos la sección de la parte inferior. Se puede hacer lo propio con los colores de fondo (para el resto del fondo que no cubre la imagen) o de los enlaces.

La opción Fondo en mosaico permite repetir la imagen que hemos subido si se trata de un patrón. Por ejemplo, esto sería válido para varias imágenes que podemos ver entre las de muestra, como la que incluye la silueta de unos pájaros. El fondo se conseguiría repitiendo dicha imagen "en mosaico".


113 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

En el apartado Aplicaciones podremos comprobar qué aplicaciones tienen el permiso para acceder a la cuenta. Por ejemplo, si utilizamos una aplicación para enviar los mensajes distinta a Twitter, aquí podríamos verla.

Widgets: se pueden crear pequeños programas para colocar el contenido del perfil de Twitter en otros lugares, como el blog o sitio corporativo de la empresa.

Con ello se consigue una mayor difusión de los contenidos de nuestro Twitter, además de poder conseguir más seguidores.

Se puede hacer un widget con el timeline de los tweets que publicamos, pero también con los favoritos o listas que hemos creado.

Para ello simplemente pulsamos en Crear nuevo y seguimos las instrucciones. Después tendremos que pegar el código correspondiente en el blog o sitio web corporativo.

En el caso de un perfil de empresa es necesario completar lo mejor posible todos estos detalles que hemos ido viendo en la configuración. La imagen que damos al exterior es mucho más importante que si se trata de un perfil personal.

Tus datos de Twitter: muestra un resumen de los datos de la información de la cuenta, con historiales de la misma y de inicio de sesión, además de acceder al archivo del historial de tweets.

5. Seguimiento

En Inicio (conocido como el "timeline" de Twitter) aparece el flujo de tweets de los usuarios que se siguen. Si nos interesa un tweet en concreto de un usuario al que seguimos podemos hacer clic en él y se desplegará cualquier otro contenido asociado. Por ejemplo, si incluye una imagen, podremos verla.


114 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Además, podremos responder al tweet, hacer un retweet, marcarlo como favorito, etc.

Aparte de hacerse seguidor, en el hipotético caso de que ya no interese seguir a según qué grupo, empresa podremos siempre dejar de seguir, simplemente situando el cursor encima de la pestaña de color azul “Siguiendo” le aparecerá una pestaña de color rojo con el nombre “Dejar de seguir”.

6. Envío de mensajes.

Estando en Inicio, podemos ver una caja de texto para escribir nuestros tweets (¿Qué está pasando?), la lista de temas del momento ("Trending Topic") y sugerencias para seguir a nuevos usuarios.


115 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

También desde el botón de la barra superior accedemos a la redacción del Tweet.

Twitter permite enviar mensajes:

• Públicos: se envían mensajes a cualquier usuario registrado en Twitter

• Privados: se envían mensajes solo a los seguidores (followers).

Según vamos escribiendo el tweet un contador nos va avisando del número de caracteres que restan por escribir, ya sabemos que está limitado a 140.

Los mensajes pueden ser:

• Replies: son respuestas a otros mensajes. El mensaje va precedido de “@nombre_de_usuario” y es público, por lo que todo el mundo lo puede leer.

• Mensajes directos: solo se pueden enviar mensajes directos a nuestros seguidores y estos los reciben por correo electrónico, por lo que la garantía de que los lean es mucho mayor. Para enviarlos hay que acceder al menú “Enviar mensaje directo” y seleccionar la persona que queramos que reciba el texto.


116 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Los mensajes se pueden clasificar por temas o etiquetas (conocidas como hashtag) y van precedidas por el símbolo “#”. Un ejemplo de esta distribución es “#cines #Cuenca”.

Colocando el cursor encima del tweet vemos que en la parte derecha aparecen cuatro iconos:

Responder: para poder responder al tweet sin la necesidad de abrir una nueva ventana de escritura.

Borrar: donde podremos eliminar un publicación que no sea de nuestro interés pero que hayamos creado. Tenemos que tener en cuenta que no podremos borrar los tweets de otros usuarios al igual que ellos no pueden borrar los nuestros.

Favorito: en esta estrella nos permite tener un orden de prioridades de intereses.

Abrir: para mostrar todo el contenido del mensaje.

7. Enlaces

Twitter solo almacena texto. Sin embargo, existen herramientas para transmitir cualquier tipo de información ofreciendo un enlace desde nuestra página personal. Ahora bien, debemos tener en cuenta la extensión del enlace, ya que Twitter solo permite publicar en un máximo de 140 caracteres. Hay herramientas que permiten acortar las direcciones, como bit.ly (http://bitly.com), y generar un link publicable en Twitter.

Entrando en la página, introducimos la url que queremos acortar, e inmediatamente nos devuelve la url abreviada, la cual hemos de pegar en la caja de texto.


117 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

8. Imágenes y vídeos.

Para mandar imágenes creamos un nuevo tweet y elegimos el botón “Añadir foto” que aparece en la parte inferior. Nos llama a la estructura de almacenamiento para que le indiquemos la ruta del archivo de imagen. Hecho esto, Twitter incorpora la imagen al tweet.

Por Twitter se intercambian muchos videos, aún cuando no directamente. Existen servicios como Twiddeo, TwitLens or TwitVid que almacenan los videos y envían por twitter el enlace para acceder a ellos.

Otra forma de intercambiar videos, quizás más sencilla y cómoda, es colocar el video en YouTube (donde ya muchos lo hacen), y twittear la dirección del mismo.

Nota. Para cerrar sesión del usuario hay que dirigirse al perfil de la silueta encontrado en la parte superior derecha junto al icono de tweetear y elegir “Cerrar sesión”.

Módulo 2: Herramientas tecnológicas de comunicación Tema 6: Linkedin

118 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

TEMA 6: LINKEDIN

1. Introducción.

LinkdIn fue fundada en diciembre de 2002 como red social de carácter profesional.

En LinkedIn los usuarios pueden colgar información personal, profesional y publicar artículos y noticias y generar debate. Cuenta con más de 100 millones de usuarios de 200 países, entre ellos de más de 2 millones de empresas.

LinkdIn ofrece a las empresas el acceso a información más detallada sobre los posibles empleados, la promoción del networking, la potenciación de la marca de la empresa y la ayuda en la gestión de la reputación online corporativa. Por lo que se ha convertido en una poderosa arma de publicidad (del producto, servicio y marca) y de contacto para aquellas empresas cuyos clientes son otras empresas.

No cabe duda de las ventajas de LinkdIn al proporcionar a las empresas contactar con otros profesionales, consecución de nuevos clientes, conocer otros puntos de vista y mejor posicionamiento en el sector al que se dedica.

Veamos algunas de las características más importantes de LinkedIn. Por ejemplo, si nos gusta escribir libros de informática (también novelas y guiones) y encontrarnos con escritores de todo el mundo que comparten los mismos intereses podemos usar la característica de búsqueda de empresas que posee LinkedIn haciendo clic en la flecha desplegable “Gente” ubicado a la izquierda del cuadro de búsqueda, y luego elegir Empresas.

Podemos escribir el nombre de la empresa donde deseamos encontrar gente que trabaja y comparte los mismos intereses que nosotros.


119 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Podemos ver que LinkedIn nos muestra una breve información de la empresa, así como una lista de nuevos empleados.

A la derecha, encontraremos información de su conexión con la empresa. En este caso, podemos ingresar a una empresa x y mostrarle que tiene 0 (cero) contactos de primer grado y también 0 de segundo grado.

2. Formas de conexión: perfil, grupos, empresas.

LinkedIn permite conectarse con millones de usuarios de diferentes maneras:

• Perfil: el usuario proporciona información sobre sí mismo, destacando unas capacidades profesionales. Es su carta de presentación. El currículum vitae se deberá rellenar correctamente y de la mejor manera posible para proyectar una buena imagen.

Dentro del perfil, se escribirá el extracto. Se trata de un escrito personal relacionado con la trayectoria profesional. Seguidamente, se rellenará la experiencia profesional. A continuación, se detallarán los intereses del usuario, página web, blog, cuenta de Twitter, etc…


120 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.


121 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• Grupos: se pueden conectar con otros usuarios uniéndose a ellos a través de grupos o creando nuevos. La participación activa puede ser una valiosa herramienta para acercarse a sus creadores y, por tanto, a un sector profesional determinado. En estos grupos especializados se pueden recoger artículos, noticias y ofertas de trabajo.

En LinkedIn existen dos tipos de grupos:

• Abiertos: a ellos se puede adherir cualquier persona, independientemente de su perfil profesional.

• Privados: creados por un administrador, que es quien decide si el nuevo miembro es aceptado en el grupo.

• Empresas: conocer sus productos, contactar con ellas y conocer su perfil, actividad y características.


122 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

3. Creación de cuenta.

Accedemos a LinkdIn por la dirección https://es.linkedin.com/, donde efectuamos el proceso de registro rellenando el formulario que se nos solicita.

Pulsando en “Únete ahora”, continuamos con el formulario.


123 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

En la siguiente pantalla, LinkdIn quiere importar los contactos de la agenda de la dirección de correo y así sugerirnos contactos que están en la red. Se puede saltar este paso.

Como es habitual, habremos de acceder al programa de correo y contestar al mensaje de verificación que se nos ha remitido.


124 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

En función de los datos que hayamos puesto en el formulario nos aparecerá un apantalla con enlaces a empresas registradas en LinkdIn que pueden guardar relación con ellos.

También nos pueden aparecer posibles ofertas actuales en la que podría encajar nuestro perfil y aplicaciones de descarga.


125 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Finalizado el proceso de registro nos aparece la interface de LinkdIn:

4. Uso corporativo.

Cuando una empresa quiere crear una página en esta red, primero ha de construir su perfil.


126 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Se ha de rellenar el formulario con el nombre y la dirección de correo electrónico, la cual ha de tener dominio único, por tanto no sirve cualquiera de los dominios de las cuentas de Internet como gmail, yahoo, hotmail….

Descripción de la empresa: actividad, productos, descripción, fines…, con palabras claves por las que desea que se la busque.

Empleados: las personas que en su currículum indiquen que están trabajando en la empresa, aparecerán en este apartado.

Enlaces a entradas blog: Si se publica en el blog aparecerá en este apartado.

Actividades recientes: recoge todas las actividades recientes que se hayan realizado en la página como el lanzamiento de una promoción, por ejemplo.

Seguimiento a una empresa: permite a los usuarios estar al día de las novedades de la empresa (puestos de trabajo, productos, empleados…). Viéndose todas las actualizaciones en la página de inicio.

Estadísticas: la página muestra una estadística de seguidores y número de empleados dentro

Los contactos en LinkedIn adquieren una gran importancia para el negocio.

Va más allá del “amigo” de Facebook. Es recomendable que antes de añadir un contacto se mire su perfil, para comprobar si será adecuado para comprobar si será adecuado para el negocio.

Módulo 2: Herramientas tecnológicas de comunicación Tema 7: Blogs corporativos

127 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

TEMA 7: BLOGS CORPORATIVOS 1. Blogs

Comenzaremos con los Social Media en los que se batirá el Community Manager y uno de los principales es el blog corporativo, ya que, posiblemente, se haga cargo de él.

Hasta hace poco, al hablar de blogs parecía que únicamente podíamos hacer referencia a proyectos particulares o de profesionales de renombre. Sin embargo, hoy en día un blog corporativo o de empresa es algo muy extendido, sobre todo, si la empresa desea tener éxito en los Social Media.

Y es que un blog es un medio muy eficaz, ya que nos permite generar una gran cantidad de contenido acerca de nuestra empresa o marca, además de facilitar que los lectores participen de dicho contenido a través de los comentarios. Un blog sin comentarios no tiene mucho sentido.

Los blogs se distinguen bastante del estilo de las web corporativas, en las que es habitual encontrar un tono muy formal. En un blog se utiliza un lenguaje más cercano, en el que se cuentan historias más que comunicados de prensa. Es un complemento perfecto para la web corporativa, ya que aporta un punto de vista diferente al oficial y además puede generar tráfico hacia ella.

Esto no significa que la empresa no pueda utilizar el blog para promocionar sus productos o servicios o para informar de eventos propios; pero también debe utilizarlo para labrarse una imagen de referente de su sector. Y para esto, no solo debe hablar de sí misma sino también de lo que ocurre en el sector.


128 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

La habilidad de enlazar esos contenidos de valor con lo que vende la empresa es la clave a la hora de utilizar un blog corporativo.

Pero, ¿tenemos claro lo que es un blog?

Un blog es un sitio web en el que uno o más autores escriben artículos, más conocidos como entradas o posts. Tiene la característica de que el último artículo siempre se sitúa en la parte superior de la página principal del blog, por lo que se trata de una web dinámica.

Un blog es un sitio web en el que uno o más autores escriben artículos, más conocidos como entradas o posts. Tiene la característica de que el último artículo siempre se sitúa en la parte superior de la página principal del blog, por lo que se trata de una web dinámica.

Diferencias entre un sitio web y un blog:

Sitio web Blog

Editado por un diseñador web. No se requiere conocimientos de diseño

Contenidos estáticos, poca atualización. Contenidos actualizados frecuentemente.

Coste de mantenimiento. Coste nulo o mínimo de mantenimiento.

El diseño tiene mucha importancia. Es más importante el contenido.

Normalmente no se permite la participación del usuario.

Abierto a la participación mediante los comentarios.

Se estructura por áreas visuales y temáticas.

Su orden es cronológico. Se organiza mediante categorías y etiquetas.

Comunicación unidireccional. Comunicación bidireccional. Conversación.


129 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Habitualmente se utilizan aplicaciones que permiten crear un blog con poco esfuerzo. Son los llamados CMS (Content Management System) o sistemas de gestión de contenidos. Ejemplos de ellos son Blogger o Wordpress.

Estos CMS proveen plantillas para crear un blog rápidamente y con buen aspecto. Normalmente el encargado del blog personaliza dicha plantilla para ajustarla al aspecto corporativo de la empresa. También es posible diseñar una plantilla exclusiva si se desea tener un aspecto diferenciador. Esto último ya es una tarea propia de un diseñador web.

Los contenidos que se publican en un blog no tienen por qué limitarse a los textos. Los blogs tienden a ser multimedia, ya que es sencillo insertar imágenes de refuerzo del artículo, incrustar un vídeo almacenado en otro lugar, presentaciones, etc.

Otra de las características de un blog es que permite la suscripción. Esto es muy importante para conseguir audiencia y fidelizarla. En la World Wide Web actual en la que existe tantísima información disponible, poder suscribirse a los blogs es uno de sus factores de éxito.

La idea es que el lector interesado en un blog no tenga que acceder diariamente al blog para conocer si se ha escrito un nuevo artículo. En lugar de ello, se suscribe a su feed (ahora veremos qué es esto) y recibe las novedades a través de un lector de feeds, donde administrará todas sus suscripciones.

Los feeds son canales web de redifusión de información. Esto suena complejo, pero en realidad no son más que archivos que contienen las últimas novedades o entradas de un sitio web.

Estos archivos son utilizados por otras aplicaciones, conocidas como lectores de feeds, que son las que emplean los usuarios para estar al día de sus suscripciones. Así, en lugar de acudir al blog, simplemente miran en su lector si hay alguna novedad.

Aunque no se trata de una característica exclusiva de los blogs (por ejemplo, también es muy habitual en la prensa digital), sí que podemos decir que todo blog debe disponer de su feed (incluso de varios, ya que los comentarios pueden tener un feed independiente).

La buena noticia es que los CMS proporcionan los medios necesarios para disponer de un feed y para facilitar la suscripción al mismo. Por lo tanto, normalmente no será necesario configurar prácticamente nada sobre esto.

Hay dos tipos de feeds: RSS y Atom. Es conveniente saberlo, ya que es muy habitual encontrarnos con el término "RSS" en lugar de "feed", ya que como es el tipo más utilizado de feed, en muchos casos se identifica de esta forma.

Así pues, no es difícil que encuentres páginas o blogs donde te indiquen: "suscripción RSS", "suscríbete a nuestro canal RSS", etc.

Por otra parte, podemos encontrar dos tipos de lectores: aplicaciones que se instalan en el ordenador o servicios online.


130 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Esto es parecido al correo electrónico. Así, puede que utilices una aplicación instalada en tu ordenador para administrar tu correo electrónico, como Microsoft Outlook; o puede que accedas directamente a través de la Web a Gmail o Hotmail. Pues lo mismo, pero para las suscripciones de feeds.

Así pues, hay aplicaciones de escritorio como Feedreader yservicios online como Feedly, Bloglines o Netvibes. Elegir uno u otrotipo de lector es más una preferencia personal que otra cosa, aunque hoy en día lo habitual es utilizar un servicio online o app móvil para poder acceder a todas nuestras suscripciones sin importar el lugar desde donde lo hagamos o si lo hacemos a través de los dispositivos móviles.

También es posible utilizar los navegadores modernos como lectores de RSS, pero disponen de menos características, por lo que no es la mejor opción.

Veamos cómo actuaría un usuario y así lo entenderemos todo esto mucho mejor. Vamos a utilizar el servicio Feedly.

Lo primero que tiene que hacer el usuario es registrarse en Feedly para disponer del servicio.

Puedes hacerlo sin necesidad de crear una cuenta nueva, sino utilizando cualquiera de estos tipos de cuenta:

• Una cuenta Google.

• Una cuenta de Facebook.

• Una cuenta de Twitter.

• Una cuenta Microsoft.

Suponiendo que hemos iniciado sesión en Feedly con alguna de estas cuentas, veamos cómo nos suscribiríamos a un blog. Lo primero es buscar algún enlace para


131 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

hacerlo o este icono. Si aparece, entonces simplemente pulsando en él nos podremos suscribir utilizando el servicio que deseemos.

Si no encontramos un enlace que nos facilite la suscripción o no aparece el lector de feeds que utilizamos, no hay problema, ya que lo único que tenemos que hacer es copiar la URL o dirección de la página web. Por lo tanto, copiamos esa dirección y accedemos a Feedly.

El siguiente paso es pulsar el botón Add Content de la izquierda. Al hacerlo, se nos pide que introduzcamos la URL de la página o blog al que queremos suscribirnos. Es suficiente con introducir la URL de la página principal, ya que Feedly se encargará de buscar los feed en dichapágina.

Para completar la suscripción, debes pulsar en el botón +feedly de la parte superior. Una vez hecho, podrás utilizar Feedly para acceder a las novedades del blog sin necesidad de acudir a él.

Con Feedly puedes organizar tus suscripciones de la manera que quieras, ya que permite crear colecciones, utilizar etiquetas, etc.

Este procedimiento es similar en otros servicios o aplicaciones. Además, la forma más cómoda de suscribirse a los sitios o blogs que te interesan es hacerlo directamente con un widget o plugin del navegador.

Se trata de pequeños programas que nos facilitan la vida. Estos programas nos permiten realizar los pasos que hemos visto para suscribirnos al blog simplemente pulsando en un botón que se añade a la barra de herramientas del navegador.

Lo importante es recordar que los blogs deben proporcionar este servicio de suscripción para fidelizar a los usuarios interesados. Normalmente esto no significa ninguna configuración adicional si se utiliza un CMS como Blogger o Wordpress para


132 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

el blog; en todo caso, sería necesario asegurarse de que está activado el servicio de feeds en el blog.

Los lectores de feeds como Feedly comprueban periódicamente los sitios webs y blogs a los que se está suscrito para actualizar la lista de entradas.

Cuando encuentran nuevas entradas, las incorporan a la lista de suscripción. Sin embargo, esta actualización se realiza sin consumir prácticamente ancho de banda, ya que el archivo del feed es muy pequeño al incluir únicamente la lista de entradas.

Cuando pulsamos en alguna de esas entradas en el lector, es cuando se descarga el contenido completo o abreviado de la entrada e incluso tenemos la opción de acceder al artículo original pulsando en su título.

Recuerda que cuantos más suscriptores tenga un blog, mayor será la difusión de sus contenidos de forma automática.

2. Cómo es o puede ser un blog

Hay muchos tipos de blogs, en la mayoría de ellos encontrarás una serie de elementos o secciones que se repiten: cabecera, barras laterales, contenido o posts y pie de página.

Veámoslo en este blog de ejemplo.

En la parte superior encontramos la cabecera del blog, es la sección que lo identifica por lo que encontrarás el nombre del blog y la organización o empresa que lo crea. También es habitual encontrar aquí una barra de navegación general, con las secciones principales del blog.

En la parte central, y ocupando la mayor parte del espacio, encontramos los posts o entradas del blog, es la sección de contenido. Como recordarás, aparecen los más recientes en la parte superior.


133 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Normalmente se muestra un número limitado de posts en la primera página y enlace a entradas más antiguas. Un total de 10 o menos posts es lo habitual. En los posts podemos encontrar texto, imágenes y otros contenidos multimedia.

También el enlace a los comentarios y botones que socializan el blog, ya que permiten que los lectores compartan el post en redes sociales, como Facebook, Twitter o Google+.

Además, pulsando en el título del post, accedemos a su página individual. Esto es útil cuando en la página principal del blog solo se incluye un resumen de cada post. La URL o dirección de la página del post se conoce como "permalink" o "enlace permanente" y es la que nos permite enlazarlo en cualquier otro lugar.

En este blog en la parte derecha encontramos la barra lateral o sidebar. Puede aparecer a la derecha, a la izquierda o en ambos lados. Aquí encontramos otras barras con información relacionada con el blog, publicidad, etc.

Son habituales las siguientes secciones en la barra lateral:

• Bloques de publicidad.

• Categorías y etiquetas.

• Archivo del blog.

• Blogroll o enlaces a otros sitios del blog favoritos.

• Actividad del blog: contador de suscriptores, etc. • Medios para suscribirse al blog (normalmente mediante RSS y/o

correo electrónico).

Finalmente, en la parte inferior encontramos el pie del blog, donde puede aparecer información de licencia o copyright, información corporativa, etc.

Esta estructura es típica en muchos blogs, pero cada uno la personaliza según sus necesidades simplemente modificando la plantilla del CMS que se utilice.

Es conveniente hacerlo para no dar la sensación de que "este blog ya lo he visto en otro sitio". Es importante mostrarse como algo único y de valor.

3. Uso de los blogs corporativos

Antes de empezar con un proyecto tan importante como crear y mantener un blog, debemos pensar muy seriamente para qué lo vamos a utilizar, es decir, qué objetivos queremos conseguir con el blog.


134 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Hoy en día hay algunas tendencias más o menos impuestas en cuanto al uso de los blogs. Debemos elegir las que realmente nos interesan. Si no vamos a poder mantener el blog o no tenemos los objetivos claros, es mejor no hacerlo.

Algunas de estas tendencias son:

• Comunicarse con los consumidores y el público en general: es una forma de eliminar barreras entre la empresa y sus clientes o público objetivo. Los lectores del blog sienten que les llega un mensaje personal.

• Uso del blog como demostración de Responsabilidad Social Corporativa (RSC): puede servir como medio para informar de las prácticas de RSC que realiza la empresa en las dimensiones económica, social y ambiental con el fin de mejorar su situación competitiva y la imagen empresarial.

• Administrar la reputación de la empresa: el blog es un medio muy útil para dirigir los mensajes que queremos que lleguen al público y para responder rápidamente acerca de rumores o noticias negativas. Es un medio para atajar crisis de reputación.

• Promoción de productos y servicios: aunque normalmente no se venden productos en un blog, sí que sirve para promocionarlos a través de artículos que describen los productos o que anuncian nuevos. Por eso los blogs son un buen complemento de la web corporativa, ya que pueden dirigir tráfico a ella o a la tienda de comercio electrónico. Es importante, sin embargo, tener un equilibrio entre este tipo de artículos y el resto del blog.

• Permite que ejecutivos y empleados se comuniquen con la comunidad: siendo seguramente una de las pocas formas que tendrían de hacerlo tan directamente.

Recuerda que es importante, antes de embarcarse en un proyecto de este tipo, tener una estrategia bien definida.

Para finalizar, veremos algún ejemplo más de blogs corporativos que han tenido éxito y así aprenderemos de ellos.

Starbucks (http://mystarbucksidea.force.com/apex/ideahome/) utiliza su blog de una forma muy original. Lo emplea para recabar ideas sobre nuevos productos que sugieren y valoran sus clientes.

Los lectores pueden incluir sus ideas y otros pueden realizar comentarios y votarlas, para lo que deberán registrarse y crear una cuenta. Starbucks recoge las más votadas y puede incorporarlas en su negocio.

General Electric (http://www.gereports.com/)utiliza su blog para proporcionar un aspecto más humano y dar a conocer la marca. De esta forma se diferencia de su web, que tiene un contenido mucho más formal.

http://www.gereports.com/)utiliza


135 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Como ellos mismos dicen en este blog: "es un medio simple, sin adornos, de mostrar lo que está ocurriendo en GE. Nuestro objetivo es convertir el blog en un recurso para aquellas personas que están interesadas en conocer mejor nuestra compañía. ofrecemos fotografías, vídeos, noticias e historias humanas.".

Patagonia (http://www.thecleanestline.com/) es una empresa que vende equipos para practicar deporte y aventura. El deporte sirve para crear valor añadido a su marca.

¿Qué prefieres una tienda en la que solo veas productos o una tienda en la que además te cuentan historias de personas reales que están utilizando esos productos?

Buscan crear una comunidad y exaltar la imagen de la marca.

En Privalia (http://blog.es.privalia.com/) se ha creado el blog para informar de las novedades, concursos, etc. de este club privado de compras. Una forma muy hábil de captar nuevos clientes.

http://www.thecleanestline.com/)

http://blog.es.privalia.com/)


136 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

El blog Cooking Ideas (http://www.cookingideas.es/) creado por Vodafone trata temas relacionados con las nuevas tecnologías, campañas de Internet, aplicaciones móviles, etc.

Aporta valor y promociona la marca a la vez:

"…estás en un lugar donde se cuenta lo que se cuece en internet y en el mundo para ayudarte a conseguir la receta del éxito..."

El blog de la Coca Cola (http://blog.cocacola.es/) está destinado a un público joven y en el que lo más comentado son las actividades de ocio.

Busca crear comunidad alrededor de la marca, reforzada con otras presencias muy significativas en los Social Media.

El blog En Naranja (http://www.ennaranja.com/) del banco ING trata temas sobre el ahorro, emprendimiento, ayuda a empresas; pero también sobre deporte, tecnología, etc.

http://www.cookingideas.es/)

http://blog.cocacola.es/)

http://www.ennaranja.com/)


137 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Su propósito es asociar la idea del ahorro con el banco mediante el marketing de contenidos que se utiliza en el blog.

Vemos que muchos de estos blogs empresariales difunden contenido que no tiene por qué estar directamente relacionado con la empresa o marca a la que pertenecen. Si hablasen solo de ellos mismos, no tendrían tanto éxito como tienen.

Módulo 2: Herramientas tecnológicas de comunicación Tema 8: Guía práctica para crear un blog corporativo

138 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

TEMA 8: GUÍA PRÁCTICA PARA CREAR UN BLOG CORPORATIVO

1. Introducción

La creación de un blog no es una tarea compleja, en lo que a la técnica se refiere, ya que la utilización de software CMS, como puede ser Wordpress, lo facilita muchísimo.

Sin embargo, conseguir que el blog tenga éxito y que cumpla con los objetivos para los que se ha creado es otro asunto. Esto sí que requiere de gran esfuerzo, por lo que no debe iniciarse un proyecto de estas características sin haberlo pensado bien previamente.

Si la empresa crea un blog y lo emplea mal, o simplemente no lo actualiza, se puede conseguir el resultado contrario al buscado, ya que la imagen que le quedará al cliente no será muy buena.

En esta lección encontrarás una "guía" con los pasos más importantes a la hora de crear un blog de empresa con éxito. Desde luego ni siquiera así está asegurado el éxito, pero tendremos más posibilidades de conseguirlo.

Establecer los objetivos para los que creamos el blog es un paso importantísimo y anterior a todo esto.

2. Visualizar cómo son los blogs.

Antes de comenzar a crear un blog es conveniente realizar una búsqueda de los blogs del sector más relevantes con el propósito de analizar cómo lo están haciendo.

Para ello, no se requiere de ninguna aplicación especial, es suficiente con realizar una búsqueda en Google o en otros buscadores de la cadena "blogs de...", donde incluiremos el sector de la empresa.

Nos fijaremos en los primeros resultados de esta búsqueda o de búsquedas similares y accederemos a esos blogs.

De esta forma podemos recabar ideas sobre:

El diseño del blog, qué elementos aparecen.

Su contenido, de qué están hablando.

Cómo lo dinamizan, cómo consiguen la participación de sus lectores, etc.

Pero además, esta monitorización nos puede servir para conocer mejor la audiencia a la que nos dirigimos y detectar necesidades que no están cubiertas hasta ahora.


139 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Además de los buscadores generales como Google, podemos utilizar algunos especializados en blogs. Por ejemplo, Google Blog Search, Bitacoras.com o Technorati.

En este paso inicial es muy importante utilizar un lector de feeds para suscribirse a los blogs más relevantes del sector y conocer las novedades que van publicando.

3. Optar por la mejor ubicación para el blog

Debemos plantearnos dónde lo vamos a alojar. A este respecto disponemos de tres alternativas:

• Situar el blog como parte del sitio web corporativo.

• Situarlo de forma independiente al sitio web corporativo.

• Utilizar alojamiento gratuito para el blog.

Situar el blog como parte del sitio web corporativo

Esta alternativa se utiliza mucho, ya que crea una relación más directa entre sitio web y blog. La dirección del blog comparte el dominio del sitio web corporativo.

Por ejemplo, si el sitio web de la empresa es www.nombreempresa.com, el blog podría aparecer como www.nombreempresa.com/blog.

http://www.nombreempresa.com/

http://www.nombreempresa.com/blog


140 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Otra posibilidad es crear un subdominio para el blog. Por ejemplo, el sitio web de Iberia es www.iberia.com, mientras que su blog es megustavolar.iberia.com.

Situarlo de forma independiente al sitio web corporativo

En este caso, sitio web corporativo y blog no comparten el mismo dominio. Como el blog de General Electric que se aloja en el dominio gereports.com mientras que el sitio web corporativo es ge.com.

O el blog de ING, que tiene el dominio propio ennaranja.com.

http://www.iberia.com/


141 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Esto implica la contratación de un dominio único para el blog y alojamiento específico. Representa mayor dificultad de mantenimiento pero puede ser adecuado según la estrategia de comunicación de la empresa.

Utilizar alojamiento gratuito para el blog

En este caso se utiliza alguna plataforma de alojamiento gratuito para el blog, como puede ser Wordpress.com. El problema de esta opción es que el dominio del blog incluye el dominio de dicha plataforma.

Así, si utilizamos Wordpress.com, nuestro blog tendrá una URL similar a esta nombreempresa.wordpress.comAunque también es posible utilizar un dominio propio y enlazarlo con el de la plataforma, sigue siendo una mala opción para una empresa, siendo especialmente recomendable para particulares.

Como ventaja de este método está que es la más rápida y sencilla de implementar y que se obtienen todas las actualizaciones de la plataforma automáticamente. Por ejemplo, cuando Wordpress libera una actualización, el blog alojado en Wordpress.com la obtiene automáticamente.

4. Cómo y dónde creamos el blog

Cuando creamos el blog deberemos elegir el lugar y ubicación que más nos convenga.

Blogger (más adecuado para blogs personales), Joomla, Tumblr son algunas de esas alternativas, así como agencias especializadas en la creación de blogs, como Weblogs SL. Menos esta última, el resto de plataformas que hemos mencionado son gratuitas en cuanto a su utilización.


142 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

También es posible crear un diseño propio aunque esto representa un gran esfuerzo que no todas las empresas se lo pueden permitir.

Centrándonos en la opción Wordpress, debemos saber que tenemos dos alternativas:

• Wordpress.com: se trata de un servicio de alojamiento gratuito donde poder crear rápidamente un blog. Esta ventaja tiene su contrapartida, ya que no permite mucha personalización ni la instalación de plugin adicionales. Además, el blog incluye el dominio wordpress.com en su dirección URL.

• Wordpress.org: en este caso será responsabilidad de nuestra empresa la instalación y alojamiento del blog, por lo que no hay ninguna limitación en cuanto a la personalización del blog. Esta suele ser la mejor opción para una empresa.

En ambas alternativas dispondrás de distintas plantillas que puedes personalizar con la identidad de la empresa. Sin embargo, es posible que no sea suficiente y tengas que crear una plantilla única. Para ello, deberás contratar un diseñador de páginas web o el servicio de una empresa del sector si tu empresa no dispone de los medios necesarios.

Una vez creado, la labor de personalización del blog incluye aspectos como:

• Diseño y apariencia del blog,

• Página de contacto o de "acerca de nosotros",

• Blogroll,

• Incorporación de iconos de presencia en redes sociales,

• Instalación y configuración de plugins,

• etc.

5. Crear contenido en el blog.

Ahora nos toca crear el contenido del blog, es decir, sus entradas o posts. Esta es la parte más difícil, ya que no sirve cualquier contenido, sino que debe ser contenido relevante, propio y que genere participación por parte de los lectores del blog.

El lenguaje utilizado debe ser más cercano y personal que el que se emplea en el sitio web corporativo. Algunas sugerencias a la hora de escribir artículos en el blog de empresa son:

• Información del uso de los productos o servicios que vende la empresa.

• Piensa en qué preguntas se harán los clientes a la hora de comprar un producto de tu empresa y contéstalas en el blog.


143 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• Noticias o tendencias relacionadas con el sector. Es importante que en el blog no solo se hable de nuestra empresa.

• Concursos que fomenten la participación de los lectores.

• Consultas o encuestas para conocer la opinión de los lectores del blog y generar ideas para nuevos productos o servicios.

• Etc.

El contenido no debe limitarse únicamente a texto, sino que es conveniente utilizar imágenes, vídeos y otros elementos multimedia.

En especial, los vídeos son los elementos más atractivos, por lo que el blog puede enlazarse con vídeos que hemos subido en nuestro canal de YouTube.

Además, el contenido debe escribirse teniendo en cuenta aspectos de SEO (Search Engine Optimization) o posicionamiento en buscadores. Deben utilizarse las palabras clave en las que queremos posicionarnos y utilizar enlaces hacia el sitio web corporativo.

Por ejemplo, en un artículo en el blog sobre trucos de uso de uno de los productos que vende la empresa, se puede enlazar con la página de descripción de dicho producto en la web corporativa.

Publicar contenido atractivo y de calidad en un blog es la forma más segura de conseguir los objetivos que nos hemos propuesto y generar tráfico cualificado al sitio web corporativo o a una tienda de comercio electrónico. Pero esto requiere de gran esfuerzo.

Finalmente, debes tener una frecuencia más o menos regular a la hora de publicar entradas en el blog corporativo. Los lectores se acostumbran a dicha frecuencia y están a la espera de los nuevos artículos.

¿Sobre qué tema escribo en el blog de empresa?

Muchas veces se hace difícil encontrar temas sobre los que escribir en un blog de empresa, pero hay algunos trucos. Por ejemplo, se puede utilizar las sugerencias de búsqueda de Google.

Si buscas en Google la frase "cómo ...." e incluyes palabras clave que definan tu negocio, el buscador puede sugerirte las búsquedas más utilizadas por los usuarios. Son temas sobre los que podrías escribir artículos en tu blog.


144 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

6. Examinar y analizar las estadísticas del blog

Será necesario analizar las estadísticas que genera el blog para comprobar si se están consiguiendo los objetivos que habíamos establecido.

Es importante haber establecido marcadores para ello. Por ejemplo, si uno de los objetivos establecidos había sido "aumentar en un 15% el tráfico dirigido a la tienda de comercio electrónico a través del blog", será necesario conocer si lo estamos cumpliendo.

Algunos marcadores que se pueden utilizar son:

• Número de visitas al blog,

• número de comentarios realizados,

• clientes que han contactado con la empresa a través del blog, etc.

Para esta labor existen herramientas especializadas, algunas gratuitas y otras de pago. Destaca entre ellas Google Analytics.

Como puedes ver, no es tan sencillo crear y mantener un blog de empresa. Es un proyecto muy importante, más teniendo en cuenta que el contenido del blog sirve también de fuente para otras presencias de la empresa en los Social Media, como puede ser en las redes sociales.

Y es que utilizaremos las redes sociales para difundir los contenidos del blog.

Módulo 2: Herramientas tecnológicas de comunicación Tema 9: Escenarios y retos de los Social Media par a las empresas

145 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

TEMA 9: ESCENARIOS Y RETOS DE LOS SOCIAL MEDIA EN LAS EMPRESAS

1. Introducción

Aunque los blogs han supuesto una gran revolución en el cambio del uso de la Web, ya que han permitido que muchas personas puedan generar sus propios contenidos, ha sido con las redes sociales con las que realmente se ha explotado esta particularidad.

La facilidad que proporcionan las redes sociales para comunicarse y compartir contenidos es la principal característica a la que deben su éxito. Las redes sociales son mucho más inmediatas que los blogs por lo que gran parte de la actividad de la Web se ha trasladado a ellas.

Facebook, Twitter, Google+, Tuenti, YouTube, LinkedIn, Flickr, Instagram, Pinterest, etc. son redes en las que las personas se crean su perfil e interactúan con sus amigos, empresas. etc. Y no estamos hablando de unos pocos, sino que son millones las personas que utilizan diariamente las redes sociales, consumiendo bastante tiempo en ellas.

Además, con el uso de dispositivos móviles inteligentes, léase smartphone o tablets, el uso de las redes sociales se multiplica, ya que tenemos acceso a ellas en cualquier momento y en cualquier lugar.

Desde el punto de vista de las empresas esto representa una gran oportunidad y a la vez un desafío, ya que las redes sociales permiten un contacto directo con sus clientes actuales y sus clientes potenciales. Algunas empresas lo han entendido, mientras que otras todavía no acaban de encontrar la utilidad a las redes sociales, principalmente por desconocimiento y por el temor de perder el control sobre su empresa.

Poder diferenciarnos del resto es lo que puede convertir a nuestra empresa en una empresa exitosa en las redes sociales o en una más.

Por ello es tan importante planificar la estrategia de la presencia en las redes sociales. Es habitual encontrar muchas empresas que piensan que es suficiente con "estar" y esto es un gran error.

Conoceremos las oportunidades y desafíos de las redes sociales para las empresas. Además, describiremos las más importantes y, más tarde, podremos centrarnos detenidamente en algunas de ellas.


146 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

2. Oportunidades y retos.

La gran oportunidad que representan los Social Media para las empresas es saber utilizarlos para el bien de su negocio o para encontrar nuevos negocios.

Mientras que los desafíos están en saber gestionar las conversaciones que se generan en esos medios para:

• Capturar valor.

• Generar vínculos y fidelidad hacia nuestra marca. Lo que se conoce en inglés como "engagement".

La conversación con los clientes ahora puede hacerse de "tú a tú" y en ambas direcciones. Debemos aprovechar esto para crear vínculos con nuestro público objetivo, generar confianza y conseguir que se identifiquen con nuestra marca.

Hasta ahora eran los comerciales de las empresas los que tenían la labor de describir las ventajas de nuestros productos o servicios. Esto sigue siendo así, pero si también conseguimos que sean los propios clientes los que lo hagan, el resultado será mucho mejor y más duradero.

Conseguir que nuestros clientes se conviertan en "evangelizadores" es el objetivo a perseguir en los Social Media. Si lo conseguimos, ellos mismos saldrán en defensa de nuestra marca, si es necesario, ante una crisis.

Y esto lo sabe muy bien empresas como Apple, que no tiene clientes sino "fans" que sienten la marca como propia. Cualquier comentario o crítica sobre un producto lo pueden entender como una crítica a ellos mismos.

Las estadísticas nos indican que no estamos hablando de modas. Se ha comprobado que las personas que son activas en las redes sociales se convierten en más fieles a una marca cuando siguen a una empresa en Facebook o Twitter, por poner un ejemplo.

Las redes sociales nos facilitan el acceso "pull" a los clientes. Son ellos los que nos buscan en lugar de bombardearlos ("push") con publicidad que no desean recibir.

Estas son las oportunidades y desafíos para las empresas en los Social Media.

3. Reglas básicas de SMO (Social Media Optimization).

El término SEO como el conjunto de técnicas que se aplican en los sitios web para conseguir posicionarlos lo mejor posible en los resultados que ofrecen los buscadores.

Bien, con la introducción de los Social Media esto no es suficiente, también debemos aplicar optimización en estos medios. Es lo que se conoce como SMO (Social Media Optimization).


147 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Rohit Bhargava, de Ogilvy Public Relations empezó una lista de reglas básicas para optimizar la presencia en Internet de las empresas ayudándose en los Social Media. Inicialmente incluyó 5 reglas (http://www.rohitbhargava.com/2006/08/5_rules_of_soci.html) que después han sido aumentadas hasta 16 por otras personas. Vamos a verlas para tener una idea general de lo que tenemos que hacer:

Regla 1:

Incremente su capacidad de ser enlazado: La primera y más importante. La página web en lo posible tiene que dejar de ser "estática", es decir, que raramente es actualizada y solo es usada como "folleto informativo online". Agregar un blog es un gran paso. Sin embargo, hay otras formas, como crear casos de estudio o similares o agregar contenido que ya existe en otro lugar en un formato fácil de usar (RSS por ejemplo).

Regla2:

Facilite que su página se agregue a favoritos o acepte etiquetas: Agregar botones para "añadir a del.icio.us" u otro servicio de "bookmarking" similar es una de las formas más sencillas de facilitar el proceso de "etiquetado". Si se quiere ir más allá, se pueden sugerir "etiquetas" o "palabras claves" para cada página (las cuales se agregan automáticamente al servicio de "bookmarking" cuando se guarda la página).

Regla3:

Premie a los que incluyan su web como un enlace en sus propias páginas o blogs: Usados como el barómetro para medir el éxito de un blog (y también el de una página web), los "enlaces entrantes" son la vía para mejorar la posición en resultados de búsquedas o cualquier otro ranking. Para incitar su uso, necesitamos hacer el proceso sencillo y brindar beneficios claros.

El uso de "Enlaces permanentes" (es decir, una dirección URL específica para cada una de las páginas de nuestra web o en el caso de los blogs, la dirección de cada post) y la facilidad con que estas direcciones especificas pueden ser "copiadas" y "pegadas", resuelve el primero de los puntos.

http://www.rohitbhargava.com/2006/08/5_rules_of_soci.html)


148 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Los beneficios para aquellos que nos incluyan como enlaces pasan por acciones tan simples como listarlos en nuestro sitio web y así brindarles visibilidad también a ellos. "Quid pro quo".

Regla 4:

Ayude a que su contenido "viaje": A diferencia del SEO, SMO no solo consiste en hacer ajustes a una página web. Si tiene contenido que pueda ser "portable" (como por ejemplo PDF, archivos de video o audio), envíelos a sitios web o blogs relevantes. Esto ayudará a que dicho contenido viaje más lejos y, finalmente, pueda crear atención y enlaces a su página.

Regla 5:

Promueva el uso de "mashups": Un concepto muy en boga enInternet 2.0. Se trata básicamente de usar contenido o aplicaciones tomados de diversos lugares para crear nuevo contenido o aplicaciones (por ejemplo cuando alguien incluye un vídeo de YouTube en su blog o usa RSS para colocar noticias de un periódico en su propia web). La recomendación de SMO pasa por facilitar que nuestros contenidos puedan ser usados por otros y así generar atención sobre nosotros mismos.

Una forma básica es incluir un servicio de RSS en nuestra página web o blog. Si tiene contenido en video o audio, puede ofrecer el código del mismo para que pueda ser incluido en otras páginas.

Jeremiah Owyang agregó las reglas 6 y 7:

Regla 6:

Sea una fuente útil para sus usuarios, incluso si no lo ayuda directamente: Agregue valor a sus usuarios incluyendo enlaces a páginas o información que pueda ayudarlos con sus objetivos y propósitos. Presentado adecuadamente, incluso podrá hacer enlaces a su competencia. De esta formar su página se convierte en el punto de referencia de una comunidad específica. ¿Esto refuerza el concepto de SMO? Si la gente "enlaza" a su página y la "marca" como útil esto mejorará su visibilidad social.

A más "etiquetas" o "marcas", su página se vuelve más relevante para los motores de búsqueda.

Regla 7:

Premie a los usuarios valiosos y útiles: Este tipo de usuarios serán buenos "influenciadores" o "evangelizadores" de su página. Busque formas de premiarlos. Quizás pueda presentarlos en su página principal o desarrollar un sistema de "ranking". Algo que genere atención sobre esas personas.

Otras veces un rápido correo electrónico o una nota privada agradeciéndoles su ayuda pueden ser muy favorables. Trate de ser siempre sincero.

Cameron Olthuis agregó las reglas 8,9 10 y 11:


149 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Regla 8:

Participe: Únase a la conversación. Internet se está volviendo una calle de dos sentidos. Al conversar con su comunidad está logrando exposición y logrando que la gente hable de usted (procure que siempre lo haga positivamente). Participar hace que su mensaje se extienda más lejos y más rápido.

Regla 9:

Conozca cómo llegar a su audiencia: Si no conoce a su audiencia, está en problemas. Nos gustaría que todo el mundo usara nuestro producto, pero hay que ser realista. Siempre habrá una audiencia específica que lo encontrarán interesante y otros que no. Preocúpese de agradar al que de verdad está interesado.

Regla 10:

Cree contenido: Hay ciertos contenidos que se extienden socialmente de manera natural. No importa en qué industria se encuentre o lo aburridos que sean los productos que venda, siempre habrá un tipo de contenido que funciona. Quizás sea hacer que la gente se ría, escribir artículos o casos u ofrecer pequeñas aplicaciones de entretenimiento (protectores de pantalla, postales) o algún "widget" muy útil.

Averigüe qué tipo de contenido funciona en su caso y créelo.

Regla 11:

Sea autentico: Una comunidad no premia a los que son falsos.

Loren Baker agregó las reglas 12 y 13:

Regla 12:

No olvide sus raíces, sea humilde: Si se ha convertido en un "bloguero estrella" o su página obtiene un tráfico impresionante, no permita que se le suban los humos. Recuerde a aquellos que lo ayudaron a estar allí.

Mantener ese respeto será positivo para todos los involucrados.

Regla 13:

No tenga miedo de probar nuevas cosas, mantenga fresca su propuesta: Internet como fenómeno social muta cada minuto. Esté al tanto de las nuevas herramientas, productos y retos.

Lee Odden agregó las reglas 14, 15 y 16:

Regla 14:

Desarrolle una estrategia para el SMO: defina sus objetivos y establezca metas. Sea totalmente consciente de lo que quiere lograr como resultado de estas tácticas.

Puede ser reputación, ventas, influencia, credibilidad, tráfico, páginas vistas, etc.


150 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Regla 15:

Escoja sus tácticas inteligentemente: sea consciente de qué acciones tendrán más impacto en la búsqueda de sus objetivos.

Regla 16:

Haga del SMO parte su proceso de mejores prácticas: busque maneras de incorporar las tácticas de SMO a su proceso de trabajo. Documéntelo y distribúyalo entre los involucrados. Empiece con los más sencillo (incluya enlaces a otros sitios web y "bookmarks") y evolucione a partir de ahí.

4. Redes sociales generalistas

Describiremos algunas de esas redes sociales más populares donde la empresa puede tener presencia. Esto ayudará a elegir cuáles son las más adecuadas según los objetivos y público al que nos dirigimos.

Facebook:

Si tuviéramos que elegir un ejemplo para identificarlo con las redes sociales, está claro que ese sería, hoy por hoy, Facebook.

Creada por Mark Zuckerberg, inicialmente como un proyecto para los estudiantes de la Universidad de Harvard, hoy forma parte de la vida de muchas personas. Y precisamente en esa diversidad es donde se encuentra parte de su éxito.

En Facebook podemos encontrar prácticamente cualquier perfil personal, ya que se trata de una red social generalista: jóvenes, adultos, expertos, etc. Esto es lo que hace de Facebook tan atractiva para las empresas, ya que muchos de sus clientes y potenciales clientes están allí.

Los usuarios de Facebook se registran en la red y consiguen así un perfil personal. A partir de ese momento pueden buscar y encontrar a otras personas que conocen o "amigos" según la nomenclatura de Facebook. Publican, comparten fotografías y otros elementos todo dentro de Facebook. En este caso los particulares piden ser amigos de otros y estos últimos tienen que aceptarlo.

Por su parte, las empresas crean otro tipo de perfil, que son las "páginas de empresa". En este caso no se habla de "amigos" sino de "fans", ya que entre una empresa y un particular se establece una relación distinta a la que ocurre entre dos particulares.

El particular se convierte en fan en el momento en que pulsa en el botón "Me gusta" de la página de la empresa, sin necesidad de que esta tenga que aceptarlo.


151 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Twitter:

Twitter es otra de las redes sociales más importantes por número de usuarios registrados. Existe cierta polémica entre si realmente se trata de una red social o de un servicio de microblogging, ya que los usuarios publican mensajes con un máximo de 140 caracteres. Estos mensajes son conocidos como tweets.

A diferencia de Facebook, cada usuario puede seguir al que desee sin necesidad de que este último lo acepte.

Así pues, cada usuario tiene un conjunto de personas en las que está interesada seguir para conocer sus publicaciones ("following") y, a su vez, tiene otro conjunto de usuarios seguidores ("followers").

Las empresas pueden utilizar Twitter de una forma distinta a como lo hacen en Facebook, ya que Twitter es un medio mucho más dinámico e inmediato. Por ejemplo, muchas empresas están proporcionando servicio de atención al cliente en Twitter, traspasando muchas de las consultas que antes recibían en sus call center.

Google+:

Google+ es la apuesta de Google como red social generalista e intenta ocupar el mismo espacio que Facebook aunque con características propias.

Potenciar el SEO y los círculos son las características más importantes de Google+.

Potenciar el SEO porque parece que Google da mucha importancia a los contenidos publicados en su red social. De hecho, los usuarios pueden encontrar entre los resultados de las búsquedas que se hacen en Google algunas recomendaciones que han hecho sus amigos de Google+.

Además, en muchos lugares podemos encontrar el botón +1, que permite votar el sitio web o página en particular como medio de darle importancia.

En cuanto a su funcionamiento, los círculos son la gran apuesta de Google+, ya que permiten filtrar con quién queremos compartir nuestras publicaciones.

A diferencia de Facebook en la que dos personas deben añadirse mutuamente, en Google+ cada usuario añade a la gente que quiere seguir sin necesidad de que esta haga lo mismo (en este aspecto es parecido a Twitter).


152 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Así pues, los círculos cumplen dos funciones:

• Nos permiten elegir el contenido que queremos leer.

• Nos ayuda a elegir con quién queremos compartir una publicación.

¡De forma similar a lo que ocurre en Facebook, Google+ permite crear páginas de empresa aparte de los perfiles particulares.

Otras redes generalistas:

Hay otras redes que podríamos incluir en la categoría de generalistas, es decir, en principio abiertas a cualquier tipo de público.

Entre ellas podemos encontrar Hi5 y Orkut principalmente en Latinoamérica; MySpace sigue siendo importante en Estados Unidos; mientras que en España ha irrumpido con mucha fuerza la red social

Tuenti, dirigida a un público más joven o adolescente.

5. Redes sociales multimedia

Existe una serie de redes sociales especializadas en contenido multimedia, como YouTube para vídeos o Flickr para fotografías. En ellas lo más importante es el contenido multimedia, pero también se consigue crear una comunidad de usuarios alrededor de ese contenido. Usuarios que comentan, que enlazan...

Veamos algún ejemplo.

YouTube:

La atracción que provoca el vídeo es indudable. Según algunos estudios, el 80% de los internautas prefieren pulsar en un enlace para ver un vídeo antes que pulsar en cualquier otro tipo de enlace. Además, los usuarios gastan mucho tiempo reproduciendo vídeos en sus ordenadores o dispositivos móviles.

¿Por qué tiene tanto éxito el vídeo? Porque es una herramienta que permite romper el hielo entre clientes y empresas, es decir, humanizar la empresa, saber que hay personas detrás de un nombre de marca o empresa.

• Promocionar los productos y servicios.

• Demostraciones o tutoriales de uso de productos.

• Contar historias con el fin de generar conversación en torno a la marca.

• Videoblogs, videoconcursos, etc.


153 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

El éxito de la presencia en YouTube se basa en la originalidad y autenticidad. Si se consigue un vídeo con esas características, es fácil que su popularidad se extienda rápidamente, ya que es una herramienta muy viral.

Flickr:

Flickr es a las fotografías lo que YouTube a los vídeos. En Flickr se pueden subir todas las imágenes relacionadas con la empresa o con su actividad.

Esas fotografías pueden servir como escaparate de productos o para utilizarlas posteriormente en el blog de la empresa y otras redes sociales.

Relacionadas con las fotografías, Instagram y Pinterest son dos redes sociales que han ganado gran popularidad hoy en día. La gran adopción de Instagram se debe principalmente a las aplicaciones para móviles, mientras que Pinterest tiene gran influencia en el mundo del comercio electrónico.

Slideshare (presentaciones), Scribd (documentación), iVoox (podcasts), etc. son otros ejemplos de redes sociales para compartir contenido multimedia que pueden utilizar las empresas si se adaptan a sus objetivos.

Tampoco debemos olvidar otras redes sociales como WhatsApp o Line. Inicialmente concebidas como app para móviles, hoy en día son todo un fenómeno social que la empresa también puede explotar.

6. Redes sociales profesionales

Redes sociales profesionales y las redes sectoriales.

En estas redes profesionales podemos encontrar perfiles de usuarios con dos motivos principales aunque ambos se encuentran dentro de lo que se llama "networking":

• Perfiles particulares para establecerse como profesional o referente. También se está utilizando cada vez más para la búsqueda de empleo.

• Empresas que desean ofertar sus productos o servicios a un público profesional e incluso como un medio de reclutamiento.

LinkedIn, Viadeo o Xing son las redes profesionales más importantes que las empresas pueden utilizar para establecer relaciones de trabajo o networking.

Además de este tipo de redes profesionales, también existen otras que se circunscriben a un sector de actividad en particular.

Por ejemplo, Forocoches es una red social para personas interesadas en el mundo del motor; mientras que Minube es similar para temas de turismo o viajes.

Módulo 2: Herramientas tecnológicas de comunicación Tema 10: Facebook para las empresas

154 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

TEMA 10: FACEBOOK PARA EMPRESAS

1. Introducción a Facebook para empresas.

Facebook es la red social por excelencia. Su popularidad se debe en parte a las grandes posibilidades que proporciona tanto para particulares como para las empresas.

Los usuarios únicamente necesitan una dirección de correo electrónico para registrarse en Facebook. Una vez lo han hecho, pueden acceder a la red social para conectar con amigos, empresas, grupos afines a sus intereses, etc.

De cara a las empresas, Facebook dispone de un perfil distinto: las páginas de empresa.

Las páginas de empresa deben crearse a partir de un perfil personal, que pasa a ser el administrador de la página. Por ello normalmente la página de una empresa la crea una persona relacionada con la empresa, utilizando su perfil personal. De esta forma, Facebook se asegura de que hay alguien detrás de una página empresarial.

Esto no representa un problema de privacidad, ya que las publicaciones que se realizan en la página de empresa se hacen con la identidad de la página y no con la identidad del administrador.

Puede haber más de un administrador de una página de empresa. Esto permite compartir el trabajo que representa llevar una página que debe ser dinámica y participativa.

Como siempre, la empresa debe plantearse muy claramente por qué y para qué crea la página en Facebook y el Community Manager se encargará de que dicha presencia esté en línea con esos objetivos. Nuestra intención es plantear la presencia en Facebook para una empresa. ¿Qué debe tener en cuenta para que sea exitosa?

2. Página de empresa en Facebook.

Hay empresas que utilizan un perfil personal en Facebook en lugar de una página de empresa. Esto es un error muy común.

Primero porque utilizar un perfil personal está en contra de las condiciones de uso de Facebook, lo que quiere decir que Facebook podría eliminar el perfil por un mal uso (imagínate lo que puede significar esto para una empresa con muchos seguidores).

Segundo porque al utilizar una página de empresa, se disponen de muchas herramientas enfocadas a las empresas, como puede ser la posibilidad de conocer estadísticas de uso de la página.


155 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Por eso es importante conocer las diferencias entre los perfiles personales y las páginas de empresa.

El perfil personal (o simplemente perfil) está pensado para las personas. Este tipo de cuenta proporciona información del usuario y de las relaciones que mantiene con otros usuarios de Facebook a los que se llaman "amigos".

La relación de "amistad" entre usuarios de Facebook es más fuerte que la relación entre particulares y empresas. Por eso tiene sentido el uso de perfiles personales.

Un usuario puede ver fotografías o información privada de otros amigos; algo que no debería hacer una empresa a la que sigue.

De ahí que las empresas que utilizan perfiles personales están incumpliendo las condiciones de uso de Facebook. ¿Por qué esa empresa a la que sigo tiene que conocer qué amigos tengo o ver las fotografías que subo? La relación debe ser distinta.

Un usuario debe aceptar a otro como amigo; algo que no es necesario al seguir a una empresa.

Las páginas de empresa permiten establecer correctamente esa relación entre sus seguidores. El usuario sigue a la empresa al pulsar en el botón "Me gusta".

La empresa no tiene que aceptar al usuario, sino que esto es automático. De esta forma se obtiene una masa de seguidores con las que interactuar, pero en una relación distinta a la de la amistad.

Otros beneficios que obtienen las empresas al crear una página son:


156 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• Cualquier persona puede ver la página aunque no tenga cuenta en Facebook. Eso sí, si desea hacerse seguidor de la página, deberá iniciar sesión previamente.

• Las páginas permiten personalizar mucho su contenido y aspecto. Permiten instalar aplicaciones particulares, formularios, etc. Por ejemplo, si una empresa desea crear un concurso o sorteo, puede hacerlo en una aplicación para ello.

• Las páginas permiten crear eventos para informar adecuadamente a sus seguidores.

• Los administradores de una página pueden acceder a estadísticas de uso: cuántos nuevos seguidores se han conseguido, de qué regiones, con qué edades, etc. Algo fundamental para analizar el uso y obtener el ROI de su presencia en Facebook.

• Es posible crear una tienda de comercio electrónico relacionada con la página.

Para crear una página de empresa, sabemos que tenemos que acceder a Facebook a través de un perfil personal. Después debemos buscar la opción de crear la página o ir directamente a esta dirección: http://www.facebook.com/pages/create/

Lo primero que debes indicar es la naturaleza de la página. Como puedes comprobar en la figura siguiente, dispones de varias opciones: una página para un negocio local, para una empresa, para una marca o producto específico, etc. También es adecuado crear una página para un artista o grupo de música.

Seguidamente elegirás el subtipo de página y el nombre de la empresa o producto. Este nombre es importante, ya que aparece en la parte superior de la página.

http://www.facebook.com/pages/create/


157 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Adicionalmente debes introducir la URL del sitio web de la empresa (si es el caso) y elegir la dirección de la página. Este último detalle es muy importante, ya que permite acceder directamente a la página.

La dirección de la página será del tipo:

www.facebook.com/NombreEmpresa

Lo que podemos elegir es la parte donde aparece el NombreEmpresa.

Sigue las indicaciones y tendrás una página en blanco pero operativa. Después debes configurarla adecuadamente, para lo que pulsarás en la pestaña Configuración del menú de la parte superior.

Veamos algunas opciones de configuración que deberías conocer.

• En la sección General encontramos los principales.

o Visibilidad de página: aquí podremos publicar o dejar de publicar la página.

Lo mejor es no publicar la página hasta que esté completada e incluso con varias publicaciones iniciales. Una página "en construcción" no da una buena sensación de la marca o empresa que está detrás.

o Autorización para publicar: aquí podemos indicar quién puede escribir en la biografía o muro de la página. Lo recomendable es dejar que cualquiera pueda publicar, pero es cierto que en algunas páginas con un gran número de seguidores esto se tenga que restringir (al menos, en momentos puntuales).

o Visibilidad de la publicación: en este apartado podremos configurar si las publicaciones de otros en la página aparecen inmediatamente en la biografía de la página o el administrador debe aprobarlas. Además, también podremos indicar si las publicaciones de otros en la página deben aparecer resaltadas.

En el caso de decidir que el administrador debe aprobar las publicaciones de otros antes de que aparezcan en la biografía de la página, encontrarás estas publicaciones en el registro de actividad, donde deberás aprobarlas.

o Segmentación y privacidad de la publicación: en este apartado podrás controlar qué personas pueden ver cada una de las publicaciones que realices en la página. Si activas esta opción, entonces podrás decidir, para cada publicación, el público al quevan dirigidas.

o Mensajes: permite que aparezca el botón de Mensajes en la página. Esta opción es muy interesante, ya que con este botón los seguidores podrán enviar mensajes directos a la página.

o Restricciones de país y de edad: con estas opciones podemos restringir el público objetivo de la página

o Moderación de la página y Filtro de groserías: aquí podemos incluir una lista de palabras "prohibidas". Si los usuarios las utilizan, se bloqueará su publicación en la página.


158 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

o Sugerencias de páginas parecidas: por una parte esto permite que cuando a alguien le guste una página parecida a la tuya, se le sugiera seguir también la tuya. Pero esto también a la inversa, es decir, que cuando alguien indique que le gusta tu página, podrá ver otras sugerencias de páginas similares

o Respuestas: esta opción es muy interesante, ya que permite responder a los comentarios directamente, situándolo debajo del comentario al que se responde. Si no se activa, entonces es más difícil saber si un comentario es respuesta a otro anterior en una publicación.

o Información de la página: aquí debes incluir la mayor cantidad de detalles descriptivos del negocio. Estos detalles aparecerán en una parte importante de la página. De especial importancia es incluir la URL del sitio web de la empresa.

En la sección Información de la página tenemos la opción de crear una URL identificativa para la página si no lo hicimos a crearla. Es decir, en lugar de una URL como: http://www.facebook.com/pages/empresa/151179838291267, una mucho más significativa como: http://www.facebook.com/empresa.

Para ello, pulsa en el enlace del apartado Dirección web de Facebook o accede directamente a http://www.facebook.com/username/. Esto solo se puede hacer una vez, por lo que elige muy bien la URL de la página.

• En la sección Notificaciones podemos configurar qué tipos de avisos queremos recibir y si esos avisos o notificaciones deben enviarse también por correo electrónico. Las notificaciones se muestran en la parte superior de la página con un número que indica cuántas hay.

• Funciones de administración de la página: aquí se listan las personas que actúan como administradores de la página. Es posible añadir más de uno o eliminarlos. Recuerda que siempre serán perfiles personales, una página no puede administrar otra página.

http://www.facebook.com/pages/empresa/151179838291267

http://www.facebook.com/username/


159 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• Aplicaciones: aquí encontramos la lista de aplicaciones instaladas en la página. Son programas que amplían las posibilidades de las páginas de empresa. Por ejemplo, la aplicación de Fotos permite publicar fotografías en la página; mientras que la de Eventos sirve para dar a conocer algún evento especial. Facebook incorpora algunas aplicaciones de forma predeterminada, pero podemos añadir otras de Facebook o de empresas externas.

Un ejemplo claro lo tenemos cuando deseamos hacer un concurso. Aunque ya se permite realizarlos directamente en la biografía de la página, lo mejor es hacerlo a través de una aplicación especializada.

• Modificaciones sugeridas: aquí podremos encontrar sugerencias que los seguidores pueden enviar para mejorar la página.

• Destacado: son páginas que te gustan y quieres destacar. Por ejemplo, si la empresa tiene otra página, la puedes incluir aquí; u otras páginas que no tienen ninguna relación directa pero que pueden ser interesantes para nuestros seguidores.

• Móvil: aquí es posible configurar un número de teléfono móvil para actualizar las publicaciones enviando correos electrónicos a partir de dicho teléfono.

Puedes acceder a estos detalles de configuración en cualquier momento, pero es importante hacerlo al principio para detallar lo mejor posible la página y cómo será su actividad.

Adicionalmente a estas opciones de configuración de la página, es fundamental añadir una foto de perfil y una foto de portada.

La foto del perfil es la que se utiliza para identificar cualquier publicación en nombre de la página.

Para modificarla, es suficiente con situar el puntero del ratón por encima de ella y elegir la opción de editarla.


160 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Por su parte, la foto de portada es lo que se muestra en la parte superior de la página, por lo que es importante que sea una foto que se pueda identificar con la empresa o, al menos, con el negocio.

Puede tener hasta un 20% de texto, ya que no está pensada para incluir publicidad.

Una vez has completado el diseño y configuración de la página, debes añadir alguna publicación, fotografía, vídeo, etc. antes de decidirte a publicarla.

3. Cómo conseguir público y promocionar la página.

Una vez publicada la página debes darla a conocer al público al que va dirigido. No se trata únicamente de llegar a más gente por medio de Facebook sino de llegar a aquellas personas que tienen más probabilidades de convertirse en clientes.

Para ampliar tu público, anima a tus clientes y seguidores a que hagan clic en "Me gusta" en tu página. Así, es más probable que las publicaciones de la página aparezcan en su sección de noticias.

Además, el botón "Conseguir público" de la parte superior derecha de la página permite dar a conocer la página de distintas formas:

• Invita a tus amigos de Facebook: para poder utilizar esta opción, es necesario estar utilizando Facebook con la identidad de un perfil personal. Podrás informar a la gente más cercana sobre la existencia de tu página para que te apoyen con su clic. Este público inicial te ayuda a dar credibilidad y a difundir la noticia enseguida.

Pídeles que también compartan la página.

Puedes cambiar de tu perfil personal a una página (o al revés) a través de la flecha que aparece en la esquina superior derecha de la página de Facebook.

Las publicaciones que se realizan se hacen con la identidad elegida en cada momento en el apartado "Usar Facebook como".

• Invita a tus contactos comerciales: sube una lista para enviarles un mensaje de correo electrónico e informarles sobre la nueva página.

• Comparte tu página: no olvides hacer clic en "Me gusta".

• Promociona la página mediante anuncios.

Los anuncios de Facebook permiten segmentar muy bien los clientes a los que van dirigidos. Además, tienen la ventaja de que no solo los verán los seguidores de la página sino cualquier usuario de Facebook que "coincida" con la segmentación que hayas realizado al confeccionar el anuncio.

Cuando los usuario acceden a Facebook, pueden llegar a visualizar un número realmente reducido de publicaciones respecto de las que podrían ver según el número de amigos y páginas a las que siguen.


161 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

La presencia de las publicaciones de nuestra página en los timeline de los usuarios es cada vez más difícil por la terrible competencia que existe.

Para tener más posibilidades de aparecer sin publicidad, es necesario publicar cosas que pienses que gustan a tu público, que comentará o que compartirá con sus amigos. Puedes utilizar las estadísticas de tu página para obtener más información sobre los tipos de publicaciones en las que está interesado tu público.

Pese a todo ello, los anuncios de pago de Facebook se hacen prácticamente indispensables. Podemos crear anuncios con mensajes generales o promocionar una publicación en concreto.

Finalmente, no olvides incluir la insignia de Facebook en tu sitio o blog corporativo para que los visitantes puedan pulsar en el botón "Me gusta" de la página directamente desde allí.

4. Administración de una página de empresa en Facebook

Cuando se accede como administrador de una página de Facebook, en la parte superior encontramos la pestaña Actividad; mientras que en la parte derecha aparece el bloque "ESTA SEMANA".

Estos elementos son exclusivos de las páginas de empresa, por lo que es un aliciente más para utilizarlas en lugar de los perfiles personales, que ya sabemos que no son adecuados para la presencia en Facebook de una empresa.

Veamos lo que podemos encontrar en la pestaña Actividad. Fíjate en la imagen de la página siguiente.

En el apartado Mensajes encontrarás los mensajes privados que han enviado los seguidores de la página. Esto es así si has habilitado el botón Mensaje, como vimos al estudiar las opciones de configuración. Desde aquí podrás ver y contestar a dichos mensajes.


162 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

En el apartado de Notificaciones comprobarás los comentarios o interacciones de los usuarios en la página. Es realmente útil verlo aquí porque puede ser difícil darse cuenta de un comentario asociado con una publicación que está bastante abajo en la línea de tiempo. Pulsando en estas notificaciones accedes directamente al lugar en la página donde se han realizado y puedes contestarlas adecuadamente.

Por su parte, el bloque "ESTA SEMANA" te proporciona información sobre la semana en curso: nuevos usuarios de la página, es decir, los que han pulsado en el botón "Me gusta"; alcance de la publicaciones realizadas, etc.

Esto te dará una idea de si el contenido de la página está siendo interesante.

Además la pestaña Configuración da acceso a otra herramienta que puede ayudar al administrador de las páginas de empresa. Se trata del Registro de actividad.

En el Registro de actividad podrás ver todas las publicaciones que has realizado en la página (tú u otros administradores). También puedes volver a mostrar publicaciones ocultas desde aquí.

Esta serie de herramientas facilitan en gran medida el trabajo del administrador, ¿o deberíamos decir del Community Manager?

5. Interacción con los seguidores: Estadísticas.

A través de la pestaña Estadísticas conocemos el grado de interacción con los seguidores que está teniendo la página.

Podemos medir el "engagement" de la página, concepto que mide el éxito que estamos teniendo con esta presencia en Facebook.


163 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

En otras palabras: ¿cómo engancha la página?

Por defecto se mostrará la actividad de la página durante la última semana aunque es posible seleccionar otro rango de fechas. Además, vemos que tenemos las subpestañas "Visión general", "Me gusta", "Alcance", "Visitas", "Publicaciones" y "Personas".

¿Qué estadísticas podemos encontrar en la Visión general?

• Número total de "Me gusta": número de fans o seguidores. También se indica el número de nuevos fans de la página durante la semana o las fechas establecidas.

• Alcance de la publicación: aquí tenemos dos datos.

"Alcance total" es el número de usuarios únicos que han visto cualquier contenido asociado a tu página (incluidos anuncios) en los siete últimos días.

"Alcance de la publicación" es el número de personas que han visto las publicaciones de tu página.

• Interacción: aquí encontraremos los siguientes datos.

"Personas que interactúan" es el número de personas que han hecho clic en tus publicaciones, a las que les gustan, que las han comentado o que las han compartido en los siete últimos días.

Los "Me gusta", los comentarios, las veces que se ha compartido y los clics en una publicación muestran el total de cada una de estas acciones en los siete últimos días.

Puedes obtener mayor información de cada apartado, pulsando en el título o en los propios gráficos.

Más abajo encontraremos información sobre las últimas 5 publicaciones.


164 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

En esta parte nos centramos en las últimas publicaciones realizadas y concretamente en las columnas "Alcance" e "Interacción".

Atendiendo a estos detalles, podremos personalizar mejor los contenidos.

En la columna Alcance podemos ver el número de personas que han vito la publicación (se puede incluir aquí las que lo la han visto a través de un anuncio).

Por su parte, en Interacción vemos el número de veces que se ha hecho clic en la publicación; y el número de veces que se ha pulsado en el botón "Me gusta", se ha hecho algún cometario o se ha compartido.

Además, vemos que disponemos aquí del botón Promocionar publicación para crear un anuncio relacionado con las publicaciones.

Esto puede ser interesante si queremos aumentar el alcance e interacción de una determinada entrada.

Más abajo aparece el apartado Páginas en observación, que es realmente interesante.


165 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Aquí podemos añadir páginas de la competencia para realizar el seguimiento de sus estadísticas.

Al añadir una página de la competencia en este apartado, el administrador de dicha página recibe la notificación de que "alguien" la ha añadido en una lista, pero no conoce "quién" ha sido.

Fíjate en los datos que podrías comparar con hasta 100 páginas de la competencia en Facebook.

Finalmente en la subpestaña Personas obtenemos información de tipo demográfico de los fans de la página, de las personas a las que se ha llegado y de las personas que han interactuado.

Estos datos estarán segmentados por edad, sexo, país, ciudad e idioma.

De esta forma puedes conocer cuál es el segmento de población al que mejor se llega y compararlo con el público objetivo.

La estadística “Personas que han interactuado” sustituye a “Personas que están hablando de esto”.

En la categoría Personas que han interactuado se mide el grado de fidelización de la página, ese famoso "engagement" que se quiere conseguir.

Un porcentaje bueno de personas que han interactuado respecto del total de seguidores se puede encontrar entre el 3% y el 5%. Porcentajes mayores nos dan idea de un éxito importante de la página.


166 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Un porcentaje menor al 1% nos da idea de que la página no engancha, que no es interesante para sus seguidores, incluso en el caso de que tenga muchos. Por eso es tan interesante esta estadística, ya que no podemos quedarnos con la idea de que lo único que importa es el número de seguidores que estamos consiguiendo.

Sin embargo, estos porcentajes se tienen que tomar solo como una indicación, ya que con los cambios efectuados por Facebook en su algoritmo edgerank, es muy probable que solo consigamos un buen alcance si complementamos nuestra actividad con anuncios de pago.

Como puedes comprobar, es muy interesante la información que podemos obtener con las estadísticas de Facebook, que sin lugar a dudas nos va a ayudar a mejorar nuestra presencia en Facebook.

6. Funcionalidad de una página de Facebook.

Facebook permite ampliar la funcionalidad de una página a través de las aplicaciones, que no son más que pequeños programas que podemos anexionar a la página en la sección de pestañas y aplicaciones.

Hay aplicaciones prácticamente para cualquier cosa, algunas de ellas del "laboratorio de Facebook", mientras que otras son creadas por empresas especializadas.

Aplicaciones para crear promociones o concursos son de las más habituales.

Si conoces el nombre o parte del nombre de una aplicación, la mejor forma de instalarla es buscarla a través del campo de búsqueda de la parte superior. Una vez has encontrado la aplicación, sigue las instrucciones para instalarla en la página.

También puedes acceder al Centro de aplicaciones. Para ello, despliega la pestaña Más y elige Buscar más aplicaciones.

Algunas aplicaciones interesantes:

• ContactMe: para crear un formulario de contacto en la página. Permite recoger direcciones de correo electrónico de posibles clientes.

• Social RSS: permite añadir el feed del blog de la empresa en la página de Facebook. De esta forma, todo lo que se publique en el blog puede aparecer también en la página de Facebook.

• EasyPromos o Cool Tabs: para crear concursos.

• Aplicaciones para crear tiendas en Facebook.

• Etc.

Muchas de estas aplicaciones son gratuitas y otras de pago. En algunas ocasiones existe una versión gratuita de la aplicación y otra versión de pago con más funcionalidades.


167 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

7. Estrategias para el éxito en Facebook.

Conocidos los elementos operativos que proporcionan las páginas de empresa de Facebook, es el momento de dar un paso atrás y pensar cómo vamos a utilizar todo esto.

Y para ello, lo primero es conocer los objetivos para los que crearemos la página.

Habitualmente son alguno o algunos de estos:

• Dar a conocer la empresa, una marca o un nuevo producto.

• Conseguir feedback del cliente con el propósito de mejorar nuestro negocio.

• Informar de las novedades de la empresa y del sector.

• Fidelizar al cliente actual y conseguir nuevos clientes. Crear una relación que vaya más allá de la simple compra.

Extraído de la Guía de las mejores prácticas de Marketing en Facebook, publicación que proporciona la propia Facebook, podemos resumir la estrategia a seguir en tres pasos:

• Crear la presencia, es decir, crear la página de empresa y rellenarla del contenido inicial. Añadir toda la información que se pueda, añadir fotografías, vídeos demostrativos de los productos, etc. Se puede utilizar plugins sociales, aplicaciones, etc.

• Relacionarse. Publicar y establecer relaciones con los seguidores permitirá estrechar las relaciones y adquirir información valiosa.

• Ampliar. Cada vez que alguien interactúa con la página, esa acción se publica en las últimas noticias de sus amigos y se crea el "boca a boca".

También incluimos los cinco principios básicos que se pueden encontrar en dicha guía:

1. Crear una estrategia que tenga un diseño social: el aspecto social debe estar incorporado en todo lo que se hace, no añadirlo al final de la campaña y como algo secundario.

2. Crear una voz auténtica de la marca: los usuarios de Facebook son claros y sinceros sobre quiénes son: actúe del mismo modo al proporcionar información clara sobre su empresa.

3. Garantizar una experiencia interactiva: los usuarios pasan tiempo en Facebook comunicándose y compartiendo entre sí, así que participe siempre en conversaciones bidireccionales.


168 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

4. Desarrollar sus relaciones: al igual que en el mundo real, desarrollar relaciones con usuarios en Facebook lleva su tiempo y requiere de una inversión a largo plazo. Actualice el contenido para que esté al día y sea fácil de consumir.

5. Seguir aprendiendo: Facebook le permite recibir las sugerencias de los usuarios en tiempo real, brindándole así la posibilidad de realizar cambios importantes sobre la marcha. Use las herramientas de informes para conocer más sobre sus seguidores así como el contenido y los productos que le resultan más interesantes.

Módulo 2: Herramientas tecnológicas de comunicación Tema 11: Twitter para empresas

169 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

TEMA 11: TWITTER PARA EMPRESAS

1. Introducción a Twitter para empresas.

Twitter es una de las redes sociales cuyo uso más ha evolucionado. Al principio se trataba de una herramienta que solo utilizaban los "expertos" y que parecía fuera de nuestro alcance.

Sin embargo, hoy en día se trata de una red social en la que no se necesita ser un profesional reconocido para poder utilizarla y sacarle gran partido. De hecho, ya alcanza 500 millones de usuarios en todo el mundo.

Además, las empresas al principio no caían en la cuenta de las posibilidades de esta red social y, en el mejor de los casos, preferían enfocar sus esfuerzos en un blog o en una red mucho más conocida como Facebook.

Esta tendencia ha evolucionado y actualmente Twitter también es una de las primeras opciones para las empresas.

Cada cuenta en Twitter puede seguir a otros usuarios de Twitter y, a la vez, tener seguidores. La influencia o relevancia de un usuario de Twitter se estima, en parte, por su número de seguidores aunque tambié influye lo relevantes que sean estos.

A diferencia de lo que ocurre en Facebook, en Twitter es suficiente con pulsar en el botón "Seguir" de un perfil para convertirse en seguidor, ya que dicho perfil no necesita confirmar la acción.

En Twitter cada mensaje puede tener como máximo 140 caracteres, por lo que se fomenta el diálogo ya que los mensajes tienen que ser directos y concretos. Inmediatez, actualidad e interacción con otros usuarios son características de Twitter que la hacen ideal para establecer una relación estrecha y provechosa entre empresas y usuarios

2. Dar a conocer una empresa en Twitter.

Un uso corporativo de Twitter permitirá dar a conocer la marca de la empresa, participar de la conversación con nuestros clientes y potenciales clientes, así como crear comunidad con ellos y fidelizarlos.

Las posibilidades son amplias y la naturaleza de Twitter por su inmediatez e interacción la convierten en una de las opciones más interesantes para las empresas, pero también en una de las más peligrosas si la actividad no se realiza correctamente.

En más de una ocasión Twitter ha sido el origen de crisis de reputación de empresas importantes.


170 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

¿Para qué puede utilizar Twitter una empresa?

Para:

• Promocionar una marca o empresa.

• Crear una comunidad de seguidores alrededor de la marca y conseguir que sean sus primeros "comerciales" o "fans". Podemos identificar a los usuarios más importantes del sector y establecer una relación especial con ellos.

• Difundir novedades: nuevos productos, eventos, premios, concursos, contenidos de creación propia (como los artículos del blog), etc. Nuestros seguidores pueden volver a difundir estas novedades, por lo que tenemos la oportunidad de llegar a un público mucho mayor.

• Actuar como atención al cliente. Muchas empresas están trasladando a Twitter los servicios de soporte o atención al cliente en detrimento de los conocidos como "call center" o de atención telefónica.

• Seguir la actualidad y las novedades del sector de la empresa.

• Difundir contenidos interesantes de terceras empresas o personas.

• Recoger el feedback de los usuarios respecto de los productos o servicios.

La clave en el uso de Twitter está una vez más en los contenidos que publicamos. Las personas siguen un perfil de Twitter por varios motivos, pero solo conseguiremos fidelizarlos si realmente lo que obtienen es de su interés.

Además, la presencia en Twitter es más exigente que en otras redes sociales, ya que su actividad debe ser mayor. No tiene sentido publicar un tweet cada dos o tres días, sino que lo normal es que realicemos varias actualizaciones al día.

3. Impulso y promoción de la empresa en Twitter.

El principal uso que están dando las empresas a Twitter es el de promoción, se utiliza como una herramienta más de marketing ya que se adapta a este objetivo a las mil maravillas.

La gran mayoría de las empresas (por no decir todas) utiliza Twitter como un canal más para difundir sus noticias o novedades. Esto está muy bien, pero no debemos caer en la tentación de que sea lo único que hacemos.

Si lo hacemos bien, podemos redirigir a los seguidores del perfil de Twitter hacia otras presencias en Internet donde convertir esas visitas en ventas:

• Hacia el blog: Twitter es ideal para difundir los artículos y novedades publicados en el blog de la empresa. Puede hacerse incluso automáticamente


171 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

con herramientas como http://twitterfeed.com de forma que cada vez que se publica algo en el blog, se genera un tweet en el perfil relacionado de Twitter.

• Hacia la web corporativa o incluso hacia la tienda online, si es el caso. Los seguidores agradecerán enterarse de promociones o de descuentos exclusivos, lo que seguramente producirá un incremento de ventas.

• Hacia eventos organizados por la empresa o que puedan ser de interés para nuestros seguidores, aunque no participemos de ninguna manera en ellos. Es habitual que cuando una empresa está realizando una demostración en alguna feria o evento, lo difunda en directo a través de Twitter y con una hashtag creada para tal fin.

Pero no solo se puede utilizar de esta forma, sino aprovechando las propias comunicaciones que hacen nuestros seguidores.

Si un usuario publica en su Twitter la buena atención que ha recibido de tu empresa o que ese producto que vendes es magnífico, ¿qué mejor que contestar agradeciendo a dicho usuario el comentario y de paso que lo vean los demás? Creando así una base de los testimonios que recibimos de nuestros seguidores.

Twitter puede servir como un canal ágil para la atención al cliente principalmente por las limitaciones en cuanto al número de caracteres de los mensajes. Bien es cierto que cuando el asunto tiene su complejidad, seguramente el cliente deberá ser redirigido a la atención telefónica o presencial.

Sin embargo, para muchos asuntos sencillos, Twitter puede servir como solución y, lo que es lo mejor, otras personas con problemas similares pueden ver nuestra respuesta y solucionar su problema sin ni siquiera plantearlo.

Sin embargo, no todo son ventajas. Precisamente el hecho de exteriorizar la atención que prestamos a nuestros clientes puede provocar el efecto contrario. Aquí la habilidad del responsable o Community Manager es esencial por lo que debe conocer en todo momento cómo actuar.

Si nuestra atención no es buena o no es lo rápida que esperan nuestros clientes habituados a utilizar Twitter, las críticas no se harán esperar.

Por eso muchas empresas crean perfiles de Twitter especializados en la atención al cliente. De esta forma, el perfil corporativo se libera de esa tarea y sirve para otros propósitos establecidos.

La persona o personas responsables del perfil de atención al cliente deben tener un constante contacto con los departamentos de la empresa que realmente pueden solucionar los problemas o las quejas. Esto es fundamental, ya que el responsable de Twitter no tiene por qué conocer todo acerca de la empresa y de los productos, pero sí que debe ser capaz de obtener esa información.

Otro de los objetivos con los que se puede crear la presencia de Twitter para una empresa es la capacidad de anticiparse a una crisis de reputación.


172 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Si un usuario se queja o habla mal de nuestros productos, debemos detectarlo cuanto antes y solucionarlo.

La empresa debe actuar lo antes posible para que esto no ocurra y para ello debe estar atenta a todo lo que se dice de ella.

Es conveniente responder ante una crítica a través del mismo canal en el que se ha producido, aunque tengamos que derivar la atención hacia otro medio. Si la queja se ha creado en Twitter responde también en Twitter.

Herramientas como la búsqueda de Twitter o aplicaciones que permiten monitorizar ciertas palabras como HootSuite o Alertas de Google son de gran utilidad para estos casos.

Si la empresa detecta este mensaje, puede ponerse inmediatamente en contacto con esa persona, pedirle disculpas e intentar compensarla. Es más, seguramente esa persona no se espera la reacción de nuestra empresa en Twitter y quedará "impresionada", difundiendo la buena atención que ha recibido de nuestra parte. Lo que se había convertido en una posible crisis de reputación se ha transformado en un elogio a nuestra empresa. ¿Qué mejor que guardar ese mensaje entre nuestros tweets favoritos?

Hay ejemplos de respuestas buenas y malas por parte de las empresas ante situaciones de crisis de reputación.

Por ejemplo, la compañía aérea Spanair actuó rápidamente con una persona que se quejaba de sus servicios y consiguió que esta alabara esa atención.

En contra, es famosa la respuesta de los responsables del programa de televisión "La Noria" de Tele5 ante la avalancha de quejas en Twitter a partir de una determinada entrevista. En este caso el resultado no fue muy bueno para la cadena, que perdió durante bastante tiempo a todas las empresas que se anunciaban durante dicho programa.

.

Módulo 2: Herramientas tecnológicas de comunicación Tema 12: Google+ para empresas

173 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

TEMA 12: GOOGLE+ PARA EMPRESAS 1. Introducción a Google + para empresas.

Google + (Google Plus), es otro intento de Google por crear una red social, ya que anteriormente había realizado dos intentos con Google Wave y Buzz, que finalmente tuvo que abandonar.

Sin embargo, Google+ sí que parece que será un proyecto duradero, ya que la principal ventaja que tiene respecto a otras redes sociales como Facebook o Twitter es que sus contenidos son indexables por el buscador de Google.

Esto representa una ventaja fundamental de cara al posicionamiento de las empresas o marcas, ya que la presencia en Google+, si se realiza de forma adecuada, puede impulsar el posicionamiento en Google de la marca.

Así pues, cuando los usuarios realizan búsquedas habiendo iniciado sesión previamente en Google+ (o en cualquiera de las aplicaciones de Google, como Gmail), los resultados que obtienen pueden estar personalizados teniendo en cuenta las publicaciones de las personas o empresas a las que siguen en Google+.

Esto lo puedes ver en esta imagen. Fíjate cómo al buscar acerca de una marca, en la parte derecha de los resultados nos aparece la página de dicha marca en Google+.


174 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Claro que esta es una búsqueda muy específica, ya que hemos utilizado el propio nombre de la marca; pero también podemos ver resultados similares ante búsquedas más complejas.

Pero es que incluso si no se ha iniciado sesión en Google, los resultados de las búsquedas también pueden estar influidos por las publicaciones públicas realizadas en Google+.

Es cierto que seguramente este sea el principal motivo por el que las empresas inicien su andadura en Google+, pero eso no significa que sea una red social realmente interesante por otros motivos, como:

• Por la facilidad de compartir datos de forma selectiva. Para ello, se basa en los llamados "círculos de Google+", herramienta que facilita la segmentación de los clientes de la empresa, permitiendo personalizar los mensajes que queremos compartir.

• Por la integración con el resto del ecosistema de aplicaciones de Google, es decir, con Gmail, Google Docs, Calendario, YouTube, Fotos, etc.

• Por los hangouts, que permiten realizar videoconferencias de hasta diez personas simultáneamente. Los community manager pueden utilizarlos para organizar encuentros digitales que pueden ser seguidos también por YouTube.

• Por las comunidades, que permiten reunir a usuarios realmente interesados en un tema (que podría estar relacionado con nuestra marca o empresa), por lo que se consigue una gran participación e interacción.

Es posible asociar "extensiones sociales" de Google+ en los anuncios de Google Adwords de forma que estos sean más efectivos. De esta forma, los usuarios pueden ver cuántos seguidores tiene la página en Google+ o si alguno de sus conocidos ha pulsado en el botón +1.

Las empresas no han prestado suficiente atención a Google+, pero queda claro que deben hacerlo.


175 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

2. Página de empresa en Google +.

Existen dos tipos de cuentas en Google+: los perfiles personales y las páginas de empresa.

Y también como ocurre en Facebook, para crear una página de empresa, es necesario hacerlo a través de un perfil personal, que se convierte en el administrador de la página (aunque es posible añadir posteriormente más administradores).

Es probable que ya dispongas de un perfil personal de Google+ porque si utilizas alguno de sus servicios, como Gmail, YouTube, etc., tu cuenta Google incluye también un perfil de Google+.

Por eso lo habitual es que algún responsable de la empresa sea el encargado de utilizar su propio perfil personal o bien una cuenta creada expresamente para ello, para crear la página de empresa.

Los perfiles de Google+ representan a personas mientras que las páginas de Google+ normalmente representan a entidades como marcas, empresas u organizaciones. También pueden representar a famosos, personas o seudónimos.

En Google+ la relación que se establece entre los usuarios es más parecida a Twitter que a Facebook, ya que cualquiera puede añadir a otro usuario en alguno de sus círculos, sin necesidad de que este haga lo propio o tenga que aceptarlo.

Si el usuario quiere hacer lo propio para una página de empresa, deberá pulsar en el botón Seguir (similar al "Me gusta" de Facebook) y elegir el círculo donde desea clasificarla.

Las páginas también pueden añadir personas a sus círculos (seguramente con la intención de que estos hagan lo mismo), pero tienen más límites (sobre todo al principio, cuando tienen pocos seguidores), ya que la idea es que consigan sus seguidores de forma natural.

Además, por defecto sus publicaciones son públicas, por lo que cualquiera puede verlas.

Finalmente, si en Facebook utilizamos el botón "Me gusta" para indicar que nos interesa una publicación, en Google+ se emplea el botón +1 para el mismo propósito.

Así pues, desde el punto de vista de una página de empresa tendremos que promocionarla para ambas cosas: conseguir seguidores y votaciones o pulsaciones del botón +1.

Como casi siempre, el contenido que publiquemos será la clave para todo esto, pero primero debemos crear y optimizar la página.

3. Cómo crear una página de empresa


176 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Cómo crear una página de empresa. Para ello, habremos iniciado sesión en Google+ utilizando nuestra cuenta personal.

Esto lo puedes hacer directamente en la página principal de Google, pulsando en el enlace +Tu de la parte superior.

Una vez hemos accedido, situaremos el puntero del ratón encima del elemento Inicio y elegiremos Páginas.

Ahora pulsaremos en el botón Crear una página y empezaremos a rellenar sus detalles. Lo primero es indicar el tipo de empresa o negocio para el que la estamos creando.

Tenemos cinco tipos distintos:

• Negocio local.

• Producto o marca.

• Empresa, institución u organización.

• Artes, entretenimiento o deportes.

• Otro.

Las funcionalidades de los distintos tipos de páginas son iguales excepto en el caso de un negocio local, que está enfocado a negocios que tienen una ubicación física, como una tienda, un restaurante, etc.

Las páginas del tipo negocio local tienen características únicas. Por ejemplo, incluyen un mapa de localización, así como su dirección, teléfono y horario de apertura. En este caso es muy importante incluir todos estos datos de contacto.


177 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Vamos a elegir el tipo Producto o marca. Deberás indicar la categoría correspondiente en la lista desplegable y pulsar en el botón Siguiente.

Y ahora el paso seguramente más importante. Deberás introducir el nombre de la página y la URL del sitio web de la empresa.

Esto último es fundamental, ya que uno de los propósitos de crear la página en Google+ será promocionar la marca o empresa, por lo que Google tiene que estar seguro de que la página realmente la representa.

Después veremos que se tiene que verificar la propiedad de dicho sitio web para que esto sea posible.

Una vez completados estos pasos, tendremos la página de empresa que deberemos personalizar:

• Foto de perfil: deberemos elegir la foto que identificará a la página en publicaciones, comentarios, votaciones +1, etc.

• Foto de portada: imagen que se extiende en la parte superior de la página. Es importante que sea una imagen original y no utilizar alguna de las que proporciona Google para diferenciarnos de las páginas poco profesionales.

• Teléfono, correo electrónico y otras formas de contacto.


178 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• Visibilidad de la página: normalmente será una página pública.

• Presentación o historia: breve descripción de la página, intentando incluir las palabras clave por las que pueden buscar la página los clientes.

• Eslogan de la marca o empresa.

El procedimiento a la hora de introducir todos estos detalles es bastante intuitivo, por lo que no deberías de tener problemas para hacerlo.

Es importante rellenar la mayor información posible para que la página tenga un aspecto profesional y sea más fácil que aparezca en las búsquedas que realizan los usuarios tanto dentro de Google+ como en el propio buscador Google.

4. Relacionar Google + con el sitio web de la empresa.

Enlazar la página de Google+ con el sitio o blog corporativo (o personal, si es el caso) es algo fundamental, ya que es lo que facilitará el posicionamiento de nuestra marca o empresa en las búsquedas relacionadas que realicen los usuarios.

Además, desde el sitio o blog corporativo podremos añadir botones para que sigan la página sin necesidad de navegar a ella. Google da mucha importancia a esta verificación para que solo los propietarios de los sitios web puedan enlazarlos correctamente con las páginas de Google+ asociadas.

Veamos cómo lo haríamos.

En la parte inferior del perfil de la página encontramos el apartado Enlaces. El que nos interesa ahora es el correspondiente al sitio web.

Vemos que tenemos aquí el botón para enlazar o verificar el sitio web. Lo pulsaremos.

En el mensaje que vemos ahora se nos indica lo que deberíamos hacer. Así pues, para verificar el sitio web y enlazarlo con la página de Google+ que hemos creado, deberemos pegar el pequeño código que aparece aquí en la sección <head> de la página principal del sitio web corporativo. Lógicamente esto solo lo puede hacer el propietario de ese sitio web.


179 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Una vez hecho esto, pulsaremos en el botón Probar el sitio web para comprobar si lo hemos hecho correctamente. En caso afirmativo, la página de Google+ presentará la marca de verificado .

En el caso de que el sitio web haya sido verificado en Herramientas para webmasters de Google, esta verificación se puede solicitar directamente desde estas herramientas.

También sería conveniente añadir las insignias o botones para que desde el mismo sitio web puedan seguir a la página de Google+ enlazada sin necesidad de acceder a esta.

Esto lo podemos hacer fácilmente a través de la configuración de la página. Accede al apartado Para tu sitio y búscalo en la parte inferior.

Solo tendríamos que personalizar la insignia con las opciones que tenemos aquí y copiar el código correspondiente.


180 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Dicho código lo incluiríamos en nuestro sitio web o blog corporativo en el lugar donde queremos que aparezca.

Con la insignia no solo permitimos que el usuario que accede a nuestro sitio web pueda recomendar la página de Google+ pulsando en el botón +1, sino que también puede hacerse seguidor directamente sin necesidad de acceder a la página.

Es importante entender que todo este proceso se realiza de cara a posicionar nuestra marca o empresa a través de la página de Google+.

Esto también puede mejorar el posicionamiento del sitio o blog corporativo, pero siempre de una forma indirecta; por ejemplo, a través del tráfico que recibe desde la página de Google+ o por el descubrimiento del propio sitio web, que gana en visibilidad.

Módulo 2: Herramientas tecnológicas de comunicación Tema 13: Marcadores sociales y agregadores de noticias

181 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

TEMA 13: MARCADORES SOCIALES Y AGREGADORES DE NOTICIAS

1. Introducción

Los blogs y las redes sociales son los medios más populares en la Web 2.0. Sin embargo, existen muchos servicios que también son de gran interés tanto para particulares como para las empresas.

Entre ellos podemos encontrar lo que se conoce como "marcadores sociales" por una parte y "agregadores de noticias" por otra.

Son servicios distintos, pero como veremos, comparten una misma característica consistente en que son los usuarios los que aportan valor a estos servicios.

Los marcadores sociales son servicios online en los que los usuarios guardan sus páginas favoritas o enlaces interesantes, con el añadido de que "etiquetan" esas páginas para que después sea más sencilla su localización.

Por su parte, los agregadores de noticias son sitios donde los usuarios envían las noticias que desean promocionar. Estas noticias son votadas por el resto de la comunidad de forma que las que más votos reciben son las que aparecen en las primeras posiciones, en el sentido de que son las más importantes según el sentimiento de la comunidad.

Ambos servicios pueden ser utilizados tanto por particulares como por empresas. De cara a las empresas, son de especial importancia para posicionar su presencia online lo mejor posible. Y de ello también se encarga el Community Manager.

2. Marcadores sociales.

A veces hemos utilizado en alguna ocasión los favoritos o marcadores del navegador para guardar alguna página o sitio web que es de nuestro interés.


182 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

El problema que representa esta forma de hacerlo es que se amontonan los favoritos, incluso aunque los organicemos en carpetas; pero, sobre todo, que esos favoritos solo están disponibles en ese ordenador.

Esta última limitación es muy importante hoy en día en que es muy común acceder a Internet desde distintos lugares y dispositivos (ordenadores de escritorio, portátiles, notebooks, tablets, smartphones, etc.).

Existe una alternativa mucho mejor conocida como marcadores sociales. Consiste en utilizar alguno de los servicios online, como delicious o diigo. Se trata de portales de Internet donde el usuario crea una cuenta y, a partir de ese momento, puede guardar esos favoritos en dicho portal.

De esta forma, independientemente desde dónde o con qué dispositivo accede a Internet, tendrá a su disposición todos sus enlaces favoritos guardados en el portal.

Desde el punto de vista personal esta es la principal ventaja de los marcadores sociales. Sin embargo, el adjetivo "social" nos indica que debe haber algo más.

Efectivamente, esos favoritos o marcadores que el usuario guarda en estos servicios pueden ser compartidos. Lo que significa que otras personas pueden consultar las páginas que otros usuarios han guardado como favoritos.

De esta forma, si estamos buscando información acerca de un determinado tema, una posibilidad que seguramente no habíamos utilizado es buscar entre los favoritos que otras personas han guardado en estos servicios.

Y para que ello sea posible, los usuarios pueden "etiquetar" cada favorito que guardan con una serie de palabras clave. Esto permite la búsqueda posterior de esa información.


183 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Puede que no acabes de ver qué ventaja tiene esto para las empresas. Bien, primero es un servicio muy útil para obtener información relevante para la empresa o información del sector de actividad.

Y, segundo, las empresas pueden utilizar estos servicios para promocionar sus propios contenidos. Por ejemplo, si la empresa tiene un blog corporativo, podría guardar entre sus favoritos las entradas de dicho blog; lo mismo puede hacer respecto de su web, etc.

De esta forma, cuando el usuario realice una búsqueda relacionada a través de uno de estos servicios, podrá encontrar nuestra empresa. Imagínate si esto lo realiza un buen número de personas y, a su vez, vuelven a guardar tu empresa y a etiquetar tus contenidos.

Esta es la idea general de los marcadores sociales. Vemos que una parte muy importante de su éxito de cara a una empresa la encontramos en la actuación de nuestros clientes o posibles clientes. De ahí que sea tan importante la correcta categorización mediante etiquetas de nuestro contenido. Este procedimiento de etiquetado social se conoce como folcsonomía.

Vemos un ejemplo utilizando Delicius:

Al ser un portal utilizado por millones de personas, ya dispone de una buena red social alrededor del servicio que actúa como filtro de los enlaces que se guardan en él.

La idea que subyace detrás de este servicio es que si una página ha sido guardada por muchos usuarios, seguramente es porque es interesante o relevante.

Lo primero que debemos hacer es crear una cuenta en delicious. Para ello, accederemos a su página principal https://delicious.com/ y pulsaremos en el enlace Join Delicious en la esquina superior derecha.


184 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Para facilitar esta tarea, los servicios de marcadores sociales suelen proporcionar plugins para los principales navegadores. De esta forma, es suficiente con pulsar en un botón para guardar y etiquetar la página que estás visitando en ese momento.

Se nos solicita nuestro nombre completo, un nombre de usuario, una contraseña y un correo electrónico. Rellenamos estos detalles y pulsamos en Sign Up for Delicious.

Una vez hecho esto, delicious nos facilita un botón para añadirlo en la barra de herramientas de nuestro navegador. Esto depende del navegador que estemos utilizando, pero sin duda es la mejor opción para añadir los favoritos a medida que navegamos por Internet sin tener que acceder a delicious cada vez.

Encontrarás ese botón (y otros) en el apartado Tools.

Si no quieres crear una cuenta de delicious, también puedes iniciar sesión utilizando una cuenta de Twitter, Facebook o Google.

Fíjate que en la figura anterior aparece el botón Add to delicious en la barra de herramientas del navegador. Para ello, simplemente se arrastra hasta dicha barra.

A partir de ese momento ya podrás utilizar este botón siempre que lo desees para guardar en delicious los enlaces o páginas web que sean de tu interés.

Si eres el Community Manager de una empresa, ya sabes que puedes utilizarlo para guardar enlaces a los contenidos y presencia enInternet de la empresa.

Así pues, imagínate que eres un aficionado a la cultura del vino y has llegado a una página que no conocías y que parece interesante. Puedes guardarla en los favoritos de tu navegador, pero es mucho mejor hacerlo en delicious.


185 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Para ello, pulsas en el botón Add to delicious de la barra de herramientas del navegador...

Si utilizas el navegador Chrome, asegúrate de mostrar la barra de herramientas Marcadores para poder arrastrar el botón a esta barra. Es posible que previamente tengas que iniciar sesión en delicious si todavía no lo habías hecho.

Y aparece una ventana flotante para guardar la página en delicious. Fíjate que puedes incluir la siguiente información:

• Título del enlace: por defecto delicious utiliza el título de la página web, pero tú podrías cambiarlo por uno que te parezca mejor.

• Descripción: utiliza este campo para describir la página. Después te servirá cuando busques entre tus favoritos.

• Tags o etiquetas: aquí debes elegir o crear las etiquetas con las que se guardará el enlace. Esto es lo más importante, ya que es lo que permite localizar el enlace en la biblioteca de enlaces que tienes en delicious.

• También puedes hacer este marcador como privado si deseas ser el único que pueda verlo en tu perfil de delicious.

Una vez completada esta tarea, no tienes más que pulsar en el botón Save link (guardar enlace) y dispondrás de este enlace en tudelicious.

Aquí lo puedes ver.


186 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Así de sencillo es crear los marcadores en tu perfil de delicious Además, recuerda que puedes buscar entre los marcadores que han agregado el resto de usuarios del servicio.

Para ello, delicious proporciona un buscador y un directorio en el que los enlaces se dividen según diversas categorías.

Elige o escribe las etiquetas separadas por comas. Puedes añadir cuantas quieras y pueden tener más de una palabra.

En la imagen siguiente puedes ver que se indica la veces que se ha guardado un enlace y qué usuario fue el primero en hacerlo. Los enlaces más populares son los que se entienden que son más interesantes ya que han sido guardados más veces.

Existen otras alternativas, como diigo o Mr. Wong.

3. Agregadores de noticias.

Los agregadores de noticias comparten gran parte de la filosofía de los marcadores sociales, pero se utilizan con otros propósitos. En este caso se trata de portales donde sus usuarios pueden enviar noticias para que sean votadas y tomar así mayor relevancia.

Lo interesante del método es que son los propios usuarios del servicio los que deciden qué noticia o artículo es más interesante e incluso si alguna historia debe ser eliminada.

El ejemplo español más popular es el portal Menéame (www.meneame.net) basado en el portal americano Digg (http://digg.com/).


187 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

En Menéame el usuario envía una historia (para lo que se necesita estar registrado) y esta pasa a la cola de pendientes, donde el resto de usuarios (registrados o no) pueden votarla. En el caso de Menéame, se pulsa el botón menéalo para votar. El número de votos es el número de “meneos”.

También se puede votar de forma negativa para que las noticias sean apartadas de la cola de pendientes. Para votar de forma negativa, sí que tienes que estar registrado. Las historias más votadas pasan a la portada del portal por lo que son las noticias más leídas. Además, realmente la historia que se sube es un pequeño resumen de la misma y un enlace para acceder al contenido original.

El servicio da mayor importancia al voto en función de lo que se conoce como “karma” del usuario, que es un valor entre 0 y 20 y que se consigue en función de la participación del usuario en el portal.

De cara al Community Manager de una empresa, su tarea será subir las historias que pueden ser interesantes para el resto de la comunidad yque estén relacionadas con la empresa para promocionarlas y obtener la mayor difusión.


188 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Hay que hacerlo correctamente, ya que el sistema intenta eliminar cualquier intento de spam, duplicidad, copia, plagio, etc.

Es interesante acceder a las FAQ o preguntas frecuentes del portal Menéame. En ellas obtendrás un enlace a la "Meneaetiqueta" o reglas de buen uso del portal.

Por ejemplo, puedes comprobar cómo se pueden calificar las noticas y por qué pueden ser eliminadas si reciben votos negativos. A continuación reproducimos algunas de las calificaciones que puede obtener una noticia en Menéame:

Irrelevante:

Normalmente, cuando un meneo no nos interesa, sencillamente pasamos de largo. En ciertas ocasiones, sin embargo, el meneo puede ser tan poco interesante o inadecuado que el votante llega a pensar que no merece estar en la cola de pendientes y, por tanto, merece un voto negativo.

La idea a tener en mente para usar este voto no es "no me interesa el tema". Más bien equivale a "lo considero tan poco relevante o fuera de lugar que no debería estar en Menéame".

Antigua:

Con este voto se expresa que la antigüedad de la noticia ha hecho que ya no tenga relevancia. Por ejemplo, la noticia de un estreno o la presentación de un nuevo producto deja de ser relevante muy rápidamente. Enviar esa noticia meses después no tendría sentido y por tanto sería "antigua".

Por supuesto, cosas como un artículo publicado hace tiempo nunca debería ser votado con este valor negativo solo por la fecha de su publicación, dado que por si sola no influye en la relevancia del texto.

Cansina:


189 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Este voto representa el hastío hacia ciertos temas demasiado trillados o con excesivos envíos recientes.

Sensacionalista:

Se usa cuando el votante considera que la historia enviada ha sido manipulada, redactada de forma que lleva a engaño o de una forma artificialmente impactante.

También se usa para las noticias propias de la "prensa amarilla": noticias sensacionalistas, escándalos, sucesos sórdidos o morbosos.

Spam:

En Menéame el término spam puede referirse a dos conceptos: la promoción o propaganda no solicitada y el abuso de fuentes de envío. El primero y más conocido es la propaganda no solicitada. Dada la popularidad y gran audiencia de Menéame, es habitual que los anunciantes lo usen como plataforma para publicitar sus pr oductos (a pesar de ir contra las normas de uso). La mayoría de usuarios consideran que la publicidad no es adecuada para Menéame y votan en negativo esos envíos por spam.

Los artículos que analizan productos o servicios no tienen por qué ser spam; pudiendo ser simplemente fruto del interés del autor en ese tema. En ocasiones la línea que separa el spam de uno de esos artículos puede ser muy fina, quedando el voto a elección de cada votante.

El segundo concepto es el abuso de una fuente para enviar meneos. La fuente repetida puede ser propia (el blog personal) o ajena (el blog de un amigo, una web de noticias, etc.) siendo spam en ambos casos.

Por supuesto nada prohíbe repetir los envíos de una fuente dentro de lo razonable; pero, para evitar que se considere spam, es conveniente no abusar y que los envíos de la fuente repetida sean pocos respecto al total (entropía alta)

Un error muy común es confundir autobombo con spam. Enviar del propio blog o web no tiene nada de malo mientras esos envíos no se repitan a menudo y se conviertan en spam.

Duplicada:

Presta mucha atención, antes de votar positivamente un envío, a si este ya fue publicado. Por esto es importante leer los comentarios, muchos usuarios además de votar negativamente cuando encuentran una duplicada suelen además incluir en los comentarios un enlace a la noticia original. Si votas duplicada, intenta dejar antes un comentario con el enlace al envío original; si ya lo ha hecho otro usuario, no te dejes llevar por el comentario al votar y procura cerciorarte de que es correcto. Si la noticia original fue descartada por el propio usuario o porque fue considerada un abuso, no tiene sentido considerar duplicada la última enviada.

Microblogging:


190 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Menéame sirve para promocionar contenido ya existente, no para generarlo. Elaborar la noticia en la entradilla, título y etiquetas es una forma de distorsionar los envíos y como tal merece ser penalizado.

Errónea:

Este voto lo merecen los envíos que tienen errores. Por ejemplo, consideramos erróneos los envíos donde el enlace no funciona, no cumple las normas o la noticia a la que apunta contiene información falsa. Si la noticia está mal redactada o tiene un título incorrecto, pero de todas maneras el enlace te parece interesante, es recomendable no votarla positivamente, sino dejar un comentario explicando el error y pidiendo a los usuarios con capacidad de edición que corrijan la noticia.

Esto vale para enlaces erróneos, es decir aquellos que anuncian una noticia interesante, pero que están apuntando primeramente a su sitio sin aportar nada (a lo sumo una breve descripción) y luego enlazando al sitio correcto. Pide que se cambie el enlace antes de votar negativamente, esto ayudará a que no se pierdan noticias importantes por el solo hecho de que quien la envío lo hizo incorrectamente.

Copia/plagio:

Este voto negativo está pensado para aquellos envíos que enlazan a contenidos que han sido copiados literalmente de otro sitio web o blog.

"Fusilar" artículos es una actividad indeseable y desde Menéame haremos lo posible para evitarla, intentando que siempre seenvíe el enlace original y se atribuya el mérito de cualquier historia a quien corresponda.

Autobombo:

Así se le suele decir al hecho de enviar una noticia propia. No hay que darle importancia mientras no sea spam evidente (información comercial o envíos reiterados a los mismos sitios), si la noticia es interesante o merece la pena, no importa quién la envíe. Si la noticia es irrelevante, spam, provocación, o errónea, será frenada por la comunidad pero que sea solamente autobombo no es razón para votarla negativamente, intenta no prestar atención a quien envía la noticia, lo que importa es su calidad.

Otros servicios similares son Fresqui (http://fresqui.com/) y Bitácoras (http://bitacoras.com/), este último pensado para los blogs.

En todos ellos lo más importante es que el criterio para que una noticia o historia sea más o menos popular depende principalmente de los votos de sus usuarios.

Módulo 2: Herramientas tecnológicas de comunicación Tema 14: El Community Manager

191 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

TEMA 14: EL COMMUNITY MANAGER 1. Introducción a la figura del Community Manager.

La figura del Community Manager es uno de los temas estrella de la actualidad debido al avance que las empresas están haciendo en el uso de los Social Media.

Aparece este nuevo perfil profesional como responsable de la participación de la empresa en estos medios, distintos en naturaleza a los medios tradicionales o "mass media" en los que la empresa difunde su mensaje al mercado y a sus clientes, sin que estos puedan hacer otra cosa que asimilar esa información.

Sin embargo, los usuarios han encontrado en los Social Media una forma de cambiar esta unidireccionalidad de la comunicación. Ahora ellos también pueden y quieren aportar su punto de vista, generando una relación directa con las empresas.

Para administrar esa relación se requiere de un perfil especializado, que muchos llaman Community Manager.

La presencia de un Community Manager debe entenderse como un enfoque relacional de la empresa con sus clientes. Conseguir crear una comunidad alrededor de su marca o productos es el propósito principal de esta relación, ya que ello conllevará otros resultados más concretos, como el aumento de las ventas, desarrollo de productos, la fidelización de los clientes o la mejora en la reputación empresarial.

De ahí la importancia del Community Manager. Se trata del profesional encargado de crear, dinamizar y atender a dicha comunidad de usuarios y de sacar valor de ella.

"Es la voz de la empresa de puertas hacia fuera y la voz de los clientes de puertas hacia dentro".


192 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Durante las lecciones anteriores hemos presentado un ecosistema o entorno en el que labrar esa "comunidad de fans o de consumidores" a través de los Social Media. Ahora es el momento de centrarse más en la figura del profesional que se encargará de ello.

¿Sabemos qué características debe tener un buen Community Manager? ¿Cuáles deben ser sus atribuciones o funciones? Se trata de un perfil profesional muy nuevo, por lo que a veces se hará difícil establecer un criterio único.

Sin embargo y por encima de todo, el aspecto relacional debe ser la principal característica que define al Community Manager. Esta figura tiene alrededor de ella otros asuntos que a todos nos vienen a la cabeza, como la tecnológica o el marketing, pero no debe olvidarse que lo más importante es la relación con el cliente.

Como se extrae del Manifiesto Cluetrain: "Los perdedores solo ponen en marcha sitios web. Los ganadores, comunidades vibrantes, ecosistemas".

2. Profesiones relacionadas con lo social media

Aunque profesión más conocida en relación a los Social Media es el de Community Manager, existe un conjunto de "nombres rimbombantes" que han nacido relacionados con la presencia de una empresa en Internet.

Sin querer entrar en la conveniencia entre utilizar uno u otro término para describir distintos perfiles profesionales (la mayoría de ellos siempre en inglés y muy nuevos),


193 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

es conveniente distinguir al menos dos ámbitos de actuación de las empresas en los Social Media: el ámbito estratégico y el ámbito operativo.

En el ámbito estratégico podemos encontrar la figura del Social Media Strategist. Se trata de un perfil profesional encargado de establecer la estrategia que seguirá la empresa con los Social Media.

Este profesional es el que se encarga de establecer los objetivos y plantear los medios para cumplirlos, recursos, presupuestos, etc. ¿Qué canales utilizar? ¿Con qué propósitos? ¿Qué características tendrá el mensaje que difunde la empresa? Su punto de vista no es tanto de comunidad sino más bien corporativo y a largo plazo. Identifica las necesidades y oportunidades para la empresa y describe las acciones a realizar, pero no las llevará a cabo él directamente.

Analiza resultados y se encarga de encauzar la estrategia si es necesario.

Por su parte el Community Manager se encarga del ámbito más operativo. Atendiendo a los objetivos y a la estrategia que ha establecido el perfil anterior, es el responsable de llevarla a cabo y conseguir los resultados deseados.

Para ello, enfoca su actividad en la comunidad, se encarga de poner los medios para que surja, de dinamizarla, de atender a los participantes en el día a día. Tiene la importantísima responsabilidad de representar a la empresa en la comunidad y, a su vez, de representar a la comunidad en el interior de la empresa.

En las PYME es habitual encontrar que ambos perfiles son llevados a cabo por la misma persona; mientras que en agencias de marketing o en empresas más grandes es más fácil encontrar esta distinción. En cualquier caso debe quedar claro que son tareas distintas e importantes.

Debido a las características únicas de estos nuevos perfiles profesionales, también existen diferencias entre las empresas a la hora de ubicarlos.

En la mayoría de los casos se trata de profesionales circunscritos al departamento de comunicación o marketing (si están diferenciados, normalmente más en el primer departamento); mientras que en menor medida se encuadran en el departamento de tecnología o de innovación.

Todo esto nos da a entender que estamos estudiando un contexto muy nuevo y en evolución constante, además de estar relacionado con varios departamentos de la empresa.

Nos interesa conocer cuáles son las características que deben tener las personas que realizan esta función. Para ello, vamos a utilizar el estudio realizado en el año 2009 por la asociación AERCO-PSM (Asociación Española de Responsables de Comunidad y Profesionales Social Media) y la agencia Territorio Creativo.

Aunque ya tiene algunos años, sigue siendo perfectamente válido, describiendo las siguientes aptitudes del Community Manager.


194 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Aptitudes técnicas:

• Conocimiento sectorial: aunque no tiene por qué ser experto en el negocio de la empresa a la que representa, sí que debe tener los conocimientos suficientes del sector y de la empresa para afianzar la credibilidad y la reputación de esa empresa.

• Conocimientos de marketing, publicidad y comunicación corporativa: para entender los objetivos del negocio y alinearlos con las acciones que realice.

• Redacción: debe escribir bien y le debe gustar hacerlo.

• Un punto "geek": pasión por las nuevas tecnologías, por Internet y, en general, por todo lo relacionado con la Web 2.0. Probaraplicaciones nuevas debe ser una tarea habitual.

• Creatividad: para sobresalir de un mundo en el que abunda la información.

• Experiencia en comunicación online: conoce los canales más adecuados y tiene buenos contactos en Internet.

• Cultura 2.0: conoce los valores y normas (netiqueta) que deben cumplirse en este medio.

• Conocimientos de SEO: Aunque no tiene por qué ser un experto sí que conviene que tenga conocimientos de las técnicas de posicionamiento en buscadores, principalmente porque va a generar contenido y ese contenido debe estar optimizado desde este punto de vista.

Habilidades sociales:

• Buen conversador: buen comunicador en general (saber escuchar y saber responder).

• Resolutivo: da respuesta de forma rápida y adecuada.

• Agitador: incentiva la participación para hacer de la comunidad un espacio vivo y dinámico.

• Empático: para ser capaz de ponerse en el lugar de los demás.

• Asertivo: tiene carácter y personalidad propia para defender sus opiniones frente a los demás, cuando llega el caso.

• Comprensivo: valora las opiniones del resto de participantes en la comunidad.

• Trabajo en equipo: coordinar, colaborar, compartir, etc.


195 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• Líder o cabecilla: lidera desde la participación y sabe encontrar líderes dentro de la comunidad.

• Moderador: se esfuerza por mantener un ambiente cordial entre todos los usuarios. Relajando tensiones, pero manteniéndose firme si debe eliminar determinados malos modos.

• Incentivador: plantea incentivos a los usuarios y detecta las carencias en la comunidad.

Actitud:

• Útil: buen compañero al que le gusta ser de ayuda para los demás.

• Abierto: entiende y aprecia la diversidad. Evita ser categórico.

• Accesible: es cercano en el trato.

• "Siempre disponible": vive en conexión permanente o frecuente a la red.

• Conector: detecta y facilita oportunidades, conectando a miembros de la comunidad entre sí.

• "Early adopter": le gusta estar a la última. Está atento a las tendencias más modernas.

• Evangelista: es un apasionado de la marca o empresa a la que representa.

• Defensor de la comunidad: representa a los clientes y usuarios ante la empresa.

• Transparente: en las normas y en la igualdad entre los usuarios.

Vemos que no solo se trata de conocer la tecnología o últimas tendencias en el mundo 2.0. Es un perfil mucho más completo que el de simple "agitador" de las redes sociales. Se trata de una figura con características de experto en aprendizaje y de relaciones públicas.

¿Tienes estas características? ¿Qué puedes hacer para eliminar tus carencias?

La netiqueta es un conjunto de normas de conducta que rige la actividad en Internet. Existe "de facto", es decir, nadie ha impuesto estas reglas como tales (ya que no se puede hacer), pero sí que se reconocen como reglas convenientes para una buena comunicación y actividad en Internet.

No se trata de reglas que hayan aparecido conjuntamente con la Web 2.0, ya que desde hace mucho tiempo existen en el ámbito del correo electrónico, de los foros, chat, etc. Sin embargo, con la aparición de la Web 2.0 y de los Social Media, se han ido ampliando.


196 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

El Community Manager debe conocer y respetar estas normas; así como hacerlas conocer y hacerlas cumplir por el resto de participantes de la comunidad.

Aunque han aparecido muchas versiones de lo que se conoce como netiqueta, suele considerarse el libro "Netiquette" de Viriginia Shela la versión más completa de este conjunto de reglas. El libro ya tiene bastantes años (es de 1994), aunque las 10 reglas que establece como básicas siguen siendo válidas hoy en día:

Regla 1: Nunca olvides que la persona que lee el mensaje es humana, con sentimientos que pueden ser heridos.

Regla 2: Adhiérete a los mismos estándares de comportamiento online que sigues en la vida real.

Regla 3: Escribir todo en mayúsculas se considera como gritar y dificulta la lectura.

Regla 4: Respeta el tiempo y el ancho de banda de los demás.

Regla 5: Muestra el lado bueno de tu persona mientras te mantengas online.

Regla 6: Comparte tu conocimiento con la comunidad. Comenta, enlaza, cita la fuente.

Regla 7: Ayuda a mantener los debates en un ambiente sano y educativo.

Regla 8: Respeta la privacidad de terceras personas.

Regla 9: No abuses de tu poder.

Regla 10: Perdona los errores ajenos.

Adicionalmente podemos incluir los siguientes consejos:

• Escribe correctamente: atiende a la ortografía y a la gramática, no solo porque proporcionarás una mejor imagen de tu empresa y de ti mismo, sino porque facilitarás la lectura de los demás.

• Enfatiza las emociones: a veces es difícil representar las intenciones o emociones con las que escribimos. Puedes utilizar los emoticonos para evitar malas interpretaciones.

• Mantén la corrección política: pensar antes de escribir y evitar palabras o actitudes que pueden ser ofensivas para otros usuarios desde puntos tan personales como la religión, la política o la sexualidad.

Son reglas y valores que entendemos lógicos en la vida real pero que a veces se olvidan en el entorno online. El Community Manager no puede hacerlo, ya que es el responsable de la buena gestión de la comunicación en la comunidad online

Módulo 2: Herramientas tecnológicas de comunicación Tema 15: Fundamentos del marketing digital

197 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

TEMA 15: FUNDAMENTOS DEL MARKETING DIGITAL

1. ¿Qué es el marketing digital?

El Marketing Digital consiste en usar las tecnologías de la información basadas en Internet y todos los dispositivos que permitan su acceso para realizar comunicación, con intención comercial entre una empresa y sus clientes o potenciales clientes.

Internet pone los clientes a disposición de las empresas a un clic de distancia. NO operar en esta plataforma supone una amenaza y el hacerlo supone una oportunidad de negocio.

Muchas empresas piensan que el marketing en Internet sólo implica a aquellas empresas que se dedican al comercio electrónico o cuentan con una oferta de productos o servicios susceptibles de venderse por Internet. Hay que ser conscientes de que cada vez más personas pasan más tiempo en Internet, utilizando dicho medio como única fuente de información global. Así, los buscadores web están sustituyendo a las tradicionales Páginas Amarillas en papel, de forma que si no tenemos presencia en la Red, es como si no existiéramos para una gran mayoría de personas. Internet nos ofrece una gran oportunidad a la hora de conseguir potenciales clientes, independientemente del tipo de negocio que dispongamos.

Internet está cambiando nuestra forma de actuar y de pensar, y este cambio también se ha producido en los hábitos del consumidor actual. Todos estos cambios en las mentes de nuestros potenciales clientes se han producido en un espacio de tiempo relativamente muy corto.

Algunas de las características de las nuevas actitudes de nuestros clientes son:

• Es más independiente.

• Está más y mejor informado (buscan y comparan más). No perdonan los fallos.

• Cada vez más habituado a utilizar INTERNET en sus procesos de compra.

En resumen, el cliente tiene todo el poder.

2. Ventajas sobre el marketing tradicional

Las principales ventajas del Marketing en Internet para las empresas respecto al marketing tradicional son:

El Marketing Digital es medible


198 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

La gran ventaja entre el marketing tradicional y el online es que en el online puedo medir el impacto, a quién estoy llegando, qué repercusión he tenido, cuestiones sumamente importantes para comprobar el éxito de mi campaña de marketing y así ver que retorno de la inversión he obtenido (ROI).

El Marketing Digital es más económico

Otra ventaja del marketing digital es la económica, mientras que en los medios tradicionales de publicidad como prensa, radio o televisión, los precios siguen siendo elevados para una pequeña y mediana empresa, los costes en Internet son relativamente bajos y medibles, por lo tanto se puede hacer un mejor control del presupuesto.

El Marketing Digital tiene capacidad de segmentación

Este es otro de los puntos fuertes del marketing en Internet frente al tradicional puesto que en Internet podemos definir mejor a qué tipo de cliente vamos a dirigir nuestro mensaje y así centrar nuestra publicidad en los potenciales clientes.

El Marketing Digital es más rápido y flexible

Nuestras campañas de marketing en Internet se pueden ejecutar en un periodo relativamente corto y son más flexibles a la hora de introducir algún cambio inesperado dentro de nuestro plan de marketing frente al marketing tradicional que es más estático a la hora de gestionar estos cambio

3. Barreras del Marketing Digital

Algunas pequeñas y medianas empresas todavía son reacias a incorporar el Marketing en Internet. Entre las principales barreras que las pequeñas y medianas empresas encuentran a la hora de gestionar su presencia online, destacan: el desconocimiento del medio, experiencia nula, ausencia de formación y falta de tiempo.

La mejor manera de solventar estas barreras por parte de las empresas es la formación previa, que se puede realizar de diversas formas: con información publicada en Internet, mediante libros publicados por expertos, o a través de cursos de formación impartidos por empresas especialistas en marketing online.

Pero muchas veces, y en especial cuando el problema es la falta de tiempo, lo mejor es delegar la presencia online a una empresa especializada que desarrolle toda la campaña y estrategias a seguir. Así podremos centrarnos en las partes del negocio que dominamos, haciendo una mejor gestión de tiempo y de los recursos dentro de nuestra empresa.


199 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

4. Aspectos legales que deben tenerse en cuenta

El marco legal que debemos tener cuenta es:

• Ley 34/2002, de 11 de julio, de Servicios de la Sociedad de la Información y de Comercio Electrónico (LSSI).

• Ley Orgánica 15/1999, de 13 de diciembre de Protección de Datos de Carácter Personal (LOPD).

• R.D. 1720/2007, de 21 de diciembre, de Desarrollo de la LOPD. Ley 32/2003, de 3 de noviembre, General de Telecomunicaciones (LGT).

La anterior legislación afecta de una manera muy directa a ciertos aspectos básicos de nuestra presencia online:

• A nuestra página web, que debe incluir un “aviso legal” donde se informe sobre ciertos datos del titular de la misma.

• A los contenidos que publiquemos en nuestra presencia online, como por ejemplo fotografías de terceros protegidas por la propiedad intelectual.

• A nuestra tienda online, que debe incluir información sobre condiciones de contratación, proceso de compra, devolución, etc.

• A los datos que recopilemos mediante cualquier medio online, que deberá cumplir con la normativa referente a la protección de los datos personales.

• A nuestras acciones publicitarias, en especial mediante el envío de mensajes cortos (SMS) y correos electrónicos masivos, evitando realizar SPAM (mensajes no autorizados) con objeto de ofertar, comercializar o tratar de despertar el interés respecto de nuestros productos o servicios.

Módulo 2: Herramientas tecnológicas de comunicación Tema 16: Tendencias en marketing digital

200 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

TEMA 16: TENDENCIAS EN MARKETING DIGITAL

Las tendencias en marketing online van cambiando a diario y, por tanto, es preciso tener en cuenta las últimas novedades en las estrategias comerciales a la hora de vender nuestros productos o de hacer alguna campaña de comunicación. El marketing online es la forma de poder llegar de una manera más fluida y efectiva a nuestro público objetivo.

Es fundamental que nuestra empresa esté presente en Internet porque es un escaparate al mundo en el que podemos estar abiertos 24 horas al día los 365 días del año.

Otra gran ventaja de Internet es que da igual el tamaño de nuestra empresa. Podemos competir con corporaciones mucho más grandes sin necesidad de grandes inversiones, ya que Internet nos permite aparentar un mayor tamaño y llegar a más mercados y clientes potenciales.

Algunas de las herramientas de marketing online más usadas por las empresas en la actualidad son: las redes sociales (ya sean generalistas o especializadas), los blogs, la publicidad en buscadores, el marketing para móviles, el posicionamiento en buscadores y el marketing mediante el envío de emails.

• Social Media marketing

Redes Sociales y Profesionales

Las Redes Sociales son el elemento más destacado de la Web 2.0, en detrimento de la Web 1.0 donde al usuario se le presentaba la información sin poder cambiarla. Antes las empresas usaban sus páginas webs para dar información sobre las compañías y sobre sus productos y servicios.

Sin embargo, en la Web 2.0 los sitios web actúan más como puntos de encuentro, permitiendo la participación activa de los usuarios, mediante opciones que dan al usuario la capacidad administrar sus propios contenidos (vídeos, imágenes, textos, etc.), enviar y recibir información con otras personas, y opinar sobre otros. La información se puede presentar en varias formas (escrita, audiovisual), y se permite que el usuario cree su propio contenido. En este nuevo entorno las empresas deben conversar, ya no basta con comunicar y esperar la respuesta de sus clientes. Ahora se necesita conversar con éstos y que nos ayuden a conocer la utilidad de nuestros productos y servicios, que nos transmitan sus vivencias en el uso y que nos ayuden a innovar y a adaptarlos para satisfacer sus necesidades.

Por lo tanto, las características principales de las Redes Sociales son:


201 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• El intercambio permanente de información.

• La inmediatez de este intercambio.

• Las relaciones entre los usuarios como elemento clave.

Y las ventajas para cualquier empresa de una presencia en Redes Sociales, son:

• Mayor posibilidad de acercarse a su target de cliente.

• Mejora en la comunicación empresa-cliente, que tiene un flujo en los dos sentidos.

• Mejora en la medición de las acciones comerciales y de investigación.

• Mejora en la eficacia comercial, por la mayor credibilidad de las recomendaciones de terceros frente a la publicidad en medios tradicionales y por la actitud de los usuarios, que son receptivos a los mensajes de las marcas.

• Mejora en la segmentación de clientes, porque permite realizar una microsegmentación (datos personales, de contacto, etc.).

Dentro del gran número de Redes Sociales existentes, podemos clasificarlas en 2 grandes grupos:

Horizontales

Son las redes en las que no hay un tema específico y la gente participa para socializarse, por ejemplo Facebook, Twitter, Tuenti, etc.

Verticales

Son las redes que tratan temas específicos, la gente participa para conversar sobre un tema muy concreto, y se pueden dividir a su vez en 2 tipos: profesionales, como Linkedin, o de ocio, como Moterus.

Marketing en Facebook

Facebook es una red social que conecta a gente con sus amigos. La gente utiliza Facebook para mantenerse al día con sus amigos o compañeros compartiendo fotos, enlaces, vídeos, etc. Cualquier persona puede hacerse miembro de Facebook, lo único que necesitas es una dirección de correo electrónico.

Para empezar a utilizar Facebook desde el punto de vista empresarial, lo mejor es crear una página de empresa. Porque a las funciones habituales de Facebook se la añade la posibilidad de tener estadísticas sobre los usuarios y aparecer en los resultados de buscadores como Google. Los pasos a seguir son los siguientes:

Paso 1: Configura tu página http://es-es.facebook.com/pages/create.php

Una vez que hayas creado tu página, el siguiente paso es lograr que refleje la misión de tu negocio y tus productos.

Foto: Utiliza una foto llamativa y fácil de reconocer del nombre, fachada o producto más popular de tu negocio.


202 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Información: Escribe una nota publicitaria breve que describa claramente en qué consiste tu negocio y añade enlaces útiles e información de contacto.

Publicaciones en el muro: Agrega periódicamente actualizaciones, fotos, videos y enlaces sobre tu negocio en tu muro. Estos aparecerán en la sección de noticias, donde tus fans y sus amigos podrán comentarlos y compartirlos.

Paso 2: Crea una estrategia para tu página

Tener un plan te ayudará a crear un mensaje auténtico y coherente para tu página, de forma que tus fans sepan qué esperar.

Establece algunos objetivos: Utiliza tus objetivos para darle forma al contenido de tu página y asegúrate de que es útil y relevante.

Comparte contenido exclusivo: Publica fotos, videos, menús u otros avances de productos nuevos y eventos.

Revisa tu página a diario: Dedica entre 5 y 10 minutos cada día a publicar actualizaciones y responder a comentarios.

Crea un calendario de conversaciones: Te ayudará a recordar cuándo, dónde y qué publicar.

Paso 3: Construye tu comunidad

Existen varias maneras para darte a conocer más y atraer más personas a tu página.

Utiliza lo que tienes a tu alcance: Agrega llamadas a la acción como Haz clic en el botón “Me gusta” en Facebook en letreros dentro de tu tienda, correos electrónicos y tarjetas de visita.

Utiliza los anuncios e historias patrocinadas de Facebook: Llega a la audiencia idónea para tu negocio, así como a sus amigos, y multiplica tu marketing de boca en boca.

Incluye el botón “Me gusta” en tu página: Haz que las personas puedan decir que les gusta tu página, incluso cuando no están en Facebook.

Paso 4: Crea campañas promocionales

Todas las promociones, concursos o regalos deben realizarse a través de alguna aplicación en la plataforma Facebook (http://www.facebook.com/promotions_guidelines.php). No se permite hacerlas en el muro.

La pestaña de la aplicación o landing page se encontrará dentro de la página de la empresa y en ella debe figurar la promoción, su funcionamiento e incentivo.

http://www.facebook.com/promotions_guidelines.php


203 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Para ir a la aplicación y participar en la promoción es necesario que el usuario de al “Me gusta”.

Esta pestaña debe ser atractiva para el usuario y con un botón bien grande para entrar a participar en la aplicación.

Es muy importante redactar y publicar unas normas o bases de participación para evitar quejas o posteriores reclamaciones. Las promociones y concursos dinamizados en las redes sociales son la última fuente generadora de crisis de imagen en este nuevo universo 2.0.

Paso 5: Aprende y crece

Revisa los datos del panel de estadísticas con frecuencia para saber:

• Cómo está funcionando tu página.

• Qué día de la semana te visitan más personas. Con qué frecuencia publican comentarios.

• Qué publicaciones son las que despiertan más interés. Cómo mejorar la estrategia de tu página.

• Utilizar al máximo el material audiovisual que podamos realizar de nuestras instalaciones. Colgar fotografías y videos de eventos que hayan sido realizados allí y fotografías de todas las posibilidades que encierran nuestro establecimiento o negocio.

A continuación, se describe el potencial y la manera en que se puede aprovechar la red social Facebook para realizar campañas publicitarias.

Facebook es actualmente la red de moda y la que concentra a un mayor número de usuarios. Su gran crecimiento la ha convertido en una de las plataformas publicitarias online más interesantes para cualquier empresa.

Las ventajas de la publicidad en Facebook son varias:

• Permite llegar a nuestro público objetivo al poder segmentar por ubicación, edad e intereses.

• Control del presupuesto. Permite configurar un presupuesto diario ajustable en cualquier momento.

• Permite probar entre anuncios de imagen y de texto, usando el que más funcione.

• Escoger la forma en que se desea pagar: cuando los usuarios hagan clic (CPC) o cuando vean el anuncio (CPM).

A la hora de realizar una campaña publicitaria en Facebook, los pasos a seguir son:

1º. Identificar las metas: definiendo qué hay que promocionar y las metas a alcanzar. Algunos ejemplos de metas serían:

• Conseguir 300 fans más, invitando a las personas a hacer clic en el botón “Me gusta” de nuestra página a cambio de incentivos.


204 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• Generar un 40% más de ventas, ofreciendo ofertas especiales para nuestra tienda online.

2º. Definir nuestro público objetivo: identificando los perfiles de las personas a las que tiene que llegar el anuncio. Seleccionar los criterios de acuerdo con sus intereses, en lugar de con lo que podrían estar buscando para comprar. Se pueden establecer criterios de segmentación por: ubicación, idioma, educación, trabajo, edad, sexo, gustos, fecha de cumpleaños y situación sentimental.

3º. Diseñar un anuncio llamativo. Para ello algunos consejos son:

• En el título incluir el nombre del negocio o página, una pregunta, o bien, información clave.

• En el texto, invitar a la audiencia a realizar una acción. Ser claro y resaltar los beneficios que se obtendrán.

• Utilizar una imagen sencilla y llamativa que se relacione con el título y el texto.

• Actualizar los anuncios con imágenes y textos nuevos para evitar que la gente pierda el interés.

4º. Administrar el presupuesto: para ello se aconseja:

• Determinar un presupuesto total y diario que permita alcanzar de manera eficiente al público objetivo.

• Escoger si se quiere pagar por clic (CPC) o por impresión (CPM).

• Fijar un precio para la puja de los anuncios, porque los precios que están dispuestos a pagar los anunciantes varían con frecuencia, así que hay que seleccionar una puja que esté dentro del intervalo sugerido.

5º. Revisar y mejorar: el administrador de anuncios de Facebook ofrece gráficas e informes detallados para ayudar a mejorar el rendimiento de los anuncios. Es importante realizar un seguimiento tras lanzar las campañas para así crear, editar y optimizar los anuncios. Los parámetros a estudiar durante la campaña serán:

• Información sobre impresiones y clics de los anuncios. Edad, sexo y la ubicación del público de los anuncios.

• Observar períodos específicos para saber cómo ha evolucionado el rendimiento del anuncio tras realizar algún tipo de cambio o mejora.

• Identificar los anuncios que dan mayores resultados y revisar el público al que van dirigidos para determinar qué segmentos son los más receptivos al mensaje.

Más información sobre Facebook: http://www.facebook.com/business

El caso de éxito del centro comercial “La Maquinista”: La Maquinista es uno de los principales centros comerciales de Barcelona. Sin apenas presencia en Internet, protagonizó una campaña de marketing en redes sociales muy exitosa. Consiguiendo más de 70.000 fans en pocos meses a base de crear una serie de promociones que combinaban su perfil de Facebook con ir al centro comercial, lo cual no sólo permitió una elevada interactividad en la página de Facebook, sino también un aumento real de las visitas y de las ventas en el centro comercial.

http://www.facebook.com/business


205 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Marketing en Tuenti

Tuenti tiene unas peculiaridades que no tienen las demás redes: tienes que acceder por invitación, el tiempo de interacción entre plataforma y usuario es mucho mayor, así como la segmentación. Tuenti es local (España al menos de momento) y con un perfil de usuario entre los 14 y los 25 años.

Tuenti puede ser una buena herramienta de marketing empresarial si lo utilizamos para geolocalización. Si eres el propietario de una empresa, puedes dirigirte a “Tuenti Sitios” (http://sitios.tuenti.com/), entrar en tu cuenta (si dispones de ella) o, de lo contrario, buscar tu empresa, hacer clic sobre el botón “Reclamar este sitio” y una vez seas verificado como propietario del Sitio, Tuenti te hará llegar una pegatina con la que puedes promocionar tu Sitio de Tuenti. Cada vez que un usuario en Tuenti añada tu Sitio, escriba una opinión o suba una foto, tu empresa aparecerá en el tablón de sus amigos y más personas tendrán la oportunidad de conocerla. Cuanto mayor es la comunidad de usuarios que hablan sobre tu Sitio, mayor es tu visibilidad y mayor el número de usuarios al que puedes hacer llegar tus novedades.

Tuenti es una red social a tener en cuenta como importante canal para la realización de campañas publicitarias debido a su público objetivo. Si nuestro negocio está orientado a personas jóvenes esta red social puede ser una de las más idóneas.

La forma de realizar publicidad en Tuenti es muy parecida a la explicada en Facebook. Los anuncios se adaptan a los usuarios, de forma que los anunciantes eligen a qué tipo de personas van a enviar su publicidad.

Los anuncios de Tuenti procuran no estorbar al usuario. Por ejemplo, el anuncio inicial se quita inmediatamente sin necesidad de pulsar ninguna opción. Los anuncios patrocinados aparecen en la izquierda como si fueran eventos, y los videos no se reproducen automáticamente. Esto genera más interés real de los consumidores en el anunciante, ya que los desinteresados no están obligados a visualizar el anuncio.

Los productos publicitarios de Tuenti permiten comunicarse con los usuarios ofreciendo productos que sean relevantes para ellos sin saturarlos. A los anunciantes se les permite segmentar campañas, interactuar con los clientes, generar diálogo e incrementar la notoriedad de las marcas. Algunos de los productos son:

Evento patrocinado: permiten integrar la campaña en la página de Inicio del usuario y, obtener así una experiencia interactiva y una alta propagación. Los usuarios participan activamente en su interacción con la marca, compartiendo y propagando el evento entre sus amigos. Los eventos tienen las siguientes características:

• Dirigidos a determinados usuarios

• Segmentación sociodemográfica (sexo, edad, provincia) Capacidad de incorporar contenido creativo, tests y aplicaciones El cliente puede revisar los comentarios

• Posibilidad de integrar vídeo

• Estadísticas de interacción y propagación

http://sitios.tuenti.com/


206 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Página de bienvenida: diseñada para crear una concienciación sobre la marca y generar interés. El mensaje publicitario se muestra mientras se carga la página de Inicio del usuario. Una vez cargada la página, queda como recuerdo un enlace en la página principal del usuario. Es un formato especialmente indicado para generar impacto visual en una campaña. Las páginas tienen las siguientes características:

• Dirigidos a determinados usuarios

• Segmentación sociodemográfica (sexo, edad, provincia) Posibilidad de personalizar el mensaje con el nombre del usuario

• El inventario exclusivo asegura que tu mensaje no se agolpe con otros.

Página de bienvenida con vídeo: diseñada para crear una concienciación sobre la marca y generar interés. El mensaje publicitario se muestra mientras se carga la página de Inicio del usuario. Una vez ha cargado la página, el vídeo de la campaña se muestra en la parte inferior de la pantalla del usuario, en el formato de reproductor estándar. Esto crea un contacto directo entre la marca y el usuario, permitiendo a los usuarios marcar este vídeo como favorito, al igual que pueden hacer con cualquier otro contenido de Tuenti, y compartirlo con sus amigos. Este formato pone en práctica una experiencia multimedia completa que, además, se puede asociar a un evento patrocinado para completar la efectividad de la campaña publicitaria. Las páginas tienen las siguientes características:

• Posibilidad de ver quién ha participado con tu contenido

• Segmentación sociodemográfica (sexo, edad, provincia) Posibilidad de personalizar el mensaje con el nombre del usuario

• El inventario exclusivo asegura que tu mensaje no se agolpe con otros.

• Enlaces directos a eventos patrocinados

Más información sobre Tuenti: http://blog.tuenti.com/

Marketing en Twitter

Twitter es una herramienta de marketing que llega a los clientes y consumidores de manera rápida y sencilla. Se produce una comunicación bidireccional entre nuestros clientes y nuestra empresa. Como negocio, puedes usar Twitter para compartir rápidamente información, reunir información crítica y perspectivas de mercado, y construir relaciones con personas que tienen interés en tu negocio. También es una buena herramienta para informar sobre promociones, noticias y novedades.

Para empezar a utilizar Twitter desde el punto de vista empresarial, los pasos a seguir son los siguientes:

• Paso 1: Configura tu cuenta http://twitter.com/

Foto: Utiliza una foto llamativa y fácil de reconocer del nombre, fachada o producto más popular de tu negocio.

Información: Escribe una nota publicitaria breve que describa claramente en qué consiste tu negocio, y añade enlaces útiles e información de contacto.

http://blog.tuenti.com/

http://twitter.com/


207 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Recursos: Deja a los visitantes de tu sitio web saber cuál es tu perfil de Twitter con un botón de "Síguenos en Twitter", o incluye un Widget en tu sitio que muestre tus últimos Tweets. Esto mantendrá a tus visitantes interesados en tu empresa y leyendo las últimas novedades.

• Paso 2: Consejos para la estrategia en el uso de Twitter

Compartir información para reforzar nuestra credibilidad: Si celebramos seminarios, o encuentros gratuitos, podemos ir anunciándolos e invitar al usuario a registrarse.

Resaltar lo especial: Twitter nos permite compartir las últimas noticias y eventos relacionados con nuestra actividad.

Buscar oportunidades de negocio: Podemos usar Twitter para atraer tráfico a nuestra página y ofrecer información útil para posibles clientes. En este caso, es mejor centrarnos en crear relaciones que intentar forzar la venta directa.

Comunicarnos con nuestros empleados: Twitter funciona muy bien como herramienta de colaboración, y puede ahorrarnos tiempo y dinero. Podemos sustituir correos y llamadas por “Tweets” que informen a nuestros clientes de lo que queremos transmitirles.

Ofertas especiales y promociones: Twitter nos ofrece un canal bidireccional de promoción.

Recibir comentarios de nuestros clientes: Al aceptar comentarios de los clientes en abierto, otros posibles clientes verán qué clase de empresa somos. Twitter nos permite responder rápidamente para cerrar cualquier servicio que no funcione bien o responder ante cualquier queja recibida.

Interacción con la competencia: Podemos leer los “Tweets” de nuestros competidores y estar en contacto con ellos, hecho que rara vez sucede en el mundo real.

Desarrollar fidelidad de marca: Con Twitter podemos mantenernos siempre en contacto con nuestros seguidores. Todos estos usuarios son clientes en potencia, por lo que la relación con ellos nos ayudará a proporcionarles más información sobre nuestros servicios y reforzará su lealtad hacia nuestra empresa.

• Paso 3: Construye tu comunidad

Twitter sirve para expandir nuestra red de contactos. En Twitter podemos apuntarnos a grupos relacionados con nuestra actividad profesional y obtener información interesante, así como establecer relaciones con posibles clientes y socios. Al crear una cuenta de Twitter, daremos una imagen de accesibilidad e invitaremos a nuestros clientes a comunicarse con nosotros. Twitter más que una red social es una herramienta de comunicación.

Twilert, el complemento ideal de Twitter para saber qué hablan de nosotros


208 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Existen múltiples aplicaciones que, utilizadas de forma conjunta con Twitter, permiten explotar sus funcionalidades. Un ejemplo es Twilert, una sencilla pero muy útil herramienta que nos permite monitorizar lo que se dice de nuestra marca o cualquier otra palabra clave que nos interese en Twitter. Con Twilert podemos hacer un seguimiento de las veces que se twittea el nombre de nuestra marca, nuestro propio nombre de usuario, un enlace concreto, etc. enviando a nuestro email los tweets emitidos con las palabras claves seleccionadas. Las alertas las recibiremos de manera diaria o semanal, según cómo lo hayamos configurado.

El uso de Twilert es gratuito aunque requiere el registro de una cuenta, pero es muy rápido, pues se hace con el usuario y contraseña de una cuenta en Google o de la de Twitter. Para configurarlo hay que seguir los siguientes pasos:

• Paso 1: acceder a http://www.twilert.com o instalar aplicación para el navegador Google Chrome que permite ver los resultados y manejar la cuenta mientras se está conectado desde Google, lo que lo hace mucho más fácil. Para instalarla hay que acceder a https://chrome.google.com/webstore y buscar la aplicación “Twilert”.

• Paso 2: introducir nuestra cuenta de Google o Twitter.

• Paso 3: introducir la palabra clave que queremos monitorizar (pueden ser varias y también podemos seguir perfiles de Twitter) y luego indicarle al sistema cada cuanto queremos recibir un correo electrónico con el resultado del monitoreo. Así Twilert va almacenando las conversaciones que incluyen la palabra clave que estamos siguiendo o las menciones a determinado perfil y nos envía a la hora que programamos un email con todos esos datos. Una vez hayamos definido nuestras búsquedas (podemos incluir varias), las tendremos a nuestra disposición en la parte inferior del sitio, donde podremos editarlas o activarlas/desactivarlas.

Sin duda la gran ventaja de Twilert frente a otras herramientas de monitorización es su sencillez como herramienta de control, para estar al tanto de lo que se habla en Twitter acerca de nuestra marca. Porque el email sigue siendo el canal de comunicación preferido por muchos usuarios.

Más información sobre Twitter: http://business.twitter.com/

El caso de éxito de las aerolíneas JetBlue: Con motivo del 10º aniversario de las aerolíneas JetBlue se lanzó una campaña vía Twitter, cuyo resultado ha sido no sólo el aumento de seguidores en la red social, sino un gran número de accesos a la Web, además de una poderosa campaña de branding. Todo ello se ha conseguido con un presupuesto relativamente pequeño, 1.000 billetes de avión gratuitos desde la ciudad de Nueva York. La forma de hacerlo fue exclusivamente a través de Twitter. La aerolínea iba lanzando pistas sobre el lugar donde se entregarían los billetes de avión.

No sólo era importante ser de los primeros en llegar al punto de encuentro citado sino que había que ir acompañado de un objeto en concreto, anunciado vía Twitter. En este ejemplo se solicitaba a todos los asistentes que llevaran una prenda de color azul y algo relacionado con los aviones.

http://business.twitter.com/


209 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Marketing en LinkedIn

Linkedin: Según el estudio “Uso de Linkedin en España” elaborado por la Asociación Española de la Economía Digital (adigital), el 90% de los usuarios de Internet que participaron en el estudio declaran que en el ámbito profesional, Linkedin es la red social que más utilizan.

Linkedin es una red social que en España cuenta con ya con más de dos millones de miembros, mientras que en el mundo superaba en noviembre de 2011 los

135 millones. Se diferencia de redes sociales como Facebook, porque su objetivo principal es ayudar a los profesionales de todos los sectores a encontrar otros profesionales, ponerse en contacto con ellos, generar negocios y ampliar contactos en todos los sentidos: consultoría, asesoría, trabajo, colaboración, etc.

Los mejores usos para que las empresas se beneficien de Linkedin son:

• Conseguir nuevos clientes a través de recomendaciones online y de palabra: Los clientes satisfechos son la mejor fuente de nuevos clientes. Y una opción es pedir a clientes satisfechos que escriban una recomendación en tu perfil de Linkedin que será transmitida a toda tu red de Linkedin.

• Encontrar a los proveedores adecuados para encargarles servicios en áreas en las que no eres un experto.

• Construir una red de contactos para tu sector empresarial, online y en persona: Busca en el directorio de grupos de Linkedin para encontrar asociaciones de tu sector y redes en las que te interese participar. Además, Linkedin también da a conocer eventos populares en tu sector al anunciar eventos locales a los que tus conexiones van a asistir.

• Obtener respuestas a preguntas difíciles sobre tu negocio con un poco de ayuda de tus amigos reales: El apartado de “Preguntas y Grupos” de Linkedin te permite encontrar respuestas a esas preguntas desconcertantes rápidamente, recurriendo a la sabiduría de tu red.

• Atraer a nuevos clientes, respondiendo a preguntas sobre tu especialidad: Utiliza los numerosos foros de Linkedin para compartir el conocimiento que has adquirido en el sector en el que te has especializado.

• Aumentar tu financiación: Puedes utilizar Linkedin para encontrar inversores potenciales o alguien que quiera ser tu mentor para la puesta en marcha de tu negocio.

• Crear una red de contactos con compañeros de sector para tener referencias de clientes: Los grupos de Linkedin son un medio interesante para encontrar compañeros en tu sector, contactar con ellos y encontrar negocios complementarios al tuyo con los que intercambiar referencias de clientes.

• Convencer a tus clientes potenciales de tu experiencia al compartir contenido relevante y único en tu blog: Las pequeñas empresas interesadas en crear un contenido único sobre su experiencia (ya sea a través de un blog o de una cuenta de Twitter) deberían vincularlo a su perfil de Linkedin.

• Mantener a tus amigos cerca y a tus competidores más cerca todavía: Más de 150.000 empresas tienen un perfil de su compañía en Linkedin, la “imagen pública” de las empresas. Estas páginas revelan estadísticas clave de las


210 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

empresas; a quién han contratado recientemente, y también quién es quién en el negocio.

Más información sobre Linkedin: https://ayuda.linkedin.com

Marketing en Xing

Es una red social de ámbito profesional como Linkedin. También se denomina plataforma de networking online, ya que su principal utilidad es la de gestionar contactos y establecer nuevas conexiones entre profesionales de cualquier sector.

Xing está concebido para empresarios, directivos, autónomos y profesionales que todavía se estén formando.

Es una plataforma muy parecida a Linkedin pero con algunas diferencias:

• En Linkedin la segmentación es mucho más eficiente.

• La privacidad en Linkedin es mayor, limitando más el acceso a nuestro perfil.

• En relación a la interacción, Linkedin permite a los usuarios de la cuenta básica crear grupos de opinión y subgrupos, mientras que en Xing sólo se permite el acceso y la interacción a grupos ya creados pero no se permite la creación de nuevos grupos desde la versión básica.

• En Linkedin no se puede invitar a cualquier usuario a ser parte de tu red.

Más información sobre Xing: http://www.xing.com/help/

Marketing en Blogs corporativos

Un blog corporativo es una bitácora publicada en Internet con el soporte de una empresa, con el fin de contribuir a que alcance sus objetivos corporativos, que pueden ser diversos: desde un blog concebido como una plataforma para mostrar nuestros productos y servicios que se puede actualizar en un espacio de tiempo corto hasta un blog orientado fundamentalmente a generar contactos para realizar networking o simplemente con el objetivo de que nuestra empresa sea más conocida como marca.

Publicar un blog corporativo es una estrategia de marketing con muchas ventajas. Es aconsejable que esté escrito por algún miembro de la empresa que domine el tema al que nos dedicamos y esa información que pongamos tiene que estar organizada por sectores. Es muy importante publicar con frecuencia, de manera planificada, siguiendo un estilo editorial, y con contenido de interés para el público.

Los beneficios de escribir un Blog Corporativo como herramienta de comunicación son varios, destacando: su bajo coste, indexación en buscadores y generación de proximidad.

A la hora de iniciar un blog corporativo hay que realizar un pequeño análisis de cómo lo hace la competencia, marcarse unos objetivos para el blog y escoger la persona de la empresa que se encargará de escribir en el blog de manera periódica.

Algunas direcciones donde poder abrir un blog de forma gratuita:


211 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

http://www.blooger.com

Ejemplos de blog corporativos para compartir experiencias: A modo de ejemplo, podemos referenciar blogs tan diversos como pueden ser el Blog Cascajares, empresa del sector agroalimentario y el Blog de Renault Consulting, empresa de consultoría operacional, que utilizan sus blog como canales de difusión paralelos a sus web corporativas al objeto de aportar información adicional sobre su sector de actividad, comunicar sus principales eventos, concursos, y, en general, compartir experiencias con sus usuarios.

Marketing en Foros

Un foro consiste en una página web dinámica donde se generan discusiones relativas a una serie de temas. Un usuario de la página comienza un tema y luego los demás usuarios van contestando o posteando sus respuestas o ideas al respecto, lo que se conoce como "posts"; en la mayoría de los foros incluso la persona que comenzó la discusión puede participar activamente con sus "posts", los cuales se despliegan secuencialmente.

Es importante estar al tanto de lo que se dice en los foros temáticos vinculados con nuestro sector de actividad sobre nuestro negocio, con esto conseguimos saber qué opina nuestra clientela actual o potencial sobre nuestros productos o servicios.

Pero la labor más importante que tenemos que hacer como empresa es dar respuestas de calidad como expertos a posibles dudas que surjan dentro del foro. Además, escribir en un foro puede servirnos para que esa entrada se posicione bien en los buscadores de Internet.

Marketing en Flickr

Flickr es uno de los servicios de publicación de fotos más utilizado en la web 2.0 mediante un sistema de archivo o álbum digital.

Las fotos son esenciales en la comunicación de nuestra empresa, porque transmiten emociones, principal motor de todo ser humano. Además Flickr sirve para atraer tráfico de la comunidad Flickr hacia tu web y también se puede usar la información de perfil para hacer publicidad de tu empresa. Pero, sin duda, una de las aplicaciones más directas es la de servir de catálogo digital de nuestros productos. Por ejemplo para una empresa de bisutería, venta de arte online, etc.

Marketing en Youtube

Youtube es la comunidad de videos más conocida a nivel internacional, donde los usuarios pueden visualizar, dejar comentarios y subir sus propios videos. Resulta una herramienta de gran utilidad gracias al poder de viralidad de los videos. También útil como repositorio para hacer videoblogs y para compartir con amigos de otras redes sociales.

http://www.blooger.com/


212 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Youtube es la plataforma perfecta para realizar acciones de videomarketing, disciplina del marketing que consiste en el uso de la imagen audiovisual a través de Internet para vender más y fidelizar al cliente. Sus ventajas son múltiples:

• Tener un comercial trabajando 24 horas al día 365 días al año.

• Permite ofrecer contenidos útiles, diferenciándonos de la competencia.

• Aumenta la credibilidad, en especial para sectores como el de la Hostelería al poder enseñar instalaciones de una manera más profunda o mostrar al personal de cocina elaborando ciertos platos.

• Permite captar la atención del cliente potencial.

• Con poca inversión se obtiene una mayor conversión de visitas en clientes.

• Permite llegar a un mayor número de clientes. Permite aumentar el tráfico hacia el sitio Web.

• Permite obtener un incremento en el tiempo de permanencia de la web.

• El cliente se convierte en prescriptor al compartir los vídeos.

Pero Youtube se puede convertir en plataforma de emisión de televisión, dando lugar a la Internet TV, que es la televisión distribuida vía Internet. El aumento de las velocidades de conexión a Internet, el avance de la tecnología, el aumento del número total de internautas en línea y la disminución en gastos de conexión, se ha hecho cada vez más común encontrar el contenido tradicional de televisión accesible libre y legalmente sobre Internet. Además, han aparecido contenidos de televisión solamente disponibles en Internet que no es distribuido vía cable, satélite o sistemas terrestres.

Las aplicaciones para una empresa son varias, aunque sin duda la más práctica es la de crear su propio canal televisivo especializado en su producto o servicio, como, por ejemplo, el Canal Cándido TV del famoso restaurante Cándido, que a pesar de ser una actividad tradicional no ha rechazado el uso de las nuevas tecnologías para sus acciones publicitarias.

El caso de Restaurante Cándido: A Restaurante Cándido Internet le ha permitido tener su propio canal de televisión a un coste muy bajo. El auge de los canales y blogs temáticos de cocina ha sido sin duda el origen de la idea. El canal de televisión de Cándido nos acerca no sólo la historia del restaurante a través del nieto del fundador, sino también nos permite acercarnos a su cocina mediante trucos y técnicas de cocina típica castellana. El sector de la hostelería, y en especial la restauración, es una de las actividades que más partido pueden sacar a éste tipo de canales de Televisión temáticos.

Marketing en Slideshare

SlideShare es una herramienta 2.0 que permite realizar presentaciones de diapositivas simplificando la elaboración, publicación y distribución de las mismas en estilo PowerPoint. Al ser fácil de usar y gratuito, se convierte en un recurso de gran utilidad para el entorno empresarial. Uno de los beneficios de esta aplicación es la posibilidad de convertir las presentaciones a formato flash, quedando las mismas disponibles desde un link de visualización dentro de la Web del servicio, al igual que


213 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

YouTube con los videos. Además, SlideShare cuenta con funciones de red social, puesto que permite comentar trabajos de otros usuarios, crear grupos de trabajo, eventos, etc. y permite integrar las presentaciones directamente al sitio Web de la empresa.

El Slideshare puede ser usado por nuestra empresa para subir desde presentaciones que realizamos para distintos eventos como congresos y seminarios, hasta informes de la empresa en cuanto a productos, calidad de servicio, reuniones de trabajo y diversos temas de interés general para luego poder incluir las presentaciones en los blogs internos y externos.

Marketing en Widgets

Los widget con sus posibilidades de distribución viral, su interactividad, la posibilidad de ubicuidad y la inmediatez se han convertido en una solución sustitutiva de los banners. Pero convertir un banner en un widget aunque aumenta la viralidad de la campaña, no explota todas las posibilidades del canal.

Los widgets son ampliaciones para páginas web (por ejemplo Google Maps y reproductores de vídeo como Youtube) que se deben utilizar para ofrecer servicios sobre los que el usuario pueda interactuar. Imaginar por un momento que en lugar de tener un banner que nos informa de una promoción tenemos un widget que nos permite reservar un viaje de esa promoción o realizar un presupuesto sin salir de la página donde estamos, aportando más valor a la empresa y al usuario final.

Un Widget para redes sociales te permitirá agregar en tu página web, la opción de compartir las distintas páginas web de tu sitio con distintas redes sociales como Facebook, Netlog, Del.icio.us, mySpace, y muchas más.

Creando un simple widget con las funciones de un lector de RSS, podemos distribuir los “post” de nuestras redes sociales dentro de nuestra web corporativa y difundir nuestros mensajes a un número mayor de usuarios.

• Mobile Marketing

El marketing móvil, o en inglés “mobile marketing”, es la realización de acciones de marketing dirigidas a dispositivos móviles, en especial a los teléfonos móviles.

La penetración de la telefonía móvil alcanza porcentajes muy altos. Según datos publicados en la tercera oleada del “Informe de Resultados Observatorio de Redes Sociales” elaborado por The Cocktail Analysis, un 69% de los usuarios consultados acceden a diario a través de sus móviles a las redes sociales, lo cual evidencia que es uno de los medios más efectivos para difundir un mensaje a gran cantidad de personas.

Los beneficios más notorios que se obtienen al ejecutar una campaña de marketing móvil son:


214 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• Economía: Se optimizan los procesos y reducen los costos de las empresas. El coste monetario de, por ejemplo, un SMS es muy inferior al de publicar en medios tradicionales.

• Tecnología: que permite la superposición sobre el entorno físico, en tiempo real, de información digital relevante (generada virtualmente y localizada en la red/nube), enriqueciendo la percepción de la realidad. Se explican con más detalle sus aplicaciones al marketing en el apartado 3.2.3 de este manual.

• Personalización: la tecnología permite enviar comunicaciones que contienen los datos personales del remitente, lo que contribuye a que exista una mayor identificación.

• Instantaneidad: permite a las organizaciones comunicarse de una manera muy rápida e inmediata, lo cual las vuelve cada vez más competitivas.

• Direccionalidad: permiten llegar a un público objetivo o clave que realmente esté interesado en adquirir el producto o servicio ofrecido.

• Segmentación: los receptores pueden ser clasificados según determinados criterios.

• Interacción: por medio de los mensajes de texto se pueden predecir las acciones que ejecutarán las personas en reacción al estímulo.

• Accesibilidad: los teléfonos móviles son utilizados por sus usuarios para estar en comunicación constantemente, desde cualquier lugar y en cualquier horario.

• La implementación de esta variante de marketing permite evaluar la efectividad y controlar el desempeño de la campaña en tiempo real.

• Los mensajes suelen quedar grabados en los buzones de los teléfonos móviles de los receptores.

Por todo lo anteriormente expuesto, queda claro que realizar una campaña basada en estrategias de marketing móvil, no solo es una manera novedosa de promocionar productos y servicios, sino que también resulta altamente efectiva.

Marketing por geolocalización

Inicialmente las principales campañas de comunicación consistían en el envío de SMS a través de teléfonos móviles. La popularización de los Smartphone (teléfonos inteligentes) y sus aplicaciones se han convertido en un gran revulsivo para el marketing móvil, aumentando de manera notable el potencial del mobile marketing, mediante la geolocalización (localizar un dispositivo fijo o móvil en una ubicación geográfica mediante coordenadas).

Millones de personas realizan búsquedas diarias en los mapas de los grandes buscadores, por ello, los principales buscadores están incidiendo cada vez más en la posibilidades que sus servicios cartográficos ofrecen a los negocios locales y han puesto a disposición de cualquier empresario o autónomo la posibilidad de crear


215 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

fichas gratuitas que localicen a sus empresas sobre el mapa para que las encuentren clientes potenciales.

Esta funcionalidad nos permite, como empresas, ofrecer al usuario lo que necesita en cada momento, desde encontrar un restaurante en una ciudad desconocida, hasta saber en qué tienda más cercana podrá acceder al producto que busca. Sin duda, la geolocalización es una de las grandes oportunidades que las nuevas tecnologías han brindado al marketing.

Algunas de las aplicaciones más populares para realizar marketing por geolocalización son Foursquare y Google MyBussines.

Foursquare

Foursquare tal vez sea el servicio de geolocalización más popular entre los usuarios de dispositivos móviles. Es un servicio basado en localización web aplicada a las redes sociales. La idea principal de la red es hacer "check-ins" en un lugar específico donde uno se encuentra e ir ganando puntos por "descubrir" nuevos lugares, que son recompensados con "badges", una especie de medallas. Las personas que más "checki-ns" realizan en un determinado lugar, alcanzan el título de "mayorship". La clave de su éxito es que mezcla el juego con las redes sociales, ya que permite a los usuarios compartir con sus contactos los lugares de su interés o, sencillamente, los sitios por los que pasa.

Para los comerciantes y otros negocios donde la georeferenciación resulta muy útil, Foursquare ofrece un conjunto de herramientas gratuitas para atraer nuevos clientes y mantener a los más fieles.

Para iniciarte en la Plataforma de Foursquare para empresas, sólo tienes que seguir estos tres pasos:

Reclama tu lugar: Inicia sesión y busca la página de tu empresa (buscando tu lugar), después haz clic en "Reclamar este lugar".

• Crea una Promoción: Después de reclamar tu lugar, puedes empezar a crear Promociones para conseguir nuevos clientes y fidelizar a tu clientela.

• Adapta tus campañas para maximizar tu negocio: Después de reclamar tu lugar, puedes empezar a crear Promociones para conseguir nuevos clientes y fidelizar a tu clientela.

El ejemplo de Taxi Oviedo: Uno de los casos de éxito más conocidos en el uso de Foursquare es el de Taxi Oviedo. Un taxista de la ciudad de Oviedo que ha sabido sacarle un gran rendimiento a Foursquare con una pequeña inversión: 24 euros por un vinilo con el logotipo de la plataforma. La campaña era muy simple, ofrecer un

10% de descuento a usuarios de Foursquare. Pero fruto de la viralidad de las redes sociales llegó a 500.000 potenciales clientes en sólo 72 horas.

Más información sobre Foursquare: https://es.foursquare.com/business

https://es.foursquare.com/business


216 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Google MyBussines

Google MyBussines es una aplicación gratuita de Google que sirve para crear una ficha gratuita de tu empresa. Cuando un usuario busque información local en Google Maps, encontrará tu empresa y la información disponible en tu ficha: dirección, horario laboral, e incluso fotos de productos o del escaparate.

Google MyBussines permite a comerciantes, vendedores y negocios locales mejorar su visibilidad en Internet al mostrar la realidad física de la ubicación. Lo que se traduce en una mayor notoriedad y flujo de visitas a su negocio. Además, y al recoger las opiniones de usuarios en webs de viajes, puede aumentar la conversión de visitas en reservas en el caso de Hoteles.

Marketing de proximidad. Bluetooth y NFC

Se trata de una nueva forma de publicidad dentro del marketing móvil que permite a las empresas ofrecer información sobre sus productos y servicios y también enviar contenidos habituales en los móviles como melodías, fondos de pantalla, juegos, vídeos o incluso canciones a todas aquellas personas que pasen junto a los puntos donde se establecen las antenas emisoras.

El Bluetooth garantiza que todos los receptores de los mensajes se encuentren cerca de los establecimientos, con lo cual se abre un nuevo mundo de posibilidades para contactar con posibles clientes. Esta tecnología permite enviar los mensajes hasta un máximo de 100 metros de distancia, con lo cual el impacto en una calle comercial con bastante tránsito puede ser muy alto.

El marketing por este medio sólo precisa que las personas tengan activada la conexión Bluetooth, una configuración que muchas tienen por defecto en sus terminales.

Realidad aumentada

La realidad aumentada (RA) es el término que se utiliza para definir la combinación de una visión del mundo real con elementos virtuales, lo que permite la creación de una realidad mixta en tiempo real. Consiste en un conjunto de dispositivos que añaden información virtual a la información física ya existente. Esta es la principal diferencia con la realidad virtual, puesto que no sustituye la realidad física sino que sobreimprime los datos informáticos al mundo real.

La creación de expectación a través de campañas de marketing en las que se utilice esta tecnología, crea no solo una ventaja diferencial sino una gran propagación con efecto viral. Gracias a esta tecnología podemos añadir información visual a la realidad existente, como por ejemplo visualizar en 3D una vivienda a partir de un plano.

Aunque existen diversas técnicas para aplicar la realidad aumentada (RA), la mayoría de acciones de marketing se basan en la superposición de información añadida a la imagen gráfica captada por la cámara de los teléfonos móviles.


217 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Actualmente se está utilizando tecnología de RA en el geoposicionamiento de comercios minoristas o tiendas físicas (con aplicaciones móviles como Layar), en demostración de pisos y oficinas a la venta, en anuncios publicitarios en prensa escrita e, incluso, en carteles o vallas publicitarias. La RA se está comenzando a difundir también en el sector editorial como parte de contenidos de revistas y periódicos y como complemento en libros de texto educativos.

Códigos QR

Los códigos QR son un tipo de códigos de barras bidimensionales en los cuales la información está codificada dentro de un cuadrado, lo que permite almacenar gran cantidad de contenido alfanumérico. Para leer o interpretar un código QR es necesario un dispositivo con cámara de fotos y un lector compatible. Normalmente, cualquier móvil inteligente dispone de ese dispositivo, mientras que la aplicación que sirve de lector depende del sistema operativo del teléfono móvil. Para conseguir la aplicación, por ejemplo para un iPhone, basta con conectarse a la App Store y descargar el lector de códigos QR i-nigma. En el caso de móviles con el sistema operativo Android, hay que conectarse al Google play storey descargar el lector Barcode Scanner.

Su capacidad para contener gran información y su facilidad de uso hace que sea una herramienta de promoción práctica para las pequeñas empresas. Cuando se escanea o se lee un código QR se puede acceder a vínculos de contenidos digitales en Internet, además de activar funciones del teléfono como correo electrónico, mensajería instantánea y SMS, enlazar a formularios, etc. Aunque en España su utilización todavía es bastante limitada, hasta que la penetración de los móviles inteligentes sea mayor en la gran parte de los usuarios.

Existen varios sitios para generar códigos QR y de forma gratuita. Uno de los que se pueden utilizar es: http://www.codigos-qr.com

Mensajería móvil

La mensajería móvil (SMS/MMS) es considerada como uno de los canales más intrusivos de publicidad. Al igual que con nuestras acciones publicitarias mediante email, hay que evitar realizar SPAM (mensajes no autorizados) con objeto de ofertar, comercializar o tratar de despertar el interés sobre nuestros productos o servicios. Las comunicaciones comerciales mediante medios electrónicos están reguladas y es necesario solicitar aceptación expresa de forma previa al envío de mensajes, cumpliendo el mismo marco legal que el de las campañas de emailing:

• Ley 34/2002, de 11 de julio, de Servicios de la Sociedad de la Información y de Comercio Electrónico (LSSI).

• Ley Orgánica 15/1999, de 13 de diciembre de Protección de Datos de Carácter Personal (LOPD).

• R.D. 1720/2007, de 21 de diciembre, de Desarrollo de la LOPD. Ley 32/2003, de 3 de noviembre, General de Telecomunicaciones (LGT).

ASPECTOS LEGALES a tener en cuenta al realizar mobile marketing

http://www.codigos-qr.com/


218 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

1. Los prestadores de servicios que remitan publicidad deberán asegurarse de que para ello cuentan con el consentimiento de los destinatarios. En el caso de existir una relación contractual previa no es necesario el consentimiento, pero la publicidad deberá referirse a productos o servicios similares a los que inicialmente fueron objeto de contratación con el cliente.

Es importante tener en cuenta que esos datos -o ese móvil del cliente-, deben haber sido captados bajo las condiciones de información que exige la Ley Orgánica de Protección de Datos, principalmente, en cuanto a los usos y finalidades previstas de sus datos.

En todo caso, el cliente o receptor del mensaje debe disponer, para cuando lo considere oportuno, de opciones para poder revocar ese consentimiento.

2. Los remitentes de mensajes comerciales proporcionarán a los usuarios información clara sobre su identidad, que permita al usuario ponerse en contacto con ellos.

3. La normativa vigente establece la obligación de identificar como publicidad los mensajes comerciales incluyendo al menos en el comienzo del texto del mensaje “PUBLI” (en los diez primeros caracteres del mensaje).

4. En los mensajes publicitarios remitidos por SMS se ofrecerá un medio sencillo y gratuito que permita ejercer el derecho de oposición, mediante mensajes cortos SMS o alternativas gratuitas adicionales, como centros de atención telefónica o la página web de la entidad.

¿Qué entiende la Ley cuando se refiere a comunicaciones comerciales?

"Toda forma de comunicación dirigida a la promoción, directa o indirecta, de la imagen o de los bienes o servicios de una empresa, organización o persona que realice una actividad comercial, industrial, artesanal o profesional". Por lo tanto, se entiende por comunicación comercial prácticamente todos los newsletters de las empresas, desde el momento que se muestre, por ejemplo, su marca ("a la promoción, directa o indirecta, de la imagen?").

WhatsApp

WhatsApp es una aplicación móvil de mensajería para smartphones que se ha hecho famosa por ser la alternativa gratuita a los SMS. Para su utilización, sólo es necesario instalar la aplicación en el teléfono y contar con acceso a Internet móvil. Además del envío gratuito de mensajes de texto, se pueden adjuntar imágenes, vídeos y archivos de audio. Asimismo, incorpora la posibilidad de establecer chats en grupo. La explosión de ventas de los Smartphone está impulsando la utilización de aplicaciones como WhatsApp en detrimento del SMS.

WhatsApp permite a las empresas el desarrollo de campañas promocionales más potentes y económicas que las realizadas mediante el envío de SMS. Sin embargo, hay que tener siempre presente que aplicarían los mismos requerimientos jurídicos que en el caso de los SMS.


219 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Marketing de Buscadores

El marketing en buscadores es una forma de marketing en Internet que busca promover los sitios web mediante el aumento de su visibilidad en la página de resultados de los principales motores de búsqueda (por ejemplo Google). Nos encontramos con dos tipos de resultados:

Los de SEM: que son resultados patrocinados (anuncios de pago por clic), situados en la parte superior y derecha de la página de resultados. Y que se muestran ordenados según un sistema de pujas, por el cual los anunciantes que más pagan son los resultados patrocinaos que más veces salen al realizar una búsqueda concreta.

Los de SEO: que son resultados no patrocinados, y que están situados inmediatamente debajo de los resultados patrocinados de la parte superior de la página de resultados. En este caso, se muestran ordenados según el sistema de relevancia del buscador.

Estos dos tipos de resultados corresponden con los dos métodos existentes de marketing en buscadores:

El SEM

(Search Engine Marketing): Es el proceso de mejorar la visibilidad de un sitio web en los diferentes buscadores mediante anuncios que aparecen en ciertas búsquedas. Los buscadores incorporan la subasta de estos términos (palabras clave), otorgándole un valor a cada palabra clave o frase en relación a la importancia de búsqueda de la misma. Lo mejor de este sistema es que se puede limitar aspectos como el importe de la inversión mensual, el ámbito geográfico y el temporal, y que sólo se paga cada vez que alguien hace clic en el anuncio. Por lo que el SEM no es sólo una forma de convertir visitas en ventas, sino una forma de que nuestra marca gane notoriedad mediante la visualización de los anuncios.

El SEO

(Search Engine Optimization): es el proceso de mejorar la visibilidad de un sitio web en los diferentes buscadores de manera orgánica, es decir sin pagarle dinero al buscador para tener acceso a una posición destacada en los resultados. Es una estrategia de marketing online a medio – largo plazo, ya que requiere mucho trabajo en la aplicación de técnicas basadas en el funcionamiento de los buscadores (sistema de ordenación de los resultados). A pesar de ser una temática compleja más propia de los programadores y diseñadores web, algunas de las claves de las técnicas SEO son:

La selección correcta de las palabras clave que se usarán a lo largo de la web en puntos como la URL, los títulos, el grueso de los contenidos, etc. Además es muy importante no abusar de la repetición de las palabras claves, porque un exceso puede ser considerado por el buscador como técnicas SPAM que pueden llegar a penalizarse con la desaparición de la web de los resultados de las primeras páginas.


220 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

La correcta arquitectura y usabilidad de la web, por ejemplo evitando enlaces internos rotos (aquellos que no tienen como destino una página existente).

El número y la calidad de los enlaces que apuntan a la página web, son los aspectos clave del trabajo SEO. Uno de los principales criterios de ordenación de los buscadores es el de “quién recomienda nuestra web”, que en términos online corresponde a qué páginas tienen enlaces hacia nuestra web.

La importancia estratégica de esta técnica llega hasta el punto de que muchas empresas destinan importantes sumas económicas a comprar enlaces para así acceder a los primeros puestos. Pero en cuestión de enlaces, , siempre es mejor tener pocos pero muy buenos que muchos pero malos. Entendiendo por malos aquellos que provienen de páginas que no son de referencia o que no corresponden con la temática de nuestra web.

La presencia en Redes sociales es uno de los aspectos que más relevancia ha ido adquiriendo en los últimos años, No sólo por el hecho de que son enlaces (recomendaciones para nuestra web) sino por el aumento del uso por parte de los internautas.

Pero entonces, ¿qué es mejor, el SEO o el SEM? Ni uno ni otro, porque son herramientas complementarias. Ya que si queremos lanzar una promoción temporal en los próximos meses lo mejor es usar SEM, porque apareceremos en los primeros puestos desde el primer día (por ejemplo para realizar una campaña promocional en Navidad). Pero si queremos crear marca y no tenemos un gran presupuesto, lo mejor es invertir a largo plazo en SEO.

El posicionamiento en buscadores es, sin duda, la principal herramienta del marketing online. Las principales ventajas del SEO para las pequeñas y medianas empresas son:

Te da la oportunidad de competir con grandes empresas. Se pueden medir los resultados obtenidos.

La mayoría de los usuarios utilizan buscadores antes de tomar una decisión de compra.

Los buscadores son uno de los pilares básicos de Internet, porque desde el principio de la aparición de la Red de redes tienen como objetivo poner orden dentro del exceso de información online existente.

Para más información sobre el posicionamiento SEO y SEM se pueden consultar las guías de Google sobre directrices técnicas, de calidad, de diseño y de contenido de Google, en el siguiente enlace:

http://www.google.es/webmasters/guidelines.html

http://www.google.es/webmasters/guidelines.html


221 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Compras grupales

La caída en el consumo por la situación económica ha recuperado el uso de cupones de descuento para el acceso y utilización de servicios, dando lugar a la aparición de webs especializadas que activan los descuentos siempre y cuando se alcance a un grupo mínimo de compradores. Algunas de las más famosas son Groupon, LetsBonus y Groupalia.

Este tipo de acciones deben plantearse como una inversión en marketing, y no tanto como una forma de obtener ingresos y hacer negocio en el corto plazo. Muchas veces el menor beneficio se ve compensado por la mayor notoriedad del negocio gracias a la presencia en las plataformas online de las empresas de descuento.

Antes de participar en una campaña de este tipo, se deberá analizar muy bien las condiciones de descuento y cobro. En muchas ocasiones, los descuentos son muy elevados y se cobra tras prestar el servicio y el proceso de confirmación de entrega del cupón por parte de la plataforma online, por lo que no es una opción válida para generar liquidez inmediata ni mayores beneficios. Es muy importante dimensionar correctamente la campaña limitando el tiempo de vigencia de la oferta y el número máximo de cupones para evitar que el negocio se vea desbordado ofreciendo una mala imagen, o atender toda la demanda a base de aumentar los costes (en materiales, personal, etc.).

Módulo 2: Herramientas tecnológicas de comunicación Tema 17: La publicidad en marketing digital

222 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

TEMA 17: LA PUBLICIDAD EN MARKETING DIGITAL

1. Publicidad Display

En el marketing tradicional un “display publicitario” es un elemento publicitario de pequeño tamaño que se coloca sobre el mostrador, escaparate o punto de venta. El mismo término aplicado al marketing online consiste en pequeños elementos que se colocan en lugares estratégicos de una página web.

Banners

Un banner es un formato publicitario en Internet. Esta forma de publicidad online consiste en incluir una pieza publicitaria dentro de una página web. Prácticamente en la totalidad de los casos, su objetivo es atraer tráfico hacia el sitio web del anunciante que paga por su inclusión.

Están diseñados con la intención de llamar la atención, resaltar y comunicar el mensaje deseado. Por lo tanto, estos banners no necesariamente mantienen la línea gráfica del sitio web.

Cualquier sitio web es susceptible de incluir toda clase de banners y otros formatos publicitarios, aunque en la mayoría de los casos, son los sitios con contenidos de mayor interés o con grandes volúmenes de tráfico los que atraen las mayores inversiones de los anunciantes.

Pop-ups

Un pop-up, ventana pop-up, o ventana emergente, está considerada como una de las herramientas de marketing más agresiva ya que se trata de ventanas que emergen automáticamente y de improviso y que no son abiertas por el usuario que aparecen al acceder a una página. Las ventanas emergentes no muestran el anuncio en la ventana actual del navegador, sino que se abre una nueva ventana mientras se accede a ciertas páginas web. Normalmente, el usuario tiene la posibilidad de cerrar este tipo de ventanas.

Esta técnica de promoción web es adecuada para mostrar un aviso publicitario de manera intrusiva y para mostrar formularios de registro directamente en el anuncio. Pero debe tenerse en cuenta que los pop ups interrumpen la navegación del usuario y pueden llegar a ser molestos, por lo que su utilización debe realizarse con cuidado. Debido a esto, continuamente aparecen técnicas y programas, llamados anti pop-ups (pop-up Killers o pop-up blocker), que evitan la aparición de este tipo de ventanas emergentes.

Aun así, suele ser una técnica de promoción web muy efectiva ya que llama la atención del usuario a través de una ventana independiente, consiguiendo mayor impacto que los banners estándar. Se puede evaluar la efectividad de una campaña


223 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

de publicidad con pop ups mediante impresiones, clics, campañas de registro y con tasas de conversión.

Otro formato que emerge es un anuncio de página completa que interrumpe el contenido secuencial, obligando al usuario a acceder a la publicidad para continuar su ruta de contenido. Son conocidos como Interstitials y también son una forma de marketing de interrupción.

Una técnica de promoción web relacionada con los pop-ups es la denominada pop-under que consiste en abrir nuevas ventanas que se sitúan detrás de la ventana en uso. Los pop unders no interrumpen la navegación del usuario, son más prudentes y discretos, ya que aparecen al final del proceso de navegación y permanecen callados en su sitio hasta que el usuario los mira o los borra, no son intrusos abusivos ni bulliciosos.

2. Anuncios de vídeo

Son los anuncios en forma de banner de texto que aparecen en las plataformas de video como Youtube cuando abrimos un video. Esta publicidad suele estar insertada dentro del video con la posibilidad de poder cerrarse para poder visualizar mejor el video.

3. Publicidad Ad Exchange

En los últimos años el concepto de AD Exchange se ha extendido dentro del mercado publicitario y se empieza a hablar de esta herramienta como de una revolución dentro del sector.

AD Exchange es el proceso en el que los soportes ceden parte de su inventario publicitario para que unos anunciantes soliciten estos espacios, unificando la oferta y la demanda con un modelo que facilita la compra/venta de publicidad online. Esta práctica se está imponiendo en mercados más avanzados tecnológicamente como solución cuando las grandes empresas no han vendido la totalidad de su inventario, convirtiendo, de esta manera, a los AD Exchange en una herramienta muy válida, que crea un modelo de negocio más rentable para todos los agentes del proceso. Ofrece la posibilidad al anunciante de controlar dónde, cómo y cuándo aparece su publicidad en la red.

Con el AD Exchange se solucionan las ineficiencias del mercado de la publicidad online. Todos los participantes del mercado (redes, agencias, anunciantes y soportes) obtienen beneficios actuando dentro de un mercado abierto con unas reglas fijadas.


224 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Según datos publicados en el informe de Audiencia de Internet por AIMC, se estima que España cuenta con más de 20 millones de usuarios únicos para este tipo de mercado.

4. E-mail Marketing

El e-mail marketing no es sólo un e-mailing, un envío vía correo electrónico de nuestra propuesta comercial, se trata de realizar acciones coordinadas de envío de mensajes personalizados a una base de datos para realizar acciones de marketing directo.

Obviamente estas acciones pueden desarrollarse con la base de clientes propia para aumentar su nivel de compra y fidelizarlos, o frente a nuevas bases de datos para ampliar nuestro mercado y negocio. De esta forma, una empresa puede enviar una oferta comercial a una base de datos de usuarios segmentados en función de diversas variables, socioeconómicas (edad, sexo, ubicación, etc.), de intereses (interesados en formación, en automóviles, etc.) y si utilizamos un servicio de valor añadido con una herramienta profesional de gestión de envíos, tener constancia de quienes abren sus correos electrónicos, a qué hora y cuantas veces leen nuestra oferta comercial. Al mismo tiempo, podemos conocer quienes hacen clic sobre las distintas ofertas que contiene el mensaje comercial y reaccionar en consecuencia con acciones posteriores.

5. Newsletters

Es una publicación distribuida de forma regular vía email, generalmente centrada en un tema principal que resulta del interés de sus suscriptores. Muchos boletines son publicados por empresas para proporcionar información de interés a sus clientes en relación con los productos que venden o con sus servicios o sector de actividad.

ASPECTOS LEGALES a tener en cuenta al realizar e-mail Marketing

El envío de emails sin autorización se denomina SPAM o correo basura y está duramente castigado por la legislación europea y española. Debemos, por lo tanto, prestar atención a las obligaciones legales que regulan el e-mail marketing, definidas en la Ley 34/2002 de Servicios de Ia Sociedad de Ia Información y de Comercio Electrónico, y en especial, al consentimiento de los usuarios para recibir envíos y su derecho de oposición.

Módulo 2: Herramientas tecnológicas de comunicación Tema 18: Plan de marketing

225 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

TEMA 18: PLAN DE MARKETING

1. Objetivos

En toda actividad empresarial es fundamental realizar una planificación previa para evitar invertir recursos que no nos permitan alcanzar los objetivos propuestos. Cualquier plan, y más los relacionados con el área de marketing, debe de ser acorde con la misión y visión corporativa. Es decir, con el tipo de empresa que somos (actividad, cliente objetivo, etc.) y con el tipo de empresa que queremos llegar a ser en el futuro. Además, hay que tener en cuenta cuáles son nuestros puntos fuertes y débiles, dado que los planes deben apoyarse en nuestras ventajas y minimizar nuestras desventajas competitivas.

Todo plan debe de finalizar con la concreción de unos objetivos que se pretenden alcanzar en un determinado espacio de tiempo. Y que serán medidos, para determinar el grado de éxito en su consecución, a través de unos indicadores.

En el caso de un plan de marketing online algunos de los objetivos e indicadores más habituales son:

• Posicionamiento Web orgánico (SEO) en buscadores: definir 3-5 palabras clave a posicionar y ver los resultados de la web en buscadores periódicamente.

• Visitas: hay diferentes sub-objetivos como el tiempo de permanencia del usuario o el número medio de páginas visitadas por el usuario.

• Conversión: número de suscriptores o de ventas.

• Participación: número de comentarios, número de seguidores en redes sociales, etc.

2. Cuál va a ser mi público objetivo

Una de las preguntas clave que debe responder el plan de marketing es ¿cuál va a ser mi público objetivo? Para ello tenemos que volver a la misión de empresa, y según nuestra actividad así serán nuestros clientes potenciales. Hay que tener en cuenta que nuestras campañas de marketing digital no deben diferir de lo que hacemos fuera del mundo online. Y por eso los clientes potenciales, así como otros aspectos del marketing como el mensaje, deben estar ya definidos dentro de nuestro plan de empresa, porque sin un plan de empresa previo será muy difícil realizar un buen plan de marketing y si el plan de marketing online transmite otra cosa diferente al plan de marketing tradicional, estaremos lanzando mensajes contradictorios a nuestros clientes actuales y potenciales.

Tras tener bien definido a nuestro público objetivo, debemos preguntarnos dónde está presente en Internet y cómo participa. Según la respuesta tendremos que tomar


226 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

algunas decisiones, como por ejemplo en qué Red Social debemos de participar: generalistas, como Facebook o Twitter, o específicas, como Linkedin.

3. Qué medios conviene utilizar para mi mercado

No todos los medios que nos ofrece Internet son aptos para cualquier empresa o acción de marketing. A pesar de que hay que escoger una buena combinación de medios online, hay que tener en cuenta que los recursos (tanto en forma de tiempo de dedicación como económicos) son limitados. Por eso es fundamental centrarse en aquellos que puedan ser más efectivos para el negocio. Y para tomar esa decisión hay que apoyarse en dos factores:

• Filosofía empresarial: si a la empresa no le gustan las comunicaciones escritas ni es capaz de generar material escrito será mejor no centrarse en medios como un blog.

• Sector: las acciones de la competencia y el tipo de producto o servicio son otro de los factores claves. Si detecto que mi competencia no está presente en ciertos medios online, por ejemplo Youtube, puedo posicionarme fácilmente como líder.

• Cliente objetivo: de nada sirve estar presente en un medio en el que no está mi cliente objetivo. Por ejemplo, si mis clientes son adultos no estaré en Tuenti.

• De todas formas, en cualquier campaña siempre hay que estar presente en buscadores mediante resultados orgánicos (SEO, no de pago) y en, al menos, una red social, siendo actualmente la más popular Facebook.

4. Estrategias en cada medio. Importancia de interaccionar marketing online y offline

Aunque el Marketing Digital es la forma más rápida, barata y eficaz de generar nuevos ingresos, no debemos olvidar que es un complemento al Marketing Tradicional y no un sustituto.

Ese es el primer fallo de muchas empresas, porque nunca hay que olvidar principios básicos contenidos en el Plan de Marketing Empresarial. Factores como la calidad o el precio permiten que cualquier forma de marketing sea rentable, aún más el marketing online, que es más barato, rápido, seguro y eficaz que medios tradicionales como la radio y la prensa.

Por eso hay que saber combinar y aunar las acciones de marketing realizadas en el mundo real (offline), como por ejemplo el marketing relacional, con las acciones de marketing en formato digital. Porque por muy bien que esté posicionada en buscadores nuestra web, si nuestro producto o servicio no sabe captar la atención de los usuarios no podremos venderles nada. Y si a largo plazo no sabemos escuchar y hablar con los clientes, ya sea mediante medios online u offline, jamás podremos fidelizarlos.


227 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Algunas de las combinaciones de medios online y offline son la realización de eventos físicos que son promocionados en el mundo online o que tras su realización y con los contenidos generados (fotografías, vídeos, etc.) se siguen recordando en Redes Sociales.

5. Fidelización

Como decíamos antes, es uno de los principios básicos y todavía vigentes del marketing. Sin un cliente fiel, no hay negocio que pueda sobrevivir a largo plazo. Porque un cliente fidelizado nos recomienda y repite, lo que supone menores costes de comercialización.

Las Redes Sociales son el medio idóneo para fidelizar a nuestros clientes, porque nos permiten acercarnos a ellos y mantener una conversación (comunicación bidireccional) que nos permitirá saber qué necesita y adaptar nuestra oferta a su situación particular.

6. Reputación de la marca

Uno de los objetivos básicos del marketing es la creación de marca. Y para ello es fundamental tener una buena reputación, y mucho más en nuestra presencia online, porque en Internet el efecto de una queja se amplifica a través de las redes sociales y de los resultados en buscadores.

Para tener una buena reputación de marca, hay que saber escuchar al consumidor y adaptarse, si es necesario. La reputación se construye mediante una planificación y una gestión eficaz a lo largo del tiempo. Realizando tareas como:

• Anticipando las necesidades de nuestros clientes.

• Rastreando opiniones sobre nuestra marca en buscadores y en las principales Redes Sociales.

• Identificando y valorando las opiniones emitidas en la web sobre nuestra marca.

• Pero no sólo hay que escuchar al consumidor, también hay que saber responder a las críticas emitidas, y para ello pueden tenerse en cuenta las siguientes pautas:

• Contestar rápido, al igual que si fuera una queja o crítica física. No perder los papeles, ser respetuoso y no dudar de la crítica.

En caso de quejas o críticas irracionales o no argumentadas, es mejor no intentar resolverla en el medio online, simplemente pedir disculpas y facilitar o solicitar un medio de contacto donde se pueda atender adecuadamente.

Si la queja o crítica no está fundamentada, intentar responder en el medio online y a ser posible con las herramientas de la Web 2.o en especial vídeos o fotografías


228 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

que puedan ser compartidas por otros usuarios. Es recomendable tener un manual sobre cómo actuar en casos de crisis de imagen, este manual debe ser creado por la empresa, por el departamento de comunicación y, si no lo tuviéramos, deberíamos estar asesorados por una empresa de comunicación que nos ayude a desarrollar los puntos a tener en cuenta y la metodología a seguir en caso de que se produjera la crisis.

Para hacer un seguimiento de la reputación online existen herramientas tales como: “Klout” (http://klout.com/home): se trata de una de las herramientas gratuitas de monitorización más extendidas, conocidas y utilizadas actualmente. Permite definir el valor de tu marca/empresa en distintas redes sociales, utilizando la información de las cuentas (a las que brindes acceso) para clasificar tu actividad, resumirla en un valor numérico y clasificarla por nivel de influencia y capacidad de crear tendencia.

Klout te facilita diariamente una puntuación dependiendo de la actividad generada, con el fin de conocer la influencia que tiene nuestra red.

Actualmente, los resultados se pueden medir en distintas redes sociales como Facebook, Twitter, Linkedin, Youtube, etc., aportando información muy interesante: como los usuarios más influenciados en tus cuentas, los que más influyen en las tuyas, los temas más solicitados y la variación de tu Klout Score con el paso del tiempo.

• ASOMO (http://www.asomo.net): Probablemente la herramienta más precisa en el análisis en español, debido al tratamiento manual que se hace de los resultados. Sin embargo, presenta poca inmediatez en la presentación de los datos y algo de rigidez en la configuración. Su alto precio justifica principalmente la precisión de los resultados.

• BlogPulse (http://www.blogpulse.com): Es una herramienta gratuita de Nielsen que pretende identificar todas las menciones de una palabra en blogs. Es una solución básica que no permite más que obtener un listado sin clasificación ni filtros.

• Heartbeat (http://www.sysomos.com): Ofrece una solución de seguimiento y análisis avanzados cuya ventaja competitiva es la integración directa de la cuenta de Facebook de la empresa. Sin embargo, la falta de reconocimiento automático de sentimiento en español hace que suponga un trabajo adicional de clasificación y enriquecimiento de resultados.

• Radian6 (http://www.radian6.com): Desde hace ya años, Radian6 se consolida como uno de los líderes en la medición de reputación online, gracias a una interfaz muy cómoda e interactiva.

• Social Mention (http://www.socialmention.com): Probablemente la más conocida de las herramientas existentes, debido casi únicamente a su gratuidad, pero es una solución con menor fiabilidad, sobre todo a la hora de filtrar por idioma o de analizar el sentimiento.

http://www.asomo.net/

http://www.blogpulse.com/

http://www.sysomos.com/

http://www.radian6.com/

http://www.socialmention.com/

Módulo 3: Herramientas tecnológicas de investigación e información Tema 1: Diseño de páginas utilizando un CMS

229 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

MODULO 3. HERRAMIENTAS TECNOLOGICAS DE INVESTIGACION E INFORMACION

TEMA 1: DISEÑO DE PÁGINAS WEB UTILIZANDO UN CMS

1. ¿Qué es un CMS?

Hasta hace unos años para crear un sitio Web había que desarrollarlo en HTML y llenarlo de contenido a base de más código. Las funciones de un CMS vienen a simplificar esa tarea, permitiendo la personalización del aspecto de las páginas, sin escribir una sola línea de código, y facilitando al usuario (administradores, editores y demás participantes) la labor frecuente de creación y administración de contenidos mediante una estructura de soporte (incluyendo editores de texto muy sencillos).

La interfaz permite controlar una o varias bases de datos donde se almacena el contenido del sitio Web.

En un CMS, el contenido y el diseño se configuran independientemente, de forma que es posible modificar el aspecto del sitio sin tener que dar formato otra vez al contenido.

Funcionamiento básico de un CMS

Un CMS funciona siempre en el servidor Web en el que se encuentre alojado el sitio. El acceso a la herramienta de administración del CMS se realiza a través del navegador Web.

Cuando un usuario accede a una URL, el servidor ejecuta un programa para acceder a la base de datos y construir dinámicamente la página HTML que se enviará de vuelta al navegador.

Ejemplos de CMS

Existen muchos CMS pero los más conocidos son los siguientes:

• Sitios Web (incluidos blogs): WordPress, Drupal y Joomla!

• Foros: VBulletin y PhpBB.


230 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• Comercio electrónico: PrestaShop y Magento.

• Wikis: UseModWiki, MediaWiki, PhpWiki y TikiWiki.

• Enseñanza (e-learning): Moodle, eFront y ATutor.

Un poco de historia

La popularización de los CMS llegó con la necesidad de facilitar el trabajo a los editores de sitios Web cuya información cambiaba muy a menudo (revistas en línea, periódicos y publicaciones corporativas).

En 1995, el sitio de noticias tecnológicas CNET creó Vignette, uno de los primeros sistemas de gestión de contenidos.

En paralelo al nacimiento de los blogs, surgieron los wikis, obedeciendo a la demanda de participación directa de los usuarios. El ejemplo de wiki más famoso es la enciclopedia Wikipedia.

Las plataformas no auto-alojadas ¿son CMS?

En la literatura actual relacionada con los blogs, leerás con mucha frecuencia el término “autoalojada” para referirse a cierto tipo de plataformas de publicación de blogs. Dicho término corresponde a aquellas aplicaciones que se instalan en un servidor Web, a diferencia de aquellas otras que ofrecen gestión de contenidos de forma online y alojamiento incluido. Una de las plataformas no auto-alojadas más populares es Blogger.

WordPress también posee la versión no auto-alojada: WordPress.com. Pero, ¿son este tipo de sistemas no auto-alojados CMS? Atendiendo a la definición anteriormente expuesta podemos afirmar que sí lo son. Sin embargo, las plataformas no auto-alojadas, del estilo de WordPress.com o Blogger, poseen restricciones de configuración y personalización, por lo que carecerás de funciones necesarias para construir una tienda online o un sitio Web complejo.

2. ¿POR QUÉ WORDPRESS.com?

WordPress es una herramienta muy interesante para crear y gestionar una web en el espacio de un centro o proyecto educativo, ya que permite la publicación de contenidos de una forma fácil.

Ventajas de usar WordPress.com:

1. Visible en Todos los Navegadores. WordPress.com ofrece plantillas web gratis en HTML5 por lo que esta optimizado para ser visible en todos los navegadores web.


231 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

2. Panel de Administración Web Online. WordPress es un gestor de contenidos web. Con el Panel de Administración online los usuarios pueden gestionar los contenidos de su web. No se necesitan conocimientos técnicos para dominar el panel.

3. Visible en Dispositivos Móviles y Tablets. Plantilla Web en HTML5 visible en sistemas operativos móviles como iOS y Android. Nuestra web se puede ver tanto en móviles como tablets.

4. Seguridad y Espacio. Dispones de 3 Gb de espacio para poder subir tus contenidos. Podrás subir imágenes, mp3, pdf, etc… sin miedo a perder ningún dato. Si necesitas más espacio podrás contratar los servicios premium. Todo es posible partiendo de una cuenta gratuita.

5. Herramientas para compartir. Con las herramientas para compartir podremos añadir botones, widgets y badges a nuestras páginas web. Conectaremos Facebook, Linkedin y Twitter para compartir todos nuestros contenidos con nuestro público objetivo.

6. Herramientas de Analítica Web. Gracias a los datos que nos proporciona la herramienta de Análisis Web ahora podemos saber desde donde nos visitan, cuantos visitantes y qué contenidos son los más efectivos.

Módulo 3: Herramientas tecnológicas de investigación e información Tema 2: WordPress como herramienta de diseño web

232 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

TEMA 2: WORDPRESS COMO HERRAMIENTA DE DISEÑO WEB

1. Creación de un sitio web

WordPress.com es una avanzada plataforma semántica de publicación personal orientada a la estética, los estándares web y la usabilidad.

Para acceder por primera vez y crear un sitio web, tecleamos en el navegador: https://es.wordpress.com nos aparece:

Pinchando en CREAR SITIO WEB, entraremos en el proceso de creación del sitio, un proceso rápido, sencillo y guiado. Primero tenemos que elegir el nombre del sitio, será la dirección web.

https://es.wordpress.com/

Módulo 2: Diseño Web Tema 2: Wordpress como herramienta de diseño web

233 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Seguimos dándonos de alta introduciendo una dirección de correo, un nombre de usuario y una contraseña. Es importante recordar estos datos para el acceso como administrador a nuestro sitio.

Si estuviésemos interesados en una dirección web propia, lo haríamos en este paso, sino, pulsamos No, gracias.


234 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Se escoge un diseño, se puede cambiar después así pues elegimos uno sin mucha demora.

Seleccionamos un plan, en nuestro caso, el gratuito.


235 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

El proceso ha finalizado. Accedemos al correo que habíamos introducido al crear el usuario para activar el registro en WordPress.com

Después de acceder al correo y activar la cuenta de Wordpress:


236 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

2. Acceder en modo Editor

Ya tenemos un usuario, que permite administrar la web. Este usuario permite escribir nuevas entradas y secciones, y modificarlos pudiendo publicarlos directamente.

Para llegar al portal se entra en http://[nombre-del-dominio] .wordpress.com/wp-admin. Al entrar veréis una pantalla en la que solicita usuario y contraseña, que deberéis rellenar con los datos que introdujimos al crear el sitio:

3. Explorando el escritorio de wordpress.com

El panel de administración permite configurar las características del sitio web.

En el escritorio (primera pantalla que se ve tras iniciar sesión) se muestra información acerca de la actividad reciente en el sitio web, así como avisos de actualizaciones o información relevante de la comunidad Wordpress:


237 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

El menú para navegar en el panel de administración se encuentra en la parte izquierda de la pantalla. Es un menú de navegación intuitivo y flexible, permitiendo llegar a las funciones con pocos clics.

Al parar el cursor al lado de cada objeto de contenido se mostrará un pequeño triángulo y al pulsar sobre el mismo se mostrarán las sub-secciones

En la parte principal del tablero tienes por defecto las estadísticas del blog (número de entradas, páginas, comentarios, categorías, etc.)

Módulo 3: Marketing digital Tema 3: Diseñar un sitio web con WordPress

238 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

TEMA 3: DISEÑAR UN SITIO WEB CON WORDPRESS

1. Administración de Entradas

Las entradas son noticias que se mostrarán en orden cronológico inverso en la página de inicio de la web. Normalmente son las que más se comentan, y se incluyen en el feed RSS de la web.

Cada entrada tiene:

• Título: el título de la noticia que queramos publicar.

• Texto: el texto de la noticia. Para añadirlo disponemos de las opciones de editores similares a Microsoft Word.

• Categoría: cada entrada se clasifica bajo una o varias categorías.

• Etiquetas: temas de la noticia. Cada tema puede tener hasta cinco.

(opcional): fotografías o enlaces.

A continuación comentaremos las acciones a realizar con las entradas:

Añadir nueva entrada

Publicar una noticia es tan sencillo como mandar un e-mail. Seleccionamos

Entradas -> Nueva entrada:


239 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Disponemos un espacio en donde es posible redactar mediante un editor que tiene varias funciones.

El editor tiene dos pestañas principales: Visual y Texto (HTML). La primera permite obviar los códigos que están detrás de lo que se publica, puesto que para publicar contenido en Internet es necesario utilizar lo que se conoce como lenguaje HTML. El editor facilita el que puedas incluir las etiquetas sin que tener conocimiento de ello. Es lo que se conoce como WYSIWYG (en inglés: What You See Is What You Get).

Para usuarios avanzados, con conocimientos en dicho lenguaje, en la pestaña HTML se tiene acceso al código que se está utilizando para el formato del texto.


240 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Algunas opciones destacadas de ese editor:

• Poner en “negrita” el contenido seleccionado.

• Mostrar un texto en “cursiva”.

• Para mostrar un texto “tachado”.

• Viñetas y numeración

• Dar formato al texto como Cita

• Incluir una línea.

• Alineado del texto

• Incluir o eliminar enlaces y etiquetas

• Revisar la ortografía del texto

Pulsando el último botón nos aparece una nueva barra de edición con más opciones:

• Subrayado

• Texto Justificado

• Color del texto

• Limpiar formato

• Incluir símbolos

• Sangrías


241 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• Rehacer/Deshacer

• Ayuda

Para publicar una entrada sencilla los pasos son los siguientes:

Selecciona un título para la entrada.

En la caja de texto comienza a escribir el mensaje. Puedes añadir enlaces, negritas, sangrías, entre otros.

Añade las etiquetas y categorías que definen a esta entrada.

Una de las dudas más frecuentes gira en torno a las diferencias entre las categorías y las etiquetas. Las etiquetas son más específicas, mientras que las categorías son más generales. Por ejemplo para clasificar un artículo sobre la teoría de Sigmund Freud sobre mecanismos de defensa puedo utilizar la categoría de “Freud” y la etiqueta de mecanismos de defensa.

Si no se selecciona una categoría, se clasifica automáticamente en la categoría por defecto. Añadir etiquetas a una entrada es opcional pero recomendable.

Visibilidad: se puede seleccionar si la entrada estará protegida por contraseña, que sea una entrada pública (que se mantenga en la parte superior del blog) o que sea privada (solo tú puedes verla).

Puedes seleccionar la fecha en que aparecerá publicada la entrada si deseas que aparezca en el futuro, o si por el contrario se publica con algo de retraso.


242 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

En la mayoría de los casos sólo es necesario añadir el título y el texto de la noticia, y seleccionar categorías y/o etiquetas, los demás campos pueden quedarse tal y como están. Elegir el formato de la entrada:

Cuando tu entrada esté preparada pulsa el botón Publicar. En varias ocasiones tendrás la necesidad de complementar una entrada con fotos e

imágenes para complementar la misma. Hay dos formas principales de insertar una imagen: subiéndola a la web desde el ordenador o añadiendo la dirección de internet en la cual se encuentra la misma.

Editar una entrada existente

Para editar una entrada existente, desde el Escritorio seleccionamos Entradas.

Nos aparecerá una lista de entradas publicadas:


243 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Pulsando “Editar”, se abrirá la ventana de edición.

Podremos realizar entonces los cambios del mismo modo que cuando creamos la entrada correspondiente.

Eliminar una entrada

Si queremos eliminar una entrada existente, desde el Escritorio seleccionamos Entradas. Nos aparece una lista de noticias publicadas. Si situamos el cursor encima del título de la noticia que queremos eliminar, nos saldrá un pequeño menú en el que seleccionaremos “Enviar a la Papelera”. Si eliminamos la entrada por equivocación también podemos restaurarla, puesto que los mensajes eliminados van a la papelera de entradas.

También podemos hacer clic en el cuadrado a la izquierda del título para seleccionarlo, y de la parte de arriba, donde pone “Acciones en lote” seleccionar la opción “Editar” o “Mover a la papelera” y pinchamos en Aplicar.

2. Administración de Categorías

Cada entrada se clasifica bajo una o varias categorías. Las categorías permiten la clasificación de las noticias y páginas en grupos y subgrupos, de tal manera que ayuden al visitante en la navegación y uso del sitio web.

Cada categoría puede tener una categoría “padre” para crear una jerarquía dentro de la estructura de categorías.

Crear una categoría

En la parte izquierda de la pantalla, en el menú desplegable de entradas encontramos “Categorías” desde donde podemos crear una nueva categoría, así como asignar la categoría superior a la cual pertenece la nueva categoría dentro de la jerarquía.


244 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Si estamos editando una entrada hay otra forma de Crear categorías:

En la parte derecha de la pantalla, aparece un menú para la nueva categoría y la opción de asignar qué categoría estaría por encima en el “árbol de categorías”.

Una vez rellenos esos datos, pulsaríamos en el botón “Añadir nueva categoría” que aparece al final de la pantalla.

Editar una categoría

Para editar el nombre o la categoría superior de una categoría, desde el Escritorio seleccionamos Entradas -> Categorías.

Nos aparecerá el listado de categorías en la parte de la derecha. Si hacemos clic en el nombre de la categoría, se abrirá la ventana de edición. Podremos realizar entonces los cambios del mismo modo que cuando creamos la categoría correspondiente.


245 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Eliminar una categoría

Si queremos eliminar una categoría, desde el Escritorio seleccionamos Entradas -> Categorías. Nos aparece el listado de categorías. Si situamos el cursor encima del nombre de la categoría que queremos eliminar, nos saldrá un pequeño menú en el que seleccionaremos “Borrar”:

También podemos hacer clic en el cuadrado a la izquierda del nombre para seleccionarlo, y de la parte de arriba, donde pone “Acciones en lote” seleccionar la opción “Borrar” y pinchamos en Aplicar:

Si se elimina una categoría, no se eliminarán las entradas que hay en ella. En su lugar, las entradas que sólo estén asignadas a esa categoría se asignarán a la categoría por defecto (la primera de las categorías existentes).


246 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

3. Administración de Etiquetas de las entradas

Cada noticia se clasifica bajo una o varias etiquetas. A diferencia de las categorías, las etiquetas no tienen jerarquía de lo que no hay relación de padres e hijos como el de las categorías, pero al igual que las categorías, los nombres de etiqueta deben ser únicos.

Crear una etiqueta

Para crear una etiqueta, seleccionamos Entradas -> Etiquetas de las entradas:

En la parte central de la pantalla, aparece un menú para la nueva etiqueta. Una vez rellenos los datos, pulsaríamos en el botón “Añadir nueva etiqueta” que aparece al final de la pantalla.

Editar una etiqueta

Para editar el nombre de una etiqueta, desde el Escritorio seleccionamos Entradas -> Etiquetas de las entradas. Nos aparecerá el listado de etiquetas en la parte de la derecha:

Si hacemos clic en el nombre de la etiqueta, se abrirá la ventana de edición. Podremos realizar entonces los cambios del mismo modo que cuando creamos la etiqueta correspondiente.


247 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Eliminar una etiqueta

Si queremos eliminar una etiqueta, desde el Escritorio seleccionamos Entradas-> Etiquetas de las entradas. Nos aparece el listado de etiquetas. Si situamos el cursor encima del nombre de la etiqueta que queremos eliminar, nos saldrá un pequeño menú en el que seleccionaremos “Borrar”:

También podemos hacer clic en el cuadrado a la izquierda del nombre para seleccionarlo, y de la parte de arriba, donde pone “Acciones en lote” seleccionar la opción “Borrar” y pinchamos en Aplicar:

Si se elimina una etiqueta, no se eliminarán las entradas que hay en ella. El cambio no es reversible.

4. Administración de Medios. Biblioteca multimedia

La pantalla de Administración de contenido multimedia permite subir contenido multimedia para después utilizarlo en entradas y páginas.

Subir un contenido multimedia

Para subir un contenido multimedia a nuestro sitio web, seleccionamos Medios -> Añadir nuevo:

Elegimos el archivo pulsando en “Elegir archivos”. Automáticamente subirá el contenido. Cuando haya terminado, nos mostrará una ventana en la que podremos elegir el título de la imagen, una leyenda si queremos que lleve pie, y la descripción:


248 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Editar un contenido multimedia

Para editar el título o descripción de un contenido multimedia, desde el Escritorio seleccionamos Multimedia. Nos aparecerá una lista de contenidos multimedia:

Si hacemos clic en el título del contenido, se abrirá la ventana de edición. Podremos realizar entonces los cambios del mismo modo que cuando creamos el contenido multimedia correspondiente.

Eliminar un contenido multimedia

Si queremos eliminar un contenido existente, desde el Escritorio seleccionamos Medios. Nos aparece una lista de contenido multimedia. Si situamos el cursor encima del título del contenido que queremos eliminar, nos saldrá un pequeño menú en el que seleccionaremos “Borrar permanentemente”.

También podemos hacer clic en el Selección Múltiple, aparece en la parte de arriba, marcar los objetos que queremos eliminar y pulsar Borrar Seleccion. Este cambio no es reversible, por lo que hay que estar muy seguro de que se quiere eliminar el contenido antes de realizar esta acción.


249 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

5. Administración de Enlaces

Los enlaces que se hayan añadido previamente a alguna página o noticia web se pueden administrar de manera sencilla desde una ventana de administración.

Añadir un enlace

Para crear un enlace, seleccionamos Enlaces -> Añadir nuevo:

Podremos seleccionar el nombre por el que conoceremos el enlace para su uso posterior, la URL a la que hace referencia, categoría a la que pertenece, y alguna otra cuestión avanzada.


250 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Una vez que hemos rellenado todas estas cuestiones, pulsaremos en “Añadir enlace” para que quede creado.

Editar un enlace

Para editar el nombre, URL o descripción de un enlace, desde el Escritorio seleccionamos Enlaces. Nos aparecerá una lista de enlaces:

Si hacemos clic en el título del enlace, se abrirá la ventana de edición.

Podremos realizar entonces los cambios del mismo modo que cuando creamos el enlace correspondiente.


251 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Eliminar un enlace

Si queremos eliminar un enlace, desde el Escritorio seleccionamos Enlaces. Nos aparece una lista de enlaces. Si situamos el cursor encima del título del enlace que queremos eliminar, nos saldrá un pequeño menú en el que seleccionaremos “Borrar”.

También podemos hacer clic en el cuadrado a la izquierda del nombre para seleccionarlo, y de la parte de arriba, donde pone “Acciones en lote” seleccionar la opción “Borrar” y pinchamos en Aplicar.

NOTA: este cambio no es reversible, por lo que hay que estar muy seguro de querer eliminar el enlace antes de realizar esta acción.


252 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

6. Administración de Páginas

Las entradas o noticias son objetos orientados en el tiempo. Se escriben en un tiempo específico, y ese tiempo define su contexto. Ejemplos de noticias serían las actividades del mes que viene, boletín mensual, etc.

Las páginas, por el contrario, se usan la mayor parte de las veces para presentar la información atemporal sobre usted o su sitio web (información atemporal). Ejemplos de páginas a incluir serían “Acerca de”, “Contacto”, “copyright”, etc.

Resumiendo, las páginas:

• Son para el contenido que es menos dependiente del tiempo que las Entradas.

• Pueden organizarse en páginas y SubPáginas.

• Pueden usar diferentes Plantillas de Página que pueden incluir Archivos de Plantilla, Etiquetas de Plantilla y otro código PHP.

A continuación comentaremos las acciones a realizar con las páginas:

Añadir nueva página

Publicar una página es sencillo. Seleccionamos Páginas -> Añadir nueva:

Disponemos un espacio en donde es posible redactar mediante un editor.

El editor tiene dos pestañas principales: Visual y Texto. La primera permite obviar los códigos que están detrás de lo que se publica, puesto que para publicar contenido en Internet es necesario utilizar el lenguaje HTML. El editor facilita el que puedas incluir las etiquetas sin que tener conocimiento de ello. Es lo que se conoce como WYSIWYG (en inglés: What You See Is What You Get).

Para usuarios avanzados, con conocimientos en dicho lenguaje, en la pestaña Texto, se tiene acceso al código que se está utilizando para el formato del texto.


253 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Las opciones más destacadas de ese editor son las mismas que vimos al añadir una Entrada. Para publicar una página sencilla, los pasos son los siguientes:

1. Selecciona un título para la página.

2. En la caja de texto comienza a escribir el mensaje. Puedes añadir enlaces, negritas, sangrías, entre otros.

3. Añade las etiquetas y categorías que definen a esta página.

WordPress nos da la posibilidad de crear automáticamente varios tipos de páginas:

1. Formulario de contacto:


254 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

2. Encuesta

Si pulsamos “Crear una encuesta nueva” Podemos ir introduciendo las preguntas y posibles respuestas que el usuario tendrá para elegir. Seleccionamos el estilo de la encuesta y la visualización de resultados.


255 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

3. Elementos multimedia.

Una página será más completa si le añades imágenes, videos, grabaciones o cualquier otro tipo de archivos. Ahora veremos cómo enlazar contenido subido previamente:

1. Añadir un enlace de texto:

a. Selecciona el texto que quieras enlazar.

b. Pulsa sobre el botón de enlace en la barra del editor.

c. Aparecerá una ventana emergente en donde podrás configurar el enlace.

d. Pulsa sobre “Añadir enlace” y verás que el texto cambiará su formato según el diseño elegido y se convierte en un enlace.

2. Enlazar desde una imagen: puede hacerse utilizando una de la Biblioteca de Medios:

a. Pulsa sobre el botón de “Añadir una imagen”.

b. Selecciona Biblioteca de Medios.


256 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

c. Encuentra la imagen que quieres utilizar como objeto de enlace y pulsa sobre el enlace de “Mostrar”.

d. Incluye el URL al cual quieres que enlace la imagen.

e. Pulsa sobre “Insertar en entrada”.

f. La imagen será insertada en la entrada y enlazada al URL que especificaste.

Cuando tu página esté preparada pulsa el botón Publicar. En varias ocasiones tendrás la necesidad de complementar una página con fotos e imágenes para complementar la misma. Hay dos formas principales de insertar una imagen: subiéndola al blog desde el ordenador o añadiendo la dirección de internet en la cual se encuentra la misma. Comencemos por subir una imagen desde nuestra computadora:

Editar una página existente

Para editar una página existente, desde el Escritorio seleccionamos Páginas.

Nos aparecerá una lista de páginas:


257 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Si hacemos clic en el título de la página, se abrirá la ventana de edición.

Podremos realizar entonces los cambios del mismo modo que cuando creamos la página correspondiente.

Eliminar una página

Si queremos eliminar una página existente, desde el Escritorio seleccionamos Páginas. Nos aparece una lista de páginas. Si situamos el cursor encima del título de la página que queremos eliminar, nos saldrá un pequeño menú en el que seleccionaremos “Enviar a la Papelera”.


258 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

También podemos hacer clic en el cuadrado a la izquierda del título para seleccionarlo, y en la parte de arriba, donde pone “Acciones en lote” seleccionar la opción “Mover a la papelera” y pinchamos en Aplicar.

Si eliminamos la página por equivocación también podemos restaurarla, puesto que las páginas eliminadas van a la papelera de páginas.

7. Administración de Comentarios

Uno de los rasgos que distinguen a las webs que siguen el estilo “Web 2.0” es la posibilidad de que los visitantes comenten en tornos a los artículos que se publican. El webmaster de la página web tiene la tarea de responder a los comentarios y manejar los comentarios de spam. Para ir a la página de los comentarios selecciona el menú “Comentarios”.

Al poner el cursor encima de algún comentario aparecerá un menú con varias opciones, las cuales te permitirán rechazar el comentario, identificarlo como spam, editarlo, editarlo rápidamente o responder al mismo. Si utilizas el menú de acciones puedes marcar varios comentarios y aplicar la acción correspondiente.


259 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Los comentarios están organizados en varias categorías: pendientes de moderación, aprobados y de spam. WordPress incluye un sistema muy efectivo para manejar spam llamado Akismet. En nuestras páginas dejamos este sistema activado de forma automática.

8. Administración del Perfil

Cada cuenta de usuario incluye un perfil del mismo. Para ver tu perfil pulsa en “Usuarios” “Mi Perfil”:

Se pueden modificar en este apartado las opciones del administrador del sitio web, asi como incluir contactos, foto de perfil, etc. Tras realizar todos los cambios deseados, pulsa sobre Actualizar Perfil para que se apliquen los mismos.

En Configuración Personal se pueden modificar las opciones de visualización de la ventana de administración (utilizar editor visual, esquema de colores de la pantalla de administración, utilizar o no atajos de teclado, etc.) y opciones sobre el nombre que aparecerá al editar los contenidos del sitio web. También permite modificar la contraseña con la que se accede al módulo de administración del sitio web.


260 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Fuentes

http://www.vidadigital.net/ http://ayudawordpress.com/ http://es.wordpress.org/

http://www.vidadigital.net/

http://ayudawordpress.com/

http://es.wordpress.org/

Módulo 3: Herramientas Tecnológicas de Investigación e Información Tema 4: HTML

261 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

TEMA 4: HTML

1. ¿Qué es HTML?

Introducción

A finales de los 80 se desarrolló el lenguaje de marcas SGML. En esa misma época Tim Bernes Lee utilizó SGML para definir un nuevo lenguaje de etiquetas que llamó Hypertext Markup Language (lenguaje de marcado de hipertexto) para crear documentos transportables a través de Internet en los que fuera posible el hipertexto; es decir la posibilidad que determinadas palabras marcadas de forma especial permitieran abrir un documento relacionado con ellas.

A pesar de tardar en ser aceptado, HTML fue un éxito rotundo y la causa indudable del éxito de Internet. Hoy en día casi todo en Internet se ve a través de documentos HTML, que popularmente se denominan páginas web.

Inicialmente estos documentos se veían con ayuda de intérpretes de texto (como por ejemplo el Lynx de Unix) que simplemente coloreaban el texto y remarcaban el hipertexto. Después el software se mejoró y aparecieron navegadores con capacidad más gráfica para mostrar formatos más avanzados y visuales.

Lógicamente desde 1989 hasta nuestros días HTML ha mejorado. Entre sus avances fundamentales:

• El lenguaje cada vez ha ido incorporando nuevas etiquetas más potentes, que permiten incluir en los documentos HTML, tablas, capas, marcos, imágenes,…

• Se han añadido lenguajes de script (como JavaScript) con código incrustado en las páginas HTML que permiten añadir funcionalidades y dinamismo a las páginas web

• Se han añadido técnicas en el lado del servidor con la misma finalidad como aplicaciones CGI, PHP, ASP o JSP.

• Se incorporaron lenguajes de estilo (como CSS) para generar un formato de documento más avanzado

• Se han añadido utilidades para gestión avanzada de JavaScript con XML (AJAX) Se ha permitido la inclusión de elementos avanzados en las páginas como Flash o los applets de Java para dar mayor funcionalidad.

• Se permiten elementos semánticos para dar mayor significado al contenido

• Se permite el dibujo libre de elementos en la página mediante el elemento canvas.

• Es posible añadir vídeo, audio y otros elementos multimedia de forma fácil

En la actualidad HTML sigue siendo el lenguaje fundamental de las páginas web; pero ahora Internet es la web, es decir todo en Internet se ve a través de una página


262 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

web. Por eso hoy en día HTML es la capa superficial bajo la que se agolpan tecnologías muy diversas y muy distintas de HTML.

Herramientas HTML

Para escribir HTML bastaría con un editor de texto plano como el bloc de notas de Windows o gedit de Linux. Pero los resultados se deben mostrar mediante un navegador o aún mejor, probar en varios navegadores para comprobar problemas (ya que hay elementos HTML que no son compatibles con todos los navegadores).

Sin embargo lo ideal es trabajar mediante editores de código capaces de entender el lenguaje y colorear de diferente manera las etiquetas HTML para distinguirlas del texto normal y así trabajar mejor. Algunos populares son Notepad++ o Sublime Text.

Los entornos de edición en XML como Oxygene también permiten trabajar en HTML y de hecho en el caso de utilizar XHTML son una gran opción.

Otra forma es trabajar con editores WYSIWYG (What You See Is What You Get, lo que se ve es lo que se obtiene), en los que se edita el documento al estilo de los procesadores de texto. De modo que se ve el resultado sin tocar el código y es el editor el que traduce el resultado al código correspondiente. Aunque en realidad no es posible un WYSIWYG real ya que los navegadores muestran el resultado de diferente forma.

Normalización. Versiones de HTML

Los programas capaces de traducir el código HTML y producir una salida en pantalla de los mismos son los navegadores (browsers en inglés). Se trata de un software gráfico que se inició con la creación de Mosaic a principios de los 90 y que poco a poco produjo más productos hasta llegar a una guerra de navegadores a finales de los 90 entre Internet Explorer de Microsoft y Navigator de Netscape que ganó Microsoft pero que ahora continúa con otros navegadores como el propio Internet Explorer, Mozilla Firefox (sucesor de código abierto de Netscape), Google Chrome, Opera o Apple Safari entre otros.

El problema surgió en cuanto unos navegadores incorporaron elementos HTML que el resto no traducía, con lo que aparecieron diferentes dialectos HTML. Así una página se podía mostrar de forma totalmente diferente según el navegadir.

La solución pasó por intentar estandarizar el lenguaje. Por ello el propio Tim Bernes Lee fundó la World Wide Web Consortium (abreviado W3C) como organismo de estandarización del lenguaje HTML ante la industria.

En la actualidad las directrices de W3C son seguidas por la mayoría de navegadores aunque no al 100%, lo que sigue generando problemas a los creadores de páginas web.

La situación, sin embargo se ha complicado en estos últimos años con la aparición de diferentes estándares, en concreto actualmente se consideran estándares a HTML


263 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

4.01, XHTML 1.0 y 1.1 y ya se considera de la misma forma a HTML 5. Las diferencias entre ellos son:

• HTML 4.01. Se trata de la versión estándar del HTML tradicional hecha en el año 1999 y que sigue teniendo mucha vigencia actualmente. Hay tres versiones: la transicional (que permite seguir usando algunas etiquetas que se consideran obsoletas), la estricta (que elimina numerosas etiquetas y atributos para forzar a crear un HTML con menos formato y más significado) y la frameset orientada a usar los ya muy poco utilizados marcos. La versión más popular es la transicional al ser más libre.

Para avisar de que nuestro documento sigue las normas de HTML 4.01, se coloca una etiqueta DOCTYPE que permite llegar al DTD estándar de esta versión. Para HTML 4.01 transicional es:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4 no es compatible con XML y por ello a los antiguos diseñadores web les gusta más; pero precisamente el no ser compatible con XML no permite utilizar muchas aplicaciones creadas para ese lenguaje

• XHTML. XHTML era planteado como el sustituto de HTML, la primera versión, la 1.0 sigue siendo la más usada y en la fecha de escritura de este texto es la versión HTML más utilizada. Hay también versión estricta, transicional y (muy poco utilizada) frameset; la más utilizada, otra vez es la transicional porque permite el uso de numerosos atributos y elementos que se consideran obsoletos, pero que muchos diseñadores utilizan.

Las páginas XHTML obligan a que la escritura de HTML siga las reglas del lenguaje XML bien formado. Para indicar que utilizamos XHTML 1.0 transicional se debe poner este DOCTYPE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Además la etiqueta raíz html debe usarse de este modo (especificando el espacio de nombres y el lenguaje de la página): <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">

En el caso de XHTML 1.1 el DOCTYPE sería:


264 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Se puede observar que es más fiel al lenguaje XML. La etiqueta raíz html sería igual que la anterior.

• HTML 5. Se considera el estándar desde el año 2012. Se ha convirtido en el HTML más utilizado. Se creó fuera del World Wide Web Consortium en la entidad llamada WHATWG (Web Hypertext Application Technology Working Group), auspiciado por Apple y Mozilla entre otras empresas a las que se le han ido añadiendo muchas más.

La W3C decidió unirse a la WHATWG en 2008 para buscar un estándar. Actualmente, la mayoría de páginas nuevas son HTML5. Para ello marcan un DOCTYPE mucho más sencillo:

<!DOCTYPE html>

<html lang="es>

La etiqueta raíz HTML también es más sencilla al no indicar un espacio de nombres.

• XHTML 5. Se trata de una especificación en proceso. Es simplemente HTML 5 pero obligado a usar las reglas de XML bien formado. Es decir es HTML 5 siguiendo lo estricto de XML.

Protocolo http

La transmisión de páginas web (que en definitiva son documentos HTML) se realiza mediante el protocolo http, que es parte de la pila de protocolos TCP/IP. Se trata de un protocolo basado en una comunicación petición-respuesta; de modo que un cliente (también llamado user agent, agente de usuario) realiza una petición de recurso indicando su dirección, y un servidor responde a dicha petición bien transmitiendo al cliente el recurso solicitado o bien indicando un mensaje de error.

La dirección del recurso se indica utilizando la notación URL, que funciona así:

protocolo://servidor:puerto/rutaAlRecurso

En el caso de las páginas web, el protocolo es http. En la parte servidor, se indica la dirección del servidor (por ejemplo www.fedeto.es) y la ruta es la ruta que hay que seguir por las carpetas y archivos del servidor para llegar al recurso. Ejemplo:

http://www.fedeto.es/general/organigrama.html

http://www.fedeto.es/general/organigrama.htm


265 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Permite al navegador mostrar en pantalla la página web organigrama.html alojada en la carpeta general del servidor www.fedeto.es con el que se comunica utilizando el protocolo http (puesto que no se ha indicado puerto, se utilizará el puerto 80).

A veces no se indica la ruta y en ese caso el servidor envía la llamada página por defecto, página de inicio o home page que generalmente es un documento HTML llamado index.html o default.html o home.html y que se ubica en la carpeta raíz del servidor. También es posible indica una home page por cada carpeta del servidor.

La comunicación entre el servidor y el cliente, normalmente se realiza a través del puerto 80. Pero se podría indicar otro puerto, ejemplo (usando el puerto 9123):

http://www.fedeto.es:9123/general/organigrama.html

Publicación de páginas web

Se denomina sitio web al conjunto de páginas web y recursos de las mismas que contienen toda la información asociada a una determinada dirección de inicio en Internet.

Cuando una persona desea crear un nuevo sitio web, inicialmente le crea en su ordenador de trabajo y para ello debe crear una carpeta y en ella almacenar todas las páginas y recursos necesarios (imágenes, sonidos, vídeos, archivos auxiliares,…). Esa carpeta se deberá enviar al servidor web que hayamos contratado o del que dispongamos para publicar nuestra página en Internet.

Para ello normalmente se utiliza el protocolo de transmisión de ficheros conocido como FTP. Con copiar la carpeta en el sitio adecuado de nuestro servidor, la página estará publicada. Normalmente para ello se nos pide un usuario y contraseña que verifica que realmente somos los propietarios del espacio.

Hoy en día las herramientas avanzadas de diseño de páginas web tienen capacidad para transmitir los ficheros al servidor.

2. Fundamentos básicos de HTML y XHTML

HTML y XHTML

La diferencia fundamental entre HTML y XHTML está en el cumplimiento que exigen de XML. Así XHTML es, en definitiva, un dialecto de XML que, por lo tanto, cumple sus reglas de forma absoluta. De tal manera que cumple las reglas del XML bien formado:

• Los elementos se escriben en minúsculas obligatoriamente

http://www.fedeto.es/


266 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• Todo elemento se debe cerrar y además se cierra primero el último que se abrió. Los elementos vacíos también hay que cerrarles (por ejemplo se escribe <br /> para el salto de línea)

• Todos los valores de los atributos van entrecomillados

• Todo atributo debe de tener un valor

• Hay un único elemento raíz (html).

• Los símbolos <, >, & y comillas deben utilizar entidades y no escribirse tal cual.

Sin embargo HTML no es tan estricto y permite que:

• Los valores de los atributos no tienen que ir entrecomillados (a no ser que tengan espacios en blanco)

• No todos los atributos tienen valores. Es decir no siempre se usa atributo=valor hay atributos que no tienen valor

• Las etiquetas HTML se pueden escribir como queramos, en mayúsculas o minúsculas

• Las etiquetas vacías no es obligatorio cerrarlas (se puede escribir <br>)

Sin embargo aunque el reciente HTML 5 vuelve a ser más laxo con las reglas al estilo del HTML clásico, lo cierto es que se aconseja seguir las reglas del XHTML aun cuando se escriba HTML de esa forma podremos validar sin problemas nuestras páginas con herramientas XML.

Estructura de una página web

La estructura básica de una página web cambia según si hablamos de XHTML o de HTML. Como son tantas las posibilidades, en el presente documento hablaremos sólo de las dos versiones más populares en el momento de escribir estos apuntes que son XHTML 1.0 transicional y HTML5. Como ambas representan muy bien tanto a XHTML como a HTML respectivamente, sería fácil descubrir como es el esqueleto de una página web en cualquier otra versión.

XHTML (1.0 transicional)

La estructura de una página XHTML 1.0 transicional que esté escrita en español es: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">

<head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>Título</title>

</head> <body>


267 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Contenido de la página web </body>

</html>

Las partes son:

• La etiqueta DOCTYPE que permite especificar el documento DTD de validación del XHTML de la página. En caso de elegir otra versión de XHTML simplemente hay que cambiar las rutas al documento validador

• Elemento html que marca la raíz de la página y además debe especificar el espacio de nombres al que pertenecen las etiquetas (atributo xmlns) y el lenguaje en el que está escrita (atributo xml:lang).

Es conveniente (aunque el estándar no lo considera obligatorio) utilizar el atributo lang, que es común a todos los elementos HTML y que sirve también para marcar el lenguaje en el que está escrita la página. Usando tanto xml:lang como lang aseguramos que todos los navegadores queden avisados sobre el lenguaje utilizado.

El lenguaje español se puede indicar con es simplemente o usando es-ES que es el símbolo internacional de español de España. Esta terminología sigue los códigos de dos letras definidos en la norma ISO 639-1 (que contiene dos letras para cada lenguaje) y el código de dos letras de país de la ISO 3166-1. Otros ejemplos son:

• ca para catalán

• eu para euskera

• gl para gallego

• fr para francés

• en para inglés

• en-US para inglés de Estados Unidos

• Elemento head que marca el inicio de la cabecera. En la cabecera se coloca el título de la página (elemento title) y los elementos que sirven para incluir estilos CSS, código JavaScript y todo tipo de elementos que se utilizarán dentro de la página.

• La etiqueta meta que advierte sobre el sistema de codificación del texto de la misma. En el código anterior se utiliza el más recomendable, que es UTF-8, Unicode de 8 bits

• Elemento body que contiene el cuerpo de la página, el contenido visible por el navegador.


268 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

HTML5

En el caso de HTML5 la estructura es muy parecida pero simplifica muchas etiquetas:

<!DOCTYPE html> <html lang="es">

<head> <meta charset="UTF-8" > <title> </title>

</head> <body> </body>

</html>

Como diferencias más notables respecto a HTML:

• La etiqueta DOCTYPE está simplificada

• La etiqueta meta es más sencilla para indicar el código del archivo (Unicode)

• El lenguaje se indica sólo con el atributo lang del elemento html.

• El resto de elementos no varía

Espacios en blanco

El texto dentro de las páginas web no mantiene los espacios en blanco, solo se considera el primero no se tienen en cuenta los siguientes. Solo la etiqueta pre permite preservarles (pero no es muy aconsejable su uso, ya que esa etiqueta no nos dice qué tipo de texto tenemos). Ejemplo: <!DOCTYPE html> <html lang="es">

<head> <meta charset="UTF-8"> <title></title>

</head> <body> Este texto tiene

muchos espacios </body>

</html>

El resultado mostraría en la página este texto:

Este texto tiene muchos espacios

Para mantener esas distancias, el texto tendría que estar dentro de un elemento pre, pero no se aconseja el uso de pre porque ayuda a adquirir malos hábitos y dificulta el aprendizaje de las formas avanzadas de maquetar páginas web.


269 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

La entidad permite añadir un espacio en blanco obligatorio. Por lo que si, por ejemplo, la escribimos cuatro veces seguidas, estaremos dejando cuatro espacios en blanco que el navegador sí tendrá en cuenta.

Codificación en HTML

Como Unicode no está realmente adoptado por todos los sistemas, es un peligro que el texto del cuerpo del documento XHTML utilice símbolos como la eñe por ejemplo que están fuera del código ASCII original, a riesgo de que en lugar de una eñe nos encontremos con otro símbolo cuando visualicemos nuestra página. ¿Por qué ocurre esto?

Los navegadores compatibles con HTML4 deben de ser capaces de poder decodificar texto en formato ISO-8859-1 además de en UTF-8 y UTF-16. Por lo que en principio parece que no hay ningún problema para escribir el código que sea. De hecho es cierto que hoy en día los principales navegadores respetan tanto a Unicode como al resto de codificaciones nacionales.

El problema es que nuestro documento HTML puede haber sido codificado usando una tabla distinta a la nuestra en el servidor en el que alojemos la página. Por ejemplo Windows en el bloc de notas por defecto cifra usando la tabla WIN1252 que no es estándar. Y cuando publiquemos por ejemplo en Linux, nos encontraremos con que decodifica con otra tabla. Resultado: los símbolos fuera del ASCII no aparecen como debieran.

Eso provoca que los únicos caracteres que sabemos con seguridad que se codifican igual entre distintos sistemas sean los correspondientes al ASCII original. Por ello desde hace muchos años hay diseñadores de páginas que sólo utilizan caracteres dentro del ASCII original.

Además hay símbolos que no pueden ser escritos como texto normal ya que se malinterpretarían por los navegadores como los símbolos > o < por ejemplo.

El problema es que el ASCII no permite símbolos de otros idiomas como la eñe y por ello se ideó poder escribir códigos nacionales usando una notación especial. Son las entidades.

De este modo para especificar códigos fuera del ASCII, se coloca el símbolo &, seguido del nombre del código y finalizado con el punto y coma. Por ejemplo:

• ñ es la entidad que representa a la eñe. Es lo mismo escribir ñ que escribir ñ

• € para el símbolo €.


270 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

3. Texto en HTML

A diferencia del HTML clásico, en XHTML todo texto debe de estar encerrado en un elemento de párrafo. De esa forma se indica el tipo de texto que es. Los elementos de párrafo más importantes son:

Párrafo simple

Lo marca la etiqueta p. El texto engrosado en una etiqueta p, aparecerá siempre junto sin espacios entre líneas. Por defecto cada párrafo de tipo p se separa con una línea respecto a los otros párrafos. Normalmente los navegadores utilizan el tipo de letra Times de tamaño 11pt para la letra de párrafo normal.

Es una de las etiquetas más utilizadas: <p> Párrafo con un poco de texto </p> <p> Este es un párrafo completo englosado dentro de una etiqueta <em>p</em>, aunque el texto lo escriba con tantos saltos de línea saldrá junto sin ningún salto de línea </p>

En el navegador saldría:

En la imagen se observa el modo en el que el navegador muestra el párrafo

Títulos

Hay una serie de siete etiquetas que comienzan con la letra h y le sigue un número del 1 al 7, que sirven para marcar párrafos que se considerarán títulos del texto. De modo que el número 1 marcará títulos de primer nivel, es decir los títulos principales irán marcados con h1. Después se podría usar h2 para designar párrafos que se considerarán títulos de segundo nivel.

Ejemplo (XHTML completo):


271 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">

<head> <title>Estrellas</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head>

<body> <h1>Sistema Solar</h1> <h2> Planetas</h2> <h3>Mercurio</h3> <p> Mercurio es el planeta del Sistema Solar más próximo al Sol y el más pequeño (a excepción de los planetas enanos). Forma parte de los denominados planetas interiores o rocosos y carece de satélites </p> < h3>Venus</h3> <p> Venus es el segundo planeta del Sistema Solar en orden de distancia desde el Sol, y el tercero en cuanto a tamaño, de menor a mayo </p> <p>...</p> <h2>Sol</h2> <p> El Sol es la estrella del sistema planetario en el que se encuentra la Tierra; por tanto, es la más cercana a la Tierra y el astro con mayor brillo aparente </p> <h2>Satélites</h2> <h3>Luna</h3> <p> La Luna es el único satélite natural de la Tierra y el quinto satélite más grande del Sistema Solar. </p> <h3>Ío</h3> <p> Fue descubierto por Galileo Galilei en 1610 y recibió inicialmente el nombre de Júpiter I como primer satélite de Júpiter. </p> <p>...</p> <h1>Otros Sistemas</h1> <h2>Fomalhaut</h2> <p>Estrella conocida desde la prehistoria ahora se le han descubierto planetas</p> <h2>Vega</h2> <p>Antigua estrella polar, muy venerada. Posee un disco de polvo que podría contener planetas o bien formarse pronto</p>

</body> </html>

En el navegador aparecería:


272 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Líneas y saltos

Salto de línea

A veces es necesario dentro del texto de un determinado párrafo hacer un salto de línea. El elemento que lo realiza no tiene cierre y es br. Ejemplo:

<p>Primera línea <br/>Segunda línea</p>

Aparecerá cada texto en una línea

Línea horizontal

Otra posibilidad es hacer un salto pero dejando una línea horizontal en el hueco de las palabras. Esto lo hace la etiqueta hr (que tampoco tiene cierre):

<p>Primera línea <hr/>Segunda línea</p>

Aunque los navegadores entienden este código. En realidad hr tiene que estar fuera de las etiquetas de párrafo, es decir lo correcto es:

<p>Primera línea </p>

<hr/> <p>Segunda línea</p>

Resultado


273 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Elementos para marcar el texto

Resaltado básico de caracteres

Son elementos que permiten marcar el texto de forma especial.

• Negrita

Lo hace el elemento strong y también (aunque se considera en desaparición) el elemento b (de bold, negrita).

• Cursiva

El elemento em y también i (de italic, aunque también en desaparición).

• Subíndice

Permite que el texto aparezca por debajo de la línea base y en un tamaño más pequeño. Lo hace el elemento sub, ejemplo:

<p>La fórmula del agua es H<sub>2</sub>O</p>

Obtendría: H2O

• Superíndice

Parecida al anterior, pero ahora el texto marcado con el elemento sup aparecerá por encima y en pequeño. Ejemplo:

<p>La fórmula del agua es H<sup>2</sup>O</p>

Obtendría: H2O

Marcado avanzado de caracteres

En realidad son elementos poco utilizados para marcar texto, pero son muy interesantes para dar significado al mismo. La esperanza es que en el futuro haya cada vez más herramientas software capaces de manipular de forma adecuada estos elementos y así poder dar grandes posibilidades al texto escrito de las páginas web.

abbr Indica una abreviatura (por ejemplo O.N.U.). <abbr title="Su Alteza Real">SAR</abbr>

acronym Indica un acrónimo (por ejemplo tlfno) <acronym title="Teléfono">tlfno</acronym> En algunos navegadores una línea punteada bajo las abreviaturas y acrónimos permite indicar al usuario que al arrimar el ratón se explican los mismos

dfn Permite indicar la definición de un término: <dfn title="usar dos conceptos de significado opuesto en una sola expresión">oxímoron</dfn> Los navegadores suelen mostrar este texto en negrita


274 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

4. Listas

Las listas permiten crear párrafos agrupados y alineados mediante símbolos como viñetas o números y además crean párrafos alineados de forma especial para su correcta visibilidad.

Listas con viñetas

Las listas con viñetas se deben englobar dentro de un elemento ul (de unordered list, lista no ordenada), después cada párrafo de la lista estará dentro de elementos de tipo li (de list item, elemento de lista). Ejemplo:

<ul> <li>Agua</li> <li>Vino</li> <li>Cerveza</li>

</ul> Resultado:

• Agua • Vino • Cerveza

Listas numéricas

Las listas numéricas aparecen dentro del elemento ol (de ordered list, lista ordenada), después cada párrafo de la lista estará dentro de elementos de tipo li, al igual que las anteriores. La diferencia ahora es que cada párrafo con li, aparece con un número y no con una viñeta. Ejemplo:

<ol> <li>Agua</li> <li>Vino</li> <li>Cerveza</li>

</ol> Resultado: 1. Agua 2. Vino 3. Cerveza

Listas anidadas

Es posible meter unas etiquetas con otras, por ejemplo: <ul>

<li> No alcohólicas <ul>

<li>Agua</li> </ul>

</li> <li> Alcohólicas

<ul>


275 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

<li>Vino</li> <li>Cerveza</li>

</ul> </li>

</ul>

Con el resultado: • No alcohólicas

o Agua • Alcohólicas

o Vino o Cerveza

También es posible anidar mezclando tipos de listas: <ol>

<li> No alcohólicas <ul>

<li>Agua</li> </ul> </li>

<li> Alcohólicas <ul>

<li>Vino</li> <li>Cerveza</li>

</ul> </li>

</ol>

Con el resultado: 1. No alcohólicas

• Agua 2. Alcohólicas

• Vino • Cerveza

Listas de términos

Permite crear una lista de definiciones de términos. En ellas se indica el término a definir y su definición. Ejemplo: <dl>

<dt>Windows</dt> <dd> Sistema operativo de <strong>Microsoft</strong> disponible para PC disponible en versiones de 32 y 64 bits y para servidores, ordenadores e incluso tabletas y móviles.<br /> La última versión es la 8 y la 2012 para servidores. </dd> <dt>Linux</dt> <dd> Sistema operativo de código abierto disponible en numerosas distribuciones gratuitas y de pago. Es la base del sistema <strong>Android</strong>. </dd> <dt>Mac OS</dt> <dd> Sistema operativo de los ordenadores de la empresa <strong>Apple</strong> <br /> La última versión es la <strong>Snow Lion.</strong> </dd>

</dl>


276 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Resultado: Windows

Sistema operativo de Microsoft disponible para PC disponible en versiones de 32 y 64 bits y para servidores, ordenadores e incluso tabletas y móviles. La última versión es la 8 y la 2012 para servidores.

Linux Sistema operativo de código abierto disponible en numerosas distribuciones gratuitas y de pago. Es la base del sistema Android.

Mac OS Sistema operativo de los ordenadores de la empresa Apple La última versión es la Snow Lion.

5. Imágenes

Introducción

Las imágenes son fundamentales para que una página web sea más atractiva. Los navegadores no reconocen todas las imágenes, pero sí los formatos más importantes. Fundamentalmente:

Formato jpg. Son imágenes que ocupan muy poco gracias a su alta compresión. No admiten animaciones ni zonas marcadas con transparencia. Son el formato habitual de la fotografía digital.

Formato gif. Imágenes con hasta 256 colores que pueden contener animaciones y zonas marcadas como transparentes, a través de las cuales se mostraría lo que esté por debajo de la imagen. Son buenas para hacer animaciones (los populares gif animados) y para mostrar dibujos (que no fotos) en las páginas.

Formato png. Está considerado como el mejor de los tres porque aúna ambas ventajas. Permite imágenes fotográficas con alta compresión y posibilidad además de utilizar canales alfa (zonas que permiten transparencia como los gif, pero además que admiten semitransparencias, mezclando colores de la imagen con los colores de los elementos que están por debajo de la imagen).

El tamaño en disco de las imágenes puede ser mayor o menor dependiendo de su tamaño y su compresión. De modo que un tamaño grande implica más tardanza al cargar la página, pero una mayor nitidez en la imagen.

Inserción de imágenes

Las imágenes se colocan mediante el atributo src, en el cual se indica la URL (relativa o absoluta) a la imagen. Además conviene utilizar estos atributos:

ATRIBUTO SIGNIFICADO

alt Indica un texto alternativo. Ese texto aparece cuando la imagen no se ha podido cargar (o durante la carga). También suele aparecer cuando arrimamos el cursor a la imagen a fin de informarnos sobre ella.


277 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Es un texto también tenido en cuenta por los buscadores a fin de identificar lo que muestra la imagen.

width Anchura de la imagen. No es aconsejable usarle para cambiar el tamaño de la imagen, ya que si la ampliamos no se verá en buena calidad y si la reducimos estaremos cargando una imagen grande para luego mostrarla en pequeño; sería más inteligente reducirla primero con un editor de imágenes. En cualquier caso es importante utilizar este atributo para que el navegador sepa de antemano el tamaño de la imagen y así que maquete la página correctamente.

height Altura de la imagen. Tiene las mismas connotaciones que el atributo anterior.

Imágenes de fondo

El elemento body dispone de un atributo llamado background, con el que se permite indicar una imagen de fondo.

Mapas de imagen

Se trata de una técnica que permite seleccionar partes de una imagen a fin de que esas partes formen enlaces a otras páginas. Se utiliza en mapas propiamente dichos, en los que el usuario selecciona partes de la imagen y en imágenes donde hay elementos claramente destacados.

Los mapas se basan en una imagen previamente colocada en la página web mediante la etiqueta img. La etiqueta que indica que la imagen es un mapa es la etiqueta map. En dicha etiqueta se debe utilizar el atributo name para poner nombre al mapa de imágenes. El contenido de name es un identificador (por lo que no puede tener espacios en blanco ni nada que no sean letras del alfabeto inglés, números o guion bajo) que pondrá un nombre único al mapa.

Para que el mapa se asocie a la imagen correspondiente, la etiqueta img de la imagen debe utilizar el atributo usemap. En dicho atributo se hace referencia al nombre usando el carácter # seguido del nombre del mapa.

La etiqueta map debe contener dentro tantos elementos area como secciones en el mapa queramos crear. En cada elemento área rellenaremos dos atributos: shape (forma del área) y coords (coordenadas del área). Las posibilidades de este elemento son:

• area="rect". Permite seleccionar un rectángulo en la imagen. En este caso el atributo coords indicará cuatro coordenadas. Las dos primeras marcan la coordenada X y la coordenada Y de la esquina superior izquierda de la imagen, las dos últimas las coordenadas X e Y de la esquina inferior derecha. Las coordenadas cuentan desde la esquina superior izquierda (que serían las coordenadas 0,0).


278 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• area="circle". Selecciona una región circular en la imagen. El atributo coords tendría tres coordenadas: las dos primeras son la coordenada X e Y del centro del círculo y la tercera el radio del mismo.

• area="poly". Permite indicar una región poligonal. El atributo coords permite indicar las coordenadas X e Y de cada punto del polígono. Al final se cerrará el polígono.

• area="default". Hace lo mismo que la opción rect.

Además de estos atributos, en la etiqueta area deben rellenarse los atributos:

• alt. Texto alternativo en el área de la imagen, al igual que en la etiqueta img.

• href. Funciona como el atributo del mismo nombre en la etiqueta a: indica una URL a la que se dirigirá el navegador cuando el usuario haga clic sobre la imagen.

Por ejemplo en la siguiente imagen se detallan las coordenadas necesarias para hacer un mapa con tres áreas, una sobre cada forma geométrica de la misma:

Si deseamos que al hacer clic en el cuadrado, el círculo y la forma libre saltemos a otra dirección necesitamos conocer las coordenadas (en esto nos pueden ayudar los programas de retoque gráfico). En esta imagen se muestran las coordenadas necesarias:


279 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

El código HTML para hacer el mapa sería (suponiendo que la imagen se llama formas.jpg): <img src="formas.jpg" alt="Formas geométricas básicas" usemap="#formas" ismap="ismap" /> <map name="formas" id="formas"> <area shape="rect" coords="62,65,171,177" href="rectangulo.html" alt="Rectángulo" /> <area shape="circle" coords="369,116,84" href="circulo.html" alt="Círculo" /> <area shape="poly" coords="113,308,242,230,401,252,556,157,463,324,287,284"href= "poligono.html" alt="Polígono" /> </map>

El uso del atributo id en el elemento map no es obligatorio para que el mapa funcione, pero sí es necesario para cumplir la especificación XHTML donde se intentaba retirar el atributo name para sustituirle por id.

Elemento canvas

En inglés canvas significa lienzo, y define muy bien para que sirve este elemento creado para HTML5. Es uno de los componentes, de hecho, de HTML5 más famosos por el gran aporte que ha supuesto al dinamismo de las páginas web.

Mediante este elemento dispondremos de un área que podremos utilizar donde queramos para dibujar elementos gráficos mediante lenguaje JavaScript. Eso ha permitido (gracias a la potencia de JavaScript crear juegos, animaciones y elementos visuales atractivos en las páginas web).

Atributos de canvas

• id. Es el atributo que utilizan todos los elementos HTML para identificarles. En el caso de canvas es casi obligatorio su uso para poder hacer referencia al mismo.

• width. Anchura del lienzo (funciona igual que en el caso de img)

• height. Altura del lienzo.

Ejemplo de uso de canvas (usando JavaScript):

<canvas id="lienzo1" width="600" height="400" /> <script type="text/javascript">

var canvas=document.getElementById("lienzo1"); var contexto=canvas.getContext("2d"); contexto.lineWidth=2; for(i=0;i<=600;i+=20){

contexto.moveTo(0,0); contexto.lineTo(i,400) contexto.stroke();

} </script>tablas


280 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Mediante la etiqueta script podemos colocar código en lenguaje JavaScript, desde ese código podemos utilizar el lienzo para dibujar. El resultado del código anterior es la imagen:

Es un elemento que no está reconocido en muchos navegadores (aunque sí en todos los modernos).

Etiqueta svg

El lenguaje SVG es un lenguaje ya veterano basado en XML que sirve para dibujar gráficos en una página web. Está aceptado desde hace tiempo por la W3C, sin embargo pocos navegadores soportan todavía esta etiqueta. Sin embargo HTML 5 sí soporta el uso de SVG. La forma de incorporar SVG en un documento HTML 5 es mediante la etiqueta svg:

<svg xmlns="http://www.w3.org/2000/svg"> etiquetas svg </svg>

Dentro del elemento svg se colocan las etiquetas que permiten dibujar en el área del svg. En principio, si no indicamos tamaño, todo el área de la página web se toma para dibujar en svg, pero podemos indicar los atributos width y height para indicar tamaños concretos.

Las etiquetas que se pueden utilizar dentro de svg pertenecen al lenguaje SVG y rebasan el propósito de este curso, pero un ejemplo de ellas sería: <svg xmlns="http://www.w3c.org/2000/svg" height="400"> <rect id="rec1" x="50" y="50" width="300" height="100" fill="red" /> <ellipse id="elips1" cx="200" cy="100" rx="50" ry="75" fill="blue" /> </svg>

Lenguaje MathML. Etiqueta math

El lenguaje MathML es un clásico de los lenguajes derivados de XML y ya se considera parte de HTML 5. Aunque no sirve para incrustar imágenes, permite colocar fórmulas matemáticas por complejas que sean.

No todos los navegadores soportan añadir código MathML a una página web, pero poco a poco cada vez son más los que lo permiten. Ejemplo de código MathML:

<math> <msub><mi>x</mi><mtext>0</mtext></msub> <mo>=</mo> <mn>2</mn> <msup> <mfenced open="(" close=")"> <mfrac> <msup> <mi>y</mi><mn>2</mn> </msup> <msup> <mi>z</mi><mn>3</mn> </msup> </mfrac> </mfenced> <mn>2</mn> </msup> </math>

Obtiene el resultado:


281 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

6. Enlaces

URLs

Una URL (Uniform Resource Location) es la dirección concreta de un recurso (una página web, una imagen, un vídeo, un directorio,…) en Internet.

La gracia es que cada URL es única con lo que es una especie de DNI de un recurso. Si la URL es correcta sólo habrá un solo recurso posible al que se puede referir dicha URL.

Una URL se forma usando:

• El protocolo. Ejemplos:

o http:// (para recursos de la web)

o https:// (para recursos de la web contenidos en un servidor seguro)

o ftp:// (recursos contenidos en un servidor de ficheros)

o ftps:// (recursos contenidos en un servidor de ficheros seguro)

o mailto: (dirección de correo electrónico)

o file:/// (recurso dentro de nuestra propia computadora)

• Servidor. Nombre completo en Internet del servidor que aloja el recurso al que deseamos acceder. Por ejemplo: www.nasa.gov, www.fedeto.es o www.jorgesanchez.net

• Puerto. Puerto por el que se debe conectar con el servidor para obtener el recurso. Si no se indica (que es lo habitual) se toma el puerto por defecto. Por ejemplo en http se usa el 80. Si queremos usar uno en particular se indica tras el servidor poniendo dos puntos y el puerto. Por ejemplo www.midb.com:1521

• Ruta. Indica el recorrido dentro del servidor que hay que hacer en sus directorios para llegar al recurso que queremos. Se pone después del servidor. Ejemplos:

o /index.html Accede a la página index.html situada en la raíz del servidor.

o /imagenes/paisajes/foto001.jpg Accede a la imagen foto001.jpg dentro del directorio paisajes dentro, a su vez, del directorio paisajes

282 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• Cadena de búsqueda. Sólo aparece tras direcciones a páginas web que admitan recibir parámetros (como las páginas PHP, ASP o JSP por ejemplo).

Ejemplo ?pagina=5&idioma=es, pasará los parámetros pagina y lenguaje usando los valores 5 y es respectivamente.

Ejemplo de URL completa: www.ejemplourl.com:9000/dirs/srv/pagina1.php?a=90&r=7

Por otro lado los caracteres presentes en una URL deben de pertenecer al ASCII, de otro modo tendremos el sempiterno problema de que no se lea bien la URL por diferentes tipos de codificación del texto. De hecho los caracteres permitidos en una URL son:

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 0 - _ ~ .

Cualquier otro no es válido aunque sí aparecen los siguientes pero sólo para indicar elementos con significado especial (recorridos de la ruta, elementos de la parte de consulta de la URL,…). Estos símbolos están reservados para un uso concreto y no se pueden utilizar para ningún otro:

! # $ % & ' ( ) * + , / : ; = ? @ [ ]

Si una dirección URL requiere utilizar símbolos más allá de estos definidos, entonces necesitamos codificar dicho símbolo

Si necesitamos codificar en la URL símbolos fuera de los caracteres permitidos entonces debemos codificarlos usando una notación que comienza con el símbolo % y le sigue el código hexadecimal correspondiente en el código ASCII.

Crear enlaces

Dentro de una página web se pueden colocar enlaces que permitan cuando arrimamos el ratón hacer clic y que se cargue y se lance el destino de una URL. La etiqueta que permite realizar enlaces es la etiqueta a. El atributo href permite indicar la URL a la que se realiza el salto. Ejemplo:

A Augusto le sucedió el emperador <a href="http://es.wikipedia.org/wiki/Tiberio">Tiberio</a>

La palabra Tiberio estará remarcada de modo que al hacer clic saltaremos a la URL http://es.wikipedia.org/wiki/Tiberio.

Ese ejemplo muestra un salto absoluto, es decir el enlace nos lleva a una dirección URL global. Pero es posible que el salto nos dirija a un recurso presente en nuestro propio servidor. Ejemplos:

 <a href="tiberio.html">Tiberio</a>

283 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.



<a href="emperadores/tiberio.html">Tiberio</a>  <a href="../tiberio.html">Tiberio</a>  <a href="../emperadores/tiberio.html">Tiberio</a>

Atributos del elemento a

Realmente el único de obligado uso es href, pero es posible utilizar los siguientes atributos (además de los atributos comunes a todas las etiquetas comentados anteriormente):


hreflang Permite indicar un código de lenguaje (es, fr, en,…) indicando el lenguaje en el que está escrito el destino del enlace

media Sólo válido en HTML5, permite indicar el medio idóneo para mostrar el contenido del enlace.

target Permite indicar cómo se muestra la página de destino. Posibilidades: - _blank. Abre el enlace en una nueva página - _parent. Abre el enlace en el marco de la página padre de ella. - _top. Abre la página en el marco superior - _self. Abre la página en el marco actual - nombre. EL nombre indicado será el del marco en el que se abrirá la página Salvo el primero, el resto no se usan por referirse a marcos.

rel Informa sobre la función del enlace. Puede ser: - alternate. Enlace alternativo - author. - bookmark. Página de marcadores - help. Página de ayuda - license. Información sobre la licencia - next. Si nuestra página pertenece a una serie ordenada, el enlace nos lleva al siguiente elemento dentro de la serie. - nofollow. Marca que los robots de búsqueda de empresas como Google no tengan en cuenta los enlaces externos y así evitar que dichos enlaces en las páginas se utilicen para subir su calificación en los buscadores. Así se ignoran por los robots los enlaces marcados de esta forma. - noreferrer. Un referrer es la información relativa a la página desde la que procede el visitante a un sitio. Con este valor en los enlaces, no se indicará al destino URL la página desde la que procedía el usuario. - prefetch. Permite descargar el enlace antes de que el usuario haga clic en él y así acelerar su carga. Se usa (aunque pocos navegadores soportan este valor) en enlaces de uso habitual.


284 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

- prev. Si nuestra página pertenece a una serie ordenada, el enlace nos lleva al elemento anterior dentro de la serie. - search. Página de búsqueda dentro de nuestro sitio web. - tag. Página con etiquetas de temas (tags) de nuestro sitio web.

Enlaces internos

Hay un estilo de enlace que permite saltar a un punto concreto del documento. Se realiza de esta forma:

(1) Se marca una posición en el documento usando la etiqueta a con el atributo id al que se le indica un identificador que servirá de marcador de la posición. Ejemplo:

<a id="salto1" />

(2) Ponemos el enlace donde deseemos e indicamos en el atributo href el nombre del marcador indicado, pero anteponiendo al nombre el símbolo de la almohadilla (#). Ejemplo:

<a href="#salto1">Ir a la posición</a>

Aunque id es el atributo aconsejado actualmente para marcar una posición, lo cierto es que tradicionalmente se usaba el obsoleto atributo name. Puesto que hay navegadores que no reconocen el marcado de posiciones con id, conviene utilizar name (además de id).

Por otro lado es posible indicar direcciones de enlace que salten a una página y dentro de ella se coloque en una posición marcada, por ejemplo:

< a href="http://www.colegio.edu/seccion1/actividades.html#verano"> Ver actividades de verano </a>

El enlace del ejemplo salta a la página actividades.html localizada en la ruta indicada y además se coloca en la posición indicada por la etiqueta marcada con el valor verano.

7. Tablas


285 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Las tablas son uno de los elementos fundamentales de HTML para mejorar la puesta visual de las páginas web. Una tabla normal es un conjunto de filas y columnas en las que se dispone el texto o las imágenes que deseemos.

Las tablas HTML permiten todo tipo de formato y en especial permiten unir varias celdas para formar tablas con una disposición irregular, lo que permiten diseñar disposiciones muy complejas en las páginas. Aún más: se permite incluso colocar una tabla dentro de una celda lo que aún permite más libertad en la maquetación de páginas.

Tablas simples

La definición de una tabla comienza con la etiqueta table, por cada fila se indica tr y por cada columna se indica td. En HTML 5 y XHTML a la etiqueta table sólo se le permite el atributo border para indicar la anchura del borde de la tabla (además de, por supuesto, los atributos comunes a todos los elementos de HTML como id, lang,…).

. Ejemplo de tabla: <table border="1"> <tr>

<td></td> <td>Lunes</td> <td>Martes</td> <td>Miércoles</td> <td>Jueves</td> <td>Viernes</td>

</tr> <tr>

<td>10:30</td> <td>Matemáticas</td> <td>Geografía</td> <td>Física</td> <td>Dibujo</td> <td>Matemáticas</td>

</tr> <tr>

<td>11:30</td> <td>Inglés</td> <td>Lenguaje</td> <td>Geografía</td> <td>Química</td> <td>Física</td>

</tr> </table>

Sale:


286 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Atributos de la etiqueta table

En realidad actualmente en los estándares tanto XHTML como HTML5 sólo se permite el atributo border, pero aun funcionan todos los que vamos a comentar aquí en los navegadores. La razón de que no se usen se debe a que mediante CSS podemos conseguir un mejor resultado. Los atributos son:


border Indica la anchura en píxeles del borde de la tabla

cellpadding Especifica el espacio en píxeles entre el borde de la celda y el contenido de la misma. En definitiva es el espacio interior de la celda.

cellspacing Espacio en píxeles existente entre celda y celda

width Anchura de la tabla, puede ser en píxeles o en porcentaje sobre la anchura de la página (usando el signo %)

rules

Indica qué bordes de la tabla se mostrarán. Posibilidades: none. Sin líneas groups. Pone líneas sólo para separar las etiquetas de grupos rows. Bordes horizontales (entre filas) cols. Bordes verticales (entre columnas) all. Todos los bordes de la tabla

Celdas de cabecera

Es muy habitual que las tablas muestren datos y que estos posean celdas que sirvan para describirles. Esas celdas se consideran de cabecera y se marcan con th.

Ejemplo: <table border="1">

<tr> <th> </th> <th>Lunes</th> <th>Martes</th> <th>Miércoles</th> <th>Jueves</th> <th>Viernes</th>

</tr> <tr>

<th>10:30</th>


287 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

<td>Matemáticas</td> <td>Geografía</td> <td>Física</td> <td>Dibujo</td> <td>Matemáticas</td>

</tr> <tr>

<th>11:30</th> <td>Inglés</td> <td>Lenguaje</td> <td>Geografía</td> <td>Química</td> <td>Física</td>

</tr> </table>

En el resultado sólo se aprecia que el navegador colorea en negrita las celdas de cabecera. Pero con ayuda de CSS podríamos diferenciarlas más (como veremos en el siguiente tema).

Títulos en las tablas

A las tablas se les puede poner un título con ayuda de la etiqueta caption. Ejemplo: <table border="1">

<caption>Ventas</caption> <tr>

<th>Hardware</th> <td>12.190 €</td>

</tr> <tr>

<th>Software</th> <td>9.870 €</td>

</tr> </table>

Resultado:

Etiquetas de agrupación de elementos de una tabla

Hay tres elementos HTML que sirven para diferenciar las tres partes principales de una tabla, son:

• thead. Sirve para indicar las filas que forman la cabecera de la tabla

• tfoot. Indica el pie de la tabla


288 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• tbody. Indica el cuerpo de la tabla

De esa forma se podrá más adelante dar un formato difente a cada parte. Ejemplo de uso:

<table border="1" rules="groups"> <caption>Ventas por secciones</caption> <thead>

<tr> <td> </td> <td>Hardware</td> <td>Software</td>

</tr> </thead> <tfoot>

<tr> <th>Total</th> <th>25000</th> <th>22000</th>

</tr> </tfoot> <tbody>

<tr> <th>Enero</th> <td>12000</td> <td>15000</td>

</tr> <tr>

<th>Febrero</th> <td>13000</td> <td>9000</td>

</tr> </tbody> </table>

Resultado:

Combinar celdas

Es posible unir celdas y de esta forma conseguir tablas de formas caprichosas que permiten una maquetación más poderosa. Las etiquetas de columna (td y th) son las que poseen los atributos que permiten esta operación. En concreto son los atributos:



289 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

colspan Combina la celda actual con el número de celdas a la derecha que se indique. Por ejemplo colspan="3" une esta celda con las dos que tiene a su derecha, formando una combinación de tres celdas en horizontal.

rowspan Combina la celda actual con el número de celdas hacia abajo que se indique. Por ejemplo rowspan="3" une esta celda con las dos que tiene hacia abajo, formando una combinación de tres celdas en vertical.

Ejemplo de uso: <table border="1" width="100%">

<tr> <td> </td> <td> </td> <td colspan="2"> </td>

</tr> <tr>

<td> </td> <td colspan="2"> </td> <td rowspan="2"> </td>

</tr> <tr>

<td rowspan="3"> </td> <td> </td> <td> </td>

</tr> <tr>

<td colspan="3"> </td> </tr> <tr>

<td colspan="3"> </td> </tr>

</table> Resultado:

Tablas dentro de tablas

Para generar tablas aún más complejas, se pueden meter elementos table, dentro de otras tablas. Lo que se hace es meter una etiqueta table (con todos sus elementos de fila y columna) en un td o th.

Esta combinación permite realizar formatos de tabla a capricho y de esa forma conseguir disposiciones de páginas extremadamente complejas.


290 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

8. Formularios

Los formularios son un elemento en las páginas web que permiten recabar información para enviarla a un servidor de aplicaciones y que la procese. Por ejemplo podemos colocar cuadros de texto en los que el usuario pone sus datos y estos pasan a una página PHP que tendrá la capacidad de recoger dichos datos y actuar en consecuencia.

Ejemplo de formulario:

Etiqueta form

Todo formulario HTML comienza con una etiqueta form, dentro de ella se colocan todos los controles del formulario. Fundamentalmente la etiqueta form posee dos atributos:

• action. Es el atributo que contiene la URL de la página web o servicios que procesará los datos del formulario.

• method. Permite indicar qué instrucción http utilizaremos para pasar la información al destino de nuestro formulario. Las opciones habituales son GET y POST. No se distingue entre mayúsculas y minúsculas. La diferencia es que GET genera una cadena de búsqueda en la URL que contiene los datos del formulario; POST, por su parte, pasa los datos pero de forma más oculta.

Ejemplo:

<form action="control_form.php" method="GET"> … </form>

Cuadros de texto, input type="text"

Los cuadros de texto permiten recoger el texto que escriba el usuario. Su sintaxis:

<input type="text" name="nombre" />

Muestra en la página un cuadro en el que el usuario puede introducir texto. Además podemos utilizar estos atributos:

• value. Da un valor inicial al cuadro, se usa para indicar un texto de ayuda al relleno.


291 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• id. Identificador del cuadro. La W3C (organismo que estandariza XML y HTML) recomienda usar id en lugar de name, pero lo cierto es que PHP recoge los valores gracias a name, no funciona con id. Por lo que para más seguridad los diseñadores suelen utilizar ambos atributos.

Ejemplo: <form action="control_form.php" method="get">

Escriba su nombre y apellidos <input type="text" name="nombre" />

</form>

Ese código da como resultado:

Atributos de los cuadros de texto

Todos los cuadros de texto tienen los siguientes atributos:

ATRIBUTO POSIBLES VALORES USO

maxlength Números Indica el máximo número de caracteres que se le permitirá escribir al usuario.

size Números Anchura, en caracteres, del cuadro de texto. No tiene sentido que sea mayor que el anterior (sí que sea menor)

value Texto Permite rellenar el cuadro con un texto inicial

En realidad estos atributos los usan todos los tipos de cuadros.

Cuadro de contraseñas, input type="password"

Funcionan como los cuadros de texto, sólo que el texto que se introduce se oculta, mostrando sólo puntos o asteriscos. La sintaxis es:

<input type="password" name="nombre" />

Usa los mismos atributos que los cuadros de texto. Si usamos método GET, la contraseña es visible en la parte superior del navegador. Con POST esto no ocurre, pero aun así podríamos averiguarla. Por ello lo ideal es pasar cifrada la contraseña.

Botones

Los botones son controles del formulario en los que no se puede escribir, lo que sí permiten es cargar una imagen mediante su atributo src (que funciona como el atributo src de las imágenes)


292 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Botón de envío: input type="submit"

Sirve para llevar a cabo la comunicación entre el formulario y la página que recoge sus datos. La sintaxis es:

<input type="submit" value="texto del botón" />

En cuanto se pulsa este botón, los datos del resto de controles se envían a la página receptora del formulario (que se corresponde a la URL indicada en el apartado action de la etiqueta form).

Botón de restablecer: input type="reset"

La sintaxis de este botón es: <input type="reset" value="texto del botón" />

Este tipo de botones lo que hacen es anular los datos que se han introducidos en los controles del formulario. Deja todos los controles en su estado inicial.

Botón genérico: input type="button"

Un botón genérico se marca indicando type="button" en la etiqueta type. En los formularios no se usa para enviar o configurar la información, sino que se utiliza, normalmente, para capturar su pulsación (mediante JavaScript es lo más habitual) y responder en consecuencia.

Botones de radio

Se trata de un control fácil de usar que permite elegir una de entre varias opciones. Todas las opciones deben de tener el mismo nombre y sólo cambia el valor de las mismas.


<p>Sexo:</p> <input type="radio" name="sexo" value="hombre"/>Hombre<br /> <input type="radio" name="sexo" value="mujer" checked="checked"/>Mujer<br />

</form>

El resultado es:

El atributo checked (que sólo admite el valor checked) hace que el botón en el que se usa, aparezca marcado por defecto


293 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Casillas de verificación

Se usan igual que los botones de radio, aunque no se recomienda agrupar varios con el mismo nombre; no porque no se pueda, sino porque las casillas se asocian a valores que se activan o desactivan.

La diferencia es que el tipo (type) es checkbox en lugar de radio. También posee el atributo checked para que inicialmente la casilla aparezca pulsada.


<p>Sexo:</p> <input type="checkbox" name="sexo" value="hombre"/>Hombre<br /> <input type="checkbox" name="sexo" value="mujer" checked="checked"/>Mujer<br /> Estado civil: Casado <input type="checkbox" name="estadocivil" value="casado" checked="checked"/><br />

<input type="submit" value="Enviar" /> </form>

El resultado:

Cuadros combinados

Un cuadro combinado permite el uso de una lista de opciones en la que se puede elegir la deseada. Todo cuadro comienza con una etiqueta select que es la encargada de dar nombre (name) al control. Dentro cada opción del cuadro se indica con una etiqueta option a la que se da valor mediante el atributo value. Dentro de la etiqueta option se coloca el texto que verá el usuario.

Ejemplo:

<form action="control_form.php" method="get"> <select name="provincia">

<option value="av">Albacete</option> <option value="bu">Ciudad Real</option> <option value="l">Cuenca</option> <option value="p">Guadalajara</option> <option value="sg">Toledo</option>

</select> <input type="submit" value="enviar"/>

</form> Resultado:


294 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Se pueden agrupar opciones dentro del cuadro usando el elemento optgroup. Ejemplo:

<form action="control_form.php" method="get"> <select name="provincia">

<optgroup label="Comunidad Madrid"> <option value="s">Madrid</option>

</optgroup> <optgroup label="Castilla La Mancha">

<option value="av">Albacete</option> <option value="bu">Ciudad Real</option> <option value="l">Cuenca</option> <option value="p">Guadalajara</option> <option value="sg">Toledo</option>

</optgroup> </select> <input type="submit" value="enviar"/>

</form> Da como resultado:

Cuadro de selección de archivo

Cuando se usa type="file" en una etiqueta input, entonces aparece un botón que al pulsarle hace aparecer un cuadro de selección de archivos mediante el cual podremos elegir un archivo. La ruta local a dicho archivo es lo que se guarda para ser enviado al sitio o página que recibe los valores del formulario. Ejemplo:

<form action="recogida1.php" method="get">

Elija el archivo <input type="file" name="archivo" /> <input type="submit" value="enviar"/><br />

</form>

Resultado:

Al pulsar seleccionar archivo aparece un cuadro, cuando elijamos el archivo aparece su ruta, que será lo que se envíe con el formulario.


295 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Cuadro de texto multilínea

La etiqueta textarea permite colocar un cuadro de texto de varias líneas para que el usuario pueda introducir un texto largo. El atributo rows permite indicar la altura en líneas de texto del cuadro y el atributo cols, la anchura en caracteres (los demás atributos son como los de la etiqueta input type="text". Ejemplo:

<form action="control_form.php" method="get">

Escribe un texto descriptivo: <br /> <textarea rows="10" cols="40" name="texto"></textarea><br /> <input type="submit" value="enviar"/><br />

</form>

Resulta:

Entre la etiqueta textarea se puede colocar texto que aparecerá inicialmente dentro del cuadro.

Agrupación de controles: fieldset

La etiqueta fieldset permite agrupar controles para que visualmente sea más cómodo el relleno de los controles. Visualmente los controles aparecerán recuadrados y se suele utilizar una etiqueta inmediatamente interior a fieldset que es legend que contiene el texto que encabezará al grupo de controles.


<fieldset > <legend>Datos personales</legend> <input type="radio" name="sexo" value="hombre"/>Hombre<br /> <input type="radio" name="sexo" value="mujer" checked="checked"/>Mujer <br /> Estado civil: Casado <input type="checkbox" name="estadocivil" value="casado" checked="checked"/> <br/>

</fieldset> <input type="submit" value="Enviar" />

</form>

El resultado:


296 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

9. Controles HTML 5

El estándar HTML 5 ha mejorado notablemente los formularios gracias a nuevos controles. Con cada versión los navegadores soportan más controles de HTML 5 pero hay controles que algunos navegadores no permiten utilizar. Cuando un navegador no comprende un control HTML 5, suele traducirle como un cuadro de texto normal.

Cuadros de texto especializados

La diferencia entre ellos es el uso del atributo type. Los buenos navegadores que reconocen estos cuadros, varían su uso para adaptarles a su función y así facilitar al usuario la entrada de datos. De hecho los navegadores validan los datos y no les dejan enviar hasta que sean correctos. Posibilidades:

• input type="number". Acepta sólo números. El navegador se asegura de no aceptar texto. El atributo maxlength permite indicar un valor máximo para el cuadro. Si, por ejemplo, ponemos maxlength="5" y entonces sólo se aceptarán cinco caracteres.

• input type="email". Acepta sólo direcciones de correo electrónico

• input type="url". Acepta sólo direcciones URL.

• input type="date". Acepta sólo fechas válidas. Usa el formato de fecha configurado en el sistema operativo del usuario que visita la página. Los navegadores además proporcionan un cuadro visual más sencillo para recoger la fecha.

• input type="time". Acepta sólo horas válidas; funciona igual que el cuadro anterior.

• input type="datetime". Acepta fecha y hora.

• input type="month". Acepta sólo números del 1 al 12, referidos a un mes.

• input type="search". Presenta un cuadro de texto pensado para hacer búsquedas.

• input type="tel". Permite introducir números de teléfono.

• input type="range". Presenta un control para elegir datos entre un rango. Los atributos max y min establecen el rango máximo y mínimo del control. El atributo step indica cuánto se mueve el control (si de uno en uno, de dos en dos,…).

• input type="color". Presenta un control de selección de colores. El color se toma en formato #xxxxxx donde cada x es una cifra hexadecimal. Es decir lo toma en el formato habitual de colores de HTML.

Etiquetado de controles

En lugar de poner la información de los controles poniendo texto directamente, se recomienda usar la etiqueta label que utiliza un atributo for que sirve para asociar el texto interno a la etiqueta label respecto al nombre del control que se indica con el


297 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

atributo for. Esto permite una mejor usabilidad (los navegadores reconocen label y, por ejemplo, al hacer clic en el texto de la etiqueta, el control asociado recibe el foco).

El ejemplo del cuadro de texto multilínea usando label sería: <form action="control_form.php" method="get">

<label for="texto">Escribe un texto descriptivo:</label> <textarea rows="10" cols="40" name="texto" ></textarea><br /> <input type="submit" value="enviar"/><br />

</form>

Datalist

Permite añadir entradas a un control de cuadro de texto (y también a cuadros especializados como los de email, url,…). La forma de uso consiste en usar el atributo HTML5 list existente en la etiqueta input. Ese atributo asociará el cuadro de texto a la lista de valores. Luego, dentro de datalist, se colocan etiquetas option para cada opción en la lista.

Ejemplo: <form action="recogida.php" method="get"> <label for="gustos"> Escribe en qué te gusta pasar tu tiempo de ocio </label> <input type="text" id="gustos" name="gustos" list="listaGustos" /> <datalist id="listaGustos">

<option label="deportes" value="Deportes" /> <option label="teatro" value="Teatro" /> <option label="cine" value="Cine" /> <option label="leer" value="Leer" />

</datalist> <input type="submit" value="enviar"/><br /> </form>

No aparece un cuadro combinado, será un cuadro de texto que permitirá que aparezca la lista de opciones. Pero podremos escribir lo que queramos.

Atributo required

Este atributo obliga a rellenar con algún valor el control en el que se usa. Es decir hace que un determinado control sea de obligado rellenado en un formulario. Uso:

<input type="text" name="texto" id="texto" required />

O bien, usando una forma más compatible con XML:

<input type="text" name="texto" id="texto" required="required" />


298 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Atributo multiple

Permite en los cuadros de entrada de texto que el usuario pueda indicar varios valores si les separa con comas.

Atributo pattern

Permite colocar una expresión regular en un cuadro de texto que, obligatoriamente, tendrá que cumplir el cuadro en el que se use el atributo. Ejemplo (cuadro de texto que sólo acepta introducir 5 letras mayúsculas y tres números):

<form action="recogida1.php" method="get">

<label for="texto"> Escribe el nº de serie (5 letras y tres números) </label> <input type="text" pattern="[A-Z]{5}[0-9]{3}" id="gustos" name="texto" /> <input type="submit" value="enviar"/><br />

</form>

Atributo placeholder

Un placeholder es un texto que ayuda a rellenar un cuadro de un formulario (está especialmente pensado para los cuadros de texto) colocando un texto inicial en el cuadro que se va en cuanto el cuadro obtiene el foco del usuario (porque, por ejemplo, el usuario le hace clic). Ejemplo: <form action="recogida1.php" method="get">

<label for="texto"> Escribe el nº de serie </label> <input type="text" pattern="[A-Z]{5}[0-9]{3}" id="gustos" name="texto"

placeholder="5 letras y tres números" /> <input type="submit" value="enviar"/><br />

</form>

El resultado es:

Atributo autocomplete

Permite activar (valor on) o desactivar (valor off) el autocompletado del navegador. El autocompletado es la opción que permite a los usuarios cuando rellenan un formulario ver entradas habituales que han escrito en el mismo u otros formularios. A veces conviene desactivar cuando lo que se escribe son datos sensibles (nombre de usuario, contraseñas).

Atributos min,max y range

Son atributos que se pueden utilizar en muchos tipos de cuadros (number, date, time, range,..) que almacenan valores numéricos o similares. Min y max establecen los límites del cuadro.


299 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Por ejemplo si el cuadro es numérico y ponemos min=1 y max=50 y eso impedirá poner valores en el cuadro fuera de esos topes. El parámetro step indica el mínimo incremento de valor en el cuadro; si en el ejemplo anterior ponemos step=3 del valor 1 saltaremos al 4. Los controles del cuadro (en el caso de los cuadros numéricos, las flechitas) obedecen a esa configuración.

Etiquetas de cabecera

El elemento head de las páginas web sirve para declarar elementos que no aparecen dentro del contenido de la página pero que son muy importantes para su correcto funcionamiento.

Elemento title

Title es obligatorio en las páginas web, sirve para indicar el título de la página (que los navegadores suelen mostrar en la barra de título de la ventana de la página).

Es un elemento muy importante porque los buscadores otorgan a su texto prioridad en las búsquedas que realizan. De modo que una página puede salir más arriba o abajo en los resultados del buscador dependiendo del resultado de las páginas.

Elemento base

No es muy utilizado pero permite indicar la dirección desde la que los enlaces en la página tomarán para sus relativas. Si no se indica, los enlaces relativos parten del directorio que alberga a la página, de esta forma podemos hacer que los enlaces partan del directorio que digamos. Ejemplo:

<!DOCTYPE html> <html lang="es-ES"> <head> <meta charset="UTF-8"> <base href="http://www.mipagina.com/conts" /> <title>Página 3</title> </head>

Todos los enlaces relativos se buscarán en la dirección indicada. Así el enlace: <a href="pg4.html">

Saltará a la dirección http://www.mipagina.com/conts/pg4.html

Elemento link

Permite invocar a un recurso externo a la página a fin de incorporar a la misma el contenido del recurso. Usa los siguientes atributos (obligatorios son href y rel):

ATRIBUTO USO

rel Indica la relación del recurso con la página. Posibilidades: • stylesheet. Es la que más se utiliza, indica que el recurso es

una hoja de estilos (CSS). • alternate. Indica que el recurso es una versión alternativa del

documento actual. Se usa bastante. • icon. Indica que el recurso es el icono de la página web. Se

suele usar icon para iconos de tamaño 60x60, mientras que se usa short icon para iconos de tamaño 12x12


300 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

(normalmente se usan ambas entradas, escribiendo una etiqueta link distinta para cada tipo de icono).

Los siguientes, apenas se usan:

• author. Información sobre el autor. • next. Documento siguiente al actual si se trata de parte de una

serie de documentos relacionados. • prev. Documento anterior al actual si se trata de parte de una

serie de documentos relacionados. • first. Es la primera página de la serie de documentos

relacionados • last. Es la última página de la serie de documentos

relacionados • up. Página de nivel superior en la estructura del sitio web. • prefetch. Hace una carga previa del recurso en los tiempos en

los que no se está haciendo nada (es decir de forma invisible al usuario).

• bookmark. El recurso es un mapa de navegación. Contendrá enlaces.

• external. Es un recurso externo de tipo indefinido. • help. Es una página de ayuda. • search. Es una página de búsqueda. • license. Información sobre la licencia. • tag. Página de etiquetas. • nofollow. Marca que los robots de búsqueda de empresas

como Google no tengan en cuenta los enlaces externos y así evitar que dichos enlaces en las páginas se utilicen para subir su calificación en los buscadores. Así se ignoran por los robots los enlaces marcados de esta forma.

• noreferrer. Un referrer es la información relativa a la página desde la que procede el visitante a un sitio. Con este valor en los enlaces, no se indicará al destino URL la página desde la que procedía el usuario.

• pingback. Es un recurso que solicita información al que le enlaza.

href Dirección URL al recurso solicitado; puede ser relativa o absoluta.

hreflang Propio de HTML 5. Indica el lenguaje en el que está escrito el recurso.

type Tipo MIME del documento relacionado. Los tipos MIME son indicaciones pertenecientes al protocolo http que usan los servidores web para indicar el tipo de información. Así por ejemplo text/css es el tipo MIME que indica que un recurso es una hoja de estilos CSS.

media Permite indicar el tipo de dispositivo más adecuado para mostrar el recurso.


301 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Etiqueta style

Permite colocar código CSS en la página web. Se usa un atributo type para indicar el tipo de contenido que casi unánimemente será text/css: <style type="text/css"> p{ font-face: Arial, Helvetica, sans-serif; } </style>

Ese código hace que el texto de las etiquetas p, use tipo de letra Arial en primera opción, Helvetica en segunda y sans-serif en tercera.

Etiqueta script

Permite colocar código script en la página web. Hoy en día lo habitual es utilizar esta etiqueta para incorporar código JavaScript a la misma.

ATRIBUTO USO

type Tipo MIME de contenido que se colocará dentro de la etiqueta. El habitual es text/javascript. Es el que se asume por defecto.

charset Codificación usada para el texto del script. Por defecto toma el de la página

src Permite indicar la URL a un archivo externo que contendrá código (normalmente en JavaScript) que se colocará en la página.

Etiqueta meta

La etiqueta meta permite indicar información extra a la página web para que sea recogida por otro software o para que el propio protocolo http la tenga en cuenta.

Sus atributos son:

ATRIBUTO USO

content Establece el contenido al que se refieren los atributos name y http-equiv (que no se pueden utilizar a la vez)

name Permite indicar información sobre la página que será tenida en cuenta por los programas que analicen el código de la misma. Posibles valores:

• keywords. Permite indicar una lista de palabras clave separadas por comas para que se tengan en cuenta por los robots de los buscadores y así establecer palabras y términos relacionados con la página que faciliten que la página sea encontrado por los usuarios al usar los buscadores

• author. Indica el nombre del autor de la página web • description. Descripción de la página • generator. Software utilizado para crear la página

302 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

http-equiv Establece una cabecera http para diversos fines. Contenidos habituales:

• content-type. Permite establecer el tipo de documento y el lenguaje web con el que está creado.

• refresh. Hace que la página web se recarga tras el tiempo especificado en el atributo content. Se puede incluso indicar una URL a la que el navegador se dirigirá tras ese tiempo.

• expires. Fecha en la que expira la página • date. Fecha en la que se creó la página • last-modified. Fecha de última modificación de la página • default-style URL a la hoja de estilos alternativa del

documento. EL protocolo http envía estas cabeceras, pero si las usamos en nuestra página, en teoría tienen prioridad sobre lo que envíe el http.

charset Disponible desde HTML 5, sirve sólo para indicar la forma en la que está codificado el texto, en sustitución de la versión larga mediante http-equip="content-Type" de HTML 4 y XHTML.

Ejemplos de uso con el atributo name: <meta name="author" content="Jorge Sanchez" /> <meta name="generator" content="Sublime Text 2" /> <meta name="description" content="Página sobre Palencia" /> <meta name="keywords" content="Palencia, Castilla, monumentos, ciudad, castellana, Tierra de Campos, Cerrato" />

Con name todos los atributos son descriptivos de la página. Sin embargo, el elemento meta puede realizar indicaciones http con ayuda de su atributo http-equiv. Ejemplos:

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Este es quizá el “meta” más utilizado de las páginas web escritas en HTML anterior a la versión 5. HTML 5 ha simplificado esta etiqueta:

<meta charset="UTF-8" />

Que es mucho más fácil de recordar y escribir. Otros usos de meta con http-equiv son:

<meta http-equiv="Refresh" content="3" />  <meta http-equiv="Refresh" content="3;URL=http://www.google.es" />  <meta http-equiv="Expires" content="Fri, 21 Dec 2012 23:59:59 GMT" />


303 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Etiquetas semánticas de HTML5

La idea en los nuevos estándares de HTML (especialmente en HTML5) es que los elementos HTML más que para formato, sirvan para dar valor semántico al contenido. Es decir, para indicar qué tipo de contenido es. Eso vale para casi todos los elementos ya conocidos como p (párrafo), abbr (abreviatura), strong (remarcado fuerte, negrita), etc.

La idea es marcar la semántica con HTML y el formato con las hojas de estilo CSS que aprenderemos en el siguiente punto.

A este respecto hay una serie de elementos HTML aparecidos con HTML 5 que no dan ningún formato al texto pero permiten remarcarle dándole un significado y además permitiendo posteriormente que ese contenido tenga un formato especial mediante CSS.

Elemento header

Permite marcar una cabecera. Esto no tiene que ver con el elemento head, se trata de una serie párrafos que se marcan de esta forma para indicar que pertenecen a la cabecera de la página.

Realmente una página puede tener varios elementos header, al nivel de la etiqueta body indica que su contenido es la cabecera de la página completa (por ejemplo donde se muestra el título general, logotipo,…). Pero dentro de una etiqueta, por ejemplo, article indicaría que su contenido es la cabecera del artículo.

No se puede meter un header dentro de otro header ni dentro del elemento foot o address.

Elemento footer

Similar al anterior, sirve para marcar el pie de una página, sección, artículo etc. Dependiendo del contexto en el que se coloque servirá para unas cosas u otras. En el caso del elemento footer que se coloque al nivel del elemento body, servirá para agrupar los elementos de pie de página que suelen ser información sobre el autor, copyright, términos de uso de la página, etc.

Elemento section

Es un elemento que permite dividir en diferentes partes o secciones un documento. Ejemplo de página dividida en secciones:

<!DOCTYPE html> <html lang="es-ES"> <head>

<meta charset="UTF-8"> <title></title>

</head> <body>


304 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

<header> <h1>Historia de HTML</h1> <p>Desde 1989 hasta nuestros días</p>

</header> <section> <h2>Inicios en HTML. Tim Bernes Lee</h2> <p>.....</p> </section> <section> <h2>Creación de la web. Primeros navegadores</h2> <p>.....</p> </section> <section> <h2>La guerra de los navegadores</h2> <p>.....</p> </section> <section> <h2>De HTML 4 a HTML 5 pasando por XHTML</h2> <p>...</p> </section> <footer> <p>Realizado por Jorge Sánchez</p> </footer>

</body> </html>

Elemento nav

Se trata de un elemento que marca a su contenido como una sección de enlaces, es decir una barra de navegación. Más adelante con CSS se puede dar un formato especial a dichos enlaces. nav se puede escribir dentro de cualquier elemento HTML de sección (como section, article, header, footer,..).

Los elementos marcados por nav pueden ser omitidos por los lectores digitales de páginas web que utilizan, por ejemplo, las personas invidentes. Lo cual facilita la comprensión del texto) y así que dicho contenido quede marcado sólo para utilizar los enlaces interiores a nav.

Elemento article

Si se observan los elementos descritos anteriormente parece claro que HTML 5 utiliza como metáfora la forma de distribuir contenidos de un periódico. Así hay cabeceras, pies, secciones y, con este elemento, artículos.

La idea es colocar dentro de este elemento (que tiene sentido dentro del elemento section, o incluso aparecer de forma independiente) es colocar contenido que pueda ser entendido como un todo que describa un tema de forma íntegra. El formato mediante CSS permitiría que apareciera con el estilo que deseemos.

Elemento hgroup

Permite agrupar varios títulos (elementos h1 a h6) dentro de esta etiqueta para darles estilo común. Se utiliza dentro de article para marcar su zona de títulos.

Elemento figure

Sirve para agrupar los elementos relativos a una imagen como la propia imagen (elemento img), el título de la misma, el pie, los párrafos relativos, etc.


305 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Elemento figcaption

Permite indicar el título de una imagen, dentro de un elemento figure. Ejemplo de uso: <article>

<hgroup> <h2>Palencia</h2> <h3>Paisajes</h3> </hgroup> <figure>

<img src="montanaPalentina.jpg" alt="Vista de la Montaña Palentina" width="350" height="400"/>

<figcaption> Vista de la Montaña Palentina desde Camporredondo

</figcaption> </figure> <p> Los paisajes en la provincia de Palencia....... </p> ....

</article>

Elemento aside

Permite marcar texto dentro de un artículo para que no se tenga en cuenta como parte del texto del artículo, sino como un texto aparte que permite realizar aclaraciones al artículo, referencias, resúmenes remarcados y sobre todo cuadros de texto de estilo periodístico para destacar partes del artículo. Para que este texto aparezca de manera especial, debe dársele formato con CSS.

Elementos multimedia

El uso de Flash simplificó el uso de elementos multimedia en las páginas web dada la potencia de esta tecnología, pero dificultaba el aprendizaje para realizar páginas y exigía utilizar una forma de trabajar ajena a HTML y que además dependía de una empresa en concreto (Adobe). Actualmente la idea de muchos creadores es ir retirando Flash y aprovechar las nuevas capacidades de HTML 5 para la multimedia.

HTML 5 avanza enormemente en cuestiones relacionadas con el vídeo.

El problema del vídeo y el audio

EL problema es que hay numerosos formatos de vídeo y audio y que cada navegador tiene capacidades distintas al respecto.

Por ello muchos usuarios conocedores de estos problemas saben que en los ordenadores hay que instalar plugins (extensiones) para poder ver vídeos u oír música. De esta forma si incorporamos vídeo a nuestra página a través de un enlace normal:

<a href="video1.mpeg">Ver vídeo</a>

El navegador buscará si disponemos del plugin apropiado para ver el vídeo, si no es así simplemente lo descargará en nuestro ordenador al no poder mostrar él el contenido.


306 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Etiqueta embed

Se trata de una etiqueta ya veterana que se utiliza para colocar en una página web elementos no pertenecientes al lenguaje HTML como animaciones Flash, vídeo, audio, etc. Usa los siguientes atributos:

ATRIBUTO USO

src URL al recurso que se desea mostrar

type Tipo MIME que indica el contenido del recurso que se incorpora con la etiqueta

height Altura de la ventana que mostrará el recurso

width Anchura de la ventana que mostrará el recurso

Etiqueta object

Está etiqueta está orientada a sustituir a la anterior y permite incorporar cualquier tipo de contenido a una página web. Los atributos posibles son:

ATRIBUTO USO

data URL al recurso que se desea mostrar

type Tipo MIME que indica el contenido del recurso que se incorpora con la etiqueta.

height Altura de la ventana que mostrará el recurso

width Anchura de la ventana que mostrará el recurso

usemap Permite indicar el nombre de un mapa de imágenes (usando #nombre) que actuará sobre el objeto.

name Permite indicar el nombre del objeto

form Indica el nombre del formulario al que pertenece este objeto

Elemento param

Elemento interior a object, que permite especificar parámetros a los plugins de los navegadores encargados de mostrar el objeto. A través de param pasamos instrucciones al plugin que reproduzca el objeto. La forma es mediante los atributos name (en el que se indica el nombre del atributo) y value (valor del atributo) Ejemplo:

<object data="Wildlife.wmv" type="video/x-ms-wmv" width="500" height="300">

<param name="autoplay" value="true" /> </object>

En el ejemplo el vídeo (en caso de que el navegador pueda reproducirle), se ejecutará automáticamente al cargar la página.


307 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Elemento iframe

Es un elemento que había desaparecido en el estándar pero que HTML 5 ha recuperado. La idea original es colocar un documento dentro de otro documento, es decir sirve para incrustar contenido de una dirección dentro de la página que le hace referencia. Su popularidad actual se debe a youtube ya que es el elemento que sugiere la página para colocar vídeos youtube en nuestras páginas. Atributos:

ATRIBUTO USO

src URL al recurso que se desea mostrar

width Anchura del objeto en nuestra página

height Altura del objeto en nuestra página

Elemento video

Es un elemento que sólo funciona en HTML 5 y es el método propuesto para incorporar vídeos a una página web.

ATRIBUTO USO

src URL al vídeo que se desea mostrar

width Anchura del vídeo en nuestra página

height Altura del vídeo en nuestra página

autoplay Usa el valor fijo autoplay para indicar que el vídeo se inicia automáticamente en cuanto se descargue

loop Usa el valor fijo loop para indicar que el vídeo se ejecuta automáticamente una y otra vez

controls Con valor controls indica que el vídeo mostrará los controles de reproducción (pausa, play,…)

preload Recomendación sobre cómo debemos realizar la descarga. Posibilidades:

• auto. El vídeo se descarga en cuanto se carga la página • none. El vídeo no se descarga. Cuando el usuario pulse play,

se descargará. • metadata. Descarga los metadatos del vídeo, no el vídeo en

sí

poster Permite indicar la dirección URL a una imagen que se mostrará mientras el vídeo no se está reproduciendo. Si no se usa este atributo, se usa el primer fotograma del vídeo como póster.

Codecs de vídeo. Elemento source

Se denomina códec (de codificar, descodificar), al software que se usa para crear los vídeos. Un vídeo actual usa un formato comprimido de datos, por lo que para crearlos se codifican los datos y para mostrarle, se descodifica.


308 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Eso significa que para ver un vídeo en un formato concreto, se necesita el códec apropiado. Para más inri, cada navegador incorpora unos codecs. HTML 5 ha conseguido subsanar la situación, mediante la etiqueta source.

La idea es que el vídeo se codifica en varios formatos distintos y luego les hacemos referencia dentro de la etiqueta video y el navegador usará el formato que sea capaz de traducir (del que disponga de codecs).

El elemento source fundamentalmente dispone de dos atributos: src para indicar la URL que nos lleva al vídeo y type que indica el tipo MIME del vídeo. Además dentro del tipo MIME se pueden indicar los codecs concretos que necesitamos para decodificar el vídeo.

La idea es la siguiente: <video autoplay="autoplay" controls="controls" poster="foto1.jpg" >

<source src="video.mp4" type="video/mp4;codecs='avc1.42E01E, mp40a.40.2' " /> <source src="video.ogv" type="video/ogg;codecs='theora, vorbis' " /> El navegador no puede mostrar el vídeo

</video>

Dentro de type, el uso de codecs es opcional, ya que si el navegador no reconoce el formato no suele hacer caso a los codecs que se indiquen (aunque a veces les descarga). La idea es que si el primer formato no se reconoce (primer elemento source), se intenta el segundo y así sucesivamente. Si ninguno es reproducible por el navegador actual, éste mostrará la frase final tras el último source.

Subtítulos

Aunque los navegadores actuales no permiten esta posibilidad (se consigue a través de JavaScript) de hecho sí hay una etiqueta reciente que se coloca dentro del elemento video que sirve para indicar subtítulos. Se trata de track. Sus atributos son:

ATRIBUTO USO

src URL al archivo VTT o SRT que contiene los subtítulos

kind Tipo de subtítulos. Posibilidades: • subtitles. Subtítulos normales • captions. Igual que el anterior pero con posibilidad de añadir

sonidos. • descriptions. Texto alternativo e independiente de la película • chapters. Contiene los capítulos que permiten navegar de

forma ágil por la película • metadata. Metadatos de la película

label Nombre de los subtítulos para reconocerlos en caso de haber indicado varios

srclang Idioma de los subtítulos (por ejemplo es para español)

Ejemplo: <video autoplay="autoplay" controls="controls" poster="foto1.jpg" >


309 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

<source src="video.mp4" type="video/mp4;codecs='avc1.42E01E, mp40a.40.2' " /> <source src="video.ogv" type="video/ogg;codecs='theora, vorbis' " /> <source src="spa.vtt" kind="subtitles" srclang="es" label="Spanish" /> <source src="deu.vtt" kind="subtitles" srclang="de" label="German" /> El navegador no puede mostrar el vídeo

</video> Elemento audio

Se trata de un elemento comparable al video, pero en este caso para incorporar audio a la página.

ATRIBUTO USO

src URL al vídeo que se desea mostrar

autoplay Usa el valor fijo autoplay para indicar que el vídeo se inicia automáticamente en cuanto se descargue

loop Usa el valor fijo loop para indicar que el vídeo se ejecuta automáticamente una y otra vez

controls Con valor controls indica que el vídeo mostrará los controles de reproducción (pausa, play,…)

preload Recomendación sobre cómo debemos realizar la descarga. Posibilidades:

• auto. El vídeo se descarga en cuanto se carga la página • none. El vídeo no se descarga. Cuando el usuario pulse play, se

descargará. • metadata. Descarga los metadatos del vídeo, no el vídeo en sí

Con el audio hay el mismo problema con la cuestión de los codecs y los formatos, por lo que también es habitual convertir el audio a distintos formatos y dar opciones dentro de la etiqueta audio gracias a la etiqueta source. Ejemplo:

<audio controls="controls" autoplay="autoplay">

<source src="audio1.ogg" type="audio/ogg"> <source src="audio2.mp3" type="audio/mpeg"> No se puede reproducir el archivo de audio

</audio>

Módulo 3: Herramientas Tecnológicas de Investigación e Información Tema 5: CSS

310 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

TEMA 5: CSS

1. Introducción a CSS

Las limitaciones de HTML

Como lenguaje para dar formato a las páginas web, HTML es muy limitado. En sus primeras versiones todas las posibilidades de formato se conseguían mediante etiquetas. Así existían etiquetas para modificar el tipo de letra (font), uso de maquetaciones complejas (frame), etc. Es decir ante una nueva necesidad, se inventaba una nueva etiqueta.

Hoy en día (y ya desde hace muchos años) se ha entendido que ese no es el modelo lógico para hacer páginas web. Es decir se ha entendido que HTML es un lenguaje que no es muy apropiado para definir el formato de la página. Las razones de no usar HTML para realmente dar formato a la página son:

• Podemos reutilizar el formato fácilmente para diferentes páginas manteniendo un formato coherente y armonioso en todo el sitio web. Con las etiquetas HTML no es posible, habría que volver a utilizar las etiquetas ya definidas.

• Permite usar HTML sólo como lenguaje semántico. De otro modo perderíamos el significado del texto. Esto es algo esencial para que los buscadores distingan el significado del texto de las páginas y afinen mejor en los resultados de las búsquedas que ofrecen al usuario.

• De usar sólo HTML, habría infinidad de etiquetas y una gran probabilidad de que cada navegador use las suyas propias (como ha ocurrido durante tantos años e incluso ahora sigue ocurriendo con algunas etiquetas).

• El formato y el contenido son independientes, con lo que se puede utilizar un lenguaje más apropiado para definir el formato. Es más, si en el futuro se inventan mejores lenguajes, sería fácil adaptarlos a las páginas web.

La ayuda de CSS

CSS es la abreviatura de Cascade Style Sheets (Hojas de Estilo en Cascada) y se trata de un lenguaje de texto que se incrusta en las páginas web para modificar el formato de la página. Actúa sobre HTML haciendo que las etiquetas HTML se muestren en el navegador con el formato que se indique.

Es capaz de actuar sobre todas las etiquetas del mismo tipo o sobre unas concretas. Se puede almacenar en un archivo aparte que después se puede usar para varias páginas a la vez. De modo que si cambiamos algo en el estilo, al instante se reflejará en todas las páginas.


311 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

CSS por lo tanto facilita la homogeneidad de las páginas y su mantenimiento. Hoy en día se considera una técnica imprescindible para dar formato a las páginas web. Además se puede aplicar también a código XML.

Versiones de CSS

CSS se ideó a mediados de los años 90 y se ha ido estandarizando. A día de hoy se habla de tres versiones de CSS:

CSS1. Es la versión original de CSS. Estandarizada en 1996 por la W3C incluye formatos de texto, párrafo, márgenes, lista, tamaños de imágenes,…

CSS2. Es estándar desde 1998. Amplía el CSS anterior para incluir sobre todo posicionamiento (manejo de capas), además de tipos de medios (que permite definir distintos tipos de páginas web según los diferentes medios que la usen, pantallas, impresoras, reconocedores de voz…). La especificación 2.1 es el último estándar. Modificó errores de la anterior.

CSS3. Se lleva trabajando en ella desde 1998 y es ahora cuando parece que se está convirtiendo en el nuevo estándar. En realidad se compone de una serie de módulos que definen diferentes especificaciones que sumadas a CSS2 (con la que sigue siendo compatible) dan lugar a posibilidades muy avanzadas de formato. Como manejo del contenido, sombreados y rellenos avanzados, transparencias, transiciones, nuevos selectores,… De hecho en total hay unos 30 módulos, varios de ellos son ya considerados recomendación oficial. En conjunto aún está en fase de borrador, se pueden observar sus trabajos en www.w3.org/Style/CSS/current-work

La mayoría de navegadores soportan íntegramente hasta CSS2 y parcialmente CSS3. Algunas páginas como http://css3test.com/ permiten comprobar qué parte (incluso qué porcentaje) de CSS3 reconoce el navegador.

Sintaxis básica de CSS

CSS es un lenguaje distinto de HTML es muy sencillo, pero su dificultad radica en que es muy extenso. CSS sigue esta sintaxis

selector { propiedad1:valor1; propiedad2:valor2; … }

El selector es la parte de CSS que nos permite indicar a qué elemento (o elementos) de la página web se va a aplicar el formato CSS. Para indicar dicho formato se marcan propiedades del elemento (cuyo nombre debe de ser reconocido por CSS) a las que asignamos valores. Esas propiedades permiten modificar el formato del elemento y los valores indican cuál es su nuevo formato.

Ejemplo: p{ font-size:14pt;


312 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

color:red; }

Ese código CSS provocaría que los elementos de tipo p salgan con tamaño de letra de 14 puntos y color rojo.

Comentarios

Dentro del código CSS se pueden colocar comentarios. Para ello el texto del comentario se encierra entre los símbolos /* y */. Ejemplo:

p { line-height:10pt;

/*El siguiente código marcará el texto subrayado*/ text-decoration:underline; text-align:center; }

2. Inserción de código CSS

En una etiqueta concreta de HTML

Todos los elementos de HTML (p, strong, abbr, h1,…) pueden utilizar un atributo llamado style, dentro de este atributo podemos añadir código CSS. Ejemplo:

<!doctype html> <html lang="es">

<head> <meta charset="UTF-8"> <title></title>

</head> <body>

<p>Este texto sale de color negro (normal)</p> <p style="color:red;">Este texto sale de color rojo </p>

</body> </html>

En este caso el código CSS no lleva selector alguno, porque el estilo se aplica al elemento en el que se incrustó el código CSS. El resto del documento no queda afectado por el código CSS.

En el elemento de cabecera style

En este caso el código CSS se inserta debajo del elemento HTML style que se colocará en la zona de cabecera (head). Este código afectará a toda la página web. Ejemplo:


<head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p{ color:red; } </style>

</head>


313 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

<body> <p>Este texto sale de color rojo</p> <p>Este texto sale de color rojo también </p>

</body> </html>

Ahora todos los elementos de tipo p se mostrarán en color rojo ya que es ese selector sobre el que se ha indicado el formato.

El elemento style usa fundamentalmente dos atributos:

• type. Que siempre contiene el valor text/css. En el caso de que apareciera otro lenguaje de estilos su contenido sería el tipo MIME correspondiente a ese lenguaje.

• media. Identifica a qué tipo de dispositivo se aplican los estilos. Podemos diseñar diferentes estilos en función de los dispositivos. Sus posibilidades son:

o all. Opción por defecto que significa que los estilos se aplicarán a cualquier tipo de dispositivo en el que se esté viendo la página.

o screen- Para pantallas a color o print. Para ser impreso. o tty. Pantallas de texto (como los terminales ssh por ejemplo o los de

teletexto) o tv. Pantallas de televisión o projection. Proyectores de vídeo o handhell. Dispositivos de mano o speech. Sintetizadores de voz. Hasta la versión 2 de CSS se usaba

aural en lugar de speech, por lo que la mayoría de diseñadores lo sigue utilizando.

o braille. Dispositivo de lectura táctil braille para personas invidentes. o embossed. Para dispositivos de impresión braille.

Otra forma (más utilizada) de indicar diferentes medios es utilizar dentro del código CSS la directiva @media, ejemplo: <style type="text/css" > @media screen{ p{ color:green; } } @media print{ p{ color:#333333; } } </style>

Con ese código conseguimos que por pantalla el texto de los párrafos salga de color verde, pero al imprimir salga de color gris. @media es una instrucción CSS que se puede utilizar en cualquier momento

En un archivo externo

Es el caso más habitual. Se trata de crear un archivo de texto con extensión CSS al que se le inserta código CSS. La ventaja es que el mismo archivo nos sirve para aplicar sus estilos a diferentes documentos y si variamo0s simplemente el archivo CSS, todos los documentos que usen esa hoja de estilo cambiarán automáticamente.

Para poder colocar el código css existente en una página web HTML, hay que usar el elemento link (dentro del elemento head).


314 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Por ejemplo si hemos creado un archivo de texto css llamado estilos.css con este contenido:

p{ color:red; }

Suponiendo que lo guardemos en el mismo directorio que esta página web, el código siguiente provocaría que los dos párrafos se muestren en rojo.


<head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="estilo1.css" type="text/css">

</head> <body>

<p>Este texto sale de color rojo</p> <p>Este texto sale de color rojo también </p>

</body> </html>

La etiqueta link tiene los atributos:

• href. Con el que se indica la ruta de la hoja de estilos que se está incluyendo.

• rel. Que siempre contiene el texto stylesheet (para indicar que estamos incluyendo una hoja de estilos).

Además se pueden incluir los atributos type y media comentados en el punto anterior.

Orden de aplicación de estilos

Es posible que algunas páginas web utilicen varios estilos referidos al mismo elemento. Ejemplo:

<!doctype html> <html lang="en">

<head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css" media="screen">

p{ color:blue;

} </style>

</head> <body>

<p style="color:red;">Hola</p> </body>

</html>

La cuestión es de color saldrá el texto Hola (que dentro del elemento p al que hacen referencia dos definiciones). La respuesta es de color rojo, porque tiene prioridad la definición más restrictiva. Es decir, en orden de preferencia se ejecuta:


315 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

1. Primero se aplican los estilos del navegador. Es decir el formato predefinido del navegador. Todos los navegadores poseen un estilo predefinido, que dicta con que tamaño por defecto se muestra el texto, los colores, el tipo de letra,… Estos estilos son los que se ejecutan en primer lugar. Pero cualquier estilo definido fuera del navegador, tiene preferencia.

2. Después se aplican los estilos externos (los que se incorporan con la etiqueta link)

3. Después los que proceden de la etiqueta style. 4. Después los que se definan mediante el atributo style internamente en el

elemento.

En caso de dos estilos referidos al mismo elemento y definidos en el mismo ámbito (por ejemplo ambos procedentes de archivos externos e incluidos con el elemento link) tiene preferencia el último que se utilice en el código (es decir ganan los estilos del segundo link).

No obstante se puede alterar la preferencia utilizando una palabra clave: !important Los estilos marcados con ella tienen preferencia sobre cualquier otro. Ejemplo:

p{ color:green !important; }

El color verde para los párrafos tendrá preferencia sobre cualquier redefinición de estilos sobre el elemento p.

Herencias

Hay que tener en cuenta que hay etiquetas que son padre de otras. Es decir etiquetas que contienen a otras. En el ejemplo:

<p>Arturo Herrero: <em>Los años veinte</em></p>

La etiqueta p es padre de la etiqueta em (em está dentro de p). Esto hace que em herede todo el estilo que posea p y además añada el suyo propio. Por ejemplo, si hemos definido:

p{ color:blue; font-size:12pt } em{ font-size:14pt; }

En el ejemplo anterior, los años veinte tendrán color azul y tamaño 14.

Elementos span y div

Elemento div

Se trata de un elemento clásico (presente en las primeras versiones de HTML) que permite agrupar el contenido. Inicialmente se usaba para usar su atributo align para que todo un bloque de párrafos tuviera la misma alineación. Posteriormente se ha utilizado con CSS a fin de definir secciones y así dar un formato concreto a toda la sección.


316 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

En especial se ha utilizado para definir capas en las páginas web y ese sigue siendo su principal uso. Dentro de div se pueden colocar todo tipo de etiquetas (tablas, párrafos, imágenes,…) La mayoría de navegadores no da un formato concreto a div, pero si deja un espacio y otro por detrás de la etiqueta.

Elemento span

Es muy similar al anterior, pero como los navegadores no agregan nada (ni siquiera espacios) a esta etiqueta cuando se muestra por pantalla, en lugar de para definir capas (aunque se podría) se usa para marcar contenido dentro de un párrafo, a fin de que a ese contenido se le pueda dar un formato especial mediante CSS.

Ejemplo: Dentro de este texto <span style="color:blue">esta frase sale de color azul</span>. Esto vuelve a salir normal

color:blue es código CSS que permite colorear de color azul

Selectores

Los estilos CSS se aplican hacia el elemento HTML que indiquemos. Este elemento puede ser una etiqueta HTML, pero también podemos hacer selecciones más elaboradas. Hacer buenas selecciones nos permitirá conseguir hojas de estilos muy sofisticadas y coherentes. Veremos a continuación las posibilidades.

Selección de elementos HTML

Podemos aplicar un estilo a un elemento concreto de HTML. Como en los ejemplos anteriores:

p { color:blue;

font-size:12pt }

En principio con ese código todos los elementos de tipo p de la página saldrán de color azul y a tamaño 12 pt. Podemos incluso aplicar el estilo a varias etiquetas a la vez:

h1, h2, h3 {color:blue; }

Los títulos de tipo h1, h2 o h3 saldrán de color azul.

Selección de clases

Una de las primeras formas que tiene CSS para diferenciar elementos del mismo tipo (por ejemplo un párrafo de otro) son las clases. Una clase es un identificador que asignamos a una serie de propiedades y valores CSS. Se configuran de esta forma:

selector.nombreclase{ propiedad1:valor1; propiedad2:valor2; …


317 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

}

Por ejemplo: p.clase1 {

color: #339999; background-color: #D6D6D6; }

Para que un párrafo (necesariamente marcado con la etiqueta p) adopte este estilo hay que indicarlo gracias a un atributo presente en todos los elemento HTML; se trata del atributo class. Ejemplo:

<p class="clase1"> Este texto sale con el formato indicado por la clase <em>clase1</em> </p>

Definir la clase sin indicar a qué selector pertenece (se puede usar con cualquiera): .clase1 { color: #339999;

background-color: #D6D6D6; }

En ese caso cualquier elemento HTML podrá utilizar esa clase. Ejemplo: <h1 class="clase1">

Título con estilo clase1 </h1>

Selección de identificadores

La idea es parecida a la de las clases, pero ahora el nombre que indiquemos se referirá al atributo identificador de un elemento, el cual se marca con el conocido atributo id de HTML (presente en todas las etiquetas).

Los identificadores no se pueden repetir en el mismo documento, por lo que el formato indicado sólo se aplicará a un elemento de la página. Ejemplo:

#parrafo1 { color: #339999;

background-color: #D6D6D6; }

Y la forma de aplicar: <p id="parrafo1">

texto del párrafo coloreado </p>

Selector de limitación

Permite indicar que el estilo definido se aplica a una determinada etiqueta pero cuando sea hija de otra que especificada. Ejemplo:

td p { color:red; }


318 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Se aplica a los elementos de tipo p cuando están dentro de elementos de celda (td).

Selector universal

Existe un selector que permite aplicar un estilo a todas las etiquetas. Es el asterisco. Ejemplo:

* { color:black; }

No se suele utilizar de esa forma ya que es demasiado indiscriminada. Pero sí se utiliza para elementos de este tipo:

table * p { color:red; }

Permite colorear en rojo el texto de los párrafos cuando esta etiqueta se use en tablas (es decir, dentro de elementos table); no importará si entre table y p hay otras etiquetas (sean del tipo que sean).

Selección por atributos

Permite aplicar estilos a un elemento cuando este usa un atributo sobre el que toma un determinado valor. Para ello se indica el atributo entre corchetes, seguido del signo de igualdad y el valor entre comillas. Ejemplo:

<head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css" >

p[lang="en"]{ font-style: italic; } </style>

</head> <body>

<p lang="es">texto que sale de forma normal</p> <p lang="en">texto que sale en cursiva</p>

</body>

Se puede mezclar este tipo de definiciones con clases o definiciones por identificador:

p.clase1[lang="en"]{ font-style: italic; }

En este caso el estilo definido se aplica a párrafos de clase 1 que estén marcados con el valor en en el atributo lang (es decir que estén en inglés).

Se puede incluso utilizar más de un atributo:

p [lang="en"][spellcheck="true"]{ font-style: italic; }

En este caso se aplica el estilo para los elementos de tipo p que usen los atributos lang y spellcheck con los valores indicados.

También podemos indicar el estilo simplemente para los elementos que usen el atributo independientemente de su valor:


319 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

p [lang]{ font-style: italic; }

Selectores jerárquicos

Podemos entender HTML como un documento formado de manera jerárquica, donde hay elementos que contienen otros elementos formando una estructura de árbol. Esta es una parte importante del funcionamiento tanto de una página web HTML como de un documento XML. Esta visión permite seleccionar elementos que casen con una cierta jerarquía. De este modo esta página web: <!DOCTYPE html> <html lang="es-ES"> <head>

<meta charset="UTF-8"> <title></title>

</head> <body>

<h1>Monumentos de Palencia</h1> <p>Palencia dispone de numerosos monumentos interesantes. Debido a su importante actividad medieval posee una gran cantidad de edificios religiosos entre los que destaca la <strong>Catedral de Palencia</strong> así como la iglesia de San Miguel con su peculiar torre de defensa y el monumento más conocido de la ciudad: El Cristo del Otero </p> <p>A finales del siglo <em>XIX</em> y principios del <em>XX</em> aparecieron edificios suntuosos y civiles que han embellecido una buena parte de la ciudad, en especial la transitada Calle Mayor. </p> <h2>Edificios religiosos</h2> <ul>

<li>Cristo del Otero</li> <li>Catedral Mayor</li> <li>Iglesia de San Miguel</li> <li>Iglesia de San Lázaro</li> <li>Convento de San Pablo</li> <li>Iglesia de la Compañía</li>

</ul> </body>

</html>

Podemos entender que sus elementos forman este diagrama:

html

head

meta title

body

h1 p

strong

p

em

h2 ul

li


320 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

En él se observa como los elementos body y head son hijos de html. Mientras que meta y title son hijos de head (luego nietos de html). Los nodos al mismo nivel forman hermanos (h1, h2, p y ul en este esquema son hermanos).

Para especificar una relación padre/hijo, vimos antes como indicarla de esta forma: td p{ color:red; }

Y esto significa lo mismo que: td > p{ color:red; }

El signo > indica una relación jerárquica de padre a hijo. Otras expresiones posibles son:

Sintaxis Significado

elemento1 + elemento2 El estilo se aplica al elemento2 cuando es hermano del elemento1 y además el elemento1 precede inmediata-mente al elemento2.

elemento1 ~ elemento2 Se aplica al elemento2 cuando es hermano del elemento1 y éste le precede, aunque no sea inmediatamente.

elemento:nth-child(n) Se aplica al elemento indicado cuando sea el hijo número n de su elemento padre. n puede ser un número (por ejemplo 3, para el tercer hijo), o una expresión más compleja como:

• 2n+1. Se aplica a los hijos con número impar de orden

• odd. Igual que la anterior

• even. A los pares

• 3n+1. Cada tres elementos hijos Ejemplo: tr:nth-child(3n+1) td{

background-color: green; }

Colorea de verde una los elementos td (celdas) que se encuentren en filas (elemento tr) cuyo número de hijo sea múltiplo de tres. Es decir pinta de verde una fila de cada tres.

elemento:nth-last-child(n)

Igual que el anterior pero cuenta el orden de atrás hacia delante.

elemento:nth-of-type(n) Funciona como nth-child pero ahora se refiere al elemento número n siendo n el número de hijo de ese tipo. Es decir, si tenemos dentro de body un párrafo de tipo h1 y otro de tipo p; ambos son hijos de body, p sería el segundo hijo (nth-child(2)) pero es el primero de su tipo (nth-of-type(1)).


321 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

elemento:nth-last-of-type(n)

Como el anterior pero cuenta n desde el final.

elemento:first-child Se aplica al elemento cuando es el primer hijo

elemento:last-child Se aplica al elemento cuando es el último hijo

elemento:first-of-type Primer descendiente de su tipo

elemento:last-of-type Último descendiente de su hijo

elemento:empty Se aplica cuando el elemento está vacío

elemento:only-child Se aplica cuando el elemento es el único hijo

elemento:only-of-type Se aplica cuando el elemento es el único hijo de ese tipo

Podemos incluso hacer combinaciones avanzadas. Ejemplo: ul > li + li {

color:green; }

Se aplica a los elementos li que estén dentro de elementos ul y además estén inmediatamente precedidos por otro elemento li.

3. Formatos y propiedades CSS

Formas de indicar valores de propiedades CSS

Numerosas propiedades CSS tienen la necesidad de indicar valores. Por ejemplo el tamaño de la letra requiere un número. La cuestión es que CSS permite que dicho número se pueda indicar con diferentes medidas (píxeles, pulgadas, centímetros, etc.)

La idea actual en cuanto a CSS es que permita dar formato a documentos que no sólo se muestren en pantalla, sino en todo tipo de dispositivos de salida. Las unidades de medida más adecuadas, por lo tanto, pueden variar y de ahí que se nos permita elegir.

La forma de indicarlas es colocarlas detrás de la cantidad que usemos. Por ejemplo 12in significa doce pulgadas, mientras que 12cm significa doce centímetros.

Unidades de medida numéricas

• in. Pulgadas. Medida muy habitual en el mundo anglosajón, equivale a 25,4 milímetros.

• cm. Centímetro

• mm. Milímetro


322 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• pt. Puntos. Medida muy utilizada en tipografía. Un punto tipográfico equivale a 1/72 pulgadas. Como todos los sistemas operativos le utilizan en los tipos de letra, lo cierto es que es de uso común para utilizar tamaños de fuentes.

• pc. Pica. Una pica la forman doce puntos. Y seis puntos equivalen a una pulgada.

• ex. Tamaño relativo respecto a la letra equis minúscula (x). Así 2x indica que el tipo de letra aumenta hasta ocupar el doble la letra x minúscula. Con 0.5x ocuparía la mitad

• em. Tamaño relativo, en este caso, respecto a la letra M mayúscula

• ch. Altura relativa al número cero (0) en la tipografía actual. No se debe utilizar, ya que la mayoría de navegadores no le reconoce

• px. Píxeles. Esta medida es relativa respecto al dispositivo de salida. Ya que en cada dispositivo el tamaño del píxel varía. Se usa mucho en elementos grandes (capas, tablas, …)

• %. Porcentaje. Es relativo respecto del tamaño del elemento padre del elemento al que le ponemos esta medida. Así 50% para una tabla dentro del elemento body ocuparía la mitad de la pantalla, pero dentro de una capa ocuparía la mitad del tamaño de la capa.

• deg. Grados. Utilizada para ángulos.

• rad. Radianes, también utilizada para ángulos. 360º son 2π radianes.

• grad. Gradianes. 400 gradianes son 360º.

• turn. También para ángulos. Indica vueltas, una vuelta serían 360 grados. 0.5turn es media vuelta (o sea 180º)

• s. Segundos. Se usa para indicar intervalos de tiempo

• ms. Milisegundos

• Hz. Hertzios. Usada para indicar frecuencias (para indicar valores de sonido o voz)

• KHz. Kilohertzios.

• dpi. Puntos por pulgada. Se usa para indicar resoluciones (para especificar, por ejemplo, la resolución mínima del dispositivo que debe tener para mostrar los estilos)

• dpcm. Tiene la misma utilidad que la anterior, pero indica puntos por centímetro.

• dppx. Puntos por píxel.

Indicación de color

Hay numerosas etiquetas con capacidad de mostrar colores. Para indicar un color, CSS dispone de estas posibilidades:


323 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• Notación hexadecimal. Se trata de la notación más utilizada en CSS. Consiste en una cifra hexadecimal, precedida del símbolo #. Las dos primeras cifras hexadecimales indican el nivel de rojo, las dos siguientes el nivel de verde y las dos últimas de azul; por ejemplo #FF0000 es el código del rojo puro.

• Mediante función RGB. Consiste en usar el formato rgb (r,g,b) donde r es el nivel de rojo (entre 0 y 255), g es el nivel de verde y b el de azul.

• Mediante RGB con porcentaje. Funciona como la anterior, pero el nivel re rojo, verde y azul se indican con tanto por ciento. Ejemplo: rgb (50%,25%,12%) (el color es un rojo anaranjado)

• Mediante función RGB y transparencia. Permite utilizar en la función RGB un cuarto parámetro que es un valor de transparencia (conocido como parámetro alpha). Este parámetro puede tener un valor entre 0 (transparencia total y 1.0 opacidad total). Es parte de CSS3 y sólo está disponible en versiones recientes del navegador.

• Por el nombre. Permite indicar el color por su nombre estándar Hay dieciseis colores estándares para especificar colores son: white, silver, gray, back, red, maroon, yellow, olive, lime, green, aqua, blue, navy, teal, fuchsia, purple

Propiedades de la fuente (tipografía)

font-size

Tamaño de la fuente en pantalla. Se puede especificar de tres maneras:

• En modo absoluto. Hace referencia a tamaños predefinidos.

valor significado

xx-small Fuente muy pequeña

x-small Fuente pequeña

small Fuente un poco pequeña

medium Fuente normal.

large Fuente un poco grande

x-large Fuente grande

xx-large Fuente muy grande

• En modo relativo. En este caso se aumenta o disminuye el tamaño de la letra sobre el tamaño que tenía la letra en el elemento que contiene al del estilo (elemento padre). Valores:

valor significado

smaller Más pequeña

larger Más grande


324 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• Modo exacto. En este caso se indica el tamaño de la letra con su valor númerico. Inmediatamente tras este número se indica la medida en la que se debe medir el número. Ejemplos: 12px, 2mm, 12pt, 1.2em, 120%,…

font-family

Indica el tipo de letra. En definitiva, la fuente. El problema es que no todas las fuentes están disponibles en todos los sistemas, por ello se suelen indicar varias opciones separadas por comas; de modo que si la primera no está disponible, se usa la siguiente. Ejemplo:

p{ font-family:”AvantGarde Bk”, Arial, Helvetica, sans-serif; }

font-weight

Peso de la fuente (grosor). Valores posibles: • normal. Espesor normal. • bold. Negrita • Número. Que puede ser: 100, 200, 300, 400, 500, 600, 700, 800 y 900. Ningún

navegador soporta tantos pesos. Por lo que sólo funcionan bien las opciones normal y bold

font-style

Estilo de letra. Puede ser; normal, italic (cursiva) u oblique (normalmente se representa igual que la anterior).

font-variant

VERSALES (SMALL-CAPS). Valores: normal y small-caps.

line-height

Permite calibrar el interlineado (la distancia entre cada línea). Se puede especificar de estas formas:

• Un número. En ese caso dicta la distancia multiplicando este número por la distancia normal. Es decir si indicamos 2, el interlineado será doble, si indicamos 1.5 será un 50% mayor de lo normal.

• Un número seguido de una unidad de medida. Si indicamos 16px, entonces estamos indicando la distancia exacta entre cada línea (que será de 16 píxeles).

font

Permite desde una sola propiedad cambiar en un solo golpe todas las anteriores. Su sintaxis es:


325 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

El orden tiene que ser estrictamente ese, pero algunas propiedades se pueden dejar sin utilizar. Ejemplos:

/*Letra cursiva y negrita de tipo Comic con opciones a Arial y Helvetica*/ font: italic bold 16pt “Comic Sans MS”, Arial, Helvetica, sans-serif; /* Letra cursiva con versalitas de tamaño 18 puntos y 24 de puntos de distancia entre cada línea */ font: italic small-caps 18pt/24pt; /* Letra cursiva */ font: italic;

También nos permite utilizar las fuentes de los elementos del sistema operativo en el que estemos, concretamente:

• caption. Letra utilizada para los títulos. • icon. Letra de los iconos • menu. Letra de los menús • message-box. Letra de los cuadros de diálogo • small-caption. Letra de los controles pequeños. • status-bar. Letra de las barras de estado.

color

Color de la fuente. Utilizando cualquiera de los códigos de color explicados en el apartado de unidades y medidas.

Formato del texto

Son propiedades que afectan al texto, fundamentalmente cambian el formato de los párrafos y aspectos del texto que no se refieren a su tipografía. Las más importantes:

word-spacing

Indica la distancia entre las palabras del texto. Usa las mismas medidas que la propiedad font-size.

letter-spacing

Indica la distancia entre las letras del texto. Es similar a la anterior, pero ahora referida a la distancia horizontal entre caracteres.

text-decoration

Se indican posibles efectos en el texto. Valores: • underline. Subrayado (línea por debajo del texto) • overline. Línea por encima del texto. • line-through. Tachado, línea que atraviesa el texto. • blink. Parpadeo. No funciona en casi ningún navegador (sí en Firefox).

font: font-style font-variant font-weight font-size/line-height font-family;


326 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

vertical-align

Posición vertical del texto (o imagen) respecto a su contenedor. Es muy versátil porque permite tanto alinear en vertical un texto respecto, por ejemplo, a la celda de la tabla en la que se encuentre; como indicar superíndices y subíndices. Posibilidades:

• baseline. En la línea base inferior del texto • sub. Subíndice • super. Superíndice • top. Arriba respecto al elemento más alto de la línea • text-top. En la línea superior del texto • middle. Medio respecto a la altura del texto o contenedor en el que estemos • bottom. Abajo respecto al elemento más alto de la línea • text-bottom. En la línea inferior del texto • Porcentaje. Porcentaje respecto al texto (por ejemplo 120%)

text-align

Alineación horizontal del texto. Puede ser: left (izquierda), right (derecha), center (centrada) o justify (justificada a derecha e izquierda).

text-indent

Sangría de la primera línea del párrafo. Distancia extra que se deja a la primera línea respecto al resto de líneas. Por ejemplo podemos indicar: text-indent:50px.

transform

Permite modificar el texto para que se muestre en mayúsculas o minúsculas. • capitalize. La primera letra en Mayúsculas • uppercase. Mayúsculas • lowercase. Minúsculas • none. No hace ninguna transformación

direction

Procede de CSS2, especifica la dirección en la que se escribe el texto. Posibilidades:

• ltr. Left to right, de izquierda a derecha • rtl. Right to left, de derecha a izquierda (utilizada en lenguas como el árabe)

text-overflow

Parte de CSS3. Indica qué hacer con el texto cuando está dentro de un contenedor (como una capa) y no tiene el tamaño suficiente para mostrar todo el texto. Posibilidades:

• clip. El texto sale recortado. Sólo se ve el texto que cabe en la capa, el resto no se muestra

• ellipsis. Como la anterior, pero se ponen … al final del texto recortado.


327 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

text-shadow

Se trata de una propiedad CSS3. Permite colocar una sombra al texto para darle efecto de volumen. Tiene esta sintaxis:

text-shadow: color distanciaX distanciaY desenfoque; • color. Es el color de la sombra • distanciaX. Es el desplazamiento horizontal que tendrá la sombra (puede ser positivo o

negativo) • distanciaY. Es el desplazamiento vertical que tendrá la sombra (puede ser positivo o negativo) • desenfoque. Es opcional e indica cuánto se va a desenfocar la sombra. Se indica una cantidad

que cuanto mayor sea, más desenfocará el fondo.

Propiedades del fondo

Color de fondo. background-color

La propiedad background-color permite establecer un color de fondo al elemento al que se aplique la propiedad. Si se aplica al elemento body, toda la página tendrá ese color de fondo.

Imagen de fondo. background-image

La propiedad background-image permite establecer una imagen de fondo. Esta imagen se superpone al color de fondo, de modo que si la imagen no se puede cargar (porque la ruta a ella no se ha indicado), entonces aparece el color de fondo.

La imagen de fondo se repite las veces necesarias (creando un mosaico), hasta que se rellena el elemento. Ejemplo de código completo: <!doctype html> <html lang="es"> <head>

<meta charset="UTF-8"> <title>Document</title> <style>

.fondo{ background-color: maroon; background-image: url(granito.png); color:white;

} </style>

</head> <body>

<p class="fondo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed quo nam dignissimos eum ex perferendis dolorem dolor fuga quasi. Praesentium provident obcaecati porro soluta mollitia quae sapiente explicabo necessitatibus beatae id tempora ab eligendi omnis quibusdam eius exercitationem doloremque minima aut accusantium natus temporibus repellendus deleniti repellat </p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum excepturi ut quaerat magnam error perferendis obcaecati. Voluptatem voluptatum odit quas dicta cumque reprehenderit necessitatibus perferendis minus laudantium neque molestias quo. </p>


328 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

</body> </html>

Resultado:

Repetición del fondo. background-repeat

En principio, el fondo se repite en todas las direcciones hasta rellenar el elemento al que se aplica la imagen de fondo. Posibles valores de la propiedad:

• repeat. Es el valor por defecto. la imagen se repite en todas las direcciones (efecto mosaico), hasta rellenar completamente el elemento.

• repeat-x. La repetición de la imagen se hace sólo en horizontal. • repeat-y. La repetición de la imagen se hace sólo en vertical. • no-repeat. La imagen no se repite aparecerá sólo una vez

Posición de la imagen. background-position

Por defecto la imagen se coloca desde la esquina superior izquierda de la página (posición 0,0) y desde ahí se repite (si se ha indicado repetición de la imagen con la propiedad anterior) o no. La posición desde la que la imagen se coloca inicialmente se puede modificar. La forma de hacerlo es así:

background-position: posicionHorizontal posicionVertical

Podemos indicar ambos valores de esta forma: • posicionHorizontal. Se puede especificar las palabras: left (izquierda), right

(derecha) o middle (centro). También se puede indicar una coordenada horizontal concreta (por ejemplo 12px) o relativa (5%).

• posicionVertical. Se puede especificar las palabras: top (arriba), bottom (abajo) o center (centro). También se puede indicar una coordenada vertical concreta (por ejemplo 20px) o relativa (15%).

Así por ejemplo el código: background-position: right bottom;

La imagen de fondo (si no hay repetición de la misma) se mostrará en la esquina inferior derecha del elemento en el que se ponga.


329 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Desplazamiento del fondo. background-attachment

Cuando se desplaza el contenido de una página web, el fondo se mueve con el resto de la página. Mediante esta propiedad podremos hacer que el fondo quede fijo mientras que sólo el resto de elementos se mueven. Los posibles valores para la propiedad son:

• scroll. Valor por defecto. El fondo y el texto se mueven juntos cuando el usuario se desplaza por la página

• fixed. El fondo es fijo y sólo se mueve el texto.

background

Fija en una sola propiedad todas las propiedades de fondo. Sintaxis:

Ejemplo: background: maroon url('fondo1.gif') no-repeat fixed left bottom;

Coloca color marrón de fondo, la imagen fondo1.gif, que sólo aparece una vez, en la parte inferior izquierda y que se queda fijo en el fondo cuando el usuario se desplaza por la pantalla.

CSS en Listas

CSS permite varios formatos pensados para listas. En general para los elementos que contienen las etiquetas ul y ol.

list-style-type

La propiedad list-style-type permite especificar el tipo de elemento de numeración de la lista. Normalmente los navegadores muestran un círculo relleno en las listas no numeradas (las que se realizan mediante la etiqueta ul) y números romanos en las listas numeradas (etiqueta ol).

Esta propiedad cambia esos símbolos para permitir elegir el que deseemos. La cuestión es que (aunque se podría) no es recomendable hacer que la etiqueta ol muestre símbolos no numéricos y que la etiqueta ul muestre símbolos numéricos, para mantener la coherencia semántica en el lenguaje HTML. En todo caso los posibles valores de esta propiedad son:

• armenian. La lista quedará encabezada por números del alfabeto armenio. • circle. La lista quedará encabezada por círculos. • cjk-ideographic. Se usan símbolos numéricos ideográficos chinos. • decimal. Números decimales. • decimal-leading-zero. Números decimales empezando por cero. • disc. La lista quedará encabezada por círculos sin rellenar. • georgian. Números del alfabeto georgiano. • hebrew. Números del alfabeto hebreo.

background: background-color background-image background-repeat background-attachment background-position


330 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• hiragana. Números del alfabeto hiragana japonés. • hiragana-iroha. • katakana. Números del alfabeto katakana japonés. • katakana-iroha • lower-alpha. Letras minúsculas del alfabeto actual. • lower-greek. Letras griegas minúsculas • lower-latin. Letras minúsculas latinas. • lower-roman. Números romanos en minúsculas. • none. Sin números. • square. Cuadrados rellenos. • upper-alpha. Letras mayúsculas del alfabeto actual. • upper-latin. Letras mayúsculas latinas. • upper-roman. Números romanos en mayúsculas.

list-style-image

En lugar de utilizar uno de los símbolos anteriores, se puede indicar una imagen con la que se rellenará la lista. La imagen puede tener cualquiera de los formatos habituales en las páginas web (gif, jpg, png). Lógicamente el tamaño debe de ser apropiado; si es muy grande la lista quedará totalmente descuadrada. Ejemplo de uso:

list-style-image:url('cuadrado.gif');

list-style-position

Sólo tiene dos posibles valores referidos a la posición del texto respecto de la imagen.

• inside. El símbolo de numeración es interior a los márgenes del elemento en el que se coloca. Es la opción por defecto.

• outside. El símbolo de numeración es exterior.

Opciones de display referidas a listas

CSS dispone de una propiedad muy potente llamada display. Esta propiedad modifica el comportamiento de los elementos y permite indicar otras posibilidades. En el caso de las listas hay dos valores de display que son interesantes:

• display:inline. El valor inline aplicado a una lista hace que la lista no se muestre separada y acompañada de los símbolos de lista, sino que se muestra en la misma línea separados con un espacio cada elemento. Ejemplo:

<!doctype html> <html lang="es"> <head>


li{ display:inline; }

</style>


331 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

</head> <body>

<ol> <li>Azúcar</li> <li>Sal</li> <li>Alubias</li> <li>Refresco</li>

</ol> </body> </html> Resultado:

• display:list-style. Es justo el contrario del anterior permite a otros elementos usarse como parte de una lista. Ejemplo:

<!doctype html> <html lang="es"> <head>


p{ display:list-item; } </style>

</head> <body>

<p>Lista de la compra</p> <ol>

<p>Azúcar</p> <p>Sal</p> <p>Alubias</p> <p>Refresco</p>

</ol> </body> </html>

El resultado es:

La etiqueta p se comporta en el ejemplo como si fuera una etiqueta li, sin embargo respetará el tipo de letra, los espacios, etc. Es decir todas las características restantes de los elementos p. Se observa también que cuando p no está dentro de una etiqueta de lista (como ul u ol) funciona de manera habitual (como se observa en el párrafo Lista de la compra).


332 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

CSS en Tablas

Las tablas, por su particularidad poseen propiedades que, aunque se pueden utilizar con cualquier elemento, están pensadas específicamente para ellas. El manejo de tablas es un poco distinto con CSS. La anchura de las tablas sigue pudiéndose con la propiedad width de la etiqueta table y los bordes de la tabla se manejan también con las propiedades HTML.

Muchos diseñadores trabajan de esta forma con HTML indican la anchura de la tabla y la posibilidad de tener bordes (propiedad border de HTML) y con CSS se pueden establecer propiedades concretas para los bordes (como border-color, border-style o border-width). Otra opción, más coherente aunque falle en algunos navegadores, es usar sólo CSS.

Las propiedades CSS específicas para tablas son: • border-collapse. Permite indicar cómo manejar los bordes adyacentes entre

elementos. Posibles valores: o collapse. Se unen los bordes adyacentes para formar un único borde o separate. Los bordes adyacentes se mantienen separados. Es el valor

por defecto. Ejemplo:

table { width:100%;

} td {

border:2px solid black; }

La tabla se muestra en modo separate. Sin embargo indicando modo collapse en

la etiqueta table: table {

width:100%; border-collapse:collapse;

} td {

border:2px solid black; }


333 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• border-spacing. Indica el espacio entre bordes. Admite dos medidas, la primera se utiliza para la distancia horizontal y la segunda para la vertical. Si se utiliza una medida se referirá a ambas distancias. Ejemplo:

border-spacing:10px 5px;

Ejemplo: <!doctype html> <html lang="es"> <head>

<meta charset="UTF-8"> <title>Document</title> <style> table{

width:100%; border-spacing: 10px 25px; border:2px solid black; }

td{ border:2px solid black; } </style>

</head> <body>

<table> <tr>

<td> </td> <td> </td> <td> </td> <td> </td>

</tr> <tr>


</tr> <tr>


</tr> </table>

</body> </html> Resultado:


334 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• caption-side. Propiedad utilizada para la etiqueta caption que contiene el título de una tabla. Permite indicar si queremos que el título esté por encima de la tabla (valor top, valor por defecto) o por debajo (valor bottom)

• empty-cells. Permite especificar si los bordes y sombreados de la tabla se aplican a las celdas vacías. Valores:

o show. Se aplican bordes y sombreados a esas celdas (valor por defecto)

o hide. No se aplican los bordes y sombreados a las celdas vacías.

• table-layout. Indica la forma en la que se determina la anchura de la tabla y las celdas. Posibles valores:

o auto. Valor por defecto. Aunque hayamos indicado anchura para tabla y/o celdas, su tamaño se determina por el contenido de las mismas (si el contenido requiere mayor anchura, así se hará.

o fixed. Predomina la anchura establecida por las propiedades y no por el contenido.

4. Posicionamiento con CSS

Una de las grandes peticiones de los diseñadores web era la posibilidad de poder colocar contenido en una posición concreta de la página, haciendo que los contenidos no se vayan mostrando en el orden en el que aparecen en el código, sino que podamos indicar una posición concreta.

Fue la principal aportación de CSS2 y actualmente se considera que la labor de maquetar la página que antes hacían las tablas, ahora se puede establecer de mejor manera con estas propiedades. Estas propiedades dan lugar a lo que se conoce como capas, elementos que permiten una distribución de contenidos más libre. La etiqueta div suele ser la encargada de crear tablas, aunque con HTML5 se empieza a aconsejar que sean otros elementos los que hagan esta labor, ya que div no es una etiqueta semántica (no dice qué tipo de contenido posee, si es un artículo, un título, un menú,…).

Flotación

La propiedad float es muy útil para contenidos multimedia como imágenes o tablas. Permite indicar cómo se comportan los elementos siguientes sobre aquel al que le establecemos la propiedad.

Normalmente todos los elementos no flotan. Es decir cuando colocamos, por ejemplo, una imagen, el contenido que va a continuación aparece en su línea base, dejando un hueco poco estético.

Podemos hacer que ese contenido contornee la imagen a su derecha (float:left) o a su izquierda (float:right). Posibles valores de la propiedad float:

• left. El elemento flota a la izquierda. El contenido inmediatamente siguiente le contornea a su derecha.


335 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• right. El elemento flota a la derecha. El contenido inmediatamente siguiente le contornea a su izquierda.

• none. El elemento no flota (valor por defecto).

El texto aparece después de la imagen; sin flotación (float:none), en la segunda imagen hay flotación izquierda (float:left)

Tamaño del elemento

Dos propiedades permiten establecer el tamaño de un elemento:

• width. Anchura del elemento. Su valor por defecto es auto, lo que implica que el elemento se hará lo suficientemente ancho para que quepa su contenido. De otro modo indicaremos su tamaño mediante un tamaño exacto (en píxeles) o en porcentaje

El porcentaje se referirá a la anchura de su contenedor, es decir si indicamos un 50%, estaremos diciendo que el elemento ocupa la mitad del espacio disponible en el elemento padre del actual. Si se lo decimos a un elemento “p” que está dentro de body, dicho elemento ocupará la mitad total de la anchura de la página.

• height. Altura del elemento. Tiene las mismas posibilidades que el elemento anterior.

Modo de posicionamiento

La propiedad position es la fundamental para establecer el posicionamiento, permite indicar si el elemento al que se aplica realmente se comportará como una capa de contenidos que se colocará libremente en la página. Posibles valores:

• static. Es el valor por defecto. Si se establece así, el elemento al que se aplique aparece en la página en la posición que dicte el flujo natural (de izquierda a derecha y de arriba abajo) del código. Es decir, ignorará las propiedades de posicionamiento (left, top,…)

• fixed. La posición del elemento se fija en base a las coordenadas de la ventana, independientemente de dónde esté contenido el elemento. Es decir toma como referencia la ventana del documento de modo que la esquina superior izquierda será la coordenada 0,0.


336 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• relative. Funciona como static sólo que permite flotar el contenido las coordenadas elegidas. En modo relative, el elemento marcado con este posicionamiento, deja el hueco que le correspondería en modo static. No se usa mucho en maquetaciones de páginas

• absolute. Funciona como fixed, salvo que toma como referencia de las coordenadas, los límites del componente que contiene al actual.

Es decir si tenemos un elemento (por ejemplo de tipo div) llamado interior dentro de otro llamado padre; si utilizamos position:absolute; dentro del CSS de la capa interior, entonces las coordenadas de la capa interior tomarán los límites de la capa padre como referencia. Poniendo en la capa interior: left:30px; separamos esta capa treinta píxeles del margen izquierdo de la capa padre (en lugar de separarnos del borde de la ventana como hace fixed).

Ejemplo (posicionamiento relativo): <!doctype html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Document</title> <style>

div{ position:fixed; left:50px; top:50px; width:600px; height:300px; background-color: gray; }

p{ position:absolute; background-color: lightgray; width:75%; left:40px; }

</style> </head> <body>

<div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur provident eum praesentium placeat aperiam enim non voluptatem ab eaque modi laboriosam error esse dicta in impedit debitis vel veniam optio dolore facilis est dolorem ut officiis excepturi sint quasi fugit fugiat! Assumenda numquam amet porro sint nemo non perspiciatis vero laboriosam voluptate vel nihil deleniti ut consequuntur! In accusamus assumenda harum veniam blanditiis tenetur excepturi debitis sit est minima vel quia nihil? Accusamus beatae quod hic optio nostrum quibusdam adipisci modi aspernatur alias eaque laudantium dignissimos sed pariatur dolore obcaecati explicabo maxime possimus dolores non facilis deleniti placeat laborum recusandae!</p> </div>

</body> </html> Mostraría este resultado:


337 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Si modificamos el CSS y cambiamos la línea remarcada a position:fixed: Ahora el párrafo se sale de su contenedor porque las coordenadas se refieren a la ventana y no se calculan a partir de la etiqueta div que contiene al párrafo.

Establecer coordenadas de posicionamiento

Cuatro propiedades se encargan de mostrar un elemento en una posición exacta en la página:

• left. Permite indicar la coordenada izquierda del elemento. Tomada desde el margen izquierdo

• top. Coordenada superior. Tomada desde el borde superior. • bottom. Coordenada inferior. Distancia al borde inferior • right. Coordenada derecha. Distancia al borde derecho.

Las coordenadas se calculan desde la referencia de coordenadas establecidas por la propiedad position. Si es fixed se toma los bordes de la ventana. Es incompatible usar bottom y right y, a la vez, los tamaños con width y height. Ejemplo: <!doctype html> <html lang="es"> <head>


div{ position: fixed; background-color: yellow; left:50px; top:120px; right:80px; bottom:100px;

} </style>

</head> <body>

<div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur provident eum praesentium placeat aperiam enim non voluptatem ab eaque modi laboriosam error esse dicta in impedit debitis vel veniam optio dolore facilis est dolorem ut officiis excepturi sint quasi fugit fugiat! Assumenda numquam amet porro sint nemo non perspiciatis vero laboriosam voluptate vel nihil deleniti ut consequuntur! In accusamus assumenda harum veniam blanditiis tenetur excepturi debitis sit est minima vel quia nihil? Accusamus beatae quod hic optio nostrum


338 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

quibusdam adipisci modi aspernatur alias eaque laudantium dignissimos sed pariatur dolore obcaecati explicabo maxime possimus dolores non facilis deleniti placeat laborum recusandae!</p> </div>

</body> </html>

Propiedad display

Display es una propiedad aparecida en CSS2 que permite establecer la forma en la que se muestra por pantalla un elemento. Está especialmente indicada para documentos distintos a HTML (XML por ejemplo) en los que se contenido no tiene por defecto una forma de mostrarse.

En HTML permite decidir la forma en la que se muestra un elemento. Por ejemplo, en HTML los elementos de tipo p (párrafos) se entiende que se mostrarán como párrafos independientes, es decir, con cada etiqueta p comienza un nuevo párrafo o bloque. No irán seguidos dos elementos de párrafo consecutivos.

Los posibles valores de la propiedad display son: • none. El elemento se muestra a su manera habitual • block. El elemento se muestra como bloque separado (igual que el elemento

p). • inline. Elemento que se muestra seguido del anterior y el siguiente (como el

elemento span) • list-item. El elemento se considera un ítem de una lista (igual que la etiqueta li) • box. (También vale flex-box), muestra el elemento • table. Considera al elemento una tabla • table-caption. Considera al elemento un título de tabla • table-cell. Considera al elemento una celda de una tabla • table-row. Considera que el atributo es una fila. • table-row-group. Considera al elemento un grupo de filas. • table-column. Considera al elemento una columna • table-column-group. Considera al elemento un grupo de columnas. • table-footer-group. Considera al elemento un pie de tabla (como tfoot)


339 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• table-header-group. Considera al elemento una cabecera de tabla (como theader)

• inline-table. Elemento inline interior a una tabla. • inline-block. El elemento forma un bloque, pero que es interior a su

contenedor. Es como si fuera el cuadro de una imagen.

Ejemplo: (inline-block): <!doctype html> <html lang="es"> <head>

<meta charset="UTF-8"> <title>Propiedad display</title> <style>

#marco{ background-color:lightgray; border:2px solid black; display:inline-block; width:50%; }

p{ border:1px solidgray; } </style>

</head> <body>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim aliquam iste culpa aperiam deserunt quia aliquid qui saepe quisquam rem consequatur necessitatibus voluptates laborum architecto quaerat et facilis nobis eveniet quae officiis. Harum temporibus cupiditate asperiores

<span id="marco"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam laudantium non iure soluta rem ipsa hic tenetur dolores aspernatur natus eius praesentium quod iusto consequuntur aut quo commodi repellendus fuga? </span>

arum rerum in quaerat deserunt numquam recusandae nam sed nostrum vel odit voluptates eius animi enim vitae iure deleniti quasi nulla voluptas reiciendis ullam mollitia molestiae voluptatibus praesentium nihil. Quas atque commodi molestiae facilis architecto dicta sit quia aliquam perspiciatis expedita voluptatem veritatis rerum nulla mollitia accusantium! Quod temporibus explicabo aliquid a officiis labore sequi nesciunt commodi eos nostrum distinctio reprehenderit? Consectetur obcaecati ad! deserunt totam officiis nesciunt voluptas saepe suscipit quo nostrum voluptatum voluptatem quod! Assumenda nobis consequatur blanditiis iure doloremque fuga excepturi aut. </p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi beatae obcaecati assumenda temporibus voluptate aspernatur vitae? Alias a libero nisi aspernatur asperiores ea deserunt molestias obcaecati facere consectetur voluptates excepturi! </p>

</body> </html>

Resultado: propiedad display con valor inline-block, el cuadro de color gris es un elemento span al que se le ha dado categoría de bloque interior.


340 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Módulo 3: Herramientas Tecnológicas de Investigación e Información Tema 6: Dreamweaver

341 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

TEMA 6: DREAMWEAVER

1. Introducción, conceptos básicos y entorno de trabajo.

Dreamweaver, como prácticamente todos los programas de diseño, está continuamente innovándose. Se encuentran versiones anteriores de Macromedia, y versiones más actuales de Adobe, CS3, CS4, CS5, CS6, CC, y las que se vayan actualizando en el futuro.

En este curso vamos a tratar la versión CS6 bajo el entorno del S.O Windows.

Dreamweaver CS6 es un software fácil de usar que permite diseñar, desarrollar y gestionar páginas web profesionales. Sus funciones de edición visual permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML. De esta manera se pueden crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc.., de una forma muy sencilla y visual.

Forma parte de un paquete integrado de programas de Adobe, entre los que figuran Photoshop y Flash, aumentando de esta forma la funcionalidad y la facilidad de diseño.

Además incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar con mapas visuales de los sitios web, actualizando el sitio web en el servidor sin salir del programa.

Este programa nos permite trabajar en un entorno gráfico de usuario, escribiendo el código HTML y visualizando el diseño a la vez, o bien prescindiendo del código e insertando texto y objetos a la par que van generando el código. Aunque este programa nos facilite el diseño, es conveniente tener conocimientos de HTML y de estilos CSS.

Otros editores de páginas web que podemos encontrar en el mercado son Microsoft Expresion Web, Amay, NVU, …

Dreamweaver permite crear en el ordenador una copia local del sitio web que luego pondremos a disposición de todo el mundo en Internet. Por tanto, una vez hayamos terminado de diseñarlo en modo local sólo tendremos que subir los archivos al servidor manteniendo la estructura del local. Es decir, deberemos subir todos los archivos tal y como aparecen en el disco duro, respetando el nombre de los archivos y la organización de las carpetas. Si no lo hacemos de este modo, el sitio experimentará fallos y enlaces que no funcionarán.

Para evitar problemas de interpretación de caracteres con el servidor y con los distintos navegadores donde se mostrará la página web será mejor que no utilicemos caracteres especiales como acentos o eñes, ni espacios en blanco en los nombres de archivos o carpetas. De esta forma nos aseguramos de que el servidor puede


342 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

reconocer sin ningún tipo de problemas los nombres de los archivos que alojemos en él.

También, para evitar errores de enlaces rotos o imágenes que no se muestran debemos escribir, también, los nombres en minúscula. Algunos servidores (los que utilizan Linux) distinguen entre mayúsculas y minúsculas, por lo que si en la página queremos mostrar la imagen toledo.jpg deberemos guardarla con ese nombre y no como Toledo.jpg.

Arrancar y cerrar Dreamweaver CS6

Si tenemos el S.O. Windows, hacemos clic sobre el botón Inicio, se despliega un menú y eligiendo el programa lo iniciamos. Hay otras formas, como comenzar a escribir el nombre del programa y aparecerá directamente, o pulsando en Todos los programas y buscarlo en la lista con los programas que hay instalados en el equipo. Buscamos Adobe Dreamweaver CS6 y hacemos clic sobre él para arrancar el programa. También desdeel iconode Dreamweaver CS6 del Escritorio, si está el acceso directo.

Al iniciar el programa nos aparece la siguiente interface:

Para cerrar Dreamweaver CS6, hacemos clic en el botón cerrar, en la esquina superior derecha, como en cualquier ventana de Windows, o pulsar la combinación de teclas Alt + F4. También haciendo clic sobre el menú Archivo y elegir la opción Salir.

Si existe algún documento modificado que no ha sido guardado antes de cerrar Dreamweaver, se nos pedirá confirmación para guardar o no cada uno de ellos.

Preferencias del programa.

Desde el menú Edición eligiendo Preferencias accedemos a las opciones de configuración previa del programa, a efectos de tenerlas en cuenta cuando creemos los nuevos documentos.


343 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

En la ventana de la izquierda se encuentran las diferentes categorías a las que podemos asignar nuestras preferencias, como por ejemplo que al abrir un nuevo documento HTML se establezca la versión HTML5.

Abrir y guardar documentos

Hay varias formas de abrir un documento, nos sirve cualquiera de estas:

• Desde la ventana de bienvenida podemos elegir uno con el que hayamos trabajado recientemente o bien, en la carpeta abrir acceder a la estructura de almacenamiento del equipo.

• Clic en el botón abrir de la barra de herramientas estándar (si está visible).

• Clic sobre el menú Archivo y elegir la opción Abrir....

• Hacemos clic sobre el menú Archivo y elegir la opción Abrir reciente. Muestra los últimos archivos abiertos.

• Hacemos clic sobre el menú Archivo y elegimos la opción Examinar en Brigde. Se abrirá el programa Brigde que muestra las carpetas y archivos de forma gráfica.

• Clic sobre el archivo en la ventana del sitio.

• Si es documento es nuevo:

• Clic en el botón nuevo de la barra de herramientas estándar (si está visible).

• Pulsamos la combinación de teclas Ctrl + N.

• Hacemos clic sobre el menú Archivo y elegir la opción Nuevo.

Desde cualquiera de estas opciones aparecerá una nueva ventana, en la que deberemos elegir la Categoría de Página que nos convenga (en blanco, plantilla o muestra).


344 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

En la segunda columna seleccionamos HTML, observamos que hay muchos diseños ya creados que podemos elegir y pulsamos el botón Crear.

Para guardar un documento, utilizamos cualquiera de las siguientes operaciones.

• Clic en el botón Guardar de la barra de herramientas estándar.

• Pulsar la combinación de teclas Ctrl + S.

• Hacer clic sobre el menú Archivo y elegir la opción Guardar.

En el caso de estar trabajando simultáneamente con varios documentos, podemos guardar todos de golpe, sin la necesidad de hacerlo uno por uno. Para guardar

todo hacemos clic en el botón Guardar todo de la barra de herramientas estándar, o bien pulsamos sobre el menú Archivo y elegir la opción Guardar todo.

Entorno de trabajo

El espacio de trabajo de Dreamweaver permite ver las propiedades de los documentos y los objetos.Además, coloca muchas de las operaciones más frecuentes en barras de herramientas para que se puedan realizar cambios en los documentos rápidamente.


345 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

A. Barra de aplicaciones B. Barra de menúC. Barra de herramientas Documento D. Ventana códigoE. Ventana vista diseño F. Conmutador de espacios de trabajo G. Grupos de paneles G. Vista en vivo H. Selector de etiquetasI. Panel de propiedades.

Elementos de la ventana de Dreamweaver: Barra de aplicaciones, barra de menú y conmutador de espacios de trabajo:

Estas barras podrían verse en la misma línea si la resolución de la pantalla es grande y la ventana está ampliada, puesto que quedará espacio para ambas.

En el conmutador de espacio de trabajo tenemos una lista de diferentes perfiles de usuario, diseñador, desarrollador, programador,… Nosotros utilizaremos el del diseñador. En función del perfil elegido varían los paneles de la interfaz, pues son necesarias otras utilidades.

La barra de aplicaciones nos muestra unos iconos con herramientas para la ventana de diseño, extensiones del programa y acceso al sitio.

Las opciones del menú contienen los comandos necesarios para el manejo del programa.

Barra o pestañas de títulos del documento.

En ella nos encontramos las pestañas de los documentos que vayamos abriendo. Si alguna página HTML tiene algún archivo CSS, o JavaScript, etc...vinculado, debajo de la pestañas encontramos los archivos que utiliza, pudiendo acceder a ellos con un


346 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

clic. Cuando tenemos documentos en los que aún no se han guardado cambios aparece un * tras el nombre.

Ventana del documento.

Es el espacio habitual de trabajo.

En esta ventana nos encontramos, en la parte superior los comandos de visualización de documento, para que se nos muestre en ella:

Código, sólo muestra el código generado. Dispone, anclada a su izquierda de su propia barra de herramientas.

Dividir, mostrando en un lado el código y en otro el diseño correspondiente a ese código, lo que permite gran control sobre el mismo. Puede mostrarse a la izquierda o a la derecha del código.

Diseño, oculta el código y muestra sólo el diseño de la página.

En Vivo, nos muestra una vista del resultado final que no es editable. A diferencia de la Vista Diseño, que nos permite editar los elementos, esta vista nos permite interactuar con ellos, tal como lo haríamos con el navegador y nos permite ahorrarnos tiempo, al no ser necesario acceder a un navegador para comprobar cambios. No


347 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

obstante, es conveniente comprobar la página con los navegadores más utilizados del mercado que serán los que emplearán nuestros visitantes. También es conveniente comprobar la página con los distintos tamaños de pantalla, teléfono móvil, tablet y PC.

La vista Código en vivo se emplea conjuntamente con la Vista en vivo. Divide la pantalla como la vista Dividir, pero sin que podamos editar el código. Lo que hace es que al seleccionar partes de la web en la Vista en vivo, se seleccione su correspondiente código fuente y refleje los cambios dinámicamente al interactuar con la página.

Inspeccionar, muestra los estilos aplicados en cada momento. Permite visualizar los elementos de la página atendiendo al "modelo de caja CSS", es decir, que podremos visualizarlos márgenes, relleno (padding), borde y contenido

Además de estos comandos, tenemos, entre otros, el de Tamaños de pantalla y Visualizar con un explorador de los que tengamos instalados.

Junto a estos botones aparece otra barra que sólo funcionacuando estamos en la Vista en vivo. Es la barra "Navegación con navegador", que contiene los botones habituales que nos encontramos en un navegador: atrás, adelante, actualizar, la página deinicio, la barra de direcciones, etc.

Barra de herramientas estándar.

Aloja los iconos para realizar las acciones más habituales del menú Archivo y Edición: Nuevo archivo, Abrir, explorar con Adobe Bridge, Guardar, Guardar todo, Imprimir el código fuente, Cortar, Copiar, Pegar, Deshacer y Rehacer.

La barra de representación de estilos.

También accesible desde el menú Ver > Barras de herramientas

Esta barra, menos utilizada, nos permite ver la apariencia de nuestra web en distintos dispositivos, si estamos utilizando hojas distintas que dependan del eso. Hay varias opciones, como las de ver los estilos que dependen de pseudo clases activas, como cuando el cursor está sobre un elemento.


348 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

La barra de estado.

Debajo de la ventana de documento, nos ofrece información sobre el mismo.

A la izquierda, encontramos el selector de etiquetas. Nos sirve para seleccionar etiquetas completas. A la derecha tenemos las herramientas de Selección, Mano (para desplazarse) y Zoom. Más a la derecha encontramos tres iconos para ver la página en tres tamaños de pantalla: móvil, tableta y PC escritorio.En esta aparecen los tamaños de página acordes a lasresoluciones más habituales de pantalla, por lo que podrás comprobar elaspecto de las páginas web en distintas resoluciones.Para poder utilizar los valores disponibles en esta lista detamaño, la ventana del documento no tiene que estarmaximizada.

Al final hay otros datos, el tamaño de la ventana, el tamaño de la página, tiempo de descarga en un navegador y codificación de texto.

El inspector de Propiedades.

El inspector de Propiedades muestra las opciones propias del objeto o texto seleccionado, permitiéndonos editarlas, por lo que se convierte en uno de los elementos más utilizados en Dreamweaver.

En otros elementos, como párrafos y estilos, este panel puede mostrar dos tipos de propiedades, HTML y CSS, que podemos aplicar a los diferentes elementos de la página Web que estemos diseñando.


349 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Área de paneles.

Los paneles se encuentran, en el área de trabajo del diseñador, a la derecha de la pantalla. Se utilizanpara presentar el contenido quepodemos insertar en las páginas web, así como para organizarlas distintas características y funciones a las que nos da acceso.Se pueden extender al hacer clic sobre ellos. También se pueden sacar elementos individualmente del grupo de paneles, agruparlos y ocultarlos. Cuando los ocultamos vuelven a ser visibles desde el menú Ventana. Si el elemento se abre en una ventana flotante, lo podemos arrastrar al área de paneles junto a los demás.

Para contraer o maximizar un panel hemos de hacer doble clic en la etiqueta de su nombre.

Los paneles disponen de un menú de opciones en la esquinasuperior derecha, que en función del panel tendrá unas u otrasopciones.


350 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Aunque inicialmente los paneles se muestran completamente, esposible reducirlos a un icono y mostrar sus opciones solo cuandoqueramos. Para ello, podemos utilizar el botón situado en la partesuperior de los paneles. Incluso podemos reducir el tamaño y dejarloscomo un icono.

El panel Insertar nos permite incorporar todo tipo de elementos, clasificados en categorías, a la página web, ya sean vínculos, tablas, multimedia, formularios….

El panel Archivos nos facilita la estructura de almacenamiento del sitio en el que estemos trabajando, pudiendo desde él.

La ayuda

La ayuda en línea está accesible a través del menú Ayuda, mostrándonos variasopciones.

• Eligiendo la opción Ayuda del menú o pulsando F1 se accede a la ayuda en línea de Adobe Community Help donde podemos buscar por temas o por búsqueda de palabras clave.


351 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• Ayuda de Business Catalyst que es un sistema de alojamiento de páginas web con funciones adicionales. Es de Adobe y hay diferentes opciones de pago al mes.

• Acceder al Foros en línea de Adobe.

• Referencia abre un panel en el que encontrarás la sintaxis y descripción de las etiquetas HTML.

• Acceder al Centro de soporte de Dreamweaver en la web.

• Dreamweaver Exchange es un sistema para compartir extensiones.

Además, en la barra de aplicación encontramos una caja de búsqueda. Al introducir los términos de la búsqueda y buscar, iremos a la ayuda online de Adobe.

2. Configuración del sitio web

Introducción

Hablar de un sitio web es definir un conjunto de archivos y carpetas, relacionados entre sí, para lo cual antes de empezar a crear páginas web, tendremos que tener previsto cuál va a ser el diseño del sitio y cómo lo vamos a planificar.

Una vez planificado, creamos el sitio local (o si queremos en este caso, sitio de Dreamweaver). Para ello lo primero será crear una carpeta en el disco local donde guardaremos los archivos HTML. Además para contener las imágenes, las animaciones, archivos de tipos específico, etc., crearemos nuevas carpetas dentro de la carpeta del sitio, con el objetivo de tener una mejor organización de los archivos a la hora de trabajar.

De esta forma se establecen correctamente todas las direcciones o URL a partir de dicha carpeta del equipo, utilizando direcciones relativas. Así, cuando tengamos que subir las páginas al servidor web (sitio remoto) que finalmente las alojará en Internet, los enlaces, hipervínculos, URL y demás seguirán funcionando perfectamente puesto


352 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

que la organización de los archivos en un sitio permite administrar y compartir archivos, mantener los vínculos de forma automática, utilizar FTP para cargar el sitio local en el servidor, etc. Por tanto, el sitio local y el sitio remoto tienen la misma estructura. El sitio local es la copia del sitio con la que trabajaremos, y los cambios los actualizaremos en el sitio remoto.

Asistente de configuración del sitio.

Para crear el sitio, el programa nos presenta el cuadro de diálogo Configuración del sitio para, que es accesible desde el menú Sitio a través de sus opciones Nuevo sitio …o Administrar sitio.

En este cuadro, en la categoría Sitio, hemos de ponerle un nombre al sitio para diferenciarle de otros sitios que creemos e indicarle la carpeta donde lo alojaremos. A esta carpeta también la conocemos como Carpeta raíz del sitio.

Aunque de momento no sea necesario, en la categoría Servidores, se pueden especificar los detalles del servidor web donde finalmente se van a alojar y publicar las páginas web. Estos datos son proporcionados por el ISP, proveedor de Servicios de Internet o el Administrador Web.


353 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

De momento con estas opciones, una vez establecidas las opciones y habiendo pulsado el botón Guardar, ya tenemos creado nuestro sitio en local. El programa crea el sitio y abre el panel Archivos, donde se van a encontrar los archivos y carpetas que van a constituir el sitio.

Si en el menú Sitio elegimos Administrar sitio… vemos que el sitio está creado y desde ahí podemos entrar en sus propiedades.


354 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Se pueden tener varios sitios locales creados en el mismo equipo, es cuestión de elegir uno u otro para abrirlo.

Desde esta ventana podemos realizar varias acciones. Debajo de la lista de sitios tenemos cuatro botones que nos permiten eliminar un sitio, editarlo, duplicarlo y exportarlo.

Vemos también los botones:

• Importar sitio. Si previamente lo hemos exportado, normalmente, desde otro ordenador.

• Importar sitio de Business Catlyst. Catalyst es un sitstema de hospedaje de pago de Adobe.

• Nuevo sitio.

• Nuevo sitio de Business Catlyst.

En la parte inferior derecha tenemos el botón Listo que nos abrirá el sitio seleccionado.

Tanto si se pulsa el botón Nuevo sitio, como si se elige el botón Editar, se mostrará la misma ventana en la que definir o modificar las características del sitio.

Abrir un sitio

Para abrir un sitio ya creado hay que ir al menú Sitio, a la opción Administrar sitios.... seleccionar el sitio de la lista de sitios y pulsar sobre el botón Listo.

También podemos utilizar el panel Archivos, buscar y seleccionar el sitio a abrir en el menú desplegable Archivos.

Ver el sitio.

Para ver el sitio normalmente acudiremos al panel Archivos pues es el que nos muestra la estructura del mismo.


355 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Como vemos, este panel nos muestra todos los archivos y carpetas que hayamos creado hasta el momento. En el ejemplo, el sitio Cofradía nos muestra algunos documentos HTML y carpetas.

Con el botón que aparece en la parte superior del panel y de la ventana visualizamos el sitio tanto en local como en el servidor remoto (vacío porque aún no se ha subido ningún elemento), si es que ya lo hemos alojado en él. Esto nos sirve para poder, por ejemplo, sincronizar los archivos, o compararlos.

El programa guarda la caché de nuestro sitio, cómo se organizan los archivos y se relacionan entre ellos. Por eso, si cambiamos el nombre de un archivo o su carpeta desde el panel de archivos, el programa automáticamente actualiza todas las referencias a ese archivo (enlaces desde otras páginas, origen de la imagen, etc).

En cambio, si realizamos estos cambios desde fuera de Dreamweaver, las páginas no se mostrarán correctamente: no aparecerán imágenes, no funcionarán enlaces, etc, ya que Dreamweaver simplemente no encontrará la página.

Si modificamos algún elemento que está enlazado o referenciado por algún otro documento, se muestra una ventana similar a ésta, que indica los documentos que


356 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

hacen referencia a dicho objeto, y que pueden ser actualizados para que no se produzcan los problemas antes mencionados.

Simplemente hay que pulsar sobre el botón Actualizar, aunque esto dependerá de si tenemos configurada la opción Mensaje al actualizar vínculos. Lo cual podemos establecer desde las Preferencias del menú Edición, en la categoría General.

Panel Activos.

Dreamweaver proporciona una forma sencilla y ágil de visualizar los documentos que tenemos organizados en el sitio, y es con el panel Activos, donde se muestran los recursos del sitio web.

Por ejemplo, como vemos en la siguiente figura, el panel de activos nos muestra las imágenes, y los distintos elementos, multimedia, etc. De esta forma es mucho más sencillo emplearlas en las distintas páginas web.

Crear una página Web.

Para crear una página o un documento nuevo lo hacemos desde el menú Archivo > Nuevo…, como se explicó en el tema anterior.

Elegimos un tipo de documento y pulsamos en crear. (En el ejemplo vamos a crear un documento HTML5 sin plantilla)


357 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Podemos escribir texto y guardar la página, la vamos a llamar prueba.html, pero si esta fuese la página principal del sitio la llamaríamos index.html, o index.htm o default.html, e incluso main.html, ya que cuando se intenta acceder a una URL genérica, el servidor devuelve la página con ese nombre.

Es conveniente definir sitios homogéneos para que todas las páginas de un sitio sigan un mismo formato, es decir, que tengan el mismo color de fondo, de fuente, etc.

Vamos a definir el formato de cada una de las páginas a través del cuadro de diálogo Propiedades de la página, accesible desde el panel de propiedades o bien:

• Pulsando la combinación de teclas Ctrl + J.

• Haciendo clic sobre el menú Modificar y eligiendo la opción Propiedades de la página.

• Haciendo clic con el botón derecho del ratón sobre el fondo de la página. Aparecerá al final del menú contextual la opción Propiedades de la página.

Tendremos el cuadro de diálogo siguiente:


358 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Las propiedades están organizadas en categorías.

En la categoría Apariencia (CSS) de este cuadro de diálogo se distingue entre apariencia CSS y apariencia HTML. Es más adecuado es utilizar siempre CSS para el formato o apariencia de la página web. Así pues, en la categoría Apariencia CSS estableceremos algunas propiedades CSS referentes a la apariencia o formato global de la página. Estas propiedades se incrustarán en la sección head del documento .html, aunque posteriormente podremos mover esas reglas a una hoja externa. Como vemos en la imagen anterior, configuramos las propiedades:

• Fuente de página: tipo de letra que le aplicaremos al texto.

• Tamaño: el tamaño que aplicaremos al texto.

• Color del texto: el color de la fuente.

• Color del fondo: permite especificar un color de fondo para el documento, pero dicho color solo se mostrará en el caso de no haber establecido ninguna imagen de fondo.

• Imagen de fondo: permite especificar una imagen de fondo para el documento. Dicha imagen se muestra en mosaico. Es importante al elegir una imagen de fondo tener en cuenta que según los colores de la imagen será necesario establecer unos u otros colores para el texto, así como que no es conveniente tener un gif animado como fondo.

• Repetir: permite especificar si queremos que la imagen de fondo se repita o no. Si no queremos que se repita, seleccionamos la opción no-repeat. Si queremos que se repita o dejamos la opción en blanco o seleccionamos la opción repeat. Si queremos que se repita solo en horizontal seleccionamos la opción repeat-x y si queremos que se repita en vertical, entonces seleccionamos repeat-y.

• Márgenes: permiten establecer márgenes en el documento, es decir, la distancia entre donde empieza el contenido de la página y la ventana del navegador.

En la categoría Apariencia (HTML), podríamos establecer prácticamente las mismas propiedades de la página pero a través de los atributos HTML. Como es mejor hacerlo mediante CSS, no utilizaremos esta sección. Como vemos en la imagen siguiente, encontramos las propiedades:


359 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• Imagen de fondo: permite especificar una imagen de fondo para el documento. Dicha imagen se muestra en mosaico. Es importante al elegir una imagen de fondo tener en cuenta que según los colores de la imagen será necesario establecer unos u otros colores para el texto, así como que no es conveniente tener un gif animado como fondo.

• Fondo: permite especificar un color de fondo para el documento, pero dicho color solo se mostrará en el caso de no haber establecido ninguna imagen de fondo.

• Texto: es el color de la fuente.

• Vínculos: es el color que mostrará el texto de los vínculos.

• Vínculos visitados: es el color que mostrará el texto de los vínculos visitados.

• Vínculos activos: es el color que mostrará el vínculo cuando el cursor del ratón hace clic sobre el mismo.

• Márgenes: permiten establecer márgenes en el documento, es decir, la distancia entre donde empieza el contenido de la página y la ventana del navegador.

Podemos observar que muchas propiedades HTML y CSS son similares. La diferencia es que CSS aplica nuestra configuración utilizando reglas de estilo, mientras que HTML lo hace con atributos HTML. Estos últimos están cayendo en desuso, ya que se tiende a limitar el HTML al contenido, y no al diseño. Por eso, se desaconseja su uso.

En la categoría Vínculos (CSS) encontramos las propiedades:


360 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• Fuente de vínculo: tipo de letra que mostrará el texto del vínculo.

• Tamaño: el tamaño del texto de los vínculos.

• Color de vínculo: color de los vínculos, que ayuda al usuario a distinguir entre el texto normal y los vínculos que sirven de enlace a otras páginas.

• Vínculos visitados: color de los vínculos visitados, que permite distinguir al usuario si unos vínculos ya han sido visitados o no.

• Vínculos de sustitución: color del texto del vínculo cuando situamos el ratón encima del vínculo.

• Vínculos activos: color de los vínculos activos.

• Estilo subrayado: por defecto, cuando tenemos un texto con un vínculo asociado, el texto aparece subrayado, con esta opción podemos elegir otro tipo de estilo por ejemplo para que no aparezca subrayado.

En la categoría Encabezados (CSS) establecemos las características del texto que actúa como encabezado h1, h2... h6.

Fuente de encabezado: permite establece el tipo de fuente de los encabezados.


361 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

El resto propiedades hacen referencia al estilo cursiva o negrita, así como al tamaño y color que queremos aplicar a cada tipo de encabezado.

En la categoría Título/Codificación encontramos la propiedad:

• Título: es el título del documento, que aparecerá en la barra de título del navegador y de la ventana de documento de Dreamweaver.

• Tipo de documento: lenguaje de marcas que se utiliza.

• Codificación: Código de la tabla de caracteres a utilizar.

En la categoría Imagen de rastreo encontramos las propiedades:

• Imagen de rastreo: permite establecer una imagen como fondo del documento, pero que sólo se mostrará en la ventana de documento de Dreamweaver, y nunca en un navegador. Dicha imagen se utiliza como plantilla gráfica sobre la que crear el documento.

• Transparencia: permite establecer la opacidad de la imagen de rastreo.

Si ahora accedemos al código de la página web, podremos comprobar que las propiedades establecidas mediante el cuadro de diálogo Propiedades de la página se han añadido como reglas CSS en la cabecera o head en la estructura del código de la página web.


362 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Aunque es mejor utilizar hojas externas para establecer estas reglas, por lo que Dreamweaver nos facilita la tarea de mover las reglas. Para ello seleccionamos todas estas reglas y a través del menú contextual del ratón Estilos CCs> Mover Reglas… las movemos al archivo CSS.


363 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Ya sea a una hoja de estilos que tengamos creada o a una nueva:

En cualquiera de los casos, el programa crea el link en la cabecera head de la página, referenciándolo al archivo CSS creado.

Por tanto vemos que Dreamweaver nos facilita el establecimiento de las propiedades CSS. El trabajo de forma visual es más cómodo aunque siempre podemos escribir el código o retocarlo si es que lo necesitamos.

La paleta de color.

Cuando empleamos colores desplegamos una paleta de colores de 216 colores seguros para web. Éstos son los colores que se muestran de la misma forma en cualquier navegador bajo cualquier sistema operativo.

Ccada color seleccionado de la paleta, tiene el valor hexadecimal del color en la parte superior. Pero podemos utilizar otros colores si los personalizamos a través del botón de la parte superior de la paleta.

Los colores pueden asignarse a través de los botones: que aparecen en el inspector de propiedades de muchos objetos, y también en algunas ventanas que permiten especificar propiedades (sobre todo propiedades de texto, fondo, o tablas), como es el caso de la ventana de Propiedades de la página, que vimos en este tema.


364 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

El color puede insertarse de dos modos: pulsando sobre el recuadro gris, lo que hace que se despliegue la paleta de colores, o bien introduciendo directamente el número hexadecimal del color en el recuadro blanco. Por ejemplo, el color verde tiene valor #0F0.

En la web, los colores se representan por la cantidad que contienen de los colores primarios aditivos RGB (Rojo, Verde y Azul).

Para indicar la cantidad de cada uno, se utilizan números hexadecimales, que van del 0 a la F (A=10, B=11, ..., F=16). El valor mínimo (00) indica la ausencia total de ese color, y el máximo (FF) su intensidad total. Para indicar que nos referimos a un color, utilizamos el símbolo # la principio del código. Por tanto, podemos definir un color como #F7F0E2 donde el primer par corresponde al rojo, el segundo al azul y el último al verde.

A veces vemos que se emplean sólo tres valores, ello es debido a que se interpreta que los valores de los pares están repetidos. Es decir, los colores #AA00BB y #A0B son el mismo.

3. Hipervínculos

Recordamos que un hipervínculo (hiperenlace, vínculo, link…..) no es más que un enlace, que al ser pulsado lleva de una página o archivo a otra página o archivo.

Es posible asignar un vínculo a un texto, a una imagen, o a parte de una imagen.

Cuando creemos un enlace, lo que realmente haremos será crear una etiqueta <a></a> que es la que en HTML se encarga de definir los enlaces. Esto podrás observarlo en la barra de estado:

En Dreamweaver es posible establecer hipervínculos a cualquier elemento del documento como puede ser: texto, imágenes, multimedia, etc.

Tipos de rutas de los vínculos.

Cuando se crea vínculos, resulta fundamental conocer la ruta de archivo entre el documento desde el que establece el vínculo y el documento con el que lo establece.

Cada página web tiene una dirección exclusiva, denominada URL (localizador uniforme de recursos). Sin embargo, cuando se crea un vínculo local (un vínculo de un documento con otro documento del mismo sitio), no suele ser necesario especificar el URL completo del documento destino.

Existen diferentes clases de rutas de acceso a la hora de definir los vínculos. Estas referencias no se limitan a los enlaces, se comportarán igual cuando indiquemos la ubicación de una imagen, de un archivo Flash, de la hoja de estilo, etc.


365 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Referencia absoluta:

Nos lleva al sitio en el que se encuentra el documento utilizando la ruta completa del archivo, incluyendo el protocolo http://.

Por ejemplo, http://www.fedeto.com/formacion/index.html o http://www.miempresa.com/contenido/pagina1.html

La referencia absoluta es independiente de la ubicación de la página que contiene el enlace, y será válida siempre que no cambie la ubicación del archivo enlazado. Es la opción obligatoria si pretendemos enlazar a archivos fuera de nuestro sitio (enlaces externos).

Referencia relativa al documento (por defecto):

Se emplean para vínculos locales, resultan particularmente útiles cuando el documento actual y el documento con el que se establece el vínculo se encuentran en la misma carpeta.

La ubicación del archivo enlazado se toma en relación con la ubicación del la página. Partimos de la carpeta en la que se encuentra el documento.

Por ejemplo: miempresa/index.htm

Si queremos referirnos a carpetas que están por encima del nivel donde nos encontramos deberemos utilizar ../

Esta es la opción por defecto de Dreamweaver, y es la forma más habitual para enlazar archivos dentro del sitio.

La ventaja de las URL relativas es que no se necesitan modificar cuando movemos el sitio web a otro lugar. Claro está, siempre que no cambiemos la ubicación relativa de cada archivo. Es decir, si cogemos la carpeta raíz del sitio web y la movemos a otro lugar, todas las URL relativas siguen funcionando perfectamente.

Referencia relativa al sitio:

Nos lleva a un documento situado dentro del mismo sitio que el documento actual. Tomando como origen la carpeta raíz del sitio.

Para indicar la ruta relativa al sitio pondremos una barra / antes de la ruta del enlace..

En el ejemplo anterior si tuviésemos definido como sitio la carpeta http://www.miempresa.com/, un enlace en cualquier página del sitio a http://www.miempresa.com/pagina/articulos/articulo1.html se crearía como/pagina/articulos/articulo1.html.

Por tanto, podríamos poner ese vínculo en cualquier página del sitio y funcionaría independientemente de su ubicación.

http://www.fedeto.com/formacion/index.html

http://www.miempresa.com/contenido/pagina1.html


366 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Estos enlaces no funcionan en el sitio local, a no ser que configuremos un servidor de pruebas, ya que Windows interpretará como raíz la raíz del disco duro.

Crear hipervínculos.

Seleccionamos el texto o imagen en el inspector de propiedades hacemos clic en el cuadro Vínculo

Escribimos la ruta y el nombre del archivo del documento o URL en el cuadro de texto Vínculo o hacemos clic en la carpeta y seleccionamos el archivo.

Otra forma de crear un enlace es a través del menú Insertar, opción Hipervínculo.

• Texto: Especifica el texto que se empleará como vínculo.

• Vinculo: Asigna la ruta del hipervínculo.

• Destino: Especifica la ubicación para abrir el archivo.

• Título: Escribe un título de página para el hipervínculo en el navegador con dicha tecla.

• Clave de acceso: Permite introducir una tecla para activar el hipervínculo en el navegador con dicha tecla.

• Índice de fichas: Introduce un número para el orden de fichas.

Cuando queramos crear un hipervínculo a una página web externa, lo único que cambia es el tipo de URL, que será absoluta, como: http://www.fedeto.es

También podemos crear un hipervínculo a un correo electrónico. Esto resulta útil cuando se desea que los visitantes de la web puedan contactar con nosotros.

La sintaxis del vínculo en este caso es mailto:direcció[email protected].

Puede definirse el vínculo a través de Vínculo, del inspector de propiedades, seleccionando previamente el texto o la imagen deseados.


367 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

También es posible a través del menú Insertar, opción Vínculo de correo electrónico.

En este caso no es posible asignar el vínculo a una imagen, solo permite introducir el texto que contendrá el vínculo de correo.

Lo que hace esta opción depende del navegador que estemos utilizando, teóricamente, el navegador debería abrir el cliente de correo predeterminado del usuario (Outlook, Firebird...). Pero en la práctica cada navegador se comporta de una forma distinta, sobre todo si no tenemos instalado un cliente de correo electrónico y vemos el correo con webmail (Gmail, Hotmail, ...)

Por lo tanto usar mailto es una opción que puede no ser práctica si el usuario no tiene instalado un cliente de correo (Outlook, Firebird...), tampoco si se conecta en un ordenador público, o si utiliza un teléfono móvil o una tableta.

Siempre que se pueda, es mejor crear un formulario de contacto, aunque esto requerirá una página dinámica. Otra opción sería mostrar nuestra dirección de correo, para que el usuario pueda enviarnos el correo como quiera. Si publicamos nuestra dirección en la web es mejor hacerlo como una imagen, o escribiéndola de forma que la pueda entender un humano (por ejemplo [email protected]) para evitar que sea reconocida por robots que la emplearán para el envío de correo no deseado.

Y, finalmente, podemos insertar hipervínculos que apunten a una parte en concreto de la misma u otra página web.

Para ello, primero debemos definir un marcador (una marca que indique la zona de la página destino del hipervínculo) y después se utiliza en la URL del hipervínculo.

Podemos seleccionar previamente texto o algún elemento de la página si deseamos que actúen como marcador, pero no es necesario. Una vez situado el cursor allí donde queremos crear el marcador, despliega el panel Insertar y elige Anclaje con nombre.

Los marcadores son llamados de esta peculiar manera en Dreamweaver. Seguidamente, deberemos introducir el nombre del marcador. En la figura siguiente puedes ver cómo lo representa Dreamweaver (al principio del texto).


368 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Dreamweaver dibuja lo que llama un "elemento invisible" para reflejar la inserción del marcador. Este icono en forma de ancla realmente no formará parte del contenido de la página, sino que es la forma de representar el marcador en la vista Diseño.

Por otra parte, Dreamweaver emplea el atributo name de la etiqueta <a> para crear el marcador. Esto no es lo más correcto, ya que el atributo id es el recomendado por W3C. Por lo tanto, te aconsejamos editar el código y añadir también el atributo id. De esta forma tendrás que name e id tienen el mismo valor:

<a name="inicio" id="inicio"></a>

Una vez definido el marcador, lo utilizamos en la URL del hipervínculo. Para el ejemplo anterior, sería #inicio.

Si el marcador estuviera en una página distinta a la actual, tendrías que formar la URL correspondiente indicando primero la página y después el marcador. Recuerda añadir # antes del nombre del marcador.

En cualquier caso, hay que utilizar el nombre del marcador exactamente como se ha definido, ya que se tiene en cuenta la utilización de letras mayúsculas y minúsculas.

Para comprobar el funcionamiento de los hipervínculos, es necesario mostrar la página en un navegador. No se puede hacer desde Dreamweaver.

Destino del enlace

El destino del enlace determina en qué ventana va a ser abierta la página vinculada.

Puede especificarse en el inspector de propiedades HTML a través de Destino, o en la ventana que aparece a través del menú Insertar, opción Hipervínculo.

_blank:

Abre el documento vinculado en una nueva ventana o pestaña del navegador.

_parent:

Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de marcos padre. Tiene sentido si se emplean marcos.

_self:


369 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Es la opción predeterminada, y la que se produce si no indicamos otra cosa. Abre el documento vinculado en el mismo marco o ventana que el vínculo.

_top:

Abre el documento vinculado en la ventana completa del navegador. Tiene sentido si se emplean marcos.

Lo habitual es abrir las los enlaces a páginas del sitio en la misma ventana, y los enlaces externos en ventanas nuevas. Otra tendencia dice que una página nunca debería de abrir nuevas ventanas, y que debe de ser el usuario el que decida qué enlaces quiere abrir en ventanas nuevas. En la mayoría de navegadores, para abrir un enlace un una ventana nueva, basta con hacer clic con la ruedecilla del ratón.

En general, un texto que tiene asociado un vínculo suele aparecer subrayado. Al mismo tiempo, puede adquirir cuatro colores diferentes que pueden especificarse a través de las propiedades de la página. Estos cuatro colores diferentes corresponden a los tres estados del vínculo: vínculo normal, vínculo activo (el último pulsado), vínculo visitado o vínculo de sustitución (cuando el cursor está sobre el vínculo).

También existen Hipervínculos que apuntan a otros tipos de archivos que no puede visualizar directamente el navegador, como los archivos comprimidos.

Cuando creamos estos hipervínculos, lo que ocurre es que se nos permite descargar el archivo en nuestro ordenador.

4. Listas

Es posible insertar texto a modo de lista. A su vez, la lista puede ser numerada o con viñetas.

Para que un texto que ya ha sido introducido en el documento se convierta en una lista, simplemente hay que seleccionarlo y pulsar sobre la opción de lista correspondiente, ya sea a través del inspector de propiedades, o a través del menú Formato.

La lista con viñetas (sin ordenar) se selecciona a través del botón , mientras

que la lista numerada (ordenada) se selecciona a través del botón .

Ejemplo de lista numerada (ordenada):

1. Primeros platos

1. Ensalada

2. Sopa

2. Segundo platos

1. Pescado


370 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

2. Carne

Ejemplo de lista con viñetas (sin ordenar):

o Plantas

o Minerales

o Animales

Carnívoros

Herbívoros

Para establecer listas anidadas dentro de otras como en los ejemplos anteriores, es necesario añadir una sangría en los elementos de la lista que se desee que pasen a formar parte de la lista anidada.

A través del menú Formato, opción Lista, es posible acceder a las propiedades de la lista seleccionada. Se debe seleccionar el texto de la lista previamente o tener el cursor en algún lugar de la lista para que se active este submenú.

En la ventana Propiedades de lista se puede especificar el tipo de lista (con números o con viñetas), el tipo de números o viñetas que se utilizarán (en la propiedad Estilo:), y en el caso de las listas ordenadas, el número por el que comenzará el recuento.

En la sección superior se hace referencia a la lista en sí, mientras que en la sección Elemento de lista, únicamente al elemento en el que estamos situados en la lista.

Por ejemplo, esto permite cambiar el tipo de lista o el estilo. Además, en el caso de las listas numeradas, permite indicar el número con el que se empieza la lista a través del último campo de este cuadro de diálogo. Sin embargo, es mejor aplicar los estilos de la lista mediante CSS.

Es posible crear listas anidadas de distintas combinaciones: una lista numerada dentro de una sin numerar, una lista sin numerar en el interior de una lista numerada, etc.

Para ello, utiliza el botón de sangría del inspector de propiedades. Fíjate en la figura siguiente, en la que puedes ver que se ha añadido una lista sin numerar en el interior del segundo elemento de la lista numerada.


371 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Para cambiar el tipo de viñeta o de numeración deberemos usar CSS, porque hacerlo con el atributo type está desaprobado.

Deberemos crear una regla CSS a través del panel Estilos CSS. El selector de la regla puede ser un identificador, una clase, una etiqueta HTML o un selector complejo, como ya sabemos.

Las propiedades que interesan se encuentran en la categoría Lista:

• list-style-type: con esta propiedad podremos cambiar la viñeta de las listas sin ordenar o el tipo de numeración en las listas ordenadas.

• list-style-image: podremos utilizar una imagen para los elementos de la lista en lugar de las viñetas o la numeración.

• list-style-position: permite determinar dónde empieza la segunda y posteriores líneas de un elemento de lista que ocupa más de una línea.

Como puedes ver, trabajar con listas no representa ninguna dificultad en Dreamweaver, ya que es similar a como lo harías en un procesador de textos.

Por eso no nos vamos a extender más con este asunto. Mejor, veamos cómo utilizar las listas para crear una barra de navegación.

Crear una barra de navegación utilizando listas

Con listas HTML y CSS podemos crear barras de navegación.

Siguiendo 4 sencillos pasos podemos crear barras de navegación mediante el uso de listas en HTML y estilos en CSS

• Primero crearemos una imagen que servirá como fondo para cada uno de los elementos de la lista.


372 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• Después crearemos los vínculos para cada opción de la lista.

• La lista estará dentro de un <div> para mediante CSS colocarlo donde necesitemos dentro de la página Web y darle el estilo necesario.

• Mediante CSS colocaremos la imagen de fondo de cada uno de los vínculos.

Lo primero que haremos es crear una lista de viñetas con el texto de cada una de las opciones de la barra de navegación.

<ul> <li>inicio</li> <li>acerca de</li> <li>contactos</li> </ul>

Primer paso: Creamos la imagen que servirá como fondo para cada ítem de la barra de navegación.

Puedes ver el aspecto de estas imágenes a través del panel Activos.

Segundo paso: Insertamos hipervínculos en cada uno de los ítem de la lista para poder navegar por el sitio web.

Para ello seleccionamos cada uno de los textos y creamos los hipervínculos. (Si aún no existen las páginas utilizamos un “#” para crear un marcador nulo.

Tercer paso: Metemos la lista dentro de un elemento contenedor <div> para poder colocarlo donde queramos en la página web y aplicar estilos CSS.

Podemos hacer esto desde el panel Insertar


373 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

<div id="menu">

<ul>

<li><a href="index.html">Inicio</a></li>

<li><a href="#">Acerca de </a></li>

<li><a href="#">Contactos</a></li>

</ul>

</div>

Cuarto paso: Mediante CSS combinaremos la imagen de fondo con los hipervínculos.

Un ejemplo de lo que podríamos hacer en este paso es:

Categoría Lista:

• list-style-type: none

Para no utilizar ningún carácter como viñeta

Categoría Cuadro:

• padding: 0px (para los cuatro lados).

• margin: 0px (para los cuatro lados).

Categoría Fondo:

• background-image: imagen del estado normal del hipervínculo

• background-repeat: no-repeat.

Categoría Bloque:

• display: block

Con la propiedad display hacemos que un elemento actúe en bloque o en línea. En este caso hacemos que la lista pueda ser maneja como un elemento en bloque.

Categoría Cuadro:


374 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Para ajustar la imagen de botón a cada elemento de la lista, tenemos que asignar a las dimensiones del bloque las dimensiones de la imagen de fondo. Imaginemos que la imagen mide 130 x36 px

Ahora debemos establecer las dimensiones del bloque, haciéndolas coincidir con la de la imagen de fondo (130 x 36 píxeles).

• Width: 120px (ponemos menos tamaño porque añadimos relleno y entonces el bloque del hipervínculo aumenta de tamaño)

• Height: 32px

Colocamos la posición del texto de los hipervínculos en la imagen de fondo con las propiedades CSS de rellenos y márgenes. Estas características variarán según el tamaño de la imagen de fondo y el bloque.

• padding-top: 4px

• padding-right: 10px

Podemos hacer que la imagen del hipervínculo cambia la pasar el ratón por encima de ellos. Para ello, tenemos que tener la imagen que queramos que se vea al pasar el ratón por encima y añadirla en el estado hover de los hipervínculos

Categoría Fondo:

• background-image: imagen_cuando_pasamos_el_raton.jpg

• background-repeat: no-repeat

5. Imágenes

Introducción

Las imágenes son un recurso de comunicación visual importante para los diseñadores ya que logran transmitir mensajes con una inmediatez y persuasión que a veces el texto no consigue.

Insertar una imagen

Para insertar una imagen hay que dirigirse al menú Insertar, a la opción Imagen. Después de esto, ya es posible seleccionar una imagen a través de la nueva ventana. Cuando te acostumbres, te será más cómodo acceder con la combinación de teclas Ctrl + Alt + I.


375 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

En Relativa a es posible especificar si la imagen será relativa al documento o a la carpeta raíz del sitio. Es preferible que sea relativa al Documento, ya que si cambiamos la página de carpeta, lo habitual es cambiar también sus imágenes.

Lo mismo ocurre cuando se selecciona un documento para crear un vínculo.

La ruta en la que se encuentra la imagen aparecerá representada de una u otra forma en el campo URL de la ventana y en el campo Origen del inspector de propiedades, dependiendo de si ha sido insertada como relativa a la carpeta raíz del sitio o relativa al documento.

Por ejemplo, imagina que dentro de la carpeta raíz del sitio (la carpeta del sitio) se encuentran la carpeta imagenes y el documento en el que deseamos insertar la imagen. Dicha imagen, llamada logotipo.jpg, se encuentra dentro de la carpeta imagenes.

En el caso de insertar la imagen como relativa al Documento la ruta sería:

imagenes/logotipo.jpg

Mientras que en el caso de ser insertada como relativa a la Raíz del sitio la ruta sería:

/imagenes/aulaclic.jpg

Ocurre lo mismo que cuando se crea un hipervínculo a un documento relativo al documento o a la carpeta raíz del sitio.

Otra forma de insertar una imagen, es arrastrarla directamente desde el panel Archivos sobre el documento.

Si insertamos una imagen y luego la borramos, la movemos, o escribimos mal su nombre, en Dreamweaver aparecerá así indicando que el enlace al archivo está roto.


376 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

En ese caso, la imagen que aparecerá en el navegador será similar a ésta:

Aparece un recuadro blanco, junto con el nombre de la imagen o el contenido del campo Alt del inspector de propiedades, que explicaremos a continuación.

Propiedades de una imagen

Cuando seleccionamos una imagen el Inspector de propiedades muestra esta apariencia:

Desde aquí podremos establecer distintos atributos a la imagen:

Como pasaba con el texto, podemos crear un hiperenlace en la imagen escribiendo la dirección en el campo Vínculo, y decidir en qué ventana se abre con el campo Destino. Origen contiene el path (cámino) de la imagen.

En el campo Alt escribimos el texto que remplazará a la imagen si ésta no puede mostrarse. Es un atributo muy importante que deberíamos incluir siempre para hacer páginas accesibles. Por ejemplo, el texto que se escribe será leído por los programas lectores para invidentes. Si lo que queremos es mostrar un ayuda contextual cuando el usuario tenga el cursor sobre la imagen, debemos de empelar el atributo title. No podemos insertarlo desde el panel, tenemos que hacerlo desde el código fuente con el formato title="Texto a mostrar". Internet Explorer en versiones anteriores a la versión 9, mostraba Alt como ayuda contextual cuando la imagen no lleva title, pero el resto de navegadores no lo harán, respetando el estándar.

An. y Al. son las dimensiones de la imagen, ancho y alto. Dreamweaver las pondrá directamente.

En Clase podrás asignarle un estilo que hayas creado anteriormente, así podrás darle alineación, bordes e incluso tamaño con sólo un clic.

El ID es un identificador opcional para usarlo con CSS o Javascript.

Cambiar el tamaño de una imagen

Dentro de Dreamweaver puede modificarse el tamaño de las imágenes.

Por un lado, podemos cambiar el tamaño con el que se ve una imagen, pero dicho cambio de tamaño no se aplica directamente sobre el archivo de imagen, que conservará el tamaño original.


377 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Es muy probable que la imagen resultante no sea de buena calidad, en comparación de cómo podría quedar modificándola desde un editor externo, como Fireworks, Photoshop, etc..

Por ejemplo, vamos a ver lo que ocurre si insertamos una imagen que representa el icono de Dreamweaver y modificamos su tamaño de varias formas diferentes:

El resultado puede ser más o menos satisfactorio, dependiendo del navegador que es el que aplica realmente el reescalado, pero en ocasiones puede resultar útil modificar el tamaño de algunas imágenes aunque esto implique perder calidad.

Existen dos formas de modificar el tamaño.

Una de ellas es, una vez seleccionada la imagen, arrastrar con el puntero alguno de los recuadros negros que aparecen alrededor de la imagen.

La otra es a través de inspector de propiedades, cambiando los campos Ancho o Alto. Estos campos aparecerán en el inspector cuando esté seleccionada alguna imagen.

Si estos campos no contienen el tamaño original de la imagen, el valor aparecerá resaltado en negrita y aparecerá a la derecha una flecha circular que permite volver al

tamaño original haciendo clic sobre ella.

Como hemos comentado, este cambio de tamaño se produce alterando los atributos de anchura y altura, pero no cambiando el tamaño real del archivo, por lo que el usuario deberá descargarse el archivo completo con su tamaño original.

Por ejemplo, si tenemos una fotografía de nuestra cámara de fotos, de un tamaño grande (por ejemplo 2592x1944px), y queremos mostrar una miniatura (por ejemplo, de 200x150px) esta sería una mala solución, porque el usuario se estaría descargando el archivo completo, y no una miniatura real que ocuparía mucho menos tamaño.

Dreamweaver también nos permite cambiar el tamaño real del archivo de imagen abriendo un editor de imagen.

Para hacerlo, seleccionamos la imagen, y pulsamos en el icono del Inspector de propiedades. Se abrirá la ventana del editor de imagen que hayamos definido como predeterminado (como vimos en el tema avanzado Cambiar el programa de edición), si no lo hemos hecho nos preguntará que programa de edición queremos utilizar.


378 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Imagen de sustitución. Rollover

Un rollover es una imagen que cambia por otra cuando el puntero se sitúa sobre ella. Este tipo de imagen suele utilizarse en los menús o en los botones para desplazarnos a través de distintas páginas.

Veamos un ejemplo de rollover. Partiendo de las siguientes imágenes

Para insertar un rollover hay que dirigirse al menú Insertar, Objetos de Imagen, a la opción Imagen de sustitución. En la nueva ventana hay que especificar la imagen original y la de sustitución.

Es preferible que la opción Carga previa de imagen de sustitución esté activa. Si se activa, la imagen de sustitución se carga cuando se carga la página, de este modo se evitan las demoras debidas a la descarga de la imagen cuando llega el momento de que aparezca.

El Texto alternativo es el texto que aparece al situar el puntero sobre una imagen, o el que aparecerá en lugar de la imagen en el caso de que por algún motivo ésta no pueda ser mostrada en el navegador.

El texto alternativo puede asignarse a todas las imágenes, no sólo a los rollovers. Puede hacerse a través del campo Alt del inspector de propiedades de la imagen seleccionada.

Objetos inteligentes

Los objetos inteligentes son imágenes que obtenemos directamente desde un archivo de Photoshop (.psd).

Al insertarlo, lo hacemos igual que con cualquier imagen, eligiendo el archivo de Photoshop.


379 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Pero una archivo .psd no es un archivo que podamos mostrar en una página web. Por eso, lo que hará Dreamweaver es convertirlo a un formato estándar. Por eso, tras abrirlo, Dreamweaver nos pedirá que elijamos uno de los formatos gif, png o jpg y lo guardemos, con las mismas opciones que encontrábamos al pulsar el

botón del Inspector de propiedades.

¿Qué ventajas obtenemos con todo esto? Si observas la esquina superior izquierda

del objeto inteligente encontrarás un icono como éste . Las dos flechas verdes indican que el archivo está sincronizado, es decir, la imagen está generada a partir del último archivo de Photoshop.

Pero puede que en cualquier momento queramos modificar la imagen. Podemos

hacerlo abriendo el archivo .psd, o pulsando el icono del Inspector de propiedades, que abrirá el archivo fuente de Photoshop.

Tras guardar los cambios, vemos que el icono de la imagen en Dreamweaver ha

cambiado, mostrando ahora una flecha roja: . Esto indica que la imagen que estamos viendo en Dreamweaver (jpg, psd, png) no es la misma que el original (psd) ya que se ha modificado. Podemos volverla a generar pulsando el

icono Actualizar desde origen.

Por lo tanto, los objetos inteligentes son útiles para imágenes que tengamos que editar frecuentemente.

Alinear la imagen

Vamos a ver como centrar una imagen en un párrafo y como colocar texto alrededor de ella.

La imagen es un elemento en línea para convertirla en un elemento en bloque tenemos que utilizar la propiedad display con su valor blockn que podemos encontrar en la categoría Bloque dentro de los estilos CSS.


380 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Así ya podremos utilizar el valor auto para los márgenes izquierdo y derecho centrando la imagen dentro de la categoría Cuadro

Con el valor auto para ambos márgenes, la imagen queda centrada en el espacio disponible en su contenedor.

Para hacer que un texto se ajuste alrededor de una imagen establecemos su propiedad CSS float a left si queremos que la imagen flote hacia la izquierda o right si queremos que lo haga a la derecha. Dicha propiedad se encuentra en la categoría Cuadro. Podemos añadir margen derecho o izquierdo para separar el texto de la imagen.

Imagen de fondo

A la hora de utilizar una imagen de fondo para una página Web, debemos elegirla de manera que se pueda leer claramente el texto y haciendo que dicha imagen se ajuste al contenido de la página

La mayoría de las veces estos inconvenientes se solucionan escogiendo una imagen pequeña, como una textura o patrón, ya que el navegador se encarga de repetirla para rellenar la página web.

Pulsamos en el botón Propiedades de la página del inspector de propiedades, dentro de la categoría Apariencia CSS


381 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

En la lista Repetir indicaremos que hacemos con esa imagen de fondo:

• no-repeat: la imagen no se repite, por lo que solo se muestra una vez.

• repeat: la imagen se repite hasta rellenar todo el fondo de la página.

• repeat-x: se repite únicamente en horizontal..

• repeat-y: se repite únicamente en vertical.

También podemos poner imagen de fondo a otros elementos de la página Web o incluso a la página Web asignando propiedades CSS de la etiqueta <Body>

Aquí nos aparecen otras 2 propiedades nuevas

• background-attachment: determina si la imagen de fondo está fija en su posición original (valor fixed) o se desplaza con el contenido (valor scroll).

background-position (x) y background-position (y): especifican la posición inicial de la imagen de fondo en relación con el elemento. Si la propiedad


382 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

background- attachment es fixed, la posición será relativa a la ventana de documento, no al elemento.

Crear un mapa de imagen

Un mapa de imagen es una imagen dividida en zonas interactivas donde en cada una de ellas insertamos un hipervínculo.

Insertamos la imagen que queremos convertir en Mapa de imágenes.

Con la imagen seleccionada, damos un nombre al mapa en el inspector de propiedades. En el inspector de propiedades también encontraremos las herramientas para delimitar cada zona interactiva.

Una vez dibujada la zona interactiva, incluiremos la URL correspondiente al vínculo que se insertará dentro de ella. Esto se hace a través del campo Vínculo del inspector de propiedades. También debes rellenar el campo Alt con un texto alternativo.

6. Añadir elementos multimedia

Películas Flash (SWF)

Las películas Flash son animaciones, cuyo archivo tiene la extensión SWF. Es frecuente verlas en las páginas iniciales de los sitios web, a modo de presentación hacia los usuarios, como banners publicitarios, como botones... Flash todavia es uno de los elementos multimedia más empleados en las páginas web, aunque su uso está decreciendo con la llegada de HTML 5 y el vídeo en mp4.

Estas películas pueden crearse mediante el programa Flash también de Adobe. Para poder ser visualizado en el navegador, y necesitan que el usuario tenga instalado


383 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

el plug-in de Flash Player. Su instalación es muy sencilla y normalmente ya viene con el navegador. Sin embargo en los teléfonos móviles y tabletas no ocurre lo mismo ya que Android y Apple no lo incluyen

Las películas Flash pueden insertarse en una página a través del menú Insertar → Media, opción SWF, o pulsando Ctrl + Alt + F.

También pueden insertarse empleando el panel Insertar en la categoría Común, pulsando sobre la opción SWF que aparece al desplegar el menú Media.

Veamos las opciones más importantes que nos ofrece el inspector de propiedades cuando tenemos seleccionado el archivo Flash:

Como en otros elementos, como las imágenes, podemos asignarle el ancho (An.) y alto (Alt.). En Archivo, indicamos la ruta hasta el archivo SWF.

Si disponemos del programa Flash instalado en el equipo, y vamos a ir haciendo cambios sobre el archivo original (.fla), podremos editarlo con pulsar en Editar.

La opción Bucle indica que al finalizar la película, ésta volverá a comenzar desde el principio.

La otra es la opción Rep. autom. (reproducción automática), que al estar marcada indica que nada más cargarse la página comenzará a reproducirse la película Flash. Si esta opción no estuviera marcada, se mostraría únicamente el primer fotograma de la película hasta que el usuario la activase. Por tanto interesa desmarcar esta opción cuando se desea que la reproducción sea activada por algún comportamiento.

La Calidad, cuanto más baja, antes se cargará el archivo pero peor se verá. Conviene dejarla en Alta para verlo tal cuál se creó.


384 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

La Escala permite elegir cuanto se verá del archivo. Las películas Flash no siempre son del tamaño exacto del contenido, pueden tener un escenario de fondo alrededor del objeto, aunque no se muestre. Si dejamos Predeterminada, se verá todo la película. En cambio, si elegimos Ajuste exacto, se verán sólo los objetos, omitiendo el escenario de fondo.

Alinear funciona como con las imágenes, y nos permite alinear la película en relación con el texto. Si queremos centrarla horizontalmente, podemos optar por centrar el contenido del elemento que contiene el Flash (normalmente un párrafo) empleando CSS.

Wmode es el modo de ventana. Si es opaco, otros elementos pueden aparecer sobre el Flash. En cambio, si es Transparente, el fondo se verá transparente (a no ser que se haya especificado un color de fondo en el Flash).

El botón Reproducir nos permite ver la película.

Al insertarse la película, veremos la ubicación en la vista de diseño con el siguiente aspecto:

Al insertarse animaciones Flash, es frecuente que Dreamweaver añada algunos archivos que nos permitirán reproducir los elementos, normalmente creando la carpeta Scripts. Es importante incluir esta carpeta cuando publiquemos nuestro sitio, si no los archivos no se verán. De todas formas, Dreamweaver nos avisará cuando incluya archivos.

Sonido

No es muy habitual incluir sonido en una página web, ya que algunos usuarios suelen estar escuchando su propia música cuando navegan en Internet, por lo que el escuchar también sonido en cada página que se visita puede resultar algo molesto.

A pesar de ello, el incluir un sonido agradable, apropiado al contenido de la página, puede hacerla más atractiva. Las páginas que contienen sonido suelen ofrecer la


385 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

posibilidad de activarlo o desactivarlo, para que aquellos usuarios que no deseen escuchar el sonido de la página puedan desactivarlo. Siempre es mejor que que el usuario abandone la página.

Los formatos de sonido más habituales en Internet son, fundamentalmente, el MP3 y el WAV, aunque existen otros formatos diferentes que también pueden utilizarse (MIDI). Lo ideal es incluir algún archivo de audio que no ocupe mucho espacio, y que no por ello sea de mala calidad.

Se puede insertar un archivo de audio en un documento de dos formas, con la nueva etiqueta <audio > o mediante un plug-in.

1. Nueva etiqueta <audio>

Hasta hace poco la única forma de insertar audio en una página web era mediante plug-in pero desde que apareció HTML5 los navegadores compatibles son capaces de interpretar la etiqueta <audio> que reproduce sonido de una forma estándar sin necesidad de plug-in.

La etiqueta <audio> sólo funcionará en los navegadores compatibles con HTML 5, IE a partir de la versión 9 y las versiones de Firefox 3.5, Chrome 3.0 y Safari 3.0, además de algunos otros.

Si tienes acceso Creative Cloud podrás insertar el tag <audio> desde Insertar, Común, Media, opción HTML 5 Audio, en otro caso debes hacerlo en la vista de código. En la unidad 12 explicaremos con más detalle cómo escribir código HTML desde la vista código.

La forma de la etiqueta es la siguiente:

<audio> <source src="archivo sonido" type="MIME-type"/> </audio>

No todos los navegadores reconocen los formatos de archivos de sonido más utilizados, en la siguiente tabla podemos ver la compatibilidad entre formatos y navegadores, así como sus correspondientes mime-types (en marzo 2013):

Navegador MP3 WAV OGG

Internet Explorer 9+ si no no

Chrome 6+ si si si

Firefox 3.6+ no si si

Safari 5+ si si no

Tipo MIME audio/mpeg audio/wav audio/ogg


386 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Por ejemplo, el siguiente código se reproducirá en todos los navegadores citados menos Firefox:

<audio controls> <source src="media/audio.mp3" type="audio/mpeg"/> Este navegador no puede reproducir este archivo de sonido. Actualice el navegador </audio>

Si tu navegador no es Firefox deberías ver el reproductor de sonido a continuación.

Se suele añadir el atributo controls para que se muestren los controles del reproductor que permiten parar/reanudar y modificar el volumen.

También es bueno añadir un texto para que avise al usuario que su navegador no reconoce la etiqueta.

Podemos repetir la instrucción source varias veces para incluir varios tipos de archivos de sonido, de esta forma el sonido se reproducirá en más navegadores.

Por ejemplo

<audio controls> <source src="media/audio.mp3" type="audio/mpeg"/> <source src="media/audio.ogg" type="audio/ogg"/> Este navegador no puede reproducir este archivo de sonido. Actualice el navegador. </audio>

De esta forma el navegador Firefox intentará reproducir el primer archivo y como no es capaz de ello, lo intentará con el segundo archivo. Ahora desde Firefox si se reproducirá el sonido.

2. Plug-in.

Esta segunda forma de reproducir sonido se utiliza cada vez menos. Para insertar un archivo de audio mediante plug-in tienes que dirigirte al menú Insertar, Medía, opción Plug-in.

A continuación, para el que se muestran los controles de audio. Si lo deseas, puedes reproducirlo pulsando sobre los controles (recuerda encender los altavoces, si los tienes).

Pueden ocurrir dos cosas:

Si tu navegador tiene instalado el plugin necesario para reproducir el archivo, se mostrará un control similar a este (imagen de IE8):


387 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

En cambio, si el plugin necesario no está instalado, el navegador ofrecerá la posibilidad de hacerlo, como en esta imagen de Firefox.

Un plugin es un añadido al navegador, que nos permite realizar funciones extra, como en este caso, reproducir un archivo de música. Al insertar un elemento como plug-in lo que indicamos es que el navegador debe de intentar abrir el archivo empleando los pluigns que tenga para tal fin. Por eso, si no lo tiene, nos invitará a instalarlo.

En Dreamweaver no se mostrarán los controles de audio. Todos los archivos que son insertados como plugin aparecen representados dentro de Dreamweaver por una imagen como la de la izquierda.

En el inspector de propiedades pueden establecerse la altura y la anchura con la que se mostrarán los controles de audio, mediante Al y An.

En el caso de no especificar ningún tamaño, se mostrará el tamaño por defecto de los controles, como ocurre en el ejemplo de arriba. Si lo que se desea es que se escuche el sonido en la página, pero que no se muestren los controles de audio, los campos Al y An deben valer cero.

Los sonidos se reproducen automáticamente al cargarse la página, y se reproducen solamente una vez. Estos valores no pueden definirse como propiedades a través del inspector de propiedades, pero si los conocemos podemos emplear el botón Parámetros....

Por ejemplo, para que el archivo se reproduzca contínuamente le hemos añadido loop="true".

Si no queremos que se reproduzca automáticamente, podemos añadir también autostart="false"


388 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

La línea de código del archivo de audio nos quedaría del siguiente modo:

<embed src="media/audio.mid" autostart="false" loop="true"></embed>

Si quieres poner música de fondo en una página web, sin que aparezcan los controles de audio, podemos escribir este código directamente en la vista Código.

<bgsound src="cancion1.wav" loop="-1">

Insértalo después de la etiqueta </title> Con el parámetro loop puedes decidir cuántas veces quieres que se reproduzca, 1, 2, 3 ... (con -1 se reproduce de modo continuo).

No obstante, insistimos en que no es recomendable poner música sin controles de reproducción.

Lo más habitual en la web es insertar el sonido empleando Flash. Esto hace que no se necesiten plugins, sólo poder reproducir Flash. Además, nos permite crear los controles personalizados.

Otras páginas de Internet, como goear nos permiten insertar en nuestra web un reproductor con música del sitio, que nuestros visitantes podrán escuchar.

Vídeos

En ocasiones puede interesar incluir algún vídeo en una página web, pero hay que tener en cuenta que los vídeos suelen ocupar mucho espacio en disco, y por lo tanto, precisan de mucho tiempo para descargarse.

En este apartado nos referimos a insertar vídeo de un archivo alojado en nuestro sitio. No a mostrar vídeos de sitios especializados, como youTube.

Para insertar un archivo de vídeo en un documento puedes hacerlo de dos formas, con la nueva etiqueta <video > o mediante un plug-in.

1. Vídeo con HTML 5.

El formato básico de la etiqueta <video> es el siguiente.

<video>

<source src="archivo vídeo" type="MIME-type"/>

</video>

La instrucción típica para reproducir vídeo sería, por ejemplo:

<video width="160" height="120" controls>


389 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

<source src="media/cotorra.mp4" type="video/mp4"/>

<source src="media/cotorra.ogv" type="video/ogv"/>

Este navegador no puede reproducir este archivo de vídeo. Actualice el navegador.

</video>

Es muy similar a la que hemos visto para sonido, salvo que aparecen los atributos de tamaño del vídeo (witdth, height). Tampoco todos los navegadores son capaces de reproducir todos los tipos de vídeo, por lo cual es conveniente colocar el vídeo en más de un formato. La compatibilidad de los tipos de vídeo con los navegadores más usados se muestra en la siguiente tabla (en marzo 2013).

Navegador MP4 WebM OGG

Internet Explorer 9+ si no no

Chrome 6+ si si si

Firefox 3.6+ no si si

Safari 5+ si no no

Tipo MIME video/mp4 video/webm video ogv

A continuación se ejecutará el código del ejemplo que estamos viendo, verás un reproductor de vídeo si estás utilizando un navegador compatible:

La etiqueta <vídeo> tiene varios atributos opcionales, entre los que podemos citar los siguientes:

• autoplay. Hace que el vídeo comience a reproducirse al cargarse la página.

• loop. Para que se reproduzca una vez tras otra, sin parar.

• preload. Para que se cargue al hacelo la página especificaremos preload="auto", para que se cargue al pulsar play, preload="none".

También es posible utilizar otros reproductores y controlar la reproducción del vídeo mediante Javascript.

Si tienes acceso Creative Cloud podrás insertar la etiqueta <video> desde Insertar, Común, Media, opción HTML 5 Video, en otro caso debes hacerlo en la vista de código.

Hemos visto varios tipos de archivos de vídeos fijándonos en su extensión (.mp4, .ogv, ...) pero hay algo más que lo complica un poco. Dentro de cada uno de estos tipos de archivos el vídeo puede estar codificado de distinta forma, es lo que se conoce como Codecs. Es decir, podemos tener un archivo de vídeo ejemplo.mp4 codificado con el codec H.264 y otro archivo con el mismo


390 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

nombre ejemplo.mp4 pero codificado con el codec mpeg-2. Algo similar ocurre con los archivos de audio.

Debido a esto, en ocasiones, nuestro navegador puede ser capaz de reproducir un tipo de archivo y otras ocasiones no poder hacerlo. En internet hay páginas para descargarse codecs e instalarlos en el navegador. También hay páginas que transforman un formato en otro, por ejemplo http://www.online-convert.com, es interesante convertir los vídeos mp4 en ogv y colocarlos en los dos formatos para que se vean desde Firefox y desde la mayoría de los navegadores.

2. Vídeo mediante Plug-in.

Para insertar mediante plug-in un archivo de vídeo en un documento tienes que dirigirte al menú Insertar, Medía, opción Plug-in.

Puedes ver el vídeo (si tienes el plugin adecuado) a continuación:

El inspector de propiedades para los archivos de vídeo insertados de esta forma es el mismo que el de los archivos de audio, ya que ambos se insertan como Plug-in.

Hay que prestar especial atención al ancho y alto. Por defecto, si Dreamweaver no puede obtener el tamaño del archivo lo fijará a 32 x 32, insuficiente para ver un vídeo. Es mejor borrarlos, y así el vídeo se mostrará con su tamaño original. Si conocemos el tamaño del vídeo, podemos pensar en insertarlo directamente, pero hay que tener en cuenta el tamaño de los controles de reproducción, que depende de cada navegador.

Los vídeos también se reproducen automáticamente al cargarse la página, y se reproducen solamente una vez. Estos valores pueden cambiarse a través botón Parámetros, del mismo modo que en el caso de los archivos de audio, añadiendo autostart="false" y loop="true".

Como ya hemos dicho, todos los objetos insertados a través de la opción Plug-in precisan que el usuario tenga instalado un reproductor o un plug-in apropiado para reproducirlos. En el campo Origen del inspector de propiedades se establece el archivo vinculado (el archivo de audio o de vídeo) que ha de reproducirse.

En el caso de que el usuario no tenga instalado ningún plug-in adecuado, puede establecerse en el campo URL plg una página en la que pueda encontrarlo. No será necesario en los archivos más comunes de audio y vídeo, pero sí si intentamos cargar un archivo más raro.

http://www.online-convert.com/


391 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

7. Trabajar con tablas

Insertar tabla

Las tablas constituyen una herramienta muy eficaz para presentar datos de tabla y establecer el diseño de texto y gráficos en una página HTML. Una tabla consta de una o varias filas, cada una de las cuales consta, a su vez, de una o más celdas. Aunque las columnas no suelen especificarse explícitamente en el código HTML, Dreamweaver permite manipular tanto columnas como filas y celdas.

Podemos insertar una tabla de varias formas, pero nosotros seguiremos trabajando con el panel Insertar. Por lo tanto, despliega este panel y elige la opción Tabla de la ficha Común.

Dreamweaver abre un nuevo cuadro de diálogo donde especificaremos los detalles de la tabla.

En la nueva ventana habrá que especificar el número de Filas y Columnas que tendrá la tabla, así como el Ancho de la tabla.


392 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

El Ancho puede ser definido como Píxeles o como Porcentaje. La diferencia de uno y otro es que el ancho en Píxeles es siempre el mismo, independientemente del tamaño de la ventana del navegador en la que se visualice la página, en cambio, el ancho en Porcentaje indica el porcentaje que va a ocupar la tabla dentro de la página y se ajustará al tamaño de la ventana del navegador, esto permite que los usuarios que tengan pantallas grandes, aprovechen todo el ancho de pantalla.

Grosor del Borde indica el grosor del borde de la tabla en píxeles, por defecto se le asigna uno.

Relleno de celda indica la distancia entre el contenido de las celdas y los bordes de éstas.

Espacio entre celdas indica la distancia entre las celdas de la tabla.

También se puede establecer si se quiere un encabezado para la tabla es recomendable utilizar encabezados en el caso de que los usuarios utilicen lectores de pantalla. Los lectores de pantalla leen los encabezados de tabla y ayudan a los usuarios de los mismos a mantener un seguimiento de la información de la tabla.

Si queremos incluir un título, lo indicamos en Texto, el título aparecerá fuera de la tabla.

En alinear texto indicamos dónde queremos alinear el título con respecto a la tabla.

En Resumen: indicamos una descripción de la tabla, los lectores de pantalla leen el texto del resumen pero dicho texto no aparece en el navegador del usuario.

Si no estableces estos detalles de accesibilidad ahora, solo podrás hacerlo posteriormente editando el código HTML.

Una vez establecidos los detalles, pulsa en el botón Aceptar y Dreamweaver insertará la tabla allí donde tienes el cursor en la página web.

No te preocupes demasiado si no conoces alguno de los detalles que aparecen en este cuadro de diálogo, ya que posteriormente podrás modificarlos a través del inspector de propiedades.

En la figura de la página siguiente vemos que Dreamweaver ha creado una tabla con 3 filas y 4 columnas. Además, ocupa el 50% del espacio disponible en la página y la primera fila es de cabecera.

Fíjate que debajo de la tabla nos indica el tamaño que tiene, tanto en porcentaje como en píxeles.


393 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

No se indica la anchura de cada columna, ya que esta vendrá determinada por el contenido de las celdas si no la establecemos explícitamente.

Ahora simplemente podemos empezar a introducir el contenido de las celdas y modificar la tabla a nuestra conveniencia.

Rellenar las celdas

Las celdas son cada uno de los recuadros que forman una tabla, resultan de la intersección entre una fila y una columna.

Para poder insertar algún elemento en una celda, ya sea texto o imágenes, simplemente hay que situar el cursor previamente dentro de la celda deseada.

El tamaño de las celdas (y de cada columna) se adapta al texto o elemento introducido en el interior de las celdas. Además, si se trata de celdas de encabezado, el texto aparece centrado y en negrita.

En ocasiones se hace difícil la selección del contenido de las celdas. Por eso, Dreamweaver proporciona lo que se llama "el modo de tablas expandidas".

Para seleccionar este modo, despliega el menú Ver – Modo de tabla y elige Modo de tablas expandidas. En la figura siguiente puedes ver la página primero en el modo de tabla estándar y después en el de tablas expandidas.


394 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

En el modo de tablas expandidas se añade espacio entre las celdas para que sea más fácil la selección de su contenido.

Puedes volver al modo estándar con el mismo menú Ver – Modo de tabla o pulsando en el enlace Salir que aparece en la parte superior de la ventana del documento.

Normalmente trabajarás en el modo estándar y cambiarás al modo de tablas expandidas si tienes dificultad para seleccionar el contenido de alguna celda.

Añadir y eliminar filas y columnas

Es posible añadir una fila o una columna en una tabla ya creada. Para ello, lo más cómodo es situar el cursor en una celda de la tabla y utilizar el menú contextual de la misma (con el botón derecho del ratón). En la opción Tabla disponemos de la posibilidad de insertar y eliminar filas o columnas.

Para insertar una fila o una columna, hay que pulsar sobre las opciones Insertar fila o Insertar columna.

La fila se inserta sobre la celda o el conjunto de celdas seleccionadas, mientras que la columna se inserta a su izquierda.

También tenemos una opción más completa, la opción Insertar filas o columnas.... Al seleccionarla aparece una nueva ventana, donde es posible determinar si lo que se insertarán serán filas o columnas, el número de ellas que se insertará, y la posición donde se insertarán.


395 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Con este comando tenemos más control de lo que realmente queremos hacer. Así, podemos indicar si queremos insertar filas o columnas, cuántas y en qué lugar respecto de la celda en la que estamos situados en la tabla.

Para insertar una fila adicional, no es necesario utilizar ningún comando de menú, ya que si estamos en la última celda y pulsamos la tecla TAB, se creará automáticamente.

Finalmente, si deseas crear una tabla anidada, es decir, una tabla dentro de otra, simplemente tendrás que insertar la tabla anidada en el interior de una de las celdas de la tabla exterior.

Tras insertar la tabla anidada, podrás trabajar en ella de la misma forma que has visto hasta ahora.

Seleccionar, unir y dividir celdas

Seleccionar elementos de una tabla

Existen varias formas de seleccionar una tabla. Una de ellas es a través del menú Modificar estando el cursor en la tabla, o desplegando el menú contextual de la tabla al pulsar con el botón derecho sobre ella. En ambos casos aparece la opción Tabla, a través de la cual se puede elegir la opción Seleccionar tabla.


396 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

También es posible seleccionar una tabla pulsando con el ratón sobre el borde que la rodea, o pulsando sobre la etiqueta <table> que aparece en la barra de estado de la ventana de documento.

No siempre se desea seleccionar toda una tabla, en ocasiones se desea seleccionar filas, columnas o celdas.

• Puede seleccionarse una fila o columna de varias formas, lo mejor es que pruebes las distintas formas y elijas la que más te gusta. Estas son las formas de selección:

• Puedes utilizar la opción Seleccionar columna del menú de encabezado de columna (zona verde de anchos) esto sólo es válido para seleccionar una columna.

• Manteniendo pulsado y arrastrando el ratón hasta seleccionar la columna/s o fila/s completamente.

• También puede hacerse situando el cursor junto al borde superior o izquierdo de la columna o fila respectivamente, de modo que el cursor cambia a la forma de una flecha negra. Al hacer clic se selecciona la columna o fila a la que apunta dicha flecha.

• En cualquier momento, para seleccionar una fila posicionar el cursor en cualquier sitio de la fila y sobre la etiqueta <tr> de la barra de estado o sobre la etiqueta <td> para seleccionar la columna.

• Para seleccionar varias celdas contiguas, basta con mantener pulsado el ratón mientras se arrastra sobre las celdas deseadas.

• Para seleccionar una sola celda o varias celdas no contiguas, hay que mantener pulsada la tecla Control mientras se hace clic sobre las celdas.

Combinar celdas consiste en convertir 2 o más celdas en una sola por lo que dejará de haber borde de separación entre una celda y otra ya que serán una sola.


397 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Esto nos puede servir por ejemplo para utilizar la primera fila para escribir el título de la tabla. En este caso habría que combinar todas las celdas de la primera fila en una sola

Mientras que dividir celdas consiste en partir en dos una celda.

Si se seleccionan varias celdas pueden combinarse pulsando sobre el botón del inspector de propiedades (lo encontrarás en la parte inferior izquierda del panel Propiedades, o pulsando sobre la opción Combinar celdas de la opción Tabla, que como ya has visto puedes dirigirte a ella a través del menú contextual de la tabla y a través del menú Modificar.

Tienes que tener en cuenta que sólo es posible combinar celdas contiguas, cuya combinación pueda dar como resultado otra celda, es decir, que su combinación dé como resultado un recuadro.

Para dividir una celda hay que pulsar sobre el botón del inspector de propiedades, o sobre la opción Dividir celda de la opción Tabla.

En ambos casos, aparece una ventana como ésta, en la que hay que especificar si la celda se va a dividir en filas o columnas, y el número de éstas.

Formato de tabla

Las propiedades de la tabla se especifican a través de su inspector de propiedades.

A través del inspector de propiedades se pueden modificar los valores que se especificaron al insertar la tabla. Al mismo tiempo, pueden indicarse otros como pueden ser el valor Alinear (que permite alinear la tabla a la izquierda, al centro o a la derecha), el color de fondo (en Col. Fondo) o de borde de la tabla (en Col. borde ), o la imagen de fondo (en Im.).


398 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Si lo que se selecciona es una celda, o un conjunto de celdas, el inspector de propiedades cambia, para permitir especificar otros valores.

La parte superior del inspector de propiedades en este caso sirve para especificar las propiedades del texto que se insertará dentro de la celda (o celdas) seleccionada.

La parte inferior sirve para especificar valores propios de la celda, como puede ser el color o imagen de fondo diferentes de los especificados para la tabla global (en Fnd), el color del Borde de la celda, etc.

Dos opciones que posiblemente necesites utilizar con frecuencia serán Horiz y Vert, que definen la alineación del contenido de la celda de forma horizontal y vertical respectivamente.

• Cambiar tamaño de tabla y celdas

El Ancho de una tabla puede ser definido como Píxeles o como Porcentaje. El tamaño de la tabla a través del inspector de propiedades estará especificado por los valores de An (anchura) y Al (altura). Normalmente sólo se especifica la anchura, no la altura.

Los valores An y Al de una celda siempre están en Píxeles. No es necesario especificar ninguno de estos dos valores para las celdas, a no ser que se desee que se mantenga obligatoriamente ese tamaño, y no que se ajusten al contenido o al tamaño de la ventana.

No solo puede establecerse el tamaño de las tablas y de las celdas a través del inspector de propiedades. También es posible hacerlo manteniendo pulsado el ratón sobre alguno de los bordes, arrastrándolo hacia la posición deseada.

Formato css

Una vez disponemos de la estructura y contenido de la tabla, podemos empezar a aplicarle formato mediante reglas CSS.

Así pues, podremos trabajar con fuentes, colores, márgenes, bordes, rellenos, etc. Veamos un formato sencillo pero efectivo.

Primero crearemos una regla CSS para aplicar a la tabla en general


399 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Se utiliza la clase minimalista, que se aplicará a la etiqueta <table>:

.minimalista {

font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

font-size: 12px;

background-color: #ffffff;

text-align: left;

margin: 45px;

width: 50%;

border-collapse: collapse;

}

Ahora seguimos ajustando el formato de las celdas. Empezaremos con las de cabecera o etiquetas <th>:

.minimalista tr th {

font-size: 14px;

font-weight: normal;

color: #003399;

text-align: center; vertical-align: bottom; padding-top: 10px; padding-right: 8px; padding-bottom: 10px; padding-left: 8px;

border-bottom-width: 1px;

border-bottom-style: solid;

border-bottom-color: #6678b1;

}

Finalmente, crearemos una regla para las celdas de datos o <td>:

.minimalista tr td { color: #666699; padding-top: 9px; padding-right: 8px; padding-bottom: 0px; padding-left: 8px;

}

El orden en que aparecen los valores de padding, border o margin cuando se utiliza la propiedad abreviada son los siguientes.

Si se utilizan cuatro valores, entonces el primero se refiere a top, el segundo a right, el tercero a bottom y el cuarto a left. Por ejemplo:

padding: 9px 8px 0px 8px;


400 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• top: 9px

• right: 8px

• bottom: 0px

• left: 8px

Si se utilizan solo dos valores, entonces el primero se refiere a top y bottom, mientras que el segundo a right y left. Por ejemplo:

• padding: 25px 50px;

• top y bottom: 25px

• right y left: 50px

Si se utilizan tres valores, entonces el primero se refiere a top, el segundo a right y left y el tercero a bottom. Por ejemplo:

padding: 25px 50px 100px;

• top: 25px

• right y left: 50px

• bottom: 100px

Finalmente, si se utiliza solo un valor, ese se aplica a todos.

Por ejemplo:

padding: 25px;

• top, right, left, bottom: 25px

Existen muchísimas posibilidades con CSS. Por ejemplo, es habitual utilizar colores de fondo alternativos para las filas pares e impares.

Esto permite distinguir mejor los datos representados en la tabla, sobre todo si esta tiene muchas filas.

Es lo que se conoce como "tablas cebra". Una forma sencilla de hacerlo es crear una regla para las filas pares o impares cambiando el color de fondo.

.par {

background-color: #......;


401 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

}

Después se aplica manualmente en aquellas filas pares de la tabla (etiquetas <tr>), con lo que cambia el fondo respecto del resto de filas impares.

Importar datos y ordenar una tabla

Podremos importar datos de tablas en distintos formatos:

• documentos XML

• documentos de Word,

• hojas de cálculo de Excel

• desde cualquier otro formato de texto siempre que los datos estén delimitados adecuadamente.

Para ello, se utiliza el menú Archivo – Importar de Dreamweaver. En este menú aparecen todas las opciones anteriores.

Con la opción Datos de tabla podrás elegir un archivo de texto siempre que su contenido sean datos tabulares y estén delimitados claramente. Es el tipo de archivo de texto delimitado, por ejemplo, mediante comas o caracteres Tab.

Para ordenar los datos de una tabla, sitúate en cualquier celda de la tabla y utiliza el menú Comandos – Ordenar tabla. Obtendrás un cuadro de diálogo como el de la figura, donde debes establecer los criterios de la ordenación. Se puede ordenar hasta por dos columnas distintas a la vez.

En el apartado inferior del cuadro de diálogo podemos establecer algunas opciones.


402 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

8. Trabajar con formularios

Los formularios se usan para recibir información por parte del visitante. Esta información nos permite interactuar con los visitantes de nuestra página, saber cómo se llaman, su correo, que dudas tienen, que opinan sobre diferentes temas, …

Dreamweaver tiene una ventaja a la hora de trabajar, y es que permite diseñar los formularios que suelen ser demasiado complicados para hacerse en HTML. Los formularios tienen muchos elementos para rellenarse.

El Dreamweaver CS6, permite realizar formularios, pero ni tiene todas las posibilidades que acepta el nuevo HTML5, ni permite acceder a la programación necesaria para enviar o tratar los datos de los formularios, por lo que se queda un poco escaso a la hora del funcionamiento total de los formularios. A la derecha aparece el listado del Dreamweaver CC, en el que aparecen los nuevos componentes de HTML 5.

Text, email, url, tel, number, … antes se resumían todos como casillas de texto, pero ahora se han especificado de forma semántica. La ventaja que también tienen estos campos semánticos, es que están programados, para que si los campos son requeridos (REQUIRED) no solo sea obligatorio rellenarlos, sino que deben estar rellenos de forma correcta.

Color, Month, Week, Date, Time, Date Time y Date Time Local, son elementos que están programados por parte de los navegadores. En cada navegador, aparece un menú contextual específico para cada campo, en el que podemos elegir el color deseado, o el mes, o cualquiera de las cosas que nos piden.

Insertar formulario

Basta con entrar por INSERTAR – FORMULARIO – FORMULARIO, y ya tenemos creado el formulario. Dentro de la etiqueta FORM y en vista código deberemos poner las condiciones con las cuales este formulario sería tratado y la página que se debería abrir para ese tratamiento:

<form action="envio.php" method="post">


403 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

En este ejemplo, llamamos al archivo envio.php, pasando por variable todos los valores del formulario por POST. La diferencia entre POST y GET, es que GET, los muestra en la barra de dirección, y sin embargo, POST lo transmite de forma oculta.

Sin embargo, en este ejemplo el que envía el formulario es el archivo envio.php, que lo hará según se pueda por el php y la configuración del servidor que vaya a enviarlo.

Campos de Texto

Los campos de texto, nos permiten enviar información de cualquier tipo que se pueda introducir por teclado. Todos ellos deben estar nombrados para el tratamiento posterior de datos, y deben tener una longitud.

Antiguamente esta información de cada casilla de texto se hacía rellenando la información que aparecía en el menú contextual, pero actualmente y para que nuestra página quede lo mejor maquetada posible de forma adaptable, se recomienda no usar el Dreamweaver y hacerlo por medio de los CSS.

Campos de texto en esta versión de Dreamweaver son de dos tipos, en los que vemos lo que escribimos, y en los que no vemos lo que escribimos. El tipo primero es el que llamamos TEXT, y el segundo PASSWORD. El tipo PASSWORD se usa principalmente para introducir contraseñas, ya que si alguien mira la pantalla, podría ver la contraseña según se va introduciendo en la pantalla, para evitar eso, lo que veremos por pantalla serán puntos, asteriscos o cualquier símbolo que use el navegador para indicar que estamos escribiendo la contraseña, pero sin mostrar los caracteres que utilizamos.

Si tenemos mucha información que recuperar, más de 255 caracteres, entonces tendremos que usar un área de texto. En ese tipo de áreas se pueden introducir textos mucho más largos. Un área de texto se define por filas y columnas, siendo las filas la cantidad de líneas que hay de texto y las columnas la cantidad de caracteres que caben en cada línea. Estos valores antiguamente eran fijos, y cada carácter ocupaba exactamente lo mismo, pero desde hace varias versiones de navegadores, la anchura es solo orientativa.

Casillas de Texto Predefinido

Hay una serie de casillas de texto que ya viene escrito, y que permite al usuario elegir entre todos los textos ya definidos. Estas casillas las vamos a definir entre tres tipos:

• Casillas de verificación: Se colocan al lado de una frase para confirmar si se cumple o no esa frase. También son conocidas como casillas Check. Si están marcadas sirven para confirmar, si no están marcadas, significa que no. Estas casillas pueden agruparse o no.


404 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Un ejemplo de casilla de verificación agrupada, puede ser:

Marca el concierto al que quieras asistir:

o Toledo

o Madrid

o Barcelona

La respuesta puede ser ninguno o alguno o todos, pudiendo elegir del listado cual de todos sería

• Casillas de opción: Permiten elegir una de las opciones, pero sólo una y siempre una. Estas casillas siempre vienen dentro de un grupo.

El mismo ejemplo de antes puede valer, pero cambiando un poco la pregunta:

Marca el concierto del que quieras ver más información:

o Toledo

o Madrid

o Barcelona

• La última opción es la de las listas. Muy parecida a las casillas de opción, con la diferencia de que estas listas se usan cuando hay muchas opciones y muy poco sitio donde aparecer. Se componen de un listado/menú (<SELECT> en HTML), y múltiples opciones, de las cuales solo se toma una.

Un ejemplo es cuando aparecen todas las provincias de España y te permiten escoger solo una de ellas:


405 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

El tipo Archivo

Este tipo de objeto de formulario, parece muy interesante, ya que permite enviar un fichero. Pero realmente, no vale para nada, si no se programa en el servidor como debería ser esa subida.

Botones

Los botones pueden ser de 3 tipos:

• Lo que llamamos botón genérico, que no tiene absolutamente nada salvo el botón y que este debe ser programado para poder hacer cualquier cosa. Esta programación suele hacerse en JavaScript.

• Botón de envío, que en realidad solo sirve para ejecutar la línea del FORM en la que se dice qué archivo hay que abrir y cómo hay que pasar los datos. Volvemos a repetir, que sin programación en el servidor, y sin saber las características de éste, el formulario no se puede enviar.

• Botón de Reset, que es el único que funciona por sí solo, y que lo que hace es que reinicia el formulario a la apariencia inicial que tiene el formulario.

La Maquetación

Los formularios son posiblemente lo más difícil de maquetar debido a que son muchos tipos de objetos los que usamos, y que además dependen de cada navegador como se ven al visitante de la página. Lo mejor que se puede hacer es maquetarlos especificando lo máximo posible por medio del uso de los CSS, describiendo tamaños, bordes, esquinas, colores, … .

9. Maquetación con CSS

La maquetación siempre se hacía directamente sobre la imagen en el panel visor de dreamweaver, y usábamos o abusábamos de las tablas. El HTML 5, controla este abuso, y nos recomienda ( o lo hacemos o Google no nos posiciona) a que lo hagamos por medio del CSS 3.

Con el CSS, muchos objetos pueden ser susceptibles de ser usados como cajas para maquetar, sin tener que abusar de los Divs, como sucedió al poco de aparecer los CSS, con la intención de no usar las tablas.

Actualmente, el redactor del HTML va creando los objetos uno a uno, en el orden en el que se deben ver, pero sin molestarse de su estilo ni colocación final. Hasta que no está el código realizado, no empieza por medio de los CSS a dar la apariencia deseada a la página. Esta misma apariencia, se suele realizar en los distintos dispositivos uno a uno, para completar el diseño multiplataforma que tanto preocupa a Google en la actualidad.


406 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

La estructura principal con la que debemos maquetar es aquella que ahora propone HTML 5. Se compone de las siguientes zonas:

En este ejemplo de código HTML tenemos 3 zonas claramente diferenciadas, la zona <header> que sirve para colocar el encabezado de la página, el contenido que es la zona central, y la zona <footer> que equivaldría a lo que nosotros llamamos pie de

página.

El contenido debe tener, <nav>, <section> y <article>, y puede tener si es necesario <aside>.

<nav> está diseñado para colocar ahí la zona desde la que se navega por la página. En el ejemplo anterior, el menú de navegación se encuentra a la izquierda, pero bien lo podríamos haber colocado por encima de <section>.

<section> es la zona diseñada para guardar las distintas secciones que puede tener la página, y podemos crear tantas como necesitemos. Dentro de los section tendremos por lo general uno o más artículos, y estos podrán tener o no su cabecera y su pie.

Por último vemos la sección de <aside>. Esta zona sirve para maquetar esa zona de la página que suele dejarse a un lado de la página, y en la que generalmente aparece o publicidad o un tipo de sección secundaria o no principal.

Plantilla de Diseño

El Dreamweaver nos ayuda a la hora de realizar la programación en HTML, pero no es un buen programa de Diseño. Para poder realizar estos diseños, solemos usar programas de diseño, que nos permiten llegar a unos niveles de calidad de una forma muy rápida y a un buen nivel. Lo óptimo es partiendo de estos diseños, luego usarlos como plantilla a la hora de hacer la maquetación en HTML con Dreamweaver.

Dreamweaver llama a esta imagen de plantilla, imagen de rastreo. Para poder insertar una imagen de rastreo, basta con elegir Ver – Imagen de rastreo – Cargar, y en ese momento, podemos elegir el archivo de imagen que vamos a utilizar. El menú contextual que nos aparece, nos permite Examinar nuestro equipo en busca de la


407 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

imagen y además nos permite decidir la transparencia que vamos a utilizar a la hora de usarla como guía en el fondo de nuestro HTML.

La imagen de rastreo, solo se pone como fondo mientras se trabaja con Dreamweaver, y si se quiere, se puede posicionar por medio de coordenadas X e Y. Para poder llegar al menú contextual donde introducimos estas coordenadas, debemos elegir Ver – Imagen de Rastreo – Ajustar Posición.

Otra ayuda para la maquetación, es la posibilidad de colocar unas reglas que nos permitan medir en pixeles las distancias que tenemos que ir dando a cada objeto para colocarlo en el sitio correcto. Esto se consigue por medio de Ver – Reglas – Mostrar. Con las reglas podemos disponer de Guías.

Las Guías no son más que líneas paralelas a la parte superior o izquierda del archivo. Estas guías, aparecen mediante Ver – Guías, y son muy útiles a la hora de ser más precisos con los pixeles que nos aparecen en las reglas.

Podemos mostrar guías u ocultarlas. Podemos bloquear guías, para no moverlas por equivocación cuando estamos maquetando. Podemos editar guías, para cambiar su posición, y también podemos colocar las guías para indicarnos un tamaño concreto de pantalla, de tal forma que podamos hacernos a la idea de cómo se podría ver nuestra página en esa resolución.

Dreamweaver CS6 tiene muchas plantillas que no son multiplataforma para realizar páginas web, por lo tanto, Google no las posiciona, y por ese motivo intentaremos no usarlas

10. Revisar y publicar el sitio web

Perfecto, ya hemos terminado la página web, y parece preciosa en nuestro Dreamweaver. Pero no hemos terminado, simplemente acabamos de pasar a la fase de revisión de la publicación. En esta fase tendremos que volver a enfrentarnos al diseño de la página pero de una forma casi a ciegas y usando el ensayo error para comprobar nuestros resultados.

Lo primero y más importante es conocer cuáles son las resoluciones más utilizadas en el momento de hacer la página y cuáles son los navegadores más utilizados. Que nuestra página falle en una resolución o en un navegador, es como si tenemos una tienda, y no dejamos pasar a todos los que lleven camiseta blanca. Alguno dirá que no pasen los de la camiseta blanca, que hay muchos otros colores y tipos de camisa, y efectivamente pueden tener razón, pero si miramos las estadísticas, y nos damos cuenta de que la mayoría de nuestros clientes tienen camiseta blanca, a lo mejor empezamos a pensar que la idea fue mala, y que deberíamos permitir que en la tienda se entrara con camiseta blanca.


408 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

http://es.screenresolution.org/ Nos permite conocer cuáles son las resoluciones más usadas del momento.

Resolución % Histograma

1 1366x768 HD 19.93%

2 1920x1080 16:9 HD

1080 14.60%

3 1024x768 4:3 XVGA 8.51%

4 1280x1024 5:4

SXGA 6.84%

5 1440x900 8:5

WSXGA 5.23%

6 1600x900 16:9 HD+

900p 5.21%

7 1280x800 8:5

WXGA 4.80%

8 1680x1050 8:5

WSXGA+ 3.64%

9 360x640 3.42%

10 768x1024 1.87%

11 1360x768 1.79%

12 1920x1200 8:5

WUXGA 1.64%

13 2560x1440 1.49%

14 1280x720 16:9 HD

720 1.38%

15 320x568 1.38%

16 1024x600 WSVGA 0.98%

17 800x600 4:3 SVGA 0.96%

18 1536x864 0.84%

http://es.screenresolution.org/


409 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

19 1280x768 5:3

WXGA 0.73%

20 320x480 2:3 HVGA 0.70%

21 375x667 0.57%

Hasta hace poco tiempo, la resolución 1920x1080, no existía, pero si nos fijamos en las estadísticas, ahora es la segunda resolución más usada. Eso significa que si podemos, deberíamos hacer un diseño que satisfaga a los que tienen esta resolución.

Por otra parte, aparecen resoluciones que están por debajo de los 1024x768. Ésta resolución se puso de mínimo hace años, pero desde la navegación por móvil, podemos ver entre las 20 resoluciones más usadas, muchos que tienen resoluciones de estos tamaños.

También nos aparecen pantallas de proporción 4:3, 5:3, 16:9 , y moviendo el móvil a vertical, 2:3 entre otras. Esto nos obliga a no solo pensar en los que tienen la pantalla de nuestra casa, sino intentar agradar a la mayor cantidad de personas que tengan cualquiera de estas resoluciones y proporciones de pantalla.

Igual que podemos ver estadísticas de pantallas, también podemos ver estadísticas de uso de navegadores:

2015 Chrome IE Firefox Safari Opera

August 64.0 % 6.6 % 21.2 % 4.5 % 2.2 %

July 63.3 % 6.5 % 21.6 % 4.9 % 2.5 %

Aunque en la tabla anterior, aparezcan FireFox y Safari por separado, estos dos navegadores tienen una apariencia prácticamente idéntica, la única diferencia es que Firefox se usa principalmente en PC, y Safari en Mac.

http://www.w3schools.com/browsers/browsers_chrome.asp

http://www.w3schools.com/browsers/browsers_explorer.asp

http://www.w3schools.com/browsers/browsers_firefox.asp

http://www.w3schools.com/browsers/browsers_safari.asp

http://www.w3schools.com/browsers/browsers_opera.asp


410 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Revisión en distintos navegadores.

Dreamweaver, visualiza las páginas como Dreamweaver y no como cualquiera de los navegadores, por lo que se recomienda antes de subir la página a un sitio público, que sea comprobada por la mayoría de los sitios Web.

Dreamweaver, permite mediante atajos acceder a los distintos navegadores, para que así podamos ver la página realizada en cualquiera de ellos de la forma más rápida posible.

Para poder realizar esta visión, se utiliza el botón vista previa, aunque si tenemos el navegador instalado y no aparece en el listado de vista previa, siempre podemos añadirlo.

Para evitar usar el botón de vista previa, y el buscar en el listado el navegador que queremos abrir, por lo general, ponemos un atajo de teclado a cada navegador para poder trabajar de la forma más rápida posible.

Si usamos el Adobe Browser Lab, podemos ver dos pantallazos idénticos vistos por dos navegadores distintos de forma paralela (con la pantalla dividida) o una debajo de otra (con transparencia en la superior) por lo que podemos ver las diferencias entre las versiones fácilmente.

Eso sí, Adobe Browser Lab, no es tan realista como el visionado en los distintos navegadores.

Por otra parte, los navegadores son los únicos que permiten visionar las páginas con resoluciones distintas a la de la anchura de la pantalla. Firefox utiliza More Display Resolutions, y Google Chrome utiliza Chrome Apps & Extensions Developer Tool. Estas dos extensiones nos permiten visualizar imitando otros terminales con otras resoluciones.

Comprobar las páginas

Dreamweaver ha añadido distintas funciones de comprobación de páginas, para así mejorar el nivel de calidad de las páginas hechas por medio de este programa.

Hay un comprobador de código HTML, y CSS, y efectivamente funciona, pero los numerosos cambios que sufren los navegadores, los estándares y el buscador de google hacen que estas comprobaciones se vean constantemente obsoletas. Aunque esta parte del Dreamweaver se actualizara constantemente, tenemos el dilema de que parte del código como por ejemplo la etiqueta <nav> debe comprobarse si está en su sitio de forma lógica, y el comprobador de código, solo comprobaría las normas más estrictas.

Otro fallo que aparece en el comprobador son las etiquetas que hay que usar para satisfacer a un navegador, y que su defecto no aparece como falta, ya que


411 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Dreamweaver, no puede saber que nosotros no queremos ese efecto que al no poner la etiqueta nos aparece.

Un aspecto que sí que corrige es cuando reconoce etiquetas vacías, o textos que nunca se han modificado, quedando el mismo texto que genera por defecto el Dreamweaver.

Una herramienta útil que posee el Dreamweaver es la que nos permite comprobar si todos los vínculos son correctos, y no tenemos ningún vínculo roto. Comprobar página – Vínculos

Dentro de los vínculos, Dreamweaver nos mostrará los vínculos externos que no puede comprobar, para que nosotros lo hagamos de forma manual.

Una lista que nos devuelve el Dreamweaver puede ser el listado de páginas huérfanas. Estas páginas son aquellas en las que hemos trabajado, pero sin embargo no tenemos ninguna página que apunte a ellas. Las páginas huérfanas son buenas en el caso de que sean Landing Page, porque de este modo sabemos que las visitas de estas páginas solo pueden ser o por una campaña que estemos haciendo, o por un vínculo que proviene de una publicidad que estamos pagando o simplemente controlando.

Publicación del sitio web

Aunque trabajamos siempre en local cuando usamos el Dreamweaver, cuando queremos que el resto del Mundo pueda acceder a la página, debemos subir la página a Internet.

Para subir la página a Internet necesitamos antes de nada un sitio donde poder subir la página. Este sitio es lo que denominamos servidor web, y este servidor debe tener una dirección para poder acceder a él, un nombre de usuario para nosotros y una contraseña para que solo podamos acceder nosotros.

En el Dreamweaver deberemos acceder al Sitio - Administrador de Sitios

Y creamos un sitio nuevo para cada alojamiento que tenemos.

En nombre del servidor, simplemente ponemos el nombre que nosotros queramos ponerle. Y los datos que necesitamos van a Dirección, Nombre de usuario, y Contraseña.


412 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

De forma opcional, podemos rellenar la URL (que es la dirección web de nuestro hosting) y el directorio raíz, porque en algunos casos, la página web no se sitúa en la raíz del alojamiento.

Una vez configurado el servidor, pasaremos a publicar el archivo completo. Dentro del panel Archivos podemos trabajar con la vista local y el servidor remoto.

En este panel podemos ver en la parte superior unos iconos que nos permiten controlar lo que hacemos en este panel.

Lo primero que haremos cuando queramos subir nuestros archivos es Conectar al servidor remoto, y cuando ya estemos conectados, entonces deberemos Colocar Archivos al servidor. En este momento conviene vigilar que estamos en la carpeta correcta, pues muchos servidores tienen la carpeta pública en una subcarpeta del servidor principal. Para comprobar que hemos hecho todo de forma correcta, lo que deberemos hacer en ese momento es ver el informe de Registro y si está todo bien,


413 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

entonces lo que hacemos es pinchar otra vez en Conectar al Servidor Remoto para desconectar.

Si en algún momento ya teniendo la página subida, queremos descargar los archivos, podremos repetir la operación, pero pinchando en la flecha que mira hacia abajo, en vez de la que mira hacia arriba. De esta forma cuando hay varias personas trabajando en la misma página, cada uno va actualizando su imagen en local.

Ya una vez subida la página, cuando hacemos modificaciones, nos interesa solo subir los archivos que se han modificado. La sincronización nos permite

hacer tres cosas. Colocar archivos recientes en remoto, obtener archivos recientes del remoto, y por último la sincronización completa que es hacer ambas cosas a la vez. Si queremos que se eliminen los archivos que hemos eliminado de nuestra carpeta local, tendremos que seleccionar la casilla que dice lo mismo.

Módulo 4: Busqueda y procesamiento de datos Tema 1: Búsqueda en la red

414 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

MODULO 4: BUSQUEDA Y PROCESAMIENTO DE DATOS

TEMA 1: BUSQUEDA EN LA RED

1. Introducción

En sus comienzos Internet era solo una tremenda cantidad de información; para buscar en ella había que ser un verdadero técnico o experto, ya que la búsqueda de información se realizaba navegando a través de los distintos nodos y servidores en las distintas universidades, todo sin una interface amigable como la de los buscadores en internet de hoy en día.

O sea, internet sin los buscadores no es más que un almacén gigante de información, sin ningún orden en particular, y sin ninguna clasificación.

Imagina entrar a una habitación de enormes dimensiones llena de archivadores con valiosa información, y estos archivadores sin ninguna referencia de lo que contienen. ¿Cuales serian las probabilidades de encontrar los que buscas revisando los papeles uno a uno? Los buscadores en internet toman esta información y la organizan para que al ingresar una serie de términos o palabras clave, se muestre la información más relevante relacionada con la búsqueda.

Por esto es fundamental que los buscadores en internet no entreguen únicamente resultados pagados, sino que sea la información presente naturalmente en la red.

El utilizar un buen buscador en internet, tiene mucha importancia para encontrar lo que realmente buscamos. Por ejemplo si utilizas la función de búsqueda web en el sitio www.buscarinformacion.com:

http://www.buscarinformacion.com/


415 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Te encontraras con resultados patrocinados, por si quieres adquirir alguna cosa o servicio relacionado con tu búsqueda, y también con resultados "naturales" extraídos de internet según su relevancia.

Lo que va a determinar el éxito de los buscadores en internet en el futuro es su capacidad para entregar al usuario información de calidad, relevante con la búsqueda ingresada por el usuario y no solamente la publicidad. Esto lleva a que la presentación de los buscadores en internet sea cada vez más sencilla y sus métodos para seleccionar información cada vez más complejos, para garantizar la sencillez en el uso y su utilidad al momento de buscar.

2. Diferencias entre buscadores, directorios y metabuscadores.

Principalmente existen tres tipos de buscadores:

• Directorios o Índices

• Motores de búsqueda (robots)

• Metabuscadores

Los Directorios o índices:

Los directorios se basan fundamentalmente sobre el trabajo realizado por humanos.

Presentan la información sobre las webs registradas como si de un catálogo se tratase, ordenadas en categorías y subcategorias. Solo registran algunos de los datos de nuestra página. Como el título y la descripción del sitio web, datos que nos solicitarán durante el proceso de petición de alta de nuestro sitio web.

Estos datos que suministremos son revisados por operadores humanos. Al buscar en alguno de ellos, más que en función de los contenidos de la página, los resultados son mostrados según la temática de la web.


416 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Es decir, si buscamos "ordenadores", aparecerán webs que de una forma u otra estén relacionados con la temática de ordenadores. Sus posibilidades de búsqueda de contenidos, en la mayoría de los casos, son inexistentes.

Son apropiados para buscar categorías, más que informaciones específicas.

Algunos de los directorios más conocidos a nivel global son DOMOZ (directorio de Google) o el Directorio de Yahoo.

Son una buena alternativa de búsqueda para ámbitos concretos y especializados, como en los casos de directorios científicos, bibliográficos etc.


417 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Robots o motores de búsqueda:

(También conocidos como crawlers o spiders).

La mayoría de grandes buscadores internacionales que todos usamos y conocemos son de este tipo.

Todos estos buscadores, tienen uno o varios robots encargados de ir visitando todos los sitios web existentes (Por ejemplo el robot de Google es Googlebot, el de Altavista es scooter...) recopilando información sobre los contenidos de las páginas. Fundamentalmente extraen información del texto que en ellas aparece y de otros parámetros como el título de las páginas.

Al realizar una consulta sobre este tipo de buscadores, ellos consultan su base de datos, con la información que han recogido de las páginas, y nos presentan los resultados en función de los algoritmos que utiliza cada uno de ellos, principalmente utilizados para ordenar los resultados en función de su relevancia.

Una de las características más relevantes de los robots es que a partir de la página de entrada de nuestra web (index), son capaces de rastrear e indexar el sitio completo a partir de la estructura de enlaces interna.

Cada cierto tiempo, los robots revisan las webs, para actualizar los contenidos de su base de datos

Si buscamos por ejemplo "ordenadores". En los resultados que nos ofrecerá el motor de búsqueda, aparecerán páginas que contengan esta palabra en alguna parte de su texto, titulo etc.

La calidad de los resultados obtenidos por cada buscador vendrá determinada por sus parámetros de indexación, extracción de información de cada web y algoritmos de búsqueda, análisis contextual etc que cada uno de ellos haya desarrollado.


418 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Sin ninguna duda, el motor de búsqueda más sofisticado y eficiente de la actualidad es Google.

Metabuscadores

Los metabuscadores, en realidad, no son buscadores, no disponen de una base de datos propia, sino que lo que hacen, es realizar consultas sobre las bases de datos de auténticos buscadores, robots y directorios, analizar los resultados, y presentar los suyos propios, reordenándolos en según su criterio.

Uno de los metabuscadores más conocidos es metacrawler.

3. Tráfico cualificado

Para todo el que empieza creando una página web o un blog, generar tráfico y visitas es vital para mantenerse a flote. Especialmente cuando estás empezando, necesitas que haya alguien dispuesto a leer tus contenidos para poder crecer poco a poco. Después de todo, ¿A quién no le gusta ver que suben las visitas hacia su página web?

No obstante, hay que tener en cuenta un pequeño detalle: no todo el tráfico tiene el mismo valor. Existen páginas y blogs que pueden tener decenas de miles de lectores al día, y no tener ninguna rentabilidad porque las visitas que llegan no son de calidad– no son cualificadas.

Tráfico De Mala Calidad

Existen muchas formas de generar visitas hacia tu página web. Puedes ponerte a comentar en todos los blogs que encuentres a través de Google, puedes poner un anuncio en Facebook o Google Adwords, etc.


419 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Pero hacer todo eso no te va a servir de nada si las visitas que recibes no tienen el potencial de convertirse en tus clientes, o de cumplir con los objetivos de tu sitio. Es más, recibir muchas visitas de baja calidad tiene varios efectos adversos que pueden perjudicarte a la larga, sobre todo si estas visitas son constantes y las recibes con mucha regularidad.

El primer efecto que pueden tener este tipo de visitas sobre tu sitio es el de manchar tus estadísticas de Google Analytics. Con manchar me refiero a que las cifras que esta herramienta analítica te mostrará no serán totalmente ciertas. Puede que tengas miles de visitas a una página en concreto, y a raíz de eso pensar que deberías crear más contenido de ese mismo tipo. El problema es que hacer eso sólo te servirá para atraer más tráfico de mala calidad, y no mejorarás en absoluto tus porcentajes de conversión.

También es posible que pierdas el rumbo de tu página. Si la mayor parte del tráfico que recibes no proviene de lectores fieles, o de gente que esté dispuesta a suscribirse a tu newsletter, puede que eso te haga replantearte tu estrategia de contenidos. En muchos casos esto no es buena señal para una página, ya que ir dando tumbos constantemente hará que no tengas un objetivo específico en mente, y a raíz de eso tus esfuerzos serán igual de difusos.

Un pico de tráfico web no necesariamente te aportará más conversiones.

Elige Bien Tus Fuentes De Tráfico

Debes de ser lo más cuidadoso posible a la hora de generar fuentes de tráfico hacia tu página web o blog. Para tener un negocio online rentable deberás tener un público leal y que te escucha atentamente, y para eso tienes que conocer bien de dónde provienen.

Si buscas construir una marca fuerte y sólida, deberás cultivar a tus lectores poco a poco y buscar que conecten contigo. Para hacer eso, hay algunas cosas que puedes probar:

• Busca sitios de temática relacionada, y conecta con la gente que frecuenta esos lugares.


420 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• Entabla conversación con tus lectores, y averigua qué es lo que más les interesa.

• Encuentra a los referentes de tu sector, y sígueles atentamente para saber qué tipo de contenidos publicar.

La generación de tráfico cualificado empieza por salir de tu propia página y buscar lugares que estén muy relacionados con tu temática. Allí es donde encontrarás a la gente que puede estar interesada en lo que tienes que decir, y posiblemente visitar regularmente tu sitio. Por el contrario, hay lugares y técnicas que deberías evitar a la hora de generar enlaces hacia tu sitio:

• Agregadores de noticias generalistas, ya que sólo servirán para crear un pico de tráfico muy temporal.

• Comprar likes o seguidores en redes sociales, los cuales no te prestarán atención.

• Ofrecer demasiado material descargable gratuito, ya que atraerás visitantes que sólo buscan la descarga.

Técnicas Penalizadas en Posicionamiento

El posicionamiento natural en buscadores (SEO) es en mi opinión una de las técnicas más rentables a largo plazo para tu plan de marketing digital. Como todo, tiene una cara menos positiva y es que hay que trabajar mucho y bien, para gozar de un posicionamiento web privilegiado.

• Técnicas White hat: son lo que podríamos definir como buenas acciones según Google (aportar buen contenido, dotar de una buena arquitectura reconocible a una web…).

• Técnicas Black hat: todo lo contrario al concepto anterior, acciones agresivas y poco éticas con métodos engañosos buscando un posicionamiento más rápido aportando una falsa realidad a Google.

Y aquí quedan definidos los dos grandes mundos del SEO, dicho de otra forma, los ángeles y demonios del posicionamiento web:

Las prácticas más penalizadas por google en posicionamiento web

Estas son posiblemente las técnicas o acciones que más pueden penalizar a tu web:

• Cloaking: este es el término que se utiliza cuando se está mostrando contenido distinto para el usuario y para Google de una misma web. La intención es intentar manipular los resultados de búsqueda. Ej: Mostrar una página en HTML a los motores de búsqueda y una página con imágenes o Flash a los usuarios.

• Sobreoptimización de palabras clave: aquí me refiero a esos textos prácticamente ilegibles de una web en los que hay demasiadas palabras clave. Te preguntarás cual es la “densidad” máxima aceptable para google de palabras clave, pues bien, dicho por lo grandes expertos, una densidad mayor de un 10% con respecto a todo el texto es desaconsejable.


421 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• Sobreoptimización de enlaces: algo que google tiene muy en cuenta es si ubicas un montón de enlaces que apuntan a tu web en contextos que no tienen nada que ver son la temática de tu sitio. Los enlaces se consideran relevantes si al usuario que los clica le aporta algo positivo.

• Compra masiva de enlaces: para google no va a tener sentido que de un día para otro pases a tener de 20 a 1.000 enlaces y que la mayoría no tengan apenas relación con tu web.

• Contenido duplicado: “copiar y pegar” descaradamente contenido y sin citar ninguna fuente eso solo va a hacer que sea cuestión de tiempo que seas penalizado.

• Excesivos comentarios como “spammer”: si te pasas todo el día soltando enlaces de tu web en redes sociales, comentando en blogs que no son de tu temática por ejemplo, eres literalmente un spammer y estás jugando con fuego si abusas de estas actitudes.

Módulo 5: Búsqueda y Procesamiento de Datos Tema 1: Posicionamiento

422 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

4. Tipos de búsquedas

Google recibe a diario cerca de 6.000.000.000 de búsquedas a nivel mundial. Los usuarios buscan todo tipo de contenidos y en función de cómo realizan esas búsquedas, podemos clasificarlas de una determinada manera.

En marketing online hablamos normalmente de tres grandes tipos de búsquedas, las navegacionales, las informacionales y las transaccionales.

Búsquedas navegacionales

Decimos que una búsqueda es del tipo navegacional cuando el usuario conoce la web/empresa/marca pero no sabe el dominio exacto o le da pereza escribir la dirección y le resulta más rápido/cómodo utilizar el cajetín de Google. La intención de la búsqueda es acceder directamente a un sitio web para buscar información o realizar algún tipo de interacción porque el usuario conoce o tiene ya experiencia de uso de ese sitio, es decir se utilizan para encontrar un Sitio concreto en la Red.

Búsquedas informacionales

Éstas son las más utilizadas por los usuarios en los motores de búsqueda. Son todas aquellas en las que buscamos información del tipo que sea: una noticia, una característica técnica, síntomas de un tipo de enfermedad, una dirección, el horario de un establecimiento, una fecha histórica, el tiempo en un determinado lugar y día etc….

Ya que desde hace tiempo Google en sus resultados de búsqueda incluye elementos multimedia como el vídeo o la geolocalización, creo que las búsquedas multimedia y las geolocalizadas podemos incluirlas en las informacionales.

Búsquedas transaccionales

Como su propio nombre indica, son aquellas que tienen como objetivo realizar una transacción del tipo que sea: una venta, una subscripción, una descarga, etc.. Aquí la atención del usuario se centra más claramente hacia los anuncios patrocinados que precisamente están pensados para llamar la atención de los usuarios que buscan un determinado producto o servicio.


423 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

TEMA 2: POSICIONAMIENTO

1. Las palabras clave

Introducción

Si no eliges bien tus palabras clave la optimización on page es inútil, así como la búsqueda de enlaces entrantes. Estarás haciendo un trabajo para nada.

Si además tienes una tienda online, posiblemente no venderás nada.

Así que, sí, elegir bien tus palabras claves es importante. Vital para algunos.

Por experiencia te digo que la mala selección de palabras clave es una de las razones que hacen por ejemplo que:

• No se consigan visitas.

• Solo se consigan visitas no cualificadas, que no interactúan con el blog o la web.

• No se consiga atraer a compradores.

Antes de entrar en el detalle y la metodología para elegir palabras clave inteligentes, vamos a repasar en esta entrada los fundamentos del arte de las búsquedas:

• Qué impacto tienen las palabras clave sobre tu blog o Web.

• Cómo se suele buscar en Google.

¿Qué estrategia de palabras clave elegir para tu blog o web?

Antes de elegir palabras clave debes saber que existen dos tipos de palabras clave:

Las que forman la columna vertebral de tu blog o web.

Las que sirven para optimizar cada una de las páginas que hay en tu blog o web.

Para esto dispones de dos armas distintas:

• La arquitectura de contenidos de tu blog o web, que impacta todas las páginas del blog o web.

• Tus entradas y páginas, cada una de ella es un elemento que debería tener una misión clara: estar en la primera página de Google e idealmente en los tres primeros puestos.

http://www.lifestylealcuadrado.com/normas-de-redaccion-para-blogs/


424 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Una hoja de ruta muy sencilla

Se trata de mantener en equilibrio un conjunto altamente inestable, una lucha entre largo y corto plazo. Por esa razón, la estrategia que te recomiendo seguir se resume en cuatro puntos:

1. Huye de las palabras clave de un solo término: demasiadas competitivas y no convierten bien.

2. Elige una palabra clave principal de dos términos por la que quieres posicionarte a largo plazo. Esta palabra debe estar asociada o bien relacionada con el mismo nombre de tu dominio.

3. Completa esta palabra clave principal con 3 a 7 palabras claves secundarias de 2 a 3 términos que sean todas muy relevantes y semánticamente cercanas a tu palabra principal por la que quieres posicionarte a medio plazo. Se corresponden a tus categorías en el blog o web y los elementos de la navegación principal.

4. Optimiza cada una de tus entradas con palabras clave de 3 a 5 términos (estrategia de la larga cola o The Long Tail, que explicamos más abajo en detalle) para lograr visibilidad a corto plazo.

¿Cómo suele buscar la gente?

Las costumbres cambian y la forma en que la gente usa los buscadores también. No hace demasiado tiempo, la gente prefería buscar ingresando solo una palabra. Con el tiempo, esa modalidad fue cambiando, cuando los usuarios fueron dándose cuenta de que al ingresar algo más de información en los buscadores se obtenía información más precisa y acorde a lo que se pretendía lograr.

Suena obvio, pero cuando más precisa es la frase ingresada en el buscador, mucho más adecuados serán los resultados que se pretenden hallar. Se habla de relevancia.

Y en este sentido, diversos estudios han concluido en que por lo general las búsquedas que incluyen entre cuatro y cinco palabras arrojan resultados más precisos que frases de dos palabras. Los usuarios lo han aprendido.

Para ti, dueño de un blog o web, debe estar claro también que este tipo de palabras clave tiene mucha menor competencia y con ellas es fácil ganar posicionamiento, pero en contrapartida tendrán menos volumen de tráfico.

Por esa misma razón se usan los buscadores. Quieren respuestas fiables, completas, honestas.

Si eres vendedor y que tienes un producto, sueles pensar en ti y tus productos. Vas a verificar si eres nº1 para el termino de búsqueda de la marca de tu producto. Y seguramente lo serás. Pero…

http://www.lifestylealcuadrado.com/dominios-web-para-blogs/

http://www.lifestylealcuadrado.com/estrategia-de-la-larga-cola/


425 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

¡Nadie buscas soluciones!

La gente ingresa términos de búsquedas que corresponden a sus problemas y dudas.

Un ejemplo concreto:

• Nadie busca “aspirinas”.

• La gente busca “me duele la cabeza” o “tengo migrañas”.

Si tienes solución a estos problemas, es ahí donde deberías tratar de posicionar tu negocio en Google. Creo que el ejemplo habla de por sí solo.

2. Teoría “The Long Tail”

El término de Long Tail (larga cola en español), es relevante para el posicionamiento de tu blog o web en los buscadores.

La idea de “la larga cola” tiene su origen en el artículo de Chris Anderson, “The Long Tail” publicado en el 2004 y posteriormente publicó el bestseller “La economía Long Tail”.

El fenómeno que describe es la tendencia por la cual, gracias a la tecnología, el mercado de masas se convierte en un mercado de nichos

Un nicho de mercado es “un término de mercadotecnia utilizado para referirse a una porción de un segmento de mercado en la que los individuos poseen

http://www.ciudadano2cero.com/wp-content/uploads/2013/11/longtail-seo.png






http://www.ciudadano2cero.com/long-tail-seo-blog/

http://www.wired.com/wired/archive/12.10/tail.html

http://www.wired.com/wired/archive/12.10/tail.html



426 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

características y necesidades homogéneas, y estas últimas no están del todo cubiertas por la oferta general del mercado.”

Porque la tecnología permite que por primera vez en la sociedad de consumo, la venta de pequeñas cantidades a precios bajos resulte rentable.

Esto se ve muy bien, por ejemplo, en empresas como Amazon con la venta de eBooks de bajo coste de autores desconocidos que nunca habría llegado a ser viables por el cambio editorial convencional o los marketplaces de software de smartphones como Google Play o el Apple Store.

Las consecuencias del cambio son enormes y plantean efectos muy positivos para el consumidor como una oferta mucho más rica (más variada) y retos para los marcas porque, según Anderson, en la economía del Long Tail del siglo XXI dominará el mercado quien sea capaz de acaparar las ventas minoritarias.

Dicho de otro modo: hay un nuevo y enorme mercado que es la suma de una infinidad de nichos que se han vuelto comercialmente viables gracias a las nuevas tecnologías. Esa es la “larga cola”: la cabeza del mercado serían los productos de consumo masivo (los de “toda la vida”) y la “cola” los nichos especializados de bajo volumen (los que ahora son viables) pero cuya suma supone una cifra económica de una enorme magnitud.

El Long Tail aplicado al Posicionamiento SEO

El “Long Tail” no es otra cosa que una representación muy fiel de los gustos e intereses de las personas. Y gracias a los buscadores estos gustos sabemos cuáles son porque se reflejan perfectamente en las búsquedas que realiza la gente en Internet.

Dicho de otro modo: el buscador de Google no es solamente una herramienta magnífica para localizar información, sino que es también un gigantesco estudio de mercado en tiempo real que tú puedes aprovechar para tus intereses. Además, aunque la perspectiva de Chris Anderson está más enfocada a la venta, si igualamos “venta” a “lectura”, en el mundo de los blogs o webs las reglas del Long Tail se aplican exactamente igual sea para vender o sea simplemente para captar lectores.

La función autocompletar de Google revela las búsquedas más populares que realizan los usuarios de Google.

Probablemente no seas consciente de que, de hecho, ya estás viendo esta información todos los días cuando buscas en Google. Prueba, por ejemplo, entrar en Google y teclear la palabra “zapatos”, verás que al teclearla aparece una lista de sugerencias de búsquedas como la de la captura de pantalla siguiente. Si sigues completando la palabra con las sugerencias, por ejemplo con “zapatos de fiesta”, verás que te sugiere nuevas frases de búsqueda basadas en la anterior y por tanto más largas, más concretas.

http://www.ciudadano2cero.com/como-publicar-un-libro-amazon-ebook/

http://www.ciudadano2cero.com/como-publicar-un-libro-amazon-ebook/

http://www.ciudadano2cero.com/google-plus-que-es-como-funciona/


427 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Esto es la función Autocompletar de Google que sugiere búsquedas populares mientras escribes y con ello a la vez te está “cantando” qué es lo que la gente suele buscar habitualmente en Google, una información que vale su peso en oro para un buen posicionamiento.

En el ejemplo anterior de la búsqueda en Google hemos estado haciendo de una manera muy simple algo básico que deberías saber: explorar un nicho.

Aplicado a las búsquedas podríamos ir explorando por ejemplo las búsquedas que se realizan relativas al calzado del siguiente modo:

https://support.google.com/websearch/answer/106230?hl=es

http://www.ciudadano2cero.com/diferencias-wordpress-blogger/


428 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• “zapatos”: una búsqueda muy genérica y un segmento muy grande (201.000 búsquedas al mes), tan grande y genérica que tiene más sentido calificar esto como un mercado. Curiosamente la palabra genérica que representa un mercado aun mayor y que sería “calzado” tiene muchas menos búsquedas (12.100) lo que demuestra que el volumen de búsquedas no guarda una relación directa con lo genérico que sea el término.

• “zapatos de fiesta”: vamos recorriendo el Long Tail hacia la derecha y ahora llegamos a un punto que sí encaja con la definición anterior, ya es algo más concreto y parece que ya tiene más sentido hablar de un nicho, un segmento especializado del mercado, aunque en este caso se trata de un nicho muy grande (27.100 búsquedas) y, por tanto, en principio, muy atractivo. En cualquier mercado hay muchos nichos que explorar, en ese caso otro similar sería también “zapatos de novia” (22.200 búsquedas).

1. “zapatos de fiesta Madrid”: esto ya es un nicho muy definido, tanto que no sería descabellado hablar incluso de “micro nicho” (las fronteras en esto son un tanto difusas…). Con 260 búsquedas es un nicho más bien pequeño.

Si explorásemos todas las búsquedas que parten de “zapatos”, tal como nos lo sugería Google en el ejemplo más arriba, se formaría un árbol con variantes de búsquedas cada vez más numerosas y especializadas.

Esto lo puedes probar mucho mejor que con Google con la herramienta, Planificador de palabras clave de Google AdWords, y alguna más que existe en el mercado, como veremos más adelante.

3. Servicios cuenta Google


429 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Crear una cuenta Google

Ocurre muchas veces que los usuarios tienden a mezclar los diferentes conceptos, y Google tampoco se afana en aclararlo.

Cuenta de Google NO significa cuenta de Gmail

Google, como buena empresa, trata de fidelizar a su usuario vinculándolo con la mayor cantidad de servicios posible. Sin embargo, legalmente no nos puede obligar a tener un email de Gmail para acceder a Google Analytics, si nosotros ya disponemos de una cuenta de email en algún otro servicio (otro como Yahoo, Microsoft o el personalizado de nuestra empresa). ¿Qué diferencia hay entre ellos?

Gmail

Gmail es el servicio de correo electrónico de Google. Es gratuito y actúa como central de autenticación. Es decir, si ya estás en Gmail, podrás utilizar directamente todo el resto de servicios de Google autenticado como tú mismo. O sea, una cuenta de Gmail ya es una cuenta de Google.

Es una herramienta muy cómoda por su integración con la agenda de contactos, el calendario, los teléfonos Android etc. Mucha gente utilizamos Gmail como soporte del correo electrónico personal o incluso el de la empresa, por la facilidad de gestionar todo en un sólo punto desde cualquier lugar donde nos encontremos.

Cuenta Google

Una cuenta Google es nuestra identidad en Google. Básicamente consiste en una dirección de email y una contraseña. Pero ¡OJO! No es necesario que se trate de un email de Gmail. Podemos tener una cuenta de Google, con un email que no sea Gmail, por ejemplo [email protected] o [email protected]

Con esta cuenta creada, podremos utilizar casi cualquier servicio de Google, como Google Drive, Calendar, Analytics, Talk, Maps etc. sin necesidad de dejar de utilizar nuestro email personal.

Precisamente, si utilizamos de forma continua una cuenta de correo que no sea Gmail, yo recomiendo seguir utilizándola para registrarnos en los servicios de Google.

Tan sólo hace falta darse de alta como cuenta de Google y (¡atención!) dar nuestro email preferido, y no dar nada de Gmail, para que a partir de ese momento esa sea nuestra cuenta de Google. Esto no quiere decir que Google gestione nuestro correo electrónico, que seguirá funcionando con el mismo sistema que hayamos utilizado hasta ese momento.

Con una cuenta Google vamos a poder acceder a todos los servicios de Google. Los que más nos interesan desde el punto de vista del posicionamiento son:

• Google Analytics,

• Herramientas para Webmasters de Google


430 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• Planificador de Palabras AdWords.

Google Analytics

Existen muchas herramientas diseñadas para analizar las métricas de tu web, y como seria de esperar las más efectivas suelen ser de pago.

Afortunadamente una de las mejores herramientas de análisis es gratis: Google Analytics que se ha convertido en algo así como un estándar a la hora de medir las estadísticas web más comunes

La utilizan webmaster de todo el mundo para controlar métricas como el retorno de la inversión publicitaria, éxito o fracaso de las campañas de marketing, número y comportamiento de las visitas, impacto en las Redes Sociales...

Aunque no todo el mundo lo sabe existe una versión de pago llamada Google Analytics Premium, pero la versión estándar es suficiente para la mayoría de los usuarios, incluso para los expertos.

Con Analytics tienes a tu disposición una gran variedad de informes con múltiples posibilidades de personalización. Y además su uso es relativamente sencillo.

Entre sus numerosos competidores hay herramientas especializadas en recoger y analizar estadísticas web, otras más enfocadas en el análisis del proceso de ventas ("Embudo de Ventas"), algunas más orientadas hacia las Redes Sociales, etc.

Google Analytics no sobresale especialmente en ningún aspecto, pero su gran virtud es que hace "un poco de todo", y por eso te servirá estupendamente como ayuda para posicionar tu web.

¿Cómo funciona Google Analytics?

Analytics recoge los datos de tus visitantes gracias a un código (Javascript) que debes insertar en todas aquellas páginas que desees monitorizar.

Este código, llamado Google Analytics Tracking Code (Código de Seguimiento de Google Analytics) es personalizado, por lo que primero debes abrir una cuenta.

Crear tu cuenta en Google Analytics

El proceso para crear una cuenta es muy sencillo.

Es muy posible que ya tengas una cuenta abierta en Google, para cualquier otros servicio, y puedes utilizarla para darte de alta en Analytics.

Si no la tienes debes crear una cuenta "general" de Google (por ejemplo Gmail).


431 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Visita la página de Google Analytics

(http://www.google.com/intl/es_ALL/analytics/)

Si no tenías cuenta en ningún servicio de Google debes pulsa el botón "creee una cuenta". Si ya la tienes pasa al punto 3.3.2.

Iniciaras el proceso de una cuenta en Google


432 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Si en esta pantalla el idioma de la página no aparece en español, puedes seleccionarlo en el menú desplegable, abajo a la derecha.

A continuación pulsa en el botón rojo "crear cuenta"

Rellena el formulario con todos los datos solicitados y haz clic en "crear mi cuenta".

A continuación recibirás un email con instrucciones para verificar tu cuenta.

Crea tu cuenta en Google Analytics

Vuelve a visitar la página principal de Google Analytics y esta vez pulsa en "iniciar sesión”

En la siguiente pantalla pulsa en "Regístrese"

Y finalmente rellena los datos que te piden para crear tu primera cuenta en Google Analytics.


433 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Google Analytics Tracking Code

Como he comentado al principio, antes de comenzar a recoger los datos de tus visitas necesitas incluir el código de seguimiento de Google Analytics.

El "Google Analytics Tracking Code" es un fragmento de código que debes añadir en todas las páginas de tu web donde desees recoger información, normalmente en todas.


434 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Si utilizas WordPress para gestionar tu web esto es muy sencillo, porque la mayoría de los temas tienen una opción para insertar el código.

Una vez hayas cumplido con este requisito ya puedes comenzar a recoger datos y analizarlos en la aplicación.

Al principio no dispondrás de datos almacenados, pero regresa a la aplicación en un par de semanas y visita la sección "Informes estándar" para disfrutar de todo un mundo de información.

Algunos de los primeros datos que deberías revisar están en "Fuentes de tráfico" donde conocerás la procedencia de tus visitantes y cómo han llegado a tus páginas.

Según vayas utilizándolas descubrirás que Analytics es una herramienta aparentemente sencilla ¡pero con enormes posibilidades!

4. Herramientas de Tráfico del Servidor Web

A diferencia de aplicaciones como Google Analytics, cuyo funcionamiento se base en la ejecución de cierto código que se incluye en las páginas del sitio web, existe otro tipo de aplicaciones que se instalan directamente en el servidor web con el objetivo de recabar información acerca del tráfico que recibe de este.

Una herramienta gratuita de este tipo que podemos utilizar es AWStats


435 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

http://awstats.sourceforge.net

AWStats es un analizador de logs gratuito capaz de representar gráficamente estadísticas de nuestros servidores web, mail, ftp,…

Es capaz de procesar ficheros de logs muy grandes, soporta ficheros Apache, WebStar, IIS además de otros muchos tipos de logs de otros productos.

Es capaz de analizar logs que incluyen:

• Número de visitas y visitantes únicos

• Usuarios autenticados

• Dominios y países de visitantes

• OS usado

• Errores HTTP

• Motor de búsqueda usado,…

Existen otras muchas herramientas similares a AWStats, pero la información que ofrecen suele ser parecida.

http://awstats.sourceforge.net/

http://awstats.sourceforge.net/

Módulo 4: Búsqueda y Procesamiento de Datos Tema 3: Búsqueda de las palabras clave (Keyword Research)

436 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

TEMA 3: BÚSQUEDA DE LAS PALABRAS CLAVE (KEYWORD RESEARCH)

1. Introducción

La selección de las palabras clave o “keywords” más representativas de una web son uno de los grandes retos a los que se enfrenta cualquier webmaster cuando planifica el posicionamiento de su sitio. Elegir bien el conjunto de frases clave y saberlas distribuir por el contenido y la estructura de la web es fundamental para conseguir visitas de calidad.

En este importante proceso para el futuro de nuestra web debemos sondear en primer lugar que criterios usa el público para la búsqueda de productos o contenidos afines, y elegir los que sean más cercanos a aquellos por los que nos gustaría que nos encontraran sin desestimar los más populares.

El dueño de una tienda online de relojes puede pensar que su frase clave ideal es “relojes de moda” cuando en realidad lo que buscan sus potenciales clientes es “relojes baratos online”, por lo que obtiene más resultados reales posicionándose sobre la segunda frase que sobre la primera.

2. Diferencias entre Palabras para SEO y para SEM

Uno de los conceptos que más escuchamos en marketing digital es SEO. También escuchamos hablar de SEM y, para una oreja inexperta, es increíble cómo los dos conceptos se pueden confundir. Aunque tienen puntos en común, son muy diferentes.


437 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Por eso, hoy vamos a hacer un recorrido breve para principiantes sobre los dos conceptos, para después explicar cuáles son sus usos principales y cómo podemos aprovecharlos sin necesariamente dedicarnos a ello.

¿Qué es SEO?

SEO significa Search Engine Optimization, u optimización de los motores de búsqueda, como puede ser por ejemplo Google. Es ante todo un proceso orgánico, lo que quiere decir que no es de pago. Esta es la diferencia fundamental. Se trata de la mejora de la visibilidad de nuestra web en los resultados de búsqueda de los buscadores, de forma tal que estén posicionados de la mejor forma posible.

Para poder tener una estrategia de SEO adecuada, tenemos que tener en cuenta muchas variables. Por ejemplo, tenemos que considerar el algoritmo usado por los buscadores, las palabras claves, el diseño, el contenido –fundamental-, links, indexación, y más, cosas que revisaremos dentro de algunas líneas.

¿Qué es SEM?

SEM significa Search Engine Marketing, y aquí reside la diferencia fundamental. Mejoramos el posicionamiento de nuestras páginas a través del pago de publicidades. En algunos lugares, SEM puede ser tomado como un concepto amplio que también abarca SEO, y generalmente los encargados de optimizar se ocupan de estos dos asuntos. Pero es importante distinguir entre ambos.

SEO no requiere que hagamos ninguna compra, mientras que SEM sí. Pero también tiene sus trucos, pues tiene que ser una compra inteligente, pues tenemos que saber qué palabras estamos comprando y para qué, y distribuir de forma correcta el presupuesto que se nos ha dado.

La combinación de ambas resulta especialmente atractivo de cara a obtener mejores resultados a corto y largo plazo, la inversión en Adwords puede ser realmente interesante para saber qué palabras se buscan, cuáles nos traen tráfico a nuestro sitio web y cuáles son las que mejor convierten.

Diferencias entre SEO y SEM

Para establecer las diferencias entre SEO y SEM, nos basaremos en una serie de aspectos, como son:

• Nº palabras clave:

SEO: número limitado de palabras clave.

SEM: número ilimitado de palabras clave.

Cuando planteamos una estrategia SEO, el número de palabras clave con las que posteriormente trabajaremos será limitado y tendrá mucho que ver con el número de páginas del portal. En el caso de la publicidad de pago (SEM), se podrá pujar por un número ilimitado de palabras clave, siendo muy útil esta acción para identificar aquellas keywords que traen tráfico cualificado.


438 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• Coste:

SEO: solo pagamos por el trabajo de optimización.

SEM: se paga por visitas y por la gestión de campaña.

Establecer una estrategia SEO a medio/largo plazo y ejecutarla requiere del trabajo de un especialista que realice tareas de optimización de la propia página y de construcción de la popularidad web del propio sitio. Por lo tanto, se trata de llevar a cabo de una serie de técnicas. En el caso de SEM, además del tiempo del profesional en la administración y gestión de la campaña, también se paga por las visitas desde los enlaces patrocinados.

• Tiempo:

SEO: trabajo a medio/largo plazo. Obtener resultados puede tardar, en algunos casos, semanas o meses y en cualquier caso, requiere de un trabajo continuo de mantenimiento y optimización.

SEM: el lanzamiento de la campaña requiere de relativamente poco tiempo y se pueden empezar a conseguir clics desde el primer segundo.

• Flexibilidad a cambios:

SEO: poco flexible. Para que muchos cambios surtan efectos, podrían pasar días o semanas. Por ejemplo, para que un cambio de título efectivo es necesario que el robot del buscador rastree la página de nuevo y actualice el resultado.

SEM: muy flexible. Cualquier cambio dentro de la campaña, por ejemplo, el texto del anuncio, se refleja instantáneamente en la página de resultados del buscador.

3. Fuentes Internas de Información. Elegir las palabras claves adecuadas

Ya está claro que a nivel mundial más del 90% de los internautas utilizan la web para realizar búsquedas. Y que la mayoría de ellos lo hace en Google. Por lo tanto, los buscadores se han transformado en medidores de reputación de un sitio web, quienes deciden qué páginas mostrar y en qué orden, de acuerdo a las palabras o términos introducidos por los usuarios.

Por lo tanto, las palabras claves determinan la segmentación de una página web, tanto para el posicionamiento orgánico como para los anuncios en Google Adwords. Y esta segmentación permitirá atraer al público más idóneo respecto a los productos y servicios que ofrece una empresa.

Cómo elegir las palabras clave por las que buscarán un sitio

Hablar de palabras claves es similar a hablar de frases y no a una única palabra. Por ejemplo: “alimento para mascotas” o “artículos de deportes extremo”. Aquí, lo


439 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

importante no es la extensión, es ser precisos a la hora de elegir las palabras más adecuadas, que son aquellas que los potenciales clientes de una empresa utilizarán para realizar una búsqueda:

Algunos consejos para determinar las palabras más adecuadas.

• Escucha las sugerencias de sentido común:

Si trabajas para posicionar el sitio de una empresa, escucha las palabras que te recomiende el jefe o sus compañeros de trabajo.

Si trabajas en una consultora, escucha las sugerencias de tu cliente. Lo más seguro es que él conozca mejor que tú esa industria.

Pregúntales a otras personas que reúnan las características de potenciales clientes.

Con este primer listado tendrás una idea de las palabras genéricas más importantes para posicionar una página determinada. Será el primer paso.

• Atento a la publicidad:

Si vamos a posicionar un sitio que ofrece alimento para mascotas, lo mejor será hacer un análisis de los términos más utilizados por esa industria, revisando sitios web, blogs, prensa escrita, etc.

¿Sabes qué terminología está utilizando la competencia para publicitar sus productos? Este es otro indicador muy relevante.

• Las aplicaciones instaladas en el servidor web para registrar las visitas, que recibe la web de la empresa o en su caso, aplicaciones como Google Analytics.

En Google Analytics puedes encontrar esta información en las Fuentes de Tráfico.

Lógicamente lo primero que vemos en la visión general es la proporción de tráfico que nos aportan las diferentes fuentes de tráfico. Vamos a definirlas y luego ya las desmenuzaremos (algo básico en la analítica web):

Todo el tráfico: debe coincidir con las visitas que hemos visto al entrar en nuestra cuenta de Google Analytics.


440 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

1. Tráfico Directo: son aquellos usuarios que han entrado tecleando la url directamente en la barra del navegador….

2. Tráfico de Referencia: también conocido como tráfico “Referral”. Son aquellas visitas que nos llegan a través de otra web, es decir a través de enlaces en otros sitios. Aquí dentro tenemos desde las visitas de las redes sociales hasta de socios nuestros que tienen algún enlace en su web.

3. Tráfico de Búsqueda: es el tráfico que nos traen los diferentes buscadores, es decir son visitas de usuarios que llegaron a nuestros sitio web porque estaban buscando algo en internet y aparecimos nosotros. Existen dos tipos de tráfico de búsqueda:

• Tráfico Orgánico: aparecimos ante los ojos del usuario posicionados de forma natural). Es la forma “gratuita” de aparecer en Google, eso sí al SEO le pagamos, eso no es gratis.

• Tráfico de pago: solo aparecerán visitas en este apartado si en algún momento hemos realizado alguna campaña SEM (Adwords), si nunca hemos hecho campañas, esta línea ha de aparecer completamente plana.

4. Tráfico de campañas: está enlazado con las acciones de marketing online: banners en otros sitios web o enlaces etiquetados.

• El Volumen de búsquedas y competencia son dos conceptos que utilizaremos para elegir las palabras clave más adecuadas, como veremos cuándo utilicemos el Planificador de Palabras Clave Adwords.

• Recoger una lista las palabras claves adecuadas y las palabras clave negativas

El primer paso para determinar qué términos son los más adecuados para nuestra web, es escribir palabras relacionadas con nuestro sector de actividad. Si nuestro negocio es una zapatería, éstas podrían ser “calzado”, “zapatería”, “venta de zapatos”.

A continuación, partiendo de los sectores de actividad, elegiremos un listado de palabras clave generales. En nuestro ejemplo de la zapatería, tendríamos “zapatos para señora”, “zapatos para caballero”, “zapatos de vestir”, “zapatos de tacón”, etc.

Para completar el listado, anotaremos cuantas palabras clave específicas se nos ocurran y que puedan ser la clave de la diferenciación de nuestro negocio frente a otros. Por ejemplo, “zapatos hechos a mano de piel de avestruz”, sería un término muy concreto que no sería de interés para todas las zapaterías, pues no ofrecen estos productos.

Una vez hayamos generado el listado de todas las palabras clave que creamos interesantes para muestro sitio, haremos uso de la Herramienta de palabras clave de Adwords, tanto para obtener más sugerencias relativas a los términos, como para saber cuáles son las que mejor relación búsquedas/competencia ofrecen, y así estimar el tráfico que podríamos recibir con cada una en función de nuestro presupuesto.


441 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

A la hora de optimizar nuestra web, hemos de tener en cuenta tanto la posibilidad de usar las palabras clave negativas (términos para los que no queremos que aparezca nuestra web o blog). Por ejemplo, si se trata de la zapatería anteriormente mencionada, la palabra “gratis”, podía aparecer en primer lugar de nuestra lista de palabras clave negativas, pues no deseamos que aparezca nuestro sitio web para búsquedas que incluyan dicho termino.

4. Fuentes externas de Información.

Tienes un negocio “Aceite de oliva Pepe Pérez”, y quieres tener una página web para que la gente te pueda localizar más fácilmente. Contratas a una empresa/diseñador web que te cobra entre 1000€ y 10000€. La web te encanta, es tal cual la querías. Te parece moderna y bonita. Y total, tú lo que querías es una web. Entras en Google, escribes “Aceite de oliva Pepe Pérez” y… ¡¡¡apareces el primero!!! ¿No es maravilloso?

Un día alguien te pregunta “Oye, ¿tú no tenías una web? Ayer te busqué y no hubo forma de encontrarte en Google”. Sacas tu smartphone, abres el navegador y escribes “Aceite de oliva Pepe Pérez”, y ahí estás, el primero. Se lo enseñas al que te ha preguntado y su respuesta es “Pero ¿y el que quiera comprar aceite de oliva pero no sepa cómo te llamas?”. Y ahí comienza el drama. Pepe escribe en Google “aceite” y su web no aparece por ningún lado. Prueba con “comprar aceite”, “aceite de oliva”, “tienda de aceite”, y nada, ni rastro de su web.

Si estás en la misma situación que Pepe, vamos a explicar un par de trucos para que no sólo puedas tú mismo analizar si tu web está optimizada o no para que los buscadores te encuentren, sino que hasta podrás corregir tú solo algunos errores para mejorarla.

Analizar tu web.

Para ello necesitas saber qué navegador usas para acceder a Internet.

- Chrome: Simplemente tendrás que dar al botón derecho del ratón y hacer clic en “inspeccionar elemento”

- Explorer: ¿realmente sigues usando Explorer? En caso afirmativo, da al botón derecho del ratón y haz clic en “Ver Código Fuente”

- Firefox: Necesitas instalarte el complemento gratuíto Firebug

Pasos para instalar El complemento Firebug

• Desde Google buscas los complementos de firefox


442 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• Entras en Complementos y buscas Firebug


443 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• Pulsamos en Agregar a Firefox

• Esperamos hasta que el instalador complete la instalación de Firebug. En el momento que termine reiniciamos el navegador.

• Una vez reiniciado el navegador, buscamos el icono en la barra de herramientas de Firefox,o en el menú Herramientas de Firefox >> Firebug

• Lo seleccionamos y listo, ya tenemos, el panel de Firebug con el código HTML de la web en pantalla.

Al pulsar sobre el botón Inspeccionar , permite identificar la parte del código que forman las secciones específicas de la página seleccionada con el puntero del ratón.


444 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

“Los meta-content”

Bajo este nombre tan horrible se esconden algunas de las claves básicas para optimizar tu web. Para seguir mi ejemplo voy a usar el navegador Firefox con Firebug, y tomaremos la web de IEBS para ver sus entrañas:

• Escribe http://www.iebschool.com/

• Se te abre una página que contiene el código HTML de la web.. Busca en la tercera fila donde pone “head” y haz clic allí.

1. Ahora verás que se han desplegado más campos con palabras HTML. No te preocupes, que por ahora sólo te vas a fijar en 3:

• Title: <title>IEBS – La Escuela de Negocios de la Innovación y los Emprendedores.</title>

• Description: <meta name=”description” content=” IEBS, la Escuela de Negocios de la Innovación y los Emprendedores, ofrece Formación actual de Empresa, Marketing, Internet,RRHH y Finanzas.">

• Keywords: <meta name=”keywords” content=”emprendedores, masters, postgrados, mba, marketing, finanzas, rrhh, programas de desarrollo empresarial”>


445 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Una vez que los tenéis localizados, tenéis que analizar si el nombre de vuestra empresa es correcto. Si la descripción que aparece de vuestro negocio define bien vuestra labor, ya que es lo que va a mostrar Google a los usarios que os busquen. Y por último si las Keywords por las que os van a encontrar en Google son las apropiadas o las que tú quieres.

Para modificarlo, necesitáis editar el fichero HTML que contiene esa información. La empresa que os diseñó la web subió esa información a un servidor, y necesitas acceder a ese archivo para modificarlo. Se abre como un simple bloc de notas, y con mucho cuidado para evitar tocar nada que no queramos, podemos modificar esos campos a nuestro antojo.

No está de más, antes de editar nada, hacerse una copia de seguridad de los archivos de la web para evitar cometer un fallo irremediable.

Tu web es probablemente el mejor lugar para encontrar palabras clave, más que nada porque es donde reúnes todo lo que ofreces: tus productos, servicios, publicaciones, etc. Lo único que tienes que hacer es identificar los términos que mejor representan tus contenidos

Una manera rápida de hacer esto es mediante el Planificador de palabras clave de AdWords. (https://adwords.google.com/o/KeywordTool). Si accedes a la sección Buscar ideas para palabras clave o grupos de anuncios y en lugar de escribir palabras pones tu página de destino, verás aparecer términos que el mismo Google considera relevantes para dicha página.


446 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

También se considera una fuente de información para la búsqueda de palabras clave, las búsquedas relacionadas, que muestra Google después de los 10 primeros resultados cuando haces una búsqueda.

E Incluso, las sugerencias que muestra Google al mismo tiempo que escribes.


447 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

5. Herramientas para palabras clave

Existen herramientas SEO gratuitas y de pago que nos permiten confeccionar nuestro listado de keywords, pero solo os hablaré de las 17 más importantes o representativas

Planificador de palabras clave (antes Google Keyword Tool)

El cambio de la herramienta por excelencia de Google, no ha dejado indiferente a los SEO de todo el mundo, pero lo cierto es que si la miramos a fondo podremos encontrar algunas mejoras interesantes.

Esta herramienta SEO nos permite realizar búsquedas locales por ciudades, y de este modo conocer de forma exacta y concreta, el número de búsqueda mensuales de esa palabra clave.

http://www.marketingandweb.es/wp-content/uploads/2013/10/planificador-palabras-clave.jpg








448 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Sistrix

Una herramienta SEO y Social muy completa, con la que además podremos analizar palabras clave y que nos puede resultar muy interesante su uso. Podemos por ejemplo comparar los resultados obtenidos con la herramienta de Google, y así tener más información de nuestras palabras clave.

Word Tracker

Wordtracker nos aporta una gran cantidad de palabras clave para nuestro análisis. Te informa también del volumen de búsquedas, de la competencia, de las tendencias y del CPC.

http://www.marketingandweb.es/wp-content/uploads/2013/10/sisxtrix-herramientas-seo.png

http://www.marketingandweb.es/wp-content/uploads/2013/10/word-tracker.jpg
















449 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Pero quizás, el aspecto que más llama la atención es que te indica si una palabra clave merece la pena trabajar su SEO o no.

Ubersuggest.

Nos sugiere palabras clave muy similares a un término concreto, es decir, nos

ofrece variaciones de esa misma palabra clave.

Keywordbuzz

Parecida a la herramienta SEO anterior nos permite encontrar múltiples variaciones de una palabra clave.

http://www.marketingandweb.es/wp-content/uploads/2013/10/Ubersuggest.jpg

http://www.marketingandweb.es/wp-content/uploads/2013/10/keywordbuzz.jpg
















450 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Nosotros utilizaremos el Planificador de Palabras Clave Adwords

Ahora vemos las sugerencias de palabras clave que hace esta herramienta. Primero los términos de búsqueda que hemos incluido y debajo otras ideas para palabras clave por Relevancia.










451 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

El paso a seguir ahora sería descargar todas estas palabras clave para después trabajar con la lista completa. Fíjate que en estas ideas puede haber nuevas palabras negativas en las que no habíamos pensado.

Utiliza el botón Descargar para guardar estos resultados y después poder utilizarlos con una aplicación

6. Elección de palabras clave

Sí realizamos una búsqueda con el Planificador de Palabras Adwords de:

• venta de coches de ocasión

• venta de coches de ocasión

• vehículos de ocasión

• vehiculos de ocasión

• ofertas coche segunda mano

Hemos conseguido una buena lista de palabras candidatas para realizar el posicionamiento de nuestro sitio web.


452 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Sin embargo, no todas esas palabras van a proporcionarnos el mismo rendimiento, por lo que el paso siguiente es elegir aquellas que nos proporcionarán los mejores resultados en SEO, así como las que utilizaremos en SEM para los anuncios de pago.

La elección de esas palabras clave se va a realizar atendiendo principalmente a dos criterios: el volumen de búsquedas y la competencia.

Y es que en SEO nos interesan sobre todo aquellas palabras clave con mayor volumen de búsquedas y menor competencia, es lo que se conoce en esta jerga como "mejor coeficiente KEI".

De esta forma, veremos que para las labores de SEO tendremos que elegir únicamente las que mejor KEI proporcionen, ya que resulta difícil posicionarnos para muchas palabras clave; mientras que para el SEM podremos probar con todas las palabras o con la mayoría de las que hemos encontrado hasta el momento, siempre, claro está, atendiendo a las limitaciones del presupuesto que tenemos y a lo orientadas que estén las palabras clave con nuestro sitio web o negocio.

7. Agrupar las palabras clave

En la figura anterior puedes ver la hoja de cálculo con las distintas palabras clave resultado de la búsqueda que hicimos anteriormente.

Antes de ver cómo elegir qué palabras clave utilizaremos para SEO y cuáles para SEM, es importante resaltar la necesidad de agrupar las palabras clave resultado de la búsqueda realizada.


453 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

La idea es conseguir grupos de palabras clave de temática similar y diferente al resto. Veremos que estos grupos de palabras se convertirán posteriormente en los anuncios en SEM.

En este caso he utilizado distintas hojas dentro del mismo archivo de Excel para reflejar cada uno de estos grupos. En total he dividido todas estas palabras en 6 grupos:

• Grupo coches.

Palabra clave coches ocasion coches ocasión coches segunda mano coches seminuevos coches usados coches de km0 coches de segunda mano deportivos coches de segunda mano baratos coches de segunda mano particulares vehículos de ocasión vehiculos de ocasion coches baratos de segunda mano coches de segunda mano coches segunda mano particulares coches de segunda mano de particulares coches de segunda mano en extremadura ...

• Grupo compra y venta.

Palabras clave venta de coches venta de coches de ocasion venta de coches de ocasión venta de coches de segunda mano venta de coches de segunda mano

venta coches de segunda mano venta de coches segunda mano ventas de coches de segunda mano compra venta coches segunda mano venta de coches de segunda mano de

compra venta de coches de segunda mano compra y venta de coches de segunda mano venta de piezas de coches de segunda mano venta coches segunda mano


454 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

venta de coches particulares de segunda ...

• Grupo ofertas.

Palabras clave ofertas coches segunda mano ofertas de coches de segunda

oferta de coches de segunda

• Grupo buscador.

Palabras clave buscador de coches de segunda mano anuncios de coches de segunda mano busco coches de segunda mano buscador coches segunda mano buscar coches de segunda mano anuncios coches segunda mano paginas de coches de segunda mano concesionarios de coches de segunda

• Y el grupo precios.

Palabras clave precios de coches de segunda mano precios de coches de segunda mano por matricula

• Adicionalmente he utilizado otra hoja para las palabras negativas.

Palabras negativas coches de juguete coches nuevos coches de bebe de segunda mano elevadores de coches de segunda

coches de caballos de segunda piezas de coches de segunda mano


455 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Vemos que ya tenemos el nivel de competencia (reflejado con un valor entre 0 y 1) y el volumen de búsquedas mensuales, tanto globales como locales, en concordancia amplia.

Pero, ¿qué significa esto de la concordancia?

8. Concordancia de palabras clave

En los motores de búsqueda todo gira en torno a los términos que utilizan los usuarios para buscar sus necesidades, dichos términos se definen como palabras claves.

Los términos de búsquedas conectan palabras claves que activan anuncios relevantes creados en AdWords, por eso la importancia que maneja Google sobre la relevancia entre las palabras claves, los anuncios y las páginas de destino, ya que la primicia es ofrecerles a todos los usuarios una experiencia positiva.

Aquí es donde entra la parte de Arte de Google AdWords, de entender no sólo la propia palabra clave, sino también la intención que tienen los usuarios detrás de los términos que usan al buscar.

Por ejemplo, si alguien está buscando “torta de chocolate” tenemos que estar preparados para entender si están buscando una receta para prepararlas o una panadería cerca que la vendan.

Ahora bien, aquí es donde entra a jugar un papel fundamental las CONCORDANCIAS DE PALABRAS CLAVE, que determinará básicamente la forma amplia o estrecha la consulta de búsqueda de un usuario donde puede coincidir con las palabras claves de nuestras cuentas de AdWords.

En la siguiente imagen podrás conocer el mar de posibilidades y el alcance de cada una de las concordancias de palabras clave de AdWords:

http://www.davirbonilla.com/wp-content/uploads/tipos-de-concordancias-en-adwords.jpg








456 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Tipos de Concordancias de Palabras Clave en AdWords:

1- Concordancia Amplia: curso de adwords

Es el tipo de concordancia predeterminada y permite que tu anuncio aparezca en frases similares o variaciones cercanas, en cualquier orden y hasta con términos adicionales.

Esta concordancia te permite ahorrarte el tiempo de analizar y definir las palabras claves que necesitan tus anuncios y te logrará obtener el mayor volumen posible de tráfico, pero ten precaución porque el tráfico es menos calificado que las otras concordancias.

2- Concordancia Amplia Modificada: +curso de adwords ; +curso +adwords

Esta variación de la concordancia amplia se utiliza con un signo más”+” delante de cualquier término que deseas forme parte de los términos de palabras clave que usen en el motor de búsqueda.

Al agregarle el signo más asegurarás que tus anuncios salgan exclusivamente en aquellos términos que incluyan las palabras clave que antecedas dicho término.

También incluyen variaciones cercanas y en cualquier orden. Con esta concordancia no se mostrarán los anuncios en caso de sinónimos o términos relacionados, por tal razón el tráfico logrado es más controlado y menor que la concordancia amplia pero con mayor relevancia y calidad.

3- Concordancia de Frase: “curso de adwords”

Se debe usar la palabra clave entre comillas “palabra clave”.

Esta concordancia ofrece aparecer los anuncios cuando los usuarios utilicen este mismo término o términos que incluyan palabras antes o después de la definida, considerando que la palabra clave en concordancia de frase debe aparecer en el mismo orden y sin términos intermedios.

También se publicaran los anuncios con búsquedas de variaciones cercanas. Te permitirá un tráfico más calificado que las concordancias anteriores y de menor cantidad.

4- Concordancia Exacta: [curso de adwords]

Se debe usar la palabra clave entre corchetes [palabra clave].

Es la concordancia más calificada pero de menor tráfico y mostrará tus anuncios cuando los términos de búsqueda sean exacto a los que definas en tus palabras clave, si se podrán mostrar con variantes cercanas pero no con los sinónimos.

Con esta concordancia podrás definir de manera casi exacta la intención de búsqueda de tu cliente objetivo, porque se suele utilizar términos como comprar que son altos indicios de la intención que se tiene en cuanto al producto o servicio.


457 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

5- Concordancia Negativa: -gratis

Se debe usar la palabra clave ante-cediéndole un signo negativo “-” a la palabra clave.

Debería ser de uso obligatorio en tus campañas porque excluirán la aparición de tus anuncios en os términos que no quieres ni te interesan aparezcan, el ejemplo clásico es aquel usuario que busca cosas gratis.

Esta concordancia te permitirá filtrar el tráfico irrelevante de tu mercado para evitar clics no productivos y que no generan ningún beneficio.

6- Concordancia de Bloqueo (de uso personal): -[adwords]

Es una variante de la concordancia negativa que yo uso de manera personal y que es muy útil cuando los términos usados tienen alguna palabra muy general o que genera mucho tráfico no calificado.

Siguiendo el mismo ejemplo, yo usaría la palabra clave negativa -[adwords] para que mis anuncios no aparezcan cuando se use solo el término adwords que por supuesto es un término de muchas búsquedas y que no me favorecerían para mi publicidad.

Datos importantes a tener en cuenta:

• Variaciones cercanas: se refiere a errores ortográficos, los plurales o singulares de las palabras, abreviaciones, derivaciones y acentos.

• Las palabras clave NO SE MANEJAN POR MAYÚSCULAS NI MINÚSCULAS, y esto es muy importante porque la vieja escuela lo manejaba así y lamentablemente todavía existen anunciantes que lo utilizan.

• Los términos con tildes o acentos se consideran diferentes a los que no lo tienen.

Recuerda siempre que al crear una campaña lo ideal es empezar a acumular buenas métricas y altos CTR, por ende lo ideal que siempre recomiendo es implementar palabras clave en concordancia exacta y luego implementar concordancia de frase, seguido de la amplia modificada y si es necesario mayor tráfico la amplia pero con buenas palabras clave negativas.

9. Calcular el volumen de búsquedas

Pues vamos a obtener el volumen de búsquedas. Así pues, introduciremos la lista de palabras que estamos manejando en el campo Palabra o frase con tipo de Concordancia Amplia

En cuanto a los resultados, ahora solo nos interesa la primera sección de los resultados, es decir, la de los términos de búsqueda.


458 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Pues bien, ahora debemos trasladar esta información a nuestro Excel para poder seguir trabajando en él. Recuerda que es importante elegir únicamente la lista en la que ya estábamos trabajando.

No puedes ver al mismo tiempo el volumen de búsquedas locales y globales para cada palabra clave. Tienes que elegir entre ver el volumen global (todos los países e idiomas) o segmentar por países/idiomas.

Por lo tanto, no atenderemos a las ideas para palabras clave que nos ha vuelto a proporcionar la herramienta, ya que ahora no queremos ampliar esta lista de palabras.

Añadiremos esta información a nuestra hoja de Excel, por lo que ya tendremos los volúmenes de búsqueda en concordancia amplia. Fíjate.


459 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Además, he eliminado los valores de la columna competencia porque vamos a obtener este detalle de otra forma más útil para el cálculo del KEI.

• Filtrar según el número de búsquedas exactas

De cara al trabajo en SEO se hace imposible optimizar una web para muchas palabras clave, además de que normalmente no valdrá la pena.

Esto significa que debemos filtrar la lista de palabras atendiendo al número de búsquedas que se realizan, ya que aunque podríamos tener poca competencia en alguna determinada palabra, si esta se busca muy pocas veces, realmente no valdrá la pena realizar el esfuerzo con ella.

Aquí es importante la intuición y experiencia del profesional SEO, ya que deberá establecer un filtro a partir del número de búsquedas. Un filtro habitual es el de que solo se atenderá a aquellas palabras que tengan, al menos, 1000 búsquedas mensuales locales en concordancia Amplia.

Es decir, que vamos a aplicar el filtro a través de la columna E de la hoja de cálculo de la figura anterior.

De esta forma, se ha reducido la lista a únicamente 10 palabras, como se indica en la barra de estado de Excel.


460 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Entendemos, por lo tanto, que no vale la pena realizar esfuerzos en SEO para las otras palabras, lo que no significa que no las utilicemos para los anuncios SEM.

Además de este filtro por volumen de búsqueda, también es adecuado estudiar cada una de estas palabras que han quedado y eliminar aquellas que no consideremos relevantes para nuestro sitio web. Se trata, por lo tanto, de un filtro subjetivo que se puede aplicar o no, a partir del conocimiento que hayamos adquirido sobre la empresa o sitio web.

Por ejemplo, sí en la lista anterior nos hubieran aparecido “coches de segunda mano de Alemania”, podríamos eliminar estas palabras si la empresa no importa este tipo de vehículos

NOTA: Recuerda que esto es una decisión subjetiva que debe realizar el profesional SEO a partir del conocimiento que ha acumulado sobre su empresa o sitio web.

Para reducir la lista anterior, calcularemos el índice KEI de cada una de ellas.

• Calcular la competencia de las palabras clave

Teniendo el volumen de búsquedas de cada palabra, únicamente nos queda obtener la competencia de cada una de ellas para poder calcular los respectivos índices KEI y poder elegir con más criterio las palabras clave que realmente nos interesan.

Vimos que Google AdWords nos facilitaba el valor de la competencia como un número entre 0 y 1. Realmente ese valor solo nos sirve para comprender qué palabra tiene más o menos competencia pero no nos permite calcularla de forma absoluta.

Pues bien, una forma sencilla de obtener esa competencia es simplemente ver el número de resultados que nos proporciona Google para cada una de esas palabras.

Es un procedimiento sencillo aunque costoso si tenemos una lista larga de palabras clave.

Por ejemplo, realicemos una búsqueda para la palabra clave: coches baratos de segunda mano.


461 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Google nos indica que hay alrededor de 1.280.000 resultados para esta palabra clave. Es cierto que puede que este valor no refleje realmente la competencia que existe para esta palabra clave, pero es una posible aproximación y es la que vamos a utilizar para nuestros cálculos.

10. Comandos de búsqueda avanzada de Google

Conoces ya los comandos de búsqueda avanzada de Google? No nos engañemos, a pesar de que buena parte del éxito de este buscador reside en su sencillez y simpleza lo cierto es que se trata de una herramienta muy compleja.

La información que nos aportan las búsquedas normales por lo general suele ser suficiente. Sin embargo, si requerimos información específica posiblemente necesitaremos mayor precisión. Los comandos de búsqueda avanzada de Google son unos operadores que nos ofrecen el nivel de segmentación que necesitamos.

• La búsqueda exacta de Google.

Si la búsqueda genérica no te ofrece el nivel de precisión que deseas puedes utilizar la búsqueda exacta. Tan sólo tienes que escribir tus búsquedas entre comillas. Si, por ejemplo, queremos información sobre un cursoo en SEO y SEM, usando este comando (“curso en SEO y SEM“) Google nos devolverá sólo aquellos valores que contengan la frase exacta ignorando resultados como, por ejemplo, posicionamiento SEO.

• El comando asterisco (*).

Este comando es usado como comodín en la búsqueda exacta. Por ejemplo, si buscamos “curso en SEO *” Google nos devolverá resultados que contengan la frase exacta sustituyendo el asterisco por otras palabras clave.


462 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• El operador site:dominio.

Este operador de búsqueda avanzada de Google nos devuelve todas las páginas que el buscador ha rastreado en un dominio determinado. Por sí sólo no nos aporta mucha información pero podemos añadir una determinada keyword o una cadena de palabras y Google nos mostrará sólo las páginas de ese dominio que contengan los términos especificados.

Por ejemplo, si queremos buscar información sobre el Master en Marketing online de IEBS podemos ahorrarnos esfuerzo en la búsqueda indicando site:iebschool.com master marketing online . Google nos devolverá sólo las páginas que contengan estos términos.

• Los comandos allintitle: e intitle:

Intitle:palabras clave nos devuelve aquellos resultados que contienen en su etiqueta title una, varias o todas las palabras que hemos indicado. Por ejemplo intitle:curso en SEO y SEM nos ofrecerá aquellos resultados que contengan en el título los términos curso en SEO Y SEM pero también resultados que contengan combinaciones entre ellas: SEO y SEM; curso en SEO etcétera.

Sin embargo, el operador allintitle:palabras clave nos devuelvolverá los resultados que contengan todas las palabras clave que hayamos especificado en el title. En el ejemplo anterior Google nos devolverá sólo aquellas búsquedas que contengan todos los términos curso en SEO y SEM. Este operador es muy útil a la hora de inferir el nivel de competencia que va a tener una determinada keyword.

• Los operadores allinurl: e inurl:

Bastante parecido al operador anterior, el comando de búsqueda avanzada inurl:palabras clave nos devuelve los resultados que contienen en la URL una, todas o varias de las palabras clave que hayamos indicado.

Por su parte allinurl:palabras clave devuelve los resultados que contienen en su URL absolutamente todos los términos que indiquemos. También nos proporcionará una idea sobre el nivel de competencia que hay para una búsqueda determinada.

• Los comandos allinanchor e inanchor:

Inanchor:palabras clave nos ayudará a conocer los resultados que reciben enlaces entrantes con una, varias o todas las palabras de las que hayamos señalado en el anchor text (los textos del enlace).

Alinanchor: palabras clave es bastante similar al anterior pero se diferencia en que el anchor text debe contener todos los términos que indiquemos.

Así pues, el siguiente paso es ir completando la hoja de cálculo de Excel con el valor de la competencia que obtenemos a partir de las búsquedas en Google.


463 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Ahora ya estamos en disposición de calcular los índices KEI y elegir adecuadamente qué palabras clave vamos a utilizar en el posicionamiento SEO.

11. Calcular el índice KEI

Como hemos indicado ya en más de una ocasión, para el trabajo en SEO nos interesan palabras con buen volumen de búsquedas y baja competencia.

Pues bien, esa relación es la que permite determinar el índice KEI de las palabras clave.

La fórmula más extendida para calcular el KEI de una palabra clave es:

Vemos que el volumen de búsquedas se eleva al cuadrado, ya que el objetivo es dar más importancia a dicho valor en contra del valor de la competencia.

Podemos emplear fórmulas alternativas si utilizamos los operadores allinurl, allintitle o allinanchor para calcular el valor real de la competencia.

Por ejemplo:

Ahora podemos ordenar según la columna del valor KEI. Lista de palabras clave ordenadas según el valor del KEI utilizando la fórmula básica:


464 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

En ocasiones si los valores obtenidos para los índices KEI son muy altos, podemos calcular la raíz cuadrada de esos valores para que sean más manejables.

En cualquier caso, se entiende que cuanto mayor sea el valor del KEI, más adecuada será la palabra para los trabajos en SEO.

En igualdad de condiciones, deberemos elegir las palabras con mayor índice KEI.

Módulo 4: Búsqueda y Procesamiento de Datos Tema 4: SEO on Page

465 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

TEMA 4: SEO ON PAGE

1. Introducción

Pues es un término Inglés que utilizamos para referirnos a las optimizaciones que puedes hacer en tu página (On Page = En Página)

Es decir, todo lo que depende directamente de ti, ya que eres el que controla tu web.

¿Y qué es lo que optimizas?, lo que te interesa sobre todo es conseguir que el contenido de tu web resulte lo más “agradable” posible para los buscadores.

Para entendernos podríamos decir que, mediante el SEO “On Page”, vas a intentar “explicarle educadamente” a Google cual es el propósito de tu página.

Y por favor fíjate en que digo “educadamente”, si te pasas Google dejará de ser tu amigo...

¿Pero es que Google no sabrá él solito “de qué va" mi página?

Lo cierto es que Google va a clasificar tus páginas, quieras o no, lo necesita para que las búsquedas funcionen correctamente.

Y aunque no siempre vas a convencerlo de que acepte tus “explicaciones”, si las omites o lo haces de forma incorrecta, puede optar por clasificarte (es decir, posicionarte) en unas búsquedas que no son las que deseas.

Resumiendo: hay que ayudar a Google a que te encuentre y convencerlo de que eres quien dices ser (o quien te interesa ser). Y eso se logra mediante el SEO on Page.

Para que tu página salga en los resultados los robots de Google deben encontrarla y clasificarla, es decir indexarla

Estos “robots” (o “bots”) son programas automatizados que leen, extraen y archivan el contenido de las páginas.

Su misión es recorrer Internet rastreando todos los enlaces que puedan encontrar, con el objetivo de localizar páginas nuevas y re-visitar las que ya están indexadas por si tienen contenidos nuevos.

Para los matemáticos: robot no encuentra página = página no sale en Google.


466 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Así que tienes que hacer todo lo posible para que los bots encuentren y analicen tu página lo más fácil y rápidamente posible.

Cuando un bot llega a tu página “lee” (indexa) todo el contenido (texto, imágenes, enlaces, código…) y lo almacena en una gigantesca base de datos.

Más tarde esa información será analizada para determinar el nicho al que pertenece tu página, y la relevancia que tiene dentro de él.

Los contenidos de calidad son esenciales para el SEO On Page, aquel que es útil para tus visitantes, con el que interactúan y que les encanta compartir, es necesario para un posicionamiento a largo plazo.

Los buscadores analizan tu contenido y los utiliza para hacerse una idea de lo relevante que es tu página comparada con otras que tratan los mismo temas.

Con la ayuda de un buen Análisis de Palabras Clave puedes crear contenidos más optimizados o mejorar a los que ya tienes.

Porque una de las cosas buenas que tiene la optimización On Page es que puede hacerse en cualquier momento, antes o después de la publicación del contenido.

Cuando escribas tus contenidos hazlo teniendo en cuenta qué es lo que te interesa conseguir

Dentro de las limitaciones de tiempo y recursos lógicas intenta siempre crear contenido de calidad y único.

No te limites a copiar lo que ves en o otras webs, porque tarde o temprano Google se dará cuenta

Y si no lo hace se darán cuenta tus visitantes, y no conseguirás que regresen.

Piensa que atraer visitas sólo es una parte del puzzle, una vez en tu web debes convencerlos para que se queden, y más importante aún, para que regresen en busca de más.

Idealmente deberías crear contenido de calidad y único, pensando no sólo en atraer el máximo número de visitantes "sean los que sean", sino aquellos que realmente puedan beneficiarse con lo que ofreces.

Después de lo anteriormente expuesto, me atrevo a darte unos consejos para optimizar el Contenido para el SEO On Page

• Escoge la mejor Frase Clave posible para cada una de tus páginas, y desarrolla tu contenido alrededor de ella. (se posiciona mejor con contenidos extensos).


467 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• El contenido debe ser atractivo y sobre todo útil para el visitante. “Publicar por publicar”, sin un objetivo concreto, puede ayudarte a posicionar tu página, pero no a fidelizar visitantes que regresen a tu web a por más contenido útil.

• Debe ser único. En primer lugar porque es más fácil posicionarte con contenido original y en segundo porque a nadie le gusta leer “lo mismo” (o una “variación de lo mismo”) que ya ha visto en docenas de webs.

• No te limites a llenar la página con tus Frases Clave, escribe con naturalidad.

• Incluye al menos una imagen y descríbela adecuadamente, utilizando las etiquetas <Alt >y <Title> .

• Un truco que funciona en ocasiones es incluir algún vídeo alojado en el mismo dominio: a Google le gustan los contenidos multimedia.

2. Estructura tu web para mejorar tu SEO

Una web bien organizada resulta más útil para los visitantes y para los buscadores.

En general evita crear interfaces confusos, con menús y submenús, muchas categorías, etc.

Mira tu web con ojos críticos y pregúntate: ¿sabría un recién llegado qué hacer nada más llegar? . Si "no hay nada que hacer" o demasiadas opciones corres el riesgo de que se marche por donde ha llegado.

La forma de organización tus contenidos en páginas, categorías, etc. depende en gran parte del sistema de publicación que hayas escogido.

Por ejemplo: si utilizas WordPress podrías organizar los artículos mediante su sistema de categorías, y si has creado tu web con HTML hacerlo mediante subdirectorios.


468 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Una web bien estructurada es beneficiosa para el SEO

En mi experiencia el tipo de organización o estructura que suele ser más beneficiosa para el SEO es la estructura jerárquica piramidal (o silo).

Este tipo de estructura en forma de árbol o pirámide te permite encaminar más fácilmente a tus visitantes y llevarlos hacia donde te interesa más, que suelen ser las "Landing Pages"

Landing Page es un término en ingles, cuya traducción al español da una idea de su significado: es una “Página de Aterrizaje“, en realidad una “pagina de llegada“, una página a la cual llegamos después de hacer click en un banner o en algún anuncio - donde quieres que se lleve a cabo alguna acción (compra, suscripción, etc.)

• Cuanto más sencilla y mejor conectada sea la estructura de tu sitio,

más accesibles serán sus páginas y más fáciles de indexar.

• Las páginas de niveles inferiores no deberían quedar demasiado alejadas de las superiores para facilitar la indexación y las visitas.

• Teóricamente puedes crear una estructura tan profunda como lo necesites, siempre que las páginas estén correctamente enlazadas entre sí, y no haya un recorrido demasiado grande (muchos clicks) entre ellas. Lo ideal es que todas las páginas se encuentren como máximo a dos clicks de distancia de la página principal.

• Independientemente del sistema que utilices no intentes "insertar" la mayor cantidad de Palabras Clave posibles en la URL, puedes ser penalizado por SPAM.


469 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• En la URL separa tus Palabras o Frases Clave con guiones "-". Por ejemplo para "Comprar coches de ocasión" utilizar "comprar-coches-ocasion".

• Excepto casos muy puntuales (una biblioteca por ejemplo) no es aconsejable usar fechas u otro sistema de clasificación parecido en tu URL.

Enlaces Internos

Los enlaces internos, son aquellos que apuntan a páginas dentro de tu propia web, también puede ayudarte a posicionar.

Y además los controlas tú, por lo que puedes cambiarlos en cualquier momento y hacer con ellos todos los experimentos que quieras.

Te ayudan en mejorar el posicionamiento pues favorecen la interacción del usuario y hacerle más fácil navegar por tu web.

Si en una de tus webs tienes una página que ha conseguido una gran autoridad a base de enlaces y menciones utilízala para enlazar a otras páginas internas y ayudarles a posicionarse.

Y por si fuera poco los enlaces internos son una gran ayuda para conseguir, que tanto tus visitantes como los buscadores, descubran nuevas páginas relacionadas dentro de tu web.

Cuando Google llega a una de tus páginas, además de leer el contenido e indexarlo, comienza a seguir los enlaces internos que apuntan hacia otras páginas.

Por eso es importante enlazarlas entre sí de forma que todas ellas puedan ser visitadas e indexadas.

• Enlaza a tus páginas internas utilizando Palabras Clave en el texto ancla.

• Enlaza sólo con otras de tus páginas que tengan relación con el tema del que trata tu artículo.

• Puedes enlazar a una página que te interese potenciar al final de cada artículo, en la barra lateral, etc.

• Los menús conforman la estructura visible de tu web: el menú principal debería dar acceso a tus categorías o secciones.

• Todas las páginas deberían incluir tu menú principal.


470 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Enlaces de navegación

Los enlaces de navegación son una línea de enlaces internos ubicados en la parte superior o inferior y que permite a los usuarios ir a secciones visitadas con anterioridad o a la página de inicio

Enlaces Externos

Los enlaces externos son aquellos que se dirigen hacia otras páginas fuera de tu web.

Aunque hay opiniones en contra de esta práctica, argumentando que al hacerlo se diluye el PageRank de tu web, mi opinión es que proporcionan valor añadido al visitante y esto es un signo positivo para Google.

No enlaces a webs cuyo contenido o reputación pueda ser considerado como SPAM o traten temas alejado de tu temática.

Enlaza a páginas que tengan relación con tus contenidos y que proporcionen recursos o información adicional.

3. Dominio y URL

Dominio

Es el nombre que ponemos a nuestra página web (ejemplo: neserideas.com) para identificarla como única en Internet. Si no tuviéramos este sistema, tendríamos que acceder a las páginas web con las direcciones IP del nodo (ejemplo: http://192.0.32.10/)

La diferencia entre el nombre de dominio y URL radica en que la URL es una secuencia de carácteres que se usa para nombrar recursos de Internet para su identificación y localización (ejemplo: imágenes, vídeos, presentaciones, documentos de texto…). La URL la creó Tim Berners-Lee ante la necesidad de

http://192.0.32.10/

http://es.wikipedia.org/wiki/Tim_Berners-Lee


471 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

distribuir e intercambiar información acerca de sus investigaciones en Internet. También es el padre del lenguaje HTML y el protocolo HTTP. Para ver la diferencia de una manera más clara tenemos el siguiente ejemplo:

URL: http://www.neserideas.com/diseno-web.html

Nombre de Domino: neserideas.com

Dirección URL

La dirección (URL) de tus páginas juega un papel importante en tu SEO on Page, principalmente de cara a Google.

Pero cada vez más los usuarios también se fijan en las direcciones URL para tomar decisiones.

Si una dirección parece "sospechosa", o no describe adecuadamente lo que se menciona en el título, tiene muchas posibilidades de perder clicks.

Si trabajas directamente con HTML, el lugar donde guardes tus páginas determinará su dirección.

Si guardas el archivo "prueba.html" en el directorio raíz su dirección será "tudominio.com/prueba.html"

Si trabajas con WordPress la URL se genera cuando guardas la página.

Pero ten cuidado porque WordPress genera la dirección automáticamente teniendo en cuenta el título que has puesto, y eso no siempre es lo que quieres.

Por ejemplo: si el título de tu página es "El mejor artículo seo y sem en 2015" WordPress creará la URL "el-mejor-articulo-seo-y-sem-en-2015".

Pero sería mucho mejor cambiarlo por "mejor-articulo-seo-sem-2015"

Afortunadamente puedes editar la dirección de tus páginas fácilmente:

Se pueden conseguir beneficios SEO cuando encadenas términos en tu dirección URL

Hablo de, por ejemplo, incluir términos que ayuden a clasificar tu página mediante categorías, directorios, etc. Algo así como "tudominio.com/salud/adelgazar/piernas", "tudominio.com/salud/adelgazar/muslos", etc.,

http://www.neserideas.com/


472 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

A menos que sea indispensable evita utilizar fechas o números en la URL ¿Porqué? Evitarás que tus artículos parezcan obsoletos.

Intenta que tus URL sean cortas y "resuman" el contenido de la página. Las URL largas o con caracteres o parámetros como "papseo.es/p=113?&var" pueden parecer sospechosas y conseguir menos clicks.

No satures de Keywords tu URL. No hagas algo así: " papseo.es/mejor-seo-para-seos"

4. El título de la página

Al margen de todo lo que puedes hacer para optimizar tu sitio en buscadores, no hay nada más importante que la etiqueta de título.

Si los títulos de tus páginas no están bien escritos, difícilmente conseguirás tráfico. De hecho, con un mal título puedes perder visibilidad en las búsquedas.

La etiqueta de título es fácil de optimizar y suele producir cambios en poco tiempo, por lo que no deberías desestimarla en tu estrategia SEO.

A continuación te explico todo lo que necesitas saber.

La etiqueta de título o title tag es un fragmento de código HTML situado al comienzo de la sección <Head> del código de una página web.

Su aspecto es similar a este:

<title>Este es el título de la página</title>

Este código indica el nombre descriptivo de la página web y aparece en la pestaña del navegador.

Si utilizas un gestor de contenidos o CMS probablemente sea lo primero que introduces al crear una nueva página. Se trata de un campo señalado como título de página, título del documento o simplemente título.

Hay 3 razones fundamentales que lo hacen tan importante:

Influye en la visibilidad – Los buscadores prestan especial atención a las palabras que aparecen dentro de la etiqueta de título, de modo que si colocas una palabra en el título de la página, probablemente obtengas una posición mejor que otra página que no la tenga..

Influye en las visitas – El título suele ser el texto de enlace que aparece en la página de resultados del buscador, lo que tiene una gran influencia en


473 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

las visitas junto con la meta descripción. Un título pertinente y atractivo tiene más posibilidades de recibir clicks que otro que no lo sea.

Influye en la difusión – No sólo los buscadores emplean la etiqueta de título en sus resultados, sino que muchas redes sociales también la usan como texto de enlace. Si es buena, contribuirá a que otros usuarios hagan click y finalmente compartan la página.

Por todo esto entenderás que tener buenas etiquetas de título no sólo es importante, sino que es imprescindible.

Crear una etiqueta de título que atrae tráfico

Para sacarle todo el partido a la etiqueta de título, ésta debe describir el contenido de la página de forma fiel, clara y concisa.

• Incluye palabras clave pertinentes

La etiqueta de título es el lugar más importante para poner tus palabras clave. De hecho, si sólo pudieras usar tus palabras clave en un sitio, debería ser éste sin lugar a dudas.

Como hemos visto, los buscadores usan las palabras de la etiqueta de título como señal para identificar las páginas más apropiadas para la consulta de usuario. Por lo que si introduces en ella palabras clave, tus posibilidades de aparecer en los resultados serán mayores.

Ahora bien, esto no significa que debas “atestar” los títulos de palabras clave, ni tampoco usar términos imprecisos para captar más visitas. el usuario que llega a tu sitio guiado por un título engañoso acaba por rebotar, llevándose consigo una imagen negativa.

• Usa la estructura adecuada

Hay 2 formas de optimizar el título de una página web según las mejores prácticas:

Palabras clave principal y secundaria | Nombre del sitio

Nombre del sitio | Palabras clave principal y secundaria

Utilizar una u otra depende de un par de cosas; por un lado, de la dificultad que ofrece la palabra clave para la que quieres posicionarte, y por otro, de si tu objetivo es potenciar la imagen de marca.

Las palabras situadas a la izquierda del título ejercen más peso sobre el buscador. Entonces, si compites por un término muy disputado, lo más efectivo es colocar la palabra clave en primer lugar y dejar el nombre del sitio al final.

En cambio, si persigues un término poco competido y el nombre de tu sitio puede marcar la diferencia en la tasa de clicks, es mejor dejar la palabra clave


474 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

en segundo lugar. Aunque con esta estructura las palabras clave ejercerán menos peso.

Mi recomendación personal es que siempre uses las palabras clave al principio y dejes el nombre del sitio al final. Si un día tienes una marca poderosa ya tendrás tiempo de plantearte la segunda opción.

En cuanto a los separadores, los más comunes son “-“, “:” y “|”, aunque puedes usar otros si facilitan la lectura.

• Limita la longitud

Siempre debes medir la longitud que das a la etiqueta de título. ¿Cuál es la razón? Los buscadores disponen de poco espacio en sus páginas de resultados, por lo que un texto demasiado largo aparece cortado, estropeando el mensaje que quieres transmitir al usuario.

Afortunadamente puedes prevenir el recorte de los títulos si les das una longitud máxima de entre 50 y 65 caracteres. Este largo es suficiente para no llevarse sorpresas, aunque en realidad Google no aplica un límite basado en caracteres, sino en píxeles.

• Comprobaciones esenciales

Si hasta aquí has seguido las recomendaciones que te he dado, problemente tengas entre manos una buena etiqueta de título. Pero para asegurarte de que obtienes la mejor versión posible, y de que ésta trabaja por tí en los buscadores, es bueno que hagas algunas comprobaciones antes de darla por buena:

¿Has incluido palabras clave? – Es importante que al menos tu palabra clave principal aparezca en el texto de la etiqueta. Cuando más al principio mejor, pero sin forzar.

¿Es inferior a 65 caracteres? – Como hemos visto, un título demasiado largo aparece truncado en los buscadores, por lo que controlar el largo en caracteres o píxeles es buena idea.

¿Está libre de erratas? – Asegúrate de que no has cometido ningún error al teclear el texto, ya que esto podría echar por tierra todo tu trabajo. Si tu gestor de contenidos o CMS genera los títulos automáticamente, vigila que lo esté haciendo bien.

¿Harán clic? – Cuando tienes muchos competidores es fácil que todas las páginas tengan un título parecido en la página de resultados de búsqueda. Para conseguir que el usuario haga click en la tuya y no en la de otro, el título debería distinguirse lo suficiente y ser capaz de atraer la atención del usuario.

5. Encabezados y texto de la página


475 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Las etiquetas de encabezado son elementos HTML que dan un valor de importancia al texto que contienen. Sucede con ellas lo mismo que con los títulos en un periódico. En la primera página habrá únicamente un encabezado – o titular – principal, que será el nombre del periódico. Eso es lo que más destacará. Pero en esa misma página habrá más títulos pequeños para las noticias. Incluso habrá una noticia destacada sobre el resto. Y lo mismo sucede con una página web: cada título tiene un peso y una importancia dentro de la página y hay que sacarle provecho para mejorar el posicionamiento SEO.

Etiquetas de encabezado html

Existen 6 etiquetas de encabezado que puedes utilizar para los titulares de tu blog y que van del h1 al h6. La etiqueta <h1> es la más importante y así sucesivamente hasta la <h6> , aunque seguirá teniendo algo de importancia.

Estas etiquetas las tienes que utilizar como títulos y subtítulos, ya sea dentro de una sección de tu web o de un artículo de tu blog.

Como con la mayoría de los elementos HTML, las etiquetas de encabezado tienen su etiqueta de apertura <h1> que será necesario cerrar </h1>. Entre ellas es donde se incluye el texto del titular.

Ej: <h1>Éste es el título html más importante</h1>

Además de darle una importancia u otra al titular, también suelen ir acompañados de un formato distinto de texto para que el usuario que está en la blog también entienda la importancia del título. Así, el h1 tendrá un tamaño grande de letra que irá disminuyendo hasta llegar al h6. Aunque realmente el h6 tampoco se utiliza mucho: yo sólo lo he utilizado con algún post largo con muchas subapartados. Y además tuve que ponerme a tocar el CSS porque su formato de texto destacaba más que otros encabezados de mayor importancia.


476 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Etiquetas de encabezado HTML en WordPress

Cuando estás escribiendo un post en WordPress no será necesario que edites el código HTML manualmente para los titulares ya que su editor de texto lo hace directamente.

Para especificar un encabezado de cualquier tipo en WordPress únicamente tienes que seleccionar el texto en cuestión, hacer click en “Párrafo” y seleccionar el tipo de título que quieres que sea. WordPress directamente lo convertirá en el “h” que tú le hayas indicado.

Etiquetas de encabezado y los buscadores

Utilizamos etiquetas de encabezado en lugar de escribir el texto más grande, entre otros motivos, porque indican a los buscadores de qué va la página. El título h1 le dice el tema principal que va a tratar, y continúa así con los demás títulos. Pero claro está, Google además de leer los titulares leerá el contenido de los párrafos, por lo que si pones un título no relacionado con el tema a tratar te pillarán.

Crea un título h1 con las palabras clave e intenta que además sea lo suficientemente atractivo como para que la gente haga click en tu enlace.

El principal consejo en el uso de los encabezados para mejorar SEO es que lo utilices como en las instrucciones de cualquier electrodoméstico.

Utiliza un único titular <h1> por página

Emplea tus palabras clave en el h1

• Emplea palabras clave en los demás titulares. Pero no te pases y no las metas con calzador.

• Sigue el orden de los titulares. Después del h1 va el h2 y así sucesivamente.

• En un blog, utiliza el h1 en la página principal para el nombre del blog. En las páginas individuales de los post el h1 debería ser el nombre del post y el nombre de la web podría ser un h2.

¿Dónde introducimos los encabezados h1 y h2?

Se encuentran en el contenido de la página en la que trabajamos, es decir, entre las etiquetas <body></body>.

Por ejemplo


477 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

<body>

<h1>Título con la palabra clave</h1>

Texto

<h2>Subapartado con una palabra clave de menor importancia y para la que no consideramos relevante la creación de una nueva página</h2>

Texto

<h2>…</h2>

….

</body>

6. Las Etiquetas Meta

Las etiquetas meta o meta tags se usan normalmente para resumir el contenido de la página para buscadores y navegadores web. Es decir, describen la página para que pueda ser entendida por diferentes servicios web. También hay metaetiquetas destinadas a indicar a los robots cómo se desea que traten la página.

Dado que la información está dirigida a máquinas, las etiquetas meta no son visibles al usuario. Debes buscarlas en el código HTML de la página, dentro de la sección <Head>.

Su aspecto es similar a este:

<meta name=”nombre de la etiqueta” content=”contenido de la etiqueta”>

Las etiquetas meta más populares son description y keywords, aunque hay otras como robots, author y generator, entre otras. Todas ellas vamos a verlas aquí.

Etiqueta meta description

La etiqueta meta description es una etiqueta HTML como esta:

<meta name=”description” content=”Esta es la meta descripción de la página”>


478 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Se utiliza para describir brevemente el contenido de la página, y pese a que el texto no es visible en el navegador, lo utilizan los buscadores como resumen en sus páginas de resultados.

Esta etiqueta es muy inútil ya que sirve para:

Decirle al usuario de qué trata la página – Cuando un usuario hace una búsqueda en Google puede ver el texto de meta descripción en la página de resultados, lo que evita la necesidad de visitar la página para saber si es lo que está buscando. Si no rellenas esta etiqueta, o lo haces pobremente, dejas en manos del buscador la selección de un fragmento del texto de la página, lo que puede resultar en un texto de peor calidad que otro escrito por ti.

Atraer visitas desde el buscador – Una descripción es suficientemente buena no sólo informa al usuario de lo que le ofreces, sino que le da motivos para visitar tu página. La clave es adornar el texto para hacerlo más persuasivo. Eso sí, sin falsear ni exagerar.

Etiqueta meta keywords

La etiqueta meta keywords se utiliza para resumir el contenido de un documento en base a unas cuantas palabras clave (de ahí su nombre). Por ejemplo, si yo quisiera describir estos apuntes en una página con palabras clave utilizaría términos del tipo “etiquetas meta”, “meta description”, “meta keywords”, etc.

En los primeros tiempos del marketing en buscadores, las palabras que aparecían en la etiqueta meta keywords eran útiles para ganar relevancia y mejores posiciones en los rankings. Sin embargo, debido al abuso de palabras clave (conocido como keyword stuffing) los buscadores ya no les prestan atención, por lo que no tiene sentido seguir empleándolas.

Es bueno que sepas esto ya que algunos SEOs sin escrúpulos siguen vendiendo el trabajo de “optimización de meta keywords” como parte de sus servicios. Mi consejo si te encuentras con alguien que quiera cobrarte por esto es que salgas corriendo.

Su estructura es la siguiente:

<meta name="Keywords" content="palabras sueltas separadas por comas">

Pero, como Google la ignora haremos lo propio…

Módulo 4: Búsqueda y Procesamiento de Datos Tema 5: SEO off Page

479 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

TEMA 5: SEO OFF PAGE

1. Introducción

Cuando hablamos de la Popularidad SEO nos referimos a la cantidad de enlaces entrantes que se encuentra en otro sitio Web y que apunta hacia el nuestro. Lo cierto es que los buscadores no otorgan el mismo valor a todos los enlaces, es decir, algunos enlaces tiene más peso que otros.

Google mide la popularidad de una página Web mediante el PageRank. Este indicador o índice se basa en la estructura de vínculos de la página.

Requisitos que debe cumplir una página Web, para que su enlace hacia nuestro sitio Web, sea considerado de valor por los buscadores.

• Alta popularidad. A mayor popularidad de la página Web en cuestión, más valor tiene su enlace, es decir, más popularidad supondrá para nuestro sitio Web y mayor tráfico tendrá.

• Temática relacionada. Los enlaces entre las páginas Web con temáticas relacionadas son los más valorados por los buscadores. Pero paradójicamente estas páginas suelen ser nuestra competencia, por lo que es difícil conseguir que nos enlacen.

• Antigüedad. Los buscadores valoran positivamente la antigüedad del sitio web que nos enlaza. Además, le otorgan un valor añadido a la antigüedad del propio enlace. Se considera que la antigüedad óptima de un enlace comienza a partir del momento en que tiene un año de vida.

Objetivo de la Popularidad SEO

El objetivo final es el enlace, el camino pasa por la popularidad web, los elementos clave del proceso son los contenidos.

La popularidad SEO de un sitio web pasa por crear contenido original que hable del servicio/producto/empresa desde un punto de vista publicitario, comercial y promocional.

Este contenido luego hay que difundirlo en internet, enviarlo a sitios relevantes que aporten visibilidad y visitas. Internet se basa en enlaces, y los enlaces deben ser de calidad.

El plan de acción básico consiste en la creación de contenido relacionado con el tema, generación de contenido original y que luego se difunde en sitios de relevancia.

Finalmente la explotación de las redes sociales para aumentar el alcance del contenido generado.


480 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Para comprobar el PageRank de una página web, podemos utilizar la barra Google para Internet Explorer, que puedes instalar desde http://toolbar.google.com.

Hay otras alternativas, como la barra SEO Status Pagerank/Alexa para los navegadores Chrome y Firefox, como se puede observar en la imagen insertada a continuación.

En función del número de enlaces que recibe un sitio o página web, la barra Google presenta su PageRank, cuyo índice puede variar desde 1 (menos popular) hasta 10 (más popular).

Por ejemplo, la página de la imagen siguiente (Twitter) tiene un PageRank de 10, lo que quiere decir que es tremendamente popular.

PageRank: 10/10

http://toolbar.google.com/


481 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Ejemplos de sitios que han alcanzado gran PageRank, por supuesto son sitios de gran calidad y alcance para el desarrollo de la red en general:

facebook.com

http://www.facebook.com PR: 9

gmail.com

http://www.gmail.com PR: 8 Google.com

http://www.google.es/ PR: 7 dmoz.org

http://dmoz.org PR: 7

2. Enlaces Externos

La principal ventaja que nos aporta el SEO off page es que nos permite generar linkbuilding (construcción de enlaces externos) de calidad a nuestra web, por lo que:

• Aumentaremos la visibilidad de nuestra marca

• Mejoraremos el posicionamiento de nuestra marca en la mente de los navegantes

• Direccionaremos visitas de clientes potenciales a nuestra web, blog o landing page

• Captaremos a clientes potenciales

• Fomentaremos el boca a boca

• Mejoraremos el posicionamiento orgánico en el ranking de resultados que ofrecen los buscadores de nuestra web o blog

Eso sí, en el SEO Off page no vale todo para conseguir links a nuestra web.

Para hacer una estrategia de SEO off page que sea exitosa necesitaremos ser respetuosos y tener una estrategia bien pensada que esté acorde a los principios de nuestra marca y que no incumpla ninguna "norma" de los buscadores o del resto de actores que formarán parte de nuestra estrategia de SEO off page.

Hay 3 acciones principales que se deben cumplir en una buena estrategia de SEO off page:

• Tener una gran cantidad de número de enlaces

• Tener enlaces de gran calidad que tengan que ver con nuestro contenido

• Tener enlaces que mejoren nuestro PageRank y nuestro Link Juice.

http://www.facebook.com/

http://www.gmail.com/

http://www.google.es/

http://dmoz.org/

http://www.idearium30.com/marketing/posicionamiento

http://www.idearium30.com/12-errores-que-te-hacen-perder-visitas-en-tu-web-i82

http://www.idearium30.com/marketing/branding

http://www.idearium30.com/marketing/branding


482 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

¿Pero que es Link Juice?

Es la autoridad que transmite una página mediante un link. Google posiciona las páginas web en función de su autoridad y relevancia, esta se transfiere de unas páginas a otras a través de links, y esta autoridad transmitida es a lo que llamamos Link Juice.

Para entenderlo tenemos que entender una página web como un gran vaso de zumo (web) al que hacemos diversos agujeros (links) en la base. De esta forma, un vaso que tenga un agujero transmitirá todo su link juice a través de ese único agujero. Si tiene 10, cada agujero pasará un 10% del link Link Juice, y así sucesivamente.

Como norma es preferible tener pocos enlaces externos y de calidad antes que tener muchos enlaces externos y de poca calidad.

Los enlaces externos de poca calidad no solo no nos servirán a nivel estratégico, sino que además nos perjudicarán el posicionamiento orgánico de nuestra web en los buscadores e incluso podrá ser penalizada.

Si queremos aumentar el número de enlaces podemos realizar las siguientes acciones:

• Darnos de alta en directorios libres: hay infinidad de directorios libres que permiten introducir los datos de nuestras empresas: DMOZ, Zeal,.. Normalmente estos directorios, una vez hemos introducido los datos de nuestra empresa tardan un tiempo, incluso algunos meses en darnos de alta la empresa en el directorio. Pero la espera merece la pena ya que la presencia de nuestras empresas es estos directorios nos ayudarán a mejorar el posicionamiento de nuestra web en los buscadores.

• Colaborar en otros blogs externos a nuestra web: tendemos a asociar el crear contenido a algo que únicamente debe pasar en nuestra web o blog. Sin embargo, participar en blogs de otras personas o empresas nos permite llegar a

http://www.idearium30.com/la-mejor-estrategia-contenidos-palabras-clave-y-seo-i73

http://www.idearium30.com/la-mejor-estrategia-contenidos-palabras-clave-y-seo-i73


483 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

un nuevo tipo de público al que quizás no estábamos llegando. Además nos ayudan a generar links de calidad hacia nuestra web y a hacer estrategia SEO.

• Colaborar en foros temáticos: Los foros temáticos son de por si una gran fuente de información para muchos usuarios de la red. Por lo tanto, tener presencia en ellos nos ayudará a generar enlaces de calidad que repercutan positivamente en nuestro SEO. Además, nos ayudará a posicionarnos como expertos en la materia, ganando visibilidad y mejorando nuestro posicionamiento en la mente del consumidor.

• Tener presencia de calidad en las redes sociales: Hemos hablado en muchas ocasiones de las redes sociales: Twitter, Facebook, Linkedin, Youtube, Pinterest, Tumbrl, Flickr, Tuenti... Lo cierto es que hay que tener presencia en aquellas redes sociales de nuestra temática o donde esté nuestro público potencial. Pero no es suficiente con estar. Hay que tener presencia de calidad y eso implica utilizar a las redes sociales estratégicamente para difundir contenido de calidad que nos ayude a generar enlaces externos y visitas a nuestra web.

Lo cierto es que si trabajamos de manera estratégica el SEO on page y el SEO off page además de conseguir mejorar el posicionamiento orgánico de nuestra web o blog en el ranking de resultados de los buscadores, también conseguiremos atraer visitantes a nuestra web y mejorar la visibilidad y el posicionamiento de nuestra marca, y en definitiva, abrirnos un nuevo mercado que nos ayude a vender más y mejor sin tener que hacer grandes inversiones en publicidad.

3. Alta en directorios

Aunque es una práctica que aporta cada vez menos beneficios, y que puede ser peligrosa si no se lleva con cuidado, todavía ayuda a posicionar tu web.

La clave en este caso es publicar sólo en Directorios de calidad reconocida. Hay muchos Directorios de todo tipo, y es fácil encontrarlos, más en inglés que en español.

En los gratuitos normalmente basta con rellenar un formulario y esperar a que se apruebe nuestro enlace.

En los Directorios de pago el proceso es igual de sencillo excepto que debes realizar el pago en el momento de la inscripción.

Por último existen Directorios en las cuales entrar en gratis, pero que ofrecen mejores condiciones de visibilidad, enlaces promocionados, etc. si pagas una cuota.

El Directorio con mejor reputación y más conocido es Dmoz, (http://dmoz.org/) que aunque gratuito es difícil entrar porque todas las peticiones se revisan meticulosamente.

http://www.idearium30.com/las-compras-off-line-se-deciden-on-line-i90

http://www.idearium30.com/las-compras-off-line-se-deciden-on-line-i90

http://www.idearium30.com/por-que-el-cliente-no-me-ve-como-yo-quiero-que-me-vea-i80

http://www.idearium30.com/marketing/socialmedia

http://www.idearium30.com/fideliza-en-140-caracteres-i22

http://www.idearium30.com/sacale-partido-a-las-estadisticas-de-facebook-i88

http://www.linkedin.com/company/2393453?trk=tyah

http://www.idearium30.com/fans-followers-o-clientes-i34



http://www.dmoz.org/add.html

http://dmoz.org/


484 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• Evita los Directorios que no revisen manualmente los enlaces, ya que suelen ser terreno abonado para el SPAM.

• Busca Directorios que tengan algo que ver con la temática de tu web.

• Huye de los Directorios en los que veas SPAM.

• Encuentra directorios buscando "directorio mifraseclave".

¿Como me doy de alta en DMOZ?

El proceso es sencillo, solo te tomará un par de minutos, lo que si te tomará semanas es que logres aparecer en su base de datos, como vuelvo a indicar, cada sitio sugerido es analizado y agregado manualmente por un editor, lo que puede tomar un buen tiempo este proceso, pero al final de cuentas LO VALE. Sin más tiempo que perder pasamos a detallar el registro.

Paso 1. Para sugerir un sitio web en DMOZ primero debes ingresar aquí http://dmoz.org/ verás la pantalla anterior, en la parte inferior donde dice World elige el idioma

Paso 2. Una vez elegido el idioma, navega por la categoría que te corresponda recuerda que también existen sub categorías, por lo que te recomiendo navegar por cada una hasta que encuentres la indicada, en necesario resaltar que si no corresponde Dmoz dejará de lado tu petición.

http://dmoz.org/


485 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Paso 3. Cuando te encuentres en la categoría deseada, verás en la parte inferior la lista de sitios que han sido aprobados y es momento de dar click en Sugerir URL

Paso 4. Ahora solo ingresa tus datos correctamente haciendo caso al mínimo detalle, de lo contrario no serás aprobado.


486 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Paso 5. ¡Y listo! pero ten en cuenta el párrafo resaltado

4. Intercambio de Enlaces

Una fórmula muy extendida para obtener enlaces desde otros sitios web son los intercambios de enlaces: "tú me enlazas a mí y yo te enlazo a ti".

Aunque Google puede detectar este tipo de enlaces recíprocos e incluso restarles relevancia, siguen aportando notoriedad y PageRank, sobre todo si se realizan entre sitios web de la misma temática.

¿Y con qué sitios podemos intercambiar enlaces? ¿Qué debemos tener en cuenta?

Pues es un tema delicado, ya que deben ser sitios de calidad y de temática similar al nuestro. Además, el enlace externo que consigamos debe tener ciertas características: ser un enlace de texto (ni imágenes, ni generado dinámicamente con Javascript o algo parecido) y no debe incluirse el atributo "nofollow", ya que no serviría para conseguir PageRank.

Los enlaces que incluyen el atributo "nofollow" no sirven para el posicionamiento de la página a la que se enlaza, ya que se está indicando al buscador que no continúe con ese enlace. Es una forma de evitar trasladar PageRank a otra página si no lo queremos hacer. Por ejemplo, es muy típico utilizarlo en los comentarios de un artículo en un blog, ya que es uno de los lugares donde más spam se produce. Muchos propietarios de sitios web comentan los artículos simplemente para poder incluir un enlace a su sitio web sin ningún interés real en aportar algo.

Otro ejemplo de enlaces "nofollow" son los que aparecen en las páginas de la Wikipedia o de servicios tan populares como Twitter.

De esta forma se evita la inclusión de contenido spam.

Así deberían ser los enlaces externos que debemos conseguir:

<a href=”http://www.tublog.com/”>Anchor Text</a>


487 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

<a href="Nuestro sitio web" title="PalabrasClave">Palabras clave</a>

Si el enlace no es de texto, sino una imagen, se debe utilizar el atributo alt para incorporar las palabras clave que nos interesan:

<a href="Nuestro sitio web" title="PalabrasClave"><img src="...." alt="PalabrasClave"></img></a>

Fíjate que, en ningún caso, se tiene que utilizar el atributo

rel="nofollow" en el enlace, o no nos servirá de nada.

Lo mejor es conseguir enlaces incluidos en la parte de contenido de las páginas web. Tienen menos importancia los que aparecen en la cabecera, barras laterales o pie de página, ya que no parecen tan naturales.

Si se incluyen dentro del texto principal de la página, se entiende que se trata de enlazar a otra página relacionada y relevante para el asunto. Eso es lo mejor para el posicionamiento de esa otra página y es lo que debemos buscar siempre que sea posible para nuestro sitio web.

Además, si es posible, indica el texto del enlace, es decir, el Anchor Text. De esta forma podrás incluir las palabras clave que quieres potenciar con dicho enlace.

Los Anchor Text o textos ancla es un texto en el que guardamos un enlace hacia otra página de nuestro blog, o bien de otra web. Es decir lo podríamos definir como la “parte visible del enlace”. Por ejemplo si pincháis en la palabra que leéis a continuación “frases de cine” veréis como automáticamente os lleva a otra página de un blog de cine, pues este es el Anchor Text.

Es importante, sin embargo, no utilizar siempre el mismo Anchor Text, sino variarlo para que no se entienda como spam si recibimos muchos enlaces externos.

Si el enlace es recíproco, es decir, que nosotros también enlazamos a la otra página, debemos comprobar que lo conseguimos en las mismas condiciones que lo ofrecemos.

http://www.blogdecine.com/tag/frases-de-cine


488 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Desconfía de aquellos sitios que se ponen en contacto contigo con un mensaje de correo electrónico estándar sin ni siquiera mencionar el nombre de tu página o negocio.

Seguramente serán sitios que no te aporten nada aunque consigas enlaces desde ellos.

Compra de Enlaces

Hasta hace algunos años esta era una de las prácticas más habituales y más efectivas, y hasta cierto punto lo sigue siendo. El problema es que los enlaces pagados no le gustan a Google, porque sabe que son muy efectivos, y si te pilla te penalizará.

Los algoritmos de Google son cada vez hábiles a la hora de detectar patrones que delatan la compra de enlaces, así que ten mucho cuidado.

• NO te dirijas a los "grandes vendedores", o aquellos que se anuncien abiertamente.

• Contacta con webs con una Autoridad alta para negociar la compra de un enlace.

• Puedes ver algunos (no todos) enlaces de tu competencia buscando en Google "link:www.tucompetencia.com", aunque es más efectivo utilizar alguna Herramientas SEO especializada.

Pedir enlaces

Esta técnica es tan sencilla como su nombre indica, se trata de pedir que te enlacen de forma gratuita.

Si se contacta con la persona adecuada y tu página puede aportar valor suele producir resultados positivos.

Consejos para solicitar enlaces

Analiza la web a la que vas a pedir el enlace, asegúrate de que su temática es similar, y de que a sus visitantes les puede interesar la tuya.

Busca páginas que recopilen información sobre tu tema y que no sean o puedan llegar a ser tus competidores directos.

Si tienes una empresa pídele a tus clientes que te enlacen.

Busca páginas ó artículos en los cuales se mencione tu web, o una de tus páginas pero no se enlace a ella, y sugiéreles que te enlacen.

5. Enlaces que Penalizan


489 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

“Hacer trampas” para subir posiciones rápidamente en los motores de búsqueda puede llegar a ser tentador, pero engañar a Google no es tan fácil como parece. Para Google tu web es tan importante como las grandes que se te ocurran, y los robots, que son muy listos, están perfectamente programados para detectar las malas prácticas que se llevan a cabo en las páginas web para mejorar el posicionamiento.

Es mejor no caer en la tentación, ya que un intento de engaño puede provocar una bajada drástica de posiciones, con la consiguiente pérdida de dinero y tiempo. Imagina que Google penaliza tu tienda online, que es el principal canal de venta de tu empresa. Las consecuencias para la economía de tu empresa pueden ser devastadoras. Y recuperar el tiempo perdido te puede llevar semanas, o incluso meses, en el caso de que pelees en un mercado de alta competencia.

• Algunas de las razones por las cuales Google puede penalizar tu página web son:

• Compra-venta de enlaces con otros SEO.

• Intercambio masivo de enlaces entre dos webs

• Ocultar el texto en el código fuente de la web. Por ejemplo, escribir en blanco para que se solape con el fondo blanco de tu web. Tus lectores no lo leen, pero sí los robots de Google.

• Conseguir enlaces desde páginas web con dudosa reputación

• Duplicar contenidos en las páginas internas de nuestra web

• Copiar contenidos sin escrúpulos de otros sitios web. Google detecta si el contenido que subes es original o una copia barata de otro blog. Este robo es duramente penalizado por Google.

• Relleno de palabras clave (keyword stuffing). Consiste en repetir muchas veces una palabra clave hasta llegar al exceso, ya sea en el contenido o en los títulos, descripciones y encabezados de las páginas que componen nuestra web

6. Medios Sociales o Social Media

A estas alturas ya es evidente que las Redes Sociales ocupan una lugar cada vez más importante en el Posicionamiento.

Aunque todavía no tengan un peso determinante entre los factores de ranking Google se apoya en ellas para determinar el autor de un contenido y su autoridad en los temas que publica.

Podríamos decir que ahora, además del sistema "tradicional" de autoridad de página, tenemos un nuevo tipo de autoridad: la "autoridad de autor"


490 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Según diversas opiniones los contenidos que se comparten en Facebook son una de las señales sociales que está más asociada a ayudar para conseguir un buen posicionamiento.

Twitter por otra parte es una herramienta excelente para conectar con clientes y lanzar campañas virales de márketing y Google Plus está totalmente integrado en las búsquedas.

Pero no sólo son importantes las Redes Sociales para conseguir Autoridad y enlaces, también lo son para fidelizar o encontrar clientes y proporcionar información que complemente a la de tus páginas.

Crear y mantener una página de Facebook, una cuenta de Twitter y de Google Plus ha pasado a ser una tarea más para todo el que tiene un negocio y que quiere promocionarlo, pero normalmente no se considera el alto costo que supone crear y mantener una presencia coherente e influyente en estas redes.

Estos son algunos puntos aspectos a tener en cuenta para las Redes Sociales

No sólo existen Facebook, Twitter y Google Plus, hay cientos de Redes Sociales que pueden ser más o menos relevantes dependiendo de tu nicho de mercado y de su público objetivo.

Las Redes Sociales más representativas son:

• Twitter, Facebook, Google+, LinkedIn, Tumblr, Identi.ca, Plurk, Plaxo, Delicious, Flickr, Pinterest y Stumbledupon.

• Si tienes un negocio, o quieres promocionar un producto, una página de Facebook es muy útil para conectar con tus posibles clientes.

• Utiliza Twitter como canal de comunicación con tus clientes o clientes potenciales

• Utiliza los Hangouts de Google Plus para conversar con tus clientes y resolver dudas acerca de tus productos.

• Crea un perfil de Linkedin y conecta con tus compañeros, clientes y profesionales de tu sector. Es un excelente medio para descubrir ideas y compartir experiencias.

https://twitter.com/

http://facebook.com/

http://plus.google.com/

http://www.linkedin.com/

http://www.tumblr.com/

http://identi.ca/

http://www.plurk.com/

http://www.plaxo.com/

http://delicious.com/

http://www.flickr.com/

http://pinterest.com/

http://www.stumbleupon.com/

http://www.google.com/intl/es_ALL/+/learnmore/hangouts/

Módulo 4: Búsqueda y Procesamiento de Datos Tema 6: Contenidos difíciles de posicionar

491 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

TEMA 6: CONTENIDOS DÍFICILES DE POSICIONAR

1. Imágenes

Quizá no te hayas parado a pensarlo, pero las imágenes pueden generar enormes cantidades de tráfico desde los buscadores.

Alguien busca un producto en Google, un lugar, una receta, o una infografía, y ahí aparece el espacio que podrían ocupar tus imágenes.

Y no importa que el nuevo diseño del buscador reduzca la cantidad de visitas que puedes recibir. La oportunidad de ser visible y atraer tráfico siempre es interesante.

Además, la búsqueda universal muestra imágenes en la página de resultados de forma combinada. Esto significa que no es necesario buscar una imagen para encontrarla, puede aparecer en cualquier momento.

Por todo ello, es importante que aprendas a optimizar tus imágenes para los buscadores. Aquí encontrarás las 4 claves imprescindibles.

• Atributo Alt

• Nombre del archivo

• Contexto

• Tamaño del archivo

Atributo Alt

Pese a que la tecnología para el reconocimiento de imágenes ha avanzado mucho, los buscadores siguen teniendo problemas para interpretar el contenido de las imágenes. A día de hoy pueden reconocer letras, colores, e incluso caras, pero poco más.

Debido a ello necesitas usar el atributo Alt para describir tus imágenes.

El nombre de Alt viene de alternate text o texto alternativo, y es lo que utilizan los buscadores para saber qué es lo que muestra una imagen. También es el texto que utiliza el navegador cuando la imagen no se puede cargar junto con el resto del contenido de la página.

Supongamos que pones en tu web una vista de la Ciudad de las Artes y las Ciencias de Valencia. El código HTML de la etiqueta Alt sería:

<img src=”http://example.com/foto.jpg” alt=”Ciudad de las Artes y las Ciencias de Valencia” />


492 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

(En principio no necesitas preocuparte por el código, ya que la mayoría de los gestores de contenido permiten añadir la etiqueta fácilmente.)

La clave para crear buenas etiquetas Alt es:

• Describir fielmente el contenido de la imagen

• Incluir la palabra clave principal

• Ser conciso

Nombre del archivo

El nombre del archivo es un indicador del contenido de la imagen. Piensa que una imagen llamada “tarta-de-chocolate.jpg” probablemente muestre una tarta de chocolate.

Para optimizar el nombre debes intentar ser corto y descriptivo, y no es necesario que incluyas tanta información como en la etiqueta Alt.

Si te has fijado en el ejemplo del punto anterior, hemos llamado al archivo “foto.jpg” sin más. Sin embargo, este nombre genérico no trae ningún beneficio en los buscadores.

Para hacerlo más descriptivo, podríamos llamar al archivo de imagen “ciudad- artes-ciencias-valencia.jpg”. Con un nombre más específico tendremos más posibilidades de que el buscador entienda el contenido y así muestre la imagen en una posición más prominente.

Un buen nombre de archivo se caracteriza por:

• Representar el contenido de la imagen

• Incluir la palabra clave principal

• Ser muy conciso

• Utilizar guiones para separar palabras


493 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Contexto

Es muy importante que tus imágenes estén rodeadas de texto, así como que el texto esté relacionado con el contenido de la imagen. Con esto me refiero al pie de foto o leyenda, aunque también al texto que hay encima y bajo la imagen, encabezados y título de la página (en la medida de lo posible).

Ten en cuenta que si el texto que envuelve la imagen no tiene nada que ver, la relevancia para el buscador será baja. Así que cuanto más estrecha sea la relación existente entre la imagen y el contexto en el que se encuentra, mejor.

Tamaño del archivo

Lo ideal es que el tamaño del archivo sea lo más pequeño posible. De esta forma las imágenes cargan rápido, y eso es algo que premian los buscadores.

Pero el tamaño del archivo depende de 2 cosas:

• Las dimensiones de la imagen

• La calidad de la imagen

Si quieres una imagen de grandes dimensiones en un archivo pequeño, la calidad se verá afectada. Pero si lo que quieres es una imagen de gran calidad, no te quedará otra que reducir las dimensiones.

Este compromiso hace del JPEG el formato de imagen ideal para los buscadores, aunque también puedes emplear PNG y GIF si sirven mejor a tus propósitos.

A la hora de preparar tus imágenes:

• Usa JPEG para fotografías e imágenes en general

• PNG está más indicado para imágenes planas y/o con transparencias por ejemplo, logos

• GIF es ideal para imágenes animadas

• Emplea las dimensiones exactas que necesites (no confíes la reducción de las dimensiones al CMS puesto que carga la imagen completa para luego redimensionarla)

• La calidad JPEG media es más que suficiente para la Web

• Antes de subir imágenes a la web, es recomendable que las comprimas todo lo posible, sin que ello signifique comprometer la calidad. Para lograrlo, usa la herramienta online Compressor.io, servicio de compresión y optimización de imágenes gratuito, aunque puedes utilizar cualquier herramienta para este fin.

https://compressor.io/compress


494 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

2. Flash

En el posicionamiento SEO dicen que si hay algo que no se debe hacer, es construir sitios web en base a Flash, ya que si bien es un programa que hace maravillas en cuanto a diseño, pues permite crear miles de propósitos como animaciones e imágenes artísticas o videos interactivos, lamentablemente éste no cuenta con lo principal en la optimización SEO, el texto/contenido. Sin embargo, si se usa discretamente, Flash puede ser una excelente herramienta en el diseño y desarrollo web y por lo tanto, la optimización no debería verse totalmente perjudicada.

Como ya hemos dicho en reiteradas ocasiones, los motores de búsqueda para el posicionamiento SEO examinan el contenido, y Flash no lo tiene, por lo que difícilmente podría ser optimizado. Además, no cuenta con enlaces que permitan que las arañas de Google accedan a él. Asimismo, utilizando Flash hacemos que sea casi imposible poder acceder a enlaces externos y compartirlos, como sí lo permite el posicionamiento SEO con el código HTML.

De la misma manera, en un sitio web elaborado en base a imágenes flash, no se puede hacer la optimización SEO en las etiquetas, ni en el texto de anclaje. Por todo lo anterior, es muy difícil que el posicionamiento SEO logre inmiscuirse en los archivos Flash. Sin embargo, y aunque sigue siendo recomendable no usarlo en demasía, últimamente Google intenta “reconciliarse” en alguna medida con este programa.

Cómo lograr que SEO y Flash se enfoquen hacia el mismo objetivo

Google siempre está realizando mejoras en su sistema y en el último tiempo, está intentando lograr dar con el mecanismo idóneo para rastrear el contenido Flash. Para esto ya se han establecido patrones en el posicionamiento SEO, como por ejemplo entender que Flash no debe guiar la navegación en el sitio, sino que dicho contenido debe estar inserto en el código HTML.


495 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Asimismo, un sitio web no puede convertirse en un archivo de elementos Flash, por el contrario, cada uno de éstos tendría que estar contenido dentro de su propia página HTML. Del mismo modo, la optimización SEO establece que Flash solo debería ser usado para temas de diseño y contenidos de menor relevancia, mientras que para el texto de peso, el formato HTML es la mejor opción.

3. La libreria SWFObject

SWFObject es una librería de JavaScript que se encarga de implementar contenido Flash dentro de nuestros sitios, haciéndolo accesible desde cualquier navegador sin necesidad de tener algo más instalado.

Con este proyecto se busca unificar los métodos que actualmente existen para incluir contenido Flash, y de esa manera lograr un nuevo estándar en el desarrollo web para la incrustación de archivos Flash.

Uso de SWFObject

La librería ofrece dos maneras de poder añadir el reproductor de Flash en un sitio web. La primera es la clásica basada en etiquetas y se encarga de incrustar el Flash mediante contenido estático, por su parte el segundo método hace uso de JavaScript para cargar de manera dinámica el contenido evitando mecanismos que requieran activar algún control.

A continuación especificamos los pasos a tener en cuenta para utilizar SwFObject .

• Descargar la última versión disponible de la librería. Para ello puedes ir a su página de Google Code y descárgala, la página es http://code.google.com/p/swfobject/, y ahí puedes obtener el archivo del repositorio dando clic en la sección de “Downloads”.

• Una vez descargado el archivo nos disponemos a empezar con la codificación, para este ejemplo utilizaremos una estructura HTML sencilla a la cual le iremos añadiendo los cambios necesarios. El primer cambio al código se verá reflejado al crear una capa div dentro de nuestro diseño, este div será utilizado por SWFObject para incrustar el archivo o para mostrar un contenido alternativo, como un mensaje en caso de que el navegador no soporte Flash.

• El código irá incrustado dentro de las etiquetas “body” como el siguiente:

<div id="flashLaWebera">

<p>Lo sentimos, tu navegador no soporta Flash.</p>

</div>

• Después, dentro de nuestras etiquetas “head”, debemos añadir la librería que acabamos de descargar y para ello recurrimos al siguiente código:

<script type="text/javascript" src="swfobject.js"></script>

http://www.lawebera.es/manual-flash/www.lawebera.es/manual-flash/insertar-swf-flash-en-html-valido-accesible.php

http://code.google.com/p/swfobject/


496 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• El siguiente paso consiste en incrustar el archivo Flash dentro de nuestro contenido, pero utilizando el mismo JavaScript. Para esto, haremos uso de la función “embedSWF” de la librería.

• Dicha función cuenta con una serie de parámetros, dentro de los cuales cinco son de uso obligatorio para el correcto funcionamiento de la aplicación.

El primero de ellos es el nombre del archivo que queremos incrustar, después viene el nombre del elemento donde lo vamos a añadir, en este caso es “entrada” ya que es el nombre que le dimos a nuestro div, los siguientes dos parámetros son para especificar el ancho y alto del reproductor y finalmente esta la versión de Flash Player a utilizar.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<title>Agencia de viajes | Travel World</title>

<script type="text/javascript" src="swfobject.js"></script>

<script type="text/javascript">

swfobject.embedSWF("animation.swf", "entrada", 500, 400, "11.0.0");

</script>

</head>

<body>

<div id=" entrada ">

<p> Lo sentimos, tu navegador no soporta Flash </p>

</div>

</body>

</html>

Un último apunte: no utilices frames o marcos en tu sitio web, ya que los robots pueden confundir la página principal con una página vacía al no poder acceder a los frames de contenido.

2. El archivo Robots.txt


497 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

El fichero robots.txt es un fichero que situaremos en la raíz de nuestro sitio web, y sirve para indicar a los diferentes buscadores (robots web o arañas), qué ficheros deben o no deben de rastrear para tenerlos indexados.

Si no tenemos este fichero, pues nos creamos un fichero de texto en la raíz de nuestra web con el nombre robots.txt y escribimos las siguientes líneas:

User-agent: *

Disallow:

Con estas sencillas líneas indicamos que todos los robots (User-agent: *) puedan rastrear cualquier carpeta (Disallow:)

Si por el contrario queremos configurar el fichero para evitar que los robots rastreen alguna carpeta o fichero, por ejemplo si tenemos la carpeta administrador que no queremos que sea rastreada, simplemente escribiremos lo siguiente en nuestro archivo robots.txt

User-agent: *

Disallow:/administrador/

Escribiremos una nueva linea por cada carpeta o archivo que queramos indicar que no sea rastreado por los buscadores.

Ejemplo:

User-agent: *

Disallow:/imagenes/

Disallow:/ejemplo/no-rastrear/

Disallow:/otro-ejemplo/index.php

Disallow:/otro-ejemplo/carpeta/

Hay que tener en cuenta que los robots diferencian entre mayúsculas y minúsculas por lo tanto tenemos que escribir el nombre de la carpeta con el nombre exacto.

Otra característica importante a tener en cuenta es que en el fichero de robots.txt podemos indicar donde tenemos ubicado el archivo sitemap.xml, esto es bastante útil así que recomendamos ponerlo. Veamos un ejemplo

User-agent: *

Disallow:/js/

Disallow:/ejemplo/no-rastrear/

sitemap: sitemap.xml

sitemap: http://www.dominio.com/sitemap.xml


498 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Los robots buscan el archivo robots.txt cuando empiezan a explorar el sitio web y, si no lo encuentran, asumen que no hay ninguna restricción que cumplir.

Sin embargo, si encuentran uno, deben seguir las indicaciones. Por ejemplo, esto sería conveniente para evitar indexar contenido duplicado (HTML y PDF), archivos Flash, etc.

Meta robots es una etiqueta en HTML que se utiliza para dar instrucciones a los buscadores. Al igual que el archivo robots.txt, se puede utilizar para impedir el rastreo e indexación de una página web, sin embargo, hay una diferencia.

Mientras que el archivo robots.txt pide a los buscadores que no rastreen una página (y por tanto que no la indexen), la etiqueta meta robots les da permiso para rastrear una página, pero no almacenarla en su índice. Esto tiene una ventaja importante a nivel de SEO, pero para que lo entiendas te voy a poner un ejemplo:

Supongamos que tenemos 2 páginas, las cuales no queremos que aparezcan en el índice de Google. Una la bloqueamos mediante el archivo robots.txt y la otra con la etiqueta meta robots.

Esto es lo que pasará:

La página bloqueada con el archivo robots.txt no será rastreada y, en principio, tampoco será indexada. El contenido de la página será invisible el buscador, incluidos los enlaces, que no podrán ser seguidos.

La página bloqueada con meta robots no será indexada, pero sí rastreada por el buscador, siguiendo los enlaces hacia otras páginas y transmitiendo el valor de dichos enlaces.

Ventajas de meta robots frente a robots.txt

Teniendo en cuenta que los buscadores utilizan enlaces para descubrir las páginas de un sitio web, la etiqueta meta robots tiene una ventaja evidente, y es que permite evitar la indexación de ciertas páginas sin convertirse en un obstáculo para el buscador en su tarea de descubrir nuevas páginas en el sitio.

Cómo usar la etiqueta meta robots

Para que la etiqueta meta robots sirva de algo debe aparecer en el código en HTML de tu página, y más concretamente, dentro de la sección delimitada por las etiquetas <head> y </head>.

El código de la etiqueta tiene el siguiente aspecto:

<meta name=”robots” content=”VALORES”>

Donde VALORES puede incluir:

• Index / NoIndex – Indica si tu página debe incluirse en los índices del buscador, o no


499 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• Follow / NoFollow – Indica si los enlaces de tu página deben ser rastreados y pasar valor de enlace, o no

• Index, Follow – Permite la indexación y el rastreo de la página por parte de los buscadores. Es la combinación por defecto y la que se supone cuando careces de esta etiqueta en tus páginas.

• NoIndex, Follow – Evita la indexación pero permite el rastreo. Es la combinación ideal cuando deseas evitar que una página aparezca en el índice de los buscadores.

• Index, NoFollow – Permite la indexación pero evita el rastreo. Es la combinación que debes utilizar cuando una página contiene enlaces que no necesariamente respaldas (este es el caso de páginas en las que el contenido está generado por el usuario).

NoIndex, NoFollow – Evita la indexación y el rastreo. La verdad, no hay muchas razones para usar esta combinación.

Según lo que hemos visto, la que está formada por la pareja NoIndex y Follow. Es la combinación que evita la indexación de una página web en el índice del buscador a la vez que permite el rastreo y el flujo de enlaces.

Su código en HTML es:

<meta name=”robots” content=”noindex, follow”>

Y para que funcione recuerda que debe aparecer dentro de la sección delimitada por <head> y </head> en el código de tu página.

3. Mapa del Sitio o SiteMAP

Muchas veces los buscadores tienen dificultades para encontrar las páginas de tu sitio.

Es lo que pasa cuando:

• Tienes enlaces en JavaScript, Java o Flash

• Tu sitio es nuevo y no has enlazado lo suficiente a páginas internas

• Tienes muchas páginas y éstas no están bien enlazadas

• En estos casos, un Sitemap es un recurso valioso para mejorar la indexación.

Probablemente ya conozcas los mapas del sitio en HTML; esas páginas estáticas a las que accedes con un enlace al pié y que te dan una visión general del sitio, ¿te suenan? Pues bien, un Sitemap XML es lo mismo, pero en un formato que entienden los buscadores.


500 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

En su forma más básica, un Sitemap es un archivo escrito en el lenguaje de marcas extensible (eXtensible Markup Language o XML) que proporciona una lista de las páginas del sitio junto con otros datos. Esta información ayuda a los buscadores a identificar las páginas que pueden rastrear y los caminos que conducen a ellas.

Por ello, cuando tienes problemas para indexar ciertas páginas, un Sitemap hace más probable que el buscador las encuentre y pase a visitarlas, aunque no lo garantiza.

Los mapas del sitio no sólo ayudan a los buscadores a encontrar simples páginas, sino también videos, imágenes, noticias y contenidos para móviles.

La extensión del protocolo de Sitemaps admite:

• Sitemaps de vídeo – Puedes aumentar las posibilidades de que tus videos sean descubiertos por los buscadores si los incluyes en un mapa del sitio. Los Sitemaps de vídeo te permiten incluir la URL donde se encuentra el video, pero también el título.

• Sitemaps de imágenes – Al igual que ocurre con los Sitemaps de vídeo, también puedes mejorar la indexación de tus imágenes si las añades a un Sitemap.

• Sitemaps de noticias – Permiten controlar el contenido que envías a Google Noticias.

• Sitemaps de móviles – Indica la ruta donde se encuentran los contenidos para móviles de tu sitio.

Vamos a ver un generador de Sitemap online gratuito muy fácil de usar:

XML-Sitemaps: www.xml-sitemaps – Una sencilla herramienta online. Introduces tu dominio y automáticamente rastrea todas las páginas, creando Sitemaps de hasta 500 páginas. Si tu sitio es grande puedes acceder a una versión de pago que se instala en el servidor y funciona con PHP. Ésta no tiene límites, además permite generar Sitemaps de video, de imágenes, de noticias y de móviles.

http://deteresa.com/indexar-en-google/

http://www.xml-sitemaps/

http://deteresa.com/ir/xml-sitemaps-unlimited/


501 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

El procedimiento para crear un sitemap con este servicio es realmente sencillo, ya que no necesitaremos tener acceso al servidor ni instalar ninguna aplicación en él.

Crear un Sitemap en 5 sencillos pasos

• Introduce la URL del sitio completo y algunos parámetros opcionales en el formulario que aparece en la imagen

• Pulsa el botón Empezar o "Start" y esperar a que se genere el Sitemap.

• Serás redirigido a la página de detalles del mapa generado, incluyendo el número de páginas, la lista de enlaces rotos, el contenido del archivo XML y un enlace a un archivo de mapa del sitio.

• Descarga el archivo Sitemap utilizando ese enlace y ponerlo en la carpeta raíz de tu sitio. Tendrás varias formas de descargarlo.

Un archivo XML, que es la versión más utilizada ya que es la que recomienda Google que situemos en nuestro sitio web.

Un archivo comprimido, que es equivalente al anterior pero con compresión para que ocupe menos espacio.

Un archivo en formato HTML, que podemos utilizar como una página más del sitio web con el mapa del mismo. Esto es muy útil para los visitantes del sitio web.

Un archivo de texto, que no utiliza XML sino texto plano. Es otra forma de incluir un mapa del sitio aunque menos recomendable.

• Cuando tenemos el sitemap, debemos situarlo en el directorio raíz del sitio web y comunicárselo a Google. Esto último se hace a través de las Herramientas para webmasters de Google.

Con las Herramientas para webmasters, Google nos ofrece distintas posibilidades no solo en cuanto al posicionamiento sino para el correcto diseño y accesibilidad.


502 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Para acceder a ellas, es necesario disponer de una cuenta Google.

Para dar de alta el sitemap, deberás pulsar en el botón AÑADIR O PROBAR SITEMAP y completar la URL con el nombre del archivo .xml.

Con esto hemos completado el proceso.

Ahora Google conoce que en el sitio web se dispone de un sitemap y lo tendrá en cuenta cuando lo explore. De esta forma facilitamos que pueda indexar todas las páginas que nos interesan que sean indexadas del sitio web.

Cuando el sitio se actualice, tendremos que volver a colocar un sitemap actualizado, pero no será necesario volver a indicarlo mediante las Herramientas para webmaster de Google.

Módulo 4: Búsqueda y Procesamiento de Datos Tema 7: La publicidad online o SEM

503 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

TEMA 7: LA PUBLICIDAD ONLINE O SEM

La Publicidad en Buscadores o SEM, es la rama del marketing de buscadores que se encarga de manejar la distribución de anuncios, tanto de texto como gráficos, en los buscadores y en las webs afiliadas a los sistemas de publicidad contextual.

El modelo de pay per click es el método de pago más utilizado por los anunciantes, se basa en el pago de una cantidad por cada usuario que clique en los anuncios que el anunciante distribuye por la red. La cantidad a pagar por click se establece a través de programas gestores de publicidad online. Estos programas usan un sistema de pujas sobre palabras clave para determinar la cantidad de impresiones y las posiciones de los anuncios frente a los de la competencia. Los programas mas usados por los anunciantes son Google Adwords, Yahoo Search Marketing y MicrosoftAdcenter, y sirven anuncios en sus respectivos buscadores.

EL CPC máximo, o Coste por Click máximo, es la cantidad de dinero, determinada por el anunciante, que se pagará como máximo por cada usuario que clique en un enlace patrocinado.

Las ventajas y claves más importantes de la publicidad en buscadores son:

• El anunciante elige las palabras clave, o keyword, por las que quiere aparecer anunciado.

• Solo se paga si el usuario clica en el anuncio.

• Control total de gasto en publicidad.

• Posibilidad de medir el retorno de la inversión publicitaria.

• Flexibilidad a la hora de valorar prioridades y aplicarlas a la estrategia de publicidad.

• Resultados inmediatos.

En los últimos años, los enlaces patrocinados han sido el formato que se ha llevado mayor parte del presupuesto destinado a la publicidad online gracias a los buenos resultados que pueden llegar a ofrecer con una correcta gestión.

1. Glosario de términos SEM.

Es importante conocer algunos términos que se usan continuamente cuando se trabaja con campañas de SEM. Aquí os dejo una lista de los que, desde mi punto de vista, considero básicos e imprescindibles.

• Anuncio de texto.


504 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Es el texto que creamos con la información que queremos que se muestre a nuestro público objetivo.

• Anuncios gráficos.

Son anuncios creados con imágenes y/o diseños gráficos.

• Clic.

Es la acción que se produce cuando un usuario pulsa el boton del raton sobre un elemento, en nuestro caso un anuncio, para ser redirigido a nuestro sitio web.

• Conversión (1 por clic).

Es cuando un usuario finaliza una acción que hemos marcado como objetivo, como por ejemplo una suscripción o una compra, independientemente de la cantidad de ventas o suscripciones que efectúe.

• Conversión (varias por clic).

Es el número de objetivos cumplidos por cada conversion (1 por clic), como por ejemplo, número de compras efectuadas por un mismo usuario que se ha convertido en cliente.

• Coste por clic (CPC).

Es la cantidad de dinero que se paga por cada usuario que clica en nuestro anuncio.

• Coste por clic máximo (CPC máximo).

Es la cantidad máxima de dinero que estamos dispuestos a pagar por cada usuario que clique en nuestro anuncio. El CPC máximo también podemos llamarlo puja.

• CPM.

Son las siglas de “coste por mil impresiones”. Cuando se usa el sistema de CPM, los anunciantes pagan por el número de impresiones que ha tenido un anuncio.

• CTR.

Son las siglas de “click through rate“. Es el porcentaje de clics que consigue un anuncio frente al total de impresiones que ha tenido.

• Impresión.

El número de impresiones es el número de veces que se muestra nuestro anuncio.

• Optimización.

Es la modificación de factores determinados de las campañas de SEM con el objetivo de mejorar su calidad y su rendimiento.

• Página de destino.

Es la web a la que se le dirige al usuario que clica en un anuncio.


505 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• Pago por clic (PPC).

Son la estructura y sistema de precios que se basa en cargar una cantidad de dinero al anunciante cada vez que un usuario hace clic en su anuncio.

• Palabra clave.

Desde el punto de vista del SEM, la palabra clave es el término que el usuario inserta en la caja de búsqueda de los buscadores. El anunciante pujará por las palabras clave que le interesa que activen sus anuncios.

• Porcentaje de conversión.

Es el porcentaje de objetivos conseguidos frente al número de usuarios que han clicado en nuestro anuncio.

• Posición media.

Es la posición media que ocupa un anuncio en los resultados de búsqueda en la zona de los resultados de pago.

• Retorno de la inversión (ROI).

El ROI es el valor que obtiene una empresa como resultado del coste invertido en una campaña publicitaria.

• URL de destino.

Es la dirección de la web a la que enviamos a los usuarios que cliquén en un anuncio.

• URL visible.

Representa la cuarta linea dentro de los anuncios de Adwords. Es la dirección web que queremos que se enseñe al usuario que está leyendo un anuncio. La URL de dstino y la visible deben tener una relación directa para evitar que se dirija al usuario a una web distinta a la que le estamos diciendo que le vamos a llevar.

2. Crear una campaña con Google Adwords

Las campañas de PPC (Pago por Click) las asociamos normalmente a las plataformas de los buscadores más importantes del mercado, pero en realidad existen gran cantidad de páginas y empresas que ofrecen este servicio, como por ejemplo facebook, miva, 7search o business.com.

Los buscadores que mayor cuota de mercado tienen son Google, Yahoo y Bing, los cuales nos ofrecen sus propias soluciones y plataformas para llevar a cabo estrategias de PPC.


506 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Google Adwords:

Es el proveedor de herramientas de PPC con mayor cuota de mercado, con más de un 90% de cuota de mercado en España. Si estas pensando en empezar una campaña nueva de SEM, Google es la mejor opción.

La plataforma de Google para gestionar los enlaces patrocinados se llama Adwords, y los anuncios se muestran encima y a la derecha de los resultados de búsqueda naturales, y en las zonas habilitadas por los webmasters en las webs asociadas a la red contextual de Google.

Google adwords a demostrado aportar grandes resultados y debe ser el punto de partida en cualquier estrategia de PPC que se quiera llevar a cabo. Al ser el buscador más dominante, se generan una serie de puntos débiles a tener cuenta en la estrategia SEM, ya que a mayor tráfico, también conlleva una mayor competencia, los CPC’s (Costo por click o cost per click) pueden llegar a ser muy altos en algunos mercados y la optimización que hay que llevar a cabo es mucho mas exahustiva.

La razón para que Google Adwords, y en general el SEM, se haya convertido en el formato publicitario más popular de los últimos años, es que otorga, a los anunciantes, la capacidad de segmentar el público al que se dirigen sus anuncios a través de las búsquedas que hacen los usuarios en buscadores como Google.

En resumen:

• El anunciante puja por las palabras clave por las que quiere aparecer en los resultados de búsqueda de Google. Esto permitirá que sus anuncios aparezcan encima y a la derecha de los resultados naturales de Google en la zona específica para resultados de pago.

• Se crean una serie de anuncios personalizados para su negocio. En ellos se describe de manera comercial el producto o servicio que se quiere vender, con el objetivo de llamar la atención de los usuarios que han hecho activar los anuncios con sus búsquedas.

• El anunciante solo pagará cuando un usuario, se siente atraído por el anuncio, y clica para entrar la web.

Para calcular el precio exacto que el anunciante paga por cada clic, siempre menor o igual al que se seleccionó, y para organizar de manera más justa las posiciones de cada anuncio frente a los de la competencia, Google ha creado un sistema que valora varios aspectos de cada cuenta de Adwords, de manera que la pujas no son el único factor importante para ser más competitivo, si no que se tiene muy en cuenta, por ejemplo, la relevancia que tenga la campaña publicitaria para los usuarios. El resultado de la valoración otorga un Nivel de Calidad, y es el factor determinante a la hora de decidir precios y posiciones.

Se podría decir que, cuanto más satisfechos queden los usuarios con nuestra publicidad y mas ajustemos la estrategia a nuestro mercado objetivo, Google nos premiará con mejores posiciones a precios más bajo.

http://www.karateclick.net/establecimiento-de-precios-y-ranking-en-adwords/

http://www.karateclick.net/manual-sem-nivel-de-calidad/


507 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

El panel de Adwords permite cambiar los anuncios y las pujas que hacemos por cada palabra clave de manera muy sencilla, y a medida que se trabaje con la cuenta y la ajustemos más a nuestras necesidades y a las del mercado, conseguiremos mejores resultados.

Nivel de Calidad de Google Adwords

Para mostrar los resultados de pago de manera más justa y mejorar la satisfacción de los usuarios frente a las campañas de PPC de los anunciantes, Google ha creado el nivel de calidad, de manera que el CPC máximo que estamos dispuestos a pagar por las palabras clave no es el único factor a tener en cuenta para que nuestras campañas sean más eficientes y competitivas.

El nivel de calidad es un valor que Google Adwords da a cada una de nuestras palabras clave. Este valor es calculado con frecuencia y tiene un efecto directo sobre la eficiencia de nuestra campaña publicitaria, ya que cuanto mayor relevancia tenga la palabra clave por la que pujamos, frente a las búsquedas que efectúan los usuarios y frente a nuestros anuncios, menor será el coste por click que pagaremos y nuestras posiciones mejorarán sin incurrir en mas coste, es decir, se conseguirán mas clics a un coste menor. Del nivel de calidad que se tenga, también dependerá el CPC mínimo que tendremos que pagar para poder estar en la primera página.

El nivel de calidad se calcula teniendo en cuenta varios factores, es decir, Google Adwords tiene un pequeño algortimo que valorará cada punto con su proporción de importancia para conseguir el resultado final. Este algoritmo es secreto, pero se puede afirmar que los factores más importantes son:

Para establecer el nivel de calidad en la red de búsqueda:

• El histórico de CTR (es un índice que representa el número de Suscriptores que hicieron click en uno o más de los links que aparecen en el Email, sobre el total de los Emails Entregados) de las palabras clave y de los anuncios.

• El historial de la cuenta, que se mide sumando el CTR de todos los anuncios y las palabras clave de la cuenta.

• El historial de CTR de las URL’s visibles de los grupos de anuncios.

• La calidad de la página de destino a donde enviamos a los usuarios que clican en nuestros anuncios.

• La relevancia de la palabra clave frente al grupo de anuncios en el que se encuentran.

• La relevancia de la palabra clave y del anuncio frente a la consulta de búsqueda que efectua el usuario.

• El rendimiento de la cuenta en la región en el que estén apareciendo los anuncios.

• Y algunos otros factores.


508 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Para establecer el nivel de calidad en la red de contenido:

• El historial de rendimiento de los anuncios (CTR).

• La relevancia de los anuncios y de las palabras clave respecto al sitio en el que se muestran.

• La calidad de la página de destino.

• Y algunos otros factores.

Para saber el nivel de calidad que tienen nuestras keywords, debemos activar la columna que muestra ese valor en el panel de administración del grupo de anuncios. Encima del resumen gráfico, a la derecha, hay un menú desplegable que se llama “filtro y vistas”, clicamos en personalizar columnas, y marcamos la casilla de Nivel de Calidad, cuando la cerremos se debería haber creado una columna más en el panel con el nivel de calidad correspondiente a cada palabra clave.

Podemos decir que los niveles de calidad entre 1 y 4 son bajos, entre 5 y 6, aceptables, y de 7 para arriba, buenos. Para mejorar los niveles globales de calidad, debemos optimizar la cuentas, intentando hacer nuestras campañas cada vez más relevantes para los usuarios y segmentándola hacia nuestro público objetivo.

Establecimiento de precios y ranking en Adwords

Uno de los puntos que a veces resulta un tanto extraño de entender, a la hora de trabajar con Google Adwords, es el establecimiento de los rankings y los precios.

Recordemos antes de todo que cuanto mejor sea la posición de nuestros anuncios frente a los de la competencia, mas clics conseguiremos. Esta es la razón principal por lo que los anunciantes compiten por conseguir estas posiciones.

En primer lugar vamos a ver como 3 anunciantes compiten en un mercado usando Google Adwords y cada uno apuesta una cantidad de dinero, es decir, establece su CPC máximo.

Anunciantes CPC máx.

Anunciante X 1,50€

Anunciante Y 1,20€

Anunciante Z 0,90€

Si Adwords solo tuviera en cuenta lo que cada anunciante apuesta por las palabras, entonces el anunciante X conseguiría las primeras posiciones, por encima del anunciante Y, y el anunciante Z quedaría en última posición.

El precio que se paga en Adwords, no es la misma cantidad por la que se puja, si no que se paga la cantidad mínima para poder mantener la posición que hemos conseguido. En este ejemplo, los pagos que harían cada anunciante serían.


509 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Anunciantes CPCmax CPC pagado Posición

Anunciante X 1,50€ 1,20€ 1

Anunciante Y 1,20€ 0,90€ 2

Anunciante Z 0,90€ la cantidad mínima 3

Como ya he comentado otras veces, Adwords no solo tiene en cuenta lo que se apuesta, si no que interviene el nivel de calidad para poder asignar posiciones y precios de manera mas justa y satisfactoria para los usuarios.

Imaginemos la misma situación de antes, pero teniendo en cuenta ya el nivel de calidad y los ranking. El ranking es el valor que sale de multiplicar el CPC máximo por el nivel de calidad, el anunciante que obtenga el valor mas alto será el que consiga mejores posiciones:

Anunciantes CPCmax Nivel de Calidad Ranking Posiciones

Anunciante X 1,50€ x 4 = 6 3

Anunciante Y 1,20€ x 6 = 7,2 2

Anunciante Z 0,90€ x 9 = 8,1 1

Como se vé, gracias al nivel de calidad, el anunciante Z que estaba en la última posición, ahora estará en primera posición, y el anunciante X, a causa de su bajo nivel de calidad, a bajado hasta la última posición.

Ahora vamos a ver que cantidad de dinero tendrá que pagar cada anunciante para poder mantener su posición. La teoría de dice que que se pagará la mínima cantidad para que el anunciante mantenga la posición que ha conseguido. Para conseguir esta cantidad, Google sigue la siguiente regla:

Precio anunciante A paga finalmente = [Ranking anunciante B]/[Nivel de calidad de A]+1 céntimo

Por lo que nuestro ejemplo quedaría:

Posición Anunciantes CPC máx. Nivel Calidad

Ranking Precio Final

1 Anunciante Z 0,90€ x 9 = 8,1 [7,2] /9

=0,80€+0,01€=0,81€

2 Anunciante Y 1,20€ x 6 = 7,2 [6] / 6

=1€+0,01€=1,01€

3 Anunciante X 1,50€ x 4 = 6 Precio Mínimo


510 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Estos cálculos por lo general no se usan en el trabajo diario que se hace con Google Adwords, pero facilita el entender porque un anunciante puede estar en mejores posiciones que sus competidores apostando y pagando una cantidad menor de dinero.

3. Estructura de una Cuenta de Adwords

Las cuentas de Adwords tienen una manera propia de estructurarse, la cual tiene como objetivo poder organizar nuestras campañas de manera que podamos crear grupos de anuncios por temática y así poder ser más específicos. Cada campaña se compone de grupos de anuncios, y cada grupo de anuncios se compone de, keywords de una misma temática y anuncios que tienen relación con estas keywords.

Por ejemplo, tenemos una cuenta de una aseguradora de vehículos, una estructura posible sería, campañas por tipo de seguro, seguros de coche, seguros de moto, seguros de hogar, etc…, y dentro de cada campaña crearemos grupos de anuncios por temáticas, por ejemplo, en la campaña de seguros de coche podemos crear un grupo de anuncios con keywords y anuncios que hagan referencia a seguros de coche baratos. También podemos crear un grupo de anuncios que haga referencia a seguros de coche a todo riesgo, con anuncios y keywords que tengan que ver con seguros a todo riesgo, y así hasta cubrir nuestras necesidades.


511 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Esta estructura permitirá que cuando un usuario busque un seguro de coche a todo riesgo, se activen anuncios de coches a todo riesgo, o si un usuario busca un seguro de coche barato, recibirá un anuncio de seguros de coche barato. A esto se le llama especificidad del grupo de anuncios, y es importante porque aumenta el interés del usuario, ya que se le muestra un anuncio específico para su búsqueda, y también significa una mayor calidad de nuestra estrategia de adwords, por lo que Google nos premiará con un mejor nivel de calidad, que nos permitirá reducir nuestros costes por click.

4. Elección y búsqueda de palabras clave.

Entender que palabras clave tenemos que usar para nuestras campañas de adwords, es una de las partes más importantes de todo el proceso.

El primer paso es pensar a grosso modo cuales son las keywords que pueden definir nuestro negocio. No debemos caer en el error de pensar que usando palabras genéricas, y llegando a más usuarios, nuestra campaña vaya a ser más efectiva.

Por ejemplo, si tenemos una tienda de cortinas, sería aconsejable pensar en palabras como “comprar cortinas”, “cortinas baratas”, tienda cortinas”,… y separar las palabras como cortinas, que son mucho más genéricas e incurrirán en mayor coste, y además, en realidad no es una palabras propia de una persona que tenga claro que quiere comprar cortinas.

Dependiendo del presupuesto que se tenga y la experiencia gestionando la campaña de SEM, podremos pujar por estas palabras, o pujar más alto si ya las estamos usando. También debemos tener en cuenta que no todas las webs están igual de preparadas para conseguir ventas, por lo que el uso de palabras genéricas también dependerá de la capacidad de la web para rentabilizar el coste que acarrean estas palabras.

http://www.karateclick.net/manual-sem-nivel-de-calidad-adwords/


512 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Ejemplos:

Pequeño hotel del centro de Barcelona (que admite perros) con una web sencilla:

Tipo de palabras a usar con mayor proyección de rentabilidad: hotel centro barcelona, hotel admite perros barcelona, hotel en raval, etc.

Tipo de palabras a analizar si el anunciante está preparado para usar: hoteles, hotel, hotel barcelona, reservar hotel.

Aunque el tráfico será menor, hay que adaptarse a las capacidades personales de cada anunciante, y analizar hasta qué punto el anunciante será capaz de rentabilizar el consumo de presupuesto.

Otro aspecto a tener en cuenta es el verdadero sentido de las búsquedas que efectúan los usuarios. Un amigo con una empresa de traducción me pidió que echase un ojo a su cuenta para ver que ocurría, cada día se le acababa el presupuesto y no conseguía ninguna conversión. Cuando entré en su cuenta vi como estaba pujando por palabras como traductor, traductores o traductor inglés. Mirando en Google, podemos ver que la mayor parte de los resultados que ofrecen estas palabras hacen referencia a traductores online, por lo que estamos atrayendo tráfico que realmente no nos interesa. Con cambiar todos estos términos, por keywords como empresa traducción, servicios de traducción, agencia traductores, etc., empezó a recibir gran cantidad de propuestas, aunque el tráfico que consigue es mucho menor.

Una vez tenemos pensadas algunas de las palabras clave que nos interesan, las colocamos según su temática dentro de cada uno de los grupo de anuncios que tengamos definidos en la estructura. En este paso, con tener de cinco a diez palabras clave por grupo será suficiente.

Cuando tenemos completa la distribución de las palabras en cada grupo podemos entrar en la herramienta de palabras clave y descubrir así el tráfico que tienen además de otras palabras que nos puedan interesar. De esta manera podremos crear una lista de palabras más extensiva.

Ejemplo:

Tenemos un grupo de anuncios “hotel admite mascotas”, con 5 palabras clave de esta temática que se nos han ocurrido, hoteles admiten perros, hoteles aceptan mascotas, hotel con mis perros, hotel con mascota y hotel acepta gatos. Iremos a la herramienta de palabras clave y las usaremos para descubrir mas keywords de la misma temática, de manera que nuestra lista aumentará y así la posibilidad de captar tráfico segmentado.

Gracias a la herramienta obtendremos, de cinco palabras, una gran lista de posibles keywords que nos pueden interesar, y ordenadas por el número de búsquedas, podremos seleccionar las mas interesantes.

http://www.google.es/#hl=es&source=hp&q=traductores&aq=f&aqi=g10&aql=&oq=&gs_rfai=&fp=113bffa68da54f65

https://adwords.google.es/o/Targeting/Explorer?__u=1000000000&__c=1000000000&stylePrefOverride=2#search.none%21ideaType=KEYWORD&requestType=IDEAS

https://adwords.google.es/o/Targeting/Explorer?__u=1000000000&__c=1000000000&stylePrefOverride=2#search.none%21ideaType=KEYWORD&requestType=IDEAS


513 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

5. Red de Búsqueda de Google Adwords. Anuncios

La red de búsqueda de Google Adwords son el conjunto de webs que, en sus resultados de búsqueda, muestran anuncios de texto orientados por las keywords que utilizan los usuarios para buscar información en ellas.

En Google, el espacio que está destinado a los anuncios de adwords, o resultados de pago, es la parte superior y la parte derecha de la página de resultados.


514 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Algunos ejemplos de sitios donde se verían anuncios dirigidos a toda la red de búsqueda de Google son Excite, AOL o Google Maps.

Al configurar las redes en las opciones de las campañas de Adwords, debemos elegir si queremos que los anuncios se muestren en toda la red (google y socios de búsqueda), o solo en los resultados de búsqueda de Google (marcando solo Búsqueda en Google).

Cuando se usa la red de búsqueda, los anuncios de adwords se activan teniendo en cuenta las palabras clave por las que se estemos pujando, es decir, el anunciante, al pensar en las palabras clave que va a usar en su cuenta tiene que preguntarse “quiero que mis anuncios se activen cuando el usuario busque….”.

En la red de búsqueda, a diferencia de la red de contenido, solo se puede usar un tipo de formato de anuncio, el de texto, el cual debe ser relevante con respecto al término que está buscando el usuario.

Es muy aconsejable que las campañas estén dirigidas solo a red de búsqueda o la red de contenido. Cada tipo de red tiene sus propias estrategias de optimización, y tener las campañas por separado permite un mejor manejo de la cuenta.

En general se puede trabajar la opción de los socios de búsqueda activada, ya que resultados que aportan estos sitios no suelen ser peores que solo los de “Busqueda en Google”, pero es parte de la optimización de la cuenta vigilar como está trabajando para poder decidir si queremos continuar apareciendo en ellos o es mejor desactivarlo.

6. Red de Contenido de Google Adwords. Anuncios

Cuando se trabaja con Google Adwords se puede decidir si queremos que los anuncios que se crean se muestren en la Red de Busqueda y/o en la Red de Contenido.

Como ya hemos comentado en el punto anterior, de la red de búsqueda, es importante separar en campañas distintas aquellos grupos de anuncios dirigidos a

http://search.excite.es/sitesearch/?q=seguros+de+coche

http://busqueda.aol.es/aol/search?invocationType=topsearchbox&query=seguros+de+coche&rp=

http://maps.google.es/maps?f=q&source=s_q&abauth=db6e4b8e%3AFjrRpZbO9oBzd0NXI-KFqdHjOGQ&view=text&hl=es&gl=es&q=seguros+de+coche&btnG=Buscar+en+mapa

http://www.karateclick.net/manual-sem-red-de-contenido-de-google-adwords/

http://www.karateclick.net/red-de-busqueda-google-adwords/


515 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

la red de búsqueda y aquellos dirigidos a la red de contenido, incluso, personalmente os aconsejo separar en campañas distintas aquellos grupos de contenido dirigidos contextualmente y aquellos de orientación por ubicación. La razón principal es que cada una de ellas necesita una optimización distinta, y será más fácil tener una visión clara de qué está ocurriendo en cada una.

En la siguiente imagen vemos como elegir en la configuración de campaña que ésta se dirija solo a la red de contenido, pero por cada campaña también elegiremos si queremos que los anuncios se muestren en toda la red de contenido, o solo en las ubicaciones que nosotros gestionamos (orientación por ubicación).

La red de contenido está formada por miles de webs que, a través del conocido programa Adsense de Google, permiten que se publiquen anuncios que los anunciantes crean para promocionar sus productos o servicios.

La estrategia que se sigue cuando usamos la red de contenido es muy distinta a la que seguimos cuando trabajamos con la red de búsqueda. Con la red de búsqueda, nuestros anuncios se muestran a usuarios que buscan activamente, a través del buscador, algún término por el cual nosotros estamos pujando para anunciarnos.

En la red de contenido, nuestros anuncios aparecerán en sitios web leídos por aquellos usuarios a los que nos interesa llegar, lo cual no significa que estén realmente interesados en comprar o usar nuestros productos servicios. Por esta razón, el ratio de apertura de los anuncios es mucho menor, pero no significa que la rentabilidad de las campañas vaya a serlo también, aunque muchas ocasiones requiere una optimización minuciosa y mucha paciencia para conseguir cumplir los objetivos.

Veamos las diferencias fundamentales entre las dos estrategias, orientación contextual y orientación por ubicación.

Orientación Contextual

A la hora de crear una estrategia basada en la orientación contextual, el anunciante tiene que pensar, “quiero que mis anuncios aparezcan en sitios en los que se hable de…”, y no como en la red de búsqueda, en la que el anunciante debe


516 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

de pensar “quiero que mis anuncios se muestren cuando el usuario busca…”. Teniendo clara esta diferencia, ya podremos crear los distintos grupos de anuncios que deben ser muy enfocados hacia una temática.

A diferencia con la red de búsqueda, en la que podemos usar gran cantidad de palabra en los distintos grupos de anuncios, en la red de contenido debemos usar solamente unas 20 palabras clave para definir la temática. El sistema de Google Adwords agradecerá y entenderá mejor que en pocas palabras puedas describir los temas alrededor de los cuales quieres que tus anuncios se publiquen. Además, para el nivel de especificidad que necesitas, los grupos de la red de contenido no deberían necesitar más. Otra de las razones para especificar tanto, es que debemos crear anuncios que tengan la mayor relación posible con el grupo de anuncios y con los que esté leyendo el usuario.

Seguramente con un ejemplo se entenderá mejor. Imaginemos que estamos vendiendo una batería de cocina que nos permite cocinar al vapor. A partir de aquí, pensemos cuando nos gustaría que nuestros anuncios se publiquen y como debemos enfocar la generación de keywords y los anuncios.

Queremos que nuestro anuncios se publiquen cuando se habla de… (aquí viene el momento de pensar, debemos ser creativos y tener muy claro a qué público queremos llegar, las posibilidades son infinitas):

1 – Cocina al vapor (lógicamente): ejemplos de keywords que podemos usar son, cocina al vapor, batería cocina al vapor, aprender cocina al vapor, ventajas de cocinar al vapor, recetas de cocina al vapor,… y crearemos anuncios para este grupo subrayando nuestro productos de cocina al vapor, sus cualidades, la facilidad para usarlo, sus ventajas sobre otros productos, etc..

2 – Cocina sana: cocina sana, recetas sanas, comer sano, dietética sana, aprender a comer sano,… y crearemos anuncios que describan lo sano y saludable que es comer con la batería de cocina al vapor.

3 – Cocina vegetariana: puede que los vegetarianos les interese cocinar al vapor, intentémoslo. Las keywords que usaremos para describir donde queremos aparecer pueden ser, comida vegetariana, recetas para vegetarianos, cocina vegetariana, recetas con verduras, vegetarianos, …, y los anuncios que usaremos deben describir lo buenas que quedan las verduras cocinas al vapor.

4 – Recetas sencillas: puede que los usuarios que estén leyendo sobre recetas rápidas les interese la cocina al vapor, ya que es sencillo y limpio. Algunas de las keywords que usaremos pueden ser, recetas sencillas, cocina sencilla, cocina para novatos, recetas fáciles, cocinar platos sencillos, …, y nuestros anuncios describirán los fácil, rápido y limpio que es cocinar con nuestra batería de cocina al vapor.

Y así podemos crear tantos grupos de anuncios como queramos, siempre dirigidos al público que nos interesa.


517 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Orientación por ubicación

La orientación por ubicación es un poco más fácil de explicar, ya que simplemente se basa en elegir, de un directorio que nos da Google Adwords, los sitios web en los que queremos que nuestros anuncios se publiquen. Podremos gestionar las ubicaciones gracias a la herramienta que se muestra cuando estamos creando el grupo de anuncios en la campaña dirigida a ubicaciones gestionadas.

De nuevo, la parte más complicada a la hora de crear una campaña de orientación por ubicación es la de crear grupos de anuncios específicos. En este caso podemos crear grupos de anuncios en base a por ejemplo, temáticas de los sitios web, por tipo de usuarios que leen las webs, si son blogs, magazines, foros, etc…

Otra de los puntos que pueden hacernos ocupar más tiempo cuando creamos campañas de orientación por ubicación, es que a veces nos interesa examinar una a una las webs que estamos eligiendo.

Personalmente, para ahorrar tiempo, en vez de elegir los sitios desde la herramienta de Google Adwords, yo investigo en Google y apunto cada una de las webs que me interesan, después las incluyo en la herramienta en enumerar url, la cual me rechazará aquellos sitios que no están incluidos en la red de contenido. De esta manera ahorro tiempo, y categorizo mejor según mi propio criterio que por la categorización y elección que me da Google.

7. Facturación

Para obtener tus facturas de AdWords solo debe seguir unos pasos. Elije tú país y la configuración de pago de facturación para ver los pasos correspondientes a tú cuenta.


518 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Elije tu configuración de pago:

Pagos automáticos o manuales (se aplican a la mayoría de anunciantes)

En la mayoría de países, AdWords no envía facturas ni justificantes de pago. Sin embargo, puede obtener estos documentos desde tú cuenta.

Módulo 4: Búsqueda y Procesamiento de Datos Tema 8: Analítica Web

519 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

TEMA 8: ANALÍTICA WEB

1. Cómo hacer un seguimiento SEO desde Google Analytics

Como ya sabemos, el objetivo del SEO es aparecer en los primeros puestos en los resultados de búsqueda para una o varias palabras clave. La optimización SEO se divide en dos partes, la interna, que son los trabajos que realizamos dentro de nuestro sitio web y la externa, que va dirigida a aumentar nuestra notoriedad.

El 90% del tráfico que viene desde buscadores, en España, es de Google.

La primera métrica que nos interesará monitorizar en SEO será nuestra posición en los resultados de búsqueda. Con la analítica web podemos hacer un seguimiento SEO y saber si nos está trayendo un retorno positivo dentro de nuestros objetivos.

Podemos medir el número de visitas que vienen desde buscadores y compararlo con periodos anteriores. Podemos también saber cuáles de estas visitas vienen desde branded keywords o búsquedas de marca, que son aquellas búsquedas que mencionan nuestro nombre de empresa o marca. También podremos distinguir las visitas de cada buscador, Google, Bing, Yahoo, etc.

Informes de Google Analytics para seguimiento SEO

Google Analytics trae por defecto varios informes relacionados con el SEO. Estos informes están bajo Adquisición. En canales podremos ver la distribución de fuentes de nuestro sitio.

El tráfico puede ser:

• Tráfico de búsqueda orgánico. Cuando el usuario llega al pulsar en un resultado de búsqueda natural.

• Tráfico de búsqueda de pago. Cuando el usuario llega tras pulsar en un anuncio en buscadores.

• Tráfico directo. El usuario llega directamente, tecleando la url en el navegador por ejemplo, o a través desde marcadores.


520 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• Tráfico de referencia. El usuario llega clicando en un enlace desde otro sitio web.

El objetivo SEO estará enfocado en el tráfico orgánico. También desde Adquisición encontraremos una sección específica para el tráfico de buscadores. Estos informes nos proporcionarán las palabras clave que los usuarios escribieron en el buscador para llegar a nuestro sitio web. Podremos ver qué visitas llegan desde estas palabras clave y que metricas tiene asociada cada palabra, como el % de rebote, tiempo medio de sesión, etc. De esta forma podremos saber qué palabras claves tienen mejor rendimiento y así potenciarlas.

Si hemos enlazado la cuenta de Google Analytics con la de las Herramientas para Webmasters, podremos acceder a más informes relacionados con la optimización en buscadores. Podremos generar así tres nuevos tipos de informes:

• Consultas de búsqueda, con el ctr, clics, impresiones y posición media de cada consulta

• Páginas de destino, con las mismas métricas que las consultas

• Resumen geográfico, también con las mismas métricas y la información de los países que nos generan tráfico orgánico

2. Analítica web y optimización SEO

Las palabras clave son palabras o frases que usan los usuarios para encontrar nuestro sitio web a través de buscadores como Google. Con el SEO optimizaremos nuestro contenido en base a dichas palabras. Para ello la analítica web es nuestra mejor aliada. Para encontrar estas palabras hay numerosas herramientas como Google Trends o el planificador de palabras clave de AdWords.

Para medir el rendimiento de una palabra clave podemos empezar viendo el número de visitas y el porcentaje de rebote de cada palabra. Con los informes de tiempo real también podremos ver información relativa a las palabras clave.

https://support.google.com/webmasters/answer/1120006?hl=es

https://support.google.com/webmasters/answer/1120006?hl=es


521 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Con los test A/B también podremos ver que combinaciones de palabras, en una misma página, nos reportan más cantidad o calidad de tráfico orgánico.

Importancia de las fuentes

Aunque Google acapare el 90% de las búsquedas en España, en otros países esto no es así. En Estados Unidos, por ejemplo, Google tiene un 60% y Bing un 15%. Además hay países donde ni siquiera es el principal buscador, como son los casos de Rusia y China.

Sabiendo esto, si nuestro sitio es internacional, deberemos tener muy en cuenta el tráfico que viene desde cada buscador en nuestro seguimiento SEO. Estos datos los tendremos en Adquisición – Todo el tráfico. Hay que tener en cuenta que pueden haber distintos tipos de búsqueda como son:

• Búsqueda de vídeos

• Búsqueda de imágenes

• Búsqueda de noticias

• Búsqueda local

• Búsqueda orgánica

Desde este informe podremos monitorizar cada uno de los tipos de búsqueda

Problemas (not set, not provided y cookies)

Google Analytics también tiene sus puntos flacos, el valor not set en un informe indica que una dimensión de los datos, ya sea una palabra clave, ciudad, región, país, idioma, etc. no ha podido ser identificado. Cuando esto ocurre aparecerá una línea en el informe con “not set”.

Los sitios donde nos podemos encontrar alguna línea con not set en analytics son los siguientes:

• Informes de fuentes de tráfico

http://www.julioraliaga.com/posicionamiento-seo/como-mejorar-la-usabilidad-web-con-google-analytics/#testab


522 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

• Informes geográficos

• Informes de dispositivos

• Informe de títulos de página

Otro problema que nos podemos encontrar es ver not provided en los informes de palabras clave. Es un cajón de sastre que nos deja muchas más dudas que respuestas. Desde marzo de 2012, si una persona realiza una búsqueda estando logueada con una cuenta de Google no se pasarán los datos a través de Analytics. Una forma de atajar este problema es seleccionar el conjunto not provided y añadir a continuación la dimensión de la página. Con esto no llegaremos a saber las palabras usadas, pero si por lo menos las páginas a las que acceden los usuarios, las landing pages. Así podremos saber a qué tipo de contenido está accediendo el usuario.

3. Cómo empezar con Google Analytics.

Vamos a comenzar con abrir una cuenta en google Analytics. Para los que tengan cuenta con Google, ya les va a resultar más sencillo, para los que no, lo primero sería abrir una cuenta de correo electrónico en Gmail.

Es sencillo, hace años iban por invitación, ahora se puede abrir una directamente en esta dirección.

http://www.gmail.com

Con esto, ya tenemos acceso a Google Analytics, en la siguiente dirección:

http://www.google.com/analytics

Introducimos el nombre de usuario, que será lo que va antes de la @ del correo electrónico (también puedes introducir el correo electrónico completo) y la contraseña.

http://www.gmail.com/

http://www.google.com/analytics


523 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Y nos aparece una pantalla como la siguiente:

Inicio de la configuración de google Analytics

Pulsamos en registrarse y a partir de ahí, nos da dos opciones, una si queremos trabajar con el seguimiento de un sitio web, o de una aplicación. En este caso pulsaremos seguimiento de un sitio web

En cuanto al método de seguimiento, seleccionaremos el que viene por defecto, Classic Analytics.

Y en configuración de propiedad de la web, rellenamos como el ejemplo del blog de FORO digital.

Es muy importante que se quede bien configurado de inicio la zona horaria y que en Configuración para compartir datos, la primera casilla quede marcada, que es la que permitirá si utilizamos dentro de unos meses Adwords, podamos verlo en el mismo entorno.

La segunda y tercera lo dejo a vuestro criterio. No es indispensable

Y por último pulsamos Obtener ID de seguimiento. Nos saldrá una pantalla para aceptar los “TERMINOS Y CONDICIONES DEL SERVICIO GOOGLE ANALYTICS” que a estas alturas os recomiendo leer y aceptar

https://lh4.googleusercontent.com/If64LgoB7fOo7E8U9izH5yc6Jy0Q1bLbxeQoCCPOpdH3LUalKXVfBQ--KvgQ0UxuQ5DkLdUH2jFg1wUI-na9vEUs691qYcbhVLQCtiAEajVLSsswvVyzQM9t8Sx-CkB0gg

https://lh6.googleusercontent.com/MJqD6A8Br_i51EJZR8b4PsZi48LmqoxSA3RlAy7A-NshLft7GuPmVdLaqkaOmIJ3-YI2Eq0ax0LelCVl7Cl-oKo7K-T3UbIiM_SNmjAkwmJsWfGGrwi_GYINYIdyibRhJw
















524 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Una vez hecho esto, nos saldrá la pantalla de acceso al panel de control de Google Analytics. Como la siguiente:

4. Cómo configurar Google Analytics.

Una vez configurada la cuenta de Google Analytics, y configurado nuestro primer seguimiento a un sitio web, quiero recomendar una serie de acciones o parámetros que introducir antes de seguir, que serán muy útiles para cuando tengamos nuestra web en marcha y recibiendo visitas.

Propiedades

Pulsamos en el enlace, tal y como marcamos en la imagen de arriba y se nos despliega la siguiente pantalla.

http://blog.forodigital.es/wp-content/uploads/2013/04/imagen.png










525 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Aquí conviene no despistarse, porque tiene bastante densidad de enlaces y todos sirven para algo, así que, fundamental, ser ordenado. Pulsaremos en el enlace remarcado en la imagende arriba. Y eso hará que accedamos a un menú donde parametrizaremos una serie de cuestión básicas para el buen funcionamiento posterior.

Iremos directamente a configuración del perfil

Y una vez que hayamos pulsado en Configuración del Perfil, nos sale la siguiente pantalla


526 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Bien debemos completar la información e introducir la pagina predeterminada (tudominio.com/index.php, o la que sea la de tu sitio web)

• Excluir parámetros de consulta de URL Aquí por ejemplo nos propone UserID, vid u otros que son comunes. Ante la duda no poner nada.

• Configuración del Comercio electrónico. Le decimos a Google Analytics si es un comercio electrónico o no en el desplegable que mostramos en el gráfico de arriba.

• Configuración de búsqueda en el sitio. Esto es muy importante, porque así sabremos cuantas búsquedas realizan en nuestro sitio, si encuentran lo que buscan, en que se diferencian los usuarios que buscan en nuestro sitio de los que no lo hacen, cuales son las páginas que se encuentran con más frecuencia en nuestro sitio.

El parámetro a introducir si es WordPress es ‘s’ (sin las comillas), si utilizamos un CMS que permita las búsquedas internas, es bueno activarlo y configurarlo.

Con esto, se quedaría configurado y a expensas de introducir el código de seguimiento en nuestra pagina web o sistema de comercio electrónico o CMS.

5. ¿Cómo introducir el código de seguimiento de Google Analytics en su web?

.Esta es una parte fundamental para que Google Analytics pueda ver que ocurre en tu página y así llevar la métrica.

En primer lugar iremos a donde nos muestra Google Analytics la información de seguimiento que está en la siguiente pantalla:


527 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Pulsamos en la pestaña 2ª, información de seguimiento y aparecerá toda la información que necesitamos para configurar el código de seguimiento de Google Analytics.

Nos aparece el código de seguimiento, grande. En este caso es el 40550802-1.

¿Qué hacemos con él?

Pues tenemos varias opciones, según sea nuestro sistema CMS, comercio electrónico o página web.

• Cómo insertar el codigo de seguimiento de Google Analytics en una página programada a medida. Lo más normal es que se inserte el código que muestra Google, entre las etiquetas <head></head> y EN TODAS LAS PAGINAS. Tarea ardua. El código sería muy similar a esta y lo tenemos en la propia página de código se segimeinto de GA.

<script type=”text/javascript”>

var _gaq = _gaq || [];

_gaq.push(['_setAccount', 'UA-40550803-1']);

_gaq.push(['_trackPageview']);

(function() {

var ga = document.createElement(‘script’); ga.type = ‘text/javascript’; ga.async = true;

ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’) + ‘.google-analytics.com/ga.js’;

var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(ga, s);


528 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

})();

</script>

Este código habría que incluirlo en CADA UNA DE LAS PÁGINAS de la web.

Es posible que en páginas realizadas a medida o con CMS propietarios, tengamos la opción insertar el código de seguimiento en el mantenimiento y que el sistema lo agregue en todas las paginas.

• Word Press

Podemos recomendar dos formas de hacerlo.

-Insertándolo en un Widget: Nos vamos a nuestro menú de administración de Word Press a apariencia, y allí nos vamos a Widget.

Accedemos a Apariencia –> Widgets y arrastra un widget de “Texto” hacia la última zona que tenga tu tema de WordPress. Por ejemplo, en la imagen, lo arrastramos a la cuarta zona de widgets del pie de página.

Dejamos el título del widget vacío (para que no se muestre nada a los visitantes) y copia/pega tu código de seguimiento de analytics en la caja de texto. Queda así:


529 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

6. Insertar código de seguimiento Google Analytics en WordPress

Insertar con un plugin. Google Analytics for WordPress.

Esta es una opción más completa. Hay disponible varios Pluggins de Word Press que hacen esto. Yo recomiendo Google Analytics for WordPress.

Accedemos a la sección de “Plugins” e instalamos el plugin Google Analytics for WordPress.

http://www.fpalacios.es/wp-content/uploads/20121105-005620.png









530 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Una vez instalado, en la configuración debemos indicar cuál es la propiedad web (el UA-XXXXX) en el que queremos realizar el seguimiento.

O bien hacemos la autenticación con nuestra cuenta de Google (introducir usuario y contraseña)

O bien introducimos manualmente el UA (haciendo clic en la caja de selección en la que aparece el cursor en la imagen)

Con esto estaría configurado Google Analytics en Word Press.

7. Comenzar a medir con Google Analytics

Una vez configurado la cuenta e introducido el código de seguimiento en Google Analytics, vamos a ver cómo comenzar a explorar datos de las visitas recibidas por nuestro sitio web.

Para ello nos dirigiremos a la página de informes y en ella al icono de público a la izquierda de la página, tal y como se muestra a continuación en la imagen.

http://blog.forodigital.es/como-configurar-google-analytics-1er-paso/

http://blog.forodigital.es/como-introducir-el-codigo-de-seguimiento-de-google-analytics-en-su-web/


531 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Visitas que está recibiendo nuestra web

Desplegando la pestaña de público, aparecen los siguientes submenús:

• Visión general

• Datos demográficos

o Idioma o Ubicación

• Comportamiento

o Visitantes nuevos vs recurrentes o Frecuencia y visitas recientes o Interacción

• Tecnología

o Navegador y SO o Red

• Móvil

o Visión general o Dispositivos

• Personalizado

o Variables personalizadas o Definido por el usuario

• Flujo de visitantes


532 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Y en visión general nos muestra un gráfico inicial de las visitas recibidas en la web durante la fecha elegida. Le fecha la podemos cambiar desplegando el menú de fecha que hay arriba a la izquierda, como puedes ver en la imagen anterior.

Nos muestra las vistas que ha tenido la web, por días Tenemos también un selector de horas, semanas y mes.

Ya tenemos dos filtros interesantes, el de rango de fechas y el de vista de las visitas por horas, semanas y mes. Dia semana y mes las utilizo de manera global ver el trafico que tiene la pagina y el de horas resulta especialmente interesante para ver el impacto de acciones de marketing digital más concretas, como micro campañas en Twitter, o Facebook. Estas campañas quedan resaltadas como muestra el gráfico que a continuación mostramos.

Todos los gráficos tienen algún grado de interactividad este poniendo el curso en la linea, nos marca el numero de visitas recibidas en esa hora.

Algo muy interesante es marcar si hemos hecho alguna acción concreta, para luego recordar el porque de una variación brusca en una hora concreta, como por ejemplo, una micro campaña en Twitter.


533 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Reflejo en Google Analytics de micro campaña en Twitter

Esto hará que recordemos todas las acciones que hagamos. Pensad que con el tiempo tendremos un histórico de datos y que es importante que sepamos a que se deben las variaciones y las causas-efecto que las producen. Y es importante porque así seremos capaces de reproducir y potenciar, o en otros casos, desechar acciones que se han realizado.

Dejamos para el post siguiente, el uso de los filtros, o como los llama Google, segmentos avanzados, para obtener vistas diferentes de forma rápida.

8. Filtrar los resultados que ofrece Google analytics en sus informes

En primer lugar seleccionamos el rango de fechas, por defecto Google Analytics ofrece la del último mes, no incluyendo el día actual (fechas consolidadas).

Desplegando esa pestaña tenemos los segmentos, con os que podremos analizar una parte de nuestras visitas, y no el global.

La idea es primero segmentar y luego sacar un informe se esos segmentos o parte de nuestro tráfico.

Vayamos primero con los segmentos simples. Como hemos dicho antes, podemos segmentar las visitas por cualquier criterio que nos aparece en la pantalla, son numerosos, sobre los trece (13).

Un ejemplo: queremos trabajar con solo usuarios que han entrado a la pagina a través de una búsqueda gratuita (orgánica). Simplemente con marcar ese segmento, nos mostrara ese tipo de tráfico.


534 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Como veis, 2 nada más, a principio es normal, luego ira creciendo si nuestra labor SEO y sobre todo, de generar contenidos de calidad a sido la correcta.

Segmentos personalizados. Es posible que queramos filtrar quitando o añadiendo, algo mas concreto. Al principio y con las pocas visitas que recibimos, se ocurre uno: las veces que nosotros entramos a ver nuestra página o a modificar el web

Como muestra la imagen, desplegamos el menú que esconde la pestaña de segmentos avanzados, y pulsamos el botón cuya leyenda es “+ Nuevo segmento personalizado”

Le ponemos nombre, que en este caso será “Excluir mis visitas”

Y le damos a excluir, seleccionamos área metropolitana y le pongo la etiqueta “Benidorm”, que por las razones que sea queda identificada mi conexión como Benidorm. Desafortunadamente no es así, pero sigamos…

Podemos ver una vista previa del segmento, y si es lo que queremos, le daremos a guardar. Una vez hecho esto, el segmento queda aplicado. Y efectivamente tenemos un informe sin incluir mis visitas.


535 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Así como hemos puesto esto, tenemos la posibilidad de avanzar mucho más y discriminar por múltiples filtros según nuestros intereses (Usuarios con móviles un tipo de móvil, datos geográficos, de red, predefinidos por nosotros, etc, etc…)

1 | P á g i n a

Dosier de Prácticas


2 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

EV1 PRÁCTICA FINAL MÓDULO 1:

1. Identificar las partes de este equipo:

2. Crear una cuenta de gmail y mandar un mensaje al profesor que incluya un pequeño texto, una imagen y un enlace a una página Web.

3 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

EV2.- PRÁCTICA DE EVALUACIÓN MÓDULO 2

1. Utilizando el buscador Google encuentra las siguientes páginas

1. Nacionalidad del poeta Rubén Bonifaz

2. ¿De qué se encarga Greenpeace?

3. ¿Quiénes son Els Joglars?

4. Cómo se llamaba la mujer de Dalí

5. ¿Quién escribió Memorias de África?

6. Un diccionario de la lengua española. (Buscar que significa demagogia)

7. Oferta de trabajo para un electricista

8. ¿Cómo se llama el alcalde de Barcelona?

9. Que es la fobia social.

10. Nombre de la pirámide más grande de Egipto.

11. El nombre de un disco de Bob Dylan

12. Nombre del asesino de John Lennon

2. Utilizando el buscador Google encuentra las siguientes imágenes.

1. Busca una foto del Big Ben de Londres grande.

2. Busca una imagen del Taj Majal en blanco y negro de cualquier tamaño.

3. Busca un icono de un teléfono en blanco y negro.

4. Busca una imagen de la torre Eiffel en blanco y negro

5. Guarda una imagen de un barco pequeño para añadirlo a tu próxima página

Web.

4 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

6. Guarda una imagen de tamaño grande en blanco y negro de un mapa de

España

7. Imagina que estás haciendo una página Web sobre Toledo. Busca fotos de

cualquier tamaño de 3 sitios emblemáticos de esta ciudad y guárdalas

8. Busca un fondo para una página Web en verde y guárdalo

9. Busca un fondo para una página Web en tonos grises.

10. Busca una imagen de un cubo de basura (que sea un dibujo) y guárdalo

11. Encuentra una foto pequeña sobre algo que tenga que ver con una afición

tuya y guárdala

3. Utilizando el buscador Google encuentra los siguientes vídeos.

1. Busca un video sobre como quitar el fondo blanco a una imagen con

photoshop

2. Busca un video de cómo crear un mapa de imágenes en Dreamweaver

3. Busca un vídeo de redes sociales.

4. Busca un video sobre cómo hacer relaciones en Access que dure menos de 4

minutos.

5 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

PRÁCTICA FINAL MÓDULO 3

1. El alumno deberá crear una página de empresa en Facebook y configurarla adecuadamente.

Acceder a la página principal de Facebook (https://www.facebook.com/) e iniciar sesión con su dirección de correo electrónico y su contraseña. En el caso de que no tenga cuenta en Facebook, tendrá que registrarse.

Una vez haya accedido con su perfil personal, buscar alguna opción para crear una página. Si no la encontrara, podrá acceder directamente a esta dirección:


Realizar los pasos necesarios para crear la página. Si dispone de un negocio, puede aprovechar para crearla alrededor de él; en caso contrario, creará una página para una empresa ficticia. Es muy importante elegir el tipo de negocio o tema de la página.

Por ejemplo, si se trata de una página para una empresa o una página para promocionar un producto o marca en particular.

Asegurarse de introducir un nombre descriptivo para la página, la URL del sitio web corporativo (si se trata de una página para una empresa real con sitio web) y una dirección personalizada.

Una vez haya creado la página, deberá acceder a sus opciones de configuración y establecer al menos:

o Asegurarse de que se mostrará el botón Mensajes para que los usuarios puedan enviar mensajes privados a la página.

o Asegurarse de que todos pueden publicar en la biografía de la página.


6 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

o Asegurarse de que está activada la opción de "Respuestas" para poder contestar a los comentarios de la página en modo conversación (las respuestas a un comentario aparecen directamente debajo de este).

o Introducir todos los detalles que pueda en la categoría Información.

Elegir una foto de perfil. Recordando que las proporciones más adecuadas son de 180x180 píxeles.

Pulsar en el botón Ver página y ahora añadir la foto de portada. Su tamaño ideal es de 851x315 píxeles, pero si es más grande, se redimensionará.

Añadir una publicación en forma de hito indicando que hoy se ha creado la

página. Incluir una fotografía o imagen adecuada.

Acceder con su perfil personal a Facebook y cambiar a la página de empresa

que creo en la actividad anterior.

Estudiar la información que pueda obtener en la pestaña Actividad. Si se trata

de una página de nueva creación, no va a encontrar gran actividad, pero por lo menos le interesa reconocer las secciones que hemos estudiado.

Acceder a las Estadísticas y comprobar que aparecen los detalles que hemos

visto durante la lección. Si se trata de una página que tiene tiempo, podrá comprobar e interpretar estas estadísticas.

2. Realizar un blog personal

7 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.


1. Realizar una página Web aplicando los conceptos adquiridos en el módulo usando Dreamweaver.

8 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.


1. Vamos a crear una lista inicial de palabras clave candidatas. Es conveniente disponer de una hoja de cálculo como Excel o similar

Vamos a hacer el estudio para un blog ficticio que tratará el tema de los productos naturales en general, o uno mismo que sea de tú propiedad. Para ello, partiremos de estas palabras clave: productos naturales

Debes realizar una búsqueda de palabras clave partiendo de esta palabra inicial. Anota todas las palabras que vayas encontrando en una hoja de cálculo con dos columnas: una para las palabras "adecuadas" y otra para las palabras "negativas".

Se pide:

• Realiza la búsqueda de esta palabra en Google y comprueba las palabras que proporciona Google en las búsquedas relacionadas y en las sugerencias a medida que escribes.

• Analiza los sitios que aparezcan en primera y segunda posición en los resultados naturales. Anota aquellas palabras clave que encuentres en ellos relacionadas con el tema. Recuerda mirar en aquellos lugares donde suelen aparecer esas palabras clave desde el punto de vista del SEO.

Utiliza la Herramienta Planificador de palabras clave de AdWords para ampliar la lista que tienes hasta el momento.

2. Clasificar las palabras clave que realmente valen la pena trabajar en SEO para nuestro blog sobre productos naturales o el nuestro propio.

Deberás partir de la lista de palabras clave candidatas conseguida durante la actividad anterior.

9 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

Se pide:

1. Lo primero que tienes que hacer es clasificar las palabras clave en grupos de temática similar y diferente al resto. Crea una hoja de cálculo para cada grupo y copia allí las palabras correspondientes, dejando la primera hoja de cálculo como está, es decir, con todas las palabras clave que tenemos hasta el momento.

2. Calcular el volumen de búsquedas para las palabras clave. Utiliza la Herramienta Planificador de palabras clave de AdWords y obteniendo este dato atendiendo a la concordancia amplia. Incluye el volumen de búsquedas locales. Elimina los valores de la competencia que tienes hasta el momento.

Filtra la lista de palabras de forma que te quedes únicamente con aquellas que tengan, al menos, 1000 búsquedas locales mensuales en concordancia amplia.

Ahora tienes que calcular la competencia para las palabras clave que han quedado. Incluye esos datos en la hoja de cálculo.

Calcula el valor del índice KEI para cada palabra, utilizando la fórmula más empleada y sencilla:

Añade este índice en la hoja de cálculo.

Elige 5 palabras para SEO adicionales a la palabra inicial utilizando los resultados de KEI obtenidos.

10 | P á g i n a

Tecn

olog

ía d

e la

Info

rmac

ión

y la

Com

unic

ació

n.

PROYECTO FINAL

1. Redactar un proyecto tecnológico para una empresa real o ficticia aplicando todos los conocimientos adquiridos durante el desarrollo de los módulo del curso

Manual TIC y Dossier Practicas

Documents

Transcript of Manual TIC y Dossier Practicas