• 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

Un ebook gratuito con los mejores artículos de diseño web de Smashing Magazine

Sebastián Thüer · 13.09.2011 ·

Smashing Magazine es una revista de referencia en el diseño web con artículos que van desde tutoriales, cuestiones conceptuales del diseño y muestras de trabajo de diseñadores talentosos. La publicación con sede en , Alemania, está cumpliendo cinco años y para celebrarlo hay hecho un recopilación de sus mejores artículos para ofrecerlos en formato de ebook.

La listas completa de los artículos publicado es la siguiente:

  • “Thirty Usability Issues to Be Aware Of”  —  Vitaly Friedman
  • “Ten Principles of Effective Web Design”  —  Vitaly Friedman
  • “Clever JPEG Optimization Techniques”  —  Sergey Chikuyonok
  • “Typographic Design Patterns and Best Practices”  —  Smashing Editorial team
  • “Ten Useful Usability Findings and Guidelines”  —  Dmitry Fadeyev
  • “Setting Up Photoshop for Web and iPhone Development”  —  Marc Edwards
  • “The Ails of Typographic Anti-Aliasing”  —  Tom Giannattasio
  • “Mastering Photoshop: Noise, Textures and Gradients”  —  Marc Edwards
  • “Better User Experience With Storytelling”  —  Francisco Inchauste
  • “The Beauty of Typography, Writing Systems and Calligraphy”  —  Jessica Bordeau
  • “Web Designers, Don’t Do It Alone”  —  Paul Boag
  • “Making Your Mark on the Web Is Easier Than You Think”  —  Christian Heilmann
  • “Responsive Web Design: What It Is and How to Use It”  —  Kayla Knight
  • “I Want to Be a Web Designer When I Grow Up”  —  Michael Aleo
  • “Persuasion Triggers in Web Design”  —  David Travis
  • “What Font Should I Use?”  —  Dan Mayer
  • “The Design Matrix: A Powerful Tool for Guiding Client Input”  —  Bridget Fahrland
  • “Why User Experience Cannot Be Designed”  —  Helge Fredheim
  • “Dear Web Design Community, Where Have You Gone?”  —  Vitaly Friedman
  • “Make Your Content Make a Difference”  —  Colleen Jones
  • “Two Cats in a Sack: Designer-Developer Discord”  —  Cassie McDaniel
  • “Print Loves Web”  —  Mark Cossey

El libro aniversario está disponible en PDF o a través de iTunes.

  • Descargar libro en PDF
  • Descarga gratuita desde iTunes

Under The Site, una herramienta para espiar qué tecnología utiliza cada sitio

Sebastián Thüer · 05.09.2011 ·

Es inevitable que  cuando vemos un buen sitio nos preguntemos… ¿cómo lo habrán hecho? Podemos investigar el código fuente, analizar las respuestas que proporciona el servidor y mirar con detalles las rutas de los archivos para descubrir directorios familiares pero lleva demasiado tiempo.

Under The Site facilita esta tarea y con sólo escribir la dirección del sitio nos devuelve un listado bastante complejo de la tecnología empleada en el sitio web. Por ejemplo, vemos que TechCrunch – sitio de referencia en temas de tencología- usa jQuery, Google Analytics, WordPress, el plugin BatCache y HTML5. O que la web de Mozilla está sobre un servidor Apache, programada en PHP y usa Google Chrome Frame para mejorar la visualización de las páginas en Internet Explorer.

El sitio también lista las tecnologías más populares entre las que encontramos:

  • Apache HTTP Server
  • UTF-8 Unicode charset
  • Google Analytics
  • jQuery
  • FBML
  • script.aculo.us
  • Twitter Widgets

Una buena herramienta para jugar un poco y espiar lo que están utilizando los sitios de nuestro segmento.

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


  • « Ir a la página anterior
  • Página 1
  • Páginas intermedias omitidas …
  • Página 10
  • Página 11
  • Página 12
  • Página 13
  • Página 14
  • 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