Hacemos balance de los resultados, y adelantamos una novedad para la próxima edición de uno de estos cursos.

Resultados de encuestas de alumnos

Las valoraciones que han dado los alumnos en la encuestas han sido muy positivas. Los participantes califican de forma anónima hasta 23 apartados que abarcan todos los aspectos de esta formación online: metodología, contenidos, actividades, tutorización, plataforma…

Resumimos algunos datos:
(Nota: todos se puntúan sobre 5 y convertimos a escala de 10)

• Valoración global: las tres ediciones se han calificado entre 8,5 y 9 puntos.
• Valoración mínima: en todos los apartados, las tres ediciones han superado los 7,8 puntos de valoración (en CM y SEO, todos han sido superiores a 8).
• Valoración más alta: corresponde a los apartados de tutorización. Las valoraciones dadas a los tutores Javier Navas (CM y Diseño Web) y Alfredo Hernández-Diaz (SEO) han sido superiores a 9 en todos ellos. ¡Enhorabuena a los dos!

Por supuesto hay áreas de mejora, que detectamos con estas puntuaciones y los comentarios de alumnos. Se tienen muy en cuenta, como en el replanteamiento que estamos haciendo al curso de Diseño y Programación Web y que comentamos al final de este post.

Comentarios en Redes Sociales

Los comentarios se producen en su mayoría en nuestras cuentas de Twitter (@CMFundacionUGR) y Facebook (Curso.Community.Manager) asociadas al curso de Community Manager. Es normal, ya que son canales complementarios al mismo y los alumnos, dada la temática del mismo, son más proclives al uso de las redes sociales.

Algunos alumnos utilizan en Twitter el hashtag #cmcevug para etiquetar esos comentarios o citan nuestros usuario. Aquí puedes ver algunos:

@CMFundacionUGR último día! Gracias he aprendido muchísimo! #celebrando pic.twitter.com/hIU2AsPIOF

— SILVIA (@Meabanico) 16 de junio de 2017

Me ha encantado el curso de Community de @CMFundacionUGR accesible, y una grata experiencia, he aprendido mucho ¡Muchas gracias!

— Jorge Vallejo Llano (@vallejollanoja) 3 de junio de 2017

Poniendo los puntos y las comas también a Twitter gracias a @CMFundacionUGR. Seguimos para bingo con #cmcevug. Un saludo para todos.

— Belén Rico (@Belen_rico) 20 de mayo de 2017

Con constancia y sacrificio todo se puede lograr. Siempre hay que aprender algo nuevo cada día. Gracias @CMFundacionUGR #cmcevug

— Marga Jimenez (@MargaJimnez) 8 de mayo de 2017

Podemos crecer gracias al gran curso de Community Manager que estamos realizando. Seguimos aprendiendo.. #cmcevug @CMFundacionUGR

— Silviacfotografía (@scfotografiando) 27 de abril de 2017

Nuevo curso de creación y diseño web

Aunque la valoración de este curso ha seguido siendo muy positiva tras 17 ediciones, un entorno tan dinámico como el de la tecnología web nos hacía ver, cada vez más, que las actualizaciones que se iban incorporando ya no eran suficientes y demandaba un planteamiento nuevo. Los comentarios de los alumnos nos han ayudado a perfilar ese cambio y decidir que temas integrarían el nuevo curso que va a sutituir al actual en la próxima edición:

• El nuevo curso se basará en WordPress, el gestor de contenidos más utilizado en la creación de sitios web. El uso de un CMS como WP es ya una tendencia mayoritaria porque permite cubrir los requisitos de una web moderna, simplificando el proceso de creación para los no expertos en desarrollo web.
• Aunque se utilice un CMS, sigue siendo muy importante conocer HTML y CSS. Habrá dos temas dedicados a estos lenguajes para que los alumnos entiendan mejor qué es una página web y tengan un mayor control y capacidad de personalización a la hora de crearla.
• JavaScript ha adquirido un papel fundamental en el diseño y desarrollo web. Hacíamos una introducción a este lenguaje en el anterior curso, y aunque a las personas más técnicas les resultaba útil como primera toma de contacto, no es la formato adecuado para alumnos con perfiles muy variados. No se incluirá en el nuevo curso, y optamos por una formación dedicada donde se vean con suficiente amplitud sus características y las posibilidades que ofrece.

