¿Usabilidad, accesibilidad? (parte 3)

TRANSCRIPCIÓN

Vamos a entrar ahora ya en el tema de la usabilidad y la accesibilidad web.

En internet podéis encontrar páginas de todo tipo, páginas que son fáciles de usar y páginas que son difíciles de usar. Seguramente todos habréis sentido mucha frustración en muchas páginas, páginas que entráis, no sabéis usar, no sabéis lo que tenéis que hacer y seguramente al final, en poco tiempo, las abandonáis.

Aquí os he puesto un ejemplo de una página horrible, una página que incumple pues prácticamente todos los principios básicos de cómo hacer una página bien. Es una exageración, os pongo aquí, os dejo la dirección de este sitio web para que lo que visitéis, incluso tiene música, lo que nunca hay que hacer en un sitio web, poner música a una página web, pues este sitio lo tiene.

Pero no hay que irse a casos tan extremos. Aquí por ejemplo os he puesto pues un problema grave que tiene un sitio web de una compañía ferroviaria importante de España. En realidad, ya estoy diciendo el nombre de la empresa, es Renfe porque no hay otra empresa ferroviaria en España y esta web tiene graves problemas de usabilidad. En concreto, aquí os he puesto cuatro capturas de cuatro formularios para buscar o comprar un billete de tren. ¿Y qué es lo curioso de estos cuatro formularios? Pues que en cada uno de ellos, la introducción de la fecha en la que queremos realizar el viaje se introduce de una forma distinta.

Podemos ver que en en la primera captura, la de la parte superior, se tiene que elegir el día, el mes y el año por separado, existen tres listas desplegables para cada una de las partes de la fecha.

En la segunda imagen, la que está el centro a la izquierda, pues se introduce a través de un calendario que se muestra. Ahí hay un icono donde se pulsa y se activa un calendario del mes y se elige la fecha.

A la derecha vemos, otra vez lo mismo, pero con otro icono y con otro calendario y en la parte inferior volvemos a ver lo mismo, con otro icono distinto.

Tenemos como digo cuatro formas distintas de seleccionar una fecha.

Además vemos también que las etiquetas para introducir las fechas cambián de una página a otra. En el primer formulario vemos que pone “día, mes y año”; en el segundo pone “entrada, salida”; en el tercero pone “salida regreso”; y en el cuarto por último pone “ida y vuelta”.

El usuario de esta web tiene que aprender, tiene que ir viendo en cada formulario cómo introducir los datos, porque no se lo está pidiendo de una forma coherente, de una forma consistente. Como digo, esto es un error tremendo.

¿Los problemas de usabilidad suponen un coste para las empresas? Pues sí, desgraciadamente sí.

Y aquí os he dejado dos ejemplos claros de ello.

El primero es de la empresa Expedia, la empresa Expedia se dedica al viaje, a la compra de billetes, reserva de hoteles por internet y hace un par de años salió esta noticia de como Expedia pues se ahorró o ganó 12 millones de dólares más simplemente eliminando un campo de un formulario.

Esta es la web de Expedia y en concreto era este formulario. A la izquierda podéis ver el formulario original y a la derecha podéis ver el formulario modificado una vez que se eliminó ese campo. El campo lo he marcado aquí, es el campo “Company name”. Se solicitaba junto con el nombre de la persona se solicitaba el nombre de la empresa y esto se solicitaba cuando éste tenía que introducir los datos de la tarjeta de crédito para realizar el pago.

¿Y qué se descubrió? Pues mucha gente, en el campo “Company name” introducía el nombre de su banco, creía que le estaban pidiendo el nombre del banco de la tarjeta de crédito. Y luego en la parte inferior, que pone “Primary billing address” pensaban otra vez que había que introducir la dirección de su banco, no su dirección, sino la dirección del banco.

¿Qué ocurría? Esto confundía a la gente, muchos usuarios, muchos clientes, introducían esos datos y luego cuando se iba a validar la tarjeta de crédito con la dirección introducida, como no coincidía, se anulaba la compra y por eso, la empresa esta, Expedia perdía dinero, perdía compras.

Al eliminar ese campo logró aumentar su facturación en 12 millones de dólares como digo.

Otro caso muy famoso y más exagerado es el que se conoce como “el botón de los 300 millones de dólares”. Este es un poco más complejo de entender, pero he hecho un gráfico para explicarlo.

Ocurría lo siguiente. Este caso es de una tienda de venta de productos online y cuando ya se tenía que hacer el “check out”, finalizar la compra, el usuario se tenía que registrar.

Muchos usuarios estaban ya registrados y al tener que identificarse, meter el usuario y la contraseña, no se acordaban de la contraseña.

El formulario ofrecía la opción de solicitar un nuevo password, resetearlo.

El 40% de los usuarios que finalizaban la compra no se acordaban del password y activaban la opción de resetear el password. Pero, como era un proceso complejo, de ese 40% sólo el 25% lograba resetear el password.

Estamos ya con un 10% del 100% total. Y de ese 25% que lograba resetear el password, solamente un 20% finalizaba la compra, el resto pues abandonaba.

Podemos ver entonces al final que de ese 40% de personas que tenían problemas porque no se acordaban de el password, sólo un 2% finalizaba la compra; luego un 38% de los usuarios que tenían intención de compra, al final no compraban por la complejidad del sistema, por tener que recordar la contraseña y no lograr resetear la contraseña.

¿Qué hicieron en este sitio web? Cambiaron el sistema y permitieron la compra sin tener que identificarse, es decir, comprar como usuario invitado y al cambiarlo, en la primera semana del cambio aumentaron sus ventas en seis millones de dólares. Y en el primer año, los 300 millones de dólares. Simplemente un cambio que se debía a entender cómo se comportaban los usuarios, qué problemas tenían los usuarios.

¿Qué consejos os puedo dar para mejorar la usabilidad web?

Bueno, necesitaríamos horas y horas porque hay infinidad de consejos y sobre todo hay algo muy difícil, y es que los consejos no los tenéis que tomar como leyes que siempre hay que aplicarlos: hay que ver el contexto y decidir si conviene o no conviene usar los consejos.

Lo que sí que os puedo decir, os vuelvo a repetir el consejo de piensa en los usuarios, pero sí que os pueda recomendar dos gurús que os aconsejo que consultéis, que leáis artículos de ellos, que leáis libros y aprenderéis bastante.

El primero se llama Jakob Nielsen, lleva ya 20 ó 30 años dedicándose a la usabilidad y casi 20 años a la usabilidad web.

Tiene una página web muy famosa donde podéis encontrar casi 500 artículos, donde os van a explicar multitud de cosas y cientos de consejos. Y además también ha publicado varios libros.

Por ejemplo, aquí tenemos “Priorizando la accesibilidad web”.

Os pongo simplemente dos consejos. El primero nos dice “Pregúntate si alguien que sólo lea las dos primeras frases de tu página obtendrá la información que quieres transmitir”. La gente no dedica minutos y minutos a visitar una página web, la gente tiene cosas más interesantes que hacer. En una página web hay que vender claramente la idea, el objetivo, el propósito.

Si por ejemplo lo que queremos es vender un producto a través de una página web, lo que se llama la llamada a la acción, es decir, la llamada a la compra, tiene que estar claramente distinguida, se tiene que ver y además repetirla por muchas partes de la página.

