Tecnologas de Desarrollo Web

Sitios y Aplicaciones Web

Ing. Ernesto S. Ros Sandoval Analista Programador de Sistemas rsernesto@gmail.com

Agenda
Introduccin Navegadores Web Arquitectura Cliente / Servidor Evolucin de los Sitios Web Sitios Web y Aplicaciones Web Configuracin Web Web y Cliente / Servidor Herramientas de Desarrollo Web Perspectivas Laborales

Introduccin
Internet es una gran red de computadoras conectados mediante el protocolo TCP/IP (Transfer Control Protocol/Internet Protocol) WWW es un servicio de Internet que da acceso a un conjunto de informacin distribuida por toda la red, mediante documentos de hipertexto

Introduccin
De esta forma surgi el formato HTML (HiperText Markup Language) que permite crear documentos de texto formateado (tamao de letra, estilos, etc.) con hiperenlaces Cada documento HTML tiene asociada una direccin URL (Localizador Uniforme de Recursos) al que se accede mediante el protocolo HTTP (Protocolo de Transporte de HiperTexto)

Demo

Navegadores Web
Una vez conectado a Internet se debe tener un programa capaz de acceder a pginas Web. El programa que se usa para leer los documentos de hipertexto se llama navegador, browser, visualizador o cliente. Cuando seguimos un enlace (link) decimos que estamos navegando El diseo de pginas Web debe considerar la posibilidad de ser interpretadas por todos los navegadores

Navegadores Web
Entre los navegadores Web ms conocidos en la actualidad tenemos los siguientes:
Internet Explorer Mozilla Firefox Google Chrome Opera Safari

Arquitectura Cliente / Servidor

Esta arquitectura consiste bsicamente en que un programa, el cliente informtico, realiza peticiones a otro programa, el servidor, que le da respuesta En esta arquitectura la capacidad de proceso est repartida entre los clientes y los servidores Los accesos, recursos y la integridad de los datos son controlados por el servidor

Arquitectura Cliente / Servidor

Los tipos especficos de servidores incluyen los servidores Web, los servidores de archivos, los servidores de correo, etc. Mientras que sus propsitos varan algo, la arquitectura bsica sigue siendo igual

Arquitectura Cliente / Servidor

Evolucin de Sitios Web

Evolucin de Sitios Web: Siglo Pasado

El protocolo HTTP es utilizado para que el cliente/navegador solicite recursos al servidor (documentos HTML, imgenes, etc.) Los documentos HTML permiten al usuario mostrar informacin e introducir datos en formularios Originalmente en HTML se mezclaban etiquetas de estructura (ttulo, prrafo, etc.) con etiquetas de presentacin (negrita, color, etc.)

Evolucin de Sitios Web: Siglo Pasado

Los recursos pueden ser estticos, almacenados en archivos en el servidor, o dinmicos Los dinmicos son creadas en el servidor mediante programas auxiliares que se comunican con el servidor Web mediante CGI (Common Gateway Interface) Cuando el servidor HTTP invoca al programa auxiliar le pasa informacin mediante argumentos del programa o variables de entorno

Evolucin de Sitios Web: Siglo Pasado

El programa auxiliar devuelve los datos al servidor HTTP mediante su salida estndar Un sitio Web suele contener datos estticos, marcados con formato HTML por el diseador del sitio Web Aadir ms datos a un sitio Web suele implicar escribir ms pginas HTML

Evolucin de Sitios Web: La Actualidad

Tecnologas en el lado del cliente
CSS (Cascading Style Sheets): En el documento HTML se diferencia entre estructura y presentacin, que es definida en las hojas de estilo CSS DOM (Document Object Model): representacin de la estructura de la pgina Web, manipulable programticamente mediante JavaScript JavaScript: lenguaje de scripting ejecutado en el navegador, utilizado para manipular (consultar/modificar) la pgina XHTML a travs del DOM

Evolucin de Sitios Web: La Actualidad