Solo queda agradecer a los alumnos sus comentarios y opiniones. Las positivas, porque son una gran motivación y nos hacen ver qué cosas debemos mantener o reforzar, y las críticas, porque nos ayudan a mejorar diversos aspectos de estos cursos que ofrecemos.

Imagen: © Can Stock Photo Inc. / cifotart

¿Qué son las páginas AMP?

Como indica la traducción literal (Páginas Móviles Aceleradas), se trata de páginas web que se muestran en dispositivos móviles más rápidamente, al estar diseñadas con unas especificaciones especiales y servirse desde una caché de Google.

La tecnología AMP se basa en el estándar abierto AMP HTML. Este formato es una variante del HTML y se visualiza en todos los navegadores modernos, tanto en Android como iOS. Daremos más detalles después.

AMP HTML es un proyecto open source, donde han colaborado destacadas plataformas de Internet (Twitter, WordPress, Pinterest, Google ,…) y proveedores de contenidos online (The New York Times, Mashable, The Washington Post, El Pais…), y que ya están utilizando un número importante de Webs.

Dónde y cómo aparecen las páginas AMP

Te pueden aparecer en los resultados de Google si realizas una búsqueda con un smartphone o dispositivo móvil. En concreto, los lugares donde puede aparecer contenido AMP son:

• Carrusel de noticias destacadas AMP
• Otras Tarjetas o Fragmentos enriquecidos (ver recuadro abajo)
• Lista de resultados estándar

Las Rich Cards y Rich Snippets permiten destacar una página en los SERP Google, mediante el uso de datos estructurados. como explicamos en el curso SEO. El tutor del mismo, Alfredo Hernández-Díaz, nos habla en este artículo de los Rich Snippets.

Vemos algunas capturas de pantalla para ilustrar la visualización de contenido AMP.

Presentamos primero un ejemplo de carrusel ‘top news’ AMP. Podemos ir deslizando el dedo lateralmente en la pantalla táctil para que nos muestre más resultados de ese carrusel.

En la siguiente imagen vemos páginas AMP en los resultados estándar de búsqueda de Google desde un smartphone. Como en el caso anterior, se identifican por el logo:

En la siguiente imagen hemos accedido a una página AMP:

• La URL en el navegador del móvil nos indica que está almacenada en la caché AMP de Google: 

  www.google.es/amp....

• Debajo, vemos como se nos presenta la fuente de la que proviene: 

  amp.20minutos.es

• Al pinchar en el icono ‘vínculo’ se despliega la URL de la página original: 

  www.20minutos.es/noticia....

   a la que podemos acceder desde este enlace.

Para ver la diferencia entre una página web normal y la versión AMP, os mostramos una entrada de nuestro blog con las dos versiones respectivamente, donde puede verse que la AMP está simplificada respecto a la anterior:

¿Cómo funcionan las páginas AMP?

Tienes una documentación muy detallada en la web del proyecto AMP, aunque de una forma básica podemos esquematizarlo de las siguiente forma:

• Seguimos manteniendo la versión estándar HTML de nuestra Web
• Debemos vincular las versiones HTML y AMP de cada página, incluyendo en cada una, en su sección

  <head>

   , una etiqueta

  <link>

    que apunte a la otra versión (o así mismas si solo existe la versión AMP).
  De esta forma Google sabe qué indexar, qué presentar en cada situación, y no considera contenido duplicado la página AMP.
• Para dar una idea de este etiquetado, copiamos el ejemplo donde se apunta de la versión HTML a la AMP:
  

  <link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">

De todas maneras, se puede automatizar esta tarea en muchos CMS como Drupal o Joomla mediante módulos o extensiones. Si trabajamos por ejemplo con WordPress tenemos varios, como el plugin AMP o el AMP for WP

¿Por qué las especificaciones AMP mejoran el rendimiento?

Para mejorar la carga de las páginas AMP se siguen unas directrices de diseño que buscan presentar casi instantáneamente el contenido de texto. Para los que estáis más familiarizado con el desarrollo web os vamos a mencionar algunas:

