Curso de Java y Aplicaciones Web Facultad Politécnica – U.N.A. Ing. Esteban Ramírez...

Curso de Java y Aplicaciones Web

Facultad Politécnica – U.N.A.

Ing. Esteban Ramí[email protected]

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.

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


• 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


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>

http://www.pol.una.py/

• Hipertexto ó Enlaces

…<a href="http://www.oreilly.com">Link a otro sitio</a>…<a href=“otraPagina.html”>Link relativo al mismo sitio</a>…


• 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>


• Formularios visualización


• 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.


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>


• 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>


• 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>…


• 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

http://es.wikipedia.org/wiki/Java_EE

Servlets - Funcionamiento

1

UsuarioServidor de aplicaciones

Servlet

1


2

javax.servlet.http.HttpServlet


Servlet

pagina.html

1


2 3



Servlet

pagina.html

1


2 3

4



Servlet

pagina.html

1


5

2 3

4



Servlets Conteiner (Servidores de aplicaciones J2EE)

Apache Tomcat GlassFish

Apache Tomcat GlassFish


Registrar Tomcat en NetBeansTools -> Servers


Servlets - Ejemplo

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 – 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

Curso de Java y Aplicaciones Web.

Ing. Esteban Ramí[email protected]

Curso de Java y Aplicaciones Web Facultad Politécnica – U.N.A. Ing. Esteban Ramírez...

Documents

Transcript of Curso de Java y Aplicaciones Web Facultad Politécnica – U.N.A. Ing. Esteban Ramírez...