Posts Tagged ‘css’

¿Maquetar con CSS no afecta al SEO?

Wednesday, December 2nd, 2009

[Via: El blog para webmasters]

Matt Cutts lo asegura en uno de sus videos / entrevista de esos en los que nos va aconsejando sobre qué debemos hacer para ser Google Friendlys.

Contesta la pregunta de un usuario: “¿Es una página web diseñada con CSS mejor para SEO que una basada en tablas?”

Francamente, no preocuparía de esto. Vemos las tablas y el CSS, trabajamos con ambos. Así que intentamos evaluarlas, ya sabes, no importa qué tipo de diseño utilices. Francamente, utiliza lo que sea mejor para ti. Mucha gente tiende a utilizar CSS ahora ya que es fácil para cambiar tu sitio web. Es fácil para cambiar el diseño. Muy modular. Mientras que las tablas, tiene algo de, ya sabes, connotaciones web 1.0. Pero si tienes la mejor web, intentaremos encontrarla e intentaremos colocarla arriba sin importar si está basada en tablas o en CSS

En esto me equivocaba profundamente, estaba convencido de que una maquetación limpia y sin excesivos anidamientos debería ser más facil de procesar por Google. Generalmente, aunque no siempre (hay casos patológicos de “divitis“), una maquetación sin tablas suele ser bastante más limpia.

De todas formas tanto la respuesta como la pregunta son engañosas y no puede servir de excusa a los malos maquetadores. Me explico, el uso adecuado y semántico del (x)HTML sí afecta al SEO.

Una cosa es usar tablas para realizar presentaciones de algunos elementos complejos de nuestra página, como por ejemplo puede ser un formulario con tres columnas y lleno de checkboxs, y otra coger un diseño del photoshop y pasarlo enterito a tablas tal cual si fuese un Flash sin movimiento.

En este segundo caso el maquetador pasará de usar encabezados para los titulares, posiblemente no ponga un solo alt a las imágenes y, así, decenas de tropelías diversas  que no beneficiarán precisamente al posicionamiento orgánico de su página.

No entremos en el tema de la accesibilidad, profundamente afectada por el uso de tablas. Esto es una demostración más del profundo egoismo de Google que nos recomienda que usemos estándares cuando a ellos les conviene y en caso contrario se los pasa por el forro.

Para el que tenga ganas de ver y oir al señor Cutts, ahí va el vídeo.

Maquetando sin tablas, pero como con tablas: display inline block

Monday, October 27th, 2008

Aviso: lo que se explica en el siguiente artículo forma parte de lo que denomino “la maquetación web del futuro“, es decir, cosas que podremos hacer dentro de un tiempo pero que, dado el uso que aún tienen algunos navegadores antigüos, hoy por hoy no es recomedandable utilizar

Actualización!: Anieto2k publica un hack que permitiría utilizar esta técnica en todos los navegadores. 

Esta semana he leído dos artículos (artículo 1, artículo 2) donde unidos a la palabra maquetación se usan términos como “Table”, “Cell” o “Row”. ¿Qué pasa? ¿Se ha vuelto a poner de moda la maquetación basada en tablas? Evidentemente no, esto no tiene vuelta atrás aunque todavía haya demasiados sitios webs table based.

La idea central de estos artículos es la posibilidad de poder aplicar a elementos que no son tablas propiedades de éstas. Esto se hace mediante los valores “table”, “table-cell” y “table-row” de la propiedad display. Se vuelve a hablar de esto ahora que Internet Explorer 8 admite y funciona con estos valores, aunque no lo hace de forma totalmente correcta (hablamos de la beta 2).

En la práctica lo que esto supone es que podemos hacer un elemento HMTL como, por ejemplo, un DIV, tenga el comportamiento de una tabla. Es decir, sin hacer atentados semánticos podemos aprovechar las propiedades de la maquetación con tablas. Un claro caso de uso es poder hacer algo que trae de cabeza a cualquier maquetador CSS: que un conjunto de elementos flotantes tengan una altura común. Dos imágenes valen más que 2.000 palabras

Caso 1: (ver html)

Caso 2: (ver html no en Internet Explorer < 8)

Para el segundo caso lo que hemos hecho es usar en los siguientes valores de la propiedad display:

  • display: table->le dice al elemento que se comporte como una tabla.
  • display: table-row-> le dice al elemento que se comporte como una fila de una tabla
  • display: table-cell->  le dice al elemento que se comporte como una celda de una tabla

Ojo, por si no has leido atentamente: esta técnica se podrá usar cuando la gente

Más sobre este tema:

No más “Expresiones” en CSS

Thursday, October 23rd, 2008

Ya lo ha comentado Andrés Nieto, no hay mucho más que decir. Solamente congratularnos por la desaparición de otro de los inventos de la época anti-estándares (o más bién, “yo hago los estándares”) que promovió Microsoft en su IE.

Internet Explorer siguen en el camino que comenzó con IE7 hacia el respecto a los estándares web.

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?