• Se minimizan las peticiones HTTP, con utilización por ejemplo solo de estilos internos CSS (en sección <head>), carga diferida de fuentes,…
• Las imágenes y anuncios solo se descargan si es probable que el usuario las vea, dependiendo de la posición de esos recursos en la página y el desplazamiento que haga el usuario en su navegador.
• Igualmente para las imágenes o recursos similares se calcula con antelación las dimensiones y el espacio que van a ocupar para poder maquetar la presentación de la página aunque aún no se hayan descargado.
• Solo se permite JavaScript asíncrono, para que los scripts no bloqueen o retrasen la carga del resto de elementos de la página. De hecho no se permite JavaScript de autor, sino que se emplean elementos AMP personalizados.

¿Cómo es el AMP HTML?

Como hemos comentado antes es una variante de HTML. Puedes consultar en github la especificación de las etiquetas AMP HTML. De forma resumida podemos decir que:

• Permite utilizar la mayoría de las etiquetas HTML5: <html> <body> <head> <p> <div>…
• Prohíbe algunas, sobre todo relacionadas con recursos externos: <object> <embed> …
• Tiene una versión equivalente para otras, principalmente asociadas a objetos multimedia: <amp-img> <amp-video> <amp-audio>…

Para los más curiosos, copiamos el ejemplo más simple (un ‘Hello World’) en formato HTML AMP de la web del proyecto:

<!doctype html>
<html ⚡>
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="hello-world.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>Hello World!</body>
</html>

Además del AMP HTML debemos considerar la biblioteca AMP JS que implementa todas las prácticas recomendadas AMP para garantizar la velocidad de presentación de dichas páginas.

Como hemos indicado antes, una de las optimizaciones que realiza es convertir todo el JavaScript en asíncrono, para evitar que éste bloquee la carga de la página.

¿Qué es el Google AMP Cache?

Es un CDN que ha implementado Google para entregar todos los documentos AMP válidos. Captura las páginas AMP HTML almacenándolas en caché para luego poder entregarlas (el documento, los archivos de JS e imágenes) usando HTTP 2.0 , todo desde un mismo origen, logrando mayor eficiencia.

Validador de páginas AMP

Las páginas AMP han de estar validadas para ser servidas sin errores desde la caché de Google. Tienes varias opciones para comprobar esa validación, tecleando el código en un validador AMP interactivo o comprobándolo en un validador AMP online introduciendo la URL de la página

Estado de la implementación de páginas AMP

El proyecto AMP se anunció por Google en 2015, y se ha ido adoptado por un número significativo de Webs desde 2016 hasta ahora (la web del proyecto indica más de 1.500 millones de páginas AMP publicadas)

Ha habido algunas quejas de usuarios en foros de soporte Google. Quieren seguir accediendo directamente a las páginas originales, por tener más funcionalidades que las cacheadas y porque las velocidades instantáneas que se ‘prometían’ no parecen cumplirse siempre (piden una opción en el buscador que permita deshabilitar las AMP si el usuario lo desea). También es cierto que muchos errores o retrasos que se experimentan pueden deberse a implementaciones incorrectas de AMP HTML no bien validadas.

En cualquier caso, las webs que están utilizándolas, manifiestan por lo general una mejora considerable de velocidad (llegando hasta un 85% de mayor rapidez) con incremento significativo del tráfico que reciben desde Google.

Si como parece, Google sigue apostando por las páginas AMP, es algo muy a tener en cuenta en SEO si queremos que nuestra Web compita en los SERP que se muestran en smartphones, tablets y otros dispositivos móviles. Como ocurrió con la ‘exigencia’ de un diseño adaptado a esos dispositivos, Google lo plantea ahora para la velocidad de descarga.

Un sitio Web nos facilita la comunicación online en una amplia variedad de formas con nuestros usuarios , colaboradores o clientes, a la vez que transmite de nosotros o de nuestra organización una imagen actualizada y profesional.

Conocer el proceso de creación y publicación de páginas webs es una competencia básica si estamos involucrados en la publicación de información, el marketing de contenidos, el comercio electrónico o la prestación de servicios online en general.

