Introducción a las aplicaciones web

21
SS400 INTRODUCCIÓN A LAS APLICACIONES WEB WILMAN JOSÉ VEGA UNIVERSIDAD POPULAR DEL CESAR AGOSTO 2012 https://sites.google.com/site/wvcclasses/home/cursos/programacion-bajo-web

description

Introducción a las aplicaciones web

Transcript of Introducción a las aplicaciones web

Page 1: Introducción a las aplicaciones web

SS400INTRODUCCIÓN A LAS APLICACIONES WEB

WILMAN JOSÉ VEGA

UNIVERSIDAD POPULAR DEL CESAR

AGOSTO 2012

https://sites.google.com/site/wvcclasses/home/cursos/programacion-bajo-web

Page 2: Introducción a las aplicaciones web

INTRODUCCIÓN A LAS APLICACIONES WEB

APLICACIÓN WEB

• Mucho más que un Sitio Web

• Aplicación Cliente / Servidor

• Usa un Navegador Web

• Ejecuta un servicio interactivo conectando con servidores a través de Internet (o Intranet)

WILMAN JOSE VEGA CASTILLA. AGOSTO 2012

Page 3: Introducción a las aplicaciones web

INTRODUCCIÓN A LAS APLICACIONES WEB

PROTOCOLOS DE INTERNET

WILMAN JOSE VEGA CASTILLA. AGOSTO 2012

Page 4: Introducción a las aplicaciones web

PROTOCOLOS DE INTERNET (TCP/IP)

WILMAN JOSE VEGA CASTILLA. AGOSTO 2012

INTRODUCCIÓN A LAS APLICACIONES WEB

Page 5: Introducción a las aplicaciones web

WILMAN JOSE VEGA CASTILLA. AGOSTO 2012

ARPANET TCP/IP

TCP: Transmission Control Protocol

IP: Internet Protocol

LAYERS

Network Interface Lowest level of data transmission facilitatingcommunication with the underlying physical network

Internet layer Provides the mechanisms for intersystem communications, controlling message routing, validity checking, and message header composition/decomposition

Transport layer Provides message transport services between applications running on remote systems

Application layer highest level within the TCP/IP protocol stack. It is within this layer that most of the services we associate with ‘the Internet’ operate

INTRODUCCIÓN A LAS APLICACIONES WEB

Page 6: Introducción a las aplicaciones web

INTRODUCCIÓN A LAS APLICACIONES WEB

ESTRUCTURA DE LAS APLICACIONES WEB

WILMAN JOSE VEGA CASTILLA. AGOSTO 2012

HTML/XML, CSS, JavaScript, Applet

PHP, JSP, Servlet, JavaBeans,CGI

Datos

LADO DEL SERVIDORLADO DEL CLIENTE

HTTP

Page 7: Introducción a las aplicaciones web

INTRODUCCIÓN A LAS APLICACIONES WEB

TCP/IP: EL PARADIGMA CLIENTE / SERVIDOR

WILMAN JOSE VEGA CASTILLA. AGOSTO 2012

Servidor Web OServidor HTTP

Clie

nte

s (We

b B

row

ser)

Page 8: Introducción a las aplicaciones web

WILMAN JOSE VEGA CASTILLA. AGOSTO 2012

AÑO

1980 Tim Berners-Lee. Propuesta de nuevo sistema de hipertexto para compartir documentos

1991 El primer documento formal con la descripción de HTML

1995 El IETF presenta el Estándar HTML 2.0

1996 La W3C publica HTML 3.2. Texto con imágenes y applets

1998 Se publica el HTML 4.0

1999 Se publica la última especificación oficial de HTML 4.01

2000 XHTML 1.0

… HTML 5

INTRODUCCIÓN A LAS APLICACIONES WEB

ORIGENES DE LA WEB

Page 9: Introducción a las aplicaciones web

INTRODUCCIÓN A LAS APLICACIONES WEB

WILMAN JOSE VEGA CASTILLA. AGOSTO 2012

BASES DE LA WEB

• Lenguaje de Marcado para formatear documentos Hipertexto (HTML)

• Un esquema de notación uniforme para direccionar los recursos accesibles en la red (URI)

• Un protocolo para transportar mensajes en la red (HTTP)

Page 10: Introducción a las aplicaciones web

