Archivo de la categoría: Desarrollo web

Actualizamos la sección de proyectos

En los últimos tiempos hemos tenido la sección de proyectos de nuestra web ligeramente abandonada. Y es que hemos priorizado el desarrollo de esos mismos proyectos sobre la actualización de esta web, aunque recientemente nos hemos puesto manos a la obra para dar una pequeña muestra de nuestros trabajos en diferentes soportes y tecnologías. Son muchos lo que se han quedado en la recámara y otros tantos los que se han desarrollado junto con otras empresas y entidades, imposibilitando su publicación en este espacio.

Web ecommerce de MerkaBio

En cualquier caso, ya podéis echar un vistazo a nuestro portfolio público, donde encontraréis trabajos desde proyectos de elearning (tanto de creación y empaquetado de cursos SCORM como la creación de plataformas homologadas de elearning) a proyectos de diseño y desarrollo web a medida, sin olvidar el aspecto más creativo en lo referente a la imagen corporativa y la creación de ilustraciones.

Ilustraciones e imagen corporatvia para Liebling!

En definitiva, esperamos que el botón de muestra que es nuestra página de proyectos sea de vuestro agrado y aprovechamos la ocasión para agradecer a nuestros clientes la confianza que han depositado en el equipo de URLearning.

Entender el SEO

El acrónimo SEO (del inglés Search Engine Optimization) está en boca de todo el mundo de un tiempo a esta parte. Clientes/as y alumnos/as me suelen preguntar cuestiones relativas a esta materia y, en muchos casos, han «oído campanas«… bastante remotas. El objetivo de este post es el de aclarar algunos conceptos básicos que ayuden al lector/a a entender qué es el SEO, partiendo de la idea, comúnmente aceptada, de que estamos ante una de las claves para alcanzar el éxito en internet.

SEO o posicionamiento orgánico en buscadores

Existe una gran cantidad de literatura sobre esta materia, pero comenzaremos con la Wikipedia que define al SEO como:

El proceso de mejorar la visibilidad de un sitio web en los resultados orgánicos de los diferentes buscadores.

Por tanto, el SEO hace referencia a un conjunto de técnicas y procesos aplicados a nuestros sitios web con el fin de mejorar la posición en la que éstos serán mostrados en buscadores como Google. Y no sólo la posición, sino también la calidad de la información mostrada para que ésta ejerza de «gancho» ante nuestro potencial cliente.

Esta mejora en el posicionamiento en los buscadores implica la adquisición de mayores tráficos a nuestra web que pueden derivar en una mayor tasa de conversión (desde suscripciones a servicios de noticias a ventas a través de un ecommerce, pasando por un mayor número de impresiones publicitarias) o en el aumento en el volumen de ventas.

Cabe resaltar otro factor muy importante a la hora de conseguir una mejora en nuestro posicionamiento web: el trabajo de marketing en redes sociales. Éste ya tiene una gran incidencia en el posicionamiento orgánico en buscadores. Por ejemplo, Google ya incluye contenidos de los medios sociales en los resultados de las búsquedas de los usuarios.

Y es que Google cuenta, desde hace años, con un sistema para medir la relevancia de las páginas llamado PageRank al que podríamos añadir un supuesto SocialRank, derivado de los medios sociales. Google desmintió públicamente esta afirmación, pero los hechos demuestran que la presencia en las redes sociales ayuda sustancialmente a mejorar el posicionamiento.

Google acapara más del 95% de las búsquedas en España. Cualquier otro buscador tiene una presencia en el mercado español meramente testimonial (el buscador de Microsoft, Bing alcanza un paupérrimo 1,66%, mientras Yahoo se queda con el 1,03%)

Buscadores más utilizados en España

En cualquier caso, detengámonos en una serie de estadísticas que nos ayudarán a entender la importancia de posicionamiento orgánico en los buscadores:

Porcentaje de clicks por orden del resultado