El otro consejo nos dice “Con pocas excepciones, la gente visita la Web por su utilidad, no por su belleza. Tener un sitio visualmente atractivo es bueno, por supuesto, pero el contenido es sagrado. Después de todo, cuando la gente escribe sus preguntas en los motores de búsqueda, no pregunta por los atributos estéticos – está buscando información”.

Desgraciadamente, muchas veces prima el diseño visual, llega el diseñador e impone su gusto estético por encima del contenido, por encima de la información. Hay que buscar un equilibrio, pero como digo desgraciadamente muchas veces triunfa el diseñador.

Otro gurú que os recomiendo que consultéis y que sigáis se llama Steve Krug. También tiene varios libros, el más famoso es “No me hagas pensar”, eso podría ser otro consejo, no hagas pensar al usuario que visita tu página web. Y, recientemente publicó su segunda edición “No me hagas pensar revisitado”, de aquí os destacó tres consejos.

No me hagas pensar.

No importa cuántas veces tengo que hacer clic, siempre y cuando cada clic es una lección inconsciente e inequívoca.

Deshágase de la mitad de las palabras de cada página, a continuación, deshágase de la mitad de las que quedan.

Hay que ser breves, simples en lo que escribimos en una página web, porque vuelvo a decir, la gente no se detiene a leerlo todo. Así que, hay que ser directos y expresar claramente las ideas y el propósito de
las páginas web.

Ya para finalizar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas para contactar conmigo, a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora.

Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es.

Muchas gracias por tu atención.

¿Usabilidad, accesibilidad? (parte 2)

TRANSCRIPCIÓN

Así un poco para resumir, muchos autores dicen que la usabilidad se compone de tres factores. Se compone del sentido común, que a veces es el menor de los sentidos, se compone de simplicidad y se compone de un buen diseño.

Cuando tenemos en cuenta estos tres factores, sentido común, simplicidad y diseño, y nos preocupamos de lograr lo mejor en cada uno de ellos, pues estamos logrando una buena usabilidad.

Veamos ahora qué es la accesibilidad.

Asociado a la accesibilidad existen otros conceptos que significan más o menos lo mismo: diseño inclusivo, diseño universal o diseño para todos.

Es muy típico esta situación: unas escaleras, unas gradas para acceder a cierto sitio, a un edificio. ¿Y qué ocurre?

Pues estas gradas no son accesibles para muchas personas con discapacidad. Por ejemplo, una persona que vaya en silla de ruedas. Para solucionar este problema, este problema de falta de accesibilidad, pues ¿qué se suele hacer?

Se suelen construir rampas. Pero en muchas situaciones ocurre como he puesto en esta imagen: la rampa es una entrada secundaria, se indica de forma explícita en este caso acceso para personas de silla de ruedas en un lateral. Y esto lleva implícito una discriminación, un trato distinto a las personas con discapacidad. Es una solución, pero no es
la mejor de las soluciones. Como he dicho antes, hay que intentar realizar un diseño inclusivo, un diseño para todos, no soluciones parciales para distintas personas, sino un diseño que englobe a todas las personas ya sus particularidades.

Por lo menos esta rampa que muestro aquí en esta imagen la puede usar una persona en silla de ruedas. Pero a veces se llega a situaciones tan estúpidas y tan poco útiles como esta rampa que vemos aquí, con una pendiente excesiva que una persona que use en silla de ruedas no la va a poder usar. Si intenta bajar por esta rampa se va a matar. O encontramos otras situaciones igual de estúpidas, como esta otra rampa que sí, va saltando, va salvando los escalones, pero el último tramo no hay rampa, ¿entonces para qué sirve esta rampa?

Como digo, son soluciones estúpidas, soluciones inútiles que ocurren más de lo que se cree en la la vida diaria.

¿No se puede hacer mejor, no se pueden plantear soluciones inclusivas para todos y que realmente sean buenas?

Sí, lo único que hay que hacer es pensarlo un poco mejor.

Aquí por ejemplo, podemos ver unas imágenes de unas escaleras, unas gradas que llevan incluidas las rampas y queda además bastante elegante y bastante bonito.

Aquí podemos ver otra imagen de la misma escalera, de las mismas gradadas y no es únicamente de este edificio, este edificio está en Chicago, es un edificio museo, aquí pues claro, han intentado hacerlo bastante elegante. Pero hay situaciones en la calle. Este es otro edificio, en otra ciudad y podemos ver cómo se ha integrado correctamente la rampa con las escaleras.

Una pregunta que mucha gente se hace es: ¿la accesibilidad es sólo para las personas con discapacidad? Por ejemplo, las rampas que hemos visto, ¿ayudan solamente a las personas que van en silla de ruedas?

Pues no, evidentemente no. Una rampa la pueden usar otras personas que no sean discapacitadas bajo ciertas situaciones. Entonces, es un error, como se suele hacer y cómo se pone aquí en esta imagen, pues señalar las ayudas para las personas con discapacidad, señalarlas como que son ayudas solamente para ellos, pues es un error. Aquí volvemos otra vez un poco al tema de la discriminación.

¿En qué situaciones se podría usar una rampa por personas que no sean discapacitadas?

Aquí os he puesto tres ejemplos, pero seguro que podemos encontrar muchos más. A la izquierda tenemos pues una mamá que va con el carrito de bebé y que le va a venir muy bien el que haya una rampa para salvar las gradas de un edificio.

O en la fotografía del centro tenemos a una repartidora que va con una carretilla y que también le va a venir muy bien la rampa.

O a la derecha tenemos a un señor que va con muletas porque ha tenido un accidente y también le va a venir muy bien subir por la rampa en vez de por la gradas.

Como vemos, las ayudas para las personas con discapacidad también ayudan al resto de personas en ciertas situaciones. Y podemos encontrar más ejemplos.

Este es el acceso a un sistema de transporte urbano, donde tenemos pues un pequeño elevador para salvar estas gradas. Otra vez, no solamente ayuda a una persona que vaya en silla de ruedas, sino que también ayuda pues a esta mamá que va con el cochecito de bebé.

O aquí tenemos por ejemplo unas fuentes a dos alturas, una fuente pública de agua y tenemos a la derecha una que está otra vez mal señalada porque indica que solamente para una persona con discapacidad, una persona que va en silla de ruedas, pero seguro que a todos vosotros se os ocurre que la fuente de la derecha que está más baja también va ayudar pues a los niños, por ejemplo.

Para resumir un poco lo que hemos visto de usabilidad y accesibilidad, ¿qué consejos os podría yo dar para mejorar la accesibilidad y usabilidad de cualquier cosa, no solamente de páginas web?

Ahora después hablaré de las páginas web, pero de cualquier cosa, cualquier diseño de un objeto, de un servicio, de un producto, ¿qué tres consejos básicos os puedo dar?

Pues son tres consejos muy sencillos de entender, lo difícil es aplicarlos. El primero es piensa en el usuario, el segundo es piensa en el usuario y el tercero es piensa en el usuario. Es decir, lo primero que debes hacer cuando te plantees el diseño de algo es pensar en el usuario que lo va a utilizar, ponte en su piel, mira a ver cuáles son sus requisitos, sus necesidades e intenta hacerlo para que el usuario no tenga dificultades en su uso. Y así tendrás usuario felices, usuarios contentos.

