Tan atractivos y personalizables pueden ser los elementos de un formulario, que socavan su utilidad.
El contraste es una guía de principio en la utilidad de un formulario.
Cuando una opción en un menú tiene gran contraste con el fondo, el usuario sabe que la opción esta disponible. Las opciones degradadas no están disponibles, pero bajo diferentes circunstancias.

Las opciones degradadas no son parte de las características de los elementos de formulario en HTML, pero son parte del lenguaje visual de los formularios. Si un usuario ve menos contraste en un menú o lista, puede pensar que las opciones no están disponibles.

CSS puede ser empleado para especificar el alto y ancho de los elementos del formulario, asi como los colores e imágenes de fondo, tipos de letra, y colores de las mismas.
Desgraciadamente, muchas especificaciones de CSS, como la altura, ancho, y fondos, son aplicadas a los elementos del formulario inconsistentemente.

Por otro lado, usando adecuadamente, CSS puede ser de gran ayuda para diferenciar elementos del formulario importantes con respecto a otros. CSS puede servir para alterar el color de los elementos menos importantes, por ejemplo, darle menos contraste, haciendo que el elemento sea menos apreciable sin crear la confusión de una opción no disponible.
Con tal que el idioma visual establecido de utilidad todavía esté claro, tal cambio de formato puede ser muy eficaz.

Para conseguir un diseño moderno y actual la mejor opción es usar uno de los gestores de contenidos Drupal y Joomal que te permiten usar sus diferentes plantillas que no tienen ningún coste.
Posteriormente tendrás que añadir textos e imágenes además de cambiar algunos valores para que tu sitio web tenga un aspecto profesional.

Ahora bien, si lo que quieres es diseñar una Web muy personalizada con Drupal o Joomla y no te gustan las plantillas gratuitas porque ya estás cansado de verlas, tienes varias opciones.

Una de ellas es buscar a un diseñador profesional que te haga un proyecto totalmente personalizado para ti y empezar a trabajar sobre este proyecto.
La desventaja que tiene esta opción es que es bastante caro y se necesita tiempo para que se haga realidad.
Otra opción es comprar alguna de las plantillas que hay en la red, son totalmente exclusivas por lo que ninguna otra empresa tendrá el mismo diseño que tú y el precio no es tan caro como en el caso anterior.

La tercera y última opción es que seas tú mismo el que le de forma al proyecto de crear una web con Drupal o Joomla partiendo desde cero.
Si tienes conocimientos sobre el lenguaje XHTML y CSS no tendrás dificultades para hacer tu propia plantilla a tu gusto, personalizada y moderna.
Este camino puede tener el inconveniente del tiempo, suele llevar meses conseguir un diseño que coincida con exactitud con lo que habías imaginado.

Si no tienes conocimientos sobre el lenguaje de programación XHTML ni CSS la otra posibilidad que puedes elegir es usar un editor para crear tu web con Joomla o Drupal.
Hay distintas opciones en la red, algunas de ellas puedes usarlas offline, pero nuestro consejo es que uses uno de los más conocidos para este propósito: Artisteer.
Es un programa que hay que comprar y que permite la creación de plantillas que se pueden usar tanto en Joomla y Drupal como en WordPress y Blogger.
Una vez que hayas comprado la licencia de Artisteer puedes crear tantos diseños como quieras y que se pueden aplicar a cualquier página web que quieras, tuyas, de amigos, de empresas, incluso de clientes.
La única limitación que tiene este programa es que no puedes dedicarte a vender las plantillas como producto separado a ningún cliente, puedes usarlas, sin embargo para crear otras páginas web que si puedes vender como pack.

Si alguno de vosotros ya habéis probado este programa estaremos encantados de conocer vuestras opiniones que serán de ayuda para otros usuarios.

• Validar el código de la página web – Validar el código la web en base a los estándares del W3C es una buena técnica. En general consiste en escanear la web en busca de errores de programación y una vez detectados corregirlos. Aparte de detectar errores de codificación, proporciona una breve explicación del error, con lo que se aprenden cosas nuevas. Para validar tu CSS lo mejor es usar las herramientas disponibles, ya que si te propones hacerlo manualmente la tarea será difícil y larga.

• Resetar los estilos CSS – Esta técnica es seguramente la más eficaz.
Se trata de borrar o poner a cero, los estilos CSS para evitar (sobre-escribir) los valores de las hojas de estilos de los navegadores.
La solución completa consiste en neutralizar todos los estilos que aplican las hojas de los navegadores y que puedan afectar visualmente a nuestro diseño.
• Esto se puede aplicar por medio de una hoja de estilos completa que podemos importar antes de aplicar nuestros estilos, o bien podemos incluirla directamente en nuestros estilos, pero siempre al principio de la hoja.
Resetear tu hoja de estilos es una de las mejores medidas que podemos adoptar para prevenir el problema de la incompatibilidad entre navegadores, ya que por defecto, todos los elementos HTML tienen unos atributos CSS predeterminados.