El primer resultado de Google se lleva el 53% de los clics. El segundo resultado se llevaría el 15% y el tercero el 9%.
El 93% de las experiencias en línea parten de una búsqueda.
El 75% de los usuarios nunca pasan de la primera página de resultados de una búsqueda.
La mayoría de los usuarios de buscadores optan por los resultados orgánicos (el 70%), no por los resultados de pago o patrocinados.
Un 42% de los usuarios hace clic en el primer resultado.
3 búsquedas de cada 5 ya se realizan mediante dispositivos móviles (smartphones y tablets).

Más allá de los datos, debemos conocer las razones por las que apostar por el posicionamiento orgánico en los buscadores. Estas son algunas de ellas:

Un buen posicionamiento SEO repercutirá en un aumento de número de visitas a nuestro sitio web. Que esas visitas se transformen en ingresos o conversiones depende de grado optimización de los contenidos y del diseño del sitio web.
El SEO puede repercutir positivamente en nuestro Branding o imagen de marca. En la medida en que podamos generar resultados en las búsquedas con referencias positivas hacia nuestra marca o producto, estaremos solapando aquellas de corte más negativo o perjudicial. Además, los primeros resultados del buscador suelen asociarse a productos o marcas importantes.
El SEO tiende a ser acumulativo: Si conseguimos posicionar una serie de palabras clave en las posiciones más altas, obtendremos buenos resultados en las búsquedas de otras palabras clave relacionadas, en lo que se denomina “efecto Halo”
El SEO es barato: En comparación con otros tipos de marketing online el SEO puede resultar barato si elegimos unas buenas palabras clave y generamos contenidos de calidad que se traduzcan en enlaces a nuestra web. En cualquier caso, el SEO no siempre es barato, dado que hay sectores donde existe una competencia feroz que dificulta el éxito sobre todo a corto o medio plazo.
Repercute positivamente en otros aspectos de la web: una web orientada al SEO suele aportar beneficios a nivel de accesibilidad web. Además los diseños tienden a ser adaptables o responsivos, facilitando su correcta visualización en dispositivos como móviles o tablets. Las técnicas SEO evitan el uso de tecnologías no indexables o que no respetan los estándares del consorcio W3C.

En próximos artículos abordaremos las diferencias entre el SEO y el SEM o el funcionamiento y la revisiones del algoritmo de Google.

Navegadores y estándares web

Hay dos elementos que han resultado fundamentales a la hora de explicar como internet ha alcanzado el nivel de popularidad actual: los navegadores y los estándares web.

Fue en el año 1991 cuando Tim Berners Lee crea la primera página web, con el fin de explicar el funcionamiento de WWW (Word Wide Web). Así, los (escasos) visitantes de dicha página podrían conocer elementos hoy tan cotidianos como el hipertexto o el proceso de creación de nuevas páginas.

Como es sabido, para poder visitar páginas web se necesita un navegador que pueda interpretar los archivos descargados a través de la red de internet, haciendo posible su lectura a los usuarios. Los primeros navegadores se utilizaban en ámbitos universitarios muy reducidos y no estaban sujetos a un estándar que permitiera la extensión de estas tecnologías de forma masiva.

Principales navegadores web

El primer navegador en extenderse fue Mosaic (1992), orientado inicialmente a sistemas Unix. Un año después se desarrolló una versión para Windows. Pero fue Netscape Navigator el primer navegador en alcanzar altas cotas de popularidad, al mejorar sustancialmente el rendimiento repecto a Mosaic.

En 1995 nace Internet Explorer para, poco después, convertirse en el navegador más popular aprovechando su posición hegemónica en el mercado de los Sistemas Operativos (esta práctica ha sido sistemáticamente denunciada como competencia desleal).

En los años sucesivos aparecerían nuevas versiones de Internet Explorer y Netscape Navigator. Este último dejo de actualizarse en 2008, liberando su código fuente y sirviendo de base para el lanzamiento de un navegador de código abierto muy popular hoy en día: Mozilla Firefox.

A lo largo de estos veinte años aparecieron otros navegadores como Safari, Opera o Google Chrome, además de versiones modificadas y orientadas a la distribución de diferentes dispositivos y marcas comerciales.

