Fundamentos del Desarrollo Web
Aplicaciones Web
El desarrollo web ha ido evolucionando hasta convertirse en lo que se considera Desarrollo Frontend. El trabajo de programación de un negocio se divide actualmente en el desarrollo Backend y el desarrollo Frontend, siendo el Backend el encargado de transportar los datos desde y hacia la base de datos y aplicar todas las reglas de negocio y validaciones necesarias. Por otro lado el Frontend se encarga de consumir los datos entregados por diversos Backend para construir interfaces de usuario que sean sencillas y potentes, principalmente mediante Aplicaciones Web.
Una Aplicación Web, es la integración de una Interfaz HTML orientada al usuario, un diseño CSS inteligente y una funcionalidad Javascript transparente. Actualmente las aplicaciones web son utilizadas para crear plataformas web dónde los usuarios conozcan el negocio en internet navegando desde un navegador web y también los administradores del negocio puedan controlar la plataforma de forma remota, sin embargo, la potencia de las aplicaciones web ha permitido que hoy en día encontremos aplicaciones móviles y videojuegos en las tiendas para IOS y Android basadas completamente en aplicaciones web gracias a proyectos como Apache Cordova, Phonegap, Ionic, NativeScript, Expo, entre otros.
Elementos de las Aplicaciones Web
El primer elemento de toda aplicación web es el maquetado, el cuál se refiere a la estructura visual que tendrá la aplicación, dónde se definirán todos los elementos necesarios para que el usuario pueda interactuar con el negocio, por ejemplo, formularios con campos de entrada de texto, correos, números, etc. También podemos definir tablas, pestañas, modales, menús, entre otros. Este maquetado se logra a través de HTML (Hyper-Text Markup Language) el cual es un lenguaje de marcado, que consiste en definir los elementos visuales que tendrá una interfaz de forma rápida y consistente.
Vamos a ver el siguiente ejemplo en dónde se desea mostrar la información de un de pastelillo para una tienda de Cupcakes. En la imagen de abajo podemos observar que deseamos colocar la imagen del pastelillo a la izquierda, con el nombre del pastelillo y su costo a la derecha ordenados en forma vertical.
Lo primero que tenemos que hacer es detectar los elementos visuales que queremos mostrar en la interfaz, por ejemplo, la imagen del pastelillo, un texto grande con el nombre del pastelillo, un texto mediano con el costo del pastelillo. En el siguiente código podemos ver los elementos visuales que necesitará nuestra interfaz declarados mediante HTML.
Lo siguiente sería pensar en la distribución y agrupación de los elementos, por ejemplo, todos los elementos deberían estar contenidos en una caja principal, además los textos deberían estar agrupados y centrados en una caja anidada de manera vertical, estas agrupaciones y ordenamiento se consideran el maquetado o la maquetación. En el siguiente código se muestran los elementos HTML previos ahora agrupados mediante contenedores DIV.
Finalmente debemos aplicar algunas reglas de diseño para generar el diseño fino sobre la maquetación tal es el sombreado de la caja principal (el contenedor), redondear la imagen, centrar los elementos de texto del lado derecho, etc. Esto lo hacemos mediante CSS (Cascade Style Sheets) que se refiere a Hojas de Estilo en Cascada. La idea básica de CSS es aplicar reglas de diseño a los elementos visuales HTML para modificar sus colores, como el color de fondo, el color de fuente, el tamaño y tipo de fuente, la alineación, etc. El diseño CSS incluso nos permite definir transiciones y animaciones sobre nuestros elementos para crear aplicaciones web ricas en diseño y agradables para el usuario. En el código de abajo se muestran algunas reglas impuestas a nuestros elementos HTML para producir la caja final.
Finalmente hemos construido una interfaz web para mostrar la información de un pastelillo utilizando HTML para maquetar los elementos visuales y CSS para afinar su diseño. Abajo podemos ver el código completo de nuestra tarjeta del pastelillo, observa que hemos agregado un montón más de etiquetas HTML que iremos profundizando a lo largo de estas entregas.
Es importante mencionar que nuestra aplicación web hasta ahora es estática y el usuario no puede interactuar con ella, sin embargo mediante el lenguaje de programación Javascript (ECMAScript) podemos añadir funcionalidad a nuestra aplicación web, por ejemplo, solicitarle al backend los datos que serán mostrados del pastelillo, como su imagen, el nombre y el costo. En el código de abajo podemos ver un ejemplo, de cómo mediante Javascript podemos hacer una llamada fetch para solicitarle al backend de la empresa la información del pastelillo.
Conclusiones
Hemos visto como el desarrollo frontend moderno consiste en la creación de aplicaciones web, mediante html, css y javascript, para producir interfaces web tanto para sitios web como aplicaciones móviles. El lenguaje html nos permite maquetar los elementos visuales que tendrá nuestra aplicación web, como imágenes, formularios, tablas, etc. Por otro lado css nos permite definir reglas de diseño para aplicarlas a los elementos maquetados previamente y modificar su visualización como colores, bordes, fuentes, etc. Finalmente hemos visto que javascript será el lenguaje encargado de implementar toda la lógica de la aplicación como el consumo del backend, el control de eventos sobre los elementos, etc.
Con estos conceptos estás listo para comenzar a desarrollar aplicaciones web, por lo que no te pierdas las siguientes entregas que puedes encontrar en https://medium.com/frontend-master. No olvides resolver los problemas planteados al final de cada entrega.
Problema 1. Visita los enlaces de abajo y completa los tutoriales.
Problema 2. Modifica la tarjeta del pastelillo para mostrar la imagen de una persona, su nombre y el correo en lugar del precio.
Problema 3. Crea al menos 5 tarjetas de personas distintas dispuestas en lista.
Problema 4. Modifica la regla
border-radius: 50%aplicada a la etiquetaimgporborder-radius: 8pxy analiza el cambio sobre la imagen.Problema 5. Investiga como modificar el evento
onclickde la imagen, para que al pulsar la etiquetaimgmuestre en la consola el mensajeAbriendo imagen.
Si te gustó esta entrega no olvides aplaudir y si quieres apoyarme a seguir subiendo material gratuito dale clic abajo.