El próximo 13 de marzo iniciamos la 17ª edición del curso online Diseño y Programación de Páginas Web. Con el podrás dominar los lenguajes básicos de la Web, HTML y CSS, y tener una primer contacto con la programación con JavaScript. También conocerás con qué herramientas puedes trabajar, cuáles son las buenas prácticas para crear sitios webs, o cómo puedes publicarlos en Internet.  

Ya puedes matricularte en este curso que organizamos con el Cevug y la Fundación UGR-Empresa y. Si además eres estudiante de la Universidad de Granada, puedes obtener créditos de libre configuración y ECTS (consulta la página de inscripción del Cevug donde se va actualizando esta información).

El SEO no está reservado a Webmasters. Aplicar sus técnicas está a tu alcance si te interesa la publicación de contenidos, el comercio electrónico o la comunicación Web. Conócelas para mejorar tu visibilidad en Internet.

Si quieres formarte tienes ahora una gran oportunidad: del 27 de marzo al 16 de junio impartiremos la 5ª edición del curso online SEO, Posicionamiento Web en Buscadores. En él cubrimos todos los aspectos del SEO, y está diseñado para que sea cual sea tu perfil profesional, puedas sacarle partido.

Tutor, contenidos e inscripciones

En esta edición contamos con una novedad importante: Alfredo Hernández-Díaz será el tutor del curso. Alfredo tiene una amplia y exitosa trayectoria como consultor y docente en las áreas de SEO, Social Media y Marketing Digital. Su experiencia profesional en todos estos campos serán una aportación muy valiosa para los alumnos del curso.

Para conocer más sobre los contenidos, consulta la información que detallamos en la página del curso. Seguimos actualizándolos en cada edición para tener en cuenta la evolución de Google y las nuevas tendencias, como la irrupción de los smartphones y las implicaciones de la Web móvil o las Apps en el SEO.

Este curso lo organizamos con el Cevug y la Fundación UGR-Empresa y la matricula está ya abierta para todos. Si además eres estudiante de la Universidad de Granada, puedes obtener créditos de libre configuración y ECTS (consulta la página de inscripción del Cevug donde se va actualizando esta información).

Aquí os presentamos los carteles anunciadores (pinchar en las imágenes para ampliar):

Ya está abierto el plazo de matrícula para todas estas ediciones, que se desarrollarán en las siguientes fechas:

• Community Manager, 7ª edición:  24 de octubre de 2016 al 27 de Enero de 2017
• Diseño y Programación Web, 16ª edición: 7 de Noviembre de 2016 al 27 de Enero de 2017
• SEO, Posicionamiento Web en Buscadores, 5ª edición (actualización del 31/10/16: pendiente de reprogramar fechas. Si estás interesado en formarte ya en SEO, puedes realizar nuestra edición ‘matrícula siempre abierta’.)

Como siempre hacemos, recordaros que estos cursos los puede realizar cualquier persona interesada en crear o gestionar canales de Comunicación en Internet (Webs, Redes Sociales, Blogs). Si además eres estudiante de la Universidad de Granada, consulta los créditos de libre configuración y ECTS reconocidos en cada Facultad para cada uno de estos cursos (esta información se va actualizando en las páginas de información de la web del Cevug que os hemos enlazado antes).

Si quieres saber la opinión de los alumnos de las ediciones anteriores, puedes consultar este post donde publicamos el resultado de las encuestas de cada curso.

• Community Manager, gestión de Medios Sociales, 6 ª edición
• Curso SEO, Posicionamiento Web en Buscadores, 4ª edición
• Curso Diseño y Programación de Páginas Web, 15ª edición

Estas encuestas son anónimas y recogen las opiniones de los alumnos en los apartados más importantes de esta formación. Nos interesan mucho, porque junto con los comentarios personales que nos envían a través de email o redes sociales, nos ayudan a detectar tanto los aspectos que más gustan como los que podríamos mejorar.

Los resultados desde nuestro punto de vista han sido muy positivos. La valoración global de cada curso ha sido:

• Community Manager, ed, 6ª: 9,2
• SEO, ed. 4ª: 8,7
• Diseño y Programación Web, ed. 15ª: 8,9

(Nota: se puntúa de 1 a 5, y convertimos a escala 10)

