Category Archives: Desarrollo

TEDxReus 2015, foto final. Foto de TEDxReus en a Flickr

Noviembre es tiempo para TEDxReus

¿Has recibido ya la noticia? El 19 de noviembre llega la quinta edición del TEDxReus. Si no conoces este evento te recomendamos que eches un vistazo al blog, lo sigas por Twitter o Facebook y sobre todo, te reserves el sábado 19 de noviembre para asistir.

Los eventos TED suelen ser mágicos, el formato de las charlas –cortas, intensas, sintéticas y diversas– es la clave. Los ponentes tienen menos de 20 minutos, así que tienen que hacer un esfuerzo para extraer la esencia de su mensaje. En las charlas TED los sabios lucen con luz propia: entre las ponencias más espectaculares y las más populares es habitual encontrar propuestas sencillas, sutiles pero llenas de luz, de esa luz que te abre la mente y el corazón.

TEDxReus 2015 abans de començar.

TEDxReus 2015 antes de empezar. Foto de TEDxReus en a Flickr

Colaboramos con los que hacemos mejor: nuestro trabajo

En Fesomia colaboramos con el TEDxReus desde la primera edición. En 2002 hicimos la primera web, de diseño artesano, 100% creado en casa. Y es que la artesanía digital nos apasiona.

El evento ha ido creciendo cada año y en esta quinta edición hacía falta una renovación general de la web. Siguiendo la voluntad de los organizadores, esta segunda versión también se ha hecho sobre WordPress, pero ahora a partir de un tema prediseñado.

Siempre nos gusta participar haciendo lo que mejor sabemos hacer, nuestro trabajo de cada día. Nos hace sentir útiles, nos permite contribuir a difundir iniciativas, prácticas y mensajes que compartimos. Además, nos permite en algunos casos incluir en entornos reales nuevos recursos, que aplicamos después en nuestro trabajo.

En este sentido, este año había que incorporar un nuevo sistema de venta electrónico de entradas y se ha elegido tickera. Hemos hecho las adaptaciones necesarias para pulir y garantizar la compatibilidad de este conector y resolver problemas; hemos cavado hasta el fondo para descubrir las virtudes y lagunas del código fuente de este sistema de venta.

En fin, que estamos contentos, porque colaborar con TEDxReus es motivo de alegría, porque ser útiles con nuestro trabajo es nuestra obsesión y porqué descubrir y ampliar conocimientos es lo que nos hace trabajar cada día con satisfacción.

¿El sábado 19 de noviembre nos vemos a TEDxReus?

 

Bug Webkit contenteditable

Foto de Justin Raycraft en Flickr

Errores de formato en elementos contenteditable con Webkit (Chrome, Safari)

contenteditable es un atributo que nos llegó con HTML5 y que permite que ciertos elementos HTML sean editables o modificables en el navegador del usuario. Esta propiedad la usan muchos editores de texto para páginas web, algunos tan populares como TinyMCE.

Webkit (el motor de renderizado de navegadores como Safari, Opera y los que utilizan Blink como Chrome) tiene un problema en la manera en que gestiona los objetos contenteditable: cuando se han aplicado estilos específicos (por ejemplo en el body de un editor TinyMCE), en ciertas ocasiones algunos de estos estilos añadidos (como line-height o font-size en ems) generan regiones span indeseadas dentro del código, cosa que puede comportar cambios imprevistos en el formato obtenido, como diferentes tamaños de letra o interlineados inesperados.

El problema existe desde hace algunos años y ha sido reportado, aunque nunca ha sido corregido. Por lo visto se considera parte de una funcionalidad que compara los estilos al modificar bloques e intenta mantenerlos insertando elementos span en línea. Con todo, en Firefox, Internet Explorer y Microsoft Edge no se da este caso.

Algunas soluciones

Los editores WYSIWYG más populares han ido añadiendo conectores o plugins o bien cambios para compensar este error, por lo que en muchos casos solo será necesario actualizar el software o las bibliotecas correspondientes.

Sin embargo, en determinados escenarios no siempre nos es posible actualizar los editores, bien por razones de compatibilidad o porque hay involucradas aplicaciones críticas que no podemos manipular con facilidad o con la frecuencia que quisiéramos. En estos casos podemos optar por otras soluciones más simples, como utilizar estilos uniformes o parches con JavaScript.

