El texto de prueba utilizado en diseño web, siempre suele comenzar por “Lorem Ipsum…“. Este texto en sí no tiene sentido, sino que deriva de la lengua latina, a cuyas palabras se les han eliminado sílabas o letras. Lorem Ipsum Generator es una herramienta que nos permitirá generar este tipo de texto de varias formas.

Podemos generar párrafos, palabras o frases de la longitud que introduzcamos. De forma opcional, podemos añadir las etiquetas de HTML <p>, <b> e <i> para introducir párrafos y palabras en negrita e itálica. Cuando pulsemos el botón de generar, aparecerá el texto listo para copiar y pegar en nuestro editor HTML o en nuestra maqueta de Photoshop.

Para complementar esta aplicación podemos usar: Dummy Image Generator, cuyo fin es similar, pero orientado a los gráficos.

Fuente | Lite Review

Dummy Image Generator es una utilidad que permite generar imágenes de las dimensiones y colores que especifiquemos. Estas imágenes las podemos usar para preparar diseños web, con el fin de rellenar espacio hasta que tengamos la imagen definitiva.

Podemos generar las imágenes desde la página web, introduciendo el tamaño, color de fondo y de texto, formato (PNG, GIF o JPG) y una frase. En la misma página está la documentación, que nos permitirá añadir parámetros desde la URL y conseguir el gráfico que buscamos.

Por ejemplo, si necesitamos rellenar el espacio de un banner típico de 468×60 píxeles, basta con introducir en el código fuente la siguiente línea: <img src=”http://dummyimage.com/fullbanner” alt=”banner” />

Fuente | lifehacker

TestSize es una herramienta online que nos permite testear una página web en varias resoluciones, con el fin de optimizar nuestro diseño lo máximo posible.

Para probar tenemos que introducir la dirección de la página, y escoger una de las resoluciones predefinidas o introducir la que nosotros queramos. Podemos abrir la URL en un marco o en una ventana aparte pulsando el botón: “Open popup“.

Una vez cargada la página, pulsando las teclas + y – subirá o bajará la resolución unos píxeles, y pulsando espacio alternaremos entre las resoluciones ya definidas. La tecla “F” nos servirá para eliminar la cabecera y utilizar todo el espacio para mostrar la web introducida.

Fuente | Wwwhat’s new

Poco a poco todas las marcas importantes van teniendo su espacio en las redes sociales, y sus diseños cada vez son más sofisticados y personalizables. Custom Facebook Page contiene una galería de diseños realizados para páginas hospedadas en Facebook, que nos servirán de inspiración antes de comenzar a trabajar.

La web contiene una serie de mini capturas de la página principal del diseño, pulsando en ellas podremos ver las pantallas interiores, una descripción junto con la URL y los comentarios de los usuarios. Para acceder rápidamente a un diseño podemos navegar por sectores comerciales o usar el buscador de la web. Si hemos realizado una página personalizada a una marca, la podemos enviar para que se añada a la galería, desde la opción: “Submit a page“.

Fuente | Designios

Reflection maker es una sencilla aplicación web que permite crear un efecto de reflejo en una imagen.

Solamente tenemos que escoger el gráfico de Internet o de nuestro PC y seleccionar el tamaño del reflejo y el color de fondo, cuando pulsemos en el botón “generate” se generará el nuevo gráfico que podremos descargar en formato JPG pulsando el botón inferior “Download“. Otra herramienta que realiza un proceso similar: Wet Floor.

Por si os interesa saber como se realiza este proceso en Photoshop, aquí tenéis un manual con los pasos necesarios, y aquí un pequeño script en Javascript llamado Reflection.js 2.0 que permitirá crear este efecto en las imágenes sin necesidad de editarlas.

Fuente | Xyberneticos

CSS Submiter permite promocionar páginas web que estén bien diseñadas. Este tipo de webs suelen estar expuestas en las llamadas “Galerías CSS”, páginas como CSS Manía, Best Web Gallery o CSS Based. Lo que hace esta aplicación es enviar nuestra web a varios de estos sitios, en principio 20, pero se está trabajando en aumentar esta cifra hasta 150.

