Aplicaciones web

1. El concepto de aplicación web

Aplicación web

Sistema de software que se ejecuta en un servidor web y al que se accede mediante un navegador

Cliente (Frontend)

Es la parte visual con la que interactúa el usuario final. Su objetivo es facilitar la entrada y presentación de datos.

Servidor (Backend)

Es donde reside la lógica del negocio, el procesamiento de datos y la gestión de usuarios. Es donde reside la lógica del negocio, el procesamiento de datos y la gestión de usuarios.

Base de Datos

Guarda de forma estructurada la información utilizada por la aplicación: usuarios, registros, productos, etc. Es accedida por el backend mediante sentencias de consulta o interfaces ORM.

Lenguajes Backend

PHP, Node.js, Python, .NET, Perl, Java

Frameworks Frontend

Bootstrap, Vue.js, React, Angular

Ejemplos de Bases de datos

MySQL, PostgreSQL, MongoDB

Proceso de comunicación entre un sistema y un servidor

El cliente abre un socket y se conecta al servidor a través de internet, apuntando a un puerto específico.

El servidor web recibe la petición, la procesa y genera una respuesta

Esta respuesta se envía a través del mismo canal de comunicación, reutilizando el socket previamente abierto.

Después de enviar la respuesta, por lo general, el servidor y el cliente cierran la conexión.

Conexión permanente o persistente

Mantiene abierta la conexion con el servidor para que el cliente pueda hacer varias peticiones consecutivas sin tener que establecer una nueva conexión TCP cada vez.

Requisitos del servidor

Servidor web (Apache, Nginx, etc.).

Lenguaje backend habilitado.

Base de datos instalada y configurada.

Dominio y, preferentemente, certificado SSL para navegación segura.

Requisistos del cliente

Un navegador moderno compatible con tecnologías web actuales.

Conexión de red estable.

Sockets

Punto de Conexion entre el servidor y el cliente se compone de:
una dirección IP (que identifica al host),

un protocolo de transporte (usualmente TCP), y

un número de puerto (que identifica la aplicación o servicio en el servidor).

Aplicaciones progresivas (PWA)

Permiten una experiencia similar a una app nativa, pero manteniéndose dentro del paradigma web.

Servicios web en la nube (Cloud Hosting)

Amazon Web Services (AWS), Microsoft Azure, Google Cloud Platform

URL (Uniform Resource Locator)

Dirección específica que se asigna a los recursos disponibles en una red (páginas completas, imágenes, un documento, etc.)

Tipos de hospedaje

Computadora servidor dedicada, Servicios web en la nube (Cloud Hosting), Servicio de hospedaje tradicional (Web Hosting)

Servicios de hospedaje tradicional (Web Hosting)

HostGator, Bluehost, Banahosting

SGML

Define una estructura jerarquica en documentos como HTML o XML. Creado por el Dr. Charles Goldfarb

XML

Metalenguaje derivado de SGML. Se enfoca en la descripción de datos estructurados. En este el usuario define sus propias etiquetas.

HTML

Lenguaje de marcado orientado a describir documentos para la Web. Define la estructura del contenido mediante etiquetas.

Definicion de colores en HTML

Por nombre (red, blue, etc.)

