De muchas herramientas, bibliotecas, aplicaciones y páginas web que existen, presento las que uso para desarrollar mis proyectos de manera más fácil y más rápida así como apoyo para impartir mejor los cursos. La compilación es personal y subjetiva, no pretendo decir ni sugerir que estos recursos son los únicos o los mejores, simplemente que los he probado, me gustaron y me sirven, por esto considero que merecen ser promocionados y compartidos con otros diseñadores.
Planeación del sitio web
Antes de iniciar el proceso de diseño web y de su desarrollo hay una etapa de las pláticas con el cliente, cotizaciones, planifiación, revisar las muestras y evaluar los ejemplos, investigar y demás procesos relacionados.
- Free Mind
- Herramienta libre y multiplataforma para desarrollar mapas mentales y conceptuales.
- MindMup
- Aplicación web para creación de mapas mentales que funciona en la nube por el navegador.
- A website designed
- Infografía demostrando varios pasos de un desarrollo de un sitio web típico.
Diseño gráfico
- Sortfolio
- Una compilación de portafolios de desarrolladores de todo el mundo mostrando las tendencias del diseño.
- Lorem Ipsum
- Generador del texto simulado para relleno, útil en la etapa de prototipado.
- Normalize CSS
- Hoja de estilos CSS que funciona como una alternativa moderna para los resets.
- Ungrid
- La retícula más sencilla para iniciar el desarrollo responsivo.
- The Rem Calculator
- Calculadora que permite convertir píxeles en las unidades rem para las hojas de estilos.
Elementos de contenido de sitios web
Hay muchos sitios gratuitos en internet que ofrecen elementos de diseño para descargar, como fotografías, tipos de letras o apoyo en la selección de una elegante gama de colores. A veces tienen ciertas restriciones, como otorgar el permiso de uso de un tipo de letra sólo para proyectos sin fines de lucro, pero en general la mayoría de éstos son libres de derechos y están listos para usarse en un sitio:
Color
- Colores CSS
- Lista de colores CSS ordenable por el nombre u otras clasificaciones.
- Color Scheme Designer
- Creador de paletas de color con la opción de exportar como CSS o muestras de Photoshop.
- Combo Tester
- Herramienta para realizar las pruebas de combinaciones de colores para proyectos web.
- Pictaculous
- Creador de paletas de colores a base de las fotografías con exportación de muestras a Photoshop.
- Coolors
- Un rápido y cómodo generados de paletas de colores aleatorias.
- Checkmycolours
- Utilería de revisar el contraste de colores de páginas web para asegurar que sean legibles para todos.
- Color Picker
- Matices de colores web con sus valores hexadecimales y otras notificaciones.
- 0to255
- Aplicación para obtener los tonos de los colores para el diseño web.
- Gradient Editor
- Generador del código CSS para obtener diferentes tipos de degradados en el navegador web.
Imágenes
- Freepik
- Buscador de fotografías, vectores, PSDs e íconos que rastrea varios sitiso con imágenes gratuitas.
- Free Images
- Un buen banco de imágenes gatuitos, libres de derechos para descargar y usar en los proyectos web.
- Favicon.net
- Explicaciones sobre el ícono de la página con un tutorial paso a paso en español.
- Favicon.cc
- Generador en línea de los favicons con la opción de crearlos o convertir desde una imagen.
- PS ICO plug-in
- Un complemento gratuito para Photoshop que permite convertir imágenes en íconos con el formato ICO.
- Real Favicon Generator
- Generador automatizado para la creación de íconos para todas las plataformas.
- Dinpattern
- Una colección de fondos tipo seamless, gratuitos y de buena calidad, para el uso en las páginas web.
- Subtle Patterns
- Más fondos gratuitos para páginas web.
Texto, tipografía y fuentes
- Dafont
- Bien organizada colección de tipos y fuentes de calidad libres para descargar.
- Font Pair
- Herramienta que ayuda a obtener combinaciones armoniosas de las fuentes de Google.
- Font Converter
- Convertidor universal en línea para formatos múltiples de fuentes.
- What the Font
- Buscador e identificador de tipos y fuentes.
- Entidades XHTML
- Lista completa de las entidades XMTL, símbolos y carácteres especiales.
- Type Tester
- Ensayador tipográfico para probar la configuración de la tipografía en vivo.
- Perfect Typography
- Calculadora de interlínea para las hojas de estilos de CSS.
- CometDocs
- Sistema de administración de documentos en línea con opciones de convertir un imagen en texto.
- CopyScope
- Buscador especializado en encontrar en línea páginas web o textos fusilados o copiados.
JavaScript, bibliotecas y frameworks
- jQuery
- Descargar jQuery directamente.
- Unheap
- Una colección organizada y ordenada de los plug-ins para jQuery.
- Lightbox
- La clásica galería de imágenes con transiciones.
- HTML5 Boilerplate
- Un punto de partida para desarrollar páginas o aplicaciones con HTML5 y tecnologías modernas.
- Initilizr
- Inicializador para HTML5 Boilerplate que facilita un principio rápido de proyectos web.
- Format Factory
- Convertidor multifuncional gratuito para varios formatos de imagen, audio y video.
- Free Sound
- Una banco de sonidos libres de derechos para descargar de manera gratuita.
- ccMixter
- Un repositorio de archivos gratuitos con sonidos y música para páginas web, videos, juegos y otros proyectos.
Programas gratuitos de diseño
Aunque Adobe es líder en desarrollo de software comercial para diseño de sitios de internet, hay algunas alternativas que pueden interesar a quienes prefieren usar Linux o trabajan con bajo presupuesto:
- Gimp
- Editor gratuito, portátil y multiplataforma para fotos y mapas de bits en general.
- Inkscape
- Aplicación gratuita para la creación y edición del formato vectorial en web (SVG).
- Amaya
- Editor gratutioto del código abierto para la creación de páginas web.
- SumoPaint
- Aplicación web para la edición en línea de imágenes tipo mapas de bits.
- Pixlr
- Versión web de la aplicación Pixlr útil para la edición de fotos en línea.
Análisis y posicionamiento
Aquí se presentan algunos vínculos que direccionan a servicios que permiten depurar el sitio y mejorarlo, ajustandolo a las recomendaciones de W3C y lo que verán los usuarios en sus navegadores:
- Validador HTML
- Validador del código HTML de porporcionado por W3C.
- Validador CSS
- Otro validador de CSS de W3C.
- Validador Unicorn
- Multivalidador integrado que verifica a la vez diferentes aspectos de desempeño de las páginas web.
- Checklink
- Verificador de vínculos rotos.
- Websitegrader
- Calificador SEO de páginas web.
- Google Analytics
- Herramienta de analítica web para monitorear el tráfico.
- Google Webmaster Tools
- Varios recursos e indicadores diagnósticos para webmasters.
- Statcaunter
- Estadísticas gratuitas mostrando algunos parámetros diferentes de los anteriores.
- Pingdom
- Verificador de velocidad de las páginas web.
- Web Page Test
- Testeo gratuito de la velocidad de páginas web usando los navegadores reales.
Referencias
- HTML & CSS Vocabs
- Vocabularios interactivos y multilingües, incluyendo español con la nomenclatura de HTML y CSS.
- W3schools
- Refrencias de códigos web con tutoriales sencillos para aprender HTML, CSS, JavaScript, jQuery, Bootstrap etc.
- LaunchList
- Lista de verificación del estado del desarrollo para revisar antes lanzar un sitio web.
- Can I Use
- Referencias de la capabilidad de los navegadores para usar los elementos HTML5 y las propiedades de CSS3.
Cursos, capacitación e idiomas
- Duolingo
- Sitio web de un sistema para estudiar idiomas, también existe como una aplicación móvil.
- Forvo
- Guía sonora de pronunciación en inglés presentando diferentes maneras de pronunciar.
- Free Rice
- Juego para aprender el vocabulario inglés al mismo tiempo ayudando a combatir el hambre en el mundo.
Herramientas web
- Archive
- Archivero de internet con acceso a varios recursos gratuitos y un respaldo histórico de páginas web.
- TinEye
- Buscador invertido de imágenes que permite investigar en qué páginas aparece una imágen.
- MailChimp
- Solución para mercadotecnia en línea y envío de campañas de e-mails con el rastreo de resultados.
- WeTransfer
- Servicio gratuito para transferir archivos grandes sin la necesidad de registrarse.
Hospedaje y dominios
Existen varias opciones para subir y mantener un sitio en internet, desde las totalmente gratuitas hasta las más caras. Aquí se incluyen las más recomendables, selecionadas por que tienen características interesantes:
- Dot.tk
- Dominios gratuitos en Tokelau, un páis en Pacífico que permite usar su ccTLD (dominio nacional) a todo el mundo.
- Who.is
- Herramienta para la investigación de dominios.
- DomainTools
- Herramienta para saber dónde está alojado un sitio web.
- Bustaname
- Buscador de dominios con un generador de nombres integrado.
Si tomaste un curso o unas clases particulares conmigo y te enseñé alguna herramienta web que no se encuentra aquí, avísame por favor para actualizar la colección. Igualmente si alguna de las ligas no funciona repórtala, gracias de antemano.
