C1 - Introducción a la programación web

Full Stack amb React

¿Qué es una aplicación web?

Las páginas web nos presentan contenidos a través de nuestro navegador. Esos contenidos están descritos y definidos con HTML, y sus propiedades visuales están descritas con CSS. El comportamiento del contenido y de la interfaz del usuario una vez están cargados en el navegador son controlados mediante JavaScript.

Además, los contenidos suelen estar gestionados por un lenguaje de programación de backend que determina qué contenidos se presentan a un usuario o a otro, si el acceso a los contenidos está restringido o no, si hay que crear contenidos a partir de la acción de un usuario...

Estrictamente se llama Aplicación web al software (o programas) que se ejecutan en un navegador web. La inmensa mayoría de las webs que visitamos son, según esta definición, aplicaciones web.

La página principal de la Wikipedia nos mostrará unos contenidos diferentes según qué día la visitemos. Además, si he iniciado sesión como editor, a mí me mostrará algunos contenidos adicionales y me permitirá modificar, crear y eliminar contenidos.

Full Stack amb React

¿Y a qué llamamos realmente aplicación web?

Mucho más común que el anterior es el uso del concepto aplicación web para referirnos a páginas web que se parecen a las aplicaciones o programas de escritorio. Bajo esta definición no diríamos que Wikipedia o la web de los Rolling Stones son aplicaciones web.

Si nos fijamos en webs como Gmail, Spotify, Facebook o Wallapop, veremos que, pese a seguir siendo páginas, están más cerca -tanto en estética como en comportamiento- de un programa de ordenador o de una app de móvil que de una web de contenidos como las citadas anteriormente. Son este tipo de webs a las que nos vamos a referir en este curso cuando hablamos de aplicaciones web.

Full Stack amb React

Tipos de arquitectura en web

La arquitectura que hay detrás de cada web puede ser muy diferente, pero podríamos diferenciar entre dos grandes tendencias.

Una arquitectura clásica es aquella en la que en el backend hay un lenguaje de programación que genera el HTML de respuesta. Este HTML se basa generalmente en una capa de datos que principalmente se alimenta de una base de datos.

La característica de este patrón es que los datos ya viajan dentro de la respuesta del servidor.

HTML

CSS

Full Stack amb React

Tipos de arquitectura en web

Otra arquitectura diferente, muy usada en aplicaciones web, se basa en que el servidor sólo devuelve un archivo HTML, con CSS y JS. No hay ningún lenguaje de back que genere ese contenido, ni viene de ninguna base de datos.

Una vez en el cliente, el JavaScript realiza peticiones a servicios API REST para obtener los datos que necesita y los muestra en la interfaz de usuario.

El HTML de la aplicación web está totalmente desacoplado de la capa de datos.

Full Stack amb React

HTML

CSS

JSON

API

Full Stack amb React

Tipos de arquitectura en web

Full Stack amb React

Tipos de arquitectura en web

Full Stack amb React

Fuente: https://cloudinary.com/blog/developer_experience_for_a_modern_web_jamstack_delivers

Full Stack amb React

¿De qué está hecha una web?

Una página web es un documento HTML (HyperText Markup Language), que es un archivo de texto plano donde están escritos los contenidos que queremos presentar al visitante. Esos contenidos están estructurados mediante unas marcas (por eso se llama lenguaje de marcado).

Full Stack amb React

Por último, para controlar la interacción del usuario con los contenidos o para presentar éstos de una manera avanzada (por ejemplo, un slideshow), el HTML también llevará asociado un código JavaScript, que también es un archivo de texto plano.

Para que esos contenidos tengan unas características estéticas concretas, el documento HTML lleva asociada una hoja de estilos CSS (Cascade StyleSheets), que también es un archivo de texto plano donde están descritas todas las características visuales de los contenidos del HTML.

<nav class="navegacion-principal">
  <ul class="list-inline">
    <li class="list-inline-item">
      <a href="/inicio">Inicio</a>
    </li>
    <li class="list-inline-item">
      <a href="/quienes-somos">Quiénes somos</a>
    </li>
    <li class="list-inline-item">
      <a href="/contacto">Contacto</a>
    </li>
  </ul>
</nav>

.navegacion-principal {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100px;
  padding: 0 10px;
  border-bottom: 2px dashed blue;
}
.navegacion-principal li {
  display: inline-block;
}
.navegacion-principal a {
  color: #060;
  font-size: 16px;
}

const menu = document.querySelector(".navegacion-principal");
menu.addEventListener("click", e => {
  e.preventDefault();
  if (!e.target.classList.contains("inactive")) {
    location.href = e.target.href;
  }
});

https://codepen.io/mariogl/details/gOLpPjj

Full Stack amb React

