La anatomía de una web

Hola, ¿qué tal? ¿Cómo estás? Espero que todo vaya muy bien. Te saluda Alex Ávalos y te doy la bienvenida a Web en Línea,

el podcast que te enseña a elegir con criterio, desarrollar una web potente y lanzarla siguiendo las buenas prácticas que garantizan el éxito.

Cuando miras a una persona, ¿qué ves? Dependiendo de la distancia o en el lugar, si es un lugar público o es un lugar privado, puede ser que lo primero que ves es su cara o parte de su cuerpo, si está lejos, tal vez lo ves a cuerpo completo.

de repente también puede ser que en la estación de transporte ves cómo se mueve de un lugar a otro e incluso si está cerca puede ver cómo habla.

Y aunque es obvio, pero por ejemplo, estás viendo a la persona, pero no ves cómo late su corazón, no ves cómo trabajan sus pulmones, no ves la sangre circulando por sus venas y no ves cómo su sistema nervioso envía señales a cada rincón de su cuerpo.

Pero, aunque no lo vemos, todo eso está pasando todo el tiempo a tiempo real.

Y si algo falla, algo no anda bien, nos damos cuenta inmediatamente.

Con los sitios web es exactamente igual.

Cuando entras en una web, ves la interfaz, ves los colores, ves las imágenes, ves los botones,

ves esto que le llaman frontend, pero no ves el DNS traduciendo el nombre de dominio a una IP,

no ves la transacción, no ves el proceso de encriptación que hace el SSL,

no ves el servidor procesando tu petición, no ves la base de datos buscando información.

Todo eso pasa a tiempo real cuando ingresas a un sitio web.

Y sucede en milisegundos, sin que vos te des cuenta ni lo notes.

Pero si algo falla, si algo no anda bien, la web no funciona y por supuesto lo vas a notar.

En este episodio vamos a hacer una anatomía web y vamos a poner los rayos X para ver qué hay debajo de una web profesional.

Si estuviéramos estudiando anatomía humana, creo que lo ideal sería comenzar por la microanatomía y luego meternos con la macro.

Pero como este es un podcast de desarrollo web y estamos usando, retorciendo mucho, bastante una analogía,

vamos a darle un poco la vuelta y vamos a comenzar con la macroanatomía.

Vamos a comenzar viendo el frontend.

Frontend es todo lo que pasa en tu navegador.

Es lo que ves, es lo que tocas cuando das un clic, es lo que experimentas como usuario.

En términos médicos, si pudiéramos estirar esta analogía, sería la macroanatomía, la piel, los músculos, la estructura visible de un cuerpo humano.

En la web, el frontend incluye el diseño visual, es decir, los colores, las fuentes, las tipografías, el layout.

También la estructura, cómo está organizada la información, los menú, la navegación.

También la funcionalidad, los botones que haces para ir a dar clic, los formularios que completas,

estos datos que ingresas y luego envías.

Todo esto se construye principalmente con tres tecnologías.

No nos vamos a meter a esta altura del podcast aún hablando de frameworks, hablando de todavía no.

Vamos con lo más básico y por eso te comento tres tecnologías principalmente.

La primera, el HTML, que es la estructura, los huesos de tu web.

El CSS, que es la apariencia, la piel, el color, la forma.

Y el JavaScript, que es el movimiento, los músculos que hacen que las cosas se muevan y respondan.

¿Qué debemos de tener presente con esto?

Un buen frontend no solo es hacer que se vea bonito, debe funcionar bien, debe de ser intuitivo para el usuario y principalmente debe responder lo más rápido posible y sin olvidar ser accesible para todos.

Si le damos una vuelta de tuerca a esta analogía, tu cuerpo pudiera verse bien por fuera, pero si los músculos no funcionan correctamente, simplemente no podrías moverte.

Con el frontend es igual.

Puedes tener un diseño maravilloso, pero si los botones cuando le das clic no hacen nada,

Si el menú, en lugar de guiar al usuario, lo confunde, y si la web entras y tarda minutos en cargar, simplemente esa web, ese frontend, no sirve para nada.

Por eso el frontend profesional se construye pensando en cuatro cosas.

La primera, la experiencia del usuario.

Que todo sea intuitivo para el usuario.

Que el usuario no necesite un mapa, una guía, un video explicando qué es lo que tiene que hacer y cómo.

Que sea intuitivo.

Número dos, el rendimiento.

Que cargue lo más rápido posible.

Que el usuario diga, wow, acabo de dar clic y ya cargó.

Wow, qué genial.

Tercero, la accesibilidad. Que todos, todos puedan usarlo.

Sí, es que yo intenté, pero los colores no me permitieron dar clic, no vi a dónde estaba el enlace.

Y cuarto y último, responsive. Que se vea bien en cualquier dispositivo que use el usuario.

Sea un celular, una tablet, una laptop y cualquier resolución.

Eso es el frontend. Es lo que ves, pero es solo la mitad de esta historia.

Ahora vamos con lo que no vemos a simple vista.

El backend y la base de datos.

Si el frontend es la piel y los músculos, el backend son los órganos internos.

Es lo que pasa detrás de escena. Es el servidor.

fuera de nuestra vista. El backend es el cerebro de la web, procesa información, toma decisiones,

ejecuta el código con lógica, se comunica con nuestra base de datos. Por ejemplo, cuando

te logueas en un sitio web, el frontend te muestra el formulario, usuario, contraseña

y un botón para ingresar.

Pero en el backend, el backend es el que verifica si ese usuario que has puesto

corresponde con esa contraseña que has puesto y verifica si son correctos.