En los tres cursos, todos los apartados (cumplimiento de objetivos, contenido, duración, metodología, métodos didácticos, profesorado) han estado puntuados por encima de 8, por lo que vemos que la apreciación general es buena, y no hay bloques con una opinión negativa.

Por supuesto hay aspectos que tenemos que revisar, como una mejora en la navegación en la plataforma, facilitar la comprensión para algunos alumnos de las partes mas técnicas en SEO o Programación Web o  cómo pueden profundizar los alumnos que tienen más experiencia previa. No es razonable esperar unanimidad de opiniones porque ningún curso es perfecto si hay alumnos con perfiles, gustos y expectativas diversas. La formación online nos ayuda a adaptarnos a esa variedad de exigencias con una tutorización personalizada, pero siempre se puede hacer más.

Sí queríamos destacar un apartado que nos parece fundamental en el desarrollo de estos cursos: el profesorado. Es el aspecto mejor valorado  (respuesta, actitud, dominio de la materia, aportación e interacción con el alumno)  superado los 9,4 de media en los tres cursos, lo que creemos que habla por si mismo de la dedicación y preparación de los tutores. Gracias a Francisco Illeras (Diseño-Prog Web), Javier Navas (CM y SEO) y a Lucía Montero (CM) por su entusiasmo y la labor tan importante que desarrollan en esta formación.

Para completar esta información, publicamos los comentarios del curso Community Manager en su página Facebook, que amplían la percepción de los alumnos más allá de las medias numéricas.

Ya solo queda animaros a todos aquellos que querías participar en las nuevas ediciones. Están programadas para el 27 de Octubre (CM) y 7 de Noviembre (SEO y Diseño-Prog Web) . El plazo para matricularse se abrirá muy pronto y lo anunciaremos en esta web y nuestras redes sociales. ¡Estad atentos!

Imagen: © Can Stock Photo Inc. / cifotart

En esta curso nos centramos en crear webs (y blogs) con este gestor de contenidos, el más utilizado en el mundo. Tiene un enfoque muy práctico y el objetivo es claro: que al terminar el curso tengas un sitio web hecho con WordPress, completamente operativo y configurado, publicado en Internet.

Esta formación también te puede ayudar si tienes una página web o blog en WordPress.com, Blogger o servicios similares  y quieren dar el paso a una instalación en tu propio hosting, o incluso para los que conozcáis algo este software, pero queráis resolver dudas y mejorar su configuración y la forma de trabajar  con él.

Todos los servicios y herramientas que vemos en el curso son gratuitos, desde WordPress, software libre sin coste de licencia, al alojamiento web, themes o plugins que elegimos: puedes tener tu web, con control total y sin publicidad de terceros, completamente gratis.

Promoción de lanzamiento

Para dar a conocer la línea “Aprende a…”, te ofrecemos con una sola suscripción (¡ya de por sí muy económica!) acceder a los dos cursos por el precio de uno.

Y si quieres probar antes, tienes acceso a parte de los contenidos: Aprende a Programar y Aprende WordPress, sin registrarte.

Ah! y ya estamos trabajando en un nuevo curso para esta serie: “Aprende a editar páginas web con HTML y CSS” que será un buen complemento para estos dos que ya hemos lanzado.

• Community Manager, gestión de Medios Sociales, 5 ª edición
• Curso SEO, Posicionamiento Web en Buscadores, 3ª edición
• Curso Diseño y Programación de Páginas Web, 14ª edición

Este feedback, obtenido a través de las encuestas anónimas que cumplimentan los alumnos, recogen sus opiniones en 22 preguntas que abarcan los aspectos más significativos de esta formación. Son muy importante para nosotros, para descubrir posibilidades de mejora y creemos que también los son para los interesados en matricularse en las próximas ediciones que comienzan en breve.

Afortunadamente, como en ocasiones anteriores, la impresión es muy buena, y han vuelto a destacar el  apartado sobre el profesorado (atención/rapidez respuesta, interacción/motivación y dominio de la materia) que ha recibido puntuaciones por encima de los 9 puntos en los 3 cursos (se puntúa de 1 a 5, y convertimos a escala 10).

