Article Image
read

Sublime Text

Los días de usar entornos tan complejos como Dream Weaver murieron desde hace unos años. Ahora un profesional de la web aprovecha editores ultra ligeros para trabajar con código de manera simple y efectiva. Aquí tenemos unos ejemplos como Brackets, Coda o mi favorito Sublime Text.

Si te interesa realmente aprender a usar esta herramienta te recomiendo el post de Desarrollo Web.

Github

Git es uno de los sistemas de control de versiones más eficientes hoy en día. GitHub ayudó a popularizar este sistema con un excelente servicio de alojamiento de repositorios. Pero, ¿Qué es esto de repositorios?

Esto es un repositorio:

y visto en Github:

Este es el código con el que diseñamos el sitio de Thinkers In Motion, si eres diseñador web o front end te invito a que veas un poco nuestro código y nos des tu opinión en github.

La principal función de Github es almacenar un control de versiones de un documento desde que es creado. permitiendonos tener organizados nuestros cambios y poder regresar en caso de errores a un estado anterior. Esto es sólo lo básico, si quieres saber como funciona crea una cuenta gratuita aquí.

Bootstrap

Para todos los desarrolladores web el responsive es una prioridad, que tu contenido se ajuste a la pantalla de manera automática en todos los dispositivos se soluciona de muchas formas. Bootstrap es un framework, un esquema, una plantilla predefinida con una reticula que nos permite trabajar en bloques.

Bootstrap es CSS, Cascading Style Sheets, u Hojas de Estilo en Cascada, la tecnología desarrollada por el World Wide Web Consortium W3C con el fin de separar la estructura de la presentación. Un lenguaje que nos permite darle diseño a los elementos. Y Bootstrap nos permite usar elementos prediseñados para crear estructuras muy básicas y ahorrarnos mucho tiempo de diseño en una web profesional y a la vanguardia.

Si jamás has visto una línea de código, aún puedes aprender fácilmente Bootstrap e iniciarte en HTML5 y CSS3 que son fundamentales en el diseño web. Conoce todo de ésta tecnología aquí.

Font Prep

Una inusual elección, pero eficiente. Normalmente cuando empiezas a crear diseño utilizas ciertos recursos como tipografías específicas que ya están en tu computador y quieres implementar en tu web. Con Font Prep puedes optimizar tus tipografías para introducirlas en tu código de manera simple y eficiente. Esta aplicación te genera una carpeta que contiene los archivos en WOFF, TTF, OTF y SVG con un archivo CSS que nos ahorra mucho tiempo.

Me gustaría mencionar que este software fué desarrollado por Brian Gonzalez y podemos ver la evolución del proyecto en github.

Google fonts

Para aquellos que tenemos más tiempo trabajando con la web tenemos herramientas que hacen aún mas simple la tarea de implementar casi cualquier estilo de tipogragía en nuestro sitio. Google Fonts tiene una amplia gama de tipografías para elegir. Una ves que las tengas solo hacer clic en "Quick Use" y tendrás una línea de código para copiar y pegar que te permitirá usar estas fuentes en tu sitio. Extremadamente fácil de usar.

Pre-procesadores

Su funcionamiento es muy simple, nosotros escribimos nuestro código CSS normal, el de toda la vida en un archivo (generalmente css), los pre-procesadores lo que hacen es optimizar ese código para generar un archivo css más liviano que aporta de cara a la optimización de carga de un sitio web.

Las opciones más frecuentes son: SASS, Stylus o LESS. En cualquiera puedes tener un potente pre procesador para crear paletas de colores más eficientes, programar variables y mucho más. Si te interesa conocer más de estás herramientas aquí te dejo un interesante artículo de Iván Abascal Lozano en Abalozz para que te decidas por cual usar.

Chrome

Al momento de querer ubicar rápidamente una línea de código, un color o tipografía no hay como el inspector de elementos de nuestro navegador favorito. Si he de ser honesto Firefox ofrece herramientas más potentes de manera predeterminada pero he seleccionado Chrome por la simplicidad y funcionalidad. El acceso a la consola, las fuentes y recursos son muy eficientes y cómodos.

Grunt

Grunt JS es un corredor de tareas desarrollado en Javascript con Node.js.

¡Automatizar!

Mientras menos trabajo tengas que hacer cuando realizas tareas repetitivas como: minificación, compilación, validación de sintaxis, pruebas unitarias, observar cambios de tus archivos, concatenación de archivos, copiado de archivos de una ruta a otra, borrado de archivos, generar documentación, crear sprites, etc, tu trabajo será más fácil y rápido.

Balsamiq Mockups

Esta herramienta es muy útil a la hora comunicar una idea muy rapidamente con el cliente. Aquí puedes bajarla y aprender fácilmente a usar su interfaz.

Cuando se inicia la aplicación de Balsamiq Mockups, aparece una barra con todos los elementos que puedes utilizar: botones, cajas de texto, paneles e iconos. El aspecto de estos controles es de un dibujo a mano alzada lo que da al trabajo final un aspecto de prototipo un look muy caracteristico como si fuera una copia directa de tu diseño en papel.

comments powered by Disqus
Blog Logo

Alejandro Guiberra

Front end y estrategias digitales


Image

Thinkers in Motion

Este es nuestro blog. Aquí compartimos, con nuestros amigos nuestras experiencias, nuevas tendencias y noticias. Síguenos.

Regresa a nuestra portada.