El sitio de la organización del W3C ha sido rediseñado, la W3C es el consorcio de desarrolladores encargados de desarrollar y establecer los estandares web actuales a los cuales los diseñadores web poco a poco nos apegamos mas para respetarlos y contruir mejores sitios y aplicaciones web, que cumplan estandares y sean mas amigables para los usuarios y visitantes.

Como es de esperarse el nuevo diseño del sitio cumple perfectamente los estandares (seria el colmo si no lo hiciera), los puntos que puedo recalcar de este rediseño son:

• Visualmente no es el ultimo grito de la moda pero es muy atractivo y visualmente comodo.
• La distribución de los contenidos y la legibilidad de los mismos es muy buena.
• Se han considerado perfectamente margenes.
• Los tamaños de letras son perfectamente legibles.
• La posición de los elemnetos de navegación es adecuada e intuitiva.
• Los colores son distintivos para acciones dentro del sitio.
• El uso de javascript es limitado, lo cual asegura aun mas la compatibilidad cross-browsing.
• Tres tipos de visualización: escritorio, impresion y movil

En fin un buen ejemplo de hacer un rediseño simple pero efectivo, torres buriel habla un poco mas sobre el rediseño.

Enlace: www.w3c.org

En fin la idea es inspirarnos para obtener formularios de login bonitos y usables donde el usuario sepa que hacer e incluso podriamos ahorrarnos espacio usando tabs y ventanas flotantes si necesitamos de varios formularios de login, aquí estan alguna imagenes de estos formularios, para conocer los 100 diseños de formularios de login y conocer los sitios que los utilizan solo sigan el enlace.

Enlace: 100 sites with Outstanding login forms

Un diseño puede ser muy bonito pero si los botones no son fáciles de identificar y tu fondo no hace contraste entonces no ayuda en nada, y por el lado del desarrollador un ejemplo claro de que se hace caso omiso de la usabilidad es el abuso de acciones en Ajax porque? simple estas acciones usualmente carecen de función para retroceder acciones.

Pero bueno en Six Revision me encuentro una lista de aplicaciones y extensiones para Firefox realmente utiles, son 10 herramientas para evaluar la accesibilidad de sitios web.

Aquí les dejo dos de las 10 si quieres conocer las otras 8 para lograr obtener un sitio web usable, sigan el enlace.

Firefox Accesibility Extension

Está es una barra de herramientas de Firefox que te permite inspeccionar todos los aspectos de una página web para determinar su accesibilidad. Una característica útil de esta barra de herramientas son las equivalencias de texto de menús que le permite generar listas de elementos tales como imágenes y enlaces para ver si cada uno es compatible con los estándares.
Colour Contrast Analyser

Está extensión para Firefox es muy útil ya que nos ayuda a verificar el contraste de los colores que tienen todos los objetos contenidos en nuestro documento HTML, en que ayuda esto, no todos vemos igual las personas daltónicas o con alguna deficiencia visual pueden tener problemas para visualizar un sitio si este no tiene un contraste adecuado.

Enlace: 10 Tools for Evaluating Web Design Accessibility

El cual le vio muy bien a todos los desarrolladores web con interes en desarrollar aplicaciones web para el iphone o el touch, es completamente gratuito y esta bajo licencia GPL 3.0.

Si lo quieren descargar diego a creado un sitio en Google Code donde lo pueden descargar o suscribirse al SVN.

Enlace: Descargar Universal iPhone UI Kit

En Noupe han hecho una lista de 20 errores comunes solucionados con CSS, esta lista es imperdible.

StumbleUpon me convence cada dia mas con que es una excelente fuente de información, ahora me tope con HTMLPlayground es un sitio hecho en Java que nos permite practicar y aprender mas sobre HTML de una manera muy dinamica.

Como funciona?

• Seleccionamos un tag (<table>, <img>, <address>, etc..) de la lista.
• En el siguiente recuadro nos muestra una descripción del tag seleccionado y nos genera el codigo HTML de como se usa el tag.
• En el cuadro donde esta el codigo deberemos hacer click sobre el tar del cual nos interese saber que atributos se le puede insertar.
• y por ultimo en ultimo recuadro nos muestra en el momento los cambios que sufre el HTML al agregarle atributos y como le afectan visualmente.

