Unidad III Tema 1

1Tema # 1Aplicaciones Web

Ing. Jose Alberto Martinez Campos 1

UNIDAD III

INTRODUCCION A LA

PROGRAMACION WEB

AGENDA

Objetivos

Arquitecturas de Programacin

Instalacin de Eclipse

Introduccin a HTML

Preguntas

2Ing. Jose Alberto Martinez Campos

2OBJETIVOS

Conocer las diferentes arquitecturas para laprogramacin y la arquitectura de aplicacionesweb.

Conocer el IDE Eclipse y como hacer copia deseguridad de un proyecto.


PROGRAMACION WEB

Arquitectura monoltica

Cada programa se ejecuta en una solo maquina.

Es una arquitectura rgida de programacin en un solo computador.

4

BD

PROGRAMA

Datos

MAQUINA

Ing. Jose Alberto Martinez Campos

3PROGRAMACION WEB

La mayora de las veces se debe ejecutar elprograma en varias maquinas diferentes (peroaccediendo a la misma base de datos).

Puede haber tantas maquinas como se requiera.

Para simplificar, se har el diagrama con dosmaquinas, aunque todo lo que se explique seraplicable a mas de dos.


PROGRAMACION WEB

Arquitectura cliente servidor

6

BD

Prog Servidor

Datos

MAQUINA Servidor

Mquina Cliente

Prog Cliente

Mquina Cliente

Prog Cliente

En esta arquitectura la BD esta en una mquina y las otras acceden a ella para recuperar los datos.Se llama servidor a la mquina que tiene la BD y clientes a las mquinas que acceden al servidor para obtener un servicio o respuesta.

REDPeticin

RespuestaRespuesta

Peticin


4PROGRAMACION WEB

Arquitectura cliente servidor

Esta arquitectura consiste bsicamente en un clienteque realiza peticiones a otro programa (servidor) que leenva una respuesta.

Tanto el servidor como el cliente pueden tener cdigo.

Ahora el programa se ha partido en dos. La parte queesta en el cliente y la parte que esta en el servidor.

Pueden llamarse tambin cliente y servidorrespectivamente.


PROGRAMACION WEB

Aplicaciones Web

8

BD

Prog Servidor

Datos

MAQUINA Servidor

Mquina Cliente

Browser

Mquina Cliente

Browser

En esta arquitectura el programa cliente es un "browser" y recibe HTML del servidor. La red puede ser mediante Internet o una Intranet.

REDPeticin

RespuestaRespuesta

Peticin


5PROGRAMACION WEB

Aplicaciones Web

9

BD

Prog Servidor

Datos

MAQUINA Servidor

Mquina Cliente

Browser

Mquina Cliente

Browser

Los clientes pueden ser muchos. Sin embargo, a partir de ahora slo se dibujar un cliente por falta de espacio y porque todos los otros clientes su comportamiento son iguales.

REDPeticin

RespuestaRespuesta

Peticin


PROGRAMACION WEB

Aplicaciones Web

10

BD

Prog Servidor

Datos

MAQUINA Servidor

Mquina Cliente

Browser

El cliente es el navegador de Internet ("browser"). El servidor recibe peticiones HTTP y devuelve HTML que despus el browser traduce en una pgina Web, que es la que ve el cliente.

El servidor genera HTML que crea la pgina Web en el "browser". El navegador, a partir del HTML dibuja la pgina.

REDGeneraHTML(Response)

PeticionesHTTP(Request)


PAGINA WEB

6PROGRAMACION WEB

Aplicaciones Web

En la programacin para la Web, el cliente nohay que programarlo, sino que ya viene dado, esel navegador ("browser").

Solo hay que programar el servidor, pero estedebe ser compatible con el cliente ("browser"),que ya esta definido.

Para que sea compatible, debe hablar el lenguajeque el browser entiende, el cual es HTML.

Esto nos obliga a conocer HTML en laasignatura.


PROGRAMACION WEB

Escribir HTML se puede hacer con cualquiereditor, como el Bloc de notas o Notepad ++.