Una de las soluciones propuestas en Stack Overflow es observar el DOM para controlar este comportamiento. Fijémonos en el siguiente ejemplo: en la tercera caja utilizamos mutation observers en vez de mutation events, y restringimos la acción a  la plataforma Webkit:

(Explora éste código en JSFiddle)

"Berry Hard Work" Foto de JD Hancock en Flickr

"Berry Hard Work" Foto de JD Hancock en Flickr

La segmentación, porque es importante en un sitio web de empresa

Si quieres que tu sitio web corporativo sea realmente útil y te ayude a contactar con clientes, es importante que cumpla con una serie de condiciones, hoy te hablamos de una de ellas: la segmentación.

Un sitio web corporativo eficiente debe tener los contenidos principales bien segmentados.

¿Qué significa esto? Pues que cada concepto clave, cada producto o servicio que ofreces necesita de una única página.

¿Y por qué debo que tener una página para cada producto o servicio?

Porque así es más fácil captar la atención del destinatario. Nuestro cliente tiene un problema concreto que quiere resolver, será más fácil centrar su atención si lo dirigimos a una página de información directa, concreta y clara, donde les explicarás que tienes una solución efectiva a su problema.

Además tendrás así un sitio web bien organizado y listo para diseminar por la Red:

  • Si activas una campaña de Pay per clic (Adwords, Facebook Ads, Twitter Ads Likedin o donde quieras) necesitarás tener una página concreta y con información clave donde dirigir las visitas que llegarán gracias a la campaña.
  • El posicionamiento orgánico es mucho más efectivo cuando el contenido de una página es concreto y preciso, de hecho, solo así es efectivo.
  • Después de una primera visita comercial será muy útil poder dar a tu posible nuevo cliente una dirección a una página donde se explica con detalle las condiciones, características y valores del producto concreto por el que se ha interesado: mucho mejor si el direcciones a www.miweb/producto-que-hemos-comentado que enviarlo a la página de inicio del web.

¿Cómo se consigue tener un sitio web bien segmentado?

Con una tarea de base y fundamental: define con atención el árbol de contenidos de tu sitio web. Divide y clasifica bien los productos y servicios que ofreces, segmentalos desde el punto de vista de tu cliente, y haz que tu sitio web tenga una página para cada uno de estos productos y servicios clave.

 

Exemple d'arbre continguts per un web

Ejemplo de un árbol de contenidos de un sitio web

Este es un árbol de contenidos de un sitio web real, de una empresa que ofrece servicios técnicos para bodegas: En este caso la segmentación se hizo hasta detallar cada uno de los servicios que ofrece: las funciones técnicas y el alquiler de espacios. Si quieres darle un vistazo, aquí tienes el árbol.

En Fesomia creamos sitios web de empresa destinados a facilitar el contacto y las relaciones comerciales con clientes ¿Quieres que te ayudemos a crear un sitio web de empresa efectivo, sólido, funcional e interesante? Cuando quieras lo hablamos.

Breve introducción a AMP (Accelerated Mobile Pages), la propuesta de Google para hacer más rápida i rentable la Web móvil

Creo que estaremos de acuerdo en esto: es un martirio leer algunos artículos y noticias desde el móvil. Tiempos de carga interminables, botones imposibles de pinchar, textos diminutos, anuncios invasivos … Este hecho tan habitual sólo genera usuarios frustrados, editores que pierden visitas y anunciantes maldecidos.

Por el contrario, los usuarios más avispados han encontrado maneras de acceder mejor a estas páginas no optimizadas, como navegar con el modo de lectura que algunos navegadores incorporan o instalar bloqueadores de anuncios. El caso es que ninguno de estos sistemas son del agrado de los editores de contenidos, ya que se saltan el sistema de monetización de sus publicaciones.

Google, como empresa de publicidad, es uno de los principados afectados por estas prácticas y seguramente por eso hace unos meses anunció una iniciativa para tratar de poner orden: el proyecto AMP.

Qué es AMP

AMP (Accelerated Mobile Pages) es un proyecto de código abierto liderado por Google que tiene como objetivo mejorar la velocidad de carga y la experiencia de usuario de las páginas web orientadas a noticias e información. De momento se dirige a editores de publicaciones digitales, pero no se descarta que en un futuro pueda ser útil para cualquier tipo de contenido en Internet.

