Video de la conferencia completa:

Enlace al video.
(El audio está muy bajo al inicio pero luego lo componen un poco).

Además subieron un par de videos separados de la conferencia general, estos son los de los anfitriones @cvander y @freddier.

Charla de HTML5:

Enlace al video.

Aquí aprovecho para dejarles listos algunos de los enlaces que nos comparte en el video:

• HTML5 — A technical specification for Web developers
• Dive into HTML5 by Mark Pilgrim
• HTML5 Boilerplate
• HTML5 Doctor
• HTML5 Rocks
• Guía de HTML5 en PDF

Sobre el futuro del internet:

Yo sí vi la transmisión en vivo y aunque fueron largas las esperas creo que estuvo muy bien en general, me da gusto que se hagan esta clase de proyectos y se comparta el conocimiento.

Mini Pixel Icons por Icon Dock

Descarga

Spirit20 Icons by 19Eighty7

Descarga

Web Icon Set by SEM Labs

Descarga

Si quieres ver los otros 12 de la lista visita el siguiente enlace:

• 15 High quality mini icon sets for your web projects

Es el primer theme para WordPress que diseñé, lo hice para mi blog personal, y algunos visitantes me dijeron que les había gustado y que les agradaría poder usarlo para su propio blog por lo cual decidí liberarlo y aquí está.

Características

• 3 columnas (contenido y 2 columnas laterales o sidebars)
• Valida en CSS y XHTML
• Widget Ready
• Ancho fijo
• Simple y muy ligero
• En español
• Gratis

Aquí tienen una captura de pantalla del aspecto del tema (prometo poner un demo después):

¡Todo el theme no mide más que 129KB!, la rapidez de carga es algo que tomé muy en cuenta al elaborarlo.

Descárgalo

En fin, es todo suyo, pueden editarlo si quieren pero deben conservar los enlaces de créditos.

DESCARGAR – ChakTheme.zip (77KB)

Sugerencias y peticiones respecto al theme las tomaré en cuenta, también estaré muy atenta por si encuentran algo roto o que no funciona para arreglarlo.

Espero que les guste.

Hay algunos diseñadores web que simplemente ignoran a Internet Explorer, el navegador que viene por defecto en una computadora con el sistema operativo Windows, lo ignoran porque muchas veces cuando estamos diseñando nuestro sitio todo va perfecto en Firefox, Opera, Safari… Y cuando lo vemos en IE todo parece estar roto, y no sabemos por qué.

¿Porqué sucede esto?, es simple, las versiones antiguas de Internet Explorer no respetan los estándares web mientras que los otros sí, las versiones más recientes corrigen ese problema pero por desgracia hay mucha gente que sigue usando viejas versiones y que por no saber que hay algo mejor siguen viendo el internet todo descuadrado y mal. Lo malo es que pueden llegar a tu sitio, que tanto tiempo te tomó diseñar y embellecer, y verlo todo de cabeza.

Adaptar tu diseño a que se vea bien en todas las versiones de IE es a veces imposible y muchas veces terminas cambiando el diseño original sólo para que éste se vea decente en todos los navegadores, lo cual es una lástima, pero depende de cada quien tomar la decisión de si quiere o no hacer su diseño apto para todos los navegadores (lo cual se vuelve difícil si intentas abarcar todas las versiones de IE).

¿Cómo saber si es necesario o no adaptar mi sitio a IE?

Aquí es donde IE Tester nos es muy útil, solamente lo tienes que descargar e instalar para ver que tan bien o mal se ve nuestro sitio en cada una de las versiones, luego, con un sistema de estadísticas averiguar que navegador es más utilizado por nuestros visitantes, yo reviso eso con Google Analytics:

Revisando el perfil de mis visitantes en general me encuentro con que Internet Explorer es el navegador que más usan, si clickeo ese navegador se desglosará en las versiones más usadas:

Ahí es donde veo que la versión 8 y 7 son de las más utilizadas, lo cual es bueno pues no son tan malas como las anteriores, pero la versión 6, en la que mi sitio se ve un poco descuadrado, todavía lo utilizan unas cuantas personas.

Entonces mis prioridades son hacer que mi sitio se vea bien en IE 8 y 7, luego la temible versión 6. Por la versión 5.5 ni me preocupo ya que el porcentaje es tan insignificante que sería mucho esfuerzo y pérdida de tiempo para un navegador que casi nadie usa (y no sé ni qué demonios hacer con la versión 999.1, por eso la ignoraré).