La valoración global de cada curso ha sido:  Community Manager (8,7), SEO (8,6) y Diseño y Programación Web (8,2), estando todos los apartados (cumplimiento de objetivos, contenido, duración, metodología, métodos didácticos, además del mencionado de profesorado) con una puntuación por encima de 8.

Respecto al apartado final de los comentarios, donde algunos de los alumnos que cumplimentan las encuestas escriben una valoración cualitativa, tenemos comentarios muy positivos y también algunos críticos, lo cual es normal en personas con un perfil variado y expectativas diversas, y que por supuesto analizamos y tenemos en cuenta. Puedes leer todos estos comentarios, pinchando en las siguientes imágenes para ampliarlas (de izquierda a derecha: Community Manager,  SEO, Diseño y Programación Web):

Comentarios cursos CM, SEO y Páginas Web (clic para ampliar imágenes)

También, para los interesados en el curso de Community Manager, podéis consultar algunos comentarios de alumnos en nuestra página Facebook del curso o citándonos en Twitter con nuestro usuario @CMFundacionUGR.

Ya solo queda animaros a todos aquellos que querías participar en las nuevas ediciones, porque el plazo de matrícula está próximo a finalizar.

Imagen: © Can Stock Photo Inc. / cifotart

Ahí nos surgen varias preguntas: ¿mi web está optimizada para dispositivos móviles?, ¿si no la optimizo va a ser penalizada en las búsquedas hechas desde smartphones?, ¿se verá afectado también mi ranking SEO en ordenadores convencionales?

Es un tema muy debatido en foros y blogs especializados, sobre todo a partir del comunicado de Google, donde anunciaba que comenzaría a mejorar el posicionamiento de las páginas con diseño adaptado a móviles en las búsquedas realizadas desde estos dispositivos, a partir de abril de 2015.

En este sentido, es interesante consultar las preguntas frecuentes  sobre este tema que elaboraron en el blog de Google Webmaster, incluyendo un enlace a una herramienta online para comprobar el grado de optimización de nuestras páginas web a móviles.

También Bing, el otro gran buscador (aunque mucho menos utilizado) lanzó su herramienta de test ‘amigable para móviles’ con una guía explicativa con recomendaciones.

La idea es simple: el buscador prefiere presentar páginas webs cuyos contenidos estén adaptado para móviles, si el usuario está realizando la consulta desde un dispositivo de ese tipo, para que su experiencia de lectura sea mejor.

Google entiende que al posicionar mejor una página en sus SERPs (resultados de búsqueda) la está ‘recomendando’ al usuario, diciéndole cuáles son las más relevantes y de más calidad de acuerdo a su búsqueda, y en esta clasificación también tiene en cuenta la idoneidad para el equipo que utiliza dicho usuario.

Soluciones para adaptar nuestra Web a dispositivos móviles

Para poder ofrecer un formato adecuado de muestra web según la pantalla del usuario que nos visite tenemos principalmente tres opciones:

1. Publicar una sola URL, y servir siempre el mismo contenido HTML, adaptando su diseño al tamaño de pantalla
2. Publicar una  sola URL pero servir diferente código HTML según sea el dispositivo que nos visite
3. Publicar diferentes URL, es decir, crear un segundo web que sea la versión móvil de nuestro web original

Mostramos estas opciones o métodos en la siguiente tabla:

Dentro de la opción 1, publicar una sola URL y servir siempre el mismo contenido, tendríamos a su vez varias posibilidades:

• Diseño adaptable a todo el rango de pantallas
• Preparar un número concreto de diseños para formatos estándar
• Ocultar diversos elementos mediante CSS

Diseño web adaptable

Surge a partir de la técnica denominada “Responsive Web Design”, propuesta en 2005 por el diseñador Ethan Marcotte. Podemos resumir esta técnica diciendo que gracias a ella las secciones de la web se adaptan y reordenan al ancho del dispositivo, al igual que se ajustan otros elementos como el tamaño de tipografía o imágenes, o incluso añaden u ocultan recursos que pueden ser conflictivos en términos de soporte o consumo de recursos, como videos, sliders o animaciones Flash.

Los CMS más utilizados, es decir, los Sistemas de Gestión de Contenidos que nos facilitan crear webs, como WordPress, ya tienen disponibles muchos themes (‘temas’ o plantillas de presentación) que incorporan esta técnica, por lo que si utilizamos alguno de ellos para crear nuestra web, deberíamos elegir un theme que cumpla esas características de diseño.