• Usa técnicas soportadas – CSS tiene muchas de técnicas para mejorar el aspecto de nuestras páginas web. Lo mejor es intentar evitar el uso de propiedades que puedan causarnos problemas con los navegadores más usados por los visitantes.
Al usar lasbuenas prácticas en CSS minimizamos el riesgo de incompatibilidades entre navegadores.

• Diseñar para Firefox – Una de las cosas que han hecho a Firefox tan popular es que es uno de los más completos navegadores en cuanto a respetar los estándares web se refiere.
Por tanto, diseñando para Firefox estamos minimizando el uso de reglas indebidas o malinterpretadas.

A continuación te damos algunos consejos básicos.

1. Comprimir los archivos estáticos: Los archivos estáticos como css, javascripts o html utilizan mucho espacio en blanco y saltos de línea.
Pese a que es necesario para hacer cambios, estos bloques de espacio en blanco aumentan el tiempo de carga.
Para solventarlo hay que minimizarlos, es decir, comprimir los espacios y saltos de línea al máximo para que así el fichero ocupe menos y se cargue antes.

2. Utilizar el formato correcto de las imágenes: Para optimizar el peso de los ficheros sin perder calidad de imagen hay que usar el formato correcto.
Si la imagen no lo requiere hay que evitar usar formatos que ocupan mucho.

3. Cargar los Javascripts a la fin del documento: Para que la página funcione mejor, es importante cargar los javascripts siempre al final de un documento y no en su comienzo.
Ello permite al navegador procesar todo el contenido anterior antes de empezar con javascript.

4. No redimensionar imágenes en HTML: Si tienes imagen original de 1200×900 píxeles pero la quieres ver en 400×180 no hay que redimensionarla usando HTML.
Hay que simplemente reducir el tamaño con un editor de imágenes como por ejemplo Photoshop.

5. Escoger adecuadamente el proveedor de Hosting: Buena parte del rendimiento de una página web depende del hosting.
¿Está bien optimizados para rendir al máximo?
Hay que elegir un proveedor que sea fácil de usar y con al que podamos sacar todo el jugo.

Los puntos a tener en cuenta para decidirte por uno u otro son:

• El espacio web que te ceden: la cantidad máxima en megas que el servidor te cede para alojar todos los archivos de tu web (páginas, imágenes, sonidos…).
• Si permite administrar los archivos por FTP. El modo más cómodo es subir y bajar los archivos con FTP. Algunos servidores no lo tienen, y hay que hacerlo a través de su portal lo cual es más pesado.
• La publicidad. Es el precio “a pagar” por un servicio gratuito. En algunos casos apenas molesta pero en otros casos es muy abundante. Esta es la causa más crítica por las que la gente se decide por uno u otro servidor. Lógicamente los de pago no tienen propaganda.
• El tipo de dirección (también se llama URL) que te ofrecen para la pagina web. En función del servidor escogido, la dirección puede ser corta o extremadamente larga lo cual es importante para que los visitantes puedan entrar fácilmente.
• Lenguajes que soporta. Por supuesto, todos soportan Html y CSS, pero algunos además admiten PHP, ASP, extensiones de Frontpage, CGI….

Uno de los mayores problemas y quebradores de cabeza en el diseño web actualmente es la compatibilidad web.
Que una web sea compatible con todos los navegadores significa que se vea igual (o de manera parecida) en todos ellos.
Para empezar hay que apuntar que ello es muy difícil, y en general si conseguimos que se vea igual de bien en todos los navegadores importantes (Explorer, Firefox, Opera, Safari y Mozilla) ya podemos estar contentos.
Hay que tener en cuenta que estos 5 navegadores copan la gran mayoría de usuarios de la red.

Pero, ¿por qué es tan difícil conseguir la compatibilidad web?

El problema principal es que no todos los navegadores interpretan en código HTML y CSS de la misma forma.
Existen  pequeñas variaciones entre ellos que son las que hacen que el resultado no sea el mismo de unos a otros.
Algunas de esas diferencias pueden llegar a ser tan importantes que hacen que partes de tu web no funcione o no se vea en condiciones.
Seguramente nos habremos encontrado alguna vez con ello y es un verdadero problema.

Como el propósito de una web es que la pueda disfrutar el mayor número de personas (y que éstas la vean correctamente), nos interesa que la web funcione en el mayor número de navegadores posibles.
Por lo tanto, a la hora de hacer una página web no es suficiente con preocuparse por la audiencia adecuada, o registrar un buen nombre de dominio o tener un diseño agradable al usuario.
Todo esto puede resultar insignificante si un usuario no ve la página correctamente al entrar con un navegador que no has tenido en cuenta al crearla.

¿Qué hacer para conseguir optimizar la compatibilidad web?

Pese a que es un tema espinoso hay diferentes técnicas relativamente simples.
Entre ellas cabe destacar el validar el código de tu sitio web, resetear los estilos CSS, usar técnicas soportadas o intentar diseñar con Firefox.