Actualmente (digo actualmente porque estas cosas se sabe cómo empiezan pero no cómo evolucionan) los objetivos principales del proyecto son, por un lado, hacer más ágil y accesible el acceso a páginas de información desde dispositivos móviles y, por otra , facilitar la convivencia entre la accesibilidad de las páginas y los sistemas de monetización, como los anuncios.

Cómo funciona

Una página AMP es una versión alternativa (y canonizada) a la original a la que se accede añadiendo /amp a la dirección de la primera. Por ejemplo, si la dirección de esta página que estás leyendo es:

Breve introducción a AMP (Accelerated Mobile Pages), la propuesta de Google para hacer más rápida i rentable la Web móvil

su versión APM se encuentra en:

https://blog.fesomia.cat/es/2016/03/11/amp-accelerated-mobile-pages-google/amp

La versión APM es una página construida con HTML5 y Javascript con algunos componentes propios y CSS3 en línea no superior a 50KB.

¿Como consigue AMP acelerar la descarga de las páginas? Estos son algunos de los puntos clave:

  • Las páginas se reformatean, se despojan de muchos elementos superfluos.
  • Se limita la cantidad de código JavaScript y CSS.
  • Se provoca la descarga en paralelo de elementos (carga asíncrona). Si es necesario mostrar publicidad, por ejemplo, se presenta en marcos (iframes) independientes, siempre por HTTPS.
  • Se optimizan imágenes y otros elementos, sirviéndose sólo las versiones óptimas según el dispositivo y con las medidas declaradas para evitar saltos (autoscroll) durante la carga.
  • Se posibilita el guardado de las páginas en caché de servidores distribuidos (caching).

Cómo se implementa

Google ha liberado el código y la información necesaria para que cualquier desarrollador pueda implementar AMP en sus páginas. Los ingredientes son:

  • El etiquetado AMP HTML, que mezcla elementos estándar con algunos propios.
  • Ciertos elementos CSS3
  • Una biblioteca JavaScript y algunas extensiones que lo orquestan todo, y que Google ofrece libremente a través de su red de entrega de contenidos en https://cdn.ampproject.org/
  • Google también está guardando en su memoria caché mundial las páginas AMP que indexa para ofrecerlas más rápidamente según la geolocalización de los usuarios.

La iniciativa cuenta ya con grandes socios del ecosistema de Internet, de ámbitos como la prensa, las redes sociales, la publicidad y diversas plataformas de publicación. Por ejemplo, Automattic ya ha publicado un conector que permite implementar AMP en WordPress de forma sencilla. En este blog la estamos probando.

Prioridad en Google Search

Cualquier desarrollador puede implementar AMP, mejorarlo o adaptarlo a su conveniencia. Y quién ha sido el primero en aprovecharlo? Exacto: Google.

Hace unos días Google anunció que las páginas AMP tendrán (a partir de ya, dicen) prioridad en los resultados de su buscador en dispositivos móviles, mostrándose en un carrusel destacado. Según ellos esto significa que, en igualdad de condiciones orgánicas, favorecerán las páginas que implementen AMP en las búsquedas que se hagan desde el buscador en móviles.

Vídeo que ha publicado Google para ilustrar el comportamiento del buscador en móviles sobre páginas AMP

Algunas ventajas

Ciertamente AMP pinta muy bien y puede conllevar algunos beneficios evidentes:

  • Mejor experiencia para los usuarios.
  • Disminución del ancho de banda necesario para navegar (a ver qué dicen los proveedores de conectividad).
  • Mejor acceso a la información en regiones del planeta con poca calidad en las conexiones.
  • Todo es de código abierto y basado en Web, por el contrario de algunos servicios relativamente relacionados como Facebook Instant Articles o Apple News.

Algunas inquietudes

Particularmente me vienen a la cabeza algunas dudas:

  • De momento no he encontrado al W3C por ningún sitio. ¿Qué debe opinar de los componentes no estándares? ¿Se ha dicho algo al respecto?
  • Google, con todo su derecho, acaparará la distribución acelerada gracias a su imbatible CDN. Volvemos a delegar a los grandes proveedores el almacenamiento de la información. Aquí lo dejo, que este punto podría ser muy largo.
  • Tengo la sensación de que el desencadenante de la idea ha sido el intento de solucionar los conocidos problemas de relación entre los editores, la publicidad y los consumidores de contenidos. No es nada malo, pero sabemos que los anuncios son uno de los principales generadores de problemas de usabilidad y accesibilidad en páginas web. Con una publicidad más ética y respetuosa todo sería más sencillo.