Si estamos, por ejemplo pues en una empresa, pues tendremos a usuarios felices que comprarán, seguirán comprando nuestros productores.

Si por ejemplo estamos en el caso de educación, yo soy profesor, pues yo tendré alumnos que seguramente estudiarán mejor, aprenderán mejor y estarán contentos conmigo.

Lo podemos hacer en cualquier contexto, pensar en el usuario. Y por tanto no pienses en ti, no pienses en hacer las cosas más fáciles desde tu punto de vista, sino piensa en el usuario final que va a usar tu producto o servicio.

Ya para finalizar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas para contactar conmigo, a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora.

Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es.

Muchas gracias por tu atención.

¿Usabilidad, accesibilidad? (parte 1)

TRANSCRIPCIÓN

Muy buenos días amigos de CIESPAL, bienvenidos una vez más a este espacio de encuentros virtuales.

En esta ocasión les vamos a ofrecer la conferencia sobre diseño de páginas web titulada: Usabilidad, accesibilidad, objetivos diferencias y semejanzas de cada disciplina.

En esta ocasión contamos con la presencia de Sergio Luján Mora. Él es un especialista español que
forma parte del proyecto Prometeo emprendido por el gobierno con el objetivo de mejorar la educación superior en nuestro país.

Sergio luján mora es profesor titular de universidad del Departamento de Lenguajes y Sistemas Informáticos de la Universidad de Alicante en España. Obtuvo su grado de doctor ingeniero
informático en la Universidad de Alicante en el año 2005.

Sus temas principales de investigación incluyen la accesibilidad y la usabilidad web, el desarrollo de las aplicaciones web, el e-learning, los cursos de tipo massive open online courses y la programación orientada a objetos. Es profesor de las asignaturas “Programación hipermedia” y “XML”, y ha sido profesor de las asignaturas “Programación y estructura de datos” además de “Programación en internet”. Diversos trabajos de investigación, libros y también proyectos nacionales e internacionales.

Ha impartido diversos cursos sobre programación web, desarrollo de aplicaciones web y accesibilidad y usabilidad, tanto en España como en otros países: Argelia, Ecuador, Kazajistán, Kirguistán, México, Moldavia, Polonia y Rusia.

En esta ocasión nos acompaña para esta charla virtual para la cual hemos establecido el hashtag con el cual
ustedes pueden participar y hacer sus preguntas numeral DiseñoWeb, con eñe, numeral DiseñoWeb, para que ustedes puedan hacer sus preguntas.

Pueden seguir también a Sergio a través de la cuenta de Twitter @sergiolujanmora con la que también estaremos haciendo a las menciones correspondientes desde nuestras cuentas y nuestros espacios.

La modalidad, recuerden, 35 a 40 minutos de charla y luego daremos paso a todas las preguntas que se planten tanto desde el área de chat de la página de CIESPAL cuanto las que sean planteadas
con el numeral dentro de las redes sociales.

Sergio, bienvenido un gusto tener de aquí en CIESPAL.

Muchas gracias a CIESPAL por la amable invitación para realizar esta charla y también quiero dar las gracias al gobierno de Ecuador, ya que gracias al programa Prometeo estoy realizando aquí una estancia en la Escuela Politécnica Nacional.

Como acaban de presentar, la charla que voy a realizar va a tratar sobre la usabilidad y accesibilidad, qué
tienen en común y qué tienen de diferente.

La primera parte de la charla la voy a dedicar a hablar de la usabilidad y de la accesibilidad en el mundo real, en el mundo físico. Y luego ya, trataré estos temas en las páginas web.

La presentación que voy a usar está publicada en la siguiente dirección, si no está ahora mismo ya publicada, en breve, en un par de horas estará disponible, un documento pdf con toda la presentación.

Y como han explicado pues, vuelvo a recordar a través de Twitter se puede interaccionar con esta
presentación, con esta charla a través del hashtag DiseñoWeb y a través de los identificadores de usuario @ciespal o través del mío @sergiolujanmora.

Bien, ¿qué es la usabilidad, qué es la accesibilidad?

Bueno, espero que al final de esta presentación pues todos los que estáis ahí detrás de la cámara tengáis una idea de que es cada una de estas disciplinas.

Dejaré para el final de la charla el dar una definición.

Lo primero que vamos a ver son ejemplos reales de usabilidad y accesibilidad o más bien justo de lo contrario, de falta de usabilidad y accesibilidad.

Entonces, empecemos con la usabilidad.

La usabilidad normalmente se define como la facilidad de uso. Hay trabajos sobre la usabilidad desde
hace bastante tiempo. Uno muy famoso es el libro que se publicó en el año 1988 por Don Norman que llevaba por título “La psicología de las cosas de todos los días”, de las cosas diarias.

Posteriormente, en ediciones posteriores, le cambió el título a “El diseño de las cosas de todos los días”. Y en la portada aparece una tetera que se ha convertido en un símbolo de la usabilidad, esa tetera como podemos ver pues no se puede usar, no se puede verter su contenido. Es un claro ejemplo de un diseño erróneo, un diseño que no es usable.

Ese diseño que mostrado pues es un poco una exageración, pero en la vida diaria encontramos cosas muy parecidas, diseños que nos dificultan la vida y no hay que irse muy lejos.

Por ejemplo, aquí tenemos una cocina con cuatro fuegos, tenemos ahí los controles para ir abriendo o cerrando cada fuego y tenemos unos dibujos para saber cuál corresponde a cada uno. Pero si no tuviésemos esos dibujos, como acabo de hacer ahora, los he tapado, sería bastante difícil saber cuál es para cada fuego. Esto es un error de diseño, esta cocina, pues hay que aprender a usarla y uno de los consejos de un buen diseño, de un buen diseño usable es que el usuario no tenga que aprender a usar las cosas, sino que sea intuitivo, que sea natural.

Desgraciadamente, es difícil a veces lograr ese objetivo, hacer que las cosas sean simples e intuitivas. Pero ahí digamos está la gracia de la usabilidad, lograr a ello, lograr ello.

Aquí tenemos otro ejemplo de cocina donde la han resuelto pues, como podemos ver, dibujando unas líneas, unas líneas que conectan cada control con cada fuego.

No hace falta llegar a esto, hay soluciones más elegantes, lo que pasa que hay que pensarlas un poco. Por ejemplo, tenemos esta cocina donde la disposición de los controles sigue la misma disposición que los
fuegos. Aquí es evidente qué control corresponde a cada fuego. Aquí ya hemos logrado un mejor diseño y vemos ya una escala de usabilidad, desde difícil de usar a fácil de usar.

Vamos a ver otro ejemplo, un ejemplo muy importante porque éste también nos afecta al día a día cuando trabajamos con ordenadores y dispositivos electrónicos, y es el tema de los conectores USB.

El conector USB se desarrolló en el año 1996. Aquí tenemos el conector macho y aquí tenemos el socket el conector hembra donde se introduce.

Ahora mismo, en este dibujo están alineados, se va a introducir correctamente. Sin embargo, si el conector de la izquierda estuviese vuelto al revés, no se podría introducir.

El diseño del conector USB es un muy mal diseño, porque obliga al usuario a introducirlo correctamente en la dirección adecuada.

