El documento describe la arquitectura de aplicaciones web, abarcando desde tecnologías front-end como HTML5, CSS3 y JavaScript hasta back-end con PHP, Python y Java. Se presentan conceptos clave como el patrón MVC, servicios web REST y SOAP, así como detalles sobre la comunicación cliente-servidor a través de protocolos como HTTP y FTP. Finalmente, se exploran herramientas y frameworks que facilitan el desarrollo de aplicaciones web dinámicas e interactivas.

1. Desarrollo de aplicaciones
Web
Presentación solo para USO INTERNO.

2. Arquitectura
Navegador
Servidor
Web
Base de datos
Sistema de
archivos
Servicios de
transferencia y
correo
Protocolo HTTP
Comandos de sistema
FTP
SMTP
IMAP
POP3
ODBC
SOAP
REST
Servidor
Cliente

3. Arquitectura
Navegador
Base de datos
Sistema de
archivos
Servicios de
transferencia y
correo
Protocolo HTTP
Comandos de sistema
FTP
SMTP
IMAP
POP3
ODBC
SOAP
REST
Cliente
Servidor
Front End BackEnd
Servidor Web
Sitio Web
(Documentos
HTML)
Acceso a
Datos

4. Arquitectura
Navegador
Protocolo HTTP
Cliente
Servidor
Front End
BackEnd
Servidor Web
Contiene al sitio Web
Almacena los elementos que forman la pagina Web como son
documentos HTML, hojas de estilo, scripts, imágenes, los cuales se
ejecutan del lado del cliente.
Acceso a
Datos
Tecnologías Front End
HTML5
CSS3
JavaScript

5. Tecnologías del lado del Cliente
Front End

6. Tecnologías del lado del Cliente
• HTML
• HyperText MarkupLanguage
• Se usa para diseñar la interfaz del cliente
• La ultima versión es la 5 que incluye mejoras y aumento de tags específicos
• CSS
• Cascade Style Sheet
• Define el estilo que usaran los programas HTML
• Define colores, tamaño, tipos de letras, fondos etcétera.
• Se escribe menos código HTML
• Asegura que todas las paginas luzcan uniformes

7. Tecnologías del lado del Cliente
• JavScript
• Provee dinamismo a las paginas HTML
• AJAX
• Técnica de desarrollo de paginas web interactivas.
• JQUERY
• Biblioteca de javascript para manipular los objetos de un documento HTML
• Permite agregar animaciones, gestionar eventos e interactividad basada en AJAX
• Bootstrap
• Conjunto de herramientas ´para diseño de sitios y aplicaciones web.
• Contiene plantillas de diseño con tipografía, formularios, botones, cuadros, menús de
navegación y otros elementos de diseño basado en HTML y CSS, así como extensiones de
JavaScript adicionales.

8. Arquitectura
Navegador
Protocolo HTTP
Cliente
Servidor
Front End BackEnd
Servidor Web Acceder a los recursos del servidor para proveer datos al usuario.
Estos recursos pueden ser:
Archivos
Bases de datos
Correo electrónico
Tecnologías BackEnd
CGI
PHP
JavaScript Server Side
Python
C# (ASP)
Java (JSP)
WebServices

9. Tecnologías del lado del Servidor
Back End

10. CGI
• Common Gateway Interface
• Permite a un cliente solicitar datos a un servidor Web y construir
paginas dinámicas.
• El programa CGI se puede escribir en cualquier lenguaje de
programación que puede ser ejecutado por el sistema operativo del
servidor Web.
Navegador Servidor Web Programa CGI Datos
URL + Programa CGI
Llamada al
programa
Petición de
acceso a datos
Respuesta
con datos
Documento HTML con datos.
Construido dinámicamente
Documento HTML
con datos.

11. PHP
• Es un lenguaje de programación
• Lenguaje interpretado
• Se usa ampliamente en desarrollo de aplicaciones web
• Se ejecuta del lado del servidor
• Existen Frameworks basado en PHP que agilizan el desarrollo
• 1. Laravel
• 2. CodeIgniter
• 3. Symfony
• 4. Zend
• 5. Phalcon
• 6. CakePHP
• 7. Yii
• 8. FuelPHP
Navegador
Servidor Web
+
Interprete PHP
+
Script PHP
Datos
Petición URL
Petición de
acceso a datos
Documento HTML con datos.
Construido dinámicamente
Programa HTML
con datos.

