El desarrollo web ahora es más complejo de lo que imaginamos. Los usuarios buscan sitios web interactivos, que carguen rápidamente, donde sea sencillo navegar y donde puedan encontrar información rápidamente. Adicionalmente, los usuarios acceden desde diversos dispositivos, desde ordenadores a teléfonos móviles y en cada uno de estos dispositivos, los usuarios esperan una misma experiencia y las mismas cualidades, es decir, que el sitio se cargue rápidamente y sea igual de interactivo en todas sus posibles versiones para distintos dispositivos. Ahora que los móviles también son un factor que se debe tener en cuenta en esta ecuación, la situación parece más complicada de lo que imaginamos. Debemos verificar que nuestro código sea limpio y ligera y se pueda visualizar no sólo en diversos navegadores sino también en varios dispositivos. Por suerte, existen una serie de herramientas de gran utilidad para los desarrolladores, de modo que ciertas tareas se pueden simplificar. Aquí te mencionamos algunas de esas herramientas, esperamos que alguna de ellas sea una gran adición a tu próximo proyecto web.
Selección de tipografías
Al igual que los colores, la selección de tipografías también es una tarea que conlleva tiempo. En ocasiones tienes que visitar diversas librerías para poder hallar la fuente adecuada y debes verificar el tipo de licencia de la fuente según el proyecto que realices. Para hacer esta tarea más sencilla, te ofrecemos una serie de útiles recursos:
Font Pair
Combinar tipografías es una tarea que requiere tiempo pues debes buscar no sólo entre tu librería de fuentes, sino muchas veces buscar entre diversas librerías de fuentes hasta encontrar las tipografías adecuadas.
Con Font Pair esta tarea se hace más sencilla pues te ofrece una serie de sugerencias de tipografías que puedes usar en dúo. Todas las tipografías se pueden encontrar en Google Fonts, de modo que puedes incluirlas en tus proyectos web sin problemas.
Font Awesome
Font Awesome es una de las más populares y completas librerías de iconos vectoriales que existen. Ya que está hecho en base a vectores se pueden escalar fácilmente y no sólo eso, haciendo uso de CSS y HTML puedes modificar el color, el tamaño, las sombras, etc.
Actualmente, Font Awesome cuenta con 585 iconos gratuitos, es totalmente gratuita y se puede usar fácilmente en cualquier proyecto web.
Type Genius
Al igual que Font Pair, Type Genius es una librería que se especializa en la combinación de tipografías. Sólo debes elegir la fuente base para revisar un listado de las mejores fuentes que combinan con la tipografía que has elegido. Podría ahorrarte mucho tiempo en la revisión de librerías de fuentes, pues reduces un poco el número de fuentes entre las cuales elegir.
Tiff
Esta herramienta en línea te permite comparar las diferencias entre dos fuentes de la librería de Google Fonts. Funciona de manera bastante gráfica pues superpone la misma letra de ambas fuentes en diferentes opacidades, de modo que puedes notar el largo y el grosor del bastón, el tamaño del ojo, etc. Puede ser de utilidad si estás buscando combinar fuentes.
Wordmark
Esta herramienta es de gran utilidad al momento de elegir fuentes para un proyecto. Si tenemos una gran cantidad de fuentes instaladas, buscar la más adecuada puede convertirse en una tarea compleja. Con Wordmark esta tarea se simplifica pues te permite visualizar todas las fuentes que tienes instaladas en el sistema. Lo único que debes hacer es ingresar una palabra y pinchar sobre el botón para cargar una muestra de cómo luce esa palabra en todas las fuentes que has instalado.
Esta extensión para Firefox te permite identificar las fuentes de cualquier página web. Si se han empleado varias, las ordena por color y tamaño. Con esta útil extensión puedes tener acceso al nombre de la fuente, el tamaño, el estilo, las variantes de fuentes, la sombra, el espaciado, etc.
Realmente útil para poder identificar fuentes que encuentras en otros sitios web y que deseas usar en tus propios proyectos a futuro.
Selección de colores
Elegir y combinar colores no es una tarea sencilla. Mientras más colores tenga nuestra paleta, más compleja se vuelve la tarea de tener una combinación armoniosa. Además, tenemos que tener en cuenta detalles como el contraste y la saturación para que los colores de las tipografías puedan ser legibles y los colores de fondo no compitan con las imágenes de nuestro sitio web o aplicación.
Por suerte, existen diversas herramientas que puedes usar para hacer esta tarea más sencilla, te mencionamos algunas de ellas:
Hail Pixel
Hail Pixel nos trae una manera más divertida y dinámica de elegir colores. El color va cambiando mientras movemos el cursor por la pantalla. Como referencia podemos ver el código HEX de cada color que elegimos. Para grabar un color debemos simplemente pinchar con el ratón sobre la pantalla y esta se dividirá para que podamos elegir un nuevo color.
También, una ves que hayamos elegido un color podemos modificar sus valor RGB y HSL, así como eliminar el color de manera bastante sencilla. Puede llegar a ser bastante divertido elegir colores mediante esta herramienta.
Color Thief
Muchas veces sucede que vemos alguna fotografía donde hay un excelente manejo de colores. No sólo la perspectiva y el tema de la fotografía nos cautiva, sino también el manejo de luz y sombras. Sin embargo, elegir manualmente los principales colores de una fotografía puede ser una tarea que nos lleve algo de tiempo. Para ocasiones como ésta, tenemos Color Thief, útil servicio en línea que nos permite subir una imagen y obtener de manera automática la paleta de colores, destacando el color dominante.
HEX Colorrrs
Esta herramienta en línea tiene un simple propósito, convertir valores HEX a RGB y viceversa. Sólo debes colocar el código que conozcas, ya sea HEX o RGB en el lugar correspondiente y podrás ver su equivalente respectivo.
Color Hunt
Color Hunt es una librería que contiene una gran cantidad de paletas de colores. Este sitio se actualiza regularmente con nuevas combinaciones de colores. Puedes ver las combinaciones más recientes o elegir las más populares. Cada paleta contiene el código HEX de los colores, así como estadísticas gráficas del porcentaje en el que se utiliza cada color.
La única desventaja es que no puedes realizar búsquedas especializadas, pero podría ser un recurso adicional a Colour Lovers cuando no encuentras la paleta que buscas en otros sitios.
Colour Scheme Calculator
Esta herramienta es bastante útil al momento de crear paletas de colores en base a tipos de combinaciones reconocidas en la teoría del color, como los colores complementarios, análogos, tríadas, etc. Sólo debes seleccionar un color para poder calcular los códigos HEX de todas las combinaciones. También incluye los códigos de ese color variando en saturación y brillo, de modo que puede ser de gran utilidad cuando decidas crear tu propia paleta de colores.
Inspección de estilos
Una gran manera de aprender es analizando otros sitios web. Sin embargo, es complicado saber qué tipo de efecto se ha usado o cómo exactamente se ha logrado completar un formulario usando sólo HTML y CSS al mirar una imagen. Sin importar qué tanto analicemos, probablemente hay ciertas cosas que escapan de nuestra comprensión. Por esta razón es positivo emplear herramientas que te ayuden a revisar el estilo de una página. Google Chrome tiene una increíble herramienta llamada DevTools que te permite acceder al código de una página. En este apartado de ofrecemos otras alternativas a la ya popular DevTools:
Esta herramienta te permite visualizar información sobre la página web que desees. Sólo debes ingresar la dirección en el campo correspondiente y obtendrás información sobre el número de reglas, selectores, declaraciones y propiedades del sitios. Asimismo, te permite ver las fuentes y el puntaje de las mismas, así como discriminar entre los colores que se han usado para las fuentes y los colores que se emplean para el fondo.
Puede servirte para revisar los cambios que se han realizado en una página mediante CSS, comparando estadísticas de ambas versiones (antes de incluir código CSS y después de hacerlo).
SnappySnippet
Esta extensión para Google Chrome te permite extraer el código HTML y CSS de algún elemento en particular que has inspeccionado en una página web. Puedes exportar ese código a CodePen o jsFiddle para poder realizar pruebas. Adicionalmente, esta extensión detecta errores en el código y los repara, de modo que te genera un código CSS limpio y listo para incluir en tus proyectos.
Esta herramienta te permite ingresar la dirección de alguna página y ver la guía de estilo de dicha web. Esta guía de estilo se divide en colores, cada uno identificado por su código HEX, las fuentes y el puntaje en el que se emplean y las dimensiones de las imágenes. Bastante útil si estás en busca de inspiración o quieres saber el nombre de alguna tipografía o color específico de algún sitio en particular.
Creación de efectos y animaciones
Todo sitio web necesita cierto grado de interactividad. Usualmente se piensa que la interactividad va directamente relacionada a las animaciones y hasta cierto grado es cierto. Las animaciones pueden ser una gran adición a tu sitio, pero no quiere decir que necesariamente debes usar animaciones complejas para atraer visitantes a tu sitio. En ocasiones sólo basta con usar animaciones simples para destacar algún título o mostrar algún proceso a tus visitantes. En otros casos, ni siquiera es necesario emplear animaciones y sólo basta con transiciones simples para poder informar al usuario sobre ciertas acciones que ha realizado.
En este apartado te mencionamos algunos recursos que sirven tanto para crear animaciones, como para crear transiciones y otros tipos de efectos. La mayoría se basa en CSS.
Tuesday es una librería CSS especializada en animaciones. Como ya debes saber, las animaciones son esenciales para mejorar la interactividad de un sitio y esos es justamente lo que te ofrece Tuesday, animaciones sencillas, pero que implementadas en los elementos adecuadas pueden potenciar el mensaje de un sitio e incluso atraer más visitantes.
Es una excelente alternativa a la ya popular Animate.css.
Esta herramienta en línea te permite crear animaciones complejas desde tu navegador mediante el manejo de fotogramas clave. Puedes añadir fotogramas, editarlos, eliminarlos y reordenarlos, así como manejarlos individualmente. Ya que tu progreso se ve en pantalla puedes ver los resultados de tu trabajo mientras vas avanzando. Pero no sólo puedes hacer uso de los fotogramas, sino también realizar animaciones complejas mediante la pestaña de “Movimiento”. Allí puedes añadir curvas para mejorar tus animaciones.
Una vez que hayas finalizado tu animación, puedes exportar esta animación a código CSS y simplemente pegarlo en tu proyecto para realizar los cambios necesarios.
Esta librería de JavaScript se especializa en efectos para texto, de esta manera puedes añadir interactividad y énfasis a ciertas palabras o títulos de tu sitio. La librería te ofrece opciones para ajusta la velocidad, el tiempo, añadir iteraciones y otros parámetros para que tu texto animado quede tal y como te lo habías imaginado.
Esta herramienta en línea te permite generar gradientes, bordes, sombras y texturas mediante una interfaz gráfica. Sólo debes manipular los manejadores y valores para poder obtener el código CSS respectivo. Es bastante sencillo de usar y súper útil para generar gradientes o sombras de manera rápida o también puede emplearse como herramienta de estudio para aprender CSS.
Esta herramienta en línea te permite crear un botón de estilo interruptor e incluso añadir transiciones sencillas. Sólo debes elegir el tipo de botón con el que deseas empezar y puedes modificar el color, la longitud, el grosor del borde, etc. También te ofrece opciones simples como colocar color en ambos estados (tanto activo como inactivo). Una vez finalices de modificar tu botón, simplemente debes copiar el código CSS que se ha generado e incluirlo en el archivo de tu proyecto.
En esta página puedes crear elementos esenciales de interfaz de usuario como botones, formularios e iconos. Posee una interfaz gráfica donde puedes seleccionar las propiedades de los elementos que quieres modificar como el color, el tamaño, el estilo del borde, el porcentaje de sombras e incluso los estados activos e inactivos de los elementos con los que se puede interactuar. Una vez has terminado sólo debes pinchar sobre el botón para generar el archivo HTML y CSS.
Esta es una herramienta en línea que te permite crear gráficos en 3D en CSS. De esta manera, puedes incluirlos de manera sencilla a tus proyectos e incluso animarlos si es que posees los conocimientos necesarios. Tridiv cuenta con una interfaz gráfica donde puedes añadir formas básicas como cilindros o cubos. Puedes modificar el tamaño de estas formas básicas usando el cursor, también puedes rotar y duplicar objetos. Asimismo, ofrece un panel donde puedes modificar las propiedades y el estilo de la forma.
Flat Shadow Generator
Si te gusta el Diseño Flat, puedes usar esta útil herramienta para generar sombras largas (long shadow). Este servicio en línea incluye una gran librería de iconos, formas simples que puedes usar para encerrar el icono elegido, puedes elegir colores y modificar tamaños. También puedes definir el ángulo y la profundidad de la sombra. Todo esto mediante una interfaz gráfica sencilla de usar donde puedes ver tu progreso mientras vas realizando cambios. Al finalizar sólo debes pinchar sobre el botón para poder descargar los archivos CSS y JS e incluirlos en tu proyecto.
Ejecución de pruebas
Realizar pruebas es una fase necesaria en todo proceso de desarrollo web. Estas pruebas se realizan conforme vamos avanzando con la creación del código y al principio pueden ser sólo pruebas pequeñas. Pero al finalizar un proyecto web se debe pensar en otros detalles como la compatibilidad con los navegadores. En esta fase también es importante verificar que el código que hemos generado no tiene ningún tipo de error y es lo más ligero posible para que pueda visualizarse en cualquier navegador sin problemas. En este apartado hemos recopilado algunas herramientas que puedes emplear para realizar diversas pruebas y detectar errores:
Hurl
Esta herramienta te permite realizar pruebas de APIs. Puedes seleccionar el método en el que se realiza la petición y personalizar ciertos detalles, así como añadir permisos de autenticación. Funciona en línea así que puedes realizar pruebas desde cualquier ordenador y navegador.
Browser Shots
Este servicio en línea te permite ingresar la dirección de un sitio web y elegir diversos navegadores para mostrarte cómo se ve dicha página en algún navegador en particular. Es una manera de probar la compatibilidad de navegadores que posee un sitio web.
Al momento de ingresar la dirección de un sitio y elegir los navegadores, un número de ordenadores abrirán dicha página en los navegadores seleccionados. Se harán capturas de pantalla de cada navegador y los subirán al servidor. Por esta razón, puede que tardes un poco en ver los resultados, es mejor copiar la URL generada o guardarla en marcadores para poder regresar más tarde.
Yourbrowser.is
Si estás enviando avances a tus clientes y no pueden visualizarlos en sus navegadores, esta es la herramienta para ti. Este servicio te permite verificar los detalles del sistema de tu cliente, de esa manera puedes determinar por qué no pueden visualizar ciertas características del proyecto como la interactividad, por ejemplo.
Para usar este servicio debes suscribirte. En ese momento, podrás enviar un enlace a tus clientes, quienes sólo tendrán que abrirlo para que tu obtengas un reporte completo sobre el sistema. En el reporte se incluye el sistema operativo, el navegador y la versión del mismo, la resolución de la pantalla, la dirección IP, entre otros útiles detalles que te permitirán evaluar y determinar por qué tu cliente no puede ver cierto tipo de archivos.
Dromaeo
Este servicio en línea te permite realizar pruebas de rendimiento de JavaScript. Las pruebas se dividen en diversas categorías de modo que puedes seleccionar realizar alguna prueba específica o todas las pruebas de una categoría. También existe una opción para realizar todos los tipos de prueba existentes en este sitio.
HTML Code Sniffer
Este script revisa tu código HTML y detecta si todo tu código está de acuerdo a los estándares de programación en HTML. Es bastante útil para ayudarte a generar un código más limpio o ayudarte a detectar posibles errores. HTML Code Sniffer ha sido desarrollado en JavaScript y es un proyecto que se encuentra alojado en GitHub, por lo que puedes modificarlo y personalizarlos a tu gusto.
Este increíble servicio en línea te ayuda a detectar errores en tu código CSS. Lo único que debes hacer en copiar tu código en la caja de texto y pinchar sobre el botón para obtener los detalles de los errores. Te indica el número de columna, de línea, el tipo de error que ha detectado y si el problema afecta a todos los navegadores o sólo a algunos. Es bastante útil para poder generar un código CSS más limpio en nuestros proyectos finales.
Al igual que CSS Lint, este servicio te permite detectar errores en tu código JavaScript. Funciona de manera similar a CSS Lint, sólo debes copiar y pegar el código en la caja de texto y pinchar sobre el botón para que JS Lint lo revise. Te muestra el tipo de error y el lugar dónde se ha detectado (número de línea y columna).
Am I Responsive?
Este servicio te permite visualizar cualquier página web en diversos dispositivos, desde ordenadores hasta teléfonos inteligentes. La diferencia es que este servicio coloca los mockups de cada página en un solo lugar, de esta manera puedes comparar qué tanto nivel de optimización para dispositivos móviles existe en un sitio web.
Speed Test
Puedes utilizar Speed Test cuando notes que la conexión a internet es inestable y el acceso a ciertas páginas web puede tardar más de lo debido. Speed Test te permite verificar la velocidad de conexión a través del Terminal. Perfecto para esas ocasiones cuando tu conexión a internet es bastante inestable.
Webpage Test
Este servicio te permite realizar una prueba de velocidad desde diversos lugares del mundo usando Internet Explorer y Google Chrome. También puedes seleccionar que se realice la prueba en dispositivos móviles Android e iOS. Puedes realizar una prueba sencilla o elegir opciones avanzadas para obtener un informe más detallado.
YSlow
YSlow es una herramienta que te puede ayudar a determinar las razones de lentitud en cierto sitio web. YSlow usa 23 de las 34 reglas establecidas por el equipo de Yahoo! que son las principales causas de lentitud en sitios web.
YSlow es gratuito y está disponible para los navegadores más populares, aunque tiene ciertas limitaciones en cada uno de ellos.
Otros
En este apartado hemos colocado otras herramientas que nos parecen de utilidad en el desarrollo web, pero que no han podido ser parte de ninguna categoría previamente mencionada. Los propósitos de las herramientas que listamos a continuación son variados y la única relación que tienen en común es que todas son de utilidad en el diseño y desarrollo web:
Sublime Text
Sublime Text es uno de los editores HTML más sofisticados que existen. Su interfaz es limpia, moderna y sencilla. Debido a que emplea diversos colores para tu código es más sencillo localizar errores y agrupar tu código.
Puedes trabajar varios archivos ya que funciona en base a pestañas. También posee una ventana de navegación que te permite verificar en qué parte del documento te encuentras. No sólo puedes trabajar HTML sino muchos otros lenguajes pues un programa bastante flexible.
Puedes descargar Sublime Text de manera gratuita, aunque es necesaria una licencia para poder usarla. Sin embargo, la versión de prueba no tiene un tiempo limitado de uso.
CSS Layout Generator
Esta herramienta te permite generar una layout de ancho fijo o fluido que incluye una cabecera, un menú y un pie de página. Para una layout fluida puedes elegir el ancho mínimo y el ancho máximo, sólo debes especificar los valores en los campos indicados. Todo funciona en una interfaz gráfica con opciones sencillas y básicas. Al finalizar puedes descargar la layout creada en una carpeta ZIP.
Bear CSS
Bear CSS es una herramienta en línea que te permite generar una plantilla CSS en base un documento HTML. Esta plantilla contiene los elementos HTML, las clases e identificadores que hayas definido. Es muy sencillo emplearla, sólo debes subir el archivo respectivo, esperar a que se genere el documento CSS y descargarlo.
Adaptive Images
Este servicio detecta el tamaño de pantalla de tus visitantes y crea de manera automática versiones más pequeñas de una imagen, mostrando la que es apropiada según la pantalla del visitante. Guarda esas imágenes y las puede emplear más adelante cuando un usuario con el mismo dispositivo visite la página. Es una herramienta que debes probar si estás comenzado a aprender sobre diseño responsive.
Gitup
Esta es una interfaz gráfica para el popular software de gestión de versiones, Git. Puedes realizar diversas acciones como crear “branches”, hacer commits, etc. Lo que hace esta aplicación es mostrar las acciones que realizar en Git mediante un gráfico, de ese modo entiendes fácilmente que es lo que se ha hecho con el proyecto hasta el momento. Puede ser perfecto si trabajas en equipo pues ofrece información visual.
