El tiempo que necesitas para hacer un diseño (layout) con CSS es de 47 minutos. Usando tablas te tardas 3 minutos, y puedes cobrar una hora xD
Category: Design
Herramientas para Diseño Web y algunos otros trucos
Selectores y Pseudo Clases CSS que soportan los navegadores
Al ver la cantidad de selectores y pseudo clases CSS con las que IE6 no funciona, explica porque da tanto problema cuando uno trabaja primero con un navegador moderno 
CSS Naked Day 2008
Hoy en la madrugada estaba casi seguro de que era el día del CSS Naked Day, pero resulta que este año será el 9 de abril, y no el 5 como el año pasado. Me quede con las ganas de dejar mi blog a lo pr0n xDD
Para quienes no sepan que es el CSS Naked Day, se trata de una iniciativa que busca promover el uso de estándares web demostrando lo fácil que ese quitar el diseño de nuestros sitios, si hacemos uso de los mismos, y dejar el contenido desnudo, tal cual está estructurado.
Quienes piensen participar en este evento, pueden agregar su sitio al listado oficial, y opcionalmente agregar una leyenda que explique a los visitantes que es lo que está pasando:
<h3>¿Que ha pasado con el diseño?</h3> <p>Para conocer más acerca de por que están deshabilitados los estilos de esta página, visita <a href="http://naked.dustindiaz.com" title="Web Standards Naked Day Host Website"> Annual CSS Naked Day</a>.</p>
Para participar basta con eliminar la referencia a cualquier hoja de estilos del sitio, si usan WordPress en un servidor propio pueden usar este plugin del CSS Naked Day que hará todo el trabajo sin editar código, o hacer lo a mano editando la plantilla.
Para los usuarios de WordPress.com si no tienen Custom CSS pueden usar la platilla SandBox que casí dejara el sitio con estilos; para los que tengan la mejora de pago Custom CSS hay que eligir que no use la hoja de estilos de la plantilla como base y dejar el cuadro de texto en limpio.
Pablo Rigazzi sobre el diseño con tablas y Frontpage
Curioso momento al terminar la plática de Pablo Rigazzi, comentando lo que piensa sobre el diseño con tablas y Frontpage:
De acuerdo con él, aunque le falto mencionar Netscape 😉 . Ahora que lo pienso, para los que ya llevamos tiempo en esto muy en el fondo siempre terminamos diciendo:
Bring back the Tables!
PD: cvander fue quien hizo la pregunta en el video, quién también lo grabo. Así que ya saben cuales son las herramientas de trabajo 😛
Nombra ese color
Nombra ese color (Name that color) es una herramienta que te permite saber el nombre del color (o su mejor aproximado) a partir de su valor RBG hexadecimal.
Según esta herramienta el azul de los enlaces (#2277DD) es un Marino mientras que el del encabezado (#2E3436) es un Negro Espacio Exterior (Outer Space).
Reconoce más de 1,500 colores y el código fuente en JavaScript está disponible bajo licencia CC-por Atribución.
Cambios en el Administrativo de WordPress 2.4
La siguiente versión de WordPress, la 2.4, aparte de los múltiples parches y mejoras de siempre también vendrá con un cambio en el diseño de la interfaz administrativa:
De momento solo ha sido unos cambios en el CSS, está disponible en el SVN de WordPress por si quieren probarla. La verdad que me agrada bastante, es notorio que el azul característico de WordPress desaparece en este nuevo diseño (llamado internamente «Happy Cog»). Solo me parece curioso que la forma de la franga superior me recuerda un poco a Movable Type 4 jeje.
También en un futuro se podrá personalizar el Dashboard (según algunos links sin funcionar que han puesto). Aún faltan bastantes cosas por actualizar, pero luce bastante bien.
Versión imprimible del blog via CSS
Aunque no sea una práctica muy común, hay personas que aún imprimen páginas de sitios en Internet; Así que, ¿por qué no facilitarles una versión imprimible de nuestro blog? Con ayuda de la regla @media podemos agregar un CSS específico para dispositivos de impresión.
Para mi blog, que usa la plantilla Sandbox, he definido estas reglas CSS en la versión imprimible:
@media print {
div#wrapper {width:100%;}
div#wrapper * {width:auto;}
div#header {
height:auto !important;
margin:0 !important;
padding:0 !important;
}
#blog-title {
text-align:center;
margin:0 !important;
padding:0 !important;
}
#wpcombar,#blog-description, div#footer, #wpstats,
div.sidebar, #globalnav,.navigation {
display:none !important;
margin:0;
padding:0;
}
div.container {
margin:0;
padding:0;
}
h2.entry-title { padding:0 !important; }
.comments { display:none; }
a,a:visited {
color:black !important;
text-decoration:none;
border-bottom:1px dotted #333;
}
}
Fácilmente puede ser adaptado a otras plantillas sin necesidad de un plugin adicional. Básicamente hay que dejar el contenido real y ocultar aquellos elementos que no sean de importancia en la versión imprimible como:
- La descripción del blog.
- La navegación.
- La barra lateral.
- Los comentarios del post.
- El formulario de envío de comentario.
- El footer.
Puedes considerar eliminar paddings, colores y otros adornos en el texto innecesarios. Si imprimen alguno de los post de este blog, deber verse como similar a esto:
Minimizando el Login de las cuentas de Google
Siempre he pensado que si algo no te gusta como es, debes intentar ponerlo a tu gusto; es por ello que inspirado en el trabajo del estilo para Stylish Gmail logon – minimized , he creado un estilo que minimiza el Login de los demás servicios que Google, la razón: contienen demasiada información que se muestra una y otra vez, alejándose de su objetivo principal: Iniciar Sesión en el servicio.
Con este estilo que he creado, el inicio de sesión de Google Analytics se convierte de esto:
A esto:
La diferencia es evidente, todo tan limpio y directo a lo que interesa. Esta modificación funciona con:
- GMail
- Google Reader
- Google Analytics
- Google Webmaster Tools
- Google Docs
- Google Notebook
Si te agrada esta modificación , puedes bajar este estilo desde usersyles.org, el único requisito es tener instalada Stylish, la extensión para Firefox.
Estilizando los Controles HTML con Stylish (y Firefox)
Firefox incluye una forma para darle un borde redondeado los elementos de nuestra páginas, usando la propiedad CSS -moz-border-radius. Si combinamos esta propiedad con Stylish, la extensión para Firefox que nos permite modificar el CSS de cualquier documento, podemos darle estilos a todos los controles de las páginas que veamos.
Esta idea la vi por primera vez en Input Style, pero no fue totalmente de mi gusto que agregara bordes celestes, agregara negrillas a los textos, entre otros defectos. Por ello he creado una variante de dicho estilo que:
- Elimina la imagen de fondo, si la tuviera.
- No usa negrillas
- Funciona para los
textareayselect. - El color del borde es gris.
El resultado de aplicar este estilo debe ser similar a este:
Para obtener este estilo, deben bajarlo de userstyle.org y agregarlo a su Stylish, si aún no tienes dicha extensión puedes obtenerla en el sitio de Mozilla.
El único defecto que le he encontrado a este truco es con aquellos sitios que han personalizado mucho más sus controles… la mezcla de ambos estilos resulta un poco fuera de lugar jeje.
Sandbox en WordPress 2.3
Tentativamente la plantilla Sandbox será incluida por defecto en la próxima versión de WordPress. Si no conoces la plantilla Sandbox, se trata de una plantilla en la cual solo deberías editar la hoja de estilos para personalizarla a tu gusto, ya que incluye gran cantidad de clases; y es la que yo uso en mi blog.
El que se incluya Sandbox dentro de WordPress será de beneficio para los que participen el en Competición de Diseño con Sandbox para WordPress, ya que aumentará la base de usuarios que tenga Sandbox instalado en su blog y para instalar un nuevo estilo, solo deben cambiar la hoja de estilos y subir algunas imágenes, sin preocuparse de que lo demás deje de funcionar.
Aún no se ponen de acuerdo si cambiar la plantilla Clásica por Sandbox o incluir las dos junto a Kubrick; pero esperemos que Sandbox sea incluida cuando antes
Javier Aroche 