🇺🇸 English Version

Hola a todos 👋

Estaré usando este blog para compartir tutoriales y pensamientos acerca de mi carrera como Software Engineer, esto podría ser de ayuda para ti o tus allegados. Si puedes seguirme en mis redes y reaccionar a mis artículos me motivaría a continuar.

La vida no es fácil, muchas personas han tenido que empezar de nuevo por una mala decisión, una calamidad, o por una pandemia como esta. Mi motivación para escribir este artículo es compartir a personas que necesiten un nuevo rumbo, una alternativa con la cual puedan obtener bienestar y abundancia para ellos y sus familias. Si encontraste por ti mismo este artículo puede que ya sepas de qué va todo esto, posiblemente conozcas a alguien que esté buscando algo nuevo que emprender, compártele este post y cambiemos vidas.

Como motivación para el lector, aquí hay algunos aspectos que considero ciertos de la industria del desarrollo:

• No necesitas un título universitario para convertirte en desarrollador (la mayoría del tiempo).
• Una computadora gama media con Windows, Linux o Mac es suficiente para empezar.
• Trabajar en desarrollo/tecnología habilita beneficios que no son tan comunes en otras disciplinas (Hablaremos de ellas posteriormente).

Mi nombre es Mateo Garcia, tengo 25 años, y trabajo como desarrollador web desde hace 7 años, mi paso por la academia no fue brillante, sin embargo, la industria tecnológica me abrió las puertas para trabajar como desarrollador sin pedirme un título profesional, después de todo este tiempo sigo convencido de que cualquier persona hubiera podido lograr lo mismo sin el diploma, y por eso estamos aquí hoy.

Cómo sacarle provecho a este artículo

1. Tomate el tiempo de entender cada concepto sin afán, no es necesario que lo entiendas todo en el primer intento, avanza cuando estés listo.
2. Toma buenas notas, una estrategia para interiorizar los conceptos es tomar buenos apuntes, puedes usar un cuaderno físico o uno digital.
3. Usa los recursos que están anexos al contenido y practica por tu propia cuenta, no te preocupes si las cosas no salen bien en las primeras ocasiones, practicar es avanzar.
4. No pierdas la motivación. Aunque no lo percibas, estás avanzando solo decidiendo leer este artículo, estudia, practica, busca ayuda y repite. Somos una comunidad y estamos para apoyarnos a cumplir los objetivos.

Tabla de Contenido

1. Los beneficios del desarrollador
2. ¿Qué significa ser desarrollador?
3. ¿Qué significa ser desarrollador web?
4. Quiero ser desarrollador web!
5. Conceptos Fundamentales
   1. Dominio de la computadora
   2. Editor de código
   3. HTML
   4. CSS
   5. Javascript
   6. Escoge un framework
6. ¡No pares de aprender!
7. Y ahora qué?

Los beneficios del desarrollador

La industria tecnológica es bien conocida por los beneficios que le otorga a sus empleados, es difícil hablar de ello sin sonar como un engreído. Sin embargo, creo que es uno de los factores que más influyen para que las personas se interesen en esta disciplina y es por ello que quiero que conozcas algunas de los beneficios que podrías disfrutar trabajando en tecnología:

• Salarios superiores a los de otras disciplinas de ingeniería, en ocasiones con pagos en dólares.
• Formar parte de un equipo con excelentes profesionales
• Planes adicionales de salud, subsidios de Internet, bonos para mejorar tu oficina, presupuesto para educación formal e informal, etc.
• Trabajar a distancia, parcialmente a distancia, o en oficinas deslumbrantes.
• Vacaciones ilimitadas (toma los días que necesites) o días adicionales a los establecidos por ley en tu país.

¿Qué significa ser desarrollador?

Los desarrolladores son personas que adquieren conocimientos para crear software (programas, aplicaciones, apps). Son contratados para crear un producto con un propósito en el mercado. Cuando alguien está desarrollando, hay una comunicación entre una máquina y un ser humano a través de un conjunto de reglas o sintaxis llamada lenguaje de programación, que es escrito en un documento tal y como si estuvieras escribiendo una carta o un guión en un documento de word.

