» Maquetación web

#

Archive for the 'Maquetación web' Category

Nueva web del Ayuntamiento de Granada: foto-comentarios

Hace unas semanas que se publico la nueva web del Ayuntamiento de Granada. No le hice mucho caso por falta de tiempo, pero en cuento he tenido un momento para ver qué tipo de rediseño habían hecho… en fín, sin palabras, unas capturas creo que pueden ser reveladoras respecto a cómo se han currado el tema de accesibilidad… a buen entendedor, pocas palabras bastan:

Granada.org en un navegador estándar

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

Granada.org

Granada.org desactivando Javascript

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

Imagen 6.png

Granada.org sin CSS

No veo nada…

Granada.org sin CSS

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

Granada.org sin css y sin javascript

Y este sello??

Imagen 10.png

Sin palabras

Imagen 11.png

Posicionamiento de elementos en CSS

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:

  • Display
  • Position
  • z-index

Y parece ser el primero de una serie…

Estadísticas de uso de Internet Explorer

Por curiosidad profesional he estado mirando los datos que me ofrece Google Analytics sobre el uso de navegadores en algunas de las webs que gestiono. Concretamente mi objetivo ha sido averiguar cuántos usuarios acceden con Internet Explorer 6. Y ese es para mi el dato más importante: el uso de IE6 está todavía en torno al 43%.

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

Estadisticas uso Internet Explorer

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.

Algunas utilidades para desarrolladores web

Generación y validación de formularios. Edición de imágenes on-line

Desde hace algunas semanas el número de post que publico está siendo anormalmente bajo... por desgracia todo el mundo quiere publicar su web antes de que termine el año.

Eso no quiere decir que no haya cosas interesantes que publicar, las hay:

Phpform.org: generador de formularios

En phpform.org podemos construirnos un estupendo formulario en cuestión de segundos gracias a una magnífica aplicación web con una interfaz sencilla e intuitiva.

  • Escoge tu combinación de colores
  • Añade los campos que necesitas
  • Descarga tu formulario

Estupenda utilidad que me recomendó mi amigo Sacha.

Dexagogo: validación de formularios con AJAX

Librería de uso bastante sencillo que nos permitirá hacer la validación de nuestros formularios en el navegador. El sistema está basado en esa maravilla llamada prototype y su implementación es fácil y rápida. Basta incluir el javascript necesario y definir qué tipo de validación queremos para un campo del formulario en el "class" de nuestro elemento.

Ejemplo:

CODE:
  1. <input type="text" class="required-text" name="nombre" title="texto para la validación" />

No voy a extenderme demasiado más, pero sí señalar que está muy bien hecha, es totalmente extensible permite trabajar de forma no obstructiva.

Splashup: editor de imágenes online

Hace tiempo que se rumorea la próxima apareción de una versión on-line de Photoshop; pero me parece a mi que va a llegar tarde. Splashup es un editor de imágenes sencillo pero con las opciones más habituales en el tratamiento de imágenes.

Además se integra con perfectamente con Flickr, Facebook o Picassa, tanto para recuperar imágenes como para guardarlas en estos sitios. Es sencillamente espectacular y útil.

Splasup. Editor de imagenes on-line

Recursos para hacerte tus menús CSS

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:

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.

Listamatic - menus en css

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ú

Imagen 3.png

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.

Imagen 4.png

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

YAML - Otro generador de Layouts CSS

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

Imagen 2.png

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.

Maquetación de formularios con CSS

[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:

  • Utiliza label para etiquetar los campos
  • Utiliza fieldset para agrupar bloques de elementos
  • Utiliza legend 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.

formulario lleno de checkbox

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.

Bolsa de trabajo especializada para desarrolladores web

¿Eres especialista en desarrollo web con estándares y estás buscando trabajo? ¿Necesitas desarrolladores web profesionales? Es posible que la sencilla bolsa de trabajo especializada que han desarrollado en estadobeta te resulte muy útil.

La tarea de encontrar desarrolladores web de calidad, entendiendo por calidad que al menos sepan lo qué son cosas como los estándares, la accesibililidad o la usabilidad, es cada día más difícil. Por suerte nuestra profesión está cercana a cumplir la mayoría de edad y a las empresas no les vale con que el programador o diseñador gráfico de turno hagan la web; necesitan especialistas que sepan integrar los elementos que los perfiles mencionados producen y que lo hagan con una metodología y técnicas adecuadas.

Voy más allá, necesitan profesionales que no solo integren diseño y programación sino que participen (y normalmente dirijan) en el análisis inicial de la web, orientando a los especialistas en diseño y programación en aspectos como la arquitectura de información, la usabilidad y/o el código que permitirá mostrar el futuro sitio en diversos dispositivos.

Mi experiencia me dice que estos profesionales suelen empezar como "maquetadores"; perfil que históricamente ha sido maltratado, y me atrevería a decir que despreciado, por los especialistas en programación y en diseño gráfico.

Los primeros consideraban que eso del HTML era una chorrada que permitía que sus acojonantes códigos de programación tuviesen una salida en pantalla a través de un navegador y como, por alguna extraña razón, el cliente le decía que lo que habían hecho era muy feo, lo mejor era que el chaval ese que dice que es maquetador le diera un barniz para contentar a ese extraño cliente que no les entendía y además era medio tonto dado que no sabía usar su sistema.

Los diseñadores veían en el maquetador a un ser sin capacidades artísticas que se dedicaba a joderles sus impresionantes diseños y que además osaba a decirles que en la web que estaban haciendo no había forma de pasar de la home o que la idea de ese sitio web era que la gente comprase y no que se quedasen embobados con su espectacular intro en Flash.

Esos tiempos han pasado y hoy en día la mayoría de los responsables de proyectos competentes y capaces de orientar y elaborar un sitio web suelen provenir de la maquetación.

He divagado un poco :) pero os recuerdo que en la bolsa de trabajo de estadobeta a lo mejor encontrais lo que estais buscando.