Yo conozco gente que ha forzado y ha forzado, y al final lo ha logrado introducir en el sentido contrario. Eso sí, al final ha roto el ordenador o ha roto el dispositivo de memoria USB.

No entremos tampoco en el tema de las de los distintos dispositivos USB, de los distintos tamaños que existen. Eso es otro problema que sufrimos todos los días.

Y esto no es un tema que afecte a pocas personas, afecta a todo el mundo. Tanto que incluso se han hecho chistes sobre el tema o incluso podemos encontrar páginas en Facebook de gente que está enfadada con este tema. Por ejemplo, esta es una que dice “I hate plugging in the USB cable the wrong way”, o tenemos esta otra que dice “Siempre intento insertar la memoria USB de la forma incorrecta la primera vez”.

¿No se podría haber hecho un diseño como los enchufes de corriente? Del diseño de los enchufes de corriente existe desde hace decenas de años y un enchufe de corriente lo podemos enchufar en cualquier sentido y no plantea ningún problema.

Pues afortunadamente, hemos tenido que esperar, como vemos, desde el año 96 hasta este año, hasta el 2014, hemos tenido que esperar 18 años, para que los ingenieros que desarrollaron el conector USB desarrollen una solución mejor.

Y es que justo hace dos días se publicó esta noticia, y es que ya por fin han desarrollado el conector USB reversible. Esto saldrá al mercado en breve, como digo esta noticia es de hace dos días y este conector nuevo USB, el de tipo C, se podrá conectar en cualquier sentido. Ya no tendremos que luchar y luchar por intentar meterlo en la posición correcta. Por fin un diseño usable un buen diseño del conector USB.

Ya para finalizar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas para contactar conmigo, a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora.

Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es.

Muchas gracias por tu atención.

Google+: inserción de una publicación

Un nuevo vídeo de iDESWEB que se ofrecerá a través de la iniciativa Actívate patrocinada por Google.