Existen diferentes tipos de desarrolladores, cada uno se enfoca en los usos que le damos a la tecnología en nuestras vidas. Un desarrollador móvil trabajó en el nivel de Candy Crush que acabas de pasar, un desarrollador web creó la funcionalidad con la que subiste un producto en Amazon, un desarrollador de controladores programó la lavadora con la que lavaste tu ropa y estos son solo algunos ejemplos.

¿Qué significa ser desarrollador web?

La web nació en 1989 gracias a la visión que tuvo Tim Berners-Lee de automatizar la transmisión de documentos científicos entre universidades. Diez años más tarde su invento pasó a ser usado para impulsar el comercio digital; grandes empresas estaban haciendo llegar sus productos y servicios a más personas, todos querían estar en Internet.

Volviendo al presente, nos resulta sospechoso e incluso absurdo que una empresa no tenga presencia en Internet, es por eso que casi todas ellas buscan tener presencia digital, llegar a más clientes y generar más ventas. Las páginas web funcionan como herramientas que pueden ayudar a un producto a crecer y mejorar, por lo cual surge la necesidad de contar con una persona que pueda desarrollar un sitio o una aplicación web. Ahí es donde aparecemos nosotros, los desarrolladores web.

Los desarrolladores web son personas que han especializado sus habilidades de desarrollo en los navegadores web como Chrome, Mozilla, Firefox y Safari (Si en los teléfonos móviles también 💪). Se han capacitado a través de diferentes recursos en Internet, gratuitos y/o de pago, después de un tiempo han aplicado a su primer trabajo en tecnología y ahí están, revolucionando el mercado.

Quiero ser desarrollador web!

Como lo mencioné anteriormente, no tener un título universitario no es un limitante para incursionar en el mundo del desarrollo, te resultará curioso saber la cantidad de gente que trabaja en Tech sin un título o con uno en una área diferente a este. Pienso que esta es la industria de las segundas oportunidades.

No obstante, quiero ser franco contigo: Para triunfar vas a tener que ser consciente y proactivo de tu proceso, administrar tu propio tiempo, escoges tu material de estudio, descubrirás tu metodología de aprendizaje, y serás tu quien determine si estás avanzando.

Si has decidido aceptar mi invitación, el siguiente paso será comprender los conceptos fundamentales que todo desarrollador web debe conocer, el objetivo de este artículo no es hacerte un desarrollador en 30 minutos o en 1 hora. Es motivarte y brindarte las herramientas con las cuales, usando tu tiempo, te permitan convertirte en un desarrollador y le des ese impulso a tu vida para hacer algo nuevo.

Conceptos Fundamentales

Existe una larga lista de conceptos que los desarrolladores experimentados terminan cargando en su mochila, no te voy a mentir, es extensa, sin embargo, muchos de ellos se aprenden en la marcha y hacen parte del aprendizaje continuo que forja la carrera. Desde mi perspectiva, estos son los conceptos más importantes que todo desarrollador web debería de dominar para aplicar a su primer trabajo:

Dominio de la computadora

No es un secreto que una gran porción de la población mundial no sabe cómo usar una computadora y es totalmente entendible. En la actualidad, las computadoras siguen siendo un artículo de lujo y es más fácil dominarlas cuando las usas desde la infancia. Aprende a usar una, mejora tu mecanografía, agiliza tu capacidad para moverse entre aplicaciones, aprende como hacer una buena búsqueda en Google (Busca soluciones en Inglés, si no lo sabes usa un traductor).

Foto por fauxels de Pexels

Editor de código

Un editor de código es el lienzo en el cual los desarrolladores escriben sus programas, sitios o aplicaciones. Es un simple editor de texto como el Bloc de Notas o Microsoft Word pero con capacidades especiales para usar lenguajes de programación, técnicamente podrías escribir un sitio web con tu Bloc de Notas (No lo hagas, por favor).

Foto por Kevin Ku de Pexels

Cada desarrollador escoge su editor de texto y lo personaliza de manera que se sienta cómodo usándolo como herramienta del día a día. Ahora es tu turno, échale un vistazo a los editores más usados y escoge el tuyo!

• Visual Studio Code (Recomendación personal)
• Atom
• Sublime Text