Related Link: Empleo Ofertas de Trabajo

Robert Nyman: en defensa de “el chaval del HTML”

El que lea Tripix con cierta asiduidad se habrá percatado de que soy un ferviente seguidor de Robert Nyman; su último post me re-afirma en mi idea de que cuando sea más mayor quiero ser como él.

Robert se defiende de la condescendencia y la minusvaloración con que muchos tratan a los que nos dedicamos a esto del HTML. Cito traduciendo libremente:

Si, yo hago código HTML, pero eso no es más que una pequeña parte de mis tares/habilidades; para ser exacto, una buena parte de mi tiempo posiblemente se va en hacer CSS (y lógicamente, arreglando fallos del IE cada día), y si es un proyecto divertido, un monton de código Javascript bien intencionado para mejorar la interacción y la usabilidad.

Oleeeé

Y lo anterior es solo mencionar la mayor parte de bloques de mi trabajo. Hay también consideraciones de usabilidad, conocer los defectos e incosistencias de los navegadores, un poco de arquitectura de la información, algo sobre diseño y, especialmente, conocimientos de Photoshop, conocer el trasfondo tecnológico para estar al tanto de los posibles problemas y oportunidades que nos puede dar, etc..

A mi es un tema que hace tiempo dejó de molestarme lo más mínimo. Pero es cierto que al principio de dedicarme a esto me sacaba de quicio el menosprecio tanto de los diseñadores gráficos como de los programadores. Ante eso había dos posibilidades: acomplejarse y ponerse a las órdenes o tener claro a lo que estabas haciendo y ver las enormes deficiencias que los especialistas tenían en esto de la web.

El tiempo pone a cada uno en su sitio y desde luego hoy en día lo más normal es que los que realmente saben de web, son capaces de llevar un proyecto web completo, valorarlo, etc.. son aquéllos pobres que no eran informáticos ni habían hecho Bellas Artes.. pero que sabían HTML y además se preocuparon por otras cosas.

Hazte tus layouts CSS + XHTML online

[Vía Ajaxian] Chris Constandinou nos ofrece una interesante aplicación web para generar layouts basados en css. A través de esta espectacular sistema puedes configurar la maqueta de tu web muy fácilmente.

El interfaz es sencillo y cómodo. Primero defines la estructura general de la maqueta eligiendo los sigui

  • Alineación del contenedor (Container alignment)
    • Centrada
    • Izquierda
  • Escala del contenedor (Container scale):
    • no scale: pondrá las medidas del body con tamaños absolutos (px)
    • text zoom: pondrá las medidas del body con tamaños remativos (em)
  • Tamaño del contenedor (Container size)
    • Pequeña (640px)
    • Mediana (760px)
    • Grande (900px)
    • Extra grande (1000px)
    • Fluido
    • Personalizado

Una vez definida la estructura general se pueden ir añadiento más elementos dentro del contenedor con los niveles de anidación que deseemos. Para cada uno de estos elementos se puede definir el número de columnas, hasta 4 y con distintas combinaciones de tamaños.
Si no tienes demasiada experiencia y/o conocimientos de maquetación seguro que __layouts te saca de más de un apuro. Al lector experimentado en estas lides es posible que no le resuelva demasiado y posiblemente la escasa semántica del código generado le molestará.

__layouts_1.png

Prueba __Layouts

Related Link: layouts for your myspace profile are available at all4myspace.com. Find more than 105,000 myspace layouts.

Clicky Web Analytics