La programación informática es un campo vasto y complejo. Para aquellos interesados en aprender programación y desarrollo web, determinar un camino para aprender toda la información relevante puede parecer increíblemente desalentador.
No sólo necesitarás un equipamiento específico como el mejor monitor para programar que te puedas permitir, así como ratones, teclados y sillas ergonómicas para cuidar tu salud si no que también necesitarás enfocarte en un área particular o lenguaje de programación, ya que hay mucha más información de la que puedes dominar si pretendes abarcar todo.
Los recién llegados proclaman con frecuencia: «¡Ni siquiera sé por dónde empezar!»
Esta guía tiene por objeto proporcionar dirección y ayudarle a descubrir los caminos correctos para el aprendizaje del desarrollo web.
El Círculo del Conocimiento
Antes de comenzar, discutamos brevemente lo que me gusta llamar el Círculo de Conocimiento (también conocido como la forma generalizada en que me gusta pensar sobre la adquisición de conocimiento). Considere la siguiente imagen:
Para el propósito de este artículo, supongamos que usted está interesado en aprender a construir su primer sitio web, en el Círculo de Conocimiento, el borde exterior establece ampliamente el tema del Desarrollo Web. Los círculos internos definen su nivel de familiaridad con los subtemas más específicos del tema general. Estos círculos interiores dividen su comprensión del tema más amplio en tres secciones: temas que usted conoce (o cree conocer), temas que ha escuchado y temas que ni siquiera sabe que existen.
Inicialmente, el círculo más interno es probablemente bastante pequeño, porque estás empezando a indagar en lo que necesitas aprender para entender el desarrollo web. Tal vez usted sabe cómo encender una computadora; entiende que algo llamado navegador le permite acceder a Internet (que usted sabe que algunas personas también llaman la web); puede buscar temas de interés y analizar los resultados de la búsqueda para determinar cuál de ellos representa con precisión las respuestas a sus preguntas.
Puede que no parezca mucho, pero este es un gran punto de partida. Ya tienes algo en común con la gran mayoría de los programadores informáticos del mundo: si no sabemos algo, lo buscamos.
Su primera búsqueda
Imagine que busca la frase «cómo construir un sitio web» y encuentra los siguientes resultados:
Acabas de poblar el segmento medio de tu Círculo de Conocimiento. Aunque puede que no entiendas lo que significan, términos como dominio, hosting, Wix y eCommerce están ahora en tu radar. A continuación, haga clic en el enlace Cómo crear un sitio web: Guía paso a paso para principiantes (2018) y se les da la bienvenida con un conjunto adicional de términos: WordPress, sistema de gestión de contenidos, HTML, CSS, Drupal, etc.
Antes de cada clic, todos estos términos ocupaban tu círculo más externo (temas que ni siquiera sabías que existían), pero a través del proceso de investigación, uno por uno los estás moviendo ahora al círculo medio: temas de los que has oído hablar. Esto es un progreso excelente!
El proceso de aprender cualquier cosa -desarrollo web, hornear, correr para el Congreso- puede dividirse en estos pasos. Comenzando con una sola búsqueda, aprenderá un nuevo conjunto de términos, patrones de notificación (dominio y hosting aparecieron varias veces en nuestra búsqueda inicial), y comenzará a armar el rompecabezas. La meta de su Círculo de Conocimiento es hacer crecer el círculo interno -las cosas que usted conoce- tanto como sea posible. Para ello, primero hay que ampliar el segmento medio descubriendo nuevos conceptos y luego seleccionando aquellos en los que centrar los esfuerzos.
«Eso es genial, ¿pero a dónde voy a ir desde aquí?»
Te daré una ventaja: El 100% de todos los sitios web están compuestos de HyperText Markup Language, más fácilmente reconocido por su inicialismo: HTML. Este lenguaje define la estructura del contenido de un sitio web e indica a su navegador las diferencias entre títulos, secciones, párrafos, imágenes, listas con viñetas, listas numeradas, etc. HTML bien estructurado es legible tanto por los navegadores como por los dispositivos que ayudan a los usuarios de la web con problemas de visión. Es la base de Internet. También es el lenguaje más importante que puedes aprender a escribir bien al principio de tu carrera de desarrollo web.
Por supuesto, los sitios web están impulsados por algo más que por un contenido bien estructurado. Algunos están bellamente diseñados. Algunos tienen interacciones extremadamente dinámicas, y otros funcionan como aplicaciones informáticas nativas. En ocasiones, usted encuentra un sitio que lo hace todo.
Mientras aprende sobre HTML, puede que se encuentre haciendo algunas preguntas nuevas:
- «¿Cómo puedo hacer que esto se vea mejor?»
- «¿Realmente necesito crear este menú de navegación en cada archivo?»
- «¿Puedo guardar la información que introduzco en un formulario?»
- «¿Es accesible mi margen de beneficio?»
Una vez más, la búsqueda es tu amigo; y al aprovechar tus habilidades de investigación, aprenderás nueva información. Tal vez descubra que el CSS es responsable de la apariencia de un sitio web. Lenguajes como PHP le permiten crear plantillas reutilizables para dividir distintas piezas de contenido como la navegación. Los lenguajes de base de datos como MySQL le permiten guardar datos de formularios. Además, escribir marcas semánticas contribuye en gran medida a hacer que su contenido sea accesible.
La bifurcación en el camino
Comenzarás a ver nuevos caminos de aprendizaje a medida que continúes adquiriendo más conocimiento; y donde hay caminos, hay opciones. Ya sea que le importe más cómo se ve un sitio web y cómo interactúan los usuarios con él, o cómo un sitio web guarda y pone a disposición sus datos, va a informar su decisión de buscar conocimientos específicos en esas áreas. Definimos la apariencia de un sitio web y la recopilación de interfaces de usuario como su «frontend», y sus estructuras de datos y lógica de aplicación como su «backend»
Mi amigo y colega, Justin Foell, publicó anteriormente un artículo que preguntaba si primero debería aprender JavaScript o PHP. Una pregunta alternativa podría ser: «¿Debería empezar por aprender a construir interfaces de usuario o sistemas?» Esa es la principal diferencia entre el desarrollo de frontend y backend.
DESARROLLO FRONTAL
La interfaz de un sitio web comprende el contenido visible al público que los visitantes regulares verán. Como ha aprendido, el HTML proporciona la estructura para ese contenido, pero la responsabilidad de la apariencia visual de ese contenido pertenece a las Hojas de Estilo en Cascada (Cascading Style Sheets, o CSS) Además, algunos comportamientos de su sitio que responden a las entradas de los usuarios, como la activación de una presentación de diapositivas o el uso de comandos del teclado para activar diferentes configuraciones, están escritos en un lenguaje llamado JavaScript. Desarrollar un dominio de HTML, CSS y JavaScript es esencial para convertirse en un ingeniero web de frontend.
Desarrollo de Frontend: plantillas, estilos de presentación, animaciones, manejo de interacciones de usuarios.
Recursos de la campaña
Una de mis series de libros favoritos para una introducción al desarrollo de frontend es Diseño Web con HTML, CSS, JavaScript y jQuery Set, escrito por Jon Duckett. Estos libros son una maravillosa introducción a cada uno de los tres idiomas principales de la interfaz, y también son hermosos.
Para el desarrollo de CSS, CSS Tricks tiene una gran guía para principiantes para aprender HTML y CSS. Una vez que usted ha agotado su colección de esos artículos, tienen cargas más sobre el desarrollo más general del frontend.
A Book Apart publica regularmente libros sobre una variedad de temas de renombrados expertos en la materia. Puede que le interese su serie Front-end Fundamentals. Poco después, compruebe tanto la serie onResponsive Design como Front-end Next Steps.
Smashing Magazine es otro gran recurso general para el desarrollo de frontales. Smashing publica un montón de artículos, tutoriales y libros de forma gratuita, y también ofrece membresías que proporcionan grandes descuentos a ese contenido. También organizan varios eventos en vivo durante todo el año.
DESARROLLO BACKEND
El backend (a veces llamado «server-side») de un sitio consiste típicamente en:
- un mecanismo para almacenar datos de forma persistente
- una colección de archivos que un servidor web entiende
Los datos se pueden almacenar en archivos, pero es más probable que utilice una base de datos en su lugar. El sistema de gestión de contenidos de código abierto WordPress utiliza una combinación de MySQL (lenguaje de base de datos) y PHP (también conocido como Pre-HyperText PHP, un lenguaje del lado del servidor) para generar dinámicamente contenido HTML.
Backend: bases de datos, lenguajes del lado del servidor, lógica de aplicación, interfaces de programación de aplicaciones.
Si usted está interesado en aprender cómo hacer un sitio web dinámico, entonces le recomendamos que considere aprender PHP inmediatamente después de aprender HTML.
PHP comenzó como un lenguaje de plantillas. Como tal, puede crear plantillas HTML que usen PHP para atraer sus datos dinámicos. Esto lo hace increíblemente versátil para construir la estructura de su sitio, ya que puede separar el contenido reutilizable como los menús de navegación en archivos separados. Por lo tanto, si esa parte de su sitio cambia, se puede actualizar fácilmente en cualquier lugar donde se utilice esa parte.
Por supuesto, el verdadero poder de PHP está en el desarrollo de aplicaciones. Debido a que es un lenguaje backend, la mayoría de su código PHP no producirá plantillas. En su lugar, se utilizará para conectarse a fuentes de datos como una base de datos o una interfaz de programación de aplicaciones para recuperar, manipular y actualizar esos datos. Una vez que aprenda a usar PHP para las plantillas, introducir una base de datos a la mezcla y aprender a escribir consultas es la siguiente ruta lógica.
Recursos de la campaña
Hay, en mi opinión, dos recursos definitivos para aprender PHP. En primer lugar, PHP tiene un glorioso manual en línea que será su recurso de consulta cada vez que tenga preguntas. Segundo, PHP The Right Way es un libro en línea que cubre todo, desde plantillas hasta servidores e implementación, para que pueda concentrarse en un área del lenguaje que sea adecuada para su nivel de habilidad.
Por supuesto, al buscar otros recursos mientras investigo este artículo, me acabo de enterar de que Jon Duckett está publicando un nuevo libro sobre el desarrollo del lado del servidor con PHP y MySQL. No soy dueño de esto, pero sabiendo lo buenos que son los libros de las series frontend, ¡estoy haciendo un pedido por adelantado hoy!
En mi opinión, los buenos recursos MySQL en línea son un poco más difíciles de conseguir, pero sitios como Lynda.com y Laracasts tienen algunos videos instructivos sólidos, si estás dispuesto a pagar por una suscripción.
¿Sigues conmigo?
¡Bien! Esa bifurcación en el camino es importante, porque tu pregunta inicial, «¿Cómo construyo un sitio web? Algunos serán satisfactorios, y otros se darán cuenta de que es mejor no explorarlos. Los dejamos allí para que los descubras.
Anteriormente, sugerí que la programación de computadoras contiene muchos más subtemas de los que cualquier persona podría esperar aprender. Como parte de la elección de tu propio camino, debes preguntarte continuamente si la información que estás aprendiendo es necesaria para ayudarte a alcanzar tus metas personales. Sólo tú puedes saberlo con seguridad.
Continuando por el camino
Una vez que dedique suficiente tiempo al aprendizaje de los conceptos básicos del desarrollo de front end o backend, ya no podrá decir que ha oído hablar de sus idiomas. En cambio, puede decir con confianza que es competente con ellos. Felicitaciones! Has movido con éxito uno o más temas a la sección más interna de tu Círculo de Conocimiento: «Temas que conoces»
Sin embargo, el aprendizaje no se detiene porque usted es competente. Durante el curso de aprendizaje del desarrollo de frontend, usted puede descubrir otros temas: Preprocesadores CSS como Sass o LESS, motores de plantillas como Twig o Blade, o marcos JavaScript como React, Vue o Angular. O bien, mientras aprende desarrollo backend, escuchará sobre la gestión de dependencias a través de Composer, pruebas de unidades con PHPUnit, o prácticas de desarrollo como SOLID. En cualquier camino, usted puede encontrar sitios web que discuten el control de versiones, aplicaciones de gestión de contenido, diseño sensible, diseño web intrínseco, o un concepto llamado «desarrollo impulsado por pruebas»
Resumiendo
Independientemente de su camino, llevar el conocimiento a su círculo interior conduce a nueva información, preguntas y maneras de pensar sobre un tema. En ese momento, depende de usted evaluar su propia competencia, nivel de intereses y las siguientes áreas de interés. No hay caminos correctos o equivocados. Afortunadamente, hay algunas personas que han publicado rutas sugeridas.
Un ejemplo de ello es el «Developer Roadmap – 2018» de Kamran Ahmed, publicado en GitHub. Kamran ofrece rutas recomendadas tanto para el desarrollo de front-end como de backend. Sus caminos son ricos en información, pero pueden parecer abrumadores, si es lo primero que miras. Te recomendamos que empieces con lo básico descrito anteriormente y que vuelvas a visitar los artículos de Kamran una vez que te sientas preparado para aprender más. Además, tome nota de los nuevos términos o información que surjan durante el proceso de aprendizaje. La frecuencia con la que vea esos términos le informará sobre los temas a tratar a continuación.
Asegúrese de consultar con usted mismo regularmente y evaluar si está aprendiendo temas que le gustan o no. Si es así, ¡genial! Usted ha descubierto temas ricos en nueva información que están justo dentro de sus áreas de interés. Si no, está bien, también. Hay algunos aspectos del campo que son menos emocionantes pero que aún son importantes de conocer para lograr el éxito a largo plazo. A veces, un tema simplemente no es para ti. Dependiendo de lo lejos que estés en tu camino, puedes descubrir que el camino en sí no es el correcto. La evaluación de su interés en la información que está aprendiendo es muy importante para guiar su camino.