¿Quién ejecuta una web?

El entorno donde ese código HTML+CSS+JS se convierte en una interfaz de usuario que presenta unos contenidos (HTML), con una estética determinada (CSS), y con una interacción concreta (JS) es el navegador. Así, decimos que la plataforma de ejecución de nuestra web es el navegador web.

El navegador está en la máquina cliente y sólo entiende esos tres formatos. En el lado del servidor podremos tener Java, PHP, C#, TypeScript, Python, bases de datos... pero ninguna de estas tecnologías funciona en un navegador.

Full Stack amb React

¿Cómo publico una web?

Llamamos publicación al proceso por el cual colocamos nuestra web en algún servidor accesible desde internet, de manera que la web se vuelve visitable. Dependiendo de nuestro código fuente y los lenguajes de programación que estemos usando, el proceso de publicación puede ser simplemente trasladar archivos o puede conllevar un proceso de despliegue más complejo.

Full Stack amb React

Lo primero es decidir en qué servidor vamos a alojar nuestra web. Hay variedad de soluciones, de entre las cuales listamos algunas:

· Servidor compartido

· Servidor dedicado

· VPS

· GitHub pages (webs estáticas)

· Servidores especializados en aplicaciones web:

- Heroku
- Netlify (webs estáticas)
- Surge (webs estáticas)

Full Stack amb React

¿Cómo publico una web?

Dependiendo del tipo de servidor donde alojemos la web, el sistema para publicarla será diferente.

El sistema clásico es el FTP: nos instalamos un cliente de FTP en nuestro ordenador (por ejemplo, FileZilla), que nos permitirá subir los archivos de nuestra web al servidor.

Algunas plataformas nos permiten vincular el alojamiento a nuestro repositorio en GitHub, de manera que cada vez que subimos archivos nuevos a GitHub, se publican automáticamente en la plataforma de alojamiento.

Por último, algunas plataformas nos permiten publicar los archivos mediante comandos de consola.

Full Stack amb React

¿Qué más necesito para que vean mi web?

Para que los visitantes puedan llegar hasta el servidor donde está alojada nuestra web, necesitaremos un dominio. Para obtener un dominio hay que comprobar primero si está libre, y luego registrarlo.

Muchas de las soluciones que hemos visto nos ofrecen dominios gratuitos (generalmente, subdominios).

Full Stack amb React

¿Qué necesito para crear mi web?

Lo podéis instalar desde su web. Durante el proceso de instalación, aseguraos de que están marcadas las opciones de la captura.

Full Stack amb React

La primera herramienta que necesitamos es un IDE (Integrated Development Environment). Se trata de un editor de texto con muchas funcionalidades integradas que nos ayudarán al desarrollo de nuestra web.

El IDE más usado para desarrollar con JavaScript, y el que usaremos en la formación, es el Visual Studio Code. Es un IDE gratuito, muy sencillo y muy bien preparado para el desarrollo en JavaScript, HTML y CSS.

Full Stack amb React

¿Qué necesito para crear mi web?

Full Stack amb React

Otra herramienta que vamos a usar mucho, sobre todo cuando empecemos con React, va a ser la terminal o consola de comandos.

En Windows podemos abrirla con CMD, pero si tenemos el VS Code abierto, lo mejor es que usemos la consola integrada.

Full Stack amb React

¿Qué necesito para crear mi web?

Full Stack amb React

Una herramienta fundamental a la hora de desarrollar una web es el navegador. Aunque hay varios, lo más recomendable para desarrollar es usar Chrome o Firefox.

Siempre que estemos desarrollando una web tenemos que tener las Developer Tools abiertas. Con ellas tendremos acceso, además de a cosas más avanzadas:

a la consola: me permite ver errores
a inspeccionar elementos: para poder examinar el HTML
a la pestaña Network: para revisar las peticiones HTTP
al simulador móvil

Full Stack amb React

Recursos interesantes de esta unidad

The Rise in JAMStack Application

Artículo que explica el JAMStack y los microservicios, y las diferencias con la arquitectura monolítica

Configuración de VS Code

Documentación sobre cómo configurar el editor VS Code

Editor web online para prototipados

Codepen

Artículo sobre Emmet

Multiplica tu velocidad en Visual Studio Code utilizando Emmet

Desenvolupador Web Full Stack amb React - C1-Introducción a la programación web

By mariogl

Desenvolupador Web Full Stack amb React - C1-Introducción a la programación web

Diapositivas para el curso Desenvolupador Web Full Stack amb React, del 2 de febrero al 27 de abril de 2021 en Barcelona. Módulo C1 - Introducción a la programación web

C1 - Introducción a la programación web

Desenvolupador Web Full Stack amb React - C1-Introducción a la programación web

More from mariogl