INTRODUCCIÓN A LAS APLICACIONES WEB

WILMAN JOSE VEGA CASTILLA. AGOSTO 2012

Uniform Resource Identifierscheme://host[:port#]/path/.../[;url-params][?query-string][#anchor]

Scheme — this portion of the URL designates the underlying protocol to be used (e.g. ‘http’ or ‘ftp’).host — this is either the name of the IP address for the web server being accessed.Port — this is an optional portion of the URL designating the port number that the target web server listens to.Path — logically speaking, this is the file system path from the ‘root’ directory of the server to the desired document.url-params — this once rarely used portion of the URL includes optional ‘URL parameters’.query-string — this optional portion of the URL contains other dynamic parameters associated with the request.Anchor — this optional portion of the URL is a reference to a positional marker within the requested document, like a bookmark

Page 11: Introducción a las aplicaciones web

INTRODUCCIÓN A LAS APLICACIONES WEB

Page 12: Introducción a las aplicaciones web

INTRODUCCIÓN A LAS APLICACIONES WEB

WILMAN JOSE VEGA CASTILLA. AGOSTO 2012

FUNDAMENTOS DE HTTP

• Protocolo base de la WWW

• Protocolo de nivel de aplicación

• Usa el paradigma Petición / Respuesta (Request /Response)

• HTTP es un protocolo estático.

Page 13: Introducción a las aplicaciones web

INTRODUCCIÓN A LAS APLICACIONES WEB

WILMAN JOSE VEGA CASTILLA. AGOSTO 2012

HTTP servers, browsers, and proxies

• Web servers and browsers exchange information using HTTP, which is why Web servers are often called HTTP servers

• Web browsers are sometimes referred to as HTTP clients, but their functionality is not limited to HTTP support

• HTTP proxies are programs that act as both servers and clients, making requests to web servers on behalf of other clients. Proxies enable HTTP transfers across firewalls.

Page 14: Introducción a las aplicaciones web

INTRODUCCIÓN A LAS APLICACIONES WEB

Paradigma Request / Response

Page 15: Introducción a las aplicaciones web

INTRODUCCIÓN A LAS APLICACIONES WEB

ESTRUCTURA DE LOS MENSAJES HTTPREQUEST MESSAGE RESPONSE MESSAGE

Page 16: Introducción a las aplicaciones web

INTRODUCCIÓN A LAS APLICACIONES WEB

WILMAN JOSE VEGA CASTILLA. AGOSTO 2012

HTML (HIPERTEXT MARKUP LANGUAGE)

• LENGUAJE PARA LAS PAGINAS WEB

• ESTÁNDAR (W3C)

Page 17: Introducción a las aplicaciones web

INTRODUCCIÓN A LAS APLICACIONES WEB

XHTML Y HTML

• HTML Bien formado

• Respetar las reglas de Marcado

WILMAN JOSE VEGA CASTILLA. AGOSTO 2012

Page 18: Introducción a las aplicaciones web

INTRODUCCIÓN A LAS APLICACIONES WEB

WILMAN JOSE VEGA CASTILLA. AGOSTO 2012

ETIQUETAS

Marcar (Markup): indicar partes que componen el documento (contenido e información sobre ese contenido)

Page 19: Introducción a las aplicaciones web

INTRODUCCIÓN A LAS APLICACIONES WEB

ESTRUCTURA DE UN DOCUMENTO HTML

WILMAN JOSE VEGA CASTILLA. AGOSTO 2012

TALLER 1. PROBEMOS ESTE EJEMPLO!

Page 20: Introducción a las aplicaciones web

INTRODUCCIÓN A LAS APLICACIONES WEB

WILMAN JOSE VEGA CASTILLA. AGOSTO 2012

HTML NO TIENE UN IDE ESPECIFICO!

Para programar en HTML sólo necesitamos un editor de textos (P.E.: Notepad++) y un navegador

Page 21: Introducción a las aplicaciones web

INTRODUCCIÓN A LAS APLICACIONES WEB

WILMAN JOSE VEGA CASTILLA. AGOSTO 2012

EJERCICIOS

• Hacer una lista con las etiquetas HTML existentes

• Modifiquemos el ejemplo anterior para utilizar por lo menos 5 de estas etiquetas.