Tecnologas en el lado del cliente
AJAX: Nombre dado a XHTML + DOM + JavaScript + XML + XMLHttpRequest XML, RSS, etc.: Formatos para el intercambio de datos entre Aplicaciones Web XHTML: Reformulacin de HTML 4.01 mediante XML

Evolucin de Sitios Web: La Actualidad

Tecnologas en el lado del servidor
Servidores de Aplicaciones: tecnologas en el lado del servidor para la generacin de recursos HTML que sirven al cliente Bases de Datos: Utilizada para almacenar los datos de la aplicacin.

Los diseadores de sitios Web se preocupan de que el marcado HTML de sus datos est separado del estilo, colocando las indicaciones sobre estilo aparte del marcado HTML, en hojas CSS (Cascading Style Sheets)

Evolucin de Sitios Web: Pginas Estticas

Evolucin de Sitios Web: Pginas Dinmicas

Sitios Web y Aplicaciones Web

Una aplicacin Web es una aplicacin de software que se ejecuta en un servidor Web y a la cual acceden los usuarios mediante Internet o una Intranet, mediante un navegador Una Aplicacin Web contiene datos, pero estos estn separados del modo en que sern presentados al usuario (usando HTML y CSS). Desarrollar una Aplicacin Web no es lo mismo que escribir pginas HTML para un sitio Web

Sitios Web y Aplicaciones Web

Las pginas HTML de una Aplicacin Web suelen ser generadas automticamente a partir de los datos Con unas plantillas y la lgica del negocio necesaria para generar pginas HTML, stas se generan automticamente dependiendo de lo que pida el usuario, a partir de parmetros que aparecen en la URL pedida Ejemplo: Los resultados de bsquedas

Sitios Web y Aplicaciones Web

Un sitio Web suele contener datos estticos, marcados con formato HTML por el diseador del sitio Web Los diseadores de sitios Web se preocupan de que el marcado HTML de sus datos est separado del estilo, colocando las indicaciones sobre estilo aparte del marcado HTML, en hojas CSS (Cascading Style Sheets) Aadir ms datos a un sitio Web suele implicar escribir ms pginas HTML

Configuracin Web
Para estar en Internet se requiere cubrir los siguientes puntos:
Tener un dominio Tener o contratar un hospedaje Web (Hosting) Un sitio Web o una Aplicacin Web

Un servidor Web es un programa que sirve para atender y responder a las diferentes peticiones de los navegadores, proporcionando los recursos que soliciten usando el protocolo HTTP o el protocolo HTTPS (la versin cifrada y autenticada)

Web y Cliente Servidor

Internet se basa en el modelo Cliente / Servidor Nmero de capas: cantidad de capas que atraviesa la informacin desde la capa de datos hasta la de presentacin Cada capa suele ejecutar en un sistema diferente o en espacios de proceso diferentes dentro de la misma mquina

Web y Cliente Servidor

Web y Cliente Servidor

Capa de servicios de presentacin:
Recoger informacin del usuario Enviar esta informacin a capa de trabajo Recoger resultados de capa de trabajo Presentar los resultados al usuario

Capa de servicios de trabajo

Recibir informacin de capa de informacin Interactuar con los servicios de datos para realizar la lgica de negocio de la aplicacin Enviar resultados a capa de presentacin.

Web y Cliente Servidor

Capa de servicios de datos
Almacenar datos Recibir datos Mantenimiento de los datos Integridad de los datos

Ejemplo:

Web y Cliente Servidor: Ejemplo

Una vez que el usuario se encuentra conectado a la Internet, para obtener la pgina Web en la pantalla de su computador se efectan transparentemente las siguientes tareas:

El cliente solicita al navegador la pgina Web requerida. Se establece la una conexin entre el navegador y el servidor para satisfacer el requerimiento. El navegador solicita el objeto. El Servidor Web busca la pgina en sus discos o accede al servidor de base de datos si es el caso El servidor enva la pgina al navegador, siendo este que interpreta el cdigo HTML. Se cierra la conexin establecida en el segundo paso.

Herramientas de Desarrollo Web