Un proyecto de programacin web consta dearchivos java junto con archivos HTML.

En esta asignatura usaremos el mismo entornopara escribir java y para desplegar HTML.

De esta forma tendremos todo el proyecto en unnico entorno y en una nica ubicacin en disco.


7INSTALACION DE ECLIPSE

Descargar Eclipse Juno Ir a www.eclipse.org/ en la parte derecha hacer clic en Download.

En la pgina que aparece buscar Package Solutions, hacer clic enEclipse IDE for Java EE Developers.


INSTALACION DE ECLIPSE

Descargar Eclipse Juno En el enlace Releases buscar y hacer clic en Juno Packages.

En la siguiente pagina se debe seleccionar la versin de 32 bit paraWindows, del Paquete Eclipse juno sr2.



Como la mayora de entornos IDE, Eclipse Junotrabaja con proyectos.

Un proyecto es un conjunto de archivos que sonnecesarios para desarrollar y ejecutar una aplicacin.



Creando un nuevo proyecto en Eclipse.

Seleccionar File | New | Project



Aparecer una ventana como la siguiente, en la quedebemos expandir la carpeta Web, seleccionar StaticWeb Project y hacer clic en el botn Next.

17

Static Web Project se utiliza para desarrollar proyectos web de pginas web estticas (solo HTML).



Colocar el nombre del proyecto y presionar el botn Finish.

18

Las otras opciones se dejaran con su valor por defecto.

Aparece el directorio donde se guardar el proyecto.


10


Seleccionar la opcin Remember my decision y presionar el botn Yes.



El nuevo proyecto aparecer a la izquierda en unpestaa que se llama Project Explorer, dondeaparecern todos los proyectos para poderlos gestionar.

20

Expandir la carpeta y ver que hay otras subcarpetas.

En la carpeta WebContentes donde se colocarn los archivos HTML.


11


Crear un archivo HTML.

Hacer clic en la carpeta WebContent, para colocar enesa carpeta el nuevo archivo; luego hacer File | New |HTML File.



En File name: se debe colocar el nombre del archivo, luego presionar el botn Finish.

22

No olvidar colocar la extensin HTML


12


A la izquierda se visualiza el archivo hola.html bajo lacarpeta WebContent. A la derecha se puede editar eltexto del archivo.



El smbolo de asterisco (*) indica que hay cambios noguardados. Para guardarlos se debe presionar el iconodel disquete.


13


Mostrar el directorio donde se guarda el proyecto.

Seleccionar el proyecto en la pestaa ProjectExplorer y hacer clic derecho del mouse, seleccionar la opcin Properties.



Hacer una copia de seguridad de un proyecto.

Hacer clic derecho en el proyecto en la pestaa ProjectExplorer y seleccionar Export.

26

Aparece la ventana de la izquierda.

Hacer clic en General para expandir y despus seleccionar Archive File, presionar el botn Next.


14


En To archive file: colocar la ruta (ubicacin y nombre) donde se guardar el proyecto.

27

Presionar el botn Finish.



Hacer copia de seguridad de un proyecto.

Esta accin generar un archivo comprimido deextensin ZIP.

Cuando en los laboratorios prcticos evaluados se lessolicite un ejercicio a entregar, lo que se les estasolicitando es ese archivo ZIP de copia de seguridad.


15

INTRODUCCION A HTML

Como se ha visto en una aplicacin Web el servidor enva HTML al browser del cliente.

El browser usa este HTML para construir o dibujar la pgina.

Por lo tanto, si queremos programar para la Web, debemos tener nociones de HTML.


INTRODUCCION A HTML

Esta no es una asignatura sobre diseo web yHTML.

Por eso, no veremos HTML con profundidad.

Se explicar lo necesario de HTML que hacefalta para comprender la programacin para laWeb con Java.

Esto har que nuestras pginas no sern muyestticas pero se ver el mecanismo quepermite funcionar una aplicacin por Internet.Todo lo dems es diseo.


16

INTRODUCCION A HTML

