Después de unos meses retomamos de nuevo el blog, que estaba un poco abandonado. Y lo hacemos con la continuación de una serie de artículos (aquí y aquí) sobre aplicaciones y webs que nos facilitan el trabajo como desarrolladores. A modo de apéndice vamos a listar aquí una serie de páginas web en las que podemos obtener una valiosa ayuda para realizar nuestro trabajo.

Formas en CSS.

Desde las formas geométricas básicas (círculos, triángulos, estrellas… hasta una lupa, un ribete o incluso un Pac-Man. Muy útil para algunos diseños un tanto complejos. Lo puedes encontrar en este enlace.

Iconos.

Pueden ser usados directamente (hay un enlace de descarga que permite usarlos como si fueran una fuente tipográfica) o bien pueden ser tomados como inspiración. Una completa galería de iconos de todo tipo, totalmente adaptados para las características del CSS (colores, sombras…), escalables, sencillos y precisos: Font Awesome.

Flechas

Otro amplio catálogo, esta vez de flechas, con sus respectivos códigos para ser usadas en HTML. Por ejemplo:

← ↗ ↛ ↜ ↪ ↳ ↺ ⇎ ⇜ ⇡ ⇪ ➠ ➳ ➽ ⤸ ⤵ ➻ ➶ ⇫ ⇊ ⇀ ↶ ↨

Lo encontrarás aquí.

Redondear bordes

A veces queremos que las esquinas de nuestros diseños tengan un suave (o no tan suave) redondeo. Es fácil hacer esto con CSS, pero si queremos que no todas las esquinas tengan el mismo redondeo y además que la fórmula valga para todos los navegadores es algo más complicado. Esta página nos lo pone mucho más fácil, basta con rellenar los cuadrados de las esquinas con la curvatura deseada y obtendremos el código CSS. Por ejemplo, si quisiéramos que la esquina superior izquierda tenga un redondeo de 5px, la superior derecha de 10px, la inferior izquierda de 23px y la inferior derecha de 15px la cosa quedaría así:
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 23px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 23px;
border-top-left-radius: 5px;
border-top-right-radius: 10px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 23px;


En border-radius.com.

Generar favicon.ico.

Para generar la imagen que aparecerá en la pestaña de nuestra página en los navegadores. Esta página (http://www.favicon.cc/) permite dibujarlo sobre una cuadrícula, mientras que esta otra (http://www.genfavicon.com/es/) permite subir una imagen y usarla como favicon.

Fondos

Si no tenemos tiempo para crear un fondo nosotros mismos en esta página encontramos un buen número de fondos elegantes que podemos usar y modificar: http://subtlepatterns.com/ Como curiosidad, aquí tenemos una web que nos permite crear y descargar un estampado escocés para utilizar como fondo: http://www.tartanmaker.com/

Lorem Ipsum

Un generador de texto para rellenar mientras el cliente se decide a generar algún contenido para su página. A alguno habrá que explicarle después que ese texto no va a ir realmente en su página, que es algo temporal 😉 Aquí un generador: http://es.lipsum.com/
Y para los más cachondos, el Chiquito Ipsum (¡Jarl!) que generará automáticamente varias líneas de texto como estas:
Lorem fistrum se calle ustée quietooor no puedor condemor no te digo trigo por no llamarte Rodrigor tiene musho peligro la caidita caballo blanco caballo negroorl fistro por la gloria de mi madre. Por la gloria de mi madre torpedo amatomaa benemeritaar. Pecador hasta luego Lucas hasta luego Lucas va usté muy cargadoo sexuarl está la cosa muy malar benemeritaar a gramenawer. Mamaar diodeno no te digo trigo por no llamarte Rodrigor torpedo. Tiene musho peligro mamaar ese pedazo de me cago en tus muelas fistro pecador.