• Saltar a la navegación principal
  • Saltar al contenido principal

Sebastián Thüer

Comunicación, diseño y tecnología

  • Acerca
  • Blog
  • Contacto
  • Show Search
Hide Search

Diseño Web

El 22% de los nuevos sitios de USA utiliza WordPress [actualizado]

Sebastián Thüer · 19.08.2011 ·

Los números que arrojó la última encuesta de WordPress son realmente impresionantes: El 22% de los nuevos dominios activos de Estados Unidos utilliza WordPress. Si consideramos el top del primer millón de sitios web en el mundo, WordPress está presente en el 14,7%, con un crecimientod el 8,5%

¿Qué hay detrás de estos números? Un sistema de gestión de contenidos que ha evolucionado y combina potencia, flexibilidad y relativa facilidad de uso. Además, una enorme comunidad de desarrolladores, diseñadores y especialistas que ofrecen recursos gratuitos y pagos.

Un dato interesante tiene que ver con la performance del software libre en un mundo en crisis. De las personas que respondieron la encuesta, uno 6.800 consideran que desarrollar sitios web en WordPress es su principal ocupación .Son responsables  de 170.000 sitios web y tienen un ingreso promedio de 50 dólares por hora.

Si te interesa analizar los datos está disponible el archivo fuente con toda la información ¿Querés más datos? Mira esta infografía.

Actualizado y corregido gracias a @margenats

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

Sebastián Thüer · 18.08.2011 ·

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

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

Sebastián Thüer · 16.08.2011 ·


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

  • Details
  • Schedule
  • Speakers
  • Sponsors
  • Register

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


Edge, una herramienta de Adobe para animaciones con CSS

Sebastián Thüer · 05.08.2011 ·


Una de las características novedosas de CSS3 es la posibilidad de realizar animaciones. Básicamente, a través de un conjunto de instrucciones es posible manipular un objeto para rotarlo, desplazarlo por la pantalla y modificar algunas de sus propiedades. Sin embargo, puede ser una tarea bastante compleja y abstracta para realizarlo desde una línea de código.

Consciente de ello Adobe Labs acaba de lanzar Edge, una herramienta destinada a que los diseñadores puedan animar contenido mediante una interfaz visual sencilla y fácil de manejar. Si vemos la captura de pantalla que han publicado en hacks.mozilla.org, la interfaz recuerda bastante a las primeras versiones de Flash:

Esta versión de Edge hace foco fundamentalmente en agregar animación enriquecida a proyectos de HTML para que se vean bien en diferentes dispositivos. Entre otras cosas ofrece:

  • Herramientas de dibujo y texto
  • Importar gráficos en formato SVG, PNG; JPG y GIF
  • Editor con línea de tiempo para animar modificando posición, tamaño, color, forma, rotación y más propiedades
  • Agregar animación a un proyecto existente sin modificar el diseño en HTML/CSS existente
  • Copiar y pegar transiciones, invertirlas y escoger entre más de 25 efectos predeterminados

Primeras impresiones

Las diferentes evaluaciones que hay de esta herramienta parecen orientarse en dos direcciones. Por un lado, los entusiastas de Adobe lo ven como el próximo estandard en animaciones simples para la web ya que realemente es sencillo de operar y permite realzar visualmente una diseño en poco tiempo.

Del lado más crítico, señalan que el código es bastante enredado y se basa en superpoblar de DIVs la página con lo cual seguir el código puede ser bastante complejo. Agregan, que en realidad no usa CSS puro sino que utiliza también la biblioteca jQuery. Los más puristas, también le achacan que no se utilice el poder semántico de HTML5.

Adobe Edge está en beta y se ofrece de forma gratuita para los usuarios registrados en Adobe.

Contrast Rebellion, manifiesto contra el bajo contraste en la web

Sebastián Thüer · 03.08.2011 ·

Hay sitios que son fabulosos. Un diseño cuidado hasta el último detalle, gran organización del espacio, composición equilibrada y un gran estilo. Pero descuidan un aspecto crucial: el contraste para la lectura.

Contrast Rebellion es un manifiesto para favorecer el buen uso del contraste en el diseño web. Construido como una única página con scroll vertical, a lo largo de las diferentes pantallas se van desplegando argumento convincentes sobre por qué tener en cuenta un adecuado contraste que favorezca la lectura.

Además del contenido del sitio, los recursos utilizados en el sitio son muy interesantes e inspiradores. Me gusta especialmente la animación inicial del puño que gira el círculo partido en blanco y negro.

  • « Ir a la página anterior
  • Página 1
  • Páginas intermedias omitidas …
  • Página 17
  • Página 18
  • Página 19
  • Página 20
  • Página 21
  • Páginas intermedias omitidas …
  • Página 38
  • Ir a la página siguiente »

Sebastián Thüer

Creative Commons Atribución 4.0 Internacional © 2025 · Less Is More · Acceder