Archivo de la categoría Diseño Web

WYSIWTF

WYSIWTF

Apenas puedo creerlo…

He tardado mucho en escribir acerca de esto porque he tardado mucho en creerme lo que hace dias circula por la red, y que nos tiene a todos los desarrolladores web patidifusos, creyendo que le infierno, por fin, se ha congelado:

En su actual nivel de desarrollo a nivel de estándares, Internet Explorer 8 pasa ya sin problemas el Acid Test 2

Algo que suena tan inocuo al usuario habitual de internet, adquiere un significado increible si dedicas el 80% de tu tiempo de trabajo a intentar que lo que hiciste en el otro 20% se vea igual en los navegadores mayoritarios.

Como se puede ver en el artículo correspondiente de la Wikipedia, Acid2 es el nombre de un caso de prueba creado por el Web Standards Project para exponer las fallas que los navegadores web actuales tienen para cumplir con los estándares.

Acid2

Si el navegador soporta correctamente los estándares HTML y CSS 2.0, entonces se debe poder ver una cara sonriente. A pesar de lo simple del dibujo, cada línea está codificada de forma tal que dependa de la exacta implementación de varias exigencias que imponen los estándares. Cuando se publicó esta prueba ningún navegador podía mostrar correctamente el dibujo, pero actualmente ya son seis los que lo hacen:

  • Safari Version 2.02, disponible con Mac OS X 10.4.3. Fue el primer navegador que superó dicho test, octubre 2005.
  • Prince Versión 5.1, diciembre 2005.
  • Shiira Navegador para el sistema operativo Mac OS, marzo 2006.
  • Konqueror Disponible con KDE 3.5, marzo 2006.
  • Opera Versión 9.0, junio 2006
  • iCab Navegador para Macintosh, agosto 2006
  • Mozilla Firefox Versión 3.0, diciembre 2007

Y a estos podremos sumar a medio plazo el Internet Explorer 8, lo que supondrá que podremos diseñar nuestros futuros proyectos sin preocuparnos de cómo los interpretarán unos navegadores y otros, y copando el 99,9% del mercado (IE+Firefox+Opera). Sinceramente, no veo la hora y, aunque me joda, un 10 para el equipo de desarrollo del nuevo IE.

Sandy 3D Engine - Librería de Animación 3D en Flash

Sandy 3D EngineSandy 3D Engine es una potente librería de animación 3D en Flash. Lejos del típico cubo rotatorio o las letras en 3D, nos provee de un fantástico set de utilidades para dotar a cualquier aplicación o juego en Flash de interesantes efectos.

Por citar unos ejemplos de uso de Sandy 3D (cuidadito, intensivo gasto de CPU):

Buenos usos de Flash

Si tu web no necesita promoción porque ya es conocida, o bien porque la reseñas machaconamente en la papelería de tu empresa, puede que el uso de Flash en la misma no sea un estorbo como habitualmente suele ser. Bien utilizado, Flash permite la creación de Interfaces, Demos y “Showcases” verdaderamente espectaculares. Si a ello añadimos buen gusto, podemos encontrarnos cosas como:

  • Ikea Dreamkitchen ofrece una experiencia visual estupenda: los visitantes pueden navegar a baja velocidad y en 3D por los diferentes productos y modelos de cocina de IKEA, mostrando instantáneas “congeladas” en un momento determinado con diferentes melodías acompañando cada uno de los escenarios. Otros ejemplos similares son Dromkok y Demo, donde además puedes girar las habitaciones en 3D.
    IKEA Flash
  • Komodo Media, una curiosa forma de mostrar un portafolio. Puedes navegar por su página y ver las categorías en 3D desde diferentes perspectivas y ángulos. El cursor del ratón, además, parece flotar en el aire, creando una interface cuanto menos, curiosa, aunque resta algo de usabilidad a todo el conjunto, ya de por si un “browser killer”.
    KOMODO Flash
  • Rhythm of Lines es un experimento Flash interactivo de Audi, donde puedes crear “Líneas de Ritmo” : minipelículas flash de 100 segundos de duración en las que puedes cambiar el movimiento, color, grosor y animación de líneas y formas para crear animaciones visualmente muy atractivas. Los cambios se generan con el movimiento del ratón y unas cuantas teclas clave. Las mejores animaciones creadas por los usuarios pueden localizarse y reproducirse en la sección “Exhibit”, y el gráfico generado, ser guardado como fondo de pantalla.
    AUDI - Flash