Lógicamente es conveniente comprobar por ti mismo que cumple esas características, visualizando alguna demo de la plantilla en un dispositivo móvil, aparte de probar reduciendo progresivamente la ventana del navegador de tu equipo de sobremesa para ver como se va adaptando a diferentes tamaños.

También podrás encontrar la filosofía de ‘responsive design’ en muchos frameworks modernos para desarrollo web, como el popular Bootstrap de Twitter, así que no habrá problemas en cumplir con estos requisitos de diseño.

Publicación dinámica

Esta es una opción que usa la cabecera Vary HTTP para proporcionar información, que ayuda a determinar qué versión de página de nuestra web corresponde a dispositivos móviles. Puede por tanto ayudar a discriminar dichas páginas a un robot rastreador como Googlebot, o a un sistema de cache (memoria que almacena temporalmente información, en este caso páginas web) a la hora de servir nuestras páginas.

Puedes ampliar información sobre esta solución, por ejemplo en este enlace de Google, o en este otro (en inglés) sobre el método HTTP Vary

Versión móvil de un sitio web

Una solución más allá del diseño adaptativo, aunque cada vez más desaconsejada, consiste en crear una versión móvil del sitio web, de forma que tendríamos realmente dos sitios (dos URL) con distinto diseño y quizás algunas diferencias en ciertos elementos e incluso contenido.

Por ejemplo, aquí tienes el ejemplo de las dos sitios web de la Wikipedia, donde apreciamos cómo desaparece la sección lateral y algunos otros elementos en la versión móvil:

Versión escritorio de la Wikipedia en español: https://es.wikipedia.org

Versión móvil Wikipedia: https://es.m.wikipedia.org (distinta URL)

Si diseñamos específicamente para móviles está claro que podemos optimizar ese diseño por ejemplo con versiones de vídeos o imágenes pensadas para una conexión móvil donde queramos minimizar la descargas del usuario o con elementos que saquen partido de funcionalidades de los smartphones como el posicionamiento GPS, el que puedan realizar una llamada o tomar una foto.

