Quiero aprender desarrollo web, ¿Por dónde arranco?

Introducción.

Buenas! Esta pregunta la respondo, aproximadamente, una vez por semana.

Y es lógico, casi a diario, los periódicos o portales de noticias nos viven informando sobre la falta de técnicos especializados en las tecnologías de la información, y nos cuentan sobre el problema que tienen las empresas en encontrar a sus empleados (y los sueldos muy por encima de la media que pagan por contratarlos!).

Es aquí cuando muchas personas, en su intento de encontrar un trabajo estable y bien pago, deciden abocarse a encontrar el tan afamado empleo en sistemas… Pero surge la duda que planteábamos al principio: ¿Por dónde arranco?

La elección.

Hay muchísimas ramas en donde focalizar tus estudios. Desde “lo hard” como servicio técnico en computadoras; o redes informáticas hasta “lo mas soft” como la generación de plantillas para páginas web, pasando por sistemas de diseño, internet de las cosas, análisis de datos, machine learning, seguridad informática, y podría darte, por lo menos, una docena más de ejemplos al que podrías aplicar pero HOY vamos a hablar del desarrollo web, mas precisamente del front end.

El front end es la parte visual de un desarrollo web, podríamos afirmar que es la capa visible al usuario. Es donde éste puede interactuar, consultar datos, ver informes, mirar videos o buscar información.

Ok! Y por dónde arranco a estudiarlo?

Antes que nada debes arrancar por el maquetado de páginas y ésto se logra, al menos en un primer momento, con dos tecnologías base: HMTL y CSS.

HTML es un lenguaje (SI, LA ELE DEL FINAL ES DE LENGUAJE) que nos permite generar la estructura básica de nuestra página. Y como ésta es una guía para que sepas qué debes aprender te voy a recomendar que me sigas ya que estoy armando un tutorial con las bases de este lenguaje.

Si ya hiciste alguna página, por sencilla que sea, vas a ver que no se parecen en NADA a lo que vemos regularmente en la web y esto se debe a que la página no tiene estilos.

Dale color a tu vida ☺ Aprende CSS!

Según la definición de Wikipedia “CSS (siglas en inglés de Cascading Style Sheets), en español «Hojas de estilo en cascada», es un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado. Es muy usado para establecer el diseño visual de los documentos web, e interfaces de usuario escritas en HTML”. Es decir, gracias a CSS vamos a poder darle a la web recientemente creada los estilos que querramos: desde los colores y la posición de los objetos en la pantalla hasta crear animaciones muy livianas o crear efectos visuales sobre los objetos. Inclusive deberás recurrir al grid de CSS para hacer páginas responsivas (estas son páginas para ser vistas en diferentes plataformas, como celulares, tablets, totems, monitores o televisores) y lograr que el contenido se ajuste a cada resolución sin problemas.

Una vez que tomes los cursos que te dejo en el pie de página, te animo a que hayas crees unas cuantas páginas de ejemplo, además de folletos y banners. No hay nada mejor para aprender CSS que maquetar TODO tipo de folletería. Podes arrancar con las tarjetas personales y los folletos publicitarios que te dan en la calle, luego continuas con diarios y revistas y terminas copiando a diferentes páginas web, en su formato escritorio y mobile.

Agilizando el CSS.

¿Te sentís cómodo maquetando? Aceleremos la velocidad introduciéndonos en el mundo de los frameworks para CSS. Éstas son librerías que nos facilitan el maquetado utilizando elementos visuales ya diseñados.

Los frameworks mas populares son Bootstrap, Materialize, Material Design y Foundation. Son fáciles de aprender y te simplifican muchisimo el armado de páginas.

Mi recomendación es que no los aprendas si aún no sabes muy bien CSS ya que, si bien los frameworks te ayudan en un 80% de los casos, la verdad es que cuando debas hacer ciertas cosas puntuales te va a costar mucho volver a CSS. ¡Todo a su tiempo!

SASS. Mejorando los frameworks.

Cuando hayas explorado los frameworks te darás cuenta que hay muchos elementos que te gustaría usar pero, por ejemplo, sus colores no son los adecuados. También te pasará que querrás diferenciar entre personas logueadas en tu sistema y usarías diseños diferentes por cada tipo de usuario. Para poder mutar de un estilo a otro tendrás que aprender lo que se conoce como un pre-procesador de CSS y su nombre es SASS.

Gracias a estos preprocesadores podrás cambiar los estilos internos de los frameworks (como Bootstrap) por lo que es una herramienta sumamente poderosa.

JavaScript. El lenguaje de programación web por excelencia.

Conforme vayas avanzando en la creación de tus páginas notarás que tendrás páginas muy lindas… ¡pero inoperantes! No reaccionan frente a ningún estímulo, no son funcionales, no podes generar ningún tipo de interacción (como subir formularios). Por este motivo se creó JavaScript.

Al principio deberás comprender el funcionamiento de un lenguaje: qué son las variables, los tipos de datos, las funciones, los condicionales, los bucles; y entender cómo se utilizan desde JS.

A JavaScript se lo conoce también como EcmaScript y las versiones que aún se usan son: la 5 (IE11 aún la usa, y nodeJS se creó bajo estos estandares), la 6 (tambien conocida como ES6 o ES2015) que es la versión estable que introdujo los suficientes cambios significativos como para hablar de “JavaScript moderno”.

Actualmente se habla de frameworks o librerias UI para JS, y (al igual que lo que pasaba con CSS y sus frameworks) se utilizan para agilizar el desarrollo web.

Entre los frameworks actuales mas demandados podemos encontrar Angular, creado por Google.

Y, dentro de las librerias, VueJS y ReactJS.

Versionando el código.

Cuando tengas un dominio sobre estas tecnologias y busques trabajo, el selector probablemente te pida que le muestres ejemplos de desarrollos que fuiste haciendo. Existe una tecnología que te permite compartir el código y se llama GIT.

Entre los gits mas conocidos están GitLab y GitHub. En ambos podes guardar y compartir código fuente.

Otra característica secundaria pero interesante es que a la mayoría de programas online de desarrollo web podes loguearte con tu usuario de gitHub por lo que tenes el código y los editores bajo un mismo alias.

Palabras finales.

Bueno, vimos un pantallazo inmenso sobre lo que es el desarrollo web en la parte del front, espero que te haya servido, al menos, para orientarte en un primer momento… Y no desesperes que parece mucho pero es sumamente agradable transitar cada sección!

En este momento estoy dando un curso de front end a un grupo de 10 personas, para saber cuándo arranca el próximo enviame un mail a fernandomatiasdv@gmail.com

Y sino podes pagar, te recomiendo este post en donde te indico los tutoriales a ver: “Cursos gratuitos en desarrollo web.” https://medium.com/@fernandomatiasdv/cursos-gratuitos-en-desarrollo-web-f345a655e68

También te sugiero las siguiente lectura:
Encontrá tu Primer empleo en sistemas: Tu primer Empleo en Sistemas.