HTML

El desarrollo web es la evolución del contenido impreso. Las revistas y los periódicos llevan años difundiendo información que hoy, los sitios buscan ocupar. Es por eso que la analogía más básica de un sitio web puede ser una revista o un periódico (Con super poderes).

Foto por Evi de Pexels

Antes de producir una revista debe existir una definición de contenido, cada página tiene secciones que se repiten y algunas que son únicas, tenemos títulos, párrafos, imágenes, etc. Usando HTML, podemos hacer la definición del contenido, establecemos en cada página el contenido que queremos compartir.

Para darte una idea de que puedes hacer, estos son algunos usos que podrías darle a un documento HTML:

• Definir los títulos o encabezados del sitio
• Agregar párrafos de texto que describen los encabezados
• Añadir imágenes y/o videos que agreguen significado a la información compartida
• Implementar formularios que almacenen información de los usuarios

En este punto nuestro sitio no tiene buen aspecto visual, ni tampoco interactividad, solo posee el contenido “crudo” y el siguiente paso es hacer que visualmente se vea bien, y así llamar la atención de los clientes.

A continuación te dejaré algunos de los recursos gratuitos con los cuales podrás aprender HTML y ganar experiencia:

• HTML Basics - Mozilla Developer Network
• How to create a Web Page with HTML - The Practical Dev
• HTML Basics Start From Zero - The Practical Dev
• HTML tutorial for Beginners - Programming with Mosh

CSS

El aspecto estético de cualquier producto o servicio puede impactar en su rentabilidad, es más fácil vender algo bonito que algo que no lo es. CSS aporta la estética del sitio, nos permite definir colores de texto, colores de fondo, tamaños, espaciados, distribuciones y mucho más; para usarlo solo debes crear una hoja de estilos y seleccionar los elementos HTML que quieres modificar.

Foto por Greta Hoffman de Pexels

Para darte una idea de que puedes hacer, estos son algunos usos que podrías darle a un documento CSS:

• Cambiar el color o el tamaño de la letra
• Especificar tamaños específicos o relativos
• Ajustar la distribución de un conjunto de elementos
• Aparecer o desaparecer elementos según el tamaño del dispositivo

En este punto nuestro sitio tiene un mejor aspecto visual, no es interactivo, pero puede captar la atención de los clientes y puede transmitir cualquier mensaje con estética. Podrías vender un sitio solo con HTML y CSS, sin embargo no es tan común ya que generalmente se prefiere la interacción pero existen muchos sitios en internet que están hechos solo con estas dos tecnologías.

A continuación te dejaré algunos de los recursos gratuitos con los cuales podrás aprender CSS:

• CSS Basics - Mozilla Developer Network
• Learn to style HTML using CSS - Mozilla Developer Network
• HTML and CSS crash course - Scrimba
• What the flexbox - Wes Bos

Javascript

Eventualmente, los sitios web empiezan a necesitar interactividad, no te puedes quedar haciendo sitios estáticos (HTML + CSS) cuando tienes a tu disposición la capacidad de responder a los eventos de los usuarios, enviar datos dinámicos o realizar conversiones directas en línea. Las empresas avanzan rápidamente y ninguna se quiere quedar con el sitio menos innovador del mercado, es por eso que este lenguaje de programación juega un papel fundamental en el desarrollo de sitios y aplicaciones modernas.

Javascript es un lenguaje de programación que habilita la interactividad de los sitios y aplicaciones web modernas. Conecta el documento HTML con lógica de programación generando experiencias de usuario más enriquecedoras y sitios web más poderosos.

Foto por Alexandre Bringer de Pexels

Para darte una idea de que puedes hacer, estos son algunos usos que podrías darle a un documento Javascript:

• Buscar un elemento HTML y cambiar alguna propiedad como el color, el tamaño, o el contenido.
• Quedarse escuchando cuando un botón sea clickeado, una tecla sea presionada o haya un scroll (Usar la rueda del mouse) y hacer algo.
• Almacenar información única de un usuario y generarla en caliente en el futuro (Escribir HTML dinámicamente).

