02 introduccion programacionweb

Programacion Web- Introduccion a la Programacion Web -

Mario Garza [email protected]

Universidad Politecnica de VictoriaCd. Victoria, Tamaulipas, Mexico.

http://www.tamps.cinvestav.mx/~mgarza/UPV_WP/

Enero - Abril, 2014

Programacion Web 1/44

Internet y la Web

¿Web vs Internet?

Muchas personas utilizan estos terminos indistintamente.

¿Son estos terminos realmente sinonimos?

Internet y la Web - Internet

Mas un concepto que una entidad tangible. Red masiva de redes(http://www.webopedia.com/).

Red de redes que permite la interconexion descentralizada decomputadoras a traves de un conjunto de protocolos denominadoTCP/IP (http://definicion.de/internet).

Una red mundial, de redes de computadoras. Es una interconexionde redes grandes y chicas alrededor del mundo(http://www.internetglosario.com).

Internet es un conjunto descentralizado de redes de comunicacioninterconectadas que utilizan la familia de protocolos TCP/IP. Lasredes fısicas heterogeneas que la componen funcionan como una redlogica unica, de alcance mundial. (http://es.wikipedia.org/)

Internet y la Web - Internet, breve historia

Sus orıgenes se remontan ala decada de 1960

ARPANet (AdvancedResearch Projects AgencyNetwork)

ARPA (hoy DARPA, Defense Advanced Research Projects Agency),Departamento de Defensa de Estados Unidos

Universidades en California y Utah

1982: TCP/IP

Finales de los 1980s: Internet service providers (ISPs)

Mediados de los 1990s: Internet comercial

Internet y la Web - Internet, “actualidad”

33% de la poblacion mundial actual (7,204,573,130 - Enero, 2014).

http://www.internetworldstats.com/

http://www.worldometers.info/

Internet y la Web - Web

World Wide Web (WWW, W3).

Tim Berners-Lee, 1989-1991.

World Wide Web Consortium (W3C). Comunidadinternacional que desarrolla estandares que aseguran elcrecimiento de la Web a largo plazo(http://www.w3.org/).

Internet y la Web

Web vs InternetContent vs transport. Many people use the terms Web and Internetsynonymously. However, the Web is only one of the many servicesdeployed on the Internet. Just as cargo is transported in a truck on ahighway, a Web page is transported in packets on the Internet.

http://www.pcmag.com/encyclopedia/term/54358/web-vs-internet

Internet y la Web

Web vs Internet

La web se encuadra dentro de Internet, no es mas que un servicio de losmuchos que presta la Red, entre los que podemos encontrar: correoelectronico, IRC o chat, FTP, el propio web.

http://www.desarrolloweb.com/

La Web es la coleccion de sitios y paginas web de todo el mundo.

Web: modelo de intercambio de informacion sobre internet.

Internet: infraestructura de red completa.

La Web utiliza el protocolo HTTP, solo uno de los idiomas que sehablan a traves de Internet.

Internet y la Web

Web vs Internet

Internet y la Web

Web vs Internet

Internet y la Web

Web vs Internet

Internet y la Web

Web vs Internet

Intranet

¿Internet vs Intranet?

Pagina, sitio y portal Web

Pagina Web:

Una pagina web es una fuente de informacion adaptada para laWeb y accesible mediante un navegador. Puede contenerhiperenlaces a otras paginas web, constituyendo la red enlazada de laWWW.

Documento HTML almacenado de forma estatica o generado deforma dinamica que muestra una informacion util para el usuario.

Sitio Web:

Conjunto de paginas web, tıpicamente dedicado a algun temaparticular o proposito especıfico.

Pagina Web:

Sitio Web:

Pagina Web:

Sitio Web:

Portal Web:

Sitio web que ofrece al usuario, de forma facil e integrada, el accesoa una serie de recursos y de servicios relacionados a un mismo tema.Enlaces, buscadores, noticias, foros, documentos, aplicaciones,compras, etc. Principalmente dirigido a resolver necesidades deinformacion especıfica de un tema en particular.

Conjunto de sitios web, que pueden pertenecer a una o a variasorganizaciones.

Portal Web:

Sitio web que ofrece al usuario, de forma facil e integrada, el accesoa una serie de recursos y de servicios relacionados a un mismo tema.Enlaces, buscadores, noticias, foros, documentos, aplicaciones,compras, etc. Principalmente dirigido a resolver necesidades deinformacion especıfica de un tema en particular.

Conjunto de sitios web, que pueden pertenecer a una o a variasorganizaciones.

Asignacion especial 1

IP (Internet Protocol)

TCP (Transmission Control Protocol)

HTTP (HyperText Transfer Protocol)

FTP (File Transfer Protocol)

SMTP (Simple Mail Transfer Protocol)

POP (Post Office Protocol)

URL (Uniform Resource Locator) yURI (Uniform Resource Identifier)

DNS (Domain Name System)

Modelo OSI (Open Systems Interconnection)

Aplicaciones Web - Esquema basico de funcionamiento

En el modelo cliente/servidor, el cliente envıa un mensaje solicitandoun determinado servicio a un servidor (hace una peticion), y este envıauno o varios mensajes con la respuesta (provee el servicio).

Navegador Web

Software para localizar, recuperar y mostrar el contenido en laWorld Wide Web (paginas web, imagenes, videos y otros archivos).

En un modelo cliente/servidor, el navegador es el cliente. Hacecontacto con el servidor Web y solicita informacion. El servidorWeb envıa la informacion de vuelta al navegador Web que muestralos resultados.

http://www.webopedia.com/

Navegadores Web

Microsoft Internet Explorer. Released in 1995.

Google Chrome. Free, open-source. Released in 2008.

Firefox. From Mozilla. Released in 2004.

Apple Safari. Default web browser for Mac systems.

Opera. Free, fast, small, and standards-compliant. Thepreferred browser for a number of small devices.

Mozilla. The Mozilla Project has grown from the ashesof Netscape.

Netscape. First commercial web browser. Released in1994. Development ended in February 2008.

Navegadores Web - Estadısticas

2013 Internet Explorer Firefox Chrome Safari Opera

November 10.5 % 26.8 % 54.8 % 4.0 % 1.8 %

October 11.7 % 27.2 % 54.1 % 3.8 % 1.7 %

September 12.1 % 27.8 % 53.2 % 3.9 % 1.7 %

August 11.8 % 28.2 % 52.9 % 3.9 % 1.8 %

July 11.8 % 28.9 % 52.8 % 3.6 % 1.6 %

June 12.0 % 28.9 % 52.1 % 3.9 % 1.7 %

May 12.6 % 27.7 % 52.9 % 4.0 % 1.6 %

April 12.7 % 27.9 % 52.7 % 4.0 % 1.7 %

March 13.0 % 28.5 % 51.7 % 4.1 % 1.8 %

February 13.5 % 29.6 % 50.0 % 4.1 % 1.8 %

January 14.3 % 30.2 % 48.4 % 4.2 % 1.9 %

http://www.w3schools.com/

Pagina estatica y dinamica

Podemos encontrar, o construir, dos tipos de paginas Web:

Estatica. Las que se presentan sin movimiento y sinfuncionalidades mas alla de los enlaces.

Se construyen con HTML.

Dinamica. Las paginas que tienen efectos especiales y en lasque podemos interactuar.

Requiere de otros lenguajes, aparte del simple HTML.

Pagina estatica

Estatica

El servidor no lamodifica antes deenviarla a unnavegador.

Pagina dinamica

Dinamica

Ejemplos de aplicacion:

programacion semanal de television

horoscopo de todos los dıas

promociones de un sitio de comercio electronico

Podemos clasificar en funcion de donde se lleva a cabo elprocesamiento:

las del lado del cliente

las del lado del servidor

Pagina dinamica

Dinamica

Ejemplos de aplicacion:

programacion semanal de television

horoscopo de todos los dıas

promociones de un sitio de comercio electronico

Podemos clasificar en funcion de donde se lleva a cabo elprocesamiento:

las del lado del cliente

las del lado del servidor

Pagina dinamica (cliente)

Dinamica (cliente)

El codigo necesario se incluye dentro del mismo archivoHTML y es llamado SCRIPT.

El navegador se encarga de INTERPRETAR los scripts yejecutarlos.

Scripting:

VBScript (Visual Basic Script)JavaScript

Otros:

Applets JavaFlashAJAX (Asynchronous JavaScript And XML)

Dinamica (cliente) - ¿Ventajas, Desventajas?

Muy dependientes del sistema donde se estan ejecutando yesa es su principal desventaja. Cada navegador (o cadaversion) tiene sus propias caracterısticas. Lo que puedefuncionar en un navegador puede no funcionar en otro.

Como ventaja se puede decir que estas paginas liberan alservidor de algunos trabajos, ofrecen respuestas inmediatas alas acciones del usuario y permiten la utilizacion de algunosrecursos de la maquina local.

Pagina dinamica (servidor)

Dinamica (servidor)

El servidor la modifica antes de enviarla a un navegador.

Se suelen escribir en el mismo archivo HTML, mezclado con elcodigo HTML.

Reconocidas, interpretadas y ejecutadas por el propioservidor, quien genera una pagina resultado que solamentecontiene codigo HTML.

Tecnologıas:

ASP (Active Server Pages)PHP (PHP Hipertext Preprocesor)JSP (Java Server Pages)

Pagina dinamica (servidor)

Pagina dinamica (cliente y servidor)

Servidor Web

El servidor web es el programa o maquina que responde a laspeticiones del cliente y entrega el contenido del recurso solicitado.

Hardware

Maquina quehospeda el sitioweb.

Software

Se ejecuta en elequipo servidor dealojamiento web.

Servidor HTTP.

Servidor Web

El servidor web es el programa o maquina que responde a laspeticiones del cliente y entrega el contenido del recurso solicitado.

Hardware

Maquina quehospeda el sitioweb.

Software

Se ejecuta en elequipo servidor dealojamiento web.

Servidor HTTP.

Servidor HTTP

Su funcion principal es suministrar las paginas web y sus archivosasociados (imagenes, flash, etc.) a los clientes (navegadores).

Atiende las solicitudes realizadas a traves del protocolo HTTP.

Recibe una solicitud HTTP, y responde con una respuesta HTTP.

Recibe una solicitud pidiendo un recurso especıfico y devuelve elrecurso como respuesta (o un mensaje de error).

Servidor HTTP

Puede responder con una pagina HTML estatica, o delegar lageneracion dinamica a otro programa (PHP, ASP, JSP).

Pasa la solicitud al programa mas capaz de manejar lasituacion (intermediario).

El trabajo del servidor web termina una vez que se procesanlas peticiones del navegador y la informacion necesaria seenvıa.

SOLO el navegador web determina como se muestra unapagina web.

Servidor HTTP

Lenguajes de marcado (markup languages)

Forma de codificar un documento donde, junto con el texto, seincorporan etiquetas, marcas o anotaciones con informacionadicional relativa a su estructura (presentacion).

XMLeXtensible Markup Language

HTMLHyperText MarkupLanguage

XHTMLeXtensible HyperTextMarkup Language

TeX, LaTeX

Tecnologıas Web - W3Techs

http://w3techs.com/

Provee informacion (estadısticas) acerca de la utilizacion de variostipos de tecnologıas en la Web.

Client-side Languages

Server-side Languages

Markup Languages

Web Servers

Operating Systems

Usage of client-side programming languages for websites.

Usage of server-side programming languages for websites.

PHP is used by 81.7% of all the websites whose server-sideprogramming language is known.

Usage of markup languages for websites.

Usage of web servers for websites.

Usage of operating systems for websites.

Modelo de 3 capas - Separacion fısica (3-tier)

Modelo de 3 capas - Separacion logica (3-layer)

1. Presentacion / Usuario (front-end)

interfaz de usuario, entrada/salida

contenido estatico o generadodinamicamente, interpretado por el navegador

2. Negocio / Logica (middleware, back-end)

procesamiento detallado

generacion de contenido dinamico

3. Datos (back-end)

acceso a bases de datos

almacenamiento y recuperacion de datos

3. Datos (back-end)

Aplicaciones Web

Aplicacion (en general)

Programa para permitir al usuario realizar una actividad o trabajo.

Permite realizar tareas utiles mas alla del funcionamiento de lacomputadora en sı.

Programa (o grupo de programas) disenado para el usuario final.

Aplicaciones Web

Aplicacion Web

Cualquier aplicacion que utiliza un navegador web como cliente.

Corren en servidores web y usan paginas web como interfaz de usuario.

El usuario puede utilizarla accediendo a un servidor web a traves deInternet o de una intranet mediante un navegador.

Se codifica en un lenguaje soportado por los navegadores web.

Sitio web que contiene paginas con contenido sin determinar,parcialmente o en su totalidad (el contenido final varıa de una peticiona otra en funcion de las acciones del usuario).

Cualquier sitio web (o alguno de sus componentes), que realizaalguna funcion para el usuario, califica como una aplicacion Web.

Aplicaciones Web

Aplicacion Web

Aplicaciones Web

Aplicacion Web

Aplicaciones Web

Aplicacion Web

Aplicaciones Web

Aplicacion Web

Aplicaciones Web

Aplicacion Web

Aplicaciones Web

Aplicacion Web

Aplicaciones Web - Ventajas/Desventajas

Ventajas

Tiempos y costos: no necesitan ser descargadas, instaladas yconfiguradas, actualizaciones inmediatas, costos de licencia.

Portabilidad: accesible desde diferentes tipos de dispositivos, desde“cualquier lugar” (punto de la red, Internet o intranet).

Compatibilidad: desde multiples arquitecturas y sistemas operativos(multiplataforma), basta con tener un navegador apropiado.

Consumo de recursos: gran parte del procesamiento se realiza enel servidor, no ocupan espacio en el disco duro del cliente.

Ventajas

Seguridad: la informacion no esta almacenada localmente, copiasde seguridad de los servidores.

Concurrencia: multiples usuarios al mismo tiempo.

Menos errores y fallas: menos propensas a crear problemastecnicos debido a conflictos con el software, hardware o con otrasaplicaciones.

Alcance/oportunidades: ¿existirıan las ventas en linea (amazon,ebay, etc.) sin este tipo de tecnologıa?

Ventajas

Desventajas

Disponibilidad:

no hay independencia/autonomıa por parte del cliente.

dependiente del servidor.

dependiente de la infraestructura de comunicacion.

Los tiempos de respuesta pueden ser mas largos.

Habitualmente ofrecen menos funcionalidades que las aplicaciones deescritorio (pero esto cada vez esta mejorando).

Desventajas

Disponibilidad:

Desventajas

Disponibilidad:

Desventajas

Disponibilidad:

Asignaciones especiales

U2 (Prog. del lado del cliente)

Java applets

jQuery

U3 (Prog. del lado del servidor)

Python

ColdFusion

Presentar como mınimo:

Introduccion¿de que se trata?

Esquema basico defuncionamiento

Ventajas / desventajas

Alcances (motivacion)¿que se puede lograr?

Ejemplo practico (traer listo,pero explicar su desarrollo ytodo lo que fue necesariohacer/configurar)

02 introduccion programacionweb

Documents

Transcript of 02 introduccion programacionweb