A día de hoy, Internet Explorer ya no es el navegador más utilizado y su lugar ha sido ocupado por Google Chrome. En este gráfico podemos hacernos una idea del actual estado de las cosas en el (competitivo) mercado de los navegadores web:

Estadística comparativa del uso de los navegores en el mundo

Cabe resaltar la revolución que ha supuesto la aparición de dispositivos como los teléfonos con acceso a internet (smartphones) o las tablets. Esto ha obligado a los desarrolladores de navegadores web y, especialmente, a los de sitios web, a adaptarse a esta nueva realidad. Los principales navegadores del mercado han creado versiones orientadas a estos nuevos dispositivos y un buen número de sitios web ya se desarrollan con versiones adaptadas específicas para móviles o tablets. En otros casos se opta por el responsive web design (diseño web adaptativo) en los que una mismo sitio web se visualiza de forma distinta dependiendo el dispositivo con el que se esté visitando.

Diseño web adaptable o adaptativo

Pero si tenemos que destacar un agente modernizador a lo largo de estos años, éste sería el consorcio W3C. Según su propia presentación:

El World Wide Web Consortium (W3C) es una comunidad internacional que desarrolla estándares que aseguran el crecimiento de la Web a largo plazo.

Logotipo del Consorcio W3C

El rol del W3C tiene una importancia capital y es que ha sido el encargado de definir un conjunto de prácticas estandarizadas a la hora de crear sitios web. Las recomendaciones de este consorcio hacen posible que los desarrolladores de todo el mundo tengan un patrón a la hora de codificar los sitios web. Este patrón permite que una página web que siga dichas recomendaciones pueda ser visualizada en igualdad de condiciones por cualquier usuario, independientemente del Sistema Operativo o el navegador que utilice.

A continuación se incluyen algunos de los principales estándares web recomendados por W3C:

HTML: Lenguaje de marcas de hipertexto. Se trata de un lenguaje de marcado con carga semántica que pueden interpretar todos los navegadores del mercado. También tiene una gran importancia en ámbitos como el posicionamiento orgánico en buscadores (SEO) y la accesibilidad web (permitiendo, por ejemplo, el acceso a los contenidos web a las personas discapacitadas). En la actualidad los sitios web se suelen desarrollar en la especificación HTML5.
CSS: Hojas de estilo en cascada. Éstas nos permiten determinar la apariencia de los contenidos de un sitio web (el diseño). En los últimos años también posibilitan la generación de contenidos adaptables a móviles o tablets. La especificación actual de las hojas de estilo es CSS3.
DOM: Modelo de objetos del documento. Este estándar permite el acceso y la manipulación de distintos elementos de una página web para, entre otras cosas, facilitar la interacción del usuario con el sitio web.

Existen otros elementos relacionados con los estándares que no dependen directamente de W3C, como el lenguaje Javascript, que nos permite controlar el comportamiento del sitio web ante determinados eventos o interacciones del usuario. En este caso, la estandarización viene de la mano de Ecma International.

En resumen, podríamos decir que los estándares web son un instrumento que nos permite crear contenidos y aplicaciones web independientes de la plataforma (sistema operativo) y el dispositivo, garantizando el acceso a la mayoría de los usuarios de internet y la correcta comunicación entre diferentes aplicaciones. Por ejemplo, hoy en día es posible “empotrar” un vídeo de Youtube en un blog gracias al HTML5.

La oficina española de W3C se encuentra en el parque tecnológico de Gijón.

Internet Explorer 6 & 7 are dead

Todos/as aquellos/as que nos dedicamos al desarrollo web sufrimos una pesadilla recurrente: que nuestros sitios web no funcionen correctamente en las versiones 6 y 7 del navegador Internet Explorer.

Datos de Microsoft sobre el declive de IE6 (click en la imagen para acceder a los datos actualizados)