Y para acabar no puedo evitar una reflexión sobre si no estaremos matando moscas a cañonazos. Deberíamos pensar sobre si hoy en día tal vez estemos publicando de una forma mucho más complicada de lo necesario, y que a veces las cosas se pueden hacer más simples, mucho más simples.

Tapping a Pencil. Foto de Rennett Stowe en Flickr

Tapping a Pencil. Foto de Rennett Stowe en Flickr

Digitalitzación desde el minuto 0

Hoy nuestro gestor nos ha enviado, por correo ordinario, una hoja para que anotemos el registro de horas de la jornada de los trabajadores. Los agricultores que nos suministran verdura en Diguesblat dejan, dentro de la caja junto a las lechugas, un albarán escrito a mano con la lista de las verduras que nos han servido.

Son estas formas de trabajar absolutamente normalizadas. Nos pasamos medio día apuntando datos a mano, y el otro medio entrando estos mismos datos en los programas de gestión o en la hoja de control … digitalizándolos, vaya! Con un poco de suerte hacemos este trabajo sólo 2 veces: una a mano y la otra digitalizando, pero en algunos casos esta tarea la hacemos 3, 4 y 5 veces. Un ejemplo:

  1. Un cliente apunta y envía el pedido que quiere que le sirvamos. Son 5 minutos, no cuesta nada.
  2. Escribimos a mano el orden de pedido para enviarlo al almacén. Son 5 minutos, no cuesta nada.
  3. A mano, la persona del almacén anota las rectificaciones. Son 2 minutos, no cuesta nada.
  4. La persona de administración, a mano, prepara el albarán para el cliente. Son 5 minutos, no cuesta nada.
  5. El cliente pasa al ordenador, en alguna aplicación o en alguna hoja de control, los datos del albarán. Son 5 minutos, no cuesta nada.
  6. El personal de administración pasa al ordenador los datos del albarán, para hacer la factura. Son 5 minutos, no cuesta nada.
  7. ¡Vaya, hay un error! En el paso 4: donde había un 8 alguien ha visto un 3 y se ha equivocado. Hay que arreglarlo, avisar al cliente y pasarle el albarán corregido. Son 20 minutos de trabajo, pero como lo hemos hecho toda la vida así, no pasa nada. Y el cliente tiene 20 minutos más de trabajo, porque ya tenía el albarán entrado, pero como es normal, con 20 minutos extras de trabajo el domingo por la noche y una rabieta, se soluciona el problema.

¡Y Final!: después de al menos 5 pasos los datos se digitalizan y ya los tenemos más o menos bien preparadas para el futuro: para emitir las facturas, contabilizar actividad de la empresa, contabilizar el IVA, etc.

Y en este tan asumido y tan clásico procedimiento de hacerlo todo a mano, no paramos a pensar que en el “a mí ya me está bien así porque me resulta más cómodo” hay implícita una enorme pérdida de tiempo, y el tiempo en la empresa es dinero.

Digitalizar la información y los datos que emitimos en la empresa es una necesidad, nos aporta sistemática, nos hace ahorrar tiempo y por lo tanto también nos hace ahorrar dinero. Digitalizar, muchas veces sólo significa conocer alguna aplicación de gestión y tener cuatro ficheros bien relacionados. El coste de organizar los procesos de trabajo es asumible, porque hay sistemas adecuados para empresas de todas las dimensiones, tanto en complejidad como en coste.

Digitalizar desde el momento 0 los procesos de trabajo es fundamental. Te propongo que hagas un ejercicio:

  • Elige un procedimiento de trabajo que aún no tenga sistematizado.
  • Cuenta cuánto tiempo a la semana gasta en realizarlo.
  • Cuenta el dinero que este trabajo supone.

Si el gasto de un solo año, que ahora asumes, permitiera contratar un servicio para ayudarte a sistematizar la digitalización de este proceso, ¿no crees que te permitiría hacer el cambio? Pues es muy posible que no necesites tanto dinero para hacer esta mejora.