Cada vez son más las personas que deciden formarse dentro del mundo que rodea el desarrollo web, desde la parte de programación, hasta la de diseño. El desarrollo web hace que te vuelvas más creativo, amplíes tu capacidad de percepción de las cosas, y busques la perfección en todo momento.
Todo esto no sería posible sin un conjunto de herramientas/recursos que nos ayude, sobre todo al principio, cuando comenzamos nuestros primeros “pinitos” en el desarrollo web.
Hay que recordar, que, en caso de no tener nociones básicas de programación, se recomienda que las adquiramos, al menos, para que una vez que tengamos un código delante, sepamos donde están las líneas de código que debemos de modificar o cambiar determinados valores.
En caso de que ya tengáis esas nociones básicas, no tendréis problemas en continuar.
Para ello, y antes de nada, vamos a explicar una serie de tecnicismos para que entendáis posteriormente las funciones que realizan todas las herramientas que vamos a definir.
- Responsive Web Design: también traducido como diseño responsive. Es aquel diseño que se le da a una web y se va a adaptar a diversas pantallas según donde estemos visualizando el contenido de la web (tablets, smartphone o Pc).
- Portfolio: muestra de nuestros trabajos o proyectos. Dentro del mundo de la fotografía se podría equivaler a un “Book”.
- Dominio: nombre que va a tener nuestra web. Ej: www.estoesunejemplo.com
- Hosting: servidor donde se va a almacenar toda la información que contenga la página web (archivos, imágenes, videos…)
- SEO: posicionamiento orgánico en buscadores.
- SEM: posicionamiento mediante pago en buscadores.
- Feedback: retroalimentación entre dos partes, por ejemplo, cliente y colaborador.
- Open source: software totalmente gratuito que permite que sea compartido, e incluso modificado para mejorarlo.
Una vez explicados algunos términos que vamos a utilizar, vamos a continuar hablando sobre 16 herramientas para el buen desarrollador web:
1. Sublime Text.
Este software es un editor de código multiplataforma, ligero y muy simple, tan simple, que se nota que ha sido creada para programar sin distracciones y de forma intuitiva.
Una de sus grandes ventajas es que permite tener varios documentos abiertos mediante pestañas, e incluso se puede utilizar con varios paneles en caso de usar más de un monitor.
2. Format.
Es una herramienta online para diseñar portfolios. Cuenta con diversos diseños responsive y plantillas, ampliar opciones de configuración y personalización.
3. Name Mesh.
Esta herramienta online tiene como función ayudar a encontrar el nombre de dominio más óptimo para nuestra web. Da la opción de crear dominios cortos, mezclar varias palabras en un solo dominio y también da consejos para el posicionamiento SEO.
4. Sitedrop.
¿Eres de esas personas que suelen tener grandes cantidades de archivos a la hora de realizar un trabajo? No te preocupes, Sitedrop permite conectarse con Dropbox para convertir una carpeta de Dropbox en apta para Sitedrop, pudiendo gestionar desde el escritorio toda la información y dando la opción de recibir feedbacks y archivos entre clientes y/o colaboradores.
5. Firebug.
Es un complemento para el navegador Mozilla Firefox y tiene como función editar, debugear y monitorizar los CSS al igual que el propio código HTML.
6. Tavern.
Es un espacio web donde se juntan diseñadores para realizar preguntas y respuestas. También se utiliza como fuente de información ya que muchas personas comparten y publican sus opiniones y experiencias.
7. Octicons.
Es una colección de iconos creador por Github. A la hora de realizar una web deberemos añadir diversos iconos y esta es una muy buena opción.
8. Color Hex.
Es un generador de colores. Genera tanto colores oscuros como claros.
9. KeePass.
KeePass es una herramienta muy útil, ya que, como gestor de contraseñas que es, guarda y protege mediante cifrado tus contraseñas y usuarios de todas aquellas cuentas que vayamos metiendo. Por cada cuenta que vayamos a meter, podemos introducir el nombre de usuario, la contraseña, una pequeña descripción y una URL.
10. Photoshop/Gimp.
¿Quién no conoce estas herramientas? Anteriormente ya hemos escrito sobre las virtudes de ambos programas de diseño gráfico. Ambos programas son por excelencia los más usados a nivel mundial para hacer creatividades, banners, diseños o retoques fotográficos.
11. Analytics.
Herramienta de Google totalmente gratuita que permite, a partir de estadísticas, ver la repercusión que tiene nuestra web, que tipo de visitas tenemos en nuestra web, sector geográfico, tiempo permanecido, entre otras funcionalidades….
12. Adwords.
Herramienta de Google para el posicionamiento SEM en el buscador de Google. Con esta utilidad tus clientes podrán ver tu anuncio o web en Google a partir de una serie de palabras clave.
13. Adsense.
Utilidad para ganar dinero en nuestra web por medio de banners de publicidad que mostrará anuncios personalizados.
14. URL Shortener.
Web de Google que hace más corta una URL.
15. Freepik.
Web donde encontrar diversas imágenes vectoriales, fotografías y creatividades que podemos usar de forma totalmente gratuita.
16. Typecast.
Aplicación que permite trabajar con más de 5000 fuentes de letras distintas en un solo panel de control. Una de las grandes ventajas de esta aplicación es que se puede obtener el código CSS para posteriormente utilizar dichas fuentes en nuestra página web.
