La web que os arrancará una sonrisa, y dos minutos de vuestro tiempo

captura-2

En donottouch.org tenemos un original y divertido proyecto del cual es imposible no participar.

Se trata de una web en la que nos anima a realizar acciones con el cursor: sigue la zona verde, forma una sonrisa junto con el resto de usuarios, crea una máscara, evita al resto de cursores… son decenas de actividades que tenemos que realizar junto con miles de otras personas, formándose un ví­deo que junta nuestro cursor para la próxima vez que se reproduzca.

Es decir, que si vemos cientos de cursores participando de las actividades no significa que lo estén haciendo en este momento y sí­ que lo han hecho en el pasado y el ví­deo los ha ido juntando con el tiempo.

Es un interesante experimento para ver lo que la mayorí­a de la gente hace cuando se pide algo con el cursor, no es en tiempo real, como cursors.space, pero sí­ mucho más entretenido y original, ideal para perder un rato antes de seguir trabajando.

publishpage, una forma diferente de crear y publicar páginas web

captura-63

Sin los lí­mites que imponen las plantillas, sin necesitar saber HTML, sin preocuparse de hosting… lo que ofrece www.publishpage.com es una total libertad para crear textos, imágenes y enlaces, así­ como dibujos, en cualquier lugar de una enorme cuadrí­cula disponible, permitiendo publicar el resultado en cualquier momento.

Solo tenemos que pulsar en el botón Create New Page y empezar a construir bloques de información arrastrando el ratón. En cada contenido es posible incluir texto, imagen o enlace, aunque hay muchas más opciones en la barra superior para personalizar el resultado.

Podemos navegar por lo que han hech otras personas, así­ como obtener el link de nuestra página publicada y divulgarlo por email o redes sociales.

Se trata de un proyecto creado con JavaScript, Google Application Engine, HTML5 Canvas y Google Fonts, presentado en Chrome experiments hace pocos dí­as por su creador, Bernhard Pauler, quien ha tenido una idea que puede ser extremadamente útil en muchos casos.

Unindexed, una web creada con el único objetivo de autodestruirse tan pronto fuese indexada por Google

Unindexed

Hoy os hablamos de Unindexed, un singular experimento «acerca de la naturaleza de lo efí­mero y lo persistente en la web», tal y como explica Matthew Rothberg, el creador del proyecto.

Unindexed es, sin lugar a dudas, un proyecto de lo más peculiar. Resulta curioso que la única función de la web creada por Rothberg fuese buscarse constantemente a si misma en Google con el objetivo de averiguar si habí­a sido indexada. De esta forma, tan pronto se localizase a si misma en los resultados de búsqueda del popular buscador, el sitio web se borrarí­a para siempre de forma automática. Esto sucedió el pasado 24 de febrero, cuando finalmente Google indexó la web del proyecto, de modo que Unindexed desapareció de forma irremediable. Por ello, si ahora intentamos acceder a la URL donde anteriormente se encontraba el sitio web nos encontraremos un mensaje en el que se indica que el sitio web ya no se puede encontrar en esa dirección. Mientras estaba activo, se alentaba a los visitantes de la web a compartir el sitio con otros usuarios, alertando de que la forma en la que lo hiciesen tendrí­a un impacto directo en el tiempo en que el sitio web serí­a indexado por Google. Por ello, muchos usuarios lo compartieron a través del boca a boca o por correo postal. Hasta el momento en el que Unindexed fue indexado por Google, el sitio web permaneció activo durante 22 dí­as.

El creador del proyecto ha compartido el código de la web en Github.

Fuente: Matthew Rothberg.

Una infografí­a muestra el aspecto de famosos sitios web hace muchos años

Si queréis ver cómo era Google en el siglo XX, el aspecto de Twitter cuando nació, el diseño de la página principal de Apple en 1996, cómo nació Youtube y muchos otros sitios web, echad un vistazo en esta infografí­a que nos enví­an desde ninjaessays.com.

Usando servicios como WayBackMachine, han capturado el aspecto de Facebook, Twitter, Apple, Google, YouTube, eBay, LinkedIn, Yahoo y Flickr para mostrarlos en una única imagen que nos hace reflexionar sobre el aspecto que tendrá Internet dentro de otros 10 años…

infografia

failswitch crea una copia en HTML de tu sitio web y la muestra cuando tu servidor ha caí­do

Si en tu servicio de hospedaje hay caí­das constantes, y cada minuto de caí­da es dinero perdido, prestad atención a este servicio.

Se trata de failswitch.com, plataforma que ofrece crear una copia diaria en HTML de vuestro sitio web para tenerla siempre disponible cada vez que el servidor original que lo hospeda caiga. Lo que mostrará a las visitas durante ese tiempo será una copia estática de vuestro sitio, sin base de datos, simplemente la información guardada en el último backup para evitar que los posibles clientes o lectores se encuentren con un error.

