Guiabreve

Normalmente no suelo usar frameworks para desarrollar sitios, pero para evitar complicaciones y problemas de compatibilidad esta vez decidí usar el “960 Grid System“.

Para empezar, antes que nada un framework es una estructura de soporte definida en la cual otro proyecto de software puede ser organizado y desarrollado (Wikipedia ™).

Este sistema se basa en un ancho de página de 960 px, el ancho ideal según muchos diseñadores. Lo bueno es que este ancho es perfectamente divisible entre 12 o 16 columnas con lo que podremos ir combinando diferentes anchos y estructuras a lo largo de la página sin problemas.

El framework nos facilita la taréa de crear la página dandonos todo el código CSS necesario para que vallamos creando las distintas columnas en nuestra web de forma que todas queden perfectamente ordenadas en su lugar y con un margen de 10 px por los lados. Lo que hace que cada columna tenga una separación de 20 px. Continuar leyendo »

Wordpress 2.7 está a la vuelta de la esquina. Su lanzamiento está previsto para finales de Octubre, primero de Noviembre.

En este sitio podemos registrarnos y probar desde el panel de administración como será la nueva versión y ver/probar las novedades más profundamente.

Algunas novedades:

• Nueva interfaz: se trata de un pequeño cambio, ahora se ha colocado el menu en la parte lateral izquierda y además es desplegable con lo que nos ahorraremos unos cuantos clics.
• Cambio de orden de los widgets del editor, y además, podremos elegir que widgets queremos que aparezcan y cuales no.
• Nuevo Widget en el Dashboard: Quickpress nos permitirá publicar de forma más rápida.
• Unificación de los botones para insertar elementos multimedia.
• Nuevas configuraciones para inserción de imágenes por defecto (tamaño, alineación)
• Autoinstalación y actualización de plugins.
• Cita a comentarios sin salir del panel de administración.
• Más cambios…

Aún quedan más cambios por llevarse acabo, esto no es todo.

Wordpress desde la versión 2.5 permite seleccionar la alineación de una imagen desde el cargador de imágenes. El problema es que en vez de utilizar la propiedad align lo han hecho por medio de una clase de css. Por ello la solución es introducir el siguiente código en la hoja de estilo de nuestro theme:

Otra posibilidad que da Wordpress 2.6 es la de añadir Captions, si queremos que estas se vean correctamente alineadas debajo de la imagen tenemos que añadir además:

No hace falta decir que el código es personalizable y lo podemos editar para que encaje a la perfección con el diseño de nuestra web.

Las ventajas de un diseño elástico son muchas una de ellas, la más importante, es que gracias a este tipo de diseños se consigue aprovechar en mayor medida el espacio disponible en pantalla independientemente de la resolución que tenga el usuario.

El mayor problema es que muchas veces no sabemos como hacerlo, o mejor, no sabemos como hacerlo de manera correcta. Por esto Matthew James Taylor a desarrollado varios layouts (esquemas) totalmente líquidos. Estos no usan ni JavaScript ni Hacks CSS y son compatibles con la mayoría de los navegadores además de con los iPhones/iPod Touch.

En la página que ha preparado Matthew para mostrar sus diseños podemos ver en acción hasta 7 esquemas distintos con sus correspondientes explicaciones para que podamos aplicarla a nuestros sitios.

El titulo no se si es lo suficientemente descriptivo como para entender el contenido de esta entrada, pero, básicamente, lo que vamos a hacer es que mientras que los vídeos de nuestra web cargan se muestre una imagen indicando que el vídeo esta cargando.

Todo ello usando solamente CSS. La técnica es sencilla, consiste en darle estilo al div del vídeo para que muestre una imagen de fondo, una vez que el vídeo cargue, la imagen quedará en el fondo y conseguiremos ese efecto de imagen de carga que buscamos. El código CSS quedaría de la siguiente forma:

Por supuesto el código anterior es personalizable, yo además a añadido un borde y lo he alineado al centro, pero cada uno lo puede personalizar a su gusto.

El código Html sería algo así:

Podeís ver un ejemplo de como queda el código o descargar la imagen que he usado en el ejemplo.

Lo ideal sería que todos los navegadores tengan los mismos estilos por defecto para que no halla diferencia entre ellos a la hora de mostrar las páginas, pero, por desgracia, esto no es así, pero, gracias al CSS podemos minimizar estas diferencias entre los navegadores para que nuestra página se vea correctamente en todos los navegadores.

Este artículo en ingles nos ofrece una larga lista de hojas de estilo que nos permitirán hacer esto que decimos. Todas ellas se encuentran descritas y cada cual debe de elegir aquella que más le guste. A continuación os dejo una de ellas de las que más me han gustado:

PSD2CSS Online es un web que nos permite pasar nuestros diseños hechos en Photoshop a CSS y Html de forma automática y Online. Simplemente tendremos que subir nuestro archivo en formato PSD y automáticamente nos mostrará el resultado, un archivo Html con el CSS incrustado en él.

Además nos permite indicar varios tipos de capas en Photoshop incluyendo un guión y una pequeña palabra al final de su nombre para que la web las trate de una forma o de otra:

• Con _text podremos definir aquellas capas que son tipo texto.
• _form, _inputtext, y _submit nos permitirán autogenerar formularios.
• _jpg conseguiremos que esa capa se guarde como una imagen en formato jpg.
• Con _link indicaremos que se trata de un enlace. Y con _linkover conseguiremos hacer enlaces con Roll Overs. (Enlaces que cambian al situarnos encima)
• Con _center centraremos la capa marcada.
• _bkgnd nos permite que la capa sea un fondo de un div.

Yo lo he probado con un diseño que tenía guardado desde hace algún tiempo y el resultado no ha sido perfecto, he de admitir que el PSD probablemente no estaba bien construido, ni si quiera use ninguna de las propiedades que se indican arriba, fue solo una prueba rápida, pero aún así repito que aunque no fue perfecto el resultado fue bastante bueno y con solo unos retoques podría dejarlo tal y como quiero.

Romas Cortes, el creador del logo de SigT, ha creado ahora un Homer completamente en CSS. Todo ello usando solo letras y símbolos en CSS añadiéndoles color y colocándolas en su lugar por medio del posicionamiento absoluto.

Además se ve correctamente en Internet Explorer 5.5, 6 y 7, Opera 9, Firefox 2 y Safari 3. Eso sí, siempre que tengamos la fuente Verdana instalada.

Estructurar el CSS correctamente siempre ha sido un pequeño reto para los desarrolladores, muchas veces se han preguntado como estructurarlo de manera correcta, de forma que con un simple vistazo podamos encontrar lo que queramos.

Un herramienta realmente útil para realizar esto es CSS Frame, en él, incluimos nuestro código HTML y automáticamente nos generará el CSS estructurado en forma de árbol, es decir de menos a más.

A través de esta herramienta podemos comprobar la compatibilidad de nuestro navegador con las nuevas etiquetas y selectores de CSS3. He ido comprobando con todos los navegadores que he podido la compatibilidad de estos, el resultado es el siguiente:

• Safari 3.1: 43/43
• Firefox 3 (Beta 4): 36/43 (7 no soportadas)
• Firefox 3 (Beta 5): 36/43 (7 no soportadas)
• Internet Explorer 7: 13/43 (4 erroneas y 26 no soportadas)

Como siempre, el resultado de Internet Explorer es ridículo. No he podido probarlo con Internet Explorer 8 Beta 1, desafortunadamente no lo  tengo instalado. Y lo mismo me pasa con Opera.