SlideShare una empresa de Scribd logo
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
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
INTRODUCCIÓN A LAS APLICACIONES WEB


PROTOCOLOS DE INTERNET




                           WILMAN JOSE VEGA CASTILLA. AGOSTO 2012
INTRODUCCIÓN A LAS APLICACIONES WEB


PROTOCOLOS DE INTERNET (TCP/IP)




                            WILMAN JOSE VEGA CASTILLA. AGOSTO 2012
INTRODUCCIÓN A LAS APLICACIONES WEB


ARPANET            TCP/IP
TCP: Transmission Control Protocol
IP: Internet Protocol
          Network Interface      Lowest level of data transmission facilitating
                                 communication with the underlying physical network
          Internet layer         Provides the mechanisms for intersystem communications,
                                 controlling message routing, validity checking, and
                                 message header composition/decomposition
 LAYERS
          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


                                                     WILMAN JOSE VEGA CASTILLA. AGOSTO 2012
INTRODUCCIÓN A LAS APLICACIONES WEB

ESTRUCTURA DE LAS APLICACIONES WEB

                              HTTP




                                                                                      Datos
 HTML/XML, CSS, JavaScript,              PHP, JSP, Servlet, JavaBeans,
         Applet                                       CGI



  LADO DEL CLIENTE                                             LADO DEL SERVIDOR




                                                                 WILMAN JOSE VEGA CASTILLA. AGOSTO 2012
INTRODUCCIÓN A LAS APLICACIONES WEB


 TCP/IP: EL PARADIGMA CLIENTE / SERVIDOR




                                                      Clientes (Web Browser)
Servidor Web O
 Servidor HTTP




                               WILMAN JOSE VEGA CASTILLA. AGOSTO 2012
INTRODUCCIÓN A LAS APLICACIONES WEB


ORIGENES DE LA WEB
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


                                               WILMAN JOSE VEGA CASTILLA. AGOSTO 2012
INTRODUCCIÓN A LAS APLICACIONES WEB

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)




                                    WILMAN JOSE VEGA CASTILLA. AGOSTO 2012
INTRODUCCIÓN A LAS APLICACIONES WEB

Uniform Resource Identifier
        scheme://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

                                                     WILMAN JOSE VEGA CASTILLA. AGOSTO 2012
INTRODUCCIÓN A LAS APLICACIONES WEB
INTRODUCCIÓN A LAS APLICACIONES WEB

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.




                                        WILMAN JOSE VEGA CASTILLA. AGOSTO 2012
INTRODUCCIÓN A LAS APLICACIONES WEB

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.




                                        WILMAN JOSE VEGA CASTILLA. AGOSTO 2012
INTRODUCCIÓN A LAS APLICACIONES WEB


Paradigma Request / Response
INTRODUCCIÓN A LAS APLICACIONES WEB


ESTRUCTURA DE LOS MENSAJES HTTP
REQUEST MESSAGE             RESPONSE MESSAGE
INTRODUCCIÓN A LAS APLICACIONES WEB

HTML (HIPERTEXT MARKUP LANGUAGE)

• LENGUAJE PARA LAS PAGINAS WEB

• ESTÁNDAR (W3C)




                                  WILMAN JOSE VEGA CASTILLA. AGOSTO 2012
INTRODUCCIÓN A LAS APLICACIONES WEB


XHTML Y HTML
• HTML Bien formado
• Respetar las reglas de
  Marcado




                               WILMAN JOSE VEGA CASTILLA. AGOSTO 2012
INTRODUCCIÓN A LAS APLICACIONES WEB

ETIQUETAS




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




                                     WILMAN JOSE VEGA CASTILLA. AGOSTO 2012
INTRODUCCIÓN A LAS APLICACIONES WEB


ESTRUCTURA DE UN DOCUMENTO HTML




        TALLER 1. PROBEMOS ESTE EJEMPLO!

                                    WILMAN JOSE VEGA CASTILLA. AGOSTO 2012
INTRODUCCIÓN A LAS APLICACIONES WEB

HTML NO TIENE UN IDE ESPECIFICO!

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




                                WILMAN JOSE VEGA CASTILLA. AGOSTO 2012
INTRODUCCIÓN A LAS APLICACIONES WEB

EJERCICIOS

• Hacer una lista con las etiquetas HTML existentes

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




                                       WILMAN JOSE VEGA CASTILLA. AGOSTO 2012

Más contenido relacionado

PDF
livedoor ReaderのクローラとStreaming APIなどの話
DOCX
Email Etiquette Script
PPTX
What do you mean i can’t use wikipedia
PPT
Targeting Public Speaking Mod 1 Mar 19 1
PPTX
Integración de Tecnologías y Plataformas.pptx
PPT
Charla Web Services
PPTX
Desarrollo de la web (laura ballesteros & gicela mendoza) 11.3
PPSX
Tecnologias web
livedoor ReaderのクローラとStreaming APIなどの話
Email Etiquette Script
What do you mean i can’t use wikipedia
Targeting Public Speaking Mod 1 Mar 19 1
Integración de Tecnologías y Plataformas.pptx
Charla Web Services
Desarrollo de la web (laura ballesteros & gicela mendoza) 11.3
Tecnologias web