El funcionamiento es sencillo. Usan un DNS que mantendrá los valores originales, apuntando al servidor original si todo está bien. Cuando detecta una caí­da del sitio, enví­a las visitas a su servidor propio, sin que tengamos que hacer nada, ya que ese cambio es automático.

failswitch acaba de nacer, no podemos garantizar su perfecto funcionamiento, pero dan información sobre los precios y los pasos que hay que seguir para disfrutar de esta opción. Tiene un coste de 15 dólares por mes, siendo necesario cambiar los DNS en el sitio donde compramos el dominio.

Existe un riesgo, claro, ya que tendremos los DNS apuntando a failswitch, no a nuestro servidor, lo que significa que si hay algún problema con failswitch, podremos ver nuestra web caí­da sin que nuestro servicio de hospedaje tenga ninguna culpa. Aún así­, comentan que trabajan con dnsmadeeasy, con bastante reputación en el mundo DNS, por lo que el riesgo es pequeño.

Es importante también tener en cuenta que a veces una copia en HTML de nuestro sitio web no resuelve el problema, ya que en una tienda online, por ejemplo, no se podrí­an realizar operaciones.

La muerte de los sliders en home page

captura

Hoy os comparto un experimento de analí­tica web que realicé recientemente donde enfrento el CTR de banners vs sliders en home page para acompañar una reflexión cada vez más habitual sobre el cambio de gustos en lo referente a diseño web del consumidor de contenidos. A fin de cuentas son los usuarios quienes marcan el camino, no lo olvidemos.

El diseño web avanza a un ritmo creativo del que a menudo no somos del todo conscientes, pero este constante cambio no hace más que adaptarse a la forma en que los consumidores navegan por internet y los dispositivos desde los cuales lo hacen.

«Es el usuario quien determina con su uso los diseños web más habituales hoy en dí­a, ¿siguen triunfando los sliders?»

Las grandes empresas hace unos años que apuestan fuerte por el entorno mobile como base de su inversión online, o cuanto menos esta partida no hace más que engrosarse mes a mes. Hablar de móviles, por tanto, es hablar de asuntos como el responsive design que al fin parece que la mayorí­a de empresas han conseguido incluir entre sus requisitos a la hora de diseñar o rediseñar una web. Ahora bien, ¿por qué en esta maduración de la era mobile todaví­a vemos sliders en la mayorí­a de home pages de cualquier empresa de internet? Es momento de iniciar el experimento y compartiros algunas interesantes conclusiones.

 

Como analista web, no suelo hacer afirmaciones sin antes contrastarlas o comprobarlas a través de los datos e información que devuelve la propia analí­tica web de cualquier empresa. Los que me leáis más habitualmente ya sabréis que una de mis citas más recurrentes es que:

«La experiencia profesional maximiza las probabilidades de tomar decisiones acertadas, pero es la analí­tica web la que dice si lo fueron o no, sin mirar cargos o billeteras»

Experimento: ¿Es necesario un rediseño web que elimine el slider de la home page?

«La analí­tica no miente, simplemente que no siempre se mira de la forma correcta»

PASO 1: Etiquetado de eventos en Google Analytics

Iniciando el experimento, puse en marcha un sistema de etiquetado de eventos en la analí­tica web de este ecommerce para diferenciar los clics que recibí­a la home page en el slider principal (fuera cual fuera su pestaña a medida que pasaban, pues para el estudio era indiferente) y los banners estáticos que habí­a debajo del slider.

Así­ pues, con esta simple configuración hecha ya podemos comenzar a recopilar datos sobre clics y CTR en home page tanto del slider a nivel agregado de sus pestañas, así­ como de los contenidos que se muestren debajo del mismo.
Continúa leyendo «La muerte de los sliders en home page»

45 recursos frescos para profesionales web, edicion febrero

Bienvenidos a una nueva compilación de recursos recién salidos para diseñadores y desarrolladores Web, curada por nuestros expertos en ambos campos. Esta vez encontrarás í­conos, plugins y todo tipo de herramientas para mejorar tu desempeño. Vamos a echarles un vistazo:

100 Iconos De Cocina Gratuitos

100 Iconos De Cocina Gratuitos

45 Iconos Vectoriales De Comercio Online

45 Iconos Vectoriales De Comercio Online

Iconos Flat Con Temática De Escritura Y Papelerí­a

Iconos Flat Con Temática De Escritura Y Papelerí­a

Redacted Font: Libérate De Lorem Ipsum

Redacted Font: Libérate De Lorem Ipsum

SUNN: Fuente Hecha a Mano

SUNN: Fuente Hecha a Mano

