Download - 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.
3Ing. Jose Alberto Martinez Campos
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.
5Ing. Jose Alberto Martinez Campos
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
Ing. Jose Alberto Martinez Campos
-
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.
7Ing. Jose Alberto Martinez Campos
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
Ing. Jose Alberto Martinez Campos
-
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
Ing. Jose Alberto Martinez Campos
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)
Ing. Jose Alberto Martinez Campos
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.
11Ing. Jose Alberto Martinez Campos
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.
12Ing. Jose Alberto Martinez Campos
-
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.
13Ing. Jose Alberto Martinez Campos
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.
14Ing. Jose Alberto Martinez Campos
-
8INSTALACION DE ECLIPSE
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.
15Ing. Jose Alberto Martinez Campos
INSTALACION DE ECLIPSE
Creando un nuevo proyecto en Eclipse.
Seleccionar File | New | Project
16Ing. Jose Alberto Martinez Campos
-
9INSTALACION DE ECLIPSE
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).
Ing. Jose Alberto Martinez Campos
INSTALACION DE ECLIPSE
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.
Ing. Jose Alberto Martinez Campos
-
10
INSTALACION DE ECLIPSE
Seleccionar la opcin Remember my decision y presionar el botn Yes.
19Ing. Jose Alberto Martinez Campos
INSTALACION DE ECLIPSE
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.
Ing. Jose Alberto Martinez Campos
-
11
INSTALACION DE ECLIPSE
Crear un archivo HTML.
Hacer clic en la carpeta WebContent, para colocar enesa carpeta el nuevo archivo; luego hacer File | New |HTML File.
21Ing. Jose Alberto Martinez Campos
INSTALACION DE ECLIPSE
En File name: se debe colocar el nombre del archivo, luego presionar el botn Finish.
22
No olvidar colocar la extensin HTML
Ing. Jose Alberto Martinez Campos
-
12
INSTALACION DE ECLIPSE
A la izquierda se visualiza el archivo hola.html bajo lacarpeta WebContent. A la derecha se puede editar eltexto del archivo.
23Ing. Jose Alberto Martinez Campos
INSTALACION DE ECLIPSE
El smbolo de asterisco (*) indica que hay cambios noguardados. Para guardarlos se debe presionar el iconodel disquete.
24Ing. Jose Alberto Martinez Campos
-
13
INSTALACION DE ECLIPSE
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.
25Ing. Jose Alberto Martinez Campos
INSTALACION DE ECLIPSE
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.
Ing. Jose Alberto Martinez Campos
-
14
INSTALACION DE ECLIPSE
En To archive file: colocar la ruta (ubicacin y nombre) donde se guardar el proyecto.
27
Presionar el botn Finish.
Ing. Jose Alberto Martinez Campos
INSTALACION DE ECLIPSE
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.
28Ing. Jose Alberto Martinez Campos
-
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.
29Ing. Jose Alberto Martinez Campos
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.
30Ing. Jose Alberto Martinez Campos
-
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.
31Ing. Jose Alberto Martinez Campos
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").
32Ing. Jose Alberto Martinez Campos
-
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.
Ing. Jose Alberto Martinez Campos
INTRODUCCION A HTML
Ejemplo de un documento HTML.
Primera Pagina
Esto es una prueba de HTML.
34Ing. Jose Alberto Martinez Campos
-
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.
Ing. Jose Alberto Martinez Campos
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.
36Ing. Jose Alberto Martinez Campos
-
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)
Ing. Jose Alberto Martinez Campos
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.
38Ing. Jose Alberto Martinez Campos
-
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
39Ing. Jose Alberto Martinez Campos
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
40Ing. Jose Alberto Martinez Campos
-
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.
41Ing. Jose Alberto Martinez Campos
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.
42Ing. Jose Alberto Martinez Campos
-
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.
43Ing. Jose Alberto Martinez Campos
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.
44Ing. Jose Alberto Martinez Campos
-
23
INTRODUCCION A HTML
Cdigo HTML para un formulario.
cdigo HTML del primer elemento
cdigo HTML del segundo elemento
..
cdigo HTML del ltimo elemento
45Ing. Jose Alberto Martinez Campos
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.
46Ing. Jose Alberto Martinez Campos
-
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
47Ing. Jose Alberto Martinez Campos
INTRODUCCION A HTML
Introduccin de datos
Nombre:
48Ing. Jose Alberto Martinez Campos
-
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 >.
Ing. Jose Alberto Martinez Campos
INTRODUCCION A HTML
Casillas de Verificacion
Que ingredientes desea para su pizza?
Hongos
Cebolla
Pepperoni
Carne
50Ing. Jose Alberto Martinez Campos
-
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 >.
Ing. Jose Alberto Martinez Campos
INTRODUCCION A HTML
Botones de Radio
Cul es su mtodo de pago?
Mastercard
Visa
American Express
52Ing. Jose Alberto Martinez Campos
-
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.
55Ing. Jose Alberto Martinez Campos
INTRODUCCION A HTML
Ejercicio 2 Crear un archivo llamado menu.html que produzca lo siguiente:
56Ing. Jose Alberto Martinez Campos
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
57Ing. Jose Alberto Martinez Campos
PREGUNTAS
58