Quien escribe esto, además de desarrollar sitios web, lleva muchísimos años impartiendo formación. Uno de los cursos que más veces he impartido es el de «Diseñador Web y Multimedia«, además de otros cursos específicos de HTML y CSS (últimamente HTML5 y CSS3), módulos de accesibilidad y usabilidad web y otras materias en las que la maquetación web y sus estándares han estado muy presentes. En dichos cursos, la secuencia didáctica, lógicamente, va in crescendo. El alumnado va asimilando, poco a poco, diferentes elementos de HTML, después de CSS, para acabar construyendo un layout sobre el que desarrollará el trabajo, llamémoslo así, de filigrana (especialmente en CSS y, en ocasiones, Javascript). Hasta aquí todo bien… por poco tiempo.

Infografía sobre el declive de IE7 (los datos son más o menos coincidentes con los aportados por Global Stat Counter)

Y es que, pongamos por caso, un objetivo para uno de estos cursos puede ser la maquetación de un sitio web (estático o dinámico) con CSS, partiendo de un diseño previo (por ejemplo en un fichero PSD). Ahí es cuando surge el problema/pregunta planteado por cualquiera de los alumnos/as: «Profe, el menú no se me ve bien en Explorer 7«, «La caja de contenidos no llega hasta abajo» y un largo (interminable) etcétera de problemas que, en más de una ocasión, me han metido en un aprieto. Eso sí, de dicho aprieto siempre se acaba saliendo pero, para salir, y seguro que muchas de las personas que están leyendo este blog lo han vivido, debemos acudir a una serie de parches, reseteadores, scripts y otras «trampas» que, efectivamente, nos solucionan el problema… para fastidiarnos la validación de los estándares de la W3C 🙁

Estadísticas del uso de los navegadores de Global Stat Counter (gs.statcounter.com)

Pues bien, todo parece indicar que el uso de nuestros navegadores pesadilla, los inefables IE6 y IE7, está bajo mínimos. Tanto es así que un formador ortodoxo como el autor de estas líneas ha decidido abandonar definitivamente el desarrollo web orientado a estos navegadores. Los tiempos del contra-estándar han llegado a su fin. Larga vida a los nuevos navegadores, los nuevos dispositivos, el diseño web responsable (o adaptativo) y a frameworks como Bootstrap.

Parafraseando y mutando la vieja estrofa de los Smiths: Internet Explorer 6 & 7 are dead 🙂

Cambios de Google para smartphones

El blog oficial para Webmasters de Google ha publicado ayer un post en el que anuncia una serie de cambios en los rankings de resultados en las búsquedas para smartphones. No hace falta ser especialmente avispado para entender que esos cambios afectarán negativamenta al ranking de aquellos sitios web que no tengan correctamente configurada su versión móvil. En definitiva, estamos ante una razón más para apostar por el diseño web responsable o adaptativo (responsive web design) en nuestros sitios web.

Google responsive

Estas son algunas de las ideas fundamentales que aparecen en la entrada del blog de Google:

Redirecciones erróneas: Algunos sitios web tienen URLs distintas para la versión de escritorio y para la versión para móvil o tablet. En ocasiones, la URL original redirige a contenidos que no se corresponden con el contenido original, enlazando siempre a una página inicial para la versión móvil. Esto será considerado por Google como un error que interrumpe la secuencia de navegación de usuario y puede llevar a que éste abandone el sitio web. Por tanto, las redirecciones deben llevar al usuario a contenidos equivalentes para la versión móvil. Una vez más, la solución también podría pasar por un diseño web responsable

Errores específicos de la versión móvil: Otro error más común de lo deseable es la aparición de errores al intentar acceder a un contenido desde la versión de escritorio a la versión móvil o viceversa. En el post se mencionan casos como los errores 404 al acceder desde una página en versión móvil a otra en versión de escritorio. Este error se subsana incluyendo una redirección al contenido en la versión correspondiente (o equivalente).