Por ejemplo, cuando compramos algo online, el frontend te muestra los productos,

pero es el backend el que procesa el pago conectándose a la pasarela.

Además, no solo procesa el pago, sino que también actualiza el inventario, envía un correo de confirmación con la factura o con la bienvenida al usuario y todo aquello que sucede casi mágicamente, automáticamente cuando compramos online.

Cuando buscamos en un sitio web, el frontend te muestra un buscador, pero es el backend el que busca en la base de datos y te devuelve resultados.

¿Y la base de datos? Pues la base de datos es la memoria de tu web. Es donde se guardan los usuarios, donde se guardan los accesos, donde se guardan los productos, los posts del blog, las configuraciones, todo.

Sin base de datos, tu web no recordaría nada. Cada vez que la visitaríamos, sería como arrancar de cero.

Vos como usuario nunca ves el backend, nunca ves la base de datos funcionando, trabajando, pero si el backend está mal hecho, lo vas a notar inmediatamente, porque la web va a ir lenta, los procesos van a dar error y por supuesto vas a perder cualquier información.

Además, por supuesto, errores raros por todos lados.

Siguiendo esta analogía, es como tener problemas en los órganos internos de nuestro cuerpo. No lo vemos, pero aunque no lo vemos, afecta todo el funcionamiento.

Muchas veces la gente se enfoca solo en el frontend porque es lo que se ve, pero una web profesional necesita sí o sí un bucket funcional.

Porque de nada sirve una interfaz muy cuidada, muy bonita, muy moderna, si nada en la web hace lo que debería hacer.

De nada sirve un diseño impecable si la base de datos pierde información o da resultados erróneos.

Frontend y Backend trabajan juntos, como el cuerpo humano.

Todos los sistemas están funcionando al unísono y funcionan interconectados.

Si seguimos con esta analogía anatómica, veamos una parte muy importante.

Los sistemas que conectan todo.

En el cuerpo humano tenemos el sistema nervioso, el sistema circulatorio, el sistema respiratorio, etc.

En una web tenemos el hosting, el dominio, los DNS, el HTTPS.

Veamos muy brevemente uno por uno.

El hosting es donde vive tu web.

Es ese espacio en un servidor, es el lugar del mundo donde están guardados todos los archivos de nuestra web.

Sin hosting, nuestra web no existiría en internet.

Y punto. Eso sí, no todos los hostings son iguales.

Algunos son muy rápidos, otros lentos, algunos son seguros, otros no tanto,

Algunos te dan muy buen soporte y otros cuando tienes algún problema te dejan solo.

También tenemos el dominio.

Tu dominio es tu dirección en internet.

Es webenlinea.org.

Es google.com.

Es apple.com.

Pero el dominio por sí solo no hace nada.

Es solo un nombre.

Y aquí entran los DNS.

El DNS es el sistema nervioso de Internet.

Es lo que traduce tu dominio, que es texto, en una dirección IP, que es un número,

para que tu navegador sepa a qué servidor debe conectarse.

Cuando escribís, por ejemplo, webenlinea.org y presionas Enter, esto pasa en milisegundos.

1. Tu navegador le pregunta al DNS, ¡Hey! ¿Dónde está webenlinea.org?

2. El DNS responde y le dice, está en el servidor con esta IP.

3. Tu navegador se conecta a ese servidor.

4. El servidor te envía los archivos de la web.

5. Tu navegador lo procesa y te muestra el sitio web.

Y todo esto pasa en menos de un segundo.

Y estarás pensando, ¿y el HTTPS y el SSL?

Vamos, el HTTPS es la versión segura de este protocolo de comunicación entre tu navegador y el servidor.

Y el SSL o TLS en su versión más moderna es el certificado que encripta la comunicación.

¿Por qué es importante?

Porque sin el HTTPS y los certificados de seguridad, todo se enviaría y recibiría en texto plano.

Cualquiera que esté en medio pudiera leerlo. Tus contraseñas, tus datos personales, información bancaria, tu tarjeta de crédito, todo.

Con HTTPS todo va encriptado, seguro y protegido.

Pero además, Google penaliza las webs sin HTTPS.

Los navegadores las marcan como no seguro.

Y la gente ya ha aprendido a desconfiar de un sitio web en el que no se ve el candadito verde.

El HTTPS no es opcional.

Es obligatorio. Y todo esto, el hosting, el dominio, los DNS, el HTTPS, son sistemas vitales en tu sitio web. Como el sistema circulatorio que lleva la sangre a todo el cuerpo o el sistema nervioso que envía las señales. Todo está conectado. Todo está trabajando al unísono para que cuando alguien escribe tu URL, vea tu web funcionando.

Entonces, repasemos la anatomía de una web.

El frontend es lo que vemos, es la interfaz, el diseño, la experiencia del usuario, la macroanatomía de tu web.

El backend y la base de datos son lo que no vemos.

Es el procesamiento, la lógica, la memoria.

Es la microanatomía que hace que todo funcione.

Y además también tenemos sistemas vitales, el hosting, el dominio, los DNS, el HTTPS,

son los que conectan todo y mantiene tu web viva, accesible y segura.

Para una web profesional, no puedes descuidar una y esperar que la web funcione correctamente.

Es como el cuerpo humano. Todos los sistemas trabajan juntos y deben de funcionar juntos.

y hemos llegado ya al final del episodio

estamos listos para hacer el commit y luego el push

si tienes alguna duda o quieres ponerte en contacto

me encontrarás en web en línea punto org barra contacto

te espero en el próximo episodio

hasta entonces

salud