En este punto tienes un sitio web con mucho más potencial, puedes transmitir información a través de contenido escrito y multimedia, puedes hacerlo de manera estética y atractiva, y finalmente puedes agregar interactividad para que la experiencia vaya más allá de solo leer una revista o un periódico digital.

A continuación te dejaré algunos de los recursos gratuitos con los cuales podrás aprender Javascript:

• Javascript Basics - Mozilla Developer Network
• Learn Javascript Online
• Eloquent Javascript
• Javascript 30 - Wes Bos

Escoge un framework

Algunos de los aspectos más valiosos, desde mi perspectiva, acerca de la industria tecnológica son el ecosistema y las comunidades. Vas a encontrar personas mejorando las herramientas de trabajo, ayudando desarrolladores atascados en su código, o aportando a comunidades de aprendizaje como meetups, blogs o vlogs.

Hablemos de herramientas de trabajo (los frameworks web). Posiblemente habrás escuchado el dicho “no re-inventar la rueda”, en desarrollo web la rueda ha evolucionado para solucionar los problemas más comunes a la hora de crear sitios y aplicaciones web. Un framework web es una abstracción para solucionar problemas comunes de manera administrada/guiada.

Foto por Roman Odintsov de Pexels

HTML, CSS y Javascript siguen vigentes, puedes hacer un sitio totalmente asombroso solo con esos tres ingredientes. Los frameworks solo cambian el paradigma en el cual se combinan los tres ingredientes.

No opinaré de ninguno para no sesgar, pero aquí hay una lista de los frameworks más usados en el mercado (en ese orden). Es tu decisión escoger el que más te guste, practicarlo con proyectos personales, y finalmente conseguir tu primer trabajo en tecnología 💪.

React

Documentación oficial: https://reactjs.org/docs/getting-started.html

Cursos gratuitos:

• React Course - FreeCode Camp
• React Crash Course - Traversy Media
• React for Beginners - Dave Gray

Vue

Documentación oficial: https://vuejs.org/guide/introduction.html

Cursos gratuitos:

• Vue Course - FreeCode Camp
• The best way to learn Vue - Vue Mastery
• Vue JS Crash Course - Traversy Media

Svelte

Documentación oficial: https://svelte.dev/docs

Cursos gratuitos:

• Svelte Course - FreeCode Camp
• Svelte Crash Course - Traversy Media
• Svelte Crash Course - Evan Does Tech

No pares de aprender

La tecnología se mueve rápido, lo has notado con la velocidad en la que los teléfonos, los electrodomésticos o las aplicaciones evolucionan o se hacen obsoletos, dando paso a nuevas e innovadoras soluciones. Esto mismo ocurre con el desarrollo web, nuevas funcionalidades, librerías, frameworks, o conocimientos que no has adquirido empiezan a aparecer en tu lista de prioridades y depende de ti priorizar lo más importante.

No necesitas aprender todo, lo que necesitas es estar vigente en el mercado. HTML, CSS y Javascript son los tres pilares fundamentales y es importante dominarlos. Más tarde depende de ti identificar cuales son las herramientas adicionales que te acercarán a tu trabajo ideal y organizarte tu tiempo para dominarlas.

Foto por RF._.studio de Pexels

Y ahora qué?

Es el final de este artículo, pero el inicio de una nueva aventura. Ahora que sabes en qué consiste ser desarrollador web y entiendes lo que se necesitas para alcanzarlo, es el momento de que te lo creas y te visualices alcanzando el éxito.

• Invierte tu tiempo y tu dinero (si es posible) en realizar actividades que te ayuden a ser un mejor desarrollador.
• Crea tu cuaderno de notas en el cual estén todos los conceptos que has aprendido.
• Realiza proyectos personales y présentalos como tú portafolio.
• Participa en comunidades digitales como Dev.to o Hashnode.com.
• Encuentra un mentor que te ayude a mejorar tus habilidades.
• Resiste ante la frustración y vuelve a empezar si es necesario.

Quiero agradecerte seguir esta guía, espero que impacte positivamente tu carrera y puedas cumplir el propósito de ser un desarrollador. Déjame saber que te ha parecido y compártelo con alguien a quien le pueda servir.

Hasta la próxima 👋.