sábado, 12 de noviembre de 2011

SITIOS WEB UTILES PARA DISEÑADORES Y DESARROLLADORES WEB

Estimados lectores por estos últimos días tenía un proyecto web el cual abarcaba el poco tiempo que tenía, pero al fin de cuentas pude concluirlo e investigar un poco más, la presente información es un resumen de lo que me ayudó mucho y espero que a ustedes les pueda servir. 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 te ayudará a encontrar la entidad html apropiada para ese símbolo que quieres incluir en tu diseño.

Sitio donde puedes generar el famoso texto “Lorem Ipsum” para poner textos de prueba en tus diseños.

WhatTheFont! te permite conocer la fuente que se utiliza en una imagen dada.

Sitio que te permite codificar el HTML para poder mostrar código en tus artículos y diseños.

Este sitio te permite probar dos o tres fuentes diferentes, con diferentes especificaciones.

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 te permite incluir cualquiera de las fuentes de su directorio en tu página web.

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 es un generador de textos, estilo Lorem Ipsum, pero basado en el Quijote de la Mancha de Miguel Cervantes.

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

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.

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.

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 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.

Este es un set de componentes (botones, iconos, popups, etc) utilizados en conjunto con jQuery para crear interfaces utilizando muy pocos recursos.

Con este sitio web puedes encontrar frameworks de Javascript de bajo peso.

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 es una herramienta online que te facilita la tarea de crear formularios en HTML.

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 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 es una galería de pequeños fragmentos de código útiles para HTML5 y CSS3.

Esta es una herramienta para generar fácilmente formularios o encuestas en HTML.

Este sitio genera automáticamente las etiquetas HTML con el texto de prueba “Lorem Ipsum“.

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

Esta es una herramienta online que nos permite optimizar al máximo nuestra imágenes para la Web.

vintageJS es una aplicación online par añadirle efectos retro a nuestras imágenes.

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.

Con esta herramienta podrás hacer que tus imágenes se vean con bordes redondeados.

Este es un generador de imágenes de prueba de cualquier tamaño y con el texto que queramos que tenga la imagen.

tinySrc es un servicio para redimensionar imágenes para dispositivos móviles, dependiendo del dispositivo usado y del tamaño de la pantalla.

Favigen es una web que te permitirá generar a partir de una imagen el favicon.ico de tu página web.

Este es un sitio que recolecta iconos de señales y símbolos para descargar gratuitamente.
Diseño

ColorCombos es una herramienta online que te permite encontrar varias paletas de colores para tus diseños.

Este sitio es una herramienta online que permite generar un patrón para el fondo de tus diseños.

0to255 es un sitio donde puedes ver las variaciones de color, del mas oscuro al más claro, de cualquier color que ingreses.

COLOURlovers es un sitio web donde puedes encontrar y compartir todo lo relacionado con colores, patrones, imágenes, etc.

Swatch Spot es un servicio que permite generar paletas de colores aleatoriamente.

Este sitio genera una imagen de barras diagonales para poner como patrón en el fondo de tu diseño.

Esta es una web que te facilitará la creación de wireframes, prototipos de la estructura básica de un sitio web.

Subtle Patterns es un sitio donde puedes descargar varios patrones de alta calidad para tus diseños.
CSS

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.

Este sitio te facilita la tarea de generar el CSS necesario para poner una imagen sprite en nuestros diseños web.

En este sitio web puedes crear varios degradados y te da el código CSS3 necesario para incluirlo en tu diseño.

Este sitio te ofrece el CSS3 necesario para recrear casi con exactitud los botones utilizados en Facebook para tus proyectos.

CSS3 Patterns nos ofrece varios patrones disponibles en CSS3 para utilizar en los navegadores modernos.

Esta aplicación nos permite crear efectos de css3 y copiarlos fácilmente para nuestra página web.

Este sitio te permite convertir pixéles a Ems y de Ems a pixéles.

CSS3.0 Maker es un generador de código CSS3 online y nos permite saber que navegadores son compatibles con cada funcionalidad.

Este sitio te facilita un generador de sombras para cajas en código CSS3. Son bastantes las opciones con este generador de sombras.

Esta herramienta online genera botones haciendo uso de CSS3, sin necesitar alguna imagen.

Este sitio te provee todas las herramientas para poder generar efectos CSS3 y te da el código.

En este sitio podrás generar degradados para tus diseños utilizando CSS3.

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 comprime tu código CSS ayudándote a ganar velocidad en tu proyecto web.

Sitio web que te permite calcular los valores Ems de un tamaño dado en pixéles.

Este sitio es un servicio online para optimizar código o archivos CSS.

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.

Con ProCSSor podrás darle formato tu código CSS, para verlo más organizado.

Este aplicación web te permite generar código CSS como si lo estuvieras haciendo desde Photoshop.

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.

Este sitio web  nos presenta un cuadro informativo, bastante completo sobre lo nuevo que trae el estándar CSS3.
Varios

Con este servicio en línea podrás pasar completamente un a página web a formato PDF y descargar el resultado.

Con esta aplicación web podrás crear fácilmente el archivo .htaccess necesario para configurar tu servidor.

Este sitio web te permite probar varias cosas con tu página web con el pack de herramientas que se ofrecen.

Load Impact es un servicio gratuito que te permite evaluar cuantos usuarios simultáneos puede soportar tu página web.

Con esta herramienta de Google, podrás conocer sugerencias para que tu sitio web cargue más rápido.

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.

Con este sitio puedes redimensionar tu pantalla para que se adecue al tamaño deseado. Muy útil para probar resoluciones en dispositivos móviles.

Este sitio te permitirá ver como se ve tu página web en todos los navegadores posibles.

Con este sitio podrás imprimir páginas web fácilmente, pues formateará el contenido del blog para que solo salga lo realmente necesario.

Esta es una herramienta con la que puedes probar si las reglas de tu archivo .htaccess están bien o no.

Con Syntaclet podrás hacer que el código fuente se vea más organizado y más legible.