12. MVC
• Patrón de arquitectura de software que separa el acceso a datos, lógica de negocio y presentación.
• Model – View – Controller.
• Divide el sistema en 3 componentes
• Modelo
• Acceso a los datos
• Permisos
• Consultas
• Regresa la vista de los datos
• Controlador
• Atiende las peticiones del usuario para acceder a datos
• Indica al modelo la operación a realizar
• Recibe las respuestas del modelo
• Prepara la respuesta a la vista
• Vista
• Prepara los datos para ser presentados al usuario
• Suele ser la interfaz de usuario.

13. MVC
Usuario
Controlador
Vista
Modelo
1. Utiliza
2. Manipula
3. Notifica
4. Actualiza
5. Muestra

14. PYTHON
• Es un lenguaje de programación de uso general
• Se usa para desarrollo de aplicaciones web
• Usando el patrón MVC.
• Se usa también para definir web services REST o SOAP.
• Lo mas común es usar frameworks como
• Django
• Flask

15. ASP .Net
• Tecnología de desarrollo Web desarrollada por Microsoft
• Se usa para
• Construir sitios web dinámicos y aplicaciones web
• Acceso a datos
• Servicios Web
• SOAP
• REST
• Como Web Server usa IIS
• Internet Information Server

16. JSP
• Java Server Pages
• Es una tecnología de contenido Web dinámico similar a PHP.
• Solo que escrito en el lenguaje de programación Java.
• Para usar JSP se requiere un servidor web para contenedores Servlet.
• TOMCAT es el mas común.
• A diferencia de PHP el código es compilado

17. JavaScript
• Lenguaje de programación interpretado
• Se usa principalmente del lado del cliente
• Viene incluido en el navegador.
• Actualmente se usa del lado del servidor para acceder a funciones del
servidor.
• Apoyándose de tecnologías como AJAX
• Se puede enviar y recibir información entre el cliente y el servidor.

18. Node JS
• Tecnología basada en JavaScript para ejecutar del lado del servidor
• Node JS se usa principalmente como plataforma para:
• Desarrollar Back End
• Desarrollo de servicios Web basado en API REST
• Node Js incluye su propio Web Server

19. Servicio Web
• Un servicio Web es un sistema de software diseñado para admitir la
interacción interoperable de máquina a máquina a través de una red.
• Se intercambia la información en un formato de intercambio de datos como
XML o actualmente se esta usando JSON
• Es posible implementar un servicio Web con cualquier lenguaje de
programación

20. Servicio Web
• ¿Qué es REST?
• El objetivo principal de cualquier sistema distribuido es facilitar el acceso a recursos remotos. REST se diseñó
pensando en ser simple, con ello se lograría una rápida adopción del usuario y un desarrollo rápido.
• REST es un estilo arquitectónico diseñado para y sobre un sistema distribuido particular, la Web
• Servicios Web RESTful
• También llamado API REST
• Es aquél servicio web que está basado en la arquitectura REST.
• Se basan en recursos.
• Un recurso es una entidad,
• La cual se almacena principalmente en un servidor
• El cliente solicita el recurso utilizando servicios Web RESTful.
• Características principales de un servicio Web RESTful
• Tiene cinco operaciones típicas: listar, crear, leer, actualizar y borrar
• Cada operación requiere de dos cosas: El método URI y HTTP
• El URI es un sustantivo que contiene el nombre del recurso
• El método HTTP es un verbo

21. Servicios Web
Operación Método HTTP URI Parámetros Resultado
Listar GET /{recurso} No aplica Lista del tipo de recurso
Crear POST /{recurso}
Dentro del cuerpo en
el POST
Se crea un nuevo recurso
Leer GET /{recurso}/{recurso_id} No aplica Recurso en función al id
Actualizar PATCH/PUT /{recurso}/{recurso_id}
Se pasan usando una
cadena de consulta
Se actualiza/reemplaza el
recurso
Borrar DELETE /{recurso}/{recurso_id} No aplica
Se elimina el recurso en función
al id
Operaciones RESTful
Operaciones RESTful según el método HTTP

22. Servicio Web

23. Servicios Web
• El uso de Servicios Web RESTful mejora la portabilidad entre cualquier
tipo de plataforma. Esto permite a los desarrolladores poder escalar
las aplicaciones sin gran complicación.
• La principal ventaja es la separación entre el Cliente y el Servidor, ya
que no importa el lenguaje del que proviene o el tipo de Servidor
(Python, Java, Node.js); lo único que se necesita es generar
correctamente cada solicitud

24. Servicios Web
• SOAP
• protocolo ligero para el intercambio de información en entornos
descentralizados y distribuidos.
• Los mensajes SOAP son las transmisiones de información de remitentes a
destinatarios.
• Los mensajes SOAP se pueden combinar para crear patrones de
petición/respuesta.
• Basado en XML

25. SOAP vs RESTFul (REST API)