El primero de ellos, HTML: The Markup Language, extrae y se centra en los aspectos de marcado y modelo de contenidos del HTML5 y se convierte en la referencia a la hora de conocer cada una de las etiquetas y atributos de este lenguaje de marcado.

El segundo, The Web Developer’s Guide to HTML 5 (Guía de HTML5 para desarrolladores web), es un trabajo muy didáctico cuyo objetivo es enseñarnos a escribir HTML5 de una forma simple y con aplicaciones prácticas.

Comparte este post

Hasta ahora el Firebug no tenía competencia en la práctica y desde luego esta no provenía del que incorpora el IE8. Pero con el rediseño del inspector web de Webkit creo que esto puede empezar a terminarse. Una primera y rápida inspección revela un interfaz cómodo de utilizar, muy rápido y con funcionalidades extra como el acceso a bases de datos

Entonces… ¿Ya puedo pasar de Firebug?: bueno, no diría tanto. Creo que hay una cosa que no se puede hacer en Webkit: añadir propiedades CSS directamente en el inspector correspondiente.  Además todavía tiene algunos fallos (¡Permite inspeccionarse a sí mismo… y empieza anidar ventanas!) que hacen que todavía no sea una alternativa 100%. Pero le falta muy poco.

Comparte este post

PrettyCheckboxes es un script que nos permitirá re-diseñar nuestros checkbox y radiobuttons de forma consistente en distintas plataformas.

Al basarse en Jquery, su uso es tan sencillo como permite este framework:

Más información:

• PrettyCheckboxes
• Descargar el script
• Jquery

Comparte este post

No escribo este post para defender a Dreamweaver como la mejor herramienta para maquetar. Ni siquiera sé si lo és, ni me importa demasiado. Lo que es evidente es que desde que comencé en esto de la maquetación trabajo con él (tras un efímero comienzo con Adobe Golive) y que he ido probando otras herramientas a lo largo de estos años pero al final siempre vuelvo a los brazos de Dreamweaver.

Y aclaro también que mi defensa es como herramienta para maquetación, no para programación. Posiblemente un programador PHP se encuentre mucho más cómodo en un sistema que le permite explorar sus clases, debuguear su código dentro de lo posible y que le ayude un poco más a la hora de programar... desde luego para ese tipo de trabajo Aptana parece una alternativa más seria.

Personalmente uso Dreamweaver para el desarrollo de las maquetas desde 0. En ese momento en que me pasan el diseño y tengo que convertirlo a código abro dreamweaver y me pongo a trabajar. Una vez que he maquetado mis plantillas dejo de usarlo.

A partir de ese momento, para debuguear, corregir o hacer cambios que me propongan los designers... uso otras herramientas: concretamente la combinación Transmit + Bbedit + Firefox / firebug es mi opción básica en Mac y trabajando en Windows Filezilla con Notepad++; por supuesto siempre está la opción básica y salvavidas de trabajar directamente en el servidor con Vi.

¿Por qué me encuentro cómodo maquetando con Dreamweaver?

Su maravillosa integración con el gestor de FTP: el gestor en sí no es de lo mejor y es frecuente que se atasque... pero a mi me gustra trabajar en local, guardar y subir al servidor. Una vez configurado el sitio remoto la combinación de teclas Cmd + Mayus + U (o Ctrl en windows) me resulta bestialmente cómoda... y el hecho de que me avise de que "hay una versión más reciente en el servidor" del archivo que estoy editando me da una gran seguridad.

La vista mixta diseño / código me resulta esencial. Eso de poder seleccionar un elemento en la vista diseño y que me lo marque en código me ayuda muchísimo. La vista diseño integrada es algo que no he visto en ningún otro editor; normalmente el resto se limitan a incorporar un navegador para previsualizar, pero no se puede interactuar con él.

El editor de código, que no es el mejor, pero  es muy aceptable tanto para HTML como para CSS gracias. Con el sistema de sugerencias para atributos y propiedades y el cierre automático de etiquetas me basta. Aunque echo muchísimo de menos, y me revienta, su incapacidad para detectar  dónde se cierra una etiqueta, llave o paréntesis al seleccionarla. Eso casi me hace pasarme a Aptana.

Son 3 tonterías, lo sé, pero a mi me hacen mi trabajo mucho más facil. Dreamweaver tiene mil funcionalidades más que no uso para nada pero esos detalles unidos a un interfaz de usuario en general muy muy cómoda en casi todos sus aspectos hacen que me sienta bien trabajando con él.

Finalizando

Este post no es para recomendar Dreamweaver a los maquetadores, sobre todo porque hay alternativas gratuitas que son muy buenas; para mi la mejor posibilidad, con diferencia, es Aptana. Es simplemente la exposición de un hecho que estoy seguro que muchos maquetadores comparten.

Un disclaimer: vaya a pensarse alguién que tengo que ver algo con Adobe, ojalá, pero no; tampoco patrocinan este post ;)

PD: a lo mejor algún día hablo de porqué uso Fireworks y no Photoshop :)

PD2: verás como aparece por aquí la clásica y estéril discusión "Yo programo con notepad"... Dreamweaver es para débiles y lamers.

Comparte este post

Andy apuesta por dejar de enseñar al cliente la maqueta del del proyecto (XHTML+ CSS) frente los habituales bocetos estáticos (psd, jpg, etc..). Basa su argumentación en que en un diseño estático no podemos mostrar al cliente cosas como:

