Cada día Internet se convierte en el día a día de muchas personas, sobre todo para los desarrolladores y diseñadores web, que deben buscar funciones, recursos y todo lo necesario para que trabajar sea un poco más fácil.
Así mismo en Internet existen una gran cantidad de blogs sobre diseño y desarrollo web, pero también existen sitios web que únicamente sirven a una función en específica de diseño o desarrollo. Es por eso que para facilidad de todos, he recopilado 74 sitios web útiles para desarrolladores y diseñadores web, herramientas que aumentarán tu productividad y facilitarán tu trabajo o proyecto.
Para hacer más cómoda la lectura de este artículo, lo he dividido en varias sub categorías, así:
Tipografía
CopyPasteCharacter
CopyPasteCharacter te ayudará a encontrar la entidad html apropiada para ese símbolo que quieres incluir en tu diseño.
Lipsum Generator
Sitio donde puedes generar el famoso texto “Lorem Ipsum” para poner textos de prueba en tus diseños.
WhatTheFont!
WhatTheFont! te permite conocer la fuente que se utiliza en una imagen dada.
HTML Encoder
Sitio que te permite codificar el HTML para poder mostrar código en tus artículos y diseños.
Typetester
Este sitio te permite probar dos o tres fuentes diferentes, con diferentes especificaciones.
Nice Entity
Con Nice Entity puedes encontrar varios símbolos y formas con su respectiva entidad HTML para que los puedas incluir en tus diseños.
Google Web Fonts
Google Web Fonts te permite incluir cualquiera de las fuentes de su directorio en tu página web.
FFFFALLBACK
Con este sitio podrás configurar tu navegador para probar los tipos de fuente y fuentes de reserva en cualquier sitio web que desees.
Quijotipsum
Quijotipsum es un generador de textos, estilo Lorem Ipsum, pero basado en el Quijote de la Mancha de Miguel Cervantes.
Font comparer
Font comparer te permite comparar las fuentes de Google Web Font y de Typekit, para elegir la que más se adecue a tu diseño.
Javascript
ScriptSrc
En este sitio puedes encontrar las librerías Javascript más usadas y copiar fácilmente las etiquetas para incluir esa librería en tu página.
Google Libraries API
En este sitio, manejado por Google, se encuentran los scripts de Javascript más utilizados, que pueden incluirse mediante un sistema de CDN en tu página web.
Cdn JS
Con Cdn JS, tienes también varios scripts alojados en una CDN, como en Google Libraries API, con la diferencia que aquí se alojan otros javascripts diferentes.
Modernizr
Modernizr ofrece la posibilidad de detectar el soporte del navegador de las etiquetas HTML5 y añade algunas funcionalidades de CSS3 y HTML5 a Internet Explorer.
Ninja UI
Este es un set de componentes (botones, iconos, popups, etc) utilizados en conjunto con jQuery para crear interfaces utilizando muy pocos recursos.
Microjs
Con este sitio web puedes encontrar frameworks de Javascript de bajo peso.
jsFiddle
Con este sitio web puedes probar varios frameworks de Javascript con su respectivo código HTML, CSS y funciones de Javascript. También útil para compartir código.
HTML
pForm
pForm es una herramienta online que te facilita la tarea de crear formularios en HTML.
XHTML/CSS Markup Generator
Esta es una herramienta que facilita la creación de archivos XHTML y CSS, escribiendo simplemente las clases y los ids de la estructura principal del diseño.
HTML5 Boilerplate
HTML5 Boilerplate es un conjunto de plantillas de HTML5/CSS/JS para empezar a modernizar los sitios web con los nuevos estándares. Además posee muy buenos tips para mejorar la velocidad y capacidad de los servidores web.
HTML5 Snippets
HTML5 Snippets es una galería de pequeños fragmentos de código útiles para HTML5 y CSS3.
HTML Form
Esta es una herramienta para generar fácilmente formularios o encuestas en HTML.
HTML Ipsum
Este sitio genera automáticamente las etiquetas HTML con el texto de prueba “Lorem Ipsum“.
HTML Instant
HTML Instant es un editor online de código HTML. Mientras escribes código en el panel izquierdo ves el resultado en el panel derecho.
Imágenes
Smush.it
Esta es una herramienta online que nos permite optimizar al máximo nuestra imágenes para la Web.
vintageJS
vintageJS es una aplicación online par añadirle efectos retro a nuestras imágenes.
lorempixum
lorempixum es un generador de imágenes de prueba. Se pude configurar el tamaño, tipo de imagen y si es a color o en escala de grises.
RoundPic
Con esta herramienta podrás hacer que tus imágenes se vean con bordes redondeados.
Dummy Image
Este es un generador de imágenes de prueba de cualquier tamaño y con el texto que queramos que tenga la imagen.
tinySrc
tinySrc es un servicio para redimensionar imágenes para dispositivos móviles, dependiendo del dispositivo usado y del tamaño de la pantalla.
Favigen
Favigen es una web que te permitirá generar a partir de una imagen el favicon.ico de tu página web.
The Noun Project
Este es un sitio que recolecta iconos de señales y símbolos para descargar gratuitamente.
Diseño
ColorCombos
ColorCombos es una herramienta online que te permite encontrar varias paletas de colores para tus diseños.
BgPatterns
Este sitio es una herramienta online que permite generar un patrón para el fondo de tus diseños.
0to255
0to255 es un sitio donde puedes ver las variaciones de color, del mas oscuro al más claro, de cualquier color que ingreses.
COLOURlovers
COLOURlovers es un sitio web donde puedes encontrar y compartir todo lo relacionado con colores, patrones, imágenes, etc.
Swatch Spot
Swatch Spot es un servicio que permite generar paletas de colores aleatoriamente.
Stripe Generator
Este sitio genera una imagen de barras diagonales para poner como patrón en el fondo de tu diseño.
GridPapr
Esta es una web que te facilitará la creación de wireframes, prototipos de la estructura básica de un sitio web.
Subtle Patterns
Subtle Patterns es un sitio donde puedes descargar varios patrones de alta calidad para tus diseños.
CSS
EmChart
Sitio web para convertir el tamaño de los elementos de pixéles a Ems.
CSS Compressor es una herramienta en línea que te permite comprimir un archivo CSS.
Generador de Sprite CSS
Este sitio te facilita la tarea de generar el CSS necesario para poner una imagen sprite en nuestros diseños web.
CSS Gradient Generator
En este sitio web puedes crear varios degradados y te da el código CSS3 necesario para incluirlo en tu diseño.
CSS3 Facebook Buttons
Este sitio te ofrece el CSS3 necesario para recrear casi con exactitud los botones utilizados en Facebook para tus proyectos.
CSS3 Patterns
CSS3 Patterns nos ofrece varios patrones disponibles en CSS3 para utilizar en los navegadores modernos.
CSS3.me
Esta aplicación nos permite crear efectos de css3 y copiarlos fácilmente para nuestra página web.
PXtoEM
Este sitio te permite convertir pixéles a Ems y de Ems a pixéles.
CSS3.0 Maker
CSS3.0 Maker es un generador de código CSS3 online y nos permite saber que navegadores son compatibles con cada funcionalidad.
CSS3 drop shadow generator
Este sitio te facilita un generador de sombras para cajas en código CSS3. Son bastantes las opciones con este generador de sombras.
CSS3 Button Maker
Esta herramienta online genera botones haciendo uso de CSS3, sin necesitar alguna imagen.
CSS3 Generator
Este sitio te provee todas las herramientas para poder generar efectos CSS3 y te da el código.
CSS3 Gradient Generator
En este sitio podrás generar degradados para tus diseños utilizando CSS3.
CSS3 Please!
Con este sitio podrás aprender con bastante claridad las nuevas reglas del CSS3. También puedes modificar el código donde gustes.
Clean CSS
Clean CSS comprime tu código CSS ayudándote a ganar velocidad en tu proyecto web.
Em Calculator
Sitio web que te permite calcular los valores Ems de un tamaño dado en pixéles.
CSS Optimiser
Este sitio es un servicio online para optimizar código o archivos CSS.
CSS Compressor
CSS Compressor es una herramienta en línea que comprime el código CSS.
Sitio web donde puedes generar un patrón en CSS pixel por pixel.
ProCSSor
Con ProCSSor podrás darle formato tu código CSS, para verlo más organizado.
Layer Styles
Este aplicación web te permite generar código CSS como si lo estuvieras haciendo desde Photoshop.
CSS3 buttons
En este sitio se muestran varios iconos hechos con CSS3 y te ofrece el código necesario para que logres ponerlo en tus diseños.
CSS3 Click Chart
Este sitio web nos presenta un cuadro informativo, bastante completo sobre lo nuevo que trae el estándar CSS3.
Varios
Web to PDF Converter
Con este servicio en línea podrás pasar completamente un a página web a formato PDF y descargar el resultado.
.htaccess Editor
Con esta aplicación web podrás crear fácilmente el archivo .htaccess necesario para configurar tu servidor.
test everything!
Este sitio web te permite probar varias cosas con tu página web con el pack de herramientas que se ofrecen.
Load Impact
Load Impact es un servicio gratuito que te permite evaluar cuantos usuarios simultáneos puede soportar tu página web.
Page Speed Online
Con esta herramienta de Google, podrás conocer sugerencias para que tu sitio web cargue más rápido.
Zbugs
Con Zbugs podrás conocer cuales son los archivos que debes optimizar para mejorar la velocidad de la página web. Además te ofrecen los archivos ya comprimidos para descargar.
resizeMyBrowser
Con este sitio puedes redimensionar tu pantalla para que se adecue al tamaño deseado. Muy útil para probar resoluciones en dispositivos móviles.
Browsershots
Este sitio te permitirá ver como se ve tu página web en todos los navegadores posibles.
Print Friendly
Con este sitio podrás imprimir páginas web fácilmente, pues formateará el contenido del blog para que solo salga lo realmente necesario.
htaccess tester
Esta es una herramienta con la que puedes probar si las reglas de tu archivo .htaccess están bien o no.
Syntaclet
Con Syntaclet podrás hacer que el código fuente se vea más organizado y más legible.