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.
No hay comentarios:
Publicar un comentario