Si necesitas una página web pero no sabes nada de diseño web, tienes varias opciones, las más profesionales vienen a ser dos:

• Contratar a un diseñador o empresa de diseño web.
• Comprar una plantilla prefabricada y adaptarla a tu proyecto.

Contratar a un diseñador o una empresa siempre será la opción que te de más flexibilidad, profesionalidad y calidad en tu proyecto. Será la opción que te permita hace más cosas de lejos, pero también será la opción más cara. Si necesitas tener un resultado de calidad pero tienes poco presupuesto , el recurso de las plantillas web es muy recomendable. Eso sí, ten en cuenta que una misma plantilla la puede más gente a parte de ti, no son diseños originales.

Hay que tener cuidado porque a veces las empresas que venden plantillas web no ofrecen plantillas con unos mínimos de calidad y pueden llegar a venderte cualquier cosa por desconocimiento. Pero eso es algo que salta a la vista nada más echar un vistazo a las plantillas disponibles de cada empresa del sector.

Hay muchas empresas que ofrecen plantillas web, algunas incluso gratis. Entre ellas, templatemonster es de las que mayor base de datos de plantillas tiene. Es una gigantesca web donde seguro encontrarás una plantilla que se adapte a tus necesidades. Y sinceramente la calidad de sus plantillas es excelente. Son diseños elaborados y detallistas. Tienes plantillas flash, plantillas para tiendas online (Magento, Prestashop, VirtueMart…), plantillas para WordPress, plantillas Joomla, plantillas Facebook, etc. Vamos, que para gustos… colores.

Básicamente, lo que compras es un conjunto de archivos que forman un diseño web ya montado, listo para rellenar de contenido y usarse. Para rellenarlo con tus textos, fotos, etc. tienes que tener unas nociones básicas de HTML.

La base de datos de plantillas de templatemonster como digo es inmensa, pero para rebuscar entre tanto archivo puedes echar mano de su buscador, bastante útil, permitíendote filtrar por parámetros como el color, la plataforma, precio, tipo de web, etc.

Si quieres tener un diseño que no tendrá nadie más en tu web, también puedes comprar una de sus plantillas en exclusiva (automáticamente deja de estar a la venta para siempre), pero el precio puede ser hasta 20 veces mayor.

Es una opción que conviene saber que existe, puede ser la solución a muchos proyectos pequeños que no disponen de presupuesto para contratar a un diseñador.

Ahora están con un sorteo para nuevos clientes. Si compras una plantilla web de TemplateMonster puedes obtener un año de hosting web y un nombre de dominio gratis.

Colorea el código fuente según el elemento que sea y permite editar múltiples documentos online al mismo tiempo.

La aplicación tiene un explorador y un cargador de archivos. Múltiples archivos, mientras son editados, pueden ser explorados y guardados fácilmente con ecoder.

De cualquier modo, ecoder se encuentra en fase beta por lo que puede contener algún error de programación, igualmente es una aplicación que promete y merece la pena probar.

Enlace: ecoder

Como digo la idea es muy similar, ingresas un texto y vas modificando opciones como el tamaño de fuente, color, espacio entre caracteres, alineación, etc. y te muestra a un lado el resultado final y al otro el código CSS necesario. La diferencia con typetester es que csstypeset es más sencilla de usar (tiene menos opciones también), sus controles son más gráficos y de un vistazo ya sabes para que sirve cada uno. Como contrapunto, no permite tanto control sobre las tipografías como typetester y tiene menor número de ellas.

Enlace: csstypeset.

Por lo que si estás pensando en renovar el estilo de tu web, estos iconos pueden ayudarte.

Para tener un favicon personalizado en tu web sólo tienes que crear una imagen con extensión .ico y subirla a la carpeta raíz de tu espacio web con este nombre: favicon.ico. Una vez subida la imagen añade este código en las páginas de tu web y listo:

<link rel=”shortcut icon” href=”http://www.miweb.com/favicon.ico”>

Ahora bien. Para crear la imagen .ico no vale cualquier programa. Por ejemplo, Photoshop que es de los más usados, no reconoce este tipo de archivos. Pero no pasa nada, porque como siempre en Internet tenemos herramientas gratuitas que nos solucionan el problema. En Dynamic Drive tienen un generador de favicon (favicon generator) que funciona a la perfección. Le indicas la ubicación del archivo que quieres convetir en favicon (el archivo debe ser en formato gif, jpg, png o bmp) y pulsas “crear icono”. De forma predeterminada te genera el favicon con un tamaño de 16×16 píxeles, listo para subir a tu web, pero si también quieres hacer un favicon más grande para el escritorio o cualquier otra cosa permite crearlos de 32×32 o 48×48 px.

Una buena forma de destacar tu web entre los favoritos de tus visitantes y de darle un toque personal en el navegador.

Recordemos que optimizar las imágenes para la web es muy importante, ya que cuanto menos pesen las imágenes más rápido carga la página web y menos ancho de banda de nuestra cuota mensual consumimos.

La herramienta es muy sencilla (y muy básica también). Eliges la imagen que quieras redimensionar de tu ordenador, seleccionas el tamaño máximo que puede tener (puedes elegir entre tamaños predeterminados, establecer un porcentaje del tamaño original o un valor personalizado) y eliges la calidad de resolución.

De la calidad de la imagen y el tamaño dependerá su peso. Cuanto más grande y de mejor calidad, mayor será el peso (tamaño) de la imagen y más tardará la página en cargar y viceversa, cuanta menor calidad y tamaño menos tarda en cargar una web. Por tanto, hay que encontrar un término medio, para no perder demasiada calidad de imagen y que su visualización sea buena, pero sin que esto suponga ralentizar innecesariamente la carga de la página.

Para que te hagas una idea de lo que puede suponer una imagen mal optimizada, vamos a usar la herramienta de LaWebera.es para calcular el tiempo de carga de una página. Supongamos que tenemos una página web que pesa 10 KB y una imagen de 20 KB, en total para que una persona viera la página tendría que descargarse 30 KB. Pues bien, con la mayoría de velocidades de conexión a Internet apenas tardaría un segundo en cargar. Si a la misma página de 10 KB le añadimos una imágen mal optimizada de 600 KB, por ejemplo, para conexiones lentas podríamos hablar de unos 10-30 segundos de espera en cargar. 10 segundos parecen una tontería, pero en Internet la gente es muy impaciente, y mucho tiene que merecerle la pena a alguien lo que hay en una web para que espere medio minuto a que cargue y no irse a otra de las miles que ofrecen lo mismo.

Puedes ver 3 tipos de fuentes a la vez, de modo que puedas comparar entre las que más te gusten y elegir. Cada fuente se muestra en diferentes formatos (mayúsculas, minúsculas, negrita, cursiva y sus combinaciones) y puedes seleccionar para cada una diferente tamaño, espacio entre palabras, caracteres y entre lineas, alineación, tamaño, color, color de fondo, subrayado, etc.

Una de sus mejores funciones a mi gusto es la opción que te permite obtener el código CSS del estilo de fuente que desees. Es decir, puedes crear con esta herramienta un formato de fuente determinado con sus distintas opciones sin saber mucho de CSS y obtener el código listo para usarlo en tu web.

Puedes modificar el ancho y el alto de la cuadrícula según lo grande que quieras que sea tu patrón. Tiene una paleta de colores un tanto rudimentaria, pero te permite añadir el valor hexadecimal exacto del color que quieras. Cuando tienes acabado tu patrón sólo tienes que guardarlo y utilizarlo.