Por contra, esto nos exigiría mantener dos sitios con todo lo que ello conlleva, no solo de trabajo, sino de posibles errores o pérdida por ejemplo de valor de enlaces entrantes al ‘dividirnos’ en varios sitios (tengamos en cuenta que para Google serían dos webs completamente distintas, así que tendríamos que trabajar el SEO de forma independiente, y hacer el doble de trabajo de creación de enlaces (Link Building).

La ventaja SEO principal del diseño adaptativo frente a tener dos páginas distintas para móviles y PC, sería que realmente sólo vamos a tener una página, y lo que va a cambiar será el diseño, de forma que evitamos tener contenido duplicado y por supuesto sólo tendremos que trabajar el SEO de una página.

Algunos consejos para mejorar nuestra usabilidad móvil

Precisamente en Google Search Console (antiguas Google Webmaster Tools) encontramos un apartado “Usabilidad móvil” en el que analizar vuestra web y seguir los consejos y mejoras que nos da Google para mejorar la experiencia de los usuarios de estos dispositivos.

Algunos consejos para el SEO que os recomendamos seguir son:

• Si acabamos de crear nuestra versión “mobile” para vuestra web, una buena idea para conseguir que se indexe es crear un sitemap para móvil y enviarlo a Google desde Google Search Console.
• No olvidemos que debemos permitir al robot de Google (Googlebot-Mobile) que acceda a nuestro sitio. Esto sólo es necesario para incluir a los dispositivos móviles de baja gama, ya que para el resto de smartphones, Google ya indicó en 2014 que su rastreador específico también se llamará Googlebot
• Algo muy importante si tenéis una versión “móvil” de vuestra web, es que todas las páginas de vuestro sitio en versión “escritorio” tengan su alternativa “móvil”. Si no fuera así, acabaréis teniendo errores 404 al no estar disponibles algunas páginas, lo que es muy perjudicial para el SEO. En ese caso es preferible que tengáis sólo versión “escritorio” de vuestra web, aunque esté menos optimizada para los dispositivos pequeños y se vea algo peor.
• Establecer como URL canónica la página en versión “escritorio”, indicándolo así en la versión “móvil”. Así evitamos que pudiera darnos algún problema el tema del contenido duplicado (pues ambas serían 2 versiones de la misma web, y ya sabemos que 2 webs iguales no son del agrado de Google…).
• Otra opción para evitar el contenido duplicado sería deshabilitar el rastreo de la web “móvil” en el robots.txt, pero nosotros no lo aconsejamos, ya que no tendría sentido hacer todo ese trabajo de optimización para que luego Google no nos rastreara esta otra versión, y al final, con la URL canónica lo resolveríamos igual. Así indicaremos en la página de escritorio que la alternativa para dispositivos de pantalla pequeña es la página móvil:
  

  <link rel=”alternate” media=”only screen and (max-width: 640px)” href=”http://m.nuestrapagina.com/pagina1″ >

  En la página desarrollada para móvil, indicaríamos cuál es la URL canónica, que será la de la versión de escritorio:
  

  <link rel=”canonical” href=”http://www.nuestrapagina.com/pagina1″ >

De todo ello hablamos (más algunas novedades que ha seguido lanzando Google referentes a este tema) en nuestro curso SEO: Posicionamiento Web en Buscadores, que impartimos online en la plataforma del Cevug (Universidad de Granada), en colaboración con la Fundación Empresa-UGR. La próxima edición comienza el 27 de marzo.

Créditos: imagen SEO móvil, © Can Stock Photo Inc. / yupiramos  . Imagen diseño adaptativo: Muhammad Rafizeldi (CC BY-SA 3.0)

Las fechas de estas nuevas ediciones ^{(ver nota)}, que recordamos, están abiertas para todos (no es necesario ser alumno de la Universidad de Granada), son:

• Community Manager, 6ª edición:  Marzo al 10 de Junio de 2016
• Diseño y Programación Web, 15ª edición: 4 de Abril al 3 de Junio de 2016
• SEO, Posicionamiento Web en Buscadores, 4ª edición: 4 de Abril al 3 de Junio de 2016

Te recomendamos esta formación si estás interesado en crear o gestionar canales de Comunicación en Internet (Blogs, Webs, Redes Sociales), bien a nivel personal o trabajando para un proyecto o empresa.

Puedes ver una presentación resumida de estos cursos en nuestro post sobre las últimas ediciones, o bien en la página web de cada curso (pincha en los enlaces de la lista anterior) con información detallada de los mismos y acceso a la inscripción online.

Actualización (18/03/16): Créditos ECTS reconocidos 

Estos son los créditos ECTS que se han reconocido hasta la fecha, a estas 3 ediciones, en las siguientes Facultades de la Universidad de Granada:

• Facultad de Derecho: CM (6 ECTS), SEO (5 ECTS), DPPW (4 ECTS)
• Facultad de Ciencias de la Educación: CM (6 ECTS), SEO (5 ECTS), DPPW (4 ECTS)
• Facultad de Ciencias de la Salud: CM (6 ECTS), SEO (4 ECTS), DPPW (4 ECTS)
• Grado Ingeniería Informática: CM (6 ECTS), SEO (5 ECTS), DPPW (2 ECTS)
• Grado Ingeniería de Tecnología de Telecomunicación: CM (2 ECTS), SEO (2 ECTS), DPPW (1,5 ECTS)
• Facultad de Ciencias del Trabajo: DPPW (3 ECTS), SEO (2 ECTS), CM (2 ECTS)
• Facultad de Farmacia: CM (0,5 ECTS), SEO (0,4 ECTS), DPPW (0,3 ECTS)
• Grado en Relaciones laborales y Recursos Humanos: CM (2 ECTS), SEO (2 ECTS), DPPW (3 ECTS)

Campus de Melilla:

• Facultad de Ciencias Sociales del Campus de Melilla: SEO (4 ECTS)
• Facultad de Educación y Humanidades del Campus de Melilla: CM (2 ECTS), SEO (2 ECTS), DPPW (2 ECTS)
• Facultad de Enfermería del Campus de Melilla: CM (2 ECTS), SEO (2 ECTS), DPPW (2 ECTS)