La programación informática es un campo vasto y complejo. Para aquellos interesados en aprender programación y desarrollo web, establecer un camino para aprender toda la información relevante puede parecer estupendamente 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 a la vez necesitarás enfocarte en un área particular o lenguaje de programación, puesto que existen mucha más información de la que puedes dominar si deseas abarcar todo.
Los recién llegados proclaman muchas veces: «¡Ni siquiera sé por dónde comenzar!»
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 empezar, discutamos brevemente lo que me gusta llamar el Círculo de Conocimiento (a la vez conocido como la forma generalizada en que me gusta pensar sobre la adquisición de conocimiento). Considere la próxima imagen:
Para el propósito de este post, supongamos que usted está interesado en aprender a construir su primer sitio web, en el Círculo de Conocimiento, el borde exterior define 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 hay.
Inicialmente, el círculo más interno es probablemente bastante pequeño, debido a que estás comenzando a indagar en lo que necesitas aprender para saber el desarrollo web. Tal vez usted sabe cómo encender una computadora; entiende que algo llamado navegador le posibilita entrar a Internet (que usted sabe que algunas personas a la vez llaman la web); puede buscar temas de interés y repasar los resultados de la búsqueda para establecer 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. Aún cuando puede que no comprendas lo que significan, términos como dominio, alojamiento, Wix y eCommerce están ahora en tu radar. A continuación, haga clic en el link Cómo crear un sitio web: Guía punto a punto para principiantes (2018) y se les da la bienvenida con un recopilatorio adicional de términos: WordPress, sistema de administració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 procedimiento 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 procedimiento 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 alojamiento 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 factible. Para esto, primero existen que ampliar el segmento medio descubriendo nuevos conceptos y después 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 establece 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. A la vez es el lenguaje más importante que puedes aprender a escribir bien al principio de tu carrera de desarrollo web.
Desde luego, los sitios web están impulsados por algo más que por un contenido bien estructurado. Algunos están bellamente diseñados. Algunos disponen 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?»
- «¿Sencillamente necesito crear este menú de navegación en cada archivo?»
- «¿Puedo guardar la información que introduzco en un formulario?»
- «¿Es alcanzable 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 posibilitan crear plantillas reutilizables para dividir distintas piezas de contenido como la navegación. Los lenguajes de base de datos como MySQL le posibilitan guardar datos de formularios. Al mismo tiempo, escribir marcas semánticas contribuye en gran medida a hacer que su contenido sea alcanzable.
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 existen caminos, existen 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ó previamente un post que preguntaba si primero debería aprender JavaScript o PHP. Una pregunta alternativa podría ser: «¿Debería comenzar 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) Al mismo tiempo, 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 distintos configuraciones, están escritos en un lenguaje llamado JavaScript. Desarrollar un dominio de HTML, CSS y JavaScript es importante 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 a la vez son hermosos.
Para el desarrollo de CSS, CSS Tricks cuenta con una gran guía para principiantes para aprender HTML y CSS. Una vez que usted ha agotado su colección de esos posts, disponen cargas más sobre el desarrollo más general del frontend.
A Book Apart publica normalmente libros sobre una gama 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 posts, tutoriales y libros de forma gratuita, y a la vez ofrece membresías que proporcionan grandes descuentos a ese contenido. A la vez 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 guardar 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 administración de contenidos de código abierto WordPress usa una combinación de MySQL (lenguaje de base de datos) y PHP (a la vez 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 sugerimos 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 estupendamente versátil para construir la estructura de su sitio, puesto que puede separar el contenido reutilizable como los menús de navegación en archivos separados. De esta manera, si esa parte de su sitio cambia, se puede actualizar fácilmente en cualquier lugar donde se utilice esa parte.
Desde luego, el verdadero poder de PHP está en el desarrollo de aplicaciones. Porque 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 utilizar PHP para las plantillas, introducir una base de datos a la mezcla y aprender a escribir consultas es la próxima ruta lógica.
Recursos de la campaña
Existen, 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.
Desde luego, al buscar otros recursos mientras investigo este post, 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 obtener, pero sitios como Lynda.com y Laracasts disponen 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 esencial, debido a que 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.
Previamente, 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 lograr 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 debido a que usted es competente. A lo largo del 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 administración de dependencias mediante Composer, pruebas de unidades con PHPUnit, o prácticas de desarrollo como SOLID. En cualquier camino, usted puede hallar sitios web que discuten el control de versiones, aplicaciones de administración de contenido, diseño sensible, diseño web intrínseco, o un concepto llamado «desarrollo impulsado por pruebas»
Resumiendo
Sin tener en cuenta 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 examinar su propia competencia, nivel de intereses y las siguientes áreas de interés. No existen caminos correctos o equivocados. Por suerte, existen algunas personas que han hecho público rutas sugeridas.
Un ejemplo de ello es el «Developer Roadmap – 2018» de Kamran Ahmed, hecho público 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 sugerimos que empieces con lo básico descrito previamente y que vuelvas a visitar los posts de Kamran una vez que te sientas preparado para aprender más. Al mismo tiempo, tome nota de los nuevos términos o información que surjan a lo largo del procedimiento 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 normalmente y examinar 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, a la vez. Existen algunos aspectos del campo que son menos emocionantes pero que todavía son importantes de conocer para alcanzar el éxito a largo plazo. A veces, un tema básicamente 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.
