Primeros pasos en el Desarrollo Web.

— HOLA MUNDO —

Me llamo Yoel, soy un Gallego muy simpático y llevo en esto de la Programación Web desde hace relativamente poco. He empezado como alumno un bootcamp en Full Stack Web Developer con http://keepcoding.io/es/ , curso de casi un año y me gusta picar código. Me apasiona buscar solución a los problemas, mis retos y buscar la forma de afrontarlos día a día. Esto es un pequeño resumen desde mis comienzos hasta ahora…

HOME

Todo el mundo, cuando te inicias, te dice que la Web es relativamente fácil y que con un navegador y un editor de texto puedes hacer auténticas virguerías. Luego, te dejan caer que sin Git no vas a ningún lado, así que les haces caso. Primero aprendes bien lo que significa Staying Area, Git Status y Git Add . y Git Commit -m , creas ramas y mueves el puntero HEAD donde te plazca. Descubres Github, clonas un proyecto y sincronizas commits con pull y push. Finalmente te asombras con las posibilidades de exploración y de aprendizaje con lo del Fork y lo del Pull Request.

HTML

La primera toma de contacto es que el html tiene un nombre raro. Parece fácil porque de primeras solo tengo que acordarme de abrir y cerrar paréntesis entre las etiquetas <> y luego jugar aprendiendo las principales.
Voy metiendo mano poco a poco, descubriendo las diferencias entre el <span> y el <div>, lo que se llama semántica en html5 — ya que toda etiqueta tiene un sentido semántico para que hacerse amiga de los buscadores.

Aquí, los genios harán autenticas obras de arte (con el SEO); yo solo llego a poner un ejemplo en el que parte de la semántica se resume cuando tienes que meter una imagen explicativa con un texto. La imagen va con <figure> y dentro de ella va la etiqueta que incluye el texto un <figcaption>. Sigues con el validate o el no-validate, que nunca llames dentro de las etiquetas al CSS o al Javascript, empiezas a verle juego a los <td> y a los <tr> y no te imaginas que una lista puede acabar siendo un menú horizontal que se adapte a tus dispositivos.

Que si buenas practicas por un lado, que si etiquetas que no se cierran por otro, que si class e id, que si name y <h1>…<h6>, empiezas muy ilusionado, el factor de aprendizaje es relativamente rápido pero aún quedan muchas más cosas…

Toda etiqueta tiene un sentido semántico para que hacerse amiga de los buscadores…

CSS

Luego descubres que se pueden pintar colores y formas en la Web, el llamado CSS ( las hojas de estilos ). Al principio, juegas con el background-color y los bordes, descubres el modelo de caja y que tienes un padding y un margin (aquí ya cuesta un poquito más), los distintos selectores y que puedes seleccionar un class, un id y pintar solo esa etiqueta en html.

Después, te preguntas cómo podría organizarse mejor la información en la página y entonces ves que hablan de un tal Layout. Así, vas a documentación de la W3C y ves la etiqueta position — que primeramente toda etiqueta es static — y luego ya pasas al fixed (véase un footer) para finalmente ver (el relative y el dichoso absolute). Haces tu primer grid de columnas, para ver cómo funciona el calc() y cómo se divide la pantalla en diferentes secciones que puedes utilizar para organizar los elementos. Juegas con los displays y descubres que <div> y <span> ya son algo diferentes (eso que al principio de los tiempos casi no lo notabas), ves que el none sirve para ocultar elementos del html y luego mostrarlos cuando quieras.

Cuando llegas a Flexbox todo lo anterior carece de sentido, es un ataque a la moralidad del programador, al principio cuesta pero finalmente es genial.

Aprendes que tienes un preprocesador de CSS llamado SASS y otro que se llama LESS (aquí meten variables y unos paréntesis raros que van de padres a hijos). Descubres que puedes declarar @mixins y unas funciones que ven el ancho mínimo y máximo del window (pantalla) y que esto más tarde se denominará como “responsive”.

Cuando llegas a Flexbox todo lo anterior carece de sentido…

JAVASCRIPT

Llega la funcionalidad, llegas a la magia de Javascript (JS). Ves como van las variables locales y globales, haces el primer scroll, tal y como escuchas en los eventos y los formularios, y es cuando descubres el poder de la asincronía y que tienes que tener cuidado con los tiempos de ejecución. Luego trasteas con funciones y descubres unas cosas llamadas librerías que te cambiarán la vida. Jquery, por poner un ejemplo, hace mas fácil las cosas difíciles de antes y luego descubres que tienes problemas con las fechas y tiras de otras librerías para gestionar el tiempo como Momments.js.

El JS se carga llamando a la etiqueta <script> en tu proyecto. Te preguntas qué es eso de los callbacks y empiezas a entender que javascript es un lenguaje que tiene muchas y bonitas cosas, que cada día salen nuevos frameworks, que tiene una comunidad brutal y la diferencia entre el cliente y servidor con un tal Node.js.

Y es cuando descubres el poder de la asincronía…

Terminas con un tal Gulp y automatizas todo lo visto anteriormente. Eres feliz haciendo que la maquina trabaje para ti, y ves que desde la recarga del navegador, cuando guardas en tu editor de texto, hasta el minificado de tu código para que ocupe menos espacio, tienes un mundo de posibilidades.

He sudado con los primeros proyectos y webs, pero aquí sigo picando código y aprendiendo cada día con muchísima ilusión y recordando y preguntando qué existe una comunidad en la cual mentores ayudan a amateurs y que la curiosidad es la mejor forma de aprender.

Me gustaría escribir de vez en cuando y contaros cómo evoluciona mi experiencia en la web, a que retos me enfrento cada día y como programar soluciona cosas y que es muy divertido.

¡¡¡ Larga vida al código !!!

<- Linkedin ->
<-
Twitter ->