Antitodo Kreativos

Por fin, después de mucho tiempo, he actualizado casi del todo el Portfolio de diseño web.

Para verlo, pulsad sobre la imagen o entrad desde aquí.

Contribuyamos a erradicar Internet Explorer 6 y su interpretación cutre-salchichera de los estándares web.

Vía: Anieto2k

Aunque puede parecer una perogrullada, a la hora de diseñar una maqueta web deberíamos atenernos a ciertas normas, sobre todo cuando se trata de una web con buena cantidad de información.

Desde el principio, las páginas se han articulado imitando a la maquetación editorial, en columnas, esto ha sido así desde los célebres tiempos cuando se maquetaba con tablas de ‘border=0′. Quizá estas tablas obligaban un poco más a guardar las formas y tener un poco más clara la presencia de una rejilla detrás de la página, el hecho es que con el CSS hay un poco más de libertad y muchas veces se emprenden diseños que, aunque tengan buen aspecto, ganarían mucho más si se diseñasen conforme a una rejilla. (more…)

Para quienes, como yo, todavía sigamos usando el clásico Fireworks, aquí va una descarga recomendada: 48 estilos de capa (layer styles) con los típicos colores y degradados del Web 2.0. Sirven para Fireworks 8 y CS3, pero si os gusta más Photoshop, también tiene su recurso equivalente.

Y ahora yo me pregunto… ¿Ha cambiado algo en Fireworks desde la versión 3? Yo sigo viéndolo igual de simple y manejable al mismo tiempo.

Vía: Deziner Folio.

Seguramente ya conoceréis el script Lightbox o algunos de sus clones que hay pululando por ahí… Los podemos encontrar en different flavours, adaptados a cualquiera de los frameworks de Ajax más utilizados: mootools, scriptaculous, jquery, etc.

El otro día andaba buscando un script parecido para la página de un cliente, buscaba uno de estos scripts que me permitiera abrir un ventana de diálogo tipo “login”, utilizando el framework de Mootools, puesto que esa página ya tenía algunos efectos de moo.fx.

Lo primero que descubrí fue que este tipo de ventanas se llaman “ventanas modales” (modal window), después de probar algunos de estos, me quedo con los dos que cito a continuación (nótese que los nombres solamente tienen una letra de diferencia):

MOOdalbox

Este script, como podréis suponer, está basado en Mootools, y sirve para abrir una ventana centrada en la página, pudiendo especificar el ancho y alto que queramos para la ventana. Como únicas pegas, sólo sirve para abrir otro archivo HTML dentro de la ventana. No podemos abrir una capa o DIV del mismo documento, lo que queramos desplegar ahí tiene que estar en otro archivo aparte, y dentro del mismo dominio (por ejemplo, “login.php”). Otra pega es que en local te da un error al hacer las pruebas, al subirlo al servidor ya funciona todo, así que hay que hacerlo un poco a ciegas (según pone en la documentación, estas son las limitaciones típicas del AJAX).

Enlace a la demo: MOOdalbox Playground.

Modalbox

El otro script es un poco más flexible pero se despliega de forma diferente, desde la parte de arriba de la ventana (igual que los cuadros de diálogo de Safari en el MacOS X), y sombreando el resto de la página. Como ventaja, puede abrir archivos externos, funciona en local, y también sirve para mostrar cualquier DIV ID=”xxxx” que esté oculto en el mismo documento. A diferencia del anterior, éste está basado en Scriptaculous-Prototype, y ya sabéis que no es aconsejable usar dos frameworks diferentes en la misma página, así que debemos elegir entre uno y otro (no uséis Mootools y Scriptaculous en la misma página!!)

Enlace a la demo: Modalbox (buscad el botón ‘Start demo’ hacia mitad de la página).

Los dos se utilizan de forma similar a los Lightbox:

1. Te bajas los archivos correspondientes (JS, CSS e imágenes).
2. Los pones en el raíz de tu sitio teniendo en cuenta las rutas y demás.
3. Enlazas a los JS y CSS en el HEADER de tu web
4. Pones los enlaces con la sintaxis correspondiente, en cada demo se explica cómo hacerlo

Bueno, de esto habría que hacer un monográfico en español:

• Parte 1
• Parte 2

Lo haremos en cuanto podamos

Iconspedia es otro sitio más con gran cantidad de iconos GRATUITOS y organizados por categorías.

A sumar a la lista de los clásicos:

• Iconlet
• Iconfinder
• FamFamFam
• MaxPower
• Stylegala Bulletmadness (bullets)

Siguiendo con el pack de recursos gratuitos, ahora toca el turno de recomendar unas plantillas web gratuitas que ha publicado CSS Creme.

En el momento de escribir esta entrada, podemos descargar 13 plantillas diferentes, totalmente gratis. No se menciona por ningún sitio el tipo de licencia que tienen los templates, o yo no los he visto, pero bueno no seáis malos y utilizadlos sin ánimo de lucro, ¿eh?

Aquí el índice de plantillas. A disfrutar.

Smashing Magazine ha publicado otro de sus excelentes macro-posts, esta vez reuniendo 100 themes gratuitos para Wordpress, todos ellos de gran calidad y clasificados en varias categorías.

Estos 100 se unen a larga lista de themes recomendados por SM, pero además de estos tenemos otros 83 (beautiful), 21 (fresh, usable and elegant) por otra parte, y otros 10 (fresh and clean) anteriores.

Mis favoritos son estos cuatro:

• Illacrimo
• Resurrection
• Prebuilt
• Sandbox

Con la llegada de Internet Explorer 7, el mundo del diseño web se volvió un poco más confuso y desconcertante. Al diseñar con CSS, no solamente teníamos que poner “trucos” para que los estilos se viesen bien en IE6, incluso la primera versión de IE7 tenía alguno de los mismos errores de interpretación que su predecesor. Como no había manera de filtrar la versión de IE7 que se estaba utilizando, si era la versión buena o la versión chunga, pues hubo que cruzar los dedos y no excederse con el uso de ciertas técnicas de layout como por ejemplo los posicionamientos absolute.

El resultado fue que muchas páginas se descuadraban, los paddings y los margins se interpretaban de manera impredecible, siendo un verdadero dolor de cabeza para el diseñador. En mi caso particular, doy fe de que a veces tardaba más en “arreglar” la hoja de estilo para IE6 que en el resto del diseño.

Surgieron muchos hacks para arreglar algunos de estos problemas: la transparencia de los PNG, el Box-model o los errores en los paddings, los problemas con los floats, etc. La mayoría consistían en hojas de estilo o javascript a medida, que se cargaban a través de un condicional en el header de nuestro HTML.

Uno de estos hacks, en fase beta, es el denominado IE7-js. Textualmente, IE7 es una librería javascript que hace que Internet Explorer cumpla los estándares web, arreglando muchos problemas HTML y CSS y añadiendo la transparencia a los PNG bajo IE5 y IE6.

El script lo podemos conseguir en Google Code, y para utilizarlo podemos bajarlo a local o enlazarlo directamente en nuestra cabecera.

Por ejemplo, para emular el funcionamiento de IE7 desde IE5 o IE6:

<!–[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/xx.x/IE7.js"
type="text/javascript"></script>
<![endif]–>

Si queremos emular el futuro IE8 (que por cierto comentan que ha pasado el Acid2Test):

<!–[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/xx.x/IE8.js"
type="text/javascript"></script>
<![endif]–>

…donde xx.x es el número de la versión del script.

También podéis descargarlo aquí: http://ie7-js.googlecode.com/svn/version/2.0(beta)/

Aquí podéis ver una demo.

Vía: Delicious