Similar a Introducción a las aplicaciones web (20)

PDF
Hacia La Web Sincrona
PPT
PPT
Java2 servicios web
PPT
Muestra el acceso a Bases de Datos mediante la WEB
DOCX
Toplogia de internet trabajo
PPTX
Trabajo 3
PPT
Curso: Programación Web con Tecnología Java
PPTX
Introduccion
PPTX
Presentacion sesion01 - Programacion WEB
PPTX
Servidor web
DOCX
Herramientas de la web social
DOCX
Entrada 11 del blog
PPTX
El conocimiento frente a la comunicacin de datos
PPTX
El conocimiento frente a la comunicacin de datos
PPTX
El conocimiento frente a la comunicacin de datos
PPTX
PPTX
Ingeneria de software III
PPTX
Ingeneria de software iii
PDF
3/9 soa y web services
PPTX
Tecnologias para el desarrollo Web
Hacia La Web Sincrona
Java2 servicios web
Muestra el acceso a Bases de Datos mediante la WEB
Toplogia de internet trabajo
Trabajo 3
Curso: Programación Web con Tecnología Java
Introduccion
Presentacion sesion01 - Programacion WEB
Servidor web
Herramientas de la web social
Entrada 11 del blog
El conocimiento frente a la comunicacin de datos
El conocimiento frente a la comunicacin de datos
El conocimiento frente a la comunicacin de datos
Ingeneria de software III
Ingeneria de software iii
3/9 soa y web services
Tecnologias para el desarrollo Web
Publicidad

Más de Wilman Castilla (7)

PPTX
PPTX
Actividad2 Tic Wilman Vega
PPT
Actividad 1
PDF
Manual De Messenger
PDF
Manual De Hotmail
PPT
Actividad 5
PPTX
Actividad1 Tic Wilman Vega
Actividad2 Tic Wilman Vega
Actividad 1
Manual De Messenger
Manual De Hotmail
Actividad 5
Actividad1 Tic Wilman Vega
Publicidad

Último (20)

PDF
Instrucciones simples, respuestas poderosas. La fórmula del prompt perfecto.
PPTX
Sesion 1 de microsoft power point - Clase 1
PDF
capacitación de aire acondicionado Bgh r 410
PPTX
historia_web de la creacion de un navegador_presentacion.pptx
PDF
Influencia-del-uso-de-redes-sociales.pdf
PPT
introduccion a las_web en el 2025_mejoras.ppt
PPTX
la-historia-de-la-medicina Edna Silva.pptx
PPTX
Acronis Cyber Protect Cloud para Ciber Proteccion y Ciber Seguridad LATAM - A...
PDF
clase auditoria informatica 2025.........
PPTX
IA de Cine - Como MuleSoft y los Agentes estan redefiniendo la realidad
PPTX
Presentación de Redes de Datos modelo osi
PDF
Tips de Seguridad para evitar clonar sus claves del portal bancario.pdf
PDF
MANUAL de recursos humanos para ODOO.pdf
PDF
Maste clas de estructura metálica y arquitectura
PDF
PRESENTACIÓN GENERAL MIPIG - MODELO INTEGRADO DE PLANEACIÓN
PPTX
Presentación PASANTIAS AuditorioOO..pptx
PPTX
modulo seguimiento 1 para iniciantes del
PPTX
RAP02 - TECNICO SISTEMAS TELEINFORMATICOS.pptx
PPTX
sa-cs-82-powerpoint-hardware-y-software_ver_4.pptx
DOCX
Zarate Quispe Alex aldayir aplicaciones de internet .docx
Instrucciones simples, respuestas poderosas. La fórmula del prompt perfecto.
Sesion 1 de microsoft power point - Clase 1
capacitación de aire acondicionado Bgh r 410
historia_web de la creacion de un navegador_presentacion.pptx
Influencia-del-uso-de-redes-sociales.pdf
introduccion a las_web en el 2025_mejoras.ppt
la-historia-de-la-medicina Edna Silva.pptx
Acronis Cyber Protect Cloud para Ciber Proteccion y Ciber Seguridad LATAM - A...
clase auditoria informatica 2025.........
IA de Cine - Como MuleSoft y los Agentes estan redefiniendo la realidad
Presentación de Redes de Datos modelo osi
Tips de Seguridad para evitar clonar sus claves del portal bancario.pdf
MANUAL de recursos humanos para ODOO.pdf
Maste clas de estructura metálica y arquitectura
PRESENTACIÓN GENERAL MIPIG - MODELO INTEGRADO DE PLANEACIÓN
Presentación PASANTIAS AuditorioOO..pptx
modulo seguimiento 1 para iniciantes del
RAP02 - TECNICO SISTEMAS TELEINFORMATICOS.pptx
sa-cs-82-powerpoint-hardware-y-software_ver_4.pptx
Zarate Quispe Alex aldayir aplicaciones de internet .docx