Por código hexadecimal (#FF00FF)

RGB: rojo-verde-azul (modelo aditivo)

CGI (Common Gateway Interface)

Es una forma tradicional de procesar formularios. Permite a los servidores web ejecutar programas externos (conocidos como scripts Perl, PHP, etc.) y devolver el resultado como HTML al navegador.

Etiqueta semantica HTML

Tipo de etiqueta que describe el proposito de su contenido, fueron introducidas en HTML5 <header>, <footer>, <section>, <aside>, etc.

HTTP/HTTPS

Protocolos de comunicacion web para la transferencia de datos.

HTTP envia los datos en texto plano

HTTPS encripta la informacion con un certificado

Protocolo de Transporte

Reglas que perimiten la comunicacion en el internet
En TCP para establacer la comunicacion se requiere de una conexion
En UDP los datos se envian sin necesidad de una conexion

GET y POST

Son metodos de envio de informacion de formularios en PHP.
GET: Visible en la URL, útil para datos no sensibles. Tamaño limitado (aprox. 2048 caracteres).

POST: Oculto al usuario, se usa para datos sensibles o archivos. El límite lo define navegador y servidor.

Formas de persistencia de datos en PHP

Variables de sesión

Cookies

Bases de datos

Cookies

Un archivo pequeño almacenado en el navegador del usuario que contiene datos como preferencias, estado de sesión o identificadores.

PDO

Es una interfaz que permite conectar PHP con bases de datos de forma orientada a objetos.

Mysqli

Extension de PHP que proporciona una interfaz para interactuar con bades de datos MySQL

CSS

(Cascading Style Sheets o Hojas de Estilo en Cascada) es un lenguaje de diseño gráfico que permite definir cómo se presentará visualmente un documento web en pantalla, impresión o incluso en medios auditivos (lectores de pantalla).

Definicion de reglas CSS

Un selector, que indica a qué elemento(s) aplica.

Una declaración, compuesta por una propiedad y un valor.

Lenguaje interpretado

Los errores se detectan en tiempo de ejecución. Se traduce linea por linea, la ejecución ocurre de arriba hacia abajo y de izquierda a derecha

ECMAScript

Especificacion para lenguajes de scripting. Define reglas y sintaxis que deben de seguir los lenguajes

Lenguaje compilado

Usa un compilador para transformar un codigo a lenguaje maquina. El punto de partida de la ejecución siempre es la función main().

DOM (Document Object Model)

Es la estructura de objetos que el navegador genera al cargar un documento HTML

Eventos

Son interacciones del usuario con contenido que se pueden medir de forma independiente a partir de una página web o una carga de pantalla.

onclick, onload, onsubmit, etc.

Objeto Event

Es un objeto que se crea automáticamente cuando se produce un evento y que se destruye de forma automática cuando se han ejecutado todas las funciones asignadas al evento.

Canvas

Elemento HTML5 que se utiliza para dibujar gráficos, sobre la marcha, a través de JavaScript. Es solo un contenedor de gráficos. Debe usar JavaScript para dibujar los gráficos.

Llamadas asincrónicas

Estas se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano.

XMLHttpRequest

Es un objeto de JavaScript que permite a las aplicaciones web comunicarse con servidores web de forma asíncrona para realizar peticiones HTTP y recibir respuestas

Fue ampliamente usado en la programación AJAX.

AJAX

Acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es una técnica de desarrollo web para crear aplicaciones web con peticiones asíncronas.

JSON

Es un formato ligero de intercambio de datos. Se considera el reemplazo de XML para transacciones derivado de su livianez de lectura. Basado en nombre-valor

Atributo name

Control que debe tener cada formulario HTML para ser enviado al servidor

$_POST, $_GET, $_REQUEST, $_COOKIE, $_SERVER, $_SESSION, $_FILES

Ejemplos de variables superglobales en PHP

JavaScript

Lenguaje de programación interpretado, dialecto del estándar ECMAScript, inspirado en C/Java. Se define como orientado a objetos, basado en prototipos, imperativo, débilmente tipado y dinámico (El punto y coma es opcional aunque recomendado). Case sensitive, no requiere declaración de tipo.

Diferencia entre una función y un método

Un método no devuelve nada y una función sí devuelve algún resultado (return resultado;)

fetch y Promises

Es la evolución para realizar peticiones asíncronas con JavaScript en la actualidad, permite ver el panorama de las peticiones de manera más simple e intuitiva para el desarrollador web.

Declaracion de variables en JavaScript

var x = 10; // Alcance global mutable

let y = 20; // Alcance local mutable

const PI = 3.1416; //Alcance local inmutable

Diferencia entre los atributos name y id

name es para identificar el control en el lado del servidor, id es para identificarlo en el lado del cliente.

Add.EventListener

Método recomendado para manejar eventos en proyectos escalables en

Pseudoclases de CSS

Es una palabra clave que se añade al selector para especificar un estado especial del elemento.

Bootstrap

Framework CSS que integra CSS y JavaScript para construir interfaces responsivas y modernas.

ORM (Object Relational Mapping)

Es una técnica que permite mapear datos desde la base de datos a objetos para poder realizar consultas SQL, y así interactuar y hacer un CRUD sin comunicarte directamente con la BD.

MVC (Modelo-Vista-Controlador)

Patrón en el diseño de software, separa la lógica de la aplicación de la lógica de la vista en una aplicación

Métodos de HTTP

Get, post, put, patch, delete, etc.

Definición de microservicio

Pequeño servicio de software autónomo enfocado en una sola funcionalidad, se comunica con otros microservicios mediante APIs

API (Aplication Programming Interface)

Permite la comunicación entre dos softwares mediante un conjunto de definiciones y protocolos

Estados de respuesta HTTP

Respuestas informativas (100–199),

Respuestas satisfactorias (200–299),

Redirecciones (300–399),

Errores de los clientes (400–499),

y errores de los servidores (500–599).

Ejemplos de Estados de HTTP

404 Not Found

200 Success (OK)

500 Error del servidor