• Cómo se vé un layout líquido
• Qué pasa cuando cambiamos el tamaño de letra
• Las inconsistencias entre navegadores
• Elementos de interacción como :hover o :target
• Efectos javascript / AJAX

Personalmente creo que lleva razón en algunos de estos puntos. Sin embargo hay que tener en cuenta un gran problema en empresas o estudios pequeños: el coste de hacer esto es mucho mayor y hay que tener en cuenta que en esta fase pueden tirarnos el diseño a la basura. La ventaja de trabajar así, centrándonos en aspectos organizacionales, es que una vez aprobado el diseño tenemos avanzada una gran parte del trabajo.

¿Qué pensáis del tema? ¿Alguna vez habéis enseñado un boceto ya maquetado?

Comparte este post

Algunos aspectos muy novedosos respecto a los fondos (background)

Vamos a poder poner varias imágenes de fondo en nuestras cajas, puediendo especificar, para cada una de ella, propiedades distintas. Así...

Me gusta también la propiedad "Background-origin", que nos permitirá decidir desde qué punto de nuestra caja se sitúa el fondo, los posibles valores serán:

• padding-box: posición numérica o porcentual desde el padding de la caja
• border-box: posición numérica o porcentual desde el borde de la caja
• content-box: posición numérica o porcentual desde el contenido de la caja

Sombras en las cajas
La propiedad "box-shadow" aplicará una o varias sombras a nuestra caja. Se utilizan cuatro valores numérico:

El primero define el eje horizontal de la sombra, un valor positivo lo aplicaría al lado derecho de la caja, si es negativo lo aplica en el lado izquierdo.

El segundo define el eje vertical donde los valores positivos o negativos aplicarían la sombra arriba o abajo de la caja respectivamente.

El tercer valor hace referencia al difuminado de la caja (blur)

El cuarto valor es el que menos consigo entender, se denomina "spread radius", pero soy incapaz de traducirlo.

Se vería así:

Por último, si a en la propiedad box-shadow especificamos el valor "inset" (es posible que cambie a "inner") las sombras se aplicarán al interior de la caja.

Creo que este tipo de cosas nos darán bastante más juego al diseñar nuestras futuras web ¿No os parece?

Actualización: gracias a Omega y Matías sabemos que el Spread radius hace referenica al grado de dispersión o dureza de la sombra.

Comparte este post

Granada.org en un navegador estándar

mmm... diseño con ancho fijo 800 x 600 optimized

Granada.org desactivando Javascript

Ostia... si no se puede navegar ¿Dónde coj... están los menús?

Granada.org sin CSS

No veo nada...

Granada.org sin CSS y sin Javascript

Me temo que esta gente no sabe lo que es un encabezado... pero conocen a fondo el elemento TABLE

Y este sello??

Sin palabras

Comparte este post

El artículo aborda de forma sencilla y clara atributos como:

• Display
• Position
• z-index

Y parece ser el primero de una serie...

Comparte este post

Los datos, que no me han sorprendido demasiado, son los siguientes:

Resumiendo:

• Internet Explorer tiene un uso medio cercano al 80%
• La versión más utilizada de IE es la 6, en torno al 43%
• El uso de versiones por debajo de la 6 (5 y 5.5) es casi despreciable

Como siempre que hago posts sobre estadísticas propias, insisto: son datos orientativos, la muestra no es totalmente representativa, pero desde luego dan pistas interesantes.

Comparte este post

Bueno, a lo que vamos, acabo de ver una web donde puedes generarte menús de este tipo y en vez de hacer un post sobre el sitio he pensado que es más interesante recopilar los que a mi más me gustan:

Listamatic

El de siempre, el clásico, el único, el veterano, el del sonido estilo inconfundible. Una colección de menús tanto verticales como horizontales que recojen lo mejor de lo mejor. También incluyen ejemplos de menús anidados.

Más de 50 ejemplos disponibles, con su correspondiente código, a los que se suman tutoriales para aprender el arte de la creación de menús. Es el mejor recursos para aprender a hacer menús que es lo que realmente recomiendo a cualquiera que se quiera dedicar al desarrollo web y un punto de partida excelente. Imprescindible.

Enlace: http://css.maxdesign.com.au/listamatic/

List-O-Matic

Se trata de un generador de menus online basado en los que ofrece el listamatic. Puedes generar tu menú en 3 pasos:

• Define el número de enlaces
• Define el texto, título y url de cada uno
• Elige tu menú

Enlace: http://www.accessify.com/tools-and-wizards/developer-tools/list-o-matic/

CSS Menu Maker

Es el que he descubierto recientemente y aunque tiene poca variedad de menús parece que tienen la intención de ir ofertando más opciones. Muy fácil de usar, ofrece diseños bastante interesantes.

Enlace: http://cssmenumaker.com/index.php

Smashing Magazine

Hace unos meses publicaron un post titulado "CSS-Based Navigation Menus: Modern Solutions" donde ofrecían ejemplos de webs que utilizan menús CSS. Únicamente ofrecen el link a los sitios originales y además algunos de ellos utilizan Javascript pero hay que reconocer que hicieron una magnífica selección.

Enlace: Smashing Magazine

Comparte este post