HyperText Markup Language (Lenguaje demarcado de hipertexto). Es el lenguaje en elcual se disean las pginasWeb.

Creado por Tim Berners-Lee en el laboratoriode fsica nuclear CERN en Ginebra, Suiza en1989.

Es el HTML el que cre la Web. Antes ya habaInternet pero no era tan fcil de manejar.

HTML slo define el diseo esttico de laspginas. Para definir su comportamientodinmico se necesita del lenguaje Java.


INTRODUCCION A HTML

Es un lenguaje que se escribe en archivos de texto (llamados documentos HTML) y tiene marcas o etiquetas (tags) que indican cuales son los elementos de la pgina Web.

Un elemento de la pgina Web se escriben entre dos etiquetas: una de inicio y una de final. La de inicio se escribe y la del final se escribe .

As, por ejemplo, un documento HTML comienza

con ("inicio de HTML") y acaba con

("fin de HTML").


17

INTRODUCCION A HTML

Estructura de un documento HTML sencillo.

Ttulo de la pgina

Diseo de la pgina

33

La cabecera (Head) quecontiene informacingeneral del documentocomo el titulo (Title).

El cuerpo (Body) quecontiene el diseo dela pgina Web.


INTRODUCCION A HTML

Ejemplo de un documento HTML.

Primera Pagina

Esto es una prueba de HTML.


18

INTRODUCCION A HTML

Escribiendo este ejemplo de HTML en Eclipse.

Desplegarlo en un navegador web HTML.

35

DOCTYPE indica laversin de HTML.Eclipse coloca estoautomticamente.

Content-Type indica eltipo de caracteres que sevan a usar, ISO-8859-1sonlos caracteres en espaol.


INTRODUCCION A HTML

En Eclipse navegar en el men Window | Web Browser y marcar Firefox.

En el archivo hola.html hacer clic derecho dentro delProject Explorer y seleccionar Run As 1 Run onServer.


19

INTRODUCCION A HTML

En la ventana Run on Server presionar Finish. A continuacin se mostrar en el navegador seleccionado el resultado de la pgina HTML.

37

Ttulo (title)

Cuerpo del Documento (body)


INTRODUCCION A HTML

Hay otra forma de hacerlo, hacer clic derecho dentro del Project Explorer y seleccionar Open With | Web Browser como se puede ver en la figura.


20

INTRODUCCION A HTML

Etiquetas comunes para el cuerpo del documento

Aqu va un prrafo En medio de estas dos etiquetas va un prrafo. La segunda parte es opcional. As:

Este es el primer parrafo

Este es el segundo parrafo

Aqu va un ttulo En medio de estas dos etiquetas va un ttulo (es ttulo porque tiene letra de mayor tamao)

Aqu va un ttulo mas pequeo

Aqu un ttulo aun mas pequeo

Ttulos mas pequeos se obtienen con hasta


INTRODUCCION A HTML

Etiquetas comunes para el cuerpo del documento

Aqu va letra en cursiva

Aqu va letra en negrita

letra con nfasis fuerte

asocia texto a un control

Texto de hipervnculo

Especifica hipervnculos (enlaces) a otros documentos HTML

Buscador Google


21

INTRODUCCION A HTML

Algunos caracteres tiles en espaol. En HTML los caracteres que no son nmeros o letras del alfabeto

ingls deben indicarse de una forma especial. As:

es la a acentuada ()

es la e acentuada ()

es la i acentuada ()

es la o acentuada ()

es la u acentuada ()

es la letra ee ()

No hay problema si se pone

Como hace Eclipse Juno por defecto.


INTRODUCCION A HTML

Los saltos de lnea del documento HTML no sereflejan en la pgina Web que ste produce.

Para separar las lneas en la pgina Web, lassepararemos con (salto de lnea) o bien con (comienza de un nuevo prrafo, dejando unalnea en blanco antes de l).

Si no se colocan estas etiquetas, no se har el saltode lnea.


22

INTRODUCCION A HTML

Formularios.

