Sebastián Thüer

Comunicación, diseño y tecnología

Blog sobre tecnología, diseño y comunicación

Activo desde 2005 hasta 2019.

Los mejores sitios web del año seleccionados por la revista Time

· ·

La revista Time ha dado a conocer los mejores sitios web de 2011. Como toda lista, tiene sus limitaciones y sesgos pero es interesante para analizar qué es lo que espera el gran público de un sitio.

Cuando trabajamos en el sector de la tecnología corremos el riesgo de cerrarnos en un círculo bastante pequeño donde nos deslumbramos por páginas que nos parecen increíbles por el trabajo y el cuidado que tienen en su desarrollo pero que, de cara a la mayoría de los usuarios, no son gran cosa.

Por eso, este listado nos ubica en una perspectiva más global donde las tendencias y los gustos se mueven a un ritmo y con una lógica diferente del mundo más geek. En definitiva, si tenés que realizar algún trabajo de diseño o desarrollo web en algunas de las categorías que analizó Time no está de más mirar y ver qué es lo que se espera hoy de un buen sitio de su rubro.

Música y Video

8 Tracks

HBO Go

Howcast

My Damn Channel

Turntable.fm

Familia & Niños

Cafemom

Dear Photograph

Poptropica

Proust

Wonderopolis

Deportes

Bleacher Report

Grantland

Jayski

Onion Sports Network

SB Nation

Información & Noticias

Big Think

GetHuman

Instapaper

ScienceDaily

Techmeme

Finanzas & Productividad

DuckDuckGo

Evernote

Join.me

Kickstarter

LearnVest

Viajes & Compras

Airbnb

Gogobot

Hipmunk

Polyvore

Retrevo

Salud y Ejercicio

CalorieKing

HealthGrades

MapMyRun

Summer Tomato

Zen Habits

Social Media

Google+

Klout

Pinterest

Quora

Storify

Juegos

The Escapist

Giant Bomb

OnLive

Touch Arcade

Retrocade

Educación

Freerice

Khan Academy

Open Yale Courses

Smarthistory

Starfall

Llega Firefox 6 y promete una navegación más veloz

· ·

Firefox 6 ya está disponible. Apenas dos meses después del lanzamiento de Firefox 5, llega esta nueva versión que básicamente promete mejorar el rendimiento y la velocidad de navegación. Además, incluye mejoras en el administrador de complementos, información sobre cómo el navegador utiliza memoria, optimización con Firefox Sync para la sincronización de contraseñas y más.

Una de las mejoras más significativas tiene que ver con el inicio del programa que ahora es bastante más rápido. Se nota especialmente cuando recuperamos una sesión anterior de varias pestañanas abiertas que solía llevar bastante tiempo.

Además de varios arreglos de fallos de seguridad, una detalles interesante es la posibilidad de manejar permisos por sitios web. Por ejemplo, podemos elegir por cada sitio si queremos guardar claves, admitir cookies o aceptar ventajas emergentes. En el blog hispano de Mozilla está el listado completo de mejoras que trae.

CSS3 glow tabs: Menú de pestañas con efectos visuales para tu página web

· ·


Los pequeños detalles son los que le dan estilo diferente a tu diseño. En el caso de la web, muchas veces no queda más remedio que utilizar alguna librería de JavaScript para hacer transiciones, animaciones y otro tipo de efectos. Sin embargo, con CSS3 esto está cambiando.

Louis Lazaris nos presente un muy buen tutorial para crear un menú te pestañas con bordes curvos, sombras, fondo degradado y efectos de transición utilizando solamente CSS3. El resultado se puede ver en esta página.

La implementación es bastante simple y lo bueno es que los efectos visuales están implementados de forma progresiva para que los navegadores sin soporte para la nueva versión del CSS puedan igualmente mostrar la página adecuadamente.

Código del CSS

html,body,div,span,
applet,object,iframe,code,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,
del,dfn,font,img,ins,kbd,q,s,samp,
small,strike,sub,sup,tt,var,
dd,dl,dt,li,ol,ul,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td {
margin: 0;
padding: 0;
border: 0;
font-weight: normal;
font-style: normal;
font-family: inherit;
text-align: left;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ul {
list-style: none;
}
q:before,q:after,
blockquote:before,blockquote:after {
content: "";
}

h1 {
color: #fff;
text-align: center;
padding: 80px 0 30px 0;
}

h2 {
text-align: center;
padding: 40px 0 0 0;
width: 75%;
margin: 0 auto;
}

body {
background: #131925;
}

ol {
list-style: decimal;
font-size: 24px;
width: 400px;
padding: 30px 0 0 60px;
margin: 0 auto;
}

ul#navigation {
height: 36px;
padding: 20px 20px 0 30px;
width: 904px;
margin: 0 auto;
position: relative;
overflow: hidden;
}

ul#navigation li {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
float: left;
width: 168px;
margin: 0 10px 0 0;
background-color: #2B477D;
border: solid 1px #415F9D;
position: relative;
z-index: 1;
}

ul#navigation li.selected {
z-index: 3;
}

