Categoría: Notas del Desarrollador

  • De WordPress al desarrollo frontend: construyendo el mapa antes de recorrer el camino

    Después de haber asentado mi base como desarrollador web utilizando WordPress, puedo decir que la experiencia ha sido realmente fantástica. En relativamente poco tiempo pude familiarizarme con la herramienta, entender su escritorio, reconocer cómo se organiza un sitio web y, sobre todo, llevar mis primeros proyectos a la práctica.

    Pero ahora comienza una nueva etapa.

    Estoy entrando de lleno en el desarrollo frontend y, con ello, estoy empezando a comprender qué sucede realmente detrás de la interfaz que ve un usuario cuando entra en una página web.

    Uno de los primeros pasos ha sido acercarme a HTML, y aquí descubrí que había mucho más por entender de lo que inicialmente imaginaba.

    HTML significa HyperText Markup Language y, aunque muchas veces se habla de él de manera informal como si fuera un lenguaje de programación, técnicamente es un lenguaje de marcado. Su función es definir la estructura y el significado del contenido de una página mediante elementos y etiquetas. La documentación de HTML en MDN explica precisamente su papel como base estructural de la Web.

    Dicho de una manera sencilla: HTML establece qué es cada cosa dentro de nuestra página.

    Un título, un párrafo, una imagen, un enlace, una lista, un formulario… todos esos elementos forman parte de la estructura que posteriormente será interpretada por el navegador.

    Y ahí aparece CSS.

    Si HTML construye la estructura, CSS se encarga de presentar esa estructura. Es el lenguaje que permite definir aspectos como colores, tipografías, tamaños, espacios, posiciones y distribución de los elementos, hasta conseguir una interfaz visual coherente y cómoda para el usuario.

    Después aparece JavaScript, y aquí la página empieza a adquirir comportamiento.

    JavaScript permite programar la interacción de la interfaz: validar un formulario, responder a determinadas acciones del usuario, modificar elementos de la página, crear componentes dinámicos, gestionar eventos y construir experiencias mucho más interactivas. Para profundizar en estos conceptos, la guía de JavaScript de MDN ofrece una referencia técnica muy completa.

    Por eso, cuando comienzo a juntar HTML, CSS y JavaScript, empiezo a ver el desarrollo frontend de una manera diferente.

    Ya no estoy simplemente construyendo una página.

    Estoy empezando a entender el sistema que hace posible que esa página exista, tenga una estructura, pueda verse correctamente y, además, pueda responder a las acciones del usuario.

    Y aquí aparece otra parte interesante de este proceso: React, Git y GitHub.

    Al principio pensé que debía estudiar cada tecnología de manera completamente aislada y dominar una antes de pasar a la siguiente. Sin embargo, durante esta semana decidí hacer algo diferente.

    Estoy recorriendo el ecosistema del desarrollo web moderno de una manera más panorámica.

    Dedico unos minutos a HTML, después paso a CSS, continúo con JavaScript, observo cómo entra React en este escenario y luego me acerco a Git y GitHub para entender cómo se gestiona, versiona y comparte el código.

    Editor Visual Studio Code ejecutando un programa básico en Python

    No estoy buscando todavía dominar cada herramienta.

    Estoy intentando comprender cómo encajan las piezas.

    Y esa diferencia ha cambiado bastante mi manera de estudiar.

    En el caso de React, por ejemplo, estoy empezando a entender el concepto de componentes y cómo una interfaz puede construirse a partir de pequeñas piezas reutilizables. La documentación oficial de React plantea precisamente este enfoque como uno de los fundamentos para construir interfaces de usuario.

    A mis 56 años, mi objetivo no es recorrer este camino como si estuviera siguiendo exactamente el mismo proceso que un estudiante universitario que dispone de varios años para profundizar progresivamente en cada asignatura.

    Necesito ser pragmático.

    Y aquí la inteligencia artificial está desempeñando un papel interesante dentro de mi proceso de aprendizaje. Hoy tenemos acceso a herramientas que permiten investigar, contrastar conceptos, resolver dudas, obtener explicaciones alternativas y avanzar de una manera mucho más autodidacta.

    Pero hay algo que considero todavía más importante:

    No quiero confundir conocimiento con entendimiento.

    Puedo memorizar qué significa HTML, CSS, JavaScript, React, Git o GitHub.

    Pero eso no significa necesariamente que comprenda cómo funcionan juntos.

    Por eso, en esta primera fase estoy buscando precisamente eso: entendimiento y visión de conjunto.

    Quiero reconocer el terreno antes de comenzar a recorrerlo en profundidad.

    Durante esta semana, este enfoque me ha hecho sentir más dinámico. Tengo un panorama mucho más amplio y comienzo a identificar las relaciones entre las diferentes tecnologías que forman parte del desarrollo web frontend.

    Más adelante llegará la segunda etapa: profundizar.

    Volveré sobre HTML para comprender mejor su estructura y semántica. Profundizaré en CSS para entender realmente el diseño y el layout. Entraré con mayor profundidad en JavaScript y posteriormente en React.

    También dedicaré el tiempo necesario a Git y GitHub para incorporar correctamente el control de versiones y los flujos de trabajo colaborativos. Git permite registrar la evolución de un proyecto y trabajar con diferentes versiones del código, mientras que GitHub proporciona una plataforma para alojar repositorios y facilitar la colaboración. La documentación oficial de GitHub sobre Git explica esta relación con bastante claridad.

    Y entonces llegará lo que considero la parte verdaderamente importante:

    La práctica.

    Todos los instructores que he ido consultando coinciden en algo fundamental: aprender desarrollo web no consiste solamente en consumir cursos, vídeos o documentación.

    Hay que escribir código.

    Hay que equivocarse.

    Hay que romper cosas.

    Hay que investigar por qué dejaron de funcionar.

    Y después volver a intentarlo.

    Porque llega un momento en el aprendizaje en el que leer sobre programación deja de ser suficiente. Es necesario sentarse frente al editor, escribir una línea de código y comprobar qué ocurre cuando esa línea pasa de nuestra cabeza a la máquina.

    Ahí es donde realmente comienza otra etapa del aprendizaje.

    Por ahora, estoy construyendo el mapa.

    Después vendrá el camino.