En caso de no disponer de un contenido equivalente para la versión móvil, es preferible enlazar con la portada del sitio móvil. Pero, como se indica anteriormente, lo deseable es disponer de una versión equivalente para cada dispositivo.
Uso incorrecto del Googlebot mobile que deriva en un bucle infinito. En el post lo explican así: «Un error típico es cuando Googlebot-Mobile para smartphones se redirige incorrectamente a la página web optimizada para smartphones que, a su vez, redirige Googlebot-Mobile para smartphones de nuevo al sitio de escritorio. Esto da como resultado bucle infinito de redireccionamientos, que reconocemos como error«.
Otro error mil veces comentado es la incrustación de vídeos que que no se pueden reproducir en ciertos smartphones. De sobra conocido es el uso del reproductor de Flash en dispositivos iPhone o en versiones de Android 4.01 o superiores.
Como es norma en los post del Google Webmaster Central, éstos vienen aderezados con una serie de enlaces que nos facilitan las cosas, como esta lista problemas habituales en los sitios para smartphones.

Diseño web responsable

Que el diseño web está cambiando es un hecho que no tiene discusión. A los cambios en los lenguajes, en las versiones en los estándares del W3C, se suman, desde no hace tanto, la aparición de nuevos dispositivos que ya forman parte de nuestra cotidianidad. Me refiero, lógicamente, a los teléfonos móviles y a las tablets. Hoy en día no se debe(ría) concebir un diseño y un desarrollo web que no esté basado en parámetros de diseño web responsable (responsive web design). Veamos.

Diseño web responsable

¿A quién no le a tocado visitar una web con su móvil para acabar dejándolo por imposible? ¿Quién no ha sufrido un horrible scroll horizontal en la web de un periódico para poder leer completo un texto, cada vez que cambiaba de línea? ¿Quién no se ha dejado la vista después de reducir el zoom de un sitio web en el móvil o tablet, precisamente para evitar desplazamientos en cada línea? El diseño web responsable busca, precisamente, que nos dejemos de hacer estas (y otras) preguntas. Se trata de implementar una solución a nuestros diseños para que nuestra web se adapte al dispositivo donde se esté visualizando. En definitiva, un sitio web profesional se debe adaptar a distintas resoluciones, orientaciones (vertical/horizontal), plataformas, navegadores, etc.

Para conseguir un diseño web responsable (o diseño adaptable), se pueden aplicar varias técnicas. Una de las más populares es el uso de un fluid grid (rejilla o retícula fluida). Existen frameworks bastante conocidos a este respecto como el Bootstrap (desarrollado por técnicos de Twitter) o el skeleton (que incluye características tipográficas, de botones o elementos de formulario) . Existe más frameworks como éstos, muchos de ellas basados en la división de nuestra pantalla en columnas que adaptarán su ubicación y tamaño dependiendo del dispositivo con que se abran.

Estas soluciones, basadas en las Media Queries también han significado un cambio radical a la hora de desarrollar nuestros sitios web. El sistema de las media queries está basado en una estructura CSS condicional, mediante rangos de resolución. Podemos especificar las características visuales de una parte de nuestra web (por ejemplo, el menú de navegación) en base a la resolución del dispositivo del cliente. Por ejemplo, el menú de navegación de esta misma web, se transforma en un desplegable en el momento que de detecta una resolución propia de un teléfono móvil.

Como ven, las posibilidades de la tecnología responsive web design son infinitas. Además implica un ahorro económico nada desdeñable para nuestros clientes y es que, no hace tanto, se estilaba la creación de páginas distintas dependiendo la resolución utilizada por el navegador del visitante a nuestra web. Los nuevos estándares HTML5 y CSS3, sumados a las media queries abren un horizonte prácticamente ilimitado y en permanente desarrollo. Como muestra, este estupendo post publicado en Smashing Hub donde encontraremos 17 frameworks orientados al diseño responsable. ¡Que lo disfruten!

Fuente de la imagen: http://www.dotcominfoway.com

Unos links interesantes sobre CSS3

Hace tiempo que vengo trabajando con CSS3. Para las personas que no conozcan la materia, decir que CSS3 es el tercer nivel de les hojas de estilo en cascada, esto es, el lenguaje destinado a dotar de estilos a los documentos semánticos elaborados con HTML. O dicho otra manera, CSS es el encargado de definir la estructura visual de los contenidos que escribimos en HTML haciendo posible la separación del contenido de la web (HTML) de su estructura (CSS). Sigue leyendo →