Posts Tagged ‘Maquetación web’

Aprendiendo HTML5: dos grandes recursos

Wednesday, November 19th, 2008

la W3C aloja dos nuevos documentos sobre HTML5 que destacan, al contrario de lo que suele ser habitual, por su claridad y por estar orientados a que los desarrolladores entendamos la especificación y aprendamos a usarla.

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.

Rediseño del inspector web de Webkit: ¿Alternativa a Firebug?

Tuesday, October 7th, 2008

Desde la aparición de Firebug los inspectores web se han convertido una de las herramientas fundamentales de trabajo de cualquier desarrollador web. Prácticamente todos los desarrolladores de navegadores incorporan un inspector.

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.

Personaliza los Checkboxs de tus formularios

Monday, September 29th, 2008

Cuando se trata de maquetar formularios todos nos hemos encontrado con la dificultad de conseguir que sus elementos visuales se muestren igual en las distintas combinaciones navegador / sistema operativo.

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:

CODE:
  1. $(document).ready(function(){
  2. $('input[type=checkbox],input[type=radio]').prettyCheckboxes();<code>
  3. });

Más información:

Yo sigo maquetando con Dreamweaver ¿Y tú?

Saturday, September 27th, 2008

Aprovechando la inminente salida de la nueva generación de aplicaciones de Adobe quiero tocar este tema que siempre suscita cierta controversia cuando hablamos entre desarrolladores web.

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.

¿Qué enseñamos al cliente? Diseños estáticos vs maquetas

Monday, September 22nd, 2008

Andy Clarke, famoso diseñador, gurú de las CSS y prolífico conferenciante, reflexiona sobre este tema en el blog de su nueva empresa (For a Beautiful Web).

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?

CSS3, los fondos y bordes del futuro

Thursday, September 11th, 2008

El grupo de trabajo encargado del estandar CSS publican un nuevo borrador de trabajo relativo a los bordes y fondos (backgrounds and borders) CSS3.

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í...

CSS:
  1. background-image: url(flower.png), url(ball.png), url(grass.png);
  2. background-position: center center, 20% 80%, top left;
  3. background-origin: border-box, content-box;

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.

CSS:
  1. span {border: thin solid; box-shadow: 0.2em 0.2em #CCC}

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.

box-shadow.png

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.