Descargar la presentación
La descarga está en progreso. Por favor, espere
1
Curso de Java y Aplicaciones Web
Programación Web Facultad Politécnica – U.N.A. Ing. Esteban Ramírez
2
Objetivos Introducción a las aplicaciones Web
Curso de Java y Aplicaciones Web Introducción a las aplicaciones Web Arquitectura de las aplicaciones Web Html, JavaScript, Ajax y CSS. Programacion Web con Java Ejemplo básico
3
Aplicaciones web Curso de Java y Aplicaciones Web Aplicaciones que los usuarios pueden utilizar accediendo a un servidor web a través de Internet o de una intranet mediante un navegador.
4
Ejemplos de Aplicaciones web
Curso de Java y Aplicaciones Web
5
Arquitectura de una aplicación Web
Servidor DNS Servidor Web ¿IP de Browser Conexión TCP al puerto 80 del host Solicitar recurso cursoWeb.pdf Solicitud en formato HTTP Usuario Servidor envía respuesta sobre Conexión TCP Cerrar Conexión TCP
6
Arquitectura de una aplicación Web
Browser (Firefox, IE, Chrome) Red (Intranet - Internet) Protocolo HTTP (HyperText Transfer Protocol) Servidor Web (Apache, IIS, Tomcat) Servidores de bases de datos (Oracle, MySql) Servicios Web externos (Cotizaciones, Clima)
7
Evolución de las tecnologías para aplicaciones web
8
Tipos de contenido Páginas estáticas: Archivos físicos almacenados en disco Páginas dinámicas: Contenido generado por programas ejecutados en el servidor
9
Lenguajes Web en servidor
PHP Es un lenguaje de programación utilizado para la creación de sitio web. PHP es un acrónimo recursivo que significa “PHP Hypertext Pre-processor”. ASP .NET Desarrollado para resolver las limitantes de su antecesor ASP. Para desarrollar web sencillas o grandes aplicaciones. Para el desarrollo de ASP.NET se puede utilizar C#, VB.NET o J#. Completamente orientado a objetos. Ambiente Microsoft. PERL Es la alternativa más popular a PHP, es el acronimo de "Practical Extraction and Report Language" uno de los lenguajes más antiguos para este segmento. Gran cantidad de módulos ya escritos. Deriva ampliamente del lenguaje C. PYTHON Creado en el año 1990, es el sucesor del lenguaje de programación ABC. Python es comparado habitualmente con Perl. Programación estructurada y orientada a bojetos. Multiplataforma. Opensource. RUBY Es un lenguaje interpretado de muy alto nivel y orientado a objetos. Software Libre. Multiplataforma. Su sintaxis está inspirada en Phyton, Perl.
10
Lenguajes Web en servidor
PHP Es un lenguaje de programación utilizado para la creación de sitio web. PHP es un acrónimo recursivo que significa “PHP Hypertext Pre-processor”. ASP .NET Desarrollado para resolver las limitantes de su antecesor ASP. Para desarrollar web sencillas o grandes aplicaciones. Para el desarrollo de ASP.NET se puede utilizar C#, VB.NET o J#. Completamente orientado a objetos. Ambiente Microsoft. PERL Es la alternativa más popular a PHP, es el acronimo de "Practical Extraction and Report Language" uno de los lenguajes más antiguos para este segmento. Gran cantidad de módulos ya escritos. Deriva ampliamente del lenguaje C. PYTHON Creado en el año 1990, es el sucesor del lenguaje de programación ABC. Python es comparado habitualmente con Perl. Programación estructurada y orientada a bojetos. Multiplataforma. Opensource. RUBY Es un lenguaje interpretado de muy alto nivel y orientado a objetos. Software Libre. Multiplataforma. Su sintaxis está inspirada en Phyton, Perl.
11
Lenguaje en el cliente HTML - HyperText Markup Language JavaScript
CSS (Cascading Style Sheets) Flash Others resources
12
Composición de las interfaces Web
Ejemplo.html <html> <body> <p> Hola Mundo <b> 2011</b> </p> <form name=“formulario”> <input type=“button” value=“Click aquí”> </form> </body> </html>
13
Composición de las interfaces Web
JavaScript <html> <script> function mostrarMensaje() { alert(“Usted ha hecho click”); } </script> <body> <form name=“formulario”> <input type=“button” value=“Click aquí” onclick=“mostrarMensaje()”> </form> <img src=“imagenes/dibujo1.gif”> </body> </html> Las funciones JavaScript pueden estar en archivos separados
14
Composición de las interfaces Web
CSS (Cascading Style Sheets) body { font-family: Georgia, Times, "Times New Roman", serif; color: #030; } h1, h2, h3 { Puede estar dentro de la misma página o en archivos externos
15
HTML – Hypertext Markup Language
Estructura de un documento HTML <html> <head> <title>My first HTML document</title> </head> <body> <h2>My first HTML document</h2> Hello, <i>World Wide Web!</i> <a hfref=“ link</a> </body> </html>
16
HTML – Hypertext Markup Language
Hipertexto ó Enlaces … <a href=" a otro sitio</a> <a href=“otraPagina.html”>Link relativo al mismo sitio</a>
17
HTML – Hypertext Markup Language
Formularios <form method=“post” action=“guardarPersona.php”> Cedula: <input type=“text” name=“cedula”> Nombre: <input type=“text” name=“nombre”> Contraseña: <input type=“password” name=“passwd”> Sexo: <input type=“radio” name=“sexo” value=“M”> Masculino <input type=“radio” name=“sexo” value=“F”> Femenino Nacionalidad: <select name=“nacionalidad”> <option value=“py”>Paraguaya</option> <option value=“br”>Brasilera</option> <option value=“ar”>Argentina</option> </select> <input type=“submit” value=“Guardar”> </form>
18
HTML – Hypertext Markup Language
Formularios visualización
19
HTML – Hypertext Markup Language
Tablas <table> <tr> <th>Cédula</th><th>Nombre</th> </tr> <td>123456</td><td>Juan Pérez</td> <td>987432</td><td>María González</td> </table> Datos en forma tabular. Disposición de elementos en una página.
20
CSS – Cascading Style Sheets
Inline styles <html><body> … <h1 style="color: blue; font-style: italic"> Título en azul y cursiva </h1> <p style=“font-family: arial; font-style: bold"> Párrafo en negrita y arial </p> </body></html>
21
CSS – Cascading Style Sheets
Document level styles <html> <head> <title>Página de párrafos en azul</title> <style type="text/css"> p {color: blue; font-style: italic} </style> </head> <body> <p>Un párrafo en azul</p> ... <p>Otro párrafo en azul</p> … </body> </html>
22
CSS – Cascading Style Sheets
External Style Sheets En el archivo estilos.css: p {color: blue; font-style: italic} En el archivo pagina.html: <head> <title>Página de párrafos en azul</title> <link rel=stylesheet type="text/css“ href=“estilos.css"> </head> <body> <p>Un párrafo en azul</p> ... <p> Otro párrafo en azul</p> …
23
CSS – Cascading Style Sheets
Anidamiento #top { background-color: #ccc; padding: 1em ; color: #cccccc; } #top h1 { color: #ff0; } #top p { color: red; font-weight: bold; } <div id=“top”> <h1>Texto 1</h1> <p>Texto 2</p> <p style=“color:green”>Texto 3</p> </div>
24
DHTML, JavaScript y CSS Definición de estilos con JavaScript
<HEAD> <STYLE TYPE="text/javascript"> tags.H1.color = "red" tags.H1.textTransform = "capitalize" tags.P.color = "blue" </STYLE> </HEAD> <BODY> <H1>Some heading</H1> <P>Some paragraph text.</P> </BODY> </HTML>
25
J2EE Java Platform, Enterprise Edition o Java EE
26
Servlets - Funcionamiento
Usuario 1 Servidor de aplicaciones
27
Servlets - Funcionamiento
javax.servlet.http.HttpServlet Servlet 2 Usuario 1 Servidor de aplicaciones
28
Servlets - Funcionamiento
javax.servlet.http.HttpServlet Servlet 2 Usuario 1 Servidor de aplicaciones 3 pagina.html
29
Servlets - Funcionamiento
javax.servlet.http.HttpServlet Servlet 2 Usuario 1 Servidor de aplicaciones 3 4 pagina.html
30
Servlets - Funcionamiento
javax.servlet.http.HttpServlet Servlet 2 Usuario 1 Servidor de aplicaciones 3 5 4 pagina.html
31
Servlets Conteiner (Servidores de aplicaciones J2EE)
Apache Tomcat GlassFish
32
Servlets Conteiner (Servidores de aplicaciones J2EE)
Apache Tomcat GlassFish
33
Servlets Conteiner (Servidores de aplicaciones J2EE)
Registrar Tomcat en NetBeans Tools -> Servers
34
Servlets - Ejemplo
35
Servlets – proyecto Test
36
Servlets – proyecto Test
37
Servlets – proyecto Test
38
Servlets – proyecto Test
39
Servlets - Ejemplo Archivo de configuración dependiente del server
Archivo de configuración de la App. Web. Archivos xHtml Archivos .java Librerías .jar
40
Servlets – Test.java
41
Servlets – Test.java
42
Servlets – Web.xml
43
Servlets – Run
44
Servlets - Ejemplo
45
Servlets - Ejemplo
46
Servlets - Ejemplo
47
Iteración con pagina Html
Curso de Java y Aplicaciones Web
48
Estructura de una App Web
(Web Application Archive) .war
49
Frameworks
50
Frameworks En el desarrollo de software, un framework es una estructura conceptual y tecnológica de soporte definida, normalmente con artefactos o módulos de software concretos, con base en la cual otro proyecto de software puede ser organizado y desarrollado.
51
Frameworks web java
52
Frameworks web java
53
Curso de Java y Aplicaciones Web.
Gracias!... Curso de Java y Aplicaciones Web. Ing. Esteban Ramírez
Presentaciones similares
© 2024 SlidePlayer.es Inc.
All rights reserved.