1) Editor del siglo XXII
No nos vale un editor de texto que funcione bien ahora, sino que lo haga también en el futuro. Debe ser cómodo para nosotros, por supuesto, pero también extensible en el tiempo. Con una gran comunidad detrás que saquen plugins, se actualice, y veamos que se habla de él por los foros. Es un gran esfuerzo aprender a usar bien un editor de texto, por lo que la adquisición debe durar lo máximo posible. Han nacido mucho editores que han sobrepasado a Dreamweaver. En estos últimos 10 años hemos sido testigos de como han aparecido de la nada auténtica obras de arte. En este enlace podrás comprobar alguno de ellos.
- Sublime Text: el rey actual por méritos propios.
- Brackets: Alternativa de Adobe apostando por la nueva generación de editores. Viene con ideas frescas y un entorno muy amigable.
- Atom: Más de lo mismo pero de la mano de GitHub. Liviano, sencillo y libre. Gran comunidad.
- Vim: Para quien no lo conozca diré que si Sublime Text es el rey, Vim es su dios. Es el papi del Sublime Text. Aviso, no apto para todos los públicos.
2) Framework Responsive design
Las nuevas resoluciones para dispositivos móviles han venido para quedarse, y nosotros debemos aceptarlo como niños mayores. En muchas webs, el flujo de visitas para smartphone supera al de ordenadores convencionales. En México el índice en mucho mayor porque es más barato comprar un smartphone que un PC. Google penaliza tu sitio si no esta adaptado. En resumidas cuentas: nuestras webs tienen que verse bien en smartphone, tablet y escritorio. Tenemos dos vías: hacerlo todo con Media Querys o usar un Framework. Aconsejo este último. El aprendizaje es mínimo y nos ahorra mucho trabajo. Ahora mismo el más utilizado es Bootstrap, y no tiene pinta de irse en muchos años. También podéis probar por la red otros igual de efectivos como Foundation o Skeleton. Acostumbraros a usarlo siempre hasta que lo implementaréis casi sin daros cuenta. Os libraréis de muchos dolores de cabeza.
3) Conocer HTML5 y CSS3 al dedillo.
No podéis hacer una buena web si no conocéis todas las etiquetas y estilos. Al igual que no podéis escribir un buen libro si no tenéis un buen nivel de vocabulario. Muchas etiquetas han sido diseñadas con el objetivo de llenar una carencia que se arrastraba. Por ejemplo las nuevas etiquetas de media, las cuales te permiten incluir audio o vídeo. Antes debíamos recurrir a Flash. O las etiquetas nuevas de formulario, donde puedes obligar a que te pongan una fecha, un email, un número… ¡Sin saber todo esto te tocaría programar en Javascript! Tienes muchos tutoriales, libros, blogs, videos y documentación oficial para aprender poco a poco. Nunca dejes de aprender, porque internet no deja de evolucionar.
4) Automatizar tareas repetitivas
En cada cambio hay que refrescar el navegador, y es bastante molesto. Los programadores tenemos un lema: No te repitas. Por lo que hemos inventado formas para no aporrear el F5; y eso son los inyectores de estilos. O, en castellano clásico, el refresco automático. Cada vez que nosotros guardemos nuestro CSS, o HTML, veremos en vivo como cambia nuestra web. Esto nos permite trabajar cómodamente otra pantalla, aumentando nuestra productividad.
Entre los más famosos se encuentra Livereload. Instalas el programa y marcas donde están los archivos que debe vigilar en cada cambio. A continuación lo activamos en el navegador. ¡Y listo! No más refrescos innecesarios. Mi intención no es engañaros, no es perfecto; pero será vuestro compañero por mucho tiempo.
También existe Browser Sync. Una magnífica alternativa libre que no necesita ningún plugin. Viene con unos extras muy jugosos. Lo recomiendo muchísimo.
Pero hay otras tareas igual de aburridas que podemos dejar para el ordenador: concadenar archivos, optimizar imágenes, añadir prefijos en CSS3… Podemos utilizar Gulp o Grunt. La comunidad ha creado varios plugins que te ayudarán a focalizarte en lo que toca.
5) Compilador de CSS
No puedes plantearte hacer un sitio serio usando solo CSS. No porque no se pueda, sino porque vas a gastar mucho tiempo repitiendo estilos. Es hora de crecer y pasar a SASS.
Este pseudocódigo te permite trabajar como si de CSS se tratase, pero con extras que posiblemente vengan en el futuro. Variables, operaciones, funciones, filtros, etc. Sus archivos terminan en .sass o .scss, y se compilan a un .css . De este modo puedes tener un archivo para trabajar, con tus comentarios y variables, y otro que será compatible con todo los navegadores. Limpito, comprimido y con prefijos.
Si no te gusta, puedes ir a su alternativa: LESS. Prácticamente hace lo mismo, aunque no esta siendo tan utilizado.
6) Control de versiones
Solo un perturbado no hace copias de seguridad de un proyecto. Y si estas trabajando con una web por la cual te están pagando, es una obligación. Tanto por el cliente como por ti. Si se te desmonta una parte y no consigues averiguar que pasa, tienes que rescatar como estaba antes. Y eso implica un esfuerzo por tu parte. La solución es tener un control de versiones. Esta claro que puedes hacerlo de forma manual (haciendo carpetitas), o algún software que te ayude. Aunque lo ideal es usar Git. Con solo 3 comandos tendrás tu copia de seguridad, y además estará en la nube por si te estropea el ordenador. Los dos portales más utilizados son GitHub y Bitbucket. Este último lo recomiendo porque te permite hacer que tu código sea privado. En otras palabras: Qué solo lo puedas ver tú. Este sistema es genial si trabajas con otra persona o estas dentro de un equipo. Se encargará de sincronizar los archivos para que todos trabajéis con el mismo contenido, podréis rescatar el código del día que queráis, y podréis hacer experimentos sin alterar la web original.
7) Estar al día de lo que se cocina en el mundo
En este mundillo prácticamente te desactualizas mientras duermes por las noches. No paran de salir nuevos Frameworks, lenguajes, bibliotecas, técnicas, tecnologías, servicios, fusiones, problemas de seguridad, camisetas frikis… Y si no quieres ir a la cola tienes que estar informado. No tienes porque saber hasta el número de galletas a que ha desayunado Torvalds , pero al menos entender de que habla la gente.
La forma más rápida y barata es la de seguir Blogs especializados (como donde estas). Encontrarás centenares, o miles, de blogeros que hablan sobre diseño web, HTML o CSS. Publican artículos de lo más de interesantes, tutoriales, trucos y hasta libros.
Para seguirlos no es necesario que los tengas en tu barra de marcadores y los visites todos los días, para eso estan los lectores RSS que harán el trabajo por ti. Una plataforma muy famosa es Feedly. Solo tendrás que ir agregando los blogs que quieras seguir y generará una revista con todos los nuevos artículos que saquen. (¿Qué tal si empiezas con el mío :) ?) En un vistazo podrás ver todas las novedades e ir filtrando por la categoría que es lo interesante.
Por cierto, también tienen app para el smartphone que viene de lujo cuando estas esperando en el metro.
Otra vía son los foros, como Reddit. Aunque solo lo aconsejo cuando se alcances cierto nivel porque hay información demasiado densa para un Padawan.
8) Aprender lo suficiente de Javascript
El CSS3 es genial, nos ha caído del cielo con novedades increíbles las cuales nos permiten hacer casi cualquier cosa que pase por nuestras mentes: animaciones, efectos, responsive design, apuntar a lugares más recónditos, filtros de colores… Pero no puede hacer todo. Si quieres hacer click en un botón y que despliegue un submenú tendrás que saber Javascript. O que se abra un acordeon. O que termine una efecto. O muchas otras cosas. Nadie te va a obligar a que seas un gran programador, pero tener unas nociones básica te quitaran muchas limitaciones.
Y además, en la actualidad Javascript es uno de los lenguajes más sencillos de utilizar, más flexible y compatible. Si tienes ganas, en un finde puedes aprender lo básico.
9) Entender o practicar un lenguaje dinámico
El HTML5 no es el maná. Muchas partes de tu web se tienen que hacer a la vieja usanza. Como las validaciones, el envío de formularios, las autenticaciones, los blogs, etc. ¿Qué tienen todos en común? Qué detrás hay un lenguaje de servidor. Posiblemente PHP, y sino: Python, Ruby o Java.
Como en el punto anterior: nadie te va a obligar a que seas un gran programador, pero al menos que lo entiendas. Como el inglés: no te pido que escribas libros, pero al menos lo que lees por internet. Si quieres hacer una web seria (no digo que una web estática sea cosa de risa, sino que acabarás poniendo un apartado dinámico como un formulario de contacto), te va a tocar trabajar con seres extraños y apartados de la sociedad llamados programadores. Y si o si tendrás que saber que diablos hacen, porque lo hacen y como puedes trabajar con ellos. Puede ser que te dén una especie de plantilla, o que trabajes con una web con etiquetas especiales. Sea como sea el conocimiento da seguridad. ¿Por qué no aprender un poco? Después de todo, ellos saben HTML y CSS. ¿Por qué no devolverle la concesión?
10) Documentación oficial
La documentación oficial es la Biblia. Da igual lo que diga un blog o el hijo del pescadero: si lo pone en el Doc no hay nada de que hablar. Además, lo que se publica en foros o blogs acaban envejeciéndose y dejando de funcionar, mientras que en un Doc se renueva constantemente.
Debe ser el primer sitio que visites cuando tengas alguna duda y el último si no encuentras forma. Si trabajas con HTML5/CSS3 deberás visitar Mozilla Developer, y si usas un lenguaje deberás visitar la página oficial en busca del enlace a la documentación.
Apunte final
Según pasan los años se va volviendo una tarea cada vez más y más compleja hacer una página web. Ello se debe a que prácticamente todo se hace a través de una web: comprar, consultar una enciclopedia, jugar, leer el periódico, hacer la declaración de la renta, encontrar pareja, preparar un viaje, organizar un partido de fútbol, aprender a hacerte el nudo de la corbata… Ello nos lleva a aprender nuevas herramientas que nos quiten trabajo. No harán la faena por ti, pero si que te harán más productivo. Y a la larga nos convertirá en una navaja suiza del desarrollo web. Serás un buen desarrollador cuando sustituyas la pregunta en tu cabeza ¿Como lo hago? por ¿Cuando empiezo?
{{ comments.length }} comentarios