Gigante paquete gratuito de ilustraciones FLAT

ilustraciones flat

Mockup Con Elementos De Viaje

Mockup Con Elementos De Viaje

Icono: Un Paquete De Iconos En Puro CSS

Icono: Un Paquete De Iconos En Puro CSS

Plantilla De Hoja De Vida En PSD

Plantilla De Hoja De Vida En PSD

Barras De Progreso Y Sliders En PSD

Barras De Progreso Y Sliders En PSD

Un Paquete De Logos, Marcos Y Mockups Con Estilo Antiguo En PSD

Un Paquete De Logos, Marcos Y Mockups Con Estilo Antiguo En PSD

Ink: Un Framework Para Emails Responsivo

Ink: Un Framework Para Emails Responsivo

Justinmind: Wireframes Interactivas Para Web Y Móviles

Justinmind: Wireframes Interactivas Para Web Y Móviles

Tint UI: Paletas De Colores Para Toda Clase De Proyectos

Tint UI: Paletas De Colores Para Toda Clase De Proyectos

Font Pair: Encuentra Espectaculares Combinaciones De Fuentes

Font Pair: Encuentra Espectaculares Combinaciones De Fuentes

Gleam: Una Plataforma Para Hacer Crecer Tu Negocio

Gleam: Una Plataforma Para Hacer Crecer Tu Negocio

RubyGems: Encuentra, Instala Y Distribuye Gemas Ruby

RubyGems: Encuentra, Instala Y Distribuye Gemas Ruby

Brothercake: Encuentra Selectores CSS Sin Usar

Brothercake: Encuentra Selectores CSS Sin Usar

Dante: Un Editor WYSIWYG

Dante: Un Editor WYSIWYG

Piwik: Software De Análisis Web Gratuito

Piwik: Software De Análisis Web Gratuito

SpaceBase: Framework CSS Responsiva Basada En SASS

SpaceBase: Framework CSS Responsiva Basada En SASS

LumX: Un Framework Responsivo, Basado En AngularJS Y El Diseño Material De Google

LumX: Un Framework Responsivo, Basado En AngularJS Y El Diseño Material De Google

Papier: Librerí­a De CSS Responsiva

Papier: Librerí­a De CSS Responsiva

Context.IO: Sincroniza La Info De Tus Emails Fácilmente

Context.IO: Sincroniza La Info De Tus Emails Fácilmente

Bootsy: Framework Para Administradores De Proyectos

Bootsy: Framework Para Administradores De Proyectos

Flatter: Una Gigantezca Interfaz Gráfica En PSD, HTML Y Bootstrap

Flatter: Una Gigantezca Interfaz Gráfica En PSD, HTML Y Bootstrap

Kit De Interfaz Gráfica Con 55 Elementos

Kit De Interfaz Gráfica Con 55 Elementos

Elementos De Interfaz Gráfica Flat En PSD

Elementos De Interfaz Gráfica Flat En PSD

Kit De Diseño Android Lollipop Para Sketch

Kit De Diseño Android Lollipop Para Sketch

Elementos De Interfaz Gráfica Para Negocios En PSD

Elementos De Interfaz Gráfica Para Negocios En PSD

Grid Forms: Atractiva Inserción De Datos

Grid Forms: Atractiva Inserción De Datos

Justified.js: Galerí­as De Imágenes Justificadas

Justified.js: Galerí­as De Imágenes Justificadas

Squire: El Textarea Del Futuro

Squire: El Textarea Del Futuro

Skyline: Construye Frameworks CSS Personalizados

Skyline: Construye Frameworks CSS Personalizados

Descripciones Emergentes Responsivas Con JQuery

Descripciones Emergentes Responsivas Con JQuery

Matter.js: Un Motor Fí­sico 2D En JavaScript

Matter.js: Un Motor Fí­sico 2D En JavaScript

Combokeys: Atajos De Teclado En La Web

Combokeys: Atajos De Teclado En La Web

Keypress: Una Librerí­a Para Capturar Lo Que Insertas Con El Teclado

Keypress: Una Librerí­a Para Capturar Lo Que Insertas Con El Teclado

Sortable: Reorganización De Elementos Para Dispositivos Táctiles

Sortable: Reorganización De Elementos Para Dispositivos Táctiles

Insignia: Etiquetas Personalizables

Insignia: Etiquetas Personalizables

Barra Lateral En Diseño Meterial

Barra Lateral En Diseño Meterial

PNG Es Mejor Que SVG Para Realizar Sprites

PNG Es Mejor Que SVG Para Realizar Sprites

Reloj Funcional En CSS3

Reloj Funcional En CSS3

Menú Deslizante Con Animación Diagonal

Menú Deslizante Con Animación Diagonal

Menú Animado Con CSS Y Flitros SVG

