En este artículo quiero hacer un breve y sencillo resumen de por dónde hay que empezar para convertirse en desarrollador web. Si te estás planteando hacerlo, aquí tienes la información sobre los conocimientos que te harán falta. Incluyo también varios enlaces a recursos gratuitos y de pago que sirven para aprender a desarrollar de una forma más fácil y eficaz.
Antes de empezar, quería comentar que en mi opinión hay 2 cosas bastante importantes a la hora de introducirte al mundo de programación y desarrollo web:
- Sería conveniente (aunque no es obligatorio) tener un nivel de inglés moderadamente alto. ¿Por qué? Es el idioma que se utiliza mucho en programación y es más fácil recordar los conceptos si realmente entiendes que significan en términos de idioma. También es cierto que la mayoría de los buenos recursos para aprender a programar están escritos/grabados en inglés.
- Lo más importante: un fuerte deseo de aprender, dedicación y capacidad de trabajo. Cómo en todo, es esencial para conseguir resultados. Las cosas en el mundo del desarrollo web pueden parecer bastante complicadas mientras avanzas. Tendrás que reunir tus fuerzas y seguir hasta que todo parezca más fácil (este momento llegará seguro si le pones dedicación).
Viam supervadet vadens (lat. «la ruta será superada por aquel que la camine»). Para convertirte en desarrollador web tendrás que hacer un camino largo, pero interesante. Mientras estás en ello, seguro entenderás que partes te gustan más y podrás especializarte en algo en concreto. ¡Vamos a por ello!
Índice del artículo
1. Conocimientos básicos para desarrollador web.
Empezamos por cosas más fáciles para no asustarnos demasiado:
1.1. Las bases de HTML
Hypertext Markup Language (HTML) básicamente controla el contenido y la estructura de lo que puedes ver en tu navegador web. No se trata realmente de un lenguaje de programación, sino un lenguaje markup. Define la apariencia de una página web, su presentación al usuario. Es una de las bases para entender el mundo del desarrollo web y tiene mucho sentido empezar por aquí.
Los conceptos principales que necesitarás dentro de HTML:
- tags, atributos, elementos
- títulos y párrafos
- listas
- enlaces
- imágenes
- tablas
- formularios
Recursos para aprender las bases de HTML:
En cuanto acabes con las bases de HTML, pasamos a CSS.
1.2. Las bases de CSS
Cascading Style Sheets (CSS) se utiliza principalmente para dar formato a las páginas HTML. Permite hacer ajustes de colores, fuentes, fondo y muchas otras opciones para que puedas visualizar sitios web y aplicaciones de una cierta forma. Con CSS puedes crear y agrupar formatos estructurados para varias páginas del sitio web y hacer cambios de una manera más fácil.
Los conceptos principales que necesitarás dentro de CSS:
- selectores y pseudo selectores
- estilos de texto, fondo, tablas
- ajustes de colores
- márgenes, paddings y borders
- posiciones de los elementos, floating
Recursos para aprender las bases de CSS:
En cuanto acabes con las bases de CSS, pasamos a JavaScript.
1.3. Las bases de JavaScript
JavaScript es un lenguaje de programación que se utiliza en la mayoría de las páginas web. Se ejecuta en todos los navegadores web sin necesidad de plugins externos . El uso más común de JavaScript consiste en combinarlo con HTML para crear contenidos interactivos, pasar datos al servidor, crear animaciones en las páginas web, transmitir información sobre el usuario al webmaster y muchos otros. Aparte del navegador, JavaScript se utiliza en servidores, aplicaciones desktop y otros sitios. Las posibilidades que ofrece JavaScript son realmente muy extensas, pero empezamos con las cosas básicas:
- arrays
- variables
- operadores
- funciones
- strings
- loops
Recursos para aprender las bases de JavaScript:
- Htmldog.com
- Codecademy.com
- JavaScript for Cats
- Eloquent JavaScript
- Wikibooks’ JavaScript book
- Mozilla’s JavaScript Guide
Muy bien, ahora ya conocemos algunos conceptos básicos del desarrollo web. Hemos visto por encima lo que se denomina front-end, es decir, la parte con la que interactúa el usuario del sitio web. Aparte de front-end, existe back-end – el código que funciona en el servidor.
El área de back-end es bastante extenso, pero como ya conocemos JavaScript, podemos empezar con Node.js.
1.4. Node.js
En pocas palabras, Node.js permite ejecutar el código JavaScript en el servidor en vez de hacerlo en tu navegador web. Hoy en día Node.js se está haciendo muy importante y realmente útil para aprender. Junto con Node.js también nos hará falta Express (una biblioteca que utiliza Node.js para trabajar con el servidor) y MondoDB (una base de datos que permite almacenar y extraer información).
Recursos para aprender Node.js:
- HowToNode.org
- NodeJs.org
- NodeTuts.com
- Blog.Modulos.io
- Cwbuecheler.com
- Cwbuecheler.com (Continuación)
1.5. Elegimos entre front-end, back-end o desarrollo full stack.
Vale, ya hemos probado a trabajar en front-end (interacción con el usuario) y back-end (interacción con el servidor). Aquí puede ser la hora de reflexionar un poco y decidir si queremos ir a más profundidad con front-end o con back-end o con los dos a la vez.
Si te gusta más la parte de interacción con el usuario, puedes convertirte en desarrollador front-end. Mira todo lo que viene citado a continuación en la Parte 2 de este artículo.
Si te gusta más la parte de interacción con los datos, puedes convertirte en desarrollador back-end. Mira todo lo que viene citado a continuación en la Parte 3 de este artículo.
Si te gustaría saberlo todo, puedes convertirte en desarrollador full stack. Mira todo lo que viene citado a continuación en la Parte 2 y en la Parte 3.
2. Desarrollador web de Front-end
Si quieres ser un buen desarrollador web de front-end, necesitas saber a la perfección HTML, CSS y JavaScript. También serán necesarios algunos frameworks importantes. Entonces, seguimos:
2.1. HTML de nivel intermedio y avanzado
Recursos para aprender HTML intermedio y avanzado:
2.2. JavaScript de nivel intermedio y avanzado
Para mejorar nuestro nivel de JavaScript podemos ver la serie de libros «You Don’t Know JS» por Kyle Simpson que se puede conseguir gratis en GitHub:
- You Don’t Know JS «Up & Going»
- You Don’t Know JS «Scope & Closers»
- You Don’t Know JS «this & Object Prototypes»
- You Don’t Know JS «Types & Grammar»
- You Don’t Know JS «Async & Perfromance»
- You Don’t Know JS «ES6 & Beyond»
Muy bien, ahora conocemos los 3 pilares de front-end: HTML, CSS y JavaScript. Pero no es suficiente todavía, nos tenemos que pasar a algunas bibliotecas/frameworks populares:
2.3. jQuery
Es la biblioteca más popular de JavaScript de todos los tiempos. Y aunque surgen nuevos frameworks, jQuery sigue siendo algo esencial para ser desarrollador web de front-end.
Recursos para aprender jQuery:
2.4. ReactJs
Los frameworks hacen el trabajo con los lenguajes de programación más fácil y solucionan muchos problemas. Para JavaScript existe un gran número de frameworks y la aparición de un nuevo framework es algo muy frecuente. React es un framework creado por Facebook, es bastante popular ahora y a lo mejor es buena idea empezar por aquí.
Recursos para aprender React:
2.5. Angular JS 1 y 2
Angular JS es un framework creado por Google que ganó muy rápidamente la popularidad. El asunto aquí es que existen dos versiones de Angular JS. En la versión 2 de Angular Google hizo tantos cambios que la convirtió en algo muy diferente comparado con Angular 1. Entonces, si quieres ser experto en Angular tendrás que aprenderte los 2 frameworks. La versión 1 por ahora se utiliza más, pero poco a poco Angular 2 parece que va a ir ganando más importancia.
Recursos para aprender Angular JS:
Ahora, ya que hemos visto los frameworks, viene bien aprender algún CSS-framework. Los 2 principales son:
2.6. Bootstrap
Bootstrap es un CSS-framework creado por los desarrolladores de Twitter. Existen versiones de Bootstrap para Angular, Angular 2 y React.
2.7. Material Design
Material es un CSS-framework creado por desarrolladores de Google. Existen también versiones para Angular y React. Va de maravilla con Angular, dado que también es de Google.
Recursos para aprender Bootstrap y Material:
- React Bootstrap
- Angular Bootstrap
- Angular 2 Bootstrap
- Material UI
- Angular Material
- Angular 2 Material
3. Desarrollador web de Back-end
Para trabajar con back-end existen muchísimos lenguajes de programación que se diferencian bastante entre ellos. Aquí quiero mencionar los lenguajes más populares que durante varios años se consideran los mejores para programar en back-end. Cabe destacar, que no hace falta ser experto en todos los lenguajes, lo normal sería especializarse en alguno/-s. En cuanto encuentres algo que te guste, profundiza en ello.
Yo pondría los lenguajes de back-end en el siguiente orden (puedes empezar con el número 1 y avanzar hasta que encuentres algo que te interese más):
3.1. Java
Java es un lenguaje muy popular y muy universal. En Java se programan las aplicaciones para Android, aplicaciones de desktop y las aplicaciones web. Existe un importante número de recursos que puedes utilizar para aprender Java. Es el lenguaje más popular de programación orientada a objetos. Si quieres ser desarrollador web de back-end es una buena opción para empezar.
Recursos para aprender Java:
3.2. C#
C# ha sido creado por Microsoft para competir con Java. Antes no se utilizaba mucho en sistemas no desarollados por Microsoft, pero la situación se esta cambiando. También se trata de un lenguaje orientado a objetos. Puede utilizarse para hacer aplicaciones web y aplicaciones para desktop. A lo mejor te inclinarás por C# si estas acostumbrado a trabajar con Windows.
Recursos para aprender C#:
3.3. Python
Python es un lenguaje perfecto para cumplir los objetivos de programación de una forma rápida. Es relativamente fácil de aprender y cada año gana más popularidad. A lo mejor, si los primeros dos lenguajes no te gustaron mucho, puedes profundizar con Python.
Recursos para aprender Python:
3.4. PHP
PHP es un lenguaje de programación que se utiliza para el desarrollo de aplicaciones web dinámicas. Tiene bastante flexibilidad y funciona con muchos tipos de gestores de contenido de páginas web (como WordPress, por ejemplo) y frameworks web. Se considera también un lenguaje relativamente fácil de aprender, ya que a lo largo de su historia su uso se simplificó en varios aspectos.
Recursos para aprender PHP:
3.5. JavaScript
Si ya viste la parte de Front-end, ya sabes de que se trata. Con el uso de Node.Js, el JavaScript del servidor está ganando cada vez más popularidad.
Repito los enlaces útiles para aprender JavaScript de nivel más avanzado:
- You Don’t Know JS «Up & Going»
- You Don’t Know JS «Scope & Closers»
- You Don’t Know JS «this & Object Prototypes»
- You Don’t Know JS «Types & Grammar»
- You Don’t Know JS «Async & Perfromance»
- You Don’t Know JS «ES6 & Beyond»
3.6. Ruby
Ruby es una mezcla entre programación imperativa y funcional. Es uno de los lenguajes bastante usados hoy en día y ayuda a cumplir los objetivos de una manera bastante original. A lo mejor siendo desarrollador web especializado en Ruby tendrás menos competencia en el mercado laboral.
Recursos para aprender Ruby:
- RubyMonk
- Michael Hartl’s Ruby on Rails Tutorial
- Khan Academy
- Code Academy
- Rails for Zombies, by Code School
- Dev Bootcamp
- General Assembly
- The FireHose Project
- Hack Reactor
- Thinkful
- Bloc
Para finalizar
Ser desarrollador web es un reto difícil, pero alcanzable. Aquí tienes una lista de conceptos necesarios a la hora de empezar a programar, crear aplicaciones web y desktop. Obviamente, esta lista no es completa y os invito a poner más enlaces a buenos recursos en los comentarios abajo.
Espero que el artículo os haya resultado útil, pronto hablaré más sobre varios aspectos del desarrollo web. ¡Muchas gracias por leer!
Está genial, un post muy completo y bien explicado. Me has resuelto muchas dudas con este artículo. Un besico
Gracias Patricia, me alegro que te haya sido útil el artículo.
muy bueno y detallado
¡Muchas gracias!
yo estoy en cero, solo estoy buscando desde hace rato una buena información porque me gusta esto, la verdad cada vez estoy mas animado, gracias por la buena información ya que avía leído de todo un poco, pero nada ordenado con estos datos uno ya sabe hasta donde aprender gratuitamente.