Traducción/Ampliación de Smashing Magazine

CSS Color Generator (from pics)

English version

I’m very bad at color choosing… terrible bad. I have no taste at all for design, i haven’t a single bit of these “magic” needed to see a client’s logo and create the needed CSS for a layout where the logo could fit like a glove. But i know about programming… at least a bit… and the world is full of color theory, so i have glued together a bit of “mathemagic”, a bit of php code… and created CSS Color Generator, a simple experiment where, from a given pic, you can generate a CSS color palette in Average, Bright, Dark and Complemetary modes.

It was not intended to be visible (i didn’t even wroten a frontend) but Mikko Koppanen (imagick php extension developer) from #php in freenode asked me about it and i prepared a little demo for the programmers in my same situation (no taste for aesthetics), so i open it in “beta” stage, if someone can use it, i hope he enjoy it. :)

Link: CSS Color Generator

Update: Mikko Koppanen have published similar code as a tutorial in his blog

Spanish version

Soy malo eligiendo colores… muy malo. Carezco absolutamente de buen gusto por el diseño, carezco de esa “magia” necesaria para ver el logotipo de un cliente o amigo y crear de la nada el CSS necesario para un entorno donde el logotipo encaje como un guante. Pero sé programar… al menos un poco.. y de teoría del color está el mundo lleno, asi que ni corto ni perezoso he juntado un poco de fórmulas matemágicas por aqui, un poco de código propio por allá… y he creado CSS Color Generator, un simple experimento que, de una imagen dada, nos genera una paleta de colores CSS en gamas original, brillante, opaca y complementaria.

No pensaba ni siquiera enseñarlo (ni me he molestado siquiera en hacerle un frontend) pero Mikko Koppanen (desarrollador de la extension imagick para php) del canal #php en freenode me ha convencido de que puede ser interesante para muchos programadores en mi misma situación (nulo gusto por la estética), asi que lo abro en “beta”, si a alguien le es útil, que lo disfruten con salud :)

Enlace: CSS Color Generator

Actualización: Mikko Koppanen ha publicado el código en forma de tutorial en su blog

Leer más »

Web 2.0 … The Machine is Us/ing Us

Una de las más inspiradas formas que he visto hasta la fecha de definir la Web 2.0

Por mucho que hayas leido acerca del tema, merece la pena ver esta versión de las cosas para que te suba la moral un rato. Al menos, a mi me la ha puesto dura.

The Lonely Planet

Una demostración del poder de los navegadores modernos y los estándares web… The Lonely Planet

No dejeis de pulsar en el pequeño planeta que gira, y para estas cosas mejor si lo veis con Opera o Firefox, of course, con IE ni os molesteis…

Sombra aqui, sombra allá…

Tip: Para hacer que los controles de tus formularios tengan la misma apariencia que el theme escogido por el usuario, utiliza el siguiente tag:

<meta HTTP-EQUIV=”MSThemeCompatible” Content=”Yes”> </meta>

La usabilidad gana puntos si el entorno de tu aplicación y la aplicación en si misma tienen una pinta similar.

DomCorners y otros efectos CSS [via web-graphics]

Bonito diseño en los comentarios… casi lo único rescatable del dia de hoy, junto con este otro curioso diseño

Ejemplos y Layouts CSS

Ejemplos de diseño y generadores automáticos de CSS

Leer más »

Yo centro, tu centras, el centra

Centrar con CSS… cómo definirlo ? Es … tan… mmmm… como lo diria ? … ¿COÑAZO?

Leer más »