ul#navigation li.shadow {
width: 100%;
height: 2px;
position: absolute;
bottom: -3px;
left: 0;
border: none;
background: none;
z-index: 2;
-webkit-box-shadow: #111 0 -2px 6px;
-moz-box-shadow: #111 0 -2px 6px;
box-shadow: #111 0 -2px 6px;
}

ul#navigation li a:link, ul#navigation li a:visited {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
display: block;
text-align: center;
width: 168px;
height: 40px;
line-height: 36px;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
font-size: 13px;
font-weight: bold;
color: #fff;
letter-spacing: 1px;
outline: none;
float: left;
background: #2B477D;
-webkit-transition: background-color 0.3s linear;
-moz-transition: background-color 0.3s linear;
-o-transition: background-color 0.3s linear;
}

ul#navigation li a:hover {
background-color: #5a87dd;
}

ul#navigation li.selected a:link, ul#navigation li.selected a:visited {
color: #2B477D;
border: solid 1px #fff;
-webkit-transition: background-color 0.2s linear;
background: -moz-linear-gradient(top center, #d1d1d1, #f2f2f2 80%) repeat scroll 0 0 #f2f2f2;
background: -webkit-gradient(linear,left bottom,left top,color-stop(.2, #f2f2f2),color-stop(.8, #d1d1d1));
background-color: #f2f2f2;
}

#content {
width: 910px;
background: #f2f2f2;
padding: 0 0 50px 0;
margin: 0 auto;
}

Código HTML





CSS3 Glow Tabs

CSS3 Glow Tabs with Box Shadow

The tabs in this demo are image-less tabs
with 4 different CSS3 enhancements:

  1. Rounded Corners (border-radius)
  2. Box Shadow (bottom of inactive tabs)
  3. Transitions (the glow on hover)
  4. Gradients (the active tab)

CSS Transitions work in Chrome, Safari, Opera 10.5 & Firefox 3.7

The basic idea and techniques presented here are taken from the tabs on the jQuery Conference site.

< Go Back to the Article


Web Analytics: Los promedios mundiales globales [infografía]

· ·

¿Cuántas páginas promedio visita un usuario en un sitio web? ¿Qué porcentaje de usuarios abandona un sitio sin llegar a navegarlo? ¿Cómo es el comportamiento por países? Hace un tiempo Google Analytics tuvo la interesante idea de hacer un reporte comparativo presentando los valores promedios más habituales de un sitio web.

Para elló tomó todos los datos de aquellos webmaster que utilizan Google Analytics y deciden compartir los datos con los demás. Con esta información, la gente de Kiss Metrics elaboró una más que interesante infografía que ayuda a visualizar la información. Por ejemplo, nos enteramos que en el último año la gente navega menos por un sitio: de 4,9 páginas vistas en promedio en 2010 pasó a 4,5 páginas en 2011). También, permence menos tiempo en una web con 4:50 minutos promedio en 2011 frente a 5:49 en 2010.

En el análisis de datos por países, los chinos son los usuarios más impacientes con una tasa de rebote de 0.58, mientras que los habitantes de las paradisíacas islas de Aruba y Saint Lucía tienen una actitud mucho más relajada con una tasa de rebote de 0.30.

Vía Kiss Metrics.

Los enlaces, clave para conseguir seguidores en Twitter

· ·

¿Cómo conseguir seguidores en Twitter? Aunque no lo admitan, la pregunta desvela a community managers y responsables de campañas en social media. Porque aunque estamos de acuerdo en que coleccionar followers como si fuesen figuritas no tiene ningún sentido, tampoco resulta rentable invertir en una estrategia de medios sociales si el mensaje no llega a nadie.

En The Social Media Scientis, Dan Zarella hace algunos análisis de correlación bastante básicos pero que arrojan resultados más que interesantes. Por ejemplo, que es un mito que los usuarios que más responden y conversan con la comunidad son los que tienen más seguidores. Por el contrario, los que manejan un número de followers reducido son los más «conversadores». Claro que esto no significa aislarse y comenzar a utilizar Twitter de forma unidireccional, porque al final de cuentas comunidad y conversación son conceptos básicos sin los cuales la intervención la presencia en Twitter se desnaturaliza. Sin embargo, hay que tener en cuenta que no por mucho contestar a nuestros followers sumaremos más seguidores.

¿Qué patrón siguen los usuarios que obtienen más followers en Twitter? Al parecer, un gran porcentaje de sus mensajes contienen enlaces. Como lo muestra el gráfico anterior, la estadística indica que los usuarios con más de 1.000 seguidores publican muchos más enlaces que aquellos que no llegan a las cuatro cifras de followers.

En síntesis, para desarrollar una estrategia en social media está bien conversar y crear una comunidad porque una organización que monologa se torna aburrida, distante y soberbia. Pero como ocurre en el mundo real, no por mucho hablar tenemos más amigos. La clave está por compartir información de calidad.

Información de calidad no es publicar links a páginas de especificaciones técnicas, publicidades y autobombo -que al final nos hace aburridos y soberbios- sino aportar valor real haciendo algo más razonable: compartir cosas interesantes.