Post on 26-Jan-2015
Curso de Java y Aplicaciones Web
Facultad Politécnica – U.N.A.
Ing. Esteban Ramírezedre@gmail.com
Programación Web
Objetivos
Ejemplo básico
Programacion Web con Java
Html, JavaScript, Ajax y CSS.
Arquitectura de las aplicaciones Web
Introducción a las aplicaciones Web
Curso de Java y Aplicaciones Web
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.
Ejemplos de Aplicaciones web Curso de Java y Aplicaciones Web
Arquitectura de una aplicación Web
Usuario
Browser
http://www.pol.una.py/cursoWeb.pdf
Servidor DNS
¿IP de www.pol.una.py?
170.51.6.71
Servidor Web
Conexión TCP al puerto 80 del host 170.51.6.71
Solicitar recurso cursoWeb.pdfSolicitud en formato HTTP
Servidor envía respuesta sobreConexión TCP
Cerrar Conexión TCP
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)
Evolución de las tecnologías para aplicaciones web
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
Lenguajes Web en servidor
PHPEs 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 .NETDesarrollado 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.
PERLEs 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.
PYTHONCreado 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.
RUBYEs un lenguaje interpretado de muy alto nivel y orientado a objetos. Software Libre. Multiplataforma. Su sintaxis está inspirada en Phyton, Perl.
Lenguajes Web en servidor
PHPEs 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 .NETDesarrollado 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.
PERLEs 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.
PYTHONCreado 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.
RUBYEs un lenguaje interpretado de muy alto nivel y orientado a objetos. Software Libre. Multiplataforma. Su sintaxis está inspirada en Phyton, Perl.
Lenguaje en el cliente
• HTML - HyperText Markup Language• JavaScript • CSS (Cascading Style Sheets)• Flash• Others resources
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>
• 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
Composición de las interfaces Web
• CSS (Cascading Style Sheets)
body { font-family: Georgia, Times, "Times New Roman", serif; color: #030; } h1, h2, h3 { font-family: Georgia, Times, "Times New Roman", serif; color: #030; }
Puede estar dentro de la misma página o en archivos externos
Composición de las interfaces Web
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=“http://www.pol.una.py”>Un link</a> </body></html>
• Hipertexto ó Enlaces
…<a href="http://www.oreilly.com">Link a otro sitio</a>…<a href=“otraPagina.html”>Link relativo al mismo sitio</a>…
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>
HTML – Hypertext Markup Language
• Formularios visualización
HTML – Hypertext Markup Language
• Tablas
<table> <tr>
<th>Cédula</th><th>Nombre</th> </tr> <tr>
<td>123456</td><td>Juan Pérez</td> </tr> <tr>
<td>987432</td><td>María González</td> </tr></table>
Datos en forma tabular. Disposición de elementos en una página.
HTML – Hypertext Markup Language
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>
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>
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>…
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>
DHTML, JavaScript y CSS
Definición de estilos con JavaScript
<HTML><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>
J2EE
Java Platform, Enterprise Edition o Java EE
http://es.wikipedia.org/wiki/Java_EE
Servlets - Funcionamiento
1
UsuarioServidor de aplicaciones
Servlet
1
UsuarioServidor de aplicaciones
2
javax.servlet.http.HttpServlet
Servlets - Funcionamiento
Servlet
pagina.html
1
UsuarioServidor de aplicaciones
2 3
Servlets - Funcionamiento
javax.servlet.http.HttpServlet
Servlet
pagina.html
1
UsuarioServidor de aplicaciones
2 3
4
Servlets - Funcionamiento
javax.servlet.http.HttpServlet
Servlet
pagina.html
1
UsuarioServidor de aplicaciones
5
2 3
4
Servlets - Funcionamiento
javax.servlet.http.HttpServlet
Servlets Conteiner (Servidores de aplicaciones J2EE)
Apache Tomcat GlassFish
Apache Tomcat GlassFish
Servlets Conteiner (Servidores de aplicaciones J2EE)
Registrar Tomcat en NetBeansTools -> Servers
Servlets Conteiner (Servidores de aplicaciones J2EE)
Servlets - Ejemplo
Servlets – proyecto Test
Servlets – proyecto Test
Servlets – proyecto Test
Servlets – proyecto Test
Servlets - Ejemplo
Archivo de configuración de la App. Web.
Archivos xHtml
Archivos .java
Librerías .jar
Archivo de configuración dependiente del server
Servlets – Test.java
Servlets – Test.java
Servlets – Web.xml
Servlets – Run
Servlets - Ejemplo• http://localhost:8080/Test/Test
Servlets - Ejemplo• http://localhost:8080/Test?
nombre=CursoJava
Servlets - Ejemplo
• http://miservidor:8080/Test?nombre=CursoJava
Iteración con pagina HtmlCurso de Java y Aplicaciones Web
Estructura de una App Web.w
ar
(Web
App
licat
ion
Arc
hive
)
Frameworks
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.
Frameworks web java
Frameworks web java
Curso de Java y Aplicaciones Web.
Ing. Esteban Ramírezedre@gmail.com