[kml_flashembed movie=”http://www.youtube.com/v/QQRV2e9PFhc” width=”560″ height=”315″ wmode=”transparent” /]

Transcripción:

Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te voy a explicar cómo puedes insertar una publicación de Google+ en una página web.

Las publicaciones insertadas ofrecen varias ventajas:

La publicación se actualiza si el autor de la misma la edita en cualquier momento.
También se puede realizar +1 sobre la publicación.
Y se puede comentar o [PULSAR] seguir al autor, todo ello sin abandonar la página en la que está insertada la publicación.

Muy importante, lo que te voy a mostrar a continuación sólo funciona si la página está publicada en Internet o en un servidor web propio. Con una página local no funciona.

Insertar una publicación de Google+ es muy sencillo. Podemos insertar cualquier publicación que encontremos, pero en mi caso voy a publicar algunas de mis publicaciones de mi perfil.

En primer lugar estoy ya dentro de mi cuenta, aunque en realidad no es necesario. Busco una publicación, por ejemplo esta, “Cómo comprar un dominio de Internet”, y en esta flecha que encontramos en la esquina superior derecha accedo a este menú contextual. Dentro de este menú voy a elegir la opción “Insertar publicación”.

Esta opción me facilita un fragmento de código que debo de copiar y pegar en la página web. Lo copio y me lo llevo a una página web de ejemplo, una página web sencilla que tengo ya preparada.

Al pegar el código encontramos que hay dos partes. En la primera parte se nos indica que tenemos que colocar esta etiqueta, la debemos de colocar en el head o justo antes de la etiqueta body de cierre.

En realidad funcionaría si lo dejo en este sitio, pero voy a seguir las instrucciones que se me facilitan y lo voy a pegar en el head. Y la segunda parte es la publicación en sí, el widget como lo llama aquí este comentario y lo voy a dejar en el cuerpo, en el body.

Si yo intento ejecutar esta página web en local, se intenta cargar algo pero no se muestra nada. Como te he explicado antes, la página no se puede ejecutar, no se puede probar con el protocolo file, en local no funciona. La debemos ejecutar a través de Internet o a través de un servidor web propio.

En mi caso, he instalado un servidor web propio y si ejecuto la página, efectivamente me aparece la publicación, la misma publicación que aparece en mi perfil de Google+. Y esta publicación funciona, puedo acceder al perfil del autor, del usuario, puedo seguir al usuario, o incluso en este caso como es una publicación de tipo vídeo puedo ejecutar y poner en marcha el vídeo que funciona sin problemas.

Como ves, es muy sencillo, simplemente localizamos una publicación de Google+ que queremos insertar, pulsamos sobre esta flecha de la esquina superior derecha, buscamos “Insertar publicación” y copiamos el código que se nos proporciona a nuestra página web.

Sencillo, ¿verdad?

Ya para terminar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora.

Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es.

Muchas gracias por tu atención.

Google+: inserción de una insignia

Un nuevo vídeo de iDESWEB que se ofrecerá a través de la iniciativa Actívate patrocinada por Google.

[kml_flashembed movie=”http://www.youtube.com/v/galzhHiKgMg” width=”560″ height=”315″ wmode=”transparent” /]

Transcripción:

Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te voy a explicar cómo puedes insertar una insignia de Google+ en una página web.
Esto te ofrece varias ventajas:

Te permite enlazar tu perfil de Google+ desde una página web cualquiera.
Te puede ayudar a obtener más recomendaciones, que influyen en los resultados de búsqueda de Google.
Y por supuesto, también te puede ayudar a lograr más seguidores y obtener más visitas en tu sitio web y en tu perfil.

Muy importante, lo que te voy a mostrar a continuación sólo funciona si la página está publicada en Internet o en un servidor web propio. Con una página local no funciona.

Para insertar la insigna vamos a utilizar este asistente que ofrece la plataforma Google+.

Este asistente es muy sencillo de utilizar.

En primer lugar debemos estar dentro de nuestra cuenta de Google+, ya que el código que se va a generar identifica nuestro perfil, nuestra cuenta. Si no es así, el primer paso es acceder a nuestra cuenta de Google+.

Tenemos aquí varias opciones para configurar cómo se va a mostrar nuestra insignia.

Tenemos también unas opciones avanzadas que te dejo a ti que explores.

En primer lugar podemos elegir cómo queremos que se muestre la insignia, con este formato, la insignia completa o simplemente como un icono. Según la opción que elijamos el código que se genera cambiará. Voy a dejarlo en insignia.

A continuación tenemos dos formatos de diseño. El formato retrato, que es este formato en forma de cuadrado o el formato paisaje que es apaisado.

Podemos también modificar el ancho de nuestra insignia, la podemos tener más pequeña o la podemos tener más grande. Voy a dejarlo otra vez en 300.

Luego podemos elegir el tema, claro u oscuro, el que más se adecúe al diseño de nuestra página web. Y luego tenemos dos opciones más de foto de portada y de eslogan por si queremos incluir más información en nuestra insignia.

Estos dos tipos de insignia, insignia e icono, se explican en la propia página web. En la parte inferior, si hacemos un scroll, veremos las dos posibilidades, como insignia o como icono, tanto para un perfil como para una página web y con los distintos tamaños con los que podemos jugar.

Bien, una vez que hayamos configurado nuestra insignia simplemente tenemos que copiar este código que se nos proporciona. Tenemos que copiar todo el código, debemos de asegurarnos de que esté seleccionado todo el código. Lo copiamos y me lo voy a llevar a una página web de ejemplo que tengo ya preparada.

Es una página web sencilla y aquí voy a copiar el código que se me ha proporcionado.

El código se compone de dos partes.

Esta primera parte se nos indica que “Inserta esta etiqueta en la sección “head” o justo antes de la etiqueta “body” de cierre”. En realidad, la podría dejar aquí y ya funcionaría, pero voy a seguir las instrucciones y la voy a insertar en la sección head.

Y la otra parte simplemente se deja donde queremos que aparezca la insignia. Pues por ejemplo la dejo aquí en este punto del cuerpo de la página.

Si yo intento ejecutar la página web en local, se intenta cargar algo pero no aparece nada. Como te he explicado antes, la página se debe servir mediante http, a través de Internet o a través de un servidor web local. En este caso yo he instalado un servidor web local en mi ordenador y al ejecutar la página aparece la insignia que me permite enlazar con mi perfil de Google+.

Recuerda, en local no la puedes ejecutar, no aparecerá nada.

En el siguiente vídeo te voy a explicar cómo cualquier publicación que tengamos en Google+ la podemos insertar en una página web.

Ya para terminar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora.

Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es.

Muchas gracias por tu atención.

Introducción al posicionamiento (SEO): técnicas básicas (2)

Un nuevo vídeo de iDESWEB que se ofrecerá a través de la iniciativa Actívate patrocinada por Google.

[kml_flashembed movie=”http://www.youtube.com/v/fsijvLKAh4Q” width=”560″ height=”315″ wmode=”transparent” /]

Transcripción:

Hola, soy Olga Carreras, consultora en experiencia de usuario y autora del blog Usable y accesible.

En el primer vídeo os expliqué los conceptos básicos del posicionamiento orgánico en buscadores, los objetivos de las técnicas SEO y por qué son importantes para vuestros desarrollos web.

En el segundo vídeo repasamos 4 técnicas on page básicas para facilitar el rastreo e indexación de tu contenido y mejorar su posicionamiento orgánico en los buscadores.

Vimos cómo crear títulos de página únicos y precisos.
Cómo utilizar correctamente el meta “description”.
Cómo mejorar las URLs del sitio.
Y cómo facilitar la navegación por el mismo.

En este vídeo vamos a repasar 4 técnicas on page más y para ello seguiremos la Guía de Google sobre optimización para motores de búsqueda. Todos los buscadores, en el fondo, funcionan de forma similar, así que estas técnicas te servirán también para mejor el posicionamiento orgánico de tus página en todos ellos.

Una de las técnicas para mejorar el posicionamiento, y quizás una de las más importantes, es ofrecer contenidos y servicios de calidad, porque crear contenido interesante y útil será probablemente el factor que más influya de los que estamos tratando.

El buen contenido es compartido fácilmente por los usuarios, atrae nuevas visitas, fideliza a los usuarios y ayuda a crear una buena reputación online. Diferénciate por tanto ofreciendo contenido único y exclusivo, servicios novedosos y útiles que otros sitios no ofrezcan.

Seis recomendaciones en relación con tus contenidos son:

En primer lugar escribe textos bien redactados, fáciles de leer y de entender.

Divide tu contenido en fragmentos lógicos, organizados en párrafos no muy extensos y precedidos de encabezados.

Evita el contenido duplicado.

Piensa las palabras que los diferentes usuarios del sitio utilizarían en la búsqueda para encontrar tu contenido y úsalas en él. Recuerda lo que comentamos en el primer vídeo sobre conceptos básicos de SEO, las “keywords”, las palabras claves por las que quieres posicionarte, no es algo que debas pensar ahora, cuando redactas tus contenidos, es algo que debes haberte planteado desde el inicio del proyecto.

Google Adwords tiene una herramienta que puede serte de gran utilidad, pues te ayuda a descubrir variaciones de palabras clave y el volumen aproximado de búsquedas para cada una ellas. Por su parte, Google Trends permite ver tendencias de búsqueda y realizar comparaciones por ubicaciones e intervalos de tiempo

No uses texto en formato imagen cuando quieras que ese texto forme parte del contenido.

Y por último, ten siempre presente que creas contenido principalmente para las personas, no para los motores de búsqueda. No escondas texto, ni insertes gran cantidad de palabras clave sin sentido o molestas para los usuarios.

Otra técnica importante es escribir textos de enlace de mejor calidad.

El texto del enlace da información a los usuarios y a los buscadores sobre la página con la que enlaza. Los textos de enlace de calidad facilitan a los usuarios moverse por tu sitio y a los buscadores entender sobre qué tratan las páginas a las que estás enlazando.

Los textos de enlace deben ser concisos, descriptivos y darles formato de enlace, subrayándolos, para que sean más fáciles de distinguir.

No recargues excesivamente los textos de enlace con palabras clave, no pienses solo en los buscadores, piensa sobre todo en tus usuarios.

La siguiente técnica es optimizar el uso de imágenes.

Las imágenes siempre deben incluir el atributo “alt”. Este atributo permite especificar un texto que proporcione la misma información o funcionalidad que pretende transmitir la imagen, salvo que sea una imagen decorativa, en cuyo caso lo dejaríamos vacío.

El texto incluido en el atributo “alt” será el texto que se verá si la imagen no se carga o el texto que se le leerá a los usuarios que usen un lector de pantalla.

Si usas una descripción de imagen adecuada y además usas un nombre de archivo descriptivo facilitarás que los buscadores entiendan e indexen correctamente tus imágenes, por ejemplo para la búsqueda de imágenes de Google.

La última técnica que vamos a tratar en este vídeo es la correcta utilización de las etiquetas de encabezado

Los encabezados se incluyen con las etiquetas h que tienen seis tamaños, <h1>, el más importante hasta el <h6>, el menos importante. Los diferentes tamaños de encabezado se utilizan para crear una estructura jerárquica del contenido, lo cual facilita a los usuarios la comprensión y la lectura del contenido, y a los motores de búsqueda la interpretación e indexación de la página.

Cinco buenas prácticas que debes seguir al crear tus encabezados son:

Usa una jerarquía lógica, sin saltarte niveles.
Úsalos para presentar la jerarquía de la página, no para dar formato al texto o conseguir un efecto visual, como un texto más grande o en negrita, para ello puedes usar un estilo definido en la CSS o etiquetas específicas como “strong”.
No simules un encabezado mediante estilos, por ejemplo no utilices una párrafo con tamaño de texto grande para simular un encabezado <h1>.
Los textos de tus encabezados deben ser descriptivos, claros e identificar el contenido que encabezan, pero breves y concisos.
Y por último, las palabras que incluyen los encabezados tendrán para el buscador mayor valor que las presentes en otras partes menos relevantes de la página, pero no los sobrecargues de palabras clave innecesarias.

En la guía de Google sobre optimización para los motores de búsqueda, que hemos ido siguiendo, encontraréis más técnicas relativas a la indexación de las páginas, como el uso del archivo robots.txt o el uso del atributo rel=”nofollow”;

En la guía se trata también la gran importancia que tiene que tus páginas se carguen rápidamente; u ofrece recomendaciones específicas para la optimización móvil, o para la promoción efectiva de contenidos para conseguir enlaces entrantes relevantes y de calidad.

Si queréis profundizar más en el tema os recomiendo el libro “Técnicas avanzadas de posicionamiento en buscadores”.

Y también os recomiendo mi capítulo “Accesibilidad y SEO”, incluido en el libro “Pionero y Hacedores de Diseño de Interacción”, disponible gratuitamente, donde os explico cómo estas técnicas no solo ayudarán a mejorar el posicionamiento de vuestras páginas sino también a mejorar su accesibilidad.

Ya para terminar, estas son las direcciones de mi blog, de mi web y de mi cuenta de Twitter. En ellas puedes encontrar información sobre mí y sobre mi trabajo, así como artículos relacionados.

Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es.

Muchas gracias por tu atención.

Introducción al posicionamiento (SEO): técnicas básicas (1)

Un nuevo vídeo de iDESWEB que se ofrecerá a través de la iniciativa Actívate patrocinada por Google.

[kml_flashembed movie=”http://www.youtube.com/v/DVQjYB7sg9E” width=”560″ height=”315″ wmode=”transparent” /]

Transcripción:

Hola, soy Olga Carreras, consultora en experiencia de usuario y autora del blog Usable y accesible.

En el vídeo anterior os expliqué los conceptos básicos del posicionamiento orgánico en buscadores, los objetivos de las técnicas SEO y por qué son importantes para vuestros desarrollos web.

En este vídeo vamos a repasar 4 técnicas básicas para facilitar el rastreo e indexación de tu contenido y mejorar su posicionamiento orgánico en los buscadores.

Para ello seguiremos la “Guía de Google sobre optimización para motores de búsqueda”. Todos los buscadores, en el fondo, funcionan de forma similar, así que estas técnicas te servirán también para mejor el posicionamiento orgánico de tus páginas en todos ellos.

Las técnicas que vamos a repasar son las que se denominan on page, es decir, aquellas que puedes aplicar en tus páginas; frente a las técnicas off page, que se centran en conseguir el mayor número de enlaces de calidad que apunten a nuestro sitio.

La primera técnica que vamos a tratar es crear títulos de página únicos y precisos.

Para ello usaremos la etiqueta “title”, que se incluye dentro del HEAD de la página.

Si tu página se muestra en la página de resultados, el contenido de la etiqueta “title” es, por lo general, lo que aparece en la primera línea del resultado.

Las palabras de la consulta que el usuario realizó estarán en negrita. En este caso se buscó “glosario accesibilidad”.

El título debe ser efectivo para las personas, pues será un elemento decisivo para que los usuarios decidan si la página es de su interés.

Pero también efectivo para los buscadores, pues les informa sobre qué trata la página y es un factor muy relevante para su posicionamiento.

Ten en cuenta que las palabras que incluye el título tendrán para el buscador mayor valor que las presentes en otras partes menos relevantes de la página.

Tres buenas prácticas en relación con el “title” de tus páginas son:

Tener un título único para cada página del sitio.

Debe ser conciso y no demasiado largo, de lo contrario, como se observa en el ejemplo en pantalla, solo se mostrará el comienzo del mismo. Se recomienda que no tenga mas de 70 caracteres.

Y en tercer lugar debe describir con precisión el contenido de la página. Usa las palabras clave más relevantes para ella pero sin rellenar con palabras clave innecesarias.

Si sigues estas buenas prácticas será menos probable que a Google no le guste tu etiqueta “title” y decida reescribirla por ti, como se ve en este ejemplo.

La segunda técnica recomendada para mejorar el posicionamiento de vuestras páginas es utilizar la metaetiqueta “description”.

Se incluye dentro del HEAD de la página y proporciona a los motores de búsqueda un resumen de la página.

Google puede utilizar este resumen para mostrarlo en el fragmento de texto (llamado snippet) que describe cada resultado de la búsqueda.

Si está bien redactado aumentan las probabilidades de captar la atención del usuario y de que seleccione nuestra página.

Aunque, otras veces, Google no muestra el contenido del meta “description”, como se ve en este ejemplo, sino que utiliza una parte relevante del texto de la página que concuerda con la consulta del usuario.

Tres buenas prácticas a la hora de redactar el meta “description” de tus páginas son:

En primer lugar utiliza una descripción única para cada página.

En segundo lugar cuida su extensión. El servicio de Herramientas de Google para Webmasters te indicará si tus descripciones son demasiado largas o demasiado cortas, o si están duplicadas en diferentes páginas. Lo habitual, en el caso de la descripción, es recomendar que no se sobrepasen los 150-160 caracteres.

Las Herramientas para webmasters de Google es una de las herramientas básicas que debes consultar, pues te ofrece mucha información útil, no solo sobre posibles errores en tus títulos o descripciones, sino también información sobre problemas de rastreo o indexación; sobre microformatos; sobre los enlaces entrantes, las palabras clave o las consultas de búsquedas, con volumen de impresiones y clics.

En tercer lugar, la última recomendación para las descripciones de tus páginas es que escribas una descripción de calidad que informe y a la vez cree interés, evitando las descripciones que solo contienen palabras clave

La tercera técnica que vamos a tratar es mejorar la estructura de la URLs

La URL de la página es uno de los elementos de un resultado de búsqueda.

Si la URL contiene palabras claves relevantes es más fácil de comprender, rastrear, enlazar y recordar.
Además proporciona a los usuarios, y a los motores de búsqueda, información adicional sobre la página, más allá de la que daría un ID de sesión o un nombre de parámetro.

Tres buenas prácticas para mejorar tus URLs son:
En primer lugar usa URLs con palabras relevantes para el contenido y la estructura del sitio. Evita URLs largas o con excesivas palabras clave. Evita URLs con parámetros innecesarios. Y evita URLs demasiado genéricas.

En segundo lugar utiliza una estructura de directorios simple que organice el contenido y facilite a los usuarios que visitan tu sitio saber dónde están dentro de éste. Trata de usar la estructura de directorios para indicar el tipo de contenido que se encuentra en esa URL.

Y en tercer lugar, evita que a una misma página se pueda acceder desde URLs diferentes. En caso contrario crea redirecciones 301 o usa direcciones URL canónicas, puedes consultar cómo hacerlo correctamente en el centro de ayuda de las Herramientas para webmaster de Google.

También es muy recomendable que tus página sean “responsive design”, es decir, que tus páginas se adapten a los diferentes dispositivos pero con un código y una URL única.

La cuarta técnica que vamos a tratar es facilitar la navegación en tu sitio, para que los usuarios encuentren rápidamente lo que buscan y para que los motores de búsqueda puedan rastrear eficazmente el sitio. Repasemos seis buenas prácticas para conseguirlo:

La primera es crear una jerarquía que permita llegar de forma fluida del contenido más general al más específico, evitando, como en el ejemplo, que sean necesarios muchos clics para llegar al último contenido

En segundo lugar usa migas de pan y que estas sean clicables y consistentes a lo largo de todo el sitio.

En tercer lugar incluye un mapa del sitio bien estructurado y en el cual cada elemento sea un enlace.

Incluye también un archivo sitemap XML para asegurar que los motores de búsqueda indexan todas tus páginas.
Puedes aprender cómo hacerlo en el centro de Ayuda de las Herramientas para webmasters de Google.

En quinto lugar, usa enlaces de texto para la navegación, así serán más fáciles de comprender y rastrear por los robots de los buscadores y mejorarás la accesibilidad de tu sitio.

Y por último crea una página de error 404 útil, coherente con el diseño del sitio y que no sea indexada por los buscadores (mediante el meta noindex o mediante el archivo robot.txt, puedes consultar la guía de Google que estamos siguiendo para ampliar información sobre este tema).

Ahora te invito a que veas la segunda parte de este vídeo, en el cual repasaremos otras 4 técnicas importantes para facilitar el rastreo e indexación de tu contenido y mejorar su posicionamiento orgánico en los buscadores.

Ya para terminar, estas son las direcciones de mi blog, de mi web y de mi cuenta de Twitter. En ellas puedes encontrar información sobre mí y sobre mi trabajo, así como artículos relacionados.

Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es

Muchas gracias por tu atención.

Introducción al posicionamiento (SEO): conceptos básicos

Un nuevo vídeo de iDESWEB que se ofrecerá a través de la iniciativa Actívate patrocinada por Google.

[kml_flashembed movie=”http://www.youtube.com/v/YpJcR1UWqMY” width=”560″ height=”315″ wmode=”transparent” /]

Transcripción:

Hola, soy Olga Carreras, consultora en experiencia de usuario y autora del blog “Usable y accesible”. En este vídeo os voy a explicar qué es SEO y por qué es importante para vuestros desarrollos web.

Realicemos una búsqueda en Google, vamos a buscar por ejemplo “hoteles”.

La página de resultados que muestra un buscador tras realizar una búsqueda se denomina SERP. En una SERP podemos distinguir dos tipos de resultados.

Los resultados naturales u orgánicos, en la parte central de la página, que son los que están basados en el algoritmo que aplica el buscador, de manera objetiva, para determinar que resultados son más relevantes para esa búsqueda concreta, por tanto no puede comprarse aparecer o no en los resultados orgánicos, o aparecer en una u otra posición.

El segundo tipo de resultados son los resultados patrocinados, anuncios publicitarios de pago, comprados mediante Google Adwords, situados encima y a la derecha de los resultados orgánicos.

SEO, “Optimización para Motores de Búsqueda” o más común en español “Posicionamiento en buscadores” o “Posicionamiento orgánico”, es el conjunto de técnicas para mejorar la visibilidad de un sitio web en los resultados de búsqueda orgánicos de los diferentes buscadores.

El objetivo principal es aparecer en las primeras posiciones para determinados términos de búsqueda o palabras clave.

Por el contrario, la disciplina que se encarga de la contratación, gestión y análisis de los enlaces patrocinados en los buscadores se denomina SEM o “Marketing en Buscadores”.

A menudo hablamos de posicionamiento en buscadores como sinónimo de posicionamiento en Google, puesto que es el buscador más usado en el mundo.

En España es el buscador que utiliza más del 90% de los usuarios, pero no hay que olvidar que este porcentaje de uso es diferente según el país, por ejemplo vemos que es menor en Estados Unidos y que hay países, como por ejemplo China, en los cuales Google no es el buscador más usado.

¿Por qué es importante aparecer en las primeras posiciones de los resultados orgánicos del buscador?

Porque mejorar el posicionamiento orgánico de una página web, para una búsqueda determinada, aumenta las probabilidades de que esa página sea visitada por el usuario que está realizado esa búsqueda concreta, es decir, hay más probabilidades de que haga clic en nuestro resultado. Esto supone más visitas al sitio web, que podría traducirse por ejemplo en más ventas si hablamos de un ecommerce o de más alumnos inscritos si hablamos de una universidad.

Numerosos estudios de eye-tracking han demostrado que la mirada del usuario se concentra en los tres primeros resultados orgánicos de la SERP, un área denominada “triángulo dorado”. Y a medida que nos alejamos de estos primeros puestos el porcentaje de clics, como vemos, cae drásticamente.

El porcentaje de clics cae más aun cuando nos alejamos de la primera página de resultados.

En términos generales, porque como se observa en la gráfica, el primer resultado de la segunda página genera más visitas que el último resultado de la primera página. Es decir, aparecer en la posición 11 es mejor que aparecer en la posición 10.

También hay estudios sobre cómo influye cada uno de los elementos de un resultado de búsqueda en la decisión de discriminarlos y seleccionar uno u otro resultado.

En los resultados orgánicos, los usuarios se fijan casi la mitad del tiempo (el 44% del tiempo) en el snippet, que es la descripción de la página o fragmento de texto con la información más cercana a las palabras de la consulta.

Seguido del título, con un 39% del tiempo y por último se fijan en la URL, con un 17% del tiempo.

Aunque los porcentajes varían en función del tipo de búsqueda, como se puede consultar en el estudio que se cita en pantalla.

Pero ¿cómo funciona Google? ¿En qué se basa para determinar la relevancia de nuestra web respecto a la búsqueda que se ha realizado?

El robot de búsqueda de Google (Googlebot) rastrea contenido en Internet de forma continua y automática para el índice de Google, siguiendo los enlaces de las páginas e indexando de esta manera miles de millones de páginas que se almacenan en miles de máquinas. Es en este índice donde realmente realizamos nuestras búsquedas. Cuando se realiza una búsqueda en Google, no se busca en la Web, sino en el índice que Google hace de toda la Web, o al menos de la parte a la que puede acceder.

El algoritmo que aplica Google para determinar la relevancia de nuestra página para unos términos de búsqueda concretos, y en base al cual posicionar nuestra página en los resultados de búsqueda, es modificado con frecuencia y son más de 200 factores los que se tienen en cuenta.

El algoritmo de Google no se conoce con exactitud, pero sí muchos factores que influyen, como por ejemplo: el número, autoridad o temática de las páginas que enlazan con la nuestra, la velocidad de carga del sitio o que otorga prioridad a las páginas con contenido propio, actualizado y de interés para los visitantes.

Puedes consultar una recopilación de factores hecha en base a cientos de fuentes en la infografía que se cita en pantalla.

Las técnicas SEO para mejorar el posicionamiento de las páginas se centran por tanto en dos objetivos básicos.

Primero facilitar el rastreo y la indexación de las páginas de nuestro sitio por parte de los robots de los buscadores, y que esta se realice por determinadas palabras clave.

Y la segunda conseguir que Google considere nuestra página relevante para determinadas búsquedas.

Por tanto, una de las primeras cosas que debes plantearte desde el inicio es por qué palabras claves quieres posicionar tus páginas.

Google también puede penalizar un sitio web si considera que está empleando técnicas poco lícitas para mejorar su posicionamiento, lo que se denomina “black hat SEO” por contraposición a las buenas prácticas “white hat SEO”.

La mejor manera de mejorar el posicionamiento orgánico de nuestras páginas, que estas no sean penalizadas y que las variaciones en el algoritmo de Google no nos afecten, es seguir una serie de buenas prácticas.

Vamos a tratar estas buenas prácticas para mejorar el posicionamiento orgánico de vuestras páginas en la segunda parte de este vídeo que os invito a ver a continuación.

Ya para terminar, estas son las direcciones de mi blog, de mi web y de mi cuenta de Twitter. En ellas puedes encontrar información sobre mí y sobre mi trabajo, así como artículos relacionados.

Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es

Muchas gracias por tu atención.

Google Maps: inserción de un mapa personalizado

Un nuevo vídeo de iDESWEB que se ofrecerá a través de la iniciativa Actívate patrocinada por Google.

[kml_flashembed movie=”http://www.youtube.com/v/fBgUB_t0Hq8″ width=”560″ height=”315″ wmode=”transparent” /]

Transcripción:

Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te voy a explicar cómo puedes insertar un mapa personalizado de Google Maps en una página web.

En el vídeo anterior “Google Maps: inserción de un mapa”, te expliqué cómo insertar un mapa sencillo en una página web.

En este vídeo te voy a explicar cómo insertar un mapa personalizado, es decir, un mapa en el que se muestra información de nuestro interés.

Se puede mostrar texto, imágenes, vídeos.

Muy importante, lo que te voy a mostrar a continuación puede ser que sólo funcione si la página está publicada en Internet o en un servidor web propio. Con una página local puede ser que no funcione correctamente.

El acceso a la herramienta de creación de mapas personalizados lo podemos hacer de diferentes formas. Por ejemplo, [PULSAR] podemos acceder a través de esta URL.

O también podemos, en Google Maps, pulsar en el cuadro de búsqueda y se desplegará la opción de “Mis mapas”.

Vamos a crear un mapa personalizado.

En Google Maps, para que aparezca la opción de “Mis mapas” tengo que estar dentro de mi cuenta de usuario de Google, ya que mis mapas se asocian, se almacenan en mi cuenta. Si no estoy dentro de mi cuenta pues no aparecerá la opción.

Una vez que esté ya registrado, puedo acceder a “Mis mapas” y puedo crear un mapa nuevo.

Se abre una nueva pestaña en la que se mostrará un mapa de Google Maps pero con una serie de opciones para personalizar el mapa.

En primer lugar puedo cambiarle el nombre al mapa y ponerle por ejemplo “Mapa de prueba para iDESWEB”. Le puedo poner una descripción si quiero.

A continuación puedo empezar a dibujar el mapa, por ejemplo, me voy a situar sobre la Universidad de Alicante y voy a buscar el edificio en el que se encuentra mi despacho y voy a situar un marcador, las chinchetas que aparecen sobre los mapas en Google Maps. Por ejemplo, la voy a situar aquí y le puedo poner un nombre, “Mi despacho”, le puedo poner también una descripción y lo guardo.

Ya tengo un marcador en mi mapa personalizado, que aquí puedo editar sus características. Puedo cambiar el color, por ejemplo, o puedo cambiar el icono y podría buscar un icono más apropiado. Por ejemplo, podría poner un ordenador.

A continuación voy a buscar otro elemento. Por ejemplo aquí este comedor, este restaurante y le voy a poner otro marcador. Y voy a editar otra vez el icono y como es un restaurante le voy a poner este icono. Y ya lo tenemos ahí. Y ahora por ejemplo voy a buscar otro restaurante en la Universidad de Alicante, este bar, y le voy a colocar otro icono más. Y le vuelvo a cambiar el icono.

Y ya tenemos aquí un mapa personalizado en el que se muestran tres marcadores que yo he definido.

Podemos dibujar más cosas, por ejemplo podemos dibujar líneas. Voy a añadir una línea que es la ruta desde mi despacho hasta el restaurante. Este es el camino que suelo realizar para ir a comerme un bocadillo. “Camino al restaurante”. Guardo.

Otra vez aquí si quiero puedo editar algunas propiedades, por ejemplo el ancho. Y puedo cambiar pues también el color. Y voy a dibujar otra línea más, ya la última, al otro restaurante.

Pulso aquí, añadir línea. Y este es el camino que me conduce. Y a este también le voy a cambiar el ancho y le voy a poner otro color.

Muy bien, ya tenemos nuestro mapa. Y ahora yo lo quiero publicar en una página web. Para ello en primer lugar tengo que compartirlo. Le doy a esta opción de aquí, compartir. Con esto puedo indicar si quiero que el mapa sea privado, solamente compartirlo con una serie de usuarios que yo introduzco. O puedo cambiarlo y que el mapa sea público en la Web, de forma que cualquier persona pueda acceder. Lo cambio a “Público en la Web” y ahora ya a este mapa puede acceder cualquier persona.

¿Cómo lo comparto? ¿Cómo obtengo el código necesario para insertarlo en mi página web?

Necesito un fragmento de código HTML para insertarlo en mi página web. Esto me lo proporciona el propio Google Maps. Vengo a esta opción de aquí, tengo una serie de opciones, un menú. Y le doy a “Insertar en mi sitio”. Pulso y se me proporciona un fragmento de código HTML que debo de pegar en mi página web. Lo copio y ahora me voy a una página de ejemplo que tengo realizada y lo pego. Evidentemente no tengo que cambiar nada de este código HTML. Bueno, podría cambiar aquí la anchura y la altura para que el mapa fuera más o menos grande.

Lo guardo, lo ejecuto. Y, se está cargando, mi mapa, que ya puedo pues utilizar. Y aquí aparecen las descripciones que yo he etiquetado en mi mapa. Y lo puedo usar como cualquier otro mapa de Google Maps.

Interesante, ¿verdad?

Ya para terminar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora.

Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es.

Muchas gracias por tu atención.

Google Maps: inserción de un mapa

Un nuevo vídeo de iDESWEB que se ofrecerá a través de la iniciativa Actívate patrocinada por Google.

[kml_flashembed movie=”http://www.youtube.com/v/mYDGQYB9Yno” width=”560″ height=”315″ wmode=”transparent” /]

Transcripción:

Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te voy a explicar cómo puedes insertar un mapa de Google Maps en una página web.

Muy importante, lo que te voy a mostrar a continuación puede ser que sólo funcione si la página está publicada en Internet o en un servidor web propio. Con una página local puede ser que no funcione correctamente.

Insertar un mapa de Google Maps en una página web es muy sencillo.

En primer lugar, nos vamos a Google Maps y centramos el mapa en la parte que queremos insertar, la parte que queremos que aparezca en nuestra página web. Por ejemplo, estoy centrando el mapa en la Universidad de Alicante, esto es lo que yo quiero que aparezca en mi página web.

A continuación, me vengo aquí al engranaje mecánico, pulso y me aparece un menú contextual. En este menú selecciono la opción “Compartir e insertar mapa”.

Tengo dos opciones para compartir el mapa. Puedo simplemente compartir un enlace al mapa o la opción de insertar mapa que es la que yo voy a elegir.

Puedo configurar el tamaño del mapa. Puedo tener un mapa pequeño, mediano, grande o incluso podría personalizar el tamaño del mapa. Voy a dejarlo como grande y aquí se me proporciona el código HTML que debo de copiar a mi página web. Lo debo de copiar todo.

Lo copio y me voy a una página web sencilla, una página web de ejemplo que he hecho para insertar el mapa.

Esta URL que aparece aquí lleva las coordenadas del mapa que yo quiero insertar. Lo guardo y lo ejecuto en un navegador. Y ya se carga el mapa centrado sobre la Universidad de Alicante que es la zona que yo había seleccionado. Y este mapa es un mapa interactivo, yo lo puedo mover, puedo hacer zoom si deseo o si quiero lo puedo ver en grande en Google Maps.

Como ves es muy sencillo insertar un mapa, me voy aquí a la rueda mecánica y elijo la opción “Compartir e insertar mapa” y la opción “Insertar mapa”.

Ya para terminar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora.

Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es.

Muchas gracias por tu atención.