Solo recomendar la lectura de este artículo (en inglés) en el que se resumen muy bien cómo funciona el posicionamiento de elementos en CSS.
El artículo aborda de forma sencilla y clara atributos como:
Y parece ser el primero de una serie…
Reconozco que el título es un poco sensacionalista, pero un poner un post como “recursos para hacerte menús con CSS y HTML sintácticamente correcto y sin javascript” tampoco era una alternativa válida.
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:
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/
Se trata de un generador de menus online basado en los que ofrece el listamatic. Puedes generar tu menú en 3 pasos:
Enlace: http://www.accessify.com/tools-and-wizards/developer-tools/list-o-matic/
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
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
[Vía Ajaxian]
Cada vez surgen más herramientas que pueden facilitarle la vida a los desarrolladores web a la hora de hacer sus maquetas en CSS. A rejillas como YUI Grids o Blueprint y herramientas como CSS Sculptor de Eric Meyer o Constantinology se une ahora YAML Builder, que mediante un interesante interfaz realizado en DHTML permite generar maquetas CSS de forma visual.
Vale la pena probarlo aunque solamente sea por ver lo que algunos pueden llegar a hacer con HTML, Javascript y DOM… una herramienta muy currada.
[Vía Sitepoint] Personalmente considero que una de las cosas mas complicadas de maquetar, cuando uno utiliza estándares para dicha labor, son los formularios.
El artículo de Sitepoint al que hago referencia (realmente es un capítulo del libro “The Art and Science of CSS“, en inglés) es el más completo que he leído sobre el tema; resume las mejores técnicas a utilizar en esta tediosa e ingrata labor y te ayudará a crear formularios con elementos estándares y a hacerlos medianamente accesibles.
Resumiendo:
label para etiquetar los camposfieldset para agrupar bloques de elementoslegend para describir un grupo (o el grupo) de campos del formulario Pero yo sigo teniendo problemas con los formularios complejos, normalmente usados por los departamentos de márketing de las empresas para intentar obtener multitud de datos de un usuario, en los que la abundancia de opciones con checkbox o radio me obligan a utilizar una tabla (no se lo digáis a nadie) para que la presentación quede más o menos agrupada.
Y no es que no se pueda hacer con layout en CSS, es que hacerlo es muy complejo, costoso en tiempo, y supone una cantidad de atentados contra la limpieza de la hoja de estilo que realmente considero que no vale la pena.
El periódico El Pais celebra la muerte del inmundo dictador rediseñando (o como hace notar Daniel Torres, realineando) su sitio. Desde luego esto no es una primicia, pero no puedo perder la oportunidad de comentar lo que me gusta (bastante) y lo que no de este trabajo.
Impresión inicial
Muy buena. El sitio está mucho menos recargado, más limpio y claro, en definitiva, más cómodo de leer. Los artículos destacados de portada utilizan un tamaño de letra algo más grande que facilita la lectura. Mejora sustancial en la organización de la información.
Los artículos
Muy mejorados:
Y además se hacen sociales!! Puedes votar la noticia, añadirla a delicious, enviarla a digg, ver las referencias en Technorati y menearla.
El sistema de utilización del teclado falla tanto para aumentar el tamaño del texto como para moverte de un artículo a otro. Supongo que será algo temporal.
El menú
Ha mejorado sustancialmente respecto a la versión anterior. han quitado las carpetitas con el simbolo más a una estructura situada en cabecera. La organización de la información en el menú no ha cambiado en absoluto.
Maquetación
Xhtml estricto con un chorro de errores de validación, aunque reconozcamos que la mayoría se deben a problemas con la codificación de caracteres. La maquetación se hace sin tablas, desde luego y el uso de los encabezados es correcto. Han hecho un esfuerzo importantísimo en este tema.
Navegación con dispositivos móviles
Bueno, ahora si se puede navegar desde mi Blackberry a través de la versión PDA y es muy muy cómoda.
Pero lo que es más importante, se puede usar la página normal sin problema. La versión anterior era muy difícil de usar y la nueva maqueta hace que, sin css, la web pueda ser utilizada. Se echa de menos un detalle: un enlace al principio de la página con el típico “saltar al contenido” que evite tener que tragarse el menú de la web cada vez que cargas una página. Sin embargo, aunque todavía no lo he probado, me da la impresión de que no debe ser fácil navegar con teléfonos móviles.
Lo curioso es que no dan acceso directo a la versión PDA sino a una farragosa explicación sobre la versión PDA y la versión movil (basada en sms). Al final, casi que me quedo con la versión solo texto y paso de la otra.
Actualización: no se os ocurra intentar cargar la versión normal en un movil, he probado con un Nokia N70 y después de cargar casi 300kb le ha resultado imposible procesar la página. La versión PDA funciona muy bien y la solo texto todavía mejor.
Un error grave, en mi opinión, es no redirigir automáticamente a la versión PDA a los dispositivos móviles. Muy grave
Posicionamiento
Como apuntan en google dirson, han utilizado una buena estrategia para que el cambio de dominio no afecte a su pagerank ni a sus backlinks (links que apuntan al dominio). Tal y como recomienda Google, las cabeceras de las páginas dan un “HTTP/1.1 301 Moved Permanently”. No podían fallar en eso.
Me llama la atención que no hagan los títulos de las páginas dinámicos.
Menos mal que no soy el único que está soprendido y confundido con la nueva iniciativa del W3C de resucitar el HTML y con el apoyo que algunos gurus han prestado al asunto.
El escenario es el siguiente
Hace unos días Tim Berners-lee lanza un post donde reconoce el fracaso en el intento de cambiar a la gente al XML y anuncia que un nuevo grupo de trabajo se encargará de mejorar incrementalmente el HTML, la idea es que este grupo trabaje de forma paralela al que desarrolla xHTML.
A los pocos días en un post conjunto de The Web Standards Project, Lachy’s Log, Molly.com y 456 Berea Street piden opinión y ayuda a la comunidad en el proceso de desarrollo de la nueva versión de HTML que ya denominan como “HTML 5″.
En este post se habla del revuelo que se ha montado con la iniciativa de Tim y se dice que en las opiniones aparecidas en blogs, foros y listas de correo hay muchas “ideas falsas” (traducción de google del término “misconceptions”). A partir de ahí explica como la comunidad puede aportar sus ideas y sugerencias.
Mi opinión
Yo sigo sorprendido con ambas iniciativas y no termino de enteder las razones de Tim Berners Lee. Estoy en la línea de lo expresado en este post:
XHTML (1.0 y 1.1) no es sino una reformulación del HTML. Una buena reformulación del HTML que ofrece beneficios reales a desarrolladores y autores….
Lo que más me cabrea es que cuando Berners-lee aduce como principal argumento que aunque hay mucha gente que aprovecha y disfruta los “sistemas bien formados” (”well formed itmes”) esto no afecta que no todo el mundo. Ahora que parece que hay un movimiento masivo para usar y aprovechar el XHTML, ahora que se están desarrollando aplicaciones que se benefician del XHTML ¿Vamos a volver hacia atrás?. Tim nos pilla a medias, deja en bragas a los evangelistas y se carga el trabajo de años de los que han defendido, creo que correctamente, el paso al xHTML.
No lo entiendo, que me lo expliquen
No estoy siendo irónico al decir que estoy seguro que las sesudas mentes que apoyan esta iniciativa tienen sus razones pero todavía no he visto argumentos bien explicados explicaciones bien argumentadas que me convenzan de la necesidad de desarrollar HTML 5 en vez de continuar en la línea del XHTML 2 (que no se discontinúa, se sigue trabajando de forma paralela).
Cierto que la mayoría no estrujamos el xHTML ni aprovechamos todas sus potencialidades. Pero al menos tenemos la tranquilidad de que estamos marcando nuestras webs con un lenguaje basado en XML! Con xHTML podemos hacer al menos lo mismo que con HTML y además mediante un lenguaje bien formado. Si podríamos usar HTML pero ¿para qué?.
Yo pensaba que cosas como la interoperabilidad de nuestros documentos con distintas aplicaciones o la web semántica iban a estar basadas en el xHTML gracias que es XML. ¿HTML 5 mantendrá estos objetivos?.
Todo queda
Argumento aducido por Pemberton, miembre del w3c y líder del grupo de desarrollo del xHTML (un tio genial, por cierto) en favor del xHTML:
HTML es probablemente el lenguaje de etiquetado de documentos más exitoso del mundo. Pero cuando se presentó XML, se organizó un taller de dos días de duración para analizar si era necesaria una nueva versión de HTML basada en XML. La opinión general del taller fue un rotundo “Sí”: con un HTML basado en XML….
Y también dice:
Las aplicaciones de Web Semántica serán capaces de sacar provecho de los documentos XHTML.
Finalmente
Estoy seguro de que hay buenos argumentos y es posible que defensores de esta iniciativa más expetos que yo lean este post. Les ruego comenten y expliquen si es posible.
Por ahora que me quedo con la frase (traducida) de Tim anderson en su blog:
“el W3C no necesita reinventar el HTML. Necesita reinventarse a si mismo”
Es el día de los muertos y el HTML ha resucitado (q ingenioso… plas plas plas plas)… he decidido seguir el consejo de 456bereastreet y leer el artículo de Tommy Olsson’s Bulletproof HTML: 37 Steps to Perfect Markup
Empezando por “Qué es html” hasta el “uso correcto del elemento address” pasando por una explicación sobre si “strong” sustituye a “b” (pués no, no lo reemplaza), el artículo proporciona magníficas explicaciones a las dudas más comunes de todos los niveles sobre el HTML;
Como paso de ir al cementerio … voy a poner la relación de preguntas (traducción libre):
charset) ?Y yo me pregunto ¿por qué cojones cuando voy por el elemento 37 va el explorer y peta? respuesta porque soy gilipollas y a veces uso el explorer !·”$·”!!$·” y encima no guardo (bueno, había guardado en la 22).
Algunas respuestas os pueden sorprender, otras sirven para llevarlas en algún sitio y contestar a los amiguetes y otras te resolverán dudas. Lectura recomendada
Tripix.net es el blog de José Manuel Pita Desarrollador web de Granada, España Que actualmente trabaja como responsable de proyectos web en Grupo Trevenque Kaplan
