Compilación masiva de herramientas de diseño
Los diseñadores web tienen una gran cantidad de herramientas disponibles para ellos, para hacer todo, desde organizar sus ideas sobre un diseño en particular hasta depurar el diseño final.
Pero con tantas herramientas, ¿cómo puede determinar cuáles son realmente útiles y cuáles perderán su tiempo?
Hemos compilado una lista masiva de algunas de las mejores y más útiles herramientas para diseñadores web .
Definitivamente quedan fuera de la lista las herramientas comunes que la mayoría de los diseñadores ya están usando (como Dreamweaver o Panic's Coda, Photoshop o GIMP, y programas de software comunes similares que casi todos los diseñadores ya tienen en su kit de herramientas).
Estas son herramientas que le ahorrarán tiempo, le convertirán en un diseñador más efectivo, simplificarán o acelerarán su proceso de diseño, o le harán la vida más fácil.
Compilación de herramientas sin conexión
La mayoría de los rodeos de herramientas de diseño web útiles solo se enfocan en herramientas en línea.
Pero hay algunas herramientas muy útiles que puede utilizar para abrir sus opciones en lo que respecta al diseño. Estas cosas pueden facilitar ciertas tareas, incluso trabajar con clientes indecisos.
Tabletas gráficas
Las tabletas gráficas (también denominadas tabletas de dibujo, almohadillas gráficas o tabletas de digitalización) son una herramienta increíblemente útil en el arsenal de un diseñador web. Si bien la mayoría de los diseñadores pueden dibujar bastante hábilmente con un mouse, una tableta lo hace mucho más fácil y rápido.
La mayoría de las tabletas constan de dos partes básicas: la tableta en sí y la pluma (o stylus). Muchos también vienen con un disco (que funciona de manera similar a un mouse, pero en la tableta en lugar de una alfombrilla de ratón o su escritorio). La consideración principal para la tableta es el tamaño, mientras que la consideración principal de la pluma es la sensibilidad a la presión.
Las tabletas en sí están disponibles en tamaños que van desde aproximadamente 4 "x 5" hasta 19 "x 13". Por supuesto, cuanto más grande sea la tableta, más cara será. En su mayor parte, los diseñadores web pueden salirse con las tabletas en el extremo más pequeño del espectro a menos que planeen hacer un montón de trabajo de ilustración (y aún así es completamente posible obtener resultados de calidad de una tableta de tamaño medio).
Y las tabletas más pequeñas son más portátiles, lo que las hace convenientes para los diseñadores que no siempre quieren estar atados a su escritorio.
Las plumas son sensibles a la presión para proporcionar una experiencia más realista . Las sensibilidades comunes van desde 256 niveles de presión hasta 2.048 niveles. Cuanto mayor sea el nivel de sensibilidad, más se sentirá como si estuvieras usando un lápiz y papel.
Tabletas de gráficos populares
Wacom es probablemente el fabricante de tabletas más popular que existe. Tienen cuatro líneas de productos diferentes: Bamboo (que incluye sus productos Bamboo Craft y Bamboo Fun), dirigido a consumidores y aficionados; Graphire, su tableta Bluetooth; Intuos, su línea de gama media para profesionales creativos; y Cintiq, su línea de gama alta que incorpora un monitor en la tableta para una experiencia de "pluma en pantalla" (una incluso cuenta con una pantalla de 21 ").
Aiptek hace una línea de tabletas de bajo costo que comienzan en solo US $ 50. Ofrecen una tableta USB de 12.1 "por menos de US $ 130 (en comparación con US $ 469 por una tableta Wacom de tamaño comparable). Sin embargo, la oferta más interesante de Aiptek es su My Note Premium (US $ 170) que le permite dibujar en una hoja de papel en la parte superior de la tableta con un bolígrafo real y graba todo lo que hace. Hay suficiente memoria para hasta 100 páginas escritas y viene con una ranura para tarjeta SD para ampliar su capacidad. Y si desea usarlo solo para tomar notas en una reunión, se puede ejecutar con 4 pilas AAA, lo que significa que no tendrá que llevar su computadora portátil consigo.
UC-Logic es el otro fabricante importante de tabletas gráficas. Sus productos caen en el rango medio de precios para tabletas, con una tableta de 9 "x12" (la PF1209-Pro) que llega a alrededor de US $ 250. Tienen tabletas disponibles que comienzan en solo US $ 40.
Placas del estado de ánimo
Los paneles de humor (también llamados paneles de inspiración) son una gran herramienta para los diseñadores que trabajan con clientes que quizás no tengan una idea clara de lo que quieren.
Los paneles de humor a menudo toman la forma de un collage que incluye elementos de diseño para el proyecto. Los ejemplos de elementos incluidos pueden ser muestras de tipografía, combinaciones de colores, ejemplos gráficos específicos o elementos generales de "estado de ánimo" que reflejen la visión del diseñador de la impresión que el sitio debe dar a los visitantes.
Los paneles de humor se usan a menudo en el campo del diseño de interiores para mostrar a los clientes ideas para redecorar una habitación o una casa completa. También se usan en la industria de la moda para servir como inspiración y dirección para una línea o una temporada. Pero son tan valiosos para los diseñadores gráficos y web.
Dependiendo del tipo de cliente con el que esté trabajando, puede crear un collage suelto con muestras superpuestas de forma orgánica . Si su cliente está en un campo creativo o está familiarizado con el proceso creativo, este tipo de tabla de estado de ánimo puede funcionar bastante bien.
Si su cliente, por otro lado, está acostumbrado a un entorno más corporativo o formal, la creación de una tabla de estado de ánimo más organizada es probablemente más adecuada.
Use los encabezados para separar el esquema de color, los elementos de diseño específicos, la tipografía y otras partes de su tabla de estado de ánimo para darle estructura a todo.
Si tiene varias ideas para las direcciones en las que puede ir un proyecto, crear algunas tablas de estado de ánimo diferentes puede ser una excelente manera de obtener comentarios de los clientes y refinar aún más sus propias ideas.
Crear dos o tres ejemplos diferentes para mostrar a un cliente puede ser valioso para obtener más instrucciones de su cliente sin pasar horas o días en una maqueta real del sitio solo para que le digan que no se parece en nada a lo que están buscando.
Y ese es realmente el principal beneficio de usar paneles de estado de ánimo en su proceso de diseño. Una tabla de estado de ánimo generalmente toma mucho menos tiempo para crear que una maqueta del sitio .
El uso de paneles de estado de ánimo para obtener más retroalimentación de un cliente indeciso o inseguro antes de dedicar horas a un diseño que solo será rechazado hace que todos sean más felices.
Recursos para crear tus propios Moodboards
Publicamos un artículo sobre Por qué las tablas de humor son importantes a fines del año pasado. El artículo cubre los aspectos básicos de la creación de tableros de estado de ánimo y por qué querría usarlos. Es un gran punto de partida.
Desde el sofá tiene un video tutorial llamado Creando una Junta de Humor Eficaz . Tiene una duración de alrededor de siete minutos y cubre los aspectos básicos de la creación de un tablero de estado de ánimo digital para proyectos.
Flickr tiene un Tableros de inspiración grupo que recopila imágenes de humor e inspiración de varias disciplinas de diseño. Es un buen lugar para encontrar inspiración o simplemente ver ejemplos de cómo otros se acercan a sus tablas de estado de ánimo.
Compilación de herramientas en línea
Las herramientas de diseño web en línea son una moneda de diez centavos. Al ordenarlos para encontrar los que realmente se destacan, puede parecer que toma más tiempo de lo que podría esperar al usarlos.
Pero a continuación hemos encontrado las mejores herramientas para tipografía, CSS, AJAX y Javascript, selección de color y herramientas para facilitar la creación de elementos de página individuales.
Una vez más, estas son algunas de las mejores herramientas disponibles para lo que hacen, por lo que no tendrá que perder un montón de tiempo probando docenas de herramientas diferentes.
Herramientas de tipografía
Hay una gran cantidad de herramientas en línea para experimentar con la tipografía en los diseños de su sitio web. Algunos le permiten comparar diferentes tipos de letra uno al lado del otro. Algunos solo le permiten muestrear un estilo a la vez. Y aún otros muestran diferentes pilas de fuentes recomendadas.
Otras herramientas de tipografía web útiles incluyen aplicaciones para convertir tamaños de píxeles a unidades em y una variedad de Lorem Ipsum y otros generadores de texto ficticios. En total, existen herramientas de tipografía para casi todas las necesidades posibles que pueda tener un diseñador web.
Typetester
Typetester le permite comparar hasta tres fuentes una al lado de la otra .
Puede seleccionar cualquier fuente desde su propia computadora o usar fuentes de su menú de fuentes comunes del sistema y fuentes seguras para la web. También le permite cambiar el color, el estilo, el seguimiento, el tamaño y otras opciones de estilo.
Es una gran herramienta cuando se trata de decidir qué fuentes usar para diferentes elementos o incluso para compilar sus propias pilas de fuentes (ya que le permite comparar numerosas fuentes una al lado de la otra).
Conjunto de tipos de CSS
CSS Type Set le permite pegar cualquier texto que desee modificar en un cuadro, ajustar los controles deslizantes y elegir otras opciones de formato, y luego copiar el CSS generado.
Es una manera rápida y fácil de formatear cualquier texto que necesite, desde párrafos hasta etiquetas de encabezado.
Las opciones incluyen el color del texto, el avance, el seguimiento, el cambio de línea de base, las decoraciones de texto, la alineación y más.
Mejores pilas de fuentes CSS
Si bien no es una herramienta tradicional, per se, este artículo ofrece una serie de alternativas a las pilas de fuentes estándar generalmente utilizadas en CSS.
Además de ofrecer pautas para crear sus propias pilas de fuentes, este artículo también proporciona una gran variedad de pilas de muestras que puede usar . Un recurso excelente cuando te sientes un poco perplejo por las opciones de tipografía.
HTML-Ipsum
La mayoría de los generadores estándar de Lorem Ipsum en línea le brindan un bloque de texto y nada más. Y eso es genial si solo estás tratando de llenar un poco de espacio.
Pero HTML-Ipsum le da texto que ya ha sido marcado con etiquetas HTML básicas (párrafo, encabezado, listas desordenadas, etc.) para que pueda ver cómo interactúan entre sí los diferentes elementos. Es un ahorro de tiempo enorme.
PXtoEm.com
PXtoEM.com hace exactamente lo que dice: convierte las fuentes de tamaño de píxel en fuentes del tamaño de un em .
Sin embargo, las opciones que le ofrece son lo que la convierten en una herramienta realmente impresionante y flexible.
Puede elegir el tamaño de fuente del cuerpo base y obtener conversiones según el tamaño de fuente predeterminado de su navegador (si, por ejemplo, establece el porcentaje de fuente base en 62.5% para que un tamaño de 10 píxeles sea igual a 1em, puede seleccionarlo como su tamaño predeterminado).
Typechart
Typechart le permite navegar por una variedad de fuentes seguras para la red y ver cómo se verán en los sistemas Windows y Mac .
Puede encontrar fuentes basadas en el tamaño, ya sean serif o sans-serif o énfasis. Solo incluye fuentes seguras para la Web, por lo que las opciones ofrecidas son limitadas. Pero para la tipografía básica, es una gran herramienta que puede proporcionar mucha inspiración.
Y puede copiar y pegar el CSS para cada estilo sin salir de la página.
Volteando Típico
Flipping Typical le permite ver las fuentes comunes que tiene en su computadora en un formato de cuadrícula para facilitar la elección de la fuente correcta para su proyecto actual.
Esta es una gran herramienta cuando no está interesado en simplemente usar las fuentes estándar seguras para la web y desea ver más opciones.
Es especialmente útil si no desea navegar a través de unos pocos cientos de fuentes instaladas en su computadora y solo desea ver las más populares.
Herramientas CSS
CSS es casi tan importante en diseño web como HTML. Y existen cientos de herramientas para hacer que su CSS sea más limpio, más ágil, más efectivo y, en general, mejor, lo que le ahorrará el tiempo y el esfuerzo necesarios para perfeccionar manualmente sus hojas de estilo.
La compresión de sus hojas de estilo, que pueden ayudar a acelerar el tiempo de carga de sus sitios, se simplifica mediante el uso de una herramienta automática en línea. También hay herramientas disponibles para eliminar declaraciones duplicadas.
Las hojas de trucos mantienen los elementos básicos de CSS al alcance de tu mano para cuando el café no se haya despertado completamente por la mañana y te resulta difícil recordar en qué orden debe estar el marcado de taquigrafía.
Si bien la mayoría de estas herramientas hacen un gran trabajo en la limpieza de su CSS, asegúrese de mantener siempre una copia de seguridad de su original y probar el producto final generado. A veces, un limpiador o compresor eliminará algo que era necesario después de todo, rompiendo su sitio.
CSS SuperScrub
CSS SuperScrub tiene como objetivo reducir significativamente la complejidad y el tamaño de sus hojas de estilo .
Elimina las llamadas redundantes, elimina el contenido innecesario y agrupa los elementos restantes para facilitar la edición más adelante.
Hay algunas opciones, incluida una para eliminar todos los espacios en blanco en su hoja de estilos, o para insertar una nueva línea antes de abrir llaves.
Code Beautifier
Code Beautifier optimiza y limpia tus archivos CSS .
Ofrece una gran cantidad de opciones para formatear su texto, incluida la compresión de colores, la clasificación de sus propiedades, la conversión de todos los selectores a minúsculas, la conversión de sus propiedades a mayúsculas o minúsculas, y la elección del nivel de compresión que desea utilizar.
Puede copiar y pegar su CSS en la aplicación o proporcionar una URL para su archivo CSS.
Unidad CSS
CSS Drive es un compresor CSS básico .
Puede establecer qué tan comprimido quiere que sea su CSS (liviano, normal o supercompacto) y cómo desea que maneje los comentarios (si debe eliminarlos).
También hay un modo avanzado que le ofrece muchas más opciones, como quitar espacios alrededor de ciertos caracteres, eliminar pestañas, eliminar nuevas líneas y más.
Comprobador de redundancia de CSS
A veces, en el proceso de diseño de un sitio, puede configurar selectores de CSS que no terminen convirtiéndolo en su marcado final.
Estos selectores no hacen más que hacer que sus hojas de estilo sean más voluminosas y más difíciles de editar más adelante.
CSS Redundancy Checker revisa su hoja de estilos y cada una de sus páginas HTML para ver qué selectores no se están utilizando y luego los elimina .
Es una gran herramienta para usar si crees que podrías tener selectores innecesarios en tus hojas de estilo.
Índice de propiedad de CSS
El índice de propiedades de CSS enumera alfabéticamente cada propiedad de CSS .
Al hacer clic en cualquiera de las propiedades incluidas, obtendrá una definición e información sobre el valor predeterminado, los valores permitidos y si hereda de una propiedad principal.
Guía abreviada de CSS
El uso de propiedades abreviadas de CSS hace que sus archivos CSS sean más pequeños que el uso de propiedades a mano .
Pero recordar en qué orden entran todos los elementos diferentes para todas las diferentes propiedades puede ser un dolor de cabeza, especialmente para aquellos que puede que no uses en todos los diseños que haces.
También incluye información sobre los valores de propiedad predeterminados, por lo que si elige omitir una propiedad sabrá cuál será el valor que será.
Herramientas de color
Elegir los colores adecuados para los diseños de su sitio web puede ser una de las decisiones más importantes que tome en todo el proceso de diseño.
A veces entramos en un diseño con un esquema de color predefinido (como cuando un cliente ya ha establecido colores de marca) o inmediatamente sabemos qué colores queremos usar. En otras ocasiones, podríamos crear nuestra propia paleta para el diseño.
Si está creando un esquema de color desde cero, los generadores de paletas de colores y las galerías pueden ser de gran ayuda.
Si ya tiene una combinación de colores, hay otras consideraciones que debe tener en cuenta, como la accesibilidad y qué colores usar en qué partes del sitio.
Pero también hay herramientas para ayudar con esas decisiones. A continuación se encuentran algunas de las mejores herramientas disponibles para administrar los esquemas de color.
Filtro de página web daltónico
Teniendo en cuenta que en algún lugar entre el 7 y el 10% de la población masculina tiene algún grado de daltonismo (según Wikipedia ), asegurarse de que sus sitios sigan siendo accesibles para esa población no es una mala idea.
Esta herramienta le muestra cómo se verán sus diseños a las personas con diferentes trastornos de daltonismo. Puede ver los resultados de todo su sitio o excluir imágenes del resultado.
También proporcionan un enlace a una herramienta de selección de color segura para el color.
Encuentre colores iguales para su sitio web
Esta herramienta de paleta de colores encuentra colores que se coordinan con cualquier color que seleccione .
Puede elegir un color de sus opciones predefinidas o ingresar cualquier valor de color hexadecimal o RGB para obtener paletas de coordinación basadas en esquemas de color complementarios, de división complementaria, tríada, tetrade, analógica o monótona.
Sin embargo, los colores proporcionados son similares en intensidad, lo que significa que este es realmente solo un punto de partida para crear paletas de colores para sus diseños.
Generador de paleta de colores
Las fotos son excelentes lugares para buscar inspiración en el diseño. Esta herramienta puede crear una paleta de colores a partir de cualquier imagen que elijas (solo ingresa la URL de la imagen).
Proporciona esquemas de color apagados y vibrantes basados en la imagen que proporciona.
Poder usar cualquier imagen en línea realmente hace que esta herramienta sea valiosa, ya que ahorra tiempo de tener que descargar una imagen y luego volver a cargarla en un sitio como este para generar un esquema de color (o descargarla y luego abrirla en un programa de gráficos para crearla manualmente una paleta de colores).
Kuler
La galería de paletas de colores Kuler de Adobe es una de las mejores galerías de paletas de colores que existen.
Puede explorar o buscar más de 10.000 paletas de colores enviadas por los usuarios de Kuler y luego descargar o guardar sus favoritos para consultarlos en el futuro.
Kuler también incluye una poderosa herramienta de creación de paletas que le permite seleccionar colores con controles deslizantes o basados en valores de color HSV, RGB, CMYK, LAB o hexadecimal.
Establecer cualquier color como el color base cambiará los colores circundantes para complementar.
COLOURlovers
COLOURlovers es otra gran galería de combinaciones de colores .
Puede buscar más de 800,000 combinaciones de colores (en base a 20 esquemas por página y 43.200 páginas de esquemas). Además de las paletas, también puede buscar colores y patrones individuales según las paletas.
Sin embargo, una de las características más útiles de COLOURlovers es su herramienta de creación de patrones, que hace que cree sus propios patrones en función de un esquema de color predefinido o uno que cree sobre la marcha.
Solo asegúrese de ponerse en contacto con el propietario de los derechos de autor del patrón si desea utilizar uno para el trabajo comercial.
100 colores aleatorios 2.0
Si realmente no tiene idea de dónde comenzar con el esquema de color de uno de sus diseños, 100 Random Colors 2.0 podría ser la herramienta adecuada.
Hace exactamente lo que dice su nombre: le presenta 100 colores aleatorios, incluidos sus valores hexadecimales .
¡Y si no encuentras nada en los primeros 100, puedes presionar Actualizar y recibir un juego completamente nuevo!
Herramientas de elementos individuales
Hay muchos generadores que hacen que crear botones, fondos, formularios y otros elementos de diseño para sus sitios sea rápido y fácil.
Algunos de ellos son simplemente trucos, pero otros son de gran ayuda si solo quieres crear rápidamente algo así como un botón Web 2.0-ish o un fondo de rayas básico.
Las herramientas de creación de formularios también pueden ser útiles, especialmente si desea que sus clientes puedan hacer algunos de sus propios trabajos de administración en sus formularios.
Conozco al menos un par de diseñadores que usan estas herramientas para que no tengan que crear una interfaz personalizada y simplificada para acceder a la base de datos de formularios o para editar formularios para sus clientes. Son un gran ahorro de tiempo, especialmente para construir formas más complicadas.
Wufoo
Wufoo es un generador de formularios HTML que ofrece más de 80 plantillas de formularios y combinaciones de colores, al mismo tiempo que le permite un control total para crear formularios personalizados para sus clientes.
Las plantillas hacen que sea más rápido y fácil crear formularios web estándar (como páginas de registro o formularios de contacto).
Los formularios enviados se recopilan automáticamente en una base de datos que facilita a sus clientes la impresión, el envío por correo electrónico de entradas individuales, el filtro, la búsqueda y otras funciones avanzadas sin la necesidad de crear una interfaz personalizada.
Incluso puede usar Wufoo para crear formularios de pedido en línea e integrarlo con Authorize.net, PayPal o Google Checkout.
BgPatterns
BgPatterns le permite crear patrones de mosaico utilizando una amplia variedad de diferentes elementos repetitivos.
Puede seleccionar el color de fondo, la textura del lienzo y el ángulo del patrón. Puede aplicar los fondos que cree en el sitio BgPatterns para obtener una vista previa, y luego descargar la imagen una vez que la haya finalizado.
También puede explorar patrones creados por otros. Es la manera más rápida y fácil de crear fondos sencillos y en mosaico.
Stripe Generator 2.0
Crear bandas repetitivas para un sitio web lleva mucho tiempo.
Claro, puede crear plantillas para líneas comunes que podría usar, pero ¿qué sucede si quiere una franja de alfiler para un proyecto, una franja ancha para otra, y una en un ángulo impar para otra? Pronto esas plantillas simplemente no parecen cortar más.
El Stripe Generator 2.0 ofrece rayas en una variedad de ángulos , en cualquier ancho que elijas, con o sin sombras y degradados , y usando cualquier color hexadecimal que desees.
También incluyen una galería de rayas donde puedes ver lo que otros han construido.
Tartan Maker
Si la creación de fondos a rayas consume mucho tiempo, la creación de fondos a cuadros es un gran dolor de cabeza.
Ahí es donde entra Tartan Maker. Selecciona el tamaño del hilo, los colores para tu patrón y el ángulo y lo crea automáticamente.
Puede obtener una vista previa de sus diseños a pantalla completa y luego descargar el archivo.
Dotter de fondo de Pixelknete
Este generador de fondo crea un fondo punteado moderno con puntos progresivamente más pequeños a medida que se mueven hacia abajo en la página.
Puede seleccionar hasta dos colores de puntos y dos colores para un fondo de degradado (o solo un color para un fondo sólido).
También puede especificar la altura del patrón (el valor predeterminado es 700 píxeles). El fondo creado se repite en un eje horizontal.
Como generador de botones
Si ignora el texto mal traducido en esta página, verá que este es uno de los generadores de botones más suaves disponibles . Agregue texto, diferentes degradados, rayas, imágenes y más a sus botones.
Puede seleccionar el botón y los colores del borde, el tamaño general (utilizando controles deslizantes o campos de texto) y el grosor del borde, y cuán redondeado es el botón.
Si incluye rayas, tiene muchas opciones, como el color, la transparencia, el grosor, el espacio entre las rayas y el ángulo.
Este es definitivamente el generador de botones más completo que existe.
Button Maker
Este generador de botones le permite crear fácilmente botones de dos tonos de 80 × 15 píxeles .
Seleccione los colores del botón, los colores del borde, donde debe estar la división entre los cuadros, e ingrese el texto para cada lado, y eso es todo!
Esta es una de esas herramientas que no está cargada de características, pero que hace lo que fue diseñado para hacer de manera perfecta y sin problemas.
Herramientas de AJAX y JavaScript
Todos sabemos que Ajax puede agregar un montón de funcionalidades a su sitio. Si desea agregar una galería de imágenes simple, un formulario de contacto interactivo o crear una aplicación web completa , Ajax está ahí para ayudarlo.
Pero comenzar de cero puede ser desalentador, especialmente si eres relativamente nuevo en Ajax. E incluso si se considera un profesional, puede tomar mucho tiempo comenzar con una lista en blanco para cada uno de sus proyectos.
Hay muchas herramientas para acelerar su desarrollo de Ajax. Desde colecciones de scripts hasta frameworks y generadores de elementos específicos, es probable que haya algo disponible en las herramientas a continuación que lo haga un desarrollador más eficiente.
Ajaxload
Ajaxload es un generador para crear iconos de cargador Ajax . Hay una gran cantidad de iconos diferentes para elegir.
Todo lo que tiene que hacer es establecer los colores de fondo y primer plano (o elegir un fondo transparente) y luego simplemente descargar el script generado.
¡Rápido y fácil pero te ahorra unos minutos (o más) de codificación!
Mini AJAX
Mini Ajax es una galería de scripts descargables de Ajax y DHTML .
Incluye todo, desde ventanas modales hasta pases de diapositivas y guiones más avanzados (como calendarios y herramientas completas de administración de proyectos).
Es un gran punto de partida para encontrar elementos Ajax individuales o incluso para obtener algo de inspiración.
Hay demos disponibles para muchos de los scripts y todos ellos se pueden descargar de sus fuentes originales.
MooTools
MooTools es un marco de JavaScript orientado a objetos . Definitivamente no está diseñado para principiantes, pero puede permitirle escribir aplicaciones Ajax flexibles y potentes compatibles con todos los navegadores.
También cumple con los estándares y está increíblemente bien documentado.
Además del generador de núcleos, también hay una gran cantidad de complementos disponibles. MooTools se puede utilizar para crear todo, desde simples galerías de imágenes hasta interfaces de usuario completas.
jQuery
jQuery es una biblioteca de JavaScript que simplifica una variedad de funciones de JavaScript .
Sin embargo, una de las mejores partes de esta herramienta en particular es la cantidad de complementos ya disponibles para jQuery.
Hay complementos ya listos para todo, desde simples animaciones hasta formularios, widgets y elementos avanzados de la interfaz de usuario.
Probablemente ya haya un complemento hecho para casi cualquier cosa que desee hacer con JavaScript o Ajax, o al menos uno para usar como base para crear el suyo.
Script.aculo.us
Script.aculo.us es una biblioteca de interfaz de usuario de JavaScript que incluye un marco de animación, controles Ajax, utilidades DOM y más .
Es utilizado por Apple, CNN, Basecamp y Ruby on Rails. Está construido sobre el prototipo de marco.
Hay una amplia documentación disponible en la wiki de Script.aculo.us, que facilita el inicio.
Herramienta de compresión de JavaScript en línea
Comprimir tus archivos de JavaScript los hace cargar más rápido, consumir menos ancho de banda y ocupar menos espacio en tu servidor. Esta herramienta hace que la compresión sea más fácil.
Simplemente copie y pegue sus archivos JS (o cárguelos) en esta herramienta y luego seleccione si desea comprimir usando Minify o Packer.
Automáticamente escupe un código más limpio y eficiente. Solo asegúrese de probar exhaustivamente los resultados y siempre mantenga una copia de seguridad de su archivo original.
Embellecedor de JavaScript
Si su JavaScript es un poco más desordenado de lo que quisiera (o casi imposible de descifrar porque está mal formateado), ejecútelo a través de este embellecedor para obtener secuencias de comandos ordenadas, limpias y consistentemente formales que sean más fáciles de leer y editar más adelante .
La configuración utilizada es mínima, pero puede elegir cuántos espacios usar para sangrías, si detectar empacadores y si se deben preservar los saltos de línea.
De nuevo, asegúrese de probar el código final y tener a mano una copia de seguridad en caso de problemas en su código recientemente embellecido.
BrowserShots
Lamentablemente, diferentes navegadores presentan sitios de maneras ligeramente diferentes. Esto puede ser un gran dolor de cabeza, especialmente si sus clientes están usando un navegador y está usando uno completamente diferente.
Si están viendo cosas que no se muestran en su extremo (o viceversa), pueden crear problemas en ambos lados.
Siempre puedes instalar múltiples navegadores en tu computadora, pero a) eso es una pérdida de espacio en el disco yb) ¿qué pasa con los navegadores que no están disponibles para tu sistema operativo? Ahí es donde BrowserShots viene en.
Puede elegir entre prácticamente todos los principales navegadores existentes, incluidos navegadores poco conocidos como Minefield y Epiphany.
BrowserShots le muestra capturas de pantalla de solo los navegadores que ha elegido ver , para que pueda elegir tantos como desee.
Solo recuerda que cuantos más navegadores elijas probar, más tiempo tomará. Sin embargo, por la forma en que se configura BrowserShots, puede marcar la página y regresar más tarde para ver los resultados.
Firebug
Ninguna lista de herramientas de diseño web estaría completa sin mencionar el complemento Firebug Firefox .
A menudo considerada como la herramienta más valiosa en el arsenal de un diseñador , Firebug hace que la depuración y edición de su código (ya sea JavaScript, CSS o HTML) sea infinitamente más fácil.
Puede modificar su CSS directamente en su navegador. Visualice la alineación de sus cuadros de CSS. Edite cualquier elemento en su página directamente en su navegador.
Depure su JavaScript y encuentre errores más rápido. Y eso es solo arañar la superficie de lo que Firebug puede hacer.
Realmente es una herramienta imprescindible para todos los diseñadores que hay. Una vez que lo use, se preguntará cómo alguna vez diseñó sin él.
Compilado exclusivamente para WDD por Cameron Chapman.
¿Qué herramientas usas más? ¿Qué otras herramientas usas que nos hayamos perdido?