Menú Animado Con CSS Y Flitros SVG

Inoreader lanza funcionalidad que permite guardar páginas web

Guardar Páginas Web

El servicio de suscripción de canales RSS Inoreader ha traí­do hoy una nueva funcionalidad a todos los usuarios, la cual les posibilita guardar todas aquellas páginas web que deseen en sus cuentas de usuario.

Inoreader señala que mientras el uso de las estrellas para destacar contenidos es para uso interno exclusivamente, el uso de las páginas web guardados pueden llegar a convertirse en recursos externos para emplearlos en aquello que los usuarios encuentren pertinentes. En este sentido, las mismas pueden llegar a ser compartidas con otros usuarios mediante la creación de un canal RSS o bien mediante la integración de un clip HTML en cualquier sitio web, aunque esta opción sólo será posible para aquellos usuarios que cuenten con algunas de las suscripciones de pago que dispone el servicio.

Con ello, a las páginas web guardadas se les pueden dar diferentes usos, desde servir como listas de contenidos web para su lectura posterior a convertirse en la documentación necesaria para llevar a cabo un trabajo en concreto, entre otras posibilidades. Si bien Inoreader ya cuenta con botones que permiten guardar enlaces en servicios pensados en servir de almacenamiento de enlaces web pendientes de lectura, quizás los usuarios no se encuentren familiarizado con las mismas, o si lo están, ya no necesitarán hacer uso de ellas, ya que podrán hacer uso de esta nueva funcionalidad a través de diferentes ví­as, tanto en el mismo servicio como a través de las extensiones y bookmarklets existentes para los navegadores web.

Inoreader deja al final claro que no existe limitación alguna en lo que respecta a la cantidad de contenidos web guardados, invitando a los usuarios a darle una oportunidad a esta funcionalidad.

screenbeacon te avisa si hay algún problema de diseño en tu web

Con una filosofí­a semejante a la de VisualPing, herramienta que ya os hemos comentado en algunas ocasiones, ScreenBeacon se presenta como una solución que nos ayudará a detectar cambios en ciertas regiones de nuestro sitio web.

Solo tenemos que seleccionar las áreas que deseamos monitorizar y esperar a que ScreenBeacon realice su trabajo, enviando una alerta cuando hay algún cambio, de diseño o contenido, en las regiones seleccionadas.

ScreenBeacon

Con su extensión para el navegador podemos seleccionar fácilmente varias regiones de una misma web, solamente hemos de hacer click en las partes deseadas. Cuando hay un cambio en el diseño, la web nos avisa después de examinar el código, indicando exactamente lo que ha cambiado.

La aplicación aún está en fase beta, y puede usarse, de momento, de forma gratuita. Ofrece también un histórico de los cambios realizados en la web que estamos monitorizando, siempre con detalles que bajan a nivel de código para que entendamos lo que ha podido ocurrir.

Sencillo y práctico, ideal para el dí­a a dí­a de los que trabajan con diseño y desarrollo de sitios web.

Conjunto de herramientas gratuitas para aumentar el tráfico web

Aquéllos que comienzan un blog o una web de cualquier tipo saben que es complicado empezar a tener un tráfico diario y continuo hací­a el contenido que generamos. Pues bien, existen pequeñas herramientas de sencillo uso que nos ayudan a incrementar ese tráfico web y también mejorar la experiencia de usuario según nuestras necesidades.

SumoMe es un conjunto de herramientas y utilidades que nos permitirán incluir diferentes funcionalidades en nuestra web, desde un formulario de contacto hasta una utilidad de mapas de calor, para saber por dónde se mueven más nuestros visitantes.

Entre las más usadas por ejemplo encontramos “List Builder”, una aplicación para la gestión de suscripciones por correo electrónico a partir de RSS que nos ayudará a incrementar esos potenciales lectores de nuestra web. La app se integra con los más conocidos proveedores de RSS como Mailchimp o Aweber.

Disponen de otra interesante aplicación llamada “Heat Maps” que nos permitirá, mediante un mapa de calor, ver dónde los visitantes hacen más clics, para así­ saber si tenemos el contenido en la posición adecuada y conocer en detalle como interactúan los usuarios en la web.

Todas las herramientas pueden ser instaladas para una web estandar. Y si lo que tenemos es un blog de Wordpress, tienen un plugin dedicado para esta plataforma, por lo que también será muy sencillo de instalar y usar. Sólo tenemos que incluir un trozo de código en nuestro blog y después, mediante su interfaz, instalar las herramientas que decidamos usar, todo ello en pocos pasos.

En resumen, se trata de un grupo de aplicaciones gratuitas para integrar en nuestra web para mejorar la experiencia del usuario, ayudarnos a la gestión de estos y así­ ganar más afluencia de usuarios.