Para comenzar con el envío hay que rellenar unos cuantos datos: título de la web, dirección, descripción, nombre y apellidos, correo, ciudad, país, tags asociadas con la página y la dirección personal del diseñador. No es un capricho el hecho de tener tantos campos de texto, al pasar por muchos formularios de envío, nos tenemos que asegurar que todos los campos tienen su equivalencia.

Una vez esté todo completado, pulsando el botón “Submit” comenzaremos a navegar por los formularios de envio de las “galerías CSS”, estos se rellenarán sólos, con la información que introdujimos anteriormente, solo tenemos que asegurarnos que todo es correcto, y pulsar en la parte superior el botón: “Next Form” para pasar al siguiente.

Hace unas semanas os hablamos de una web bastante similar: MeeCSS, podéis probar las 2 pero evitad enviar los formularios repetidos u os podrian penalizar.

Fuente | Su programador: David. ¡Gracias!

myFontbook es una aplicación web que permite visualizar todas las fuentes instaladas en el sistema operativo.

Para comenzar pulsaremos “Font Viewer” y esperaremos un tiempo que dependerá del número de fuentes instaladas. Una vez cargado el listado, podremos testear las fuentes, escribiendo un texto y dándole formato. En el panel inferior podremos ver la vista previa y algunas opciones extra para ver la fuente en varios tamaños, visualizar el listado completo de carácteres y comparar la altura mediante guías.

Además disponemos de un panel lateral donde poder asignar etiquetas a las fuentes, votarlas y acceder rápidamente a nuestras favoritas y a las que han sido añadidas recientemente. Para que las preferencias no se pierdan, nos deberemos de registrar en la aplicación, aunque si solo queremos echar un vistazo rápido, no hará falta.

Fuente | Bitelia

PunyPNG es una utilidad al estilo de Smush It, que permite comprimir imágenes sin perder calidad, algo muy útil para enviarlas por correo o publicarlas en Internet.

El funcionamiento es muy simple, pulsamos el botón: “Upload images” y escogemos las imágenes que queremos optimizar, se aceptan los formatos GIF, JPG y PNG de 500kb como máximo. En unos segundos el servidor nos las devolverá optimizadas indicando el tamaño que nos hemos ahorrado en bytes, el nuevo tamaño y el tanto por ciento que ha conseguido eliminar.

Pulsando “Download” podremos bajar las imágenes, y si hemos optimizado varias a la vez, aparecerá una nueva opción para descargar todas juntas en un archivo ZIP.

Fuente | Softwarelogia

Stripe Designer es una utilidad muy similar a Stripe Generator o Stripemania, que permite crear fondos rayados para usarlos en diseños web 2.0.

Hay disponibles cerca de 200 fondos para elegir, con posibilidad de editarlos y ver como quedan encima de una imagen, también podemos crear nuevos fondos desde cero de las dimensiones que queramos, desde 4×4 píxeles hasta 32×32. Una vez guardado en formato GIF lo podremos importar en Photoshop u otro programa de diseño y usarlo para rellenar zonas grandes.

Fuente | Wwwhat’s new

MeeCSS permite promocionar tu página web y enviarla a más de 100 galerías, donde se exponen los mejores diseños maquetados con CSS. Por si no conocéis este tipo de páginas, algunas de las más famosas son: CSS Beauty, CSS Drive o CSS Vault.

Para proceder con el alta deberemos de marcar las galerías a las que queremos enviar la página pulsando el botón “Submit“, después introducir los datos de la web, nuestros datos personales y finalmente pulsar el botón: “Submit your site“. Hay que aclarar que el proceso no es automatizado, tendremos que ir sitio por sitio rellenando el formulario de envío específico. Aquí tenéis un vídeo donde se explica mejor como se realiza un alta.

Si estáis orgullosos de vuestra página web recien diseñada y queréis promocionarla, MeeCSS es una buena forma de darla a conocer y conseguir visitas extra.

Fuente | Criterion