Hablaremos de todas ellas al detalle próximamente en un nuevo post.

¿Buscas una alternativa gratuita a Microsoft Expression Web o Dreamweaver? Nvu es un editor CSS y HTML WYSIWYG de código abierto y gratuito, además va acompañado de documentación muy completa y su comunidad online da mucho soporte.

Nvu lleva integrado un administrador de archivos que soporta Windows, Mac Os X y Windows. Está diseñado especialmente para los webmasters que están iniciándose, pero es perfecto también para los usuarios más avanzados.

Aquellos que estén familiarizados con Frontpage o con Web Expressiones podrán exprlorar muy fácilmente su interfaz. Se trata de un programa sencillo y útil, así que puede que quien busque algo mucho más potente se quede con ganas de más. Sin embargo, antes de hacer una inversión de cientos de euros en un programa privativo cmo Dreamweaver, te recomiendo que le eches un vistazo a Nvu.

Es muy frustrante para los usuarios de nuestras páginas Web que tengan que esperar a que la página acabe de cargarse. Cada día la velocidad de transferencia de información es más importante para tener éxito en las nuevos medios. A continuación os traemos 5 consejos de diseño de páginas Web que acelerarán la carga de sus contenidos:

• Imágenes: Optimizar las imágenes que aparecen en tu Web es uno de los aspectos más importantes. Un buen método es evitar usar imágenes que ocupen más de 10Kb.
• Utiliza CSS: Separar el estilo visual de la web de los contenidos es imprescindible. Conoce las ventajas de emplear CSS en tu página Web.
• Reduce las llamadas http al servidor: Combinando todos los archivos necesarios para cargar una página (ej. todo el código javascript en un mismo fichero externo y todo el código css en otro fichero externo) reducirlas as llamadas http drásticamente.
• El tamaño importa: Si una página es pequeña y el código que emplea es poco, se cargará antes, esto es mas que obvio.
• Combina tus imágenes en sprites (con CSS): Esta técnica es fundamental, ya que permite combinar múltiples imágenes en una sola, y utilizando propiedades de CSS como “imagen de fondo” y “posición de la imagen” puedes mostrar solamente las partes relevantes de la imagen total.

Mañana hablaremos de este último método, y explicaremos como convertir imágenes en sprites para acelerar el rendimiento de nuestra Web.

Vía | www.digimode.co.uk
Fotografía | www.flickr.com

• Código: Ten en cuenta que una página en HTML o CSS válida se mostrará adecuadamente en cualquier máquina de tus visitantes, además no tendrá problemas de carga a causa de errores de programación. De hecho, yo te aconsejaría que prefirieras emplear plantillas en CSS en lugar de tablas. Las tablas sirven para almacenar datos, sin embargo, cuando se utilizan para crear diseños, el código puede ser válido, pero las páginas tardarán mucho más en cargarse.
• Apariencia: Una plantilla de calidad debería ser una obra de arte. Los colores deben ser complementarios y, al mismo tiempo, guiar al usuario atrayendo su atención sobre los contenidos más importantes.
• Función: Recuerda que una página Web debe ser funcional para tus visitantes y para ti mismo. La navegación tiene que ser intuitiva, la página debe ser leíble con resoluciones normales, y el diseño debe facilitar el escaneo rápido de los contenidos. Además, ten en cuenta que cualquier página Web tiene que darte la opción de modificarla fácilmente, tanto los contenidos como su apariencia.

Espero que estos consejos te puedan ayudar a diferenciar entre plantillas mediocres y aquellas que tienen gran potencial. Después de todo, acertar el diseño y la codificación de tu página Web puede ser determinante para su éxito y te ahorrara mucho tiempo a la larga. Hace poco, vimos algunas páginas de recursos que ofrecen galerías de plantillas CSS y HTML totalmente gratis, no dudes en echarle un vistazo. ¡Mucha suerte y paciencia en la búsqueda!

Fotografía | www.flickr.com

A lo largo de los últimos años, la comunidad de diseñadores Web ha desarrollado modernas técnicas de diseño CSS y ha creado recursos gratuitos que no tienen desperdicio. Al final de este artículo te dejamos una larga lista de páginas donde podrás encontrar plantillas en XHTML, HTML y CSS.

Cuando encuentres la plantilla que te guste para tu diseño, no te cortes y modifica en ella todo lo que quieras, el uso que hagas de estos modelos está libre de restricciones legales. La única condición que suele pedirse es incluir un enlace en tu página que dirija a la Web desde la que te descargaste el diseño. De todos modos, asegúrate de leer la licencia del diseño que te quieras bajar antes de publicarlo (por si las moscas).

Descárgate plantillas XHTML, HTML y CSS desde: Open Source Templates, OSWD, OSWT, Maxdesign, CSSplay, Changingman, Mollio, Six Shooter Media, Yahoo! UI Library: Grids CSS, CSS Design Templates, ThreeColumnLayouts, CSS Intensivstation, CSSFILL, CSS Frames Layouts.