Si nadie usara IE pues no me preocuparía para nada, pero creo yo que es bueno que el diseñador se empeñe en hacer un sitio que se vea bien en todos los navegadores posibles (en inglés le dicen crossbrowser).

Enlaces útiles

• Descarga IE Tester – Herramienta para saber cómo se ve tu sitio en las versiones distintas de Internet Explorer
• Tal vez no quieras diseñar para IE y prefieras advertir a tus usuarios que su versión de navegador no les permite ver bien tu sitio, para ello te pueden servir lo dicho en Aprendiendo Web y colocar mensajes que sólo se ven en determinado navegador.
• Te puedes unir a la campaña para que se deje de usar el IE 6.

The FWA es un sitio tipo galería que expone excelentes diseños de páginas web, si eres un diseñador que se perfila para diseño web pues es muy aconsejable que lo visites para inspirarte y ver que es lo que se hace en otras partes del mundo.

Los sitios son juzgados en base a diseño, navegabilidad, gráficas, contenido y personalidad.

La mayoría de los sitios presentados son interactivos y dinámicos, de modo que podemos ver mucha animación flash.

Enlace / The FWA: Favourite Website Awards

Además del diseño gráfico los blogs o el blogging también me encanta, y para que un blog triunfe su diseño es pieza clave. Este diseño se puede catalogar en diseño web y claro que entra dentro del enorme mundo de lo que es el diseño gráfico.

Antes ya hablé de los errores más frecuentes en el diseño de un blog, pero en esta nota les voy dar algunas recomendaciones para el buen diseño de tu blog desde mi punto de vista.

• Que el espacio de contenido sea más ancho que el de las columnas o sidebars. No estoy hablando de portadas de blog tipo magazine, puesto que la estructura es muy diferente, pero en una estructura estándar siempre hay que procurar que el espacio que le vas a dejar a tus posts sea más ancho que el que ocupan otros elementos, tu contenido es lo más importante. Yo recomendaría un ancho mínimo de 500 pixeles, para incluir imágenes que no sean tan pequeñas y que el texto no se vea muy apretado.

• Que el encabezado no ocupe demasiado espacio verticalmente y deje ver el contenido sin tener que ir hacia abajo en el blog para poder verlo. Así cuando un visitante entre a nuestro blog podrá ver el contenido sin tener que hacer scroll, recuerda que la resolución pequeña más usada es de 1024 x 768px, toma en cuenta esas medidas al diseñar tu blog. Además si usas publicidad tienes que procurar que esta quede también visible en cuanto entres al sitio.

• Incluye un menú para las páginas del blog que sea fácilmente distiguible de otros links, que no se pierda, lo mejor es en la parte superior, en el encabezado (header) o al comienzo de la columna lateral.
• Que se note que los enlaces son enlaces. Preferentemente con otro color haz que los enlaces sean diferentes del texto en general, también puedes subrayarlos ya que los usuarios promedio en general esperan que sea así.

• Procura contraste entre el texto y el fondo. No tiene que ser simplemente blanco y negro pero busca que no se pierda, tanto en el texto como con los enlaces y titulares. Te dejo esta herramienta online que te ayuda a checar el contraste: Colour Contrast Check (fijate especialmente que en el campo de resultados Are colours compliant? diga YES!).

• Delimita bien las áreas. Sobre todo en portada que quede bien claro cuando termina un post y cuando comienza otro, esto puede ser logrado simplemente con una línea de separación o con un buen tamaño y color de los enlaces de título.

