Web

Aplicaciones Web

Son herramientas en las que los usuarios las utilizan en un servidor accediendo a mediante un navegador web.

Para construir estas aplicaciones se utiliza HTML, CSS, Javascript y un lenguaje del lado del servidor(en nuestro caso PHP)

¿Como funciona la comunicación cliente servidor?

Normalmente se utiliza una arquitectura cliente-servidor, donde el usuario que accede mediante el navegador es llamado cliente y el proveedor es el servidor.

¿Que hace el servidor web?

El servidor web toma las peticiones de los clientes y devuelve el contenido si es que este es encontrado

El navegador envia una peticion al servidor

El servidor recibe la peticion

El servidor responde con el contenido encontrado

El navegador muestra el contenido

¿Que hace el cliente web?

Permite a los usuarios hacer solicitudes al servidor mediante el httpp y muestra al usuario la respuesta de este.

HTTP

HTPP

Es el protocolo de comunicación que permite las transferencias de información en la World Wide Web.

Hypertext Transfer Protocol

Utiliza el protocolo TCP/IP, ¿Que nos garantiza el protocolo TCP?

IP es el protocolo de comunicación que envía o enruta los paquetes de datos atravez de la red física.

El protocola esta divido en 2 etapas:

HTTP request (solicitud)
HTTP response (respuesta)

HTTP

Cliente

Servidor

Elementos clave en request

Método HTTP request (acción a realizar)
Página a accesar (URL)
Parámetros a enviar

Elementos clave en response

Código de status
Tipo de contenido
Contenido

HTTP Request

El http define una serie de métodos, los cuales especifican al servidor el tipo de solicitud que se esta realizando.

Los nueve métodos definidos son:

HEAD
GET
POST
PUT
DELETE
TRACE
OPTIONS
CONNECT
PATCH

Método GET

Representa un recurso especifico y solo debe usarse para obtener datos del servidor

Como este método esta compuesto por una URL esta limitado a 2kb.

http://example.com:80/demo_form.php?name1=value1&name2=value2

Protocolo

Servidor

Puerto

HTTP 80
Norlmalmente oculto

La informacion que se quiere enviar al servidor se concatena a la direccion en un formato Key=Value

Marca el inicio de los parametros

Separador de parametros

Método POST

Es un metodo mas seguro ya que no muestra la informacion en la url, en su lugar la envia dentro del cuerpo del html.

Como no agrega nada a la url no tiene la limitante de los 2kb.

Es el método recomendado para el envió de la información capturada en las formas.

HTTP Response

Es la respuesta que el cliente recibe, esta compuesto de header y body.

El header contiene valores que indican e protocolo que se utiliza, la versión de http, el tipo de contenido y el código de status.

El body contiene el contenido que el navegador va desplegar e.g. html o json.

Se utiliza una linea vacía para separar el header del body

HTTP Response status codes

Los códigos de estatus están compuestos de 3 dígitos, donde el primero nos dice el tipo de respuesta y los otros 2 una categoría mas especifica.

1XX Informational
- Solicitud recibida, continua el proceso
2XX Succes
- La solicitud fue recibida, entendida, aceptada y respondida de manera exitosa

HTTP Response status codes

3XX Redirection
- Indica que el cliente debe realizar una acción adicional para completar la petición. Esta acción puede ser completada sin que el usuario interactue. No deben redireccion automaticamente mas de 5 veces.

4XX Client Error
- La solicitud contiene errores de sintaxis o no puede ser procesada

HTTP Response status codes

5XX Server Error
- Indica que el servidor fallo en procesar una petición aparentemente valida

HTML

HyperText Markup Language

HTML

Es un lenguaje estructurado utilizado para crear paginas web.

<!DOCTYPE html>
<html>
 <head>
  <title>Page Title</title>
 </head>
 <body>
  <h1>This is a Heading</h1>
  <p>This is a paragraph.</p>
 </body>
</html>

CSS

Cascading Style Sheets

CSS

Es un lenguaje de hojas de estilo usado para describir la presentación de un documento escrito en un lenguaje de etiquetas.

body {
    background-color: lightblue;
}

h1 {
    color: white;
    text-align: center;
}

p {
    font-family: verdana;
    font-size: 20px;
}

Javascript

Es un lenguaje de programación interpretado, dinámico y débilmente tipado.

Se utiliza principalmente del lado del cliente.

var x = 0;

alert("Hola mundo");

if (x === 0)
{
    Console.log("Hola mundo");
}

Paginas dinamicas

La construcción de estos sitios es controlada por el servidor de aplicaciones.

El servidor recibe una serie de parámetros que determinan como va ser construido el sitio.

Los sitios dinámicos también pueden tener procesamiento del lado del cliente.

Paginas estaticas

Están enfocados en mostrar información permanente al usuario sin que el usuario tenga interacción con el sitio.

En este tipo de sitios el servidor web devuelve el contenido sin hacer cambios.

Arquitectura de capas

Es una arquitectura cliente-servidor cuyo objetivo es la separación de la lógica de negocios de la lógica de diseño.

La ventaja de esta separación esta en que si cambia el código en uno de los niveles, este no tiene porque afectar los demás, evitando la tarea de revisar el código mezclado.

La mas común es la arquitectura de 3 capas.

Capa de presentación
Es la capa de nivel mas alto, es la que el usuario ve y donde captura información.
No contiene mas lógica que la validación de los datos que se capturan.
Solo se comunica con la capa de negocios.

Capa de negocios
Es la capa que coordina toda la aplicación, esta recibe peticiones de la capa de presentación, procesa la petición, toma decisiones, realiza cálculos y recupera información de la capa de datos y la regresa para la presentación al usuario.

Capa de datos
Es donde residen los datos y es la encargada de acceder a los mismos.
Incluye mecanismos de persistencia (servidores de base de datos, archivos, etc) y mecanismos para almacenamiento y recuperación de datos.
Solo puede recibir peticiones de la capa de presentación.

Uso en aplicaciones web

En aplicaciones web es conocido como front end y utiliza tecnologías como html, css y javascript

En aplicaciones web es conocido como back end, genera contenido utilizando plataformas como PHP.

Son bases de datos o algún medio de almacenamiento que resguarda la información y proporciona un método para acceder a la misma.