Me dejo maravillado, asi que si andas estudiando sobre diseño y desarrollo de paginas web o por simple hobbie te recomiendo el sitio esta perfecto y es gratis.

Enlace: HTMLPlayground

Las tablas no mueren aun, y pues para bien o para mal siempre las tenemos que utilizar incluso personalmente cuando simplemente me gana la flojera o me arto de la incompatibilidad por culpa de IE pues ni modos uso las tablas.

Pero la tendencia actual es usar las tablas para un solo motivo, crear listas de datos ordenados, para eso las tablas son un amor jaja, pero bueno esas listas siempre las debemos dejar presentables y usables despues de todo no solo las vamos a utilizar nosotros incluso igual y los desarrolladores solo las van a ver en el momento de implementarlas y probarlas.

Asi que si deseas un buen diseño para tus tablas aqui les dejo un enlace a ua excelente galeria bastante dinamica de diseños de tablas, haciendo click en el nombre del diseño (columna: design name) la pagina se recargara con el diseño selecciona junto con su opcion de descargar el archivo CSS que hace posible tal formato.

Enlace: Data Tables and Cascading Style Sheets Gallery

Ahora pues ahi no veo mi diseño asi que aqui les dejo una imagen del diseño que tengo en mis tablas en un pequeño gran proyecto personal que ando realizando, junto con su respectivo archivo de descarga con el archivo CSS y una imagen que utilizo en el encabezado de la tabla y un HTML que muestra un ejemplo.

El codigo e imagenes de este ejemplo y archivo de descarga son gratuitos, los puedes utilizar en el tipo de proyecto que desees.

Descargar | Ver Ejemplo

En StylizedWeb han hecho un listado de los que condideran como los 10 mejores hacks para CSS.

Los hacks son pedasitos de codigo que aprovechan bugs(errores) de los navegadores para arreglar otros bugs, usualmente se usan para que los sitios web mantengan una milticompatibilidad entre navegadores, asi como tambien el que normalmente nos obliga a los desarrolladores a usar hacks es el Internet Explorer 6

Los trucos listados son:

• Comó alinear un div verticalmente
• Comó establecer una altura minima
• Comó hacer que todos los navegadores muestren las imagenes PNG con transparencia (en frogx3, Imagenes PNG con transparencia)
• Autorclear (no se como decir esta pero seria algo asi como limpiar un area despues de usuar objetos con float)
• Comó reiniciar Propiedad de CSS
• Scrolling Render IE
• Opacidad o transparencia de Objetos (en frogx3, columnas transparentes con CSS)
• Pre Tag
• Li Background Repeat IE
• Otros tips.

Enlace: 10 Best CSS Hacks

Ver mas trucos para CSS y tips

Para eso estan los Cheat Sheets que son mas un menos un manual bastante reducido que sirve de referencia para la programación en muchos lenguajes, en esta ocación aqui les dejo uno de CSS que no esta en ningun PDF es una pagina HTML y dando ejemplo con un excelente uso del CSS para presentar este Cheat Sheet.

Enlace: CSS Cheat Sheet

Via: WebAdictos

Por mas que intentemos que nuestro codigo XHTML pase las pruebas de validacion de la W3C siempre se nos escapa algo y en los blogs el común denominador son los videos de youtube u otro sistema mas concretamente los objetos flash que insertemos ya que el codigo para el embed suele tener ciertos parametros que no permiten que nuestro codigo sea valido.

Pero para todo hay solución, se llama SWFObject es una libreria javascript que nos permite de manera sencilla insertar un objeto flash haciendo su codigo completamente valido.

Ejemplo Usando SWFObject:

[code lang="html"]

[/code]

Si ves mucho rollo ahi pues mira que solo basta con insertar una lista como esta:

[code lang="html"]

var so = new SWFObject('swf/header.swf', 'flash-header', '500', '200', '7', '#fff');

//var so = new SWFObject('archivo swf', ‘ID del objecto', ‘ancho', ‘alto', ‘version de flash requerida', ‘color de fondo en formato HEX');

[/code]

Es sencillo utilizar esto, apoco no?

Enlaces:

• Descargar SWFObject
• Pagina Oficial de SWFObject