Una pgina Web donde hay uno o varios controles deintroduccin de datos y un botn para enviarlos alservidor se dice que contiene un formulario.

Adems de cuadros de texto pueden haber otroscontroles de introduccin, como botones de radio, etc.

Los formularios son la forma que tiene HTML para queel usuario introduzca datos.

Dicho de otra forma, un formulario es un fragmento deuna pgina Web que sirve para introducir datos yenviarlos al servidor.


INTRODUCCION A HTML

Formularios.

Consta de controles de introduccin de datos (sobretodo, cuadros de texto) para introducir los datos (uno ovarios) y botones para enviarlos al servidor.

Llamaremos elementos del formulario tanto a loscontroles de introduccin de datos como a los botones.


23

INTRODUCCION A HTML

Cdigo HTML para un formulario.

cdigo HTML del primer elemento

cdigo HTML del segundo elemento

..

cdigo HTML del ltimo elemento


INTRODUCCION A HTML

Formularios.

Para los controles de introduccin de datos,distinguiremos entre:

El Nombre. Es el nombre de ese control.

ElTexto. Son las palabras que se ven por pgina de ese control.

El Valor. Son los datos que se envan al servidor, para serprocesados por el programa.

Estos tres pueden ser el mismo o diferentes.


24

Cdigo HTML para un elemento de formulario. Si el elemento es texto, se escribe el texto sin ms.

Si es un cuadro de texto el cdigo es el siguiente:

Si el botn es para enviar el formulario, el cdigo es el siguiente:

Si el botn es para restablecer el formulario a los valores pordefecto:

INTRODUCCION A HTML


INTRODUCCION A HTML

Introduccin de datos

Nombre:


25

INTRODUCCION A HTML

Casillas de verificacin.

Son casillas que indican opciones que pueden seleccionarse ono. Cada casilla puede seleccionarse o no de formaindependiente de las otras.

49

Se obtienen con el siguiente cdigo:

Si se desea que la casilla salga seleccionada por defecto, se colocaCHECKED antes del >.


INTRODUCCION A HTML

Casillas de Verificacion

Que ingredientes desea para su pizza?

Hongos

Cebolla

Pepperoni

Carne


26

INTRODUCCION A HTML

Botones de radio.

Como las casillas de verificacin, son casillas en las que sepuede seleccionar opciones. Pero, a diferencia de stas, sedan en grupos y solo se puede seleccionar un botn de cadagrupo.

51

Si se desea que aparezca el botn seleccionado por defecto, se coloca CHECKED antes del >.


INTRODUCCION A HTML

Botones de Radio

Cul es su mtodo de pago?

Mastercard

Visa

American Express


27

INTRODUCCION A HTML

Listas.

Controles de introduccin de datos en los que se elige unvalor de una lista predeterminada.

LISTA SIMPLE

53

TextoOpcin1 TextoOpcin2 .TextoOpcinN

Para preseleccionar una opcin,hay que colocar SELECTEDantes del > que cierra el

28

INTRODUCCION A HTML

Ejercicio 1

Crear un archivo llamado saludar.html que produzca elsiguiente formulario.


INTRODUCCION A HTML

Ejercicio 2 Crear un archivo llamado menu.html que produzca lo siguiente:


Al presionar la casilla Vegetariana deber demarcar los siguientes ingredientes:Cebolla,Tomate, ChileVerde y Loroco.

Al presionar la casilla Solo Carnes deber demarcar los siguientes ingredientes:Pepperoni,Tocino, Carne Res, Jamn y Salami

Si esta marcada cualquiera de las dos casillasanteriores al desmarcarla, deber de desmarcarsus respectivos ingredientes.

El botn Limpiar deber de desmarcar todaslas casillas del formulario.

29

INTRODUCCION A HTML

Materiales de Apoyo.

http://www.htmlquick.com/es/reference.html

http://www.programacion.com/articulo/curso_de_html_4_0_32

http://www.desarrolloweb.com/articulos/11.php

http://www.desarrolloweb.com/articulos/1375.php


PREGUNTAS

58

Documents

Unidad III Tema 1