El blog para emprendedores

A un paso del desarrollo web: Ruta para empezar a tocar código

Publicado por Alejandra el 31 - May - 2015

Cuando eres amante del diseño web, además de pasar horas trabajando a gusto en el ordenador, te pasas tu tiempo libre en el Photoshop o Illustrator dándole vida a otros proyectos, probando nuevas formas o simplemente pasando el rato… como si vivieses un mundo de colores y tipografías, vives como embelesado enamorándote de tus diseños y sin prestar mayor atención desarrollo web.

Y como no te has dignado a aprender a maquetar, llega un buen día en que le pasas tu diseño a un front-end que no tiene ni el más mínimo cuidado con ese par de pixels de más y se olvida constantemente de que los botones no son rojos sino “salmón”. Una de dos, o encuentras un front-end perfecto, que te acompañe en el camino de la vida y que haga todos tus trabajos realidad ó te pones a estudiar.

Pero no es tan complicado como te imaginas, una vez le pillas el tranquillo ya está, te enganchas, y de repente empiezas a dominar el tema; tanto, que te apasionas y cuando menos te das cuenta estás llevando tus diseños a la realidad. Y es que todo diseñador web debería tener nociones no solo básicas de código, por lo menos de html, css y javascript.

Si te estás planteando entrar en el mundo del desarrollo web y empezar a aprender código y no sabes por donde comenzar, estás en el lugar indicado. Hemos hecho una guía breve para que te inicies en este apasionante mundo y empieces a ponerte manos a la obra sin hacer costosos cursos.

Empieza por lo más fácil, HTML es el lenguaje más básico e imprescindible que te tienes que aprender, y después de dominarlo deberás darle estilos con CSS. Puedes dar tus primeros pinitos con un curso de HTML y CSS que te ofrece Codeacademy

Es un curso donde aprenderás conceptos básicos y conocerás las etiquetas para crear tu propia página para practicar. No te tienes que liar colgándola en ningún servidor, simplemente con tenerlo todo organizado en una misma carpeta de tu ordenador y abriendo el archivo html en tu navegador habitual es suficiente para ir probando.

Después de hacer este curso tendrás que ponerte a probar y probar, no hay mejor manera de aprender que practicando. Y mientras practicas, es normal que te salga más de una duda… pero seguro que la resuelves fácil y rápido con estos libros:

HTML tutorial

– Introducción a CSS

Son libros donde explican los conceptos de manera muy clara y básica, por lo que seguro te sacaran de cualquier atasco.

El siguiente paso, es continuar a base de más prueba y error, intenta maquetar proyectos más complejos, así sea solo la página de inicio. Un proyecto grande tiene más elementos, por lo que te toparás con problemas más difíciles a resolver, pero que seguramente podrás solucionar con este otro libro:

CSS avanzado

Aunque hay que decir que por mucho que te leas los libros y hagas cursos puede que te encuentres con problemas mucho más complejos, herencias de estilos que se cargan tu código o simplemente divs mal cerrados. Hay una solución muy útil para verificar cómo se comportan tus elementos e identificar en qué línea de código encontrar los típicos errores tontos que te rompen la cabeza:

– Si trabajas en Firefox el Firebug, que te descargas de los complementos de Firefox.

– En Chrome, simplemente haces click derecho y después vas a inspeccionar elemento.

Te saldrá el código a un lado, o abajo y puedes cambiar cosas sin que se cambie nada de tu archivo original. Así puedes ir probando y escondiendo etiquetas que pueden estar estropeando tu página.

Llegados a este punto te darás cuenta que no solo se trata de aprender a colgar contenido estático, la web es interactiva y con un simple :hover no es suficiente para que tu diseño destaque de los demás. Por eso será necesario agregar Javascript a tu vida ¿Y por qué no empezar de forma fácil?

– Curso de Javascript

Una vez hecho todo lo anterior, y después de mucho probar, puedes pasar a otra liga, que te facilitará la vida… Bootstrap.

Se trata de un framework hecho con código abierto que te permite crear interfaces en responsive de forma más rápida. Además es muy fácil de instalar, puedes ver estos primeros dos tutoriales para hacerte una idea general y para que aprendas a instalarlo en tu proyecto.

El paso siguiente es probar más y más y más, juega con el código, inspírate con efectos chulos http://codepen.io/ y prueba más.

Una vez hecho todo lo anterior, y después de mucho probar, puedes pasar a otra liga, que te facilitará la vida… bootstrap: http://getbootstrap.com/

Es un framework hecho con código abierto que te permite crear interfaces en responsive de forma más rápida. Puedes ver estos primeros dos tutoriales en español para hacerte una idea general y para que aprendas a instalarlo en tu proyecto:

Y cómo no iba a tener su “libro web”: Bootstrap3 El manual oficial

Ya llegados a este punto no eres un simple diseñador web que sabe lo básico. Ahora ya serás capaz de maquetar tus diseños “mobile-friendly” y te habrá picado el gusanillo del “coding”. Un mundo en el que no paras nunca de aprender, donde hay miles de temas que se actualizan cada dos por tres.

Deja tu comentario