Antes de comenzar, te recomiendo leer la primera parte.
Primer Etapa: El Desarrollo Frontend
Los diseñadores gráficos que estén en la sala no se ofendan por mi siguiente afirmación: El desarrollo front-end es el primer paso y más sencillo para iniciarnos como full stacks.
Y no, no estoy diciendo que es más fácil frontend que backend. De hecho yo personalmente no soy capaz de crear una plantilla CSS decente y llevo años en esto.
Pero la práctica dice que los resultados del lado de frontend son visibles apenas tiramos nuestras primeras líneas de código. Dicho esto, empecemos a recorrer esta etapa.
HTML es el punto de inicio
HTML es el lenguaje de marcado por definición que interpreta el navegador. Es el esqueleto de cualquier proyecto web que queramos iniciar. No debemos aprendernos las etiquetas de memoria, pero si saber donde buscarlas.
Para aprender HTML debemos hacer uso de su documentación oficial en W3Schools. Hoy día HTML está en su versión 5.
Las nuevas Etiquetas de HTML 5
Todos los que se hayan metido en este mundo hace unos años o los que inicien en este momento, asumen que HTML siempre fue así. La realidad es que la popularidad de este lenguaje explotó cuando pasó de su versión 4 a la 5. En este artículo puedes ver las principales diferencias entre versiones.
Si bien es cierto que existen muchos cambios, hay algunos que marcaron una diferencia abismal entre versiones. Por ejemplo la etiqueta Canvas: implementada para mostrar gráficos renderizados en tiempo real. ¿Qué significa esto? Videojuegos.
De hecho cuando comenzó el auge, Google hizo un par de juegos en HTML 5 muy interesantes. Demostró que la potencia de Canvas podía reemplazar a los sitios hechos con la vieja y ya enterrada tecnología Flash, la cual en sus mejores épocas dominaba el mercado del diseño web.
Mi consejo es: No menosprecies HTML porque sea un lenguaje de etiquetas. Tiene mucha potencia, y su última versión desplegó muchas funcionalidades que podrías estar perdiéndote por centrarte en estudiar lo mínimo y pasar a otra tecnología.
Hora del Maquillaje, CSS
CSS es un lenguaje de estilos que nos permitirá darle un diseño limpio a nuestras páginas en HTML. Por ejemplo si queremos que una página sea responsiva y se adapte a cualquier ancho de pantalla, necesitamos CSS.
No es un lenguaje complicado de entender, pero si puede ser complejo en proyectos grandes. Aquí es donde bifurca la senda, dividiendo a los diseñadores web de los programadores web.
- Si quieres ser un diseñador web, aprende CSS a fondo.
- Si quieres ser un programador web, aprende las bases de CSS.
Sea cual sea tu inclinación, para aprender CSS puedes leer la documentación oficial en W3Schools al igual que con HTML. Hoy día CSS está en su versión 3.
LESS y SASS
Cuanto más estudies CSS, notarás que muchos atributos empiezan a repetirse en distintos lugares. Tendrás muchas clases que hacen cosas similares. Se volverá difícil de mantener en muchos aspectos.
La comunidad decidió que aún si amaba el lenguaje de plantillas, ciertas tareas se volvían engorrosas. Así que como nacieron dos tecnologías que aplicaban lógica a CSS: LESS y SASS.
Las dos hacen lo mismo, son pre procesadores de CSS. ¿Qué significa esto? Básicamente crean código CSS dinámico. Esto nos permite reducir las propiedades repetitivas de CSS en un archivo .sass o .less, a algo más parecido a un script que se ejecuta y genera otra plantilla que no necesitamos tocar.
Esto se llama Transpiling: Escribir un código que luego un pre procesador lo convertirá en otro.
Sass no compila, transpila. Compilar es convertir código escrito a código de máquina o binario. Transpilar es convertir código escrito en otro código de distinto lenguaje.
Nuestro navegador no compila, además, sino que interpreta. Esto quiere decir que lee el código tal cual es, y no lo convierte.
Para profundizar Sass, pueden leer este artículo que detalla las propiedades y cómo implementarlo.
Media Queries
CSS 3 fue creado pensando en las tecnologías móviles y las páginas web responsivas o adaptativas.
Uno de los principios básicos para manejar webs adaptativas, es trabajar con anchos por porcentaje. Por ejemplo: una columna no ocupa 120px sino que podría ocupar 33.33% del ancho. Es un ancho dinámico.
Pero esto no alcanza. Si sólo nos basamos en los anchos dinámicos, tendremos webs en miniatura mirándolo desde nuestros dispositivos móviles. Para eso existen las media queries.
Estos componentes nos permiten limitar ciertos comportamientos según determinado ancho del dispositivo donde se esté mirando.
Por ejemplo: En un celular los carruseles funcionan muy mal. Entonces podemos decir que si el ancho es menor a 240px, entonces removemos ese componente.
Otros comportamientos son cambiar el ancho de las imágenes al 100% para que todas aparezcan una debajo de otra; quitar la cabecera y reemplazarla por una mas limitada; crear un menú hamburguesa; quitar un estilo de color de fondo que sea muy agresivo visto en dispositivos chicos, etcétera.
Lógicamente, también podemos trabajar hacia arriba. Por ejemplo en una TV. La mayoría de las apps en las smart TV son en realidad sitios webs embebidos. Entonces podemos crear queries donde los anchos mayores a 1080px tengan una distribución de elementos mas espaciado, más grandes y mover la cabecera hacia el costado.
Media Queries cubre todo lo que simplemente no podemos resolver sólo con anchos dinámicos, pero se complementan. Ninguno reemplaza al otro.
Frameworks de Maquetado
Puede que ames maquetar web. Te sientas y dejas que tu código CSS baile sobre los elementos de HTML.
Pero a veces (o casi siempre), los tiempos son limitados. Necesitas desarrollar un sitio web que funcione bien a la primera. Agilizar tu código.
También puede que no te guste maquetar. Quizá quieras centrarte en desarrollar la parte lógica de la web y facilitar el maquetado de alguna manera.
Sea cual fuera tu camino, un framework de maquetado es la mejor opción. Entendemos al framework como un marco de trabajo (traducción exacta), un conjunto de reglas pre programadas que nos permiten evitar hacer todo de cero.
La potencia del framework es por ejemplo traernos toda la estructura de responsive design y media queries resuelta. No tendremos que preocuparnos por ajustar anchos y verificar que se vea bien en todos los dispositivos, porque ya lo programaron los desarrolladores del framework.
Los frameworks mas conocidos son:
Los puristas de CSS no se sienten cómodos con esto: dicen que te limita. Tienen razón. Un framework facilita el desarrollo pero a la vez limita la creatividad.
Por ejemplo, Bootstrap se basa en un sistema de grids donde creamos una web con filas y columnas mediante etiquetas divisoras. Si quisiéramos que un divisor se posicione sobre otro; genere una animación especial por scroll; o crear un maquetado más artístico, nos vemos limitados.
Esto es normal dado que depende de la necesidad que tengamos. Si nuestra web necesita un diseño que no se pueda adaptar al sistema de grids, no podremos usar la mayoría de los frameworks de maquetado.
Es importante entender este enfoque porque quizá al principio no lo notemos, pero cuando tengamos que hacer cosas mas específicas, veamos el limitante.
No obstante, es perfectamente posible tener una página con un diseño de Bootstrap y dentro un componente personalizado de nuestro propio CSS.
Javascript, la lógica de la Web
Javascript es un lenguaje de programación que convierte páginas estáticas (solo html y css) en dinámicas. Sobre este lenguaje bifurcarán muchos caminos de nuestra senda, dado que su aceptación y potencia han generado frameworks y librerías tanto en frontend como backend.
Es un lenguaje del lado del cliente. Esto significa que su lógica puede verse desde cualquier navegador. Esto puede resultar negativo en su primer impresión, pero cuando hablemos de backend, verán que no es un motivo de preocupación.
Para aprender Javascript se puede seguir el curso de W3Schools nuevamente.
El DOM
Cuando trabajamos solo con HTML, tenemos una serie de etiquetas que se representan visualmente en el navegador.
Pero JS no lo ve de la misma manera. Toma todo el código en HTML y lo convierte en un objeto que lo puede acceder cuando lo necesite. Esto parece complejo pero nada más lejos de la realidad.
A éste método se le llama Document Object Model (DOM). Esta es la forma en que JS (Javascript) se comunica con HTML. Si comprendemos este concepto, tendremos el panorama completo de como funcionan las webs dinámicas.
Una documentación interesante sobre el funcionamiento del DOM está en la web de MDN.
Basta de Vanilla por hoy
Por si no lo aclaré antes, se le dice Vanilla a todo lo se programe sólo con el lenguaje y sin librerías. Por ejemplo, JQuery es una librería de JS que simplifica algunas funcionalidades que se hacen en el DOM.
Si trabajamos sólo con JS, hablamos de código Vanilla JS. Pero si usamos JQuery, ya no es Vanilla, sino que nos apoyamos sobre una librería.
La realidad es que programar todo de cero es en cierto punto placentero, pero inviable. Hay librerías que nos facilitan muchas tareas y son mantenidas por la comunidad de forma constante.
Conclusiones
Podríamos estar hablando de tecnología frontend durante días enteros, pero la idea de estos artículos es generar una aproximación de cada area. En la próxima parte trabajaremos en la parte backend del perfil de un Full Stack Developer.
Top comments (0)