Lenguajes del lado del servidor Instalacin del servidor local Descubriendo el potencial de PHP Automatizacin de cdigo PHP Recursos PHP

Herramientas de Desarrollo Web: Lenguajes del Lado del Servidor

Son lenguajes que son interpretados por un servidor Web Entre los mas difundidos en la actualidad tenemos:
PHP (Hypertext Preprocessor) ASP / ASP .NET (Active Server Pages) Java, con sus tecnologas Java Servlets y Java Server Pages (JSP)

Herramientas de Desarrollo Web: Lenguajes del Lado del Servidor

Entre los servidores Web ms usados en Internet tenemos:
Apache Internet Information Server (IIS) de Microsoft

Herramientas de Desarrollo Web: Descubriendo el Potencial de PHP

Diseado para Internet Es un lenguaje multiplataforma: Tiene la capacidad de ser ejecutado en la mayora de los sistemas operativos Fcil de aprender: Usualmente se usan menos lneas de cdigo para un determinado propsito Conexin con mltiples bases de datos: Trabaja con la mayora de bases de datos, en especial trabaja mejor con MySQL

Herramientas de Desarrollo Web: Descubriendo el Potencial de PHP

Amplia documentacin Libre, de cdigo abierto Permite tcnicas de Programacin Orientada a Objetos Gran demanda laboral

Herramientas de Desarrollo Web: Descubriendo el Potencial de PHP

Evolucin de PHP

Herramientas de Desarrollo Web: Descubriendo el Potencial de PHP

El cdigo PHP puede ser incrustado dentro del cdigo HTML Se ejecuta en un servidor Web tomando el cdigo PHP como entrada y creando pginas Web como salida

Herramientas de Desarrollo Web: Descubriendo el Potencial de PHP

El cdigo PHP se ejecuta en el servidor, nunca en el cliente A diferencia, por ejemplo del cdigo JavaScript que se ejecuta siempre en el cliente nunca en el servidor

Herramientas de Desarrollo Web: Descubriendo el Potencial de PHP

Herramientas de Desarrollo Web: Descubriendo el Potencial de PHP

Demo: Video

Herramientas de Desarrollo Web: Instalacin del Servidor Local

Qu necesitamos para aprender a programar PHP?
Instalar un servidor local: Transformar nuestra computadora en un servidor Web local Para hacer prcticas de PHP PHP necesita de un software que interprete correctamente el lenguaje Solucin para Windows: AppServ
http://www.appservnetwork.com

Herramientas de Desarrollo Web: Automatizacin de Cdigo PHP

Qu tienen en comn muchos proyectos de desarrollo Web?
Consultas a bases de datos
Mostrar datos segn criterios Paginacin Pginas Maestro / Detalle Borrar datos Modificar datos Accesos con password

Herramientas de Desarrollo Web: Automatizacin de Cdigo PHP

Sabas que existen herramientas que pueden ahorrarnos hasta el 80% de desarrollo del cdigo? Incluso en algunos casos el 100% Ventajas:
Desarrollar proyectos en menos tiempo Menos dolores de cabeza con el cdigo Ms proyectos

Solucin: Adobe Dreamweaver

Herramientas de Desarrollo Web: Recursos PHP

Scripts
http://www.hotscripts.com http://php.resourceindex.com http://sitescripts.com/PHP/ http.//www.desarrolloweb.com/directorio/p rogramacion/php/scripts_en_php/

Herramientas de Desarrollo Web: Perspectivas Laborales

Gran demanda Es fcil encontrar trabajo si se sabe cmo Oportunidades laborales:
Trabajar en una empresa del sector Montar un negocio propio y trabajar como FreeLance

Herramientas de Desarrollo Web: Perspectivas Laborales

Ventajas de ser Freelance (Libre)
Las oportunidades de trabajo se multiplican Puedes trabajar desde cualquier parte del mundo T decides tu propio ritmo de trabajo y horario

Webs de teletrabajo:
http://www.elance.com http://www.mercadoprofesional.com http://www.trabajofreelance.com