• Cuida que las imágenes no sean demasiado grandes, es decir más grandes que el área de tu post porque luego se empalmarían con la sidebar o descuadrarían todo el diseño. Puede que ahora esté perfecto pero recuerda eso a la hora de cambiar de theme o plantilla, busca tus posts con imágenes y anota cuánto miden las más anchas, toma eso de referencia como el mínimo de ancho que deberá de tener de ahí en adelante, a menos que pienses en redimensionarlas todas…
• Mantenlo ligero. Puede que tu blog se vea super, con muchos efectos e imágenes pero para un visitante nuevo pudiera ser una tortura esperar a que cargue la página. Para esto nunca utilices imágenes en formato BMP, prefiere GIF o incluso JPG (a excepción del logotipo, en ese caso siempre prefiero PNG). Visita tu blog desde otra computadora que no sea la tuya, así verás cuanto tiempo espera un visitante para que abra la página, ¿abre muy lento? a optimizar se ha dicho.
• ¿Se ve igual en firefox que en IE?, pues espero que sí. Ya sabemos que IE es el dolor de cabeza de los diseñadores web porque es un navegador que no cumple con los estándares, por eso en algunos casos es imposible lograr algunos detalles que en otros es pan comido, sin embargo sigue siendo el navegador más usado y es mejor checar en ambos navegadores que el sitio se vea lo mejor posible. Ten ambos navegadores abiertos cuando estes editando el diseño de tu blog y a cada cambio que hagas lo checas en los 2.
• Valida tu CSS y HTML. Un blog que está correctamente estructurado desde su código es mejor tratado por los robots o spiders de los navegadores, si tu blog valida será mejor interpretado e indexado, además es muestra de profesionalismo y del empeño que le pones a tu blog. ¿Cómo saber si valida?, accede al validador de la w3c: The W3C Markup Validation Service, solo escribes la dirección de tu blog en el campo de Address y le das enter o presionas el botón Check. Si estas en blogger ni te apures, la estructura de la plataforma nunca te va a permitir que valide.

Espero que les hayan gustado estas sencillas recomendaciones que harán que tu blog sea más agradable para los visitantes e incluso para ti mismo. Claro que todo es desde mi punto de vista y cada blog es un mundo muy diferente, pero creo que los puntos que traté son aplicables a la mayoría.

Seguro tienes otra sugerencia, ¡anímate a agregar tu recomendación en los comentarios!

El minimalismo ha invadido todos los ámbitos del diseño, incluyendo el diseño web, y Minimal Exhibit es una galería que pretende mostrarnos lo mejor del diseño web minimalista, ví unos muy buenos sitios ahí, si te gusta este tipo de diseño pues no esta de más darle una vuelta.

Enlace: Minimal Exhibit

El jQuery es una mezcla de Javascript, HTML y Ajax con la que podemos lograr efectos dinámicos en el diseño web, a veces podemos lograr movimientos con estilos tan buenos que casi parece algo hecho con flash pero al ser con jQuery resulta en algo mucho más liviano.

En Tutorial 9 hicieron una recopilación de 22 plugins de jQuery que ya estan listos para descargarse e implementar en tus proyectos web. Últimamente me ando interesando en este tipo de herramientas por eso no podía dejar de compartirlos con ustedes (y tenerlos aquí archivado para futura referencia).

Así que dejo los enlaces a algunos de los que más me llamaron la atención:

• Thickbox 3.1. Para abrir una imagen en una “sub ventana” dentro del mismo sitio, incluso pudiendo agregarle una descripción.
• Lightbox. Similar a la anterior pero más sencilla y simple.
• Sliding Boxes and Captions with jQuery. En una imagen puedes tener cajas de texto que se deslizan hacia arriba, hacia abajo o a tu voluntad, muy bueno.
• jPlayer. Para tener tu propio reproductor en tu web.
• InnerFade. Con este cambias entre imagen e imagen (o texto o lo que quieras) con un suave efecto de desvanecimiento.
• Coda Slider 1.1.1. Muy visto ya pero es un buen efecto en el que se deslizan horizontalmente diferentes cajas de contenido.
• jQuery Toggle Elements. Elementos que se despliegan suavemente cuando clickeas.
• Sliding Menú. Un menú que aparece dinámicamente con un click.
• Lava Lamp. Para un menú con un efecto muy dinámico de fondo.
• loopedslider. Otro para cambiar entre contenido (texto o imágenes) deslizándose muy personalizable.

Para ver los demás visita el siguiente enlace: 22 Beautiful jQuery Plugins for Web Designers

CSSCrap (en español algo como CSSPorquería) es el nombre de una web que recopila algunos de los peores diseños de sitios web para verlos y compararlos (contrario a otros sitios como CSS Lite que agrupan lo mejor de lo mejor), en esta página ves ejemplos perfectos de que no hacer en CSS.

[Visitar CSSCrap]

Via Elderbyweb

Blind Text Generator es una herramienta online que nos sirve para obtener textos que podemos usar para llenar espacios en nuestros diseños (dummy text). Sobre todo a la hora de diseño web. Puedes elegir entre varios idiomas y varios textos (aunque a la larga no tenga mucho sentido, pues sólo es texto de muestra que luego será cambiado), y puedes elegir cantidad de palabras, parrafos, letras, y elegir desde las opciones avanzadas el tipo de letra, tramaño y automáticamente te da el código CSS para ese estilo.

[Visitar Blind Text Generator en español]

Via antilogic.