Introducción a las aplicaciones web

  • 1. 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
  • 2. 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
  • 3. INTRODUCCIÓN A LAS APLICACIONES WEB PROTOCOLOS DE INTERNET WILMAN JOSE VEGA CASTILLA. AGOSTO 2012
  • 4. INTRODUCCIÓN A LAS APLICACIONES WEB PROTOCOLOS DE INTERNET (TCP/IP) WILMAN JOSE VEGA CASTILLA. AGOSTO 2012
  • 5. INTRODUCCIÓN A LAS APLICACIONES WEB ARPANET TCP/IP TCP: Transmission Control Protocol IP: Internet Protocol Network Interface Lowest level of data transmission facilitating communication with the underlying physical network Internet layer Provides the mechanisms for intersystem communications, controlling message routing, validity checking, and message header composition/decomposition LAYERS 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 WILMAN JOSE VEGA CASTILLA. AGOSTO 2012
  • 6. INTRODUCCIÓN A LAS APLICACIONES WEB ESTRUCTURA DE LAS APLICACIONES WEB HTTP Datos HTML/XML, CSS, JavaScript, PHP, JSP, Servlet, JavaBeans, Applet CGI LADO DEL CLIENTE LADO DEL SERVIDOR WILMAN JOSE VEGA CASTILLA. AGOSTO 2012
  • 7. INTRODUCCIÓN A LAS APLICACIONES WEB TCP/IP: EL PARADIGMA CLIENTE / SERVIDOR Clientes (Web Browser) Servidor Web O Servidor HTTP WILMAN JOSE VEGA CASTILLA. AGOSTO 2012
  • 8. INTRODUCCIÓN A LAS APLICACIONES WEB ORIGENES DE LA WEB 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 WILMAN JOSE VEGA CASTILLA. AGOSTO 2012
  • 9. INTRODUCCIÓN A LAS APLICACIONES WEB 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) WILMAN JOSE VEGA CASTILLA. AGOSTO 2012
  • 10. INTRODUCCIÓN A LAS APLICACIONES WEB Uniform Resource Identifier scheme://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 WILMAN JOSE VEGA CASTILLA. AGOSTO 2012
  • 11. INTRODUCCIÓN A LAS APLICACIONES WEB
  • 12. INTRODUCCIÓN A LAS APLICACIONES WEB 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. WILMAN JOSE VEGA CASTILLA. AGOSTO 2012
  • 13. INTRODUCCIÓN A LAS APLICACIONES WEB 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. WILMAN JOSE VEGA CASTILLA. AGOSTO 2012
  • 14. INTRODUCCIÓN A LAS APLICACIONES WEB Paradigma Request / Response
  • 15. INTRODUCCIÓN A LAS APLICACIONES WEB ESTRUCTURA DE LOS MENSAJES HTTP REQUEST MESSAGE RESPONSE MESSAGE
  • 16. INTRODUCCIÓN A LAS APLICACIONES WEB HTML (HIPERTEXT MARKUP LANGUAGE) • LENGUAJE PARA LAS PAGINAS WEB • ESTÁNDAR (W3C) WILMAN JOSE VEGA CASTILLA. AGOSTO 2012
  • 17. INTRODUCCIÓN A LAS APLICACIONES WEB XHTML Y HTML • HTML Bien formado • Respetar las reglas de Marcado WILMAN JOSE VEGA CASTILLA. AGOSTO 2012
  • 18. INTRODUCCIÓN A LAS APLICACIONES WEB ETIQUETAS Marcar (Markup): indicar partes que componen el documento (contenido e información sobre ese contenido) WILMAN JOSE VEGA CASTILLA. AGOSTO 2012
  • 19. INTRODUCCIÓN A LAS APLICACIONES WEB ESTRUCTURA DE UN DOCUMENTO HTML TALLER 1. PROBEMOS ESTE EJEMPLO! WILMAN JOSE VEGA CASTILLA. AGOSTO 2012
  • 20. INTRODUCCIÓN A LAS APLICACIONES WEB HTML NO TIENE UN IDE ESPECIFICO! Para programar en HTML sólo necesitamos un editor de textos (P.E.: Notepad++) y un navegador WILMAN JOSE VEGA CASTILLA. AGOSTO 2012
  • 21. INTRODUCCIÓN A LAS APLICACIONES WEB EJERCICIOS • Hacer una lista con las etiquetas HTML existentes • Modifiquemos el ejemplo anterior para utilizar por lo menos 5 de estas etiquetas. WILMAN JOSE VEGA CASTILLA. AGOSTO 2012