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.