INSTITUTO TECNOLOGICO SUPERIOR DE INSTITUTO TECNOLOGICO SUPERIOR DE INSTITUTO TECNOLOGICO SUPERIOR DE INSTITUTO TECNOLOGICO SUPERIOR DE

CARRERA: INGENIERIA EN SISTEMAS COMPUTACIONALESCARRERA: INGENIERIA EN SISTEMAS COMPUTACIONALESCARRERA: INGENIERIA EN SISTEMAS COMPUTACIONALESCARRERA: INGENIERIA EN SISTEMAS COMPUTACIONALES

DOCENTE: LIC.SAID JAIR GUERRA ESCUDERODOCENTE: LIC.SAID JAIR GUERRA ESCUDERODOCENTE: LIC.SAID JAIR GUERRA ESCUDERODOCENTE: LIC.SAID JAIR GUERRA ESCUDERO

ASIGASIGASIGASIGNATURA: NATURA: NATURA: NATURA: PROGRAMACION WEBPROGRAMACION WEBPROGRAMACION WEBPROGRAMACION WEB

INTEGRNATES: ESTELA FRANCISCO CATARINAINTEGRNATES: ESTELA FRANCISCO CATARINAINTEGRNATES: ESTELA FRANCISCO CATARINAINTEGRNATES: ESTELA FRANCISCO CATARINA

ADELAIDA HERNANDEZ CRUZADELAIDA HERNANDEZ CRUZADELAIDA HERNANDEZ CRUZADELAIDA HERNANDEZ CRUZ

ANA ROSA MARTINEZ CABRERAANA ROSA MARTINEZ CABRERAANA ROSA MARTINEZ CABRERAANA ROSA MARTINEZ CABRERA

INSTITUTO TECNOLOGICO SUPERIOR DE INSTITUTO TECNOLOGICO SUPERIOR DE INSTITUTO TECNOLOGICO SUPERIOR DE INSTITUTO TECNOLOGICO SUPERIOR DE

CHICONTEPECCHICONTEPECCHICONTEPECCHICONTEPEC

CARRERA: INGENIERIA EN SISTEMAS COMPUTACIONALESCARRERA: INGENIERIA EN SISTEMAS COMPUTACIONALESCARRERA: INGENIERIA EN SISTEMAS COMPUTACIONALESCARRERA: INGENIERIA EN SISTEMAS COMPUTACIONALES

DOCENTE: LIC.SAID JAIR GUERRA ESCUDERODOCENTE: LIC.SAID JAIR GUERRA ESCUDERODOCENTE: LIC.SAID JAIR GUERRA ESCUDERODOCENTE: LIC.SAID JAIR GUERRA ESCUDERO

PROGRAMACION WEBPROGRAMACION WEBPROGRAMACION WEBPROGRAMACION WEB

INTEGRNATES: ESTELA FRANCISCO CATARINAINTEGRNATES: ESTELA FRANCISCO CATARINAINTEGRNATES: ESTELA FRANCISCO CATARINAINTEGRNATES: ESTELA FRANCISCO CATARINA

ADELAIDA HERNANDEZ CRUZADELAIDA HERNANDEZ CRUZADELAIDA HERNANDEZ CRUZADELAIDA HERNANDEZ CRUZ

ANA ROSA MARTINEZ CABRERAANA ROSA MARTINEZ CABRERAANA ROSA MARTINEZ CABRERAANA ROSA MARTINEZ CABRERA

INSTITUTO TECNOLOGICO SUPERIOR DE INSTITUTO TECNOLOGICO SUPERIOR DE INSTITUTO TECNOLOGICO SUPERIOR DE INSTITUTO TECNOLOGICO SUPERIOR DE

CARRERA: INGENIERIA EN SISTEMAS COMPUTACIONALESCARRERA: INGENIERIA EN SISTEMAS COMPUTACIONALESCARRERA: INGENIERIA EN SISTEMAS COMPUTACIONALESCARRERA: INGENIERIA EN SISTEMAS COMPUTACIONALES

PROGRAMACION WEB

UNIDAD 1

INTRODUCCION A LAS TECNOLOGIAS WEB

1.1 Perspectiva histórica del internet

¿Qué es Internet?

Internet es un conjunto de redes y equipos de cómputo físicamente unidos

mediante cables que conectan puntos de todo el mundo. Estos cables se

presentan en muchas formas: desde cables de red local (varias máquinas

conectadas en una oficina o campus) a cables telefónicos convencionales,

digitales y canales de fibra óptica que forman las "carreteras" principales. Esta

gigantesca Red se difumina en ocasiones porque los datos pueden transmitirse

vía satélite, o a través de servicios como la telefonía celular.

No hay mucha diferencia entre Internet y la red telefónica que todos conocen,

dado que sus fundamentos son parecidos. Basta saber que cualquier cosa a la

que se pueda acceder a través de algún tipo de "conexión," como un ordenador

personal, una base de datos en una universidad, un fax o un número de teléfono,

pueden ser, y de hecho forman, parte de Internet.

En cuanto a organización, Internet no tiene en realidad una cabeza central, ni un

único organismo que la regule. Gran parte de la infraestructura es pública, de los

gobiernos mundiales, organismos y universidades. Muchos grupos de trabajo

trabajan para que funcione correctamente y continúe evolucionando. Otra gran

parte de Internet es privada, y la gestionan empresas de servicios de Internet (que

dan acceso) o simplemente publican contenidos. Como Internet está formada por

muchas redes independientes, que hablan el mismo lenguaje, ni siquiera están

claros sus límites.

PROGRAMACION WEB

¿Cómo funciona Internet?

En Internet, las comunicaciones concretas se establecen entre dos puntos: uno es

el ordenador personal desde el que usted accede y el otro es cualquiera de los

servidores que hay en la Red y facilitan información.

El fundamento de Internet es el TCP/IP, un protocolo de transmisión que asigna a

cada máquina que se conecta un número específico, llamado "número IP" (que

actúa a modo de "número teléfono único") como por ejemplo 192.555.26.11.

El protocolo TCP/IP sirve para establecer una comunicación entre dos puntos

remotos mediante el envío de información en paquetes. Al transmitir un mensaje o

una página con imágenes, por ejemplo, el bloque completo de datos se divide en

pequeños bloques que viajan de un punto a otro de la red, entre dos números IP

determinados, siguiendo cualquiera de las posibles rutas. La información viaja por

muchos ordenadores intermedios a modo de repetidores hasta alcanzar su

destino, lugar en el que todos los paquetes se reúnen, reordenan y convierten en

la información original. Millones de comunicaciones se establecen entre puntos

distintos cada día, pasando por cientos de ordenadores intermedios.

La conexión

Generalmente se accede a Internet a través de la línea telefónica, pero también

es posible hacerlo mediante un cable de fibra óptica. Si la línea telefónica dispone

de un conector en la pared para instalar el teléfono, también se puede conectar a

el un MODEM que salga de la computadora. Para seguir conectado y mientras

hablar por teléfono, la mayoría de los módems tienen dos conectores: teléfono y

línea. La conexión a Internet requiere disponer de cinco elementos: una

computadora, un MODEM, un programa que efectúe la llamada telefónica, otro

programa para navegar en la Red y una empresa proveedora de Internet que

realice la función de servidor o intermediario.

PROGRAMACION WEB

1.2 El protocolo HTTP

El Protocolo de Transferencia de HiperTexto (Hypertext Transfer Protocol) es un

sencillo protocolo cliente-servidor que articula los intercambios de información

entre los clientes Web y los servidores HTTP. La especificación completa del

protocolo HTTP 1/0 está recogida en el RFC 1945. Fue propuesto por Tim

Berners-Lee, atendiendo a las necesidades de un sistema global de distribución

de información como el World Wide Web.

Desde el punto de vista de las comunicaciones, está soportado sobre los servicios

de conexión TCP/IP, y funciona de la misma forma que el resto de los servicios

comunes de los entornos UNIX: un proceso servidor escucha en un puerto de

comunicaciones TCP (por defecto, el 80), y espera las solicitudes de conexión de

los clientes Web. Una vez que se establece la conexión, el protocolo TCP se

encarga de mantener la comunicación y garantizar un intercambio de datos libre

de errores.

HTTP se basa en sencillas operaciones de solicitud/respuesta. Un cliente

establece una conexión con un servidor y envía un mensaje con los datos de la

solicitud. El servidor responde con un mensaje similar, que contiene el estado de

la operación y su posible resultado. Todas las operaciones pueden adjuntar un

objeto o recurso sobre el que actúan; cada objeto Web (documento HTML, fichero

multimedia o aplicación CGI) es conocido por su URL.

Etapas de una transacción HTTP:

• Un usuario accede a una URL, seleccionando un enlace de un documento

HTML o introduciéndola directamente en el campo Location del cliente

Web.

• El cliente Web descodifica la URL, separando sus diferentes partes. Así

identifica el protocolo de acceso, la dirección DNS o IP del servidor, el

posible puerto opcional (el valor por defecto es 80) y el objeto requerido del

PROGRAMACION WEB

servidor.

• Se abre una conexión TCP/IP con el servidor, llamando al puerto TCP

correspondiente.

Se realiza la petición. Para ello, se envía el comando necesario (GET,

POST, HEAD,…), la dirección del objeto requerido (el contenido de la URL

que sigue a la dirección del servidor), la versión del protocolo HTTP

empleada (casi siempre HTTP/1.0) y un conjunto variable de información,

que incluye datos sobre las capacidades del browser, datos opcionales para

el servidor,…

• El servidor devuelve la respuesta al cliente. Consiste en un código de

estado y el tipo de dato MIME de la información de retorno, seguido de la

propia información.

• Se cierra la conexión TCP.

El estándar HTTP/1.0 recoge únicamente tres comandos, que representan las

operaciones de recepción y envío de información y chequeo de estado:

GET Se utiliza para recoger cualquier tipo de información del servidor. Se utiliza

siempre que se pulsa sobre un enlace o se teclea directamente a una URL. Como

resultado, el servidor HTTP envía el documento correspondiente a la URL

seleccionada, o bien activa un módulo CGI, que generará a su vez la información

de retorno.

HEAD Solicita información sobre un objeto (fichero): tamaño, tipo, fecha de

modificación… Es utilizado por los gestores de cachés de páginas o los servidores

proxy, para conocer cuándo es necesario actualizar la copia que se mantiene de

un fichero.

POST Sirve para enviar información al servidor, por ejemplo los datos contenidos

en un formulario. El servidor pasará esta información a un proceso encargado de

su tratamiento (generalmente una aplicación CGI). La operación que se realiza

con la información proporcionada depende de la URL utilizada. Se utiliza, sobre

PROGRAMACION WEB

todo, en los formularios.

Un cliente Web selecciona automáticamente los comandos HTTP necesarios para

recoger la información requerida por el usuario. Así, ante la activación de un

enlace, siempre se ejecuta una operación GET para recoger el documento

correspondiente. El envío del contenido de un formulario utiliza GET o POST, en

función del atributo de <FORM METHOD="...">. Además, si el cliente Web tiene

un caché de páginas recientemente visitadas, puede utilizar HEAD para

comprobar la última fecha de modificación de un fichero, antes de traer una nueva

copia del mismo.

Posteriormente se han definido algunos comandos adicionales, que sólo están

disponibles en determinadas versiones de servidores HTTP, con motivos

eminentemente experimentales. La última versión de HTTP, denominada 1.1,

recoge estas y otras novedades, que se pueden utilizar, por ejemplo, para editar

las páginas de un servidor Web trabajando en remoto.

PROGRAMACION WEB

1.2.1 Arquitectura del WWW

El diseño del Word Wide Web sigue el modelo cliente-servidor: un paradigma de

división del trabajo informático en el que las tareas se reparten entre un número de

clientes que efectúan peticiones de servicios de acuerdo con un protocolo, y un

número de servidores que las atienden” (Malkin, 1993). En el Web, nuestras

estaciones de trabajo son clientes que demandan “hipertextos” a los servidores.

Para poner en marcha un sistema como éste ha sido necesario:

• Diseñar e implementar un nuevo protocolo que permitiera realizar saltos

hipertextuales, esto es, de un nodo o lexia de origen a uno de destino, que

podría ser un texto o parte de un texto, una imagen, un sonido, una

animación, fragmento de vídeo, etc. Es decir, cualquier tipo de información

en formato electrónico. Este protocolo se denomina HTTP y es el

"lenguaje" que "hablan" los servidores del WWW.

� Inventar un lenguaje para representar hipertextos que incluyera información

sobre la estructura y el formato de representación y, especialmente, indicar

origen y destino de saltos hipertextuales. Este lenguaje es el HTML

(HyperText Markup Language).

• Idear una forma de codificar las instrucciones para los saltos hipertextuales

de un objeto a otro de la Internet. Dada la variedad de protocolos, y por

tanto, formas de almacenamiento y recuperación de la información, en uso

en la Internet, esta información es vital para que los clientes puedan

acceder a dicha información.

• Desarrollar aplicaciones cliente para todo tipo de plataforma y resolver el

problema de cómo acceder a información que está almacenada y es

accesible a través de protocolos diversos (FTP, NNTP, Gopher, HTTP,

X.500, WAIS, etc.) y representar información multiformato (texto, gráficos,

sonidos, fragmentos de vídeo, etc.). A este fin se han desarrollado diversos

PROGRAMACION WEB

clientes, entre los que destaca la familia Mosaic, del NCSA (National Center

for Supercomputer Applications) de la Universidad de Chicago, y su sucesor

Netscape Navigator, de Netscape Communications Corporation.

Comunicación entre el navegador y el servidor

La comunicación entre el navegador y el servidor se lleva a cabo en dos etapas:

Figura 1.1 Etapas de la comunicación entre el navegador y el servidor

Etapa1: ElMnavegadorMrealizaMunaMsolicitudLHTTP.

Etapa 2: El servidor procesa la solicitud y después envía una respuesta HTTP

Solicitud HTTP

Una solicitud HTTP es un conjunto de líneas que el navegador envía al servidor. Incluye:

• Línea de solicitud: es una línea que especifica el tipo de documento

solicitado, el método que se aplicará y la versión del protocolo utilizada.

Ésta línea está formada por tres elementos que deben estar separados por

un espacio:

o El método.

o La dirección URL.

o La versión del protocolo utilizada por el cliente (por lo general,

PROGRAMACION WEB

HTTP/1.0).

• Campos del encabezado de solicitud: es un conjunto de líneas

opcionales que permiten aportar información adicional sobre la solicitud y/o

el cliente (navegador, sistema operativo, etc.). Cada una de estas líneas

está formada por un nombre que describe el tipo de encabezado, seguido

de dos puntos (:) y el valor del encabezado.

• Cuerpo de la solicitud: es un conjunto de líneas opcionales que deben

estar separadas de las líneas precedentes por una línea en blanco y, por

ejemplo, permiten que se envíen datos por un comando POST durante la

transmisión de datos al servidor utilizando un formulario.

Respuesta HTTP

Es un conjunto de líneas que el servidor envía al navegador, incluye:

• Línea de estado: es una línea que especifica la versión del protocolo utilizada y el

estado de la solicitud en proceso mediante un texto explicativo y un código. La

línea está compuesta por tres elementos que deben estar separados por un

espacio: La línea está formada por tres elementos que deben estar separados por

un espacio:

o la versión del protocolo utilizada.

o el código de estado.

o el significado del código.

Campos del encabezado de respuesta: es un conjunto de líneas opcionales que

permiten aportar información adicional sobre la respuesta y/o el servidor. Cada una está

compuesta por un nombre que califica el tipo de encabezado, seguido por dos puntos (:) y

por el valor del encabezado. Cuerpo de la respuesta: contiene el documento solicitado.

PROGRAMACION WEB

1.2.2 URL

URL es el acrónimo de (Uniform Resource Locator), localizador uniforme de

recursos y permite localizar o acceder de forma sencilla cualquier recurso de la red

desde el navegador de la WWW.

Con la WWW se pretende unificar el acceso a información de servicios que antes

eran incompatibles entre sí, tratando de conseguir que todos los servicios de

internet sean accesibles a través de la WWW, de esta forma desde un mismo

programa se puede tener acceso a todos los recursos de una forma uniforme y

permite que los documentos HTML incluyan enlaces a otras fuentes de

información en servicios como FTP, gopher, WAIS, etc.

Las URL se utilizarán para definir el documento de destino de los hiperenlaces,

para referenciar los gráficos y cualquier otro fichero que se desee incluir dentro de

un documento HTML. Cada elemento de internet tendrá una URL que lo defina, ya

se encuentre en un servidor de la WWW, FTP, gopher o las News.

El formato de una URL será:

servicio://maquina.dominio:puerto/camino/fichero

El servicio será alguno de los de internet, estos pueden ser:

Http: (HyperText Transport Protocol), es el protocolo utilizado para transmitir

hipertexto. Todas las páginas HTML en servidores WWW deberán ser

referenciadas mediante este servicio. Indicará conexión a un servidor de la WWW.

Https: (HyperText Transport Protocol Secure), es el protocolo para la conexión a

servidores de la WWW seguros. Estos servidores son normalmente de ámbito

comercial y utilizan encriptación para evitar la intercepción de los datos enviados,

usualmente números de tarjeta de crédito, datos personales, etc, realizará una

PROGRAMACION WEB

conexión a un servidor de la WWW seguro.

Ftp: (File Transfer Protocol), utilizará el protocolo FTP de transferencia de

ficheros. Se utilizará cuando la información que se desee acceder se encuentre en

un servidor de ftp. Por defecto se accederá a un servidor anónimo (anonymous), si

se desea indicar el nombre de usuario se usará: ftp://maquina.dominio@usuario, y

luego le pedirá la clave de acceso.

Gopher, wais: Cualquiera de estos servicios de localización de información, se

indicará el directorio para localizar el recurso concreto.

News : Accede al servicio de news, para ello el visualizador de la WWW debe

ser capaz de presentar este servicio, todos no lo son. Se indicará el servidor de

news y como camino el grupo de noticias al que se desea acceder:

news://news.cica.es/uca.es.

Telnet: Emulación de terminal remota, para conectarse a máquina multiusuario, se

utiliza para acceder a cuentas públicas como por ejemplo la de biblioteca. Lo

normal es llamar a una aplicación externa que realice la conexión. En este caso se

indicará la maquina y el login: telnet://maquina.dominio@login.

Mailto: Se utilizará para enviar correo electrónico, todos los navegadores no son

capaces. En este caso solo se indicará la dirección de correo electrónico del

destino: mailto://alias. correo@domino.

La maquina.dominio indicará el servidor que nos proporciona el recurso, en este

caso se utilizará el esquema IP para identificar la maquina será el nombre de la

maquina y el dominio. En el caso de nuestra Universidad el dominio siempre será

uca.es . Por tanto un nombre valido de maquina será www2.uca.es .

Es muy importante indicar siempre el dominio, ya que debemos suponer que se

conectarán a nuestras páginas desde servidores externos a nuestra red local por

tanto si no indicamos el dominio las URL que especifiquemos no podrían ser

PROGRAMACION WEB

seguidas por los navegadores externos. Si en vez de www2.uca.es utilizamos

www2 será perfectamente accesible por cualquier maquina de nuestra red local

pero si se referenciara desde una red con distinto dominio la maquina www2 será

la maquina llamada así en el dominio remoto si existiera, que no es la que

deseamos referenciar.

El puerto TCP es opcional y lo normal es no ponerlo si el puerto es el mismo que

se utiliza normalmente por el servicio. Solo se utilizará cuando el servidor utilice un

puerto distinto al puerto por defecto.

El camino será la ruta de directorios que hay que seguir para encontrar el

documento que se desea referenciar. para separar los subdirectorios utilizaremos

la barra de UNIX /, se usa por convenio al ser este tipo de maquinas las más

usadas como servidores. El nombre de los subdirectorios y del fichero

referenciado puede ser de más de ocho caracteres y se tendrá en cuenta la

diferencia entre mayúsculas y minúsculas en el nombre.

PROGRAMACION WEB

1.2.3 Métodos http. Persistencia en http – Cookies

Una petición HTTP, en su formato más básico, tiene la siguiente sintaxis:

� Método URL versión

El método le indica al servidor que hacer con el URL, y por último se indica el

número de versión del protocolo que el cliente entiende. Una petición habitual

utiliza el método GET para pedirle al servidor que devuelva el URL solicitado:

Por ejemplo: GET /index.html HTTP/1.0

� Métodos HTTP

GET: Devuelve el recurso identificado en la URL pedida.

HEAD Funciona como el GET, pero sin que el servidor devuelva el cuerpo del

mensaje. Es decir, sólo se devuelve la información de cabecera.

POST Indica al servidor que se prepare para recibir información del cliente. Suele

usarse para enviar información desde formularios.

PUT Envía el recurso identificado en la URL desde el cliente hacia el servidor.

OPTIONS Pide información sobre las características de comunicación

proporcionadas por el servidor. Le permite al cliente negociar los parámetros de

comunicación.

TRACE Inicia un ciclo de mensajes de petición. Se usa para depuración y

permite al cliente ver lo que el servidor recibe en el otro lado.

DELETE Solicita al servidor que borre el recurso identificado con el URL.

PROGRAMACION WEB

CONNECT Este método se reserva para uso con proxys. Permitirá que un proxy

pueda dinámicamente convertirse en un túnel. Por ejemplo para comunicaciones

con SSL.

Cookies

Las cookies constituyen una potente herramienta empleada por los servidores

Web para almacenar y recuperar información acerca de sus visitantes. Dado que

el HTTP es un protocolo sin estados (no almacena el estado de la sesión entre

peticiones sucesivas), las cookies proporcionan una manera de conservar

información entre peticiones del cliente, extendiendo significativamente las

capacidades de las aplicaciones cliente/servidor basadas en la Web. El uso de

cookies permite al servidor Web recordar algunos datos concernientes al usuario,

como sus preferencias para la visualización de las páginas de ese servidor,

nombre y contraseña, productos que más le interesan, etc.

Una cookie no es más que un fichero de texto que algunos servidores piden a

nuestro navegador que escriba en nuestro disco duro, con información acerca de

lo que hemos estado haciendo por sus páginas.

Entre las mayores ventajas de las cookies se cuenta el hecho de ser almacenadas

en el disco duro del usuario, liberando así al servidor de una importante

sobrecarga. Es el propio cliente el que almacena la información y quien se la

devolverá posteriormente al servidor cuando éste la solicite. Además, las cookies

poseen una fecha de caducidad, que puede oscilar desde el tiempo que dure la

sesión hasta una fecha futura especificada, a partir de la cual dejan de ser

operativas.

PROGRAMACION WEB

1.3 Introducción al HTML.

HTML Acrónimo inglés de HyperText Markup Language, es un metalenguaje

heredado del SGML basado en etiquetas (tags) que posibilita la creación y edición

de documentos web, tiene como virtud entre otras, la de poder ser implementado

por código de otros lenguajes como JavaScript o Visual Basic Script que amplían y

mejoran su capacidad original. HTML utiliza el código ASCII puro que puede

teclearse en cualquier editor básico para posteriormente ser interpretado

secuencialmente por un objeto cliente denominado navegador (browser) que

visualiza el resultado en pantalla.

La sintaxis es la siguiente:

1. Una etiqueta inicial que señala el comienzo de un elemento.

2. Un número determinado de atributos (y sus valores asociados).

3. Contenido (caracteres y otros elementos).

4. Una etiqueta que marca el final.

Muchos componentes de HTML incluyen atributos específicos en las etiquetas de

comienzo, que definen el comportamiento, o indican algunas de sus propiedades

adicionales. La etiqueta que delimita el final es opcional para algunos elementos.

En muy pocos casos, un elemento vacío puede no contener o requerir la etiqueta

de final.

PROGRAMACION WEB

1.3.1 HTML como un tipo SGML

El SGML es un sistema para definir lenguajes para dar formato a documentos

(markup languages). Los autores utilizan un código de formato (en inglés markup)

en sus documentos para representar información estructural, presentacional y

semántica junto con el contenido. El HTML es un ejemplo de lenguaje de formato

de documentos. Aquí tenemos un ejemplo de un documento HTML: Un documento

HTML se divide en una sección de cabecera (aquí, entre y) y un cuerpo (aquí,

entre y). El título del documento aparece en la cabecera (junto con otras

informaciones sobre el documento), y el contenido del documento aparece en el

cuerpo. El cuerpo de este ejemplo contiene únicamente un párrafo, codificado o

marcado como cada lenguaje de formato de documentos definido con SGML se

llama aplicación SGML. Una aplicación SGML se caracteriza generalmente por:

1. Una declaración SGML. La declaración SGML especifica qué caracteres y

delimitadores pueden aparecer en la aplicación.

2. Una definición del tipo de documento (document type definition, DTD). El DTD

define la sintaxis de las estructuras de formato. El DTD puede incluir definiciones

adicionales, tales como referencias a entidades de caracteres.

3. Una especificación que describe la semántica que se debe conferir al código de

formato. Esta especificación también impone restricciones de sintaxis que no

pueden expresarse dentro del DTD.

4. Documentos que contienen datos (contenido) y código (markup). Cada

documento contiene una referencia al DTD que debe usarse para interpretarlo.

PROGRAMACION WEB

Esta especificación incluye una declaración SGML, tres definiciones del tipo de

documento (ver la sección sobre información sobre la versión de HTML para una

descripción de las tres), y una lista de referencias de caracteres

PROGRAMACION WEB

1.3.2 Elementos del lenguaje HTML

A las instrucciones que forman el lenguaje HTML se les denomina elementos, de

los cuales se distinguen dos tipos:

Elementos llenos:

Estos elementos se forman mediante una marca de inicio y una de final. En HTML

las marcas se delimitan con los signos < >. La marca de fin es idéntica a la inicial

pero con el añadido de la barra inclinada, /, justo antes del nombre de la misma.

Un texto marcado tendrá por tanto este aspecto:

...texto normal <marca> texto afectado por la marca </marca> resto del texto...

Elementos vacíos:

Estos elementos no requieren de la marca final, ya que normalmente no producen

un efecto sobre el texto en sí, sino que definen separadores.

Elementos con argumentos:

Algunos elementos tienen argumentos, los cuales son denominados atributos.

Cada uno de estos atributos podrá tener un valor el cual irá entre comillas, si es

alfanumérico:

<marca atributo1 atributo2=numérico atributo3="alfanumérico">

Ejemplo 1.3 Elementos del HTML

Elemento lleno. Para resaltar un texto en negrita, se emplea la marca <B> de la

siguiente forma:

texto normal <B> texto en negrita </B> resto del texto

PROGRAMACION WEB

Si este ejemplo no lleva la marca de final, el resto de la página estaría también en

negrita.

Elemento vacío. Para mostrar una línea horizontal en la pantalla: <HR>

Para bajar un renglón: <BR>

Elemento con argumentos. Para agregar un hipervínculo hacia la ruta

home/default.html a una frase.

<A HREF="/home/default.html"> texto que se va a mostrar </A>

Si se quieren utilizar caracteres como < > en el texto normal, habrá que acudir a

un artificio para que el browser no intente interpretarlos como marca. Estos

caracteres así como otros símbolos utilizados en el código HTML se reemplazarán

por los siguientes grupos de caracteres:

• el carácter < será reemplazado por &lt;

• el carácter > será reemplazado por &gt;

PROGRAMACION WEB

1.3.2 Tablas en HTML

Las tablas se usan cuando necesitamos mostrar información que se presenta de forma lógica en filas y columnas.

Elementos de una tabla

• La etiqueta de inicio <table> y la etiqueta de cierre </table> inician y finalizan la tabla.

• <tr> es la abreviatura de "table row" (fila de la tabla) e inicia y finaliza las filas horizontales.

• <td> es la abreviatura de "table data" (datos de la tabla). Inicia y finaliza cada una de las celdas que componen las filas de la tabla.

Atributos para filas

Align.- Justifica el texto de la celda del mismo modo que si fuese el de un párrafo.

Valign.-Alinea el texto arriba (top), en el centro (middle) o abajo (bottom) de la celda.

Bgcolor.-Da color a la celda o fila elegida.

Bordercolor.-Define el color del borde.

Atributos para celdas

Background .-Permite colocar un fondo para la celda a partir de un enlace a una imagen.

Height.-Define la altura de la celda en pixeles o porcentaje.

Width.-Define la anchura de la celda en pixeles o porcentaje.

Colspan.-Expande una celda horizontalmente.

Rowspan.-Expande una celda verticalmente.

PROGRAMACION WEB

Atributos para tablas

Align: Alinea horizontalmente la tabla con respecto a su entorno.

Background: Nos permite colocar un fondo para la tabla a partir de un enlace a

una imagen.

Bgcolor: Da color de fondo a la tabla.

Border: Define el número de pixeles del borde principal.

Bordercolor: Define el color del borde.

Cellpadding: Define, en pixeles, el espacio entre los bordes de la celda y el

contenido de la misma.

Cellspacing: Define el espacio entre los bordes (en pixeles).

Height : Define la altura de la tabla en pixeles o porcentaje.

Width: Define la anchura de la tabla en pixeles o porcentaje.

PROGRAMACION WEB

1.3.4 Formularios

Un formulario es una herramienta para recolectar datos e información acerca de la

gente que navega en el sitio, para luego ejecutar una determinada acción con la

misma.

Los elementos de un formulario son cinco: <FORM>, <INPUT>, <SELECT>,

<OPTION> y <TEXTAREA>. Estas etiquetas, junto a un número de modificadores

o atributos, indican al navegador cliente cómo recolectar la información, cómo

manejarla y cómo interactuar con el servidor.

<FORM> Todo formulario debe estar encerrado entre el par de etiquetas

<FORM> y </FORM>, y debe ser ubicado dentro del cuerpo del documento

HTML, Esta etiqueta presenta tres atributos posibles:

ACTION.- El valor de este parámetro es la URL del programa o guión en el

Servidor Web utilizado para procesar la información recolectada.

METHOD.- Puede asumir el valor GET o POST, y definen la manera en la cual

los datos son transferidos al servidor.

ENCTYPE.- Este atributo está reservado para que la información viaje en forma

encriptada a través de Internet.

Los dos primeros atributos de la tabla son de uso obligatorios para cualquier

formulario, ya que establecen dónde enviar la información y cómo enviarla. El

atributo o parámetro ENCTYPE es optativo y no es realmente importante.

<INPUT> Se puede definir como una etiqueta multifunción, ya que con la misma

<SELECT> Define una lista de elementos de los cuales el usuario debe seleccionar uno o varios, de acuerdo a los atributos que se especifiquen.

PROGRAMACION WEB

<OPTION> Describe cada elemento de las listas designadas con las etiquetas <SELECT> y </SELECT>.

<TEXTAREA> Delimita un área de dimensiones arbitrarias donde el usuario puede ingresar texto.

El formulario empieza con esta línea

<FORM ACTION="mailto:micorreo@ejemplo.com" METHOD=POST>

El parámetro ACTION define qué es lo que se debe hacer con la información

obtenida, en este caso le indica al navegador que envíe los datos a una dirección

de correo electrónico. Para realizar esta tarea existen dos formas de hacerlo, una

es la utilizada anteriormente, y la otra es hacer uso de algún script o guión CGI

(Como Gateway Interface) que procesa los datos y los reenvía hacia donde le

indicamos. Un script CGI es un pequeño programa escrito en general en lenguaje

PERL o C (muy populares en ambientes Unix) alojado en los servidores web que

facilitan el intercambio y la transferencia de información.

<FORM ACTION="/cgi-bin/mailto.pl" METHOD=POST>

Se utiliza el script mailto.pl con extensión .pl porque esta escrito en lenguaje

PERL, alojado en el directorio /cgi-bin de nuestro servidor.

Los campos a utilizar deben ser aceptados por el script, es decir el script esta

diseñado para manejar cierto número y tipo de variables, es por eso que se debe

configurar el formulario acorde al script o guión.

<INPUT TYPE=hidden name="to" VALUE="micorreo@ejemplo.com">

<INPUTkTYPE=hiddenkname="return-url"

VALUE="http://ejemplo.com/pagina.html">

Los hidden fields o campos escondidos pueden ser necesarios para algunos

scripts; comunican cierta información al servidor acerca de cómo manipular los

PROGRAMACION WEB

datos manteniéndose ocultos a la vista de los usuarios. En este caso se indica a

que dirección de email debe enviar los datos y hacia qué página ir después.

Construyendo un formulario

<FORM> <INPUT TYPE="TEXT" NAME="nombre"> </FORM>

Cuando el usuario ingresa su nombre en la casilla de texto (por ejemplo Morgan Clay),

éste se convertirá en el valor de entrada de la etiqueta INPUT y será relacionado con

"nombre" (NAME="nombre"), de forma que el resultado que será procesado será el par

nombre=Morgan Clay. Es posible establecer un valor predeterminado de la siguiente

manera:

<FORM> <INPUT TYPE="TEXT" NAME="nombre" VALUE="J. J. Lopez"> </FORM>

J.J. Lopez

Esto automáticamente generará el par nombre=J.J. López, que sólo será modificado si el usuario lo cambia. El tamaño de las casillas puede ser especificado también de la siguiente manera:

<FORM> <INPUT TYPE="TEXT" NAME="nombre" VALUE="Morgan Clay" SIZE=15> </FORM>

Morgan Clay

El valor predeterminado para el tamaño de un INPUT es SIZE=20, es decir, que

sino le explicitamos otro tamaño, el navegador asumirá el valor 20 para el

parámetro SIZE. También podemos indicar la cantidad de caracteres a ingresar

por el usuario, aunque no es muy utilizado este parámetro, puede resultar útil en

algunas ocasiones. Por ejemplo, un límite de 15 caracteres lo indicamos de la

siguiente manera:

PROGRAMACION WEB

<FORM>

<INPUT TYPE="TEXT" NAME="nombre" SIZE=15 MAXLENGTH="10" >

</FORM>

Muy similar al TYPE=TEXT es el TYPE=PASSWORD. Es exactamente igual al

tipo texto, con la diferencia que despliega en pantalla asteriscos (****) en lugar de

letras a medida que escribe el usuario.

<FORM>

<INPUT TYPE="PASSWORD" NAME="clave" SIZE=15 MAXLENGTH="10" >

</FORM>

Botones de Radio y caja de chequeo

Los Radio Buttons (botón de radio) le permiten al usuario seleccionar una entre

varias opciones. En cambio las Check Boxes (caja de chequeo) le dan la

posibilidad de elegir una o más opciones.

<FORM>

¿Que elemento es el más fuerte?

<INPUT TYPE="RADIO" NAME="elementos" VALUE="azul" CHECKED>Agua

<BR><INPUT TYPE="RADIO" NAME="elementos" VALUE="cafe">Tierra

<BR><INPUT TYPE="RADIO" NAME="elementos" VALUE="Verde">Viento

<BR><INPUT TYPE="RADIO" NAME="elementos" VALUE="rojo">Fuego

</FORM>

¿Qué elemento es el más fuerte?

PROGRAMACION WEB

Agua

Tierra

Viento

Fuego

Para construir Check Boxes es bastante similar:

A diferencia de los Radio Buttons, los Check Boxes (cajas de chequeo) mantienen

el mismo valor para el parámetro VALUE, y cambian el valor de NAME:

<FORM>

¿Quekelementoslsonldektufagrado?

<INPUT TYPE="CHECKBOX" NAME="azul" VALUE="YES" CHECKED>Agua

<BR><INPUT TYPE="RADIO" NAME="cafe" VALUE="YES">Tierra

<BR><INPUT TYPE="RADIO" NAME="verde" VALUE="YES" CHECKED>Viento

<BR><INPUT TYPE="RADIO" NAME="rojo" VALUE="YES">Fuego

</FORM>

¿Qué elementos son de tu agrado?

Agua

Tierra

Viento

Fuego

PROGRAMACION WEB

Listas

Para la creación de listas de elementos utilizamos la etiqueta <SELECT> en lugar

de la utilizada anteriormente <INPUT>, y a diferencia de esta última debe ser

cerrada con </SELECT.

Listas Desplegables

<FORM>

<SELECT NAME="equipos">

<OPTION

VALUE="azul">San Lorenzo

<OPTION VALUE="cafe"

SELECTED>River

<OPTION

VALUE="verde">Boca

Juniors

<OPTION

VALUE="rojo">Independiente

</SELECT>

</FORM>

San Lorenzo

Listas Desplegadas

La construcción de una lista desplegada es bastante similar a la de una lista

desplegable, solo difieren en algunos parámetros. Para convertir la lista

desplegable de equipos en una lista desplegada se utiliza el parámetro SIZE.

PROGRAMACION WEB

<FORM>

<SELECT NAME="equipos"

SIZE=5>

<OPTION VALUE="azul">San

Lorenzo

<OPTION VALUE="cafe"

SELECTED>River Plate

<OPTION VALUE="verde">Boca

Juniors

<OPTION

VALUE="rojo">Independiente

<OPTION

VALUE="Amarillo">Racing Club

</SELECT>

</FORM>

San LorenzoRiver PlateBoca JuniorsIndependienteRacing Club

<SELECT NAME="equipos" SIZE=3>

San LorenzoRiver PlateBoca Juniors

Área de texto

Se utiliza para generar un área de texto donde el usuario pueda escribir

libremente un mensaje, un comentario o sugerencia. Está delimitada con las

etiquetas <TEXTAREA> </TEXTAREA>y puede contener otros parámetros.

PROGRAMACION WEB

<FORM>

<TEXTAREAKNAME="SUGERENCIAS">

</TEXTAREA>

</FORM>

<FORM>

<TEXTAREA NAME="SUGERENCIAS" ROWS=6 COLS=50 WRAP="soft">

</TEXTAREA>

</FORM>

Un atributo interesante de la etiqueta <TEXTAREA> es WRAP, significa que el

texto ingresado no puede superar los márgenes laterales, es decir, cuando el

usuario llegue al final del margen derecho automáticamente desplazará el cursor

hacia abajo sin esperar que el usuario presione la tecla ENTER. Algunos

navegadores no lo interpretan correctamente, por lo tanto, ignorarán este

parámetro.

<TEXTAREA NAME="SUGERENCIAS" ROWS=6 COLS=50

WRAP="soft"></TEXTAREA>

WRAP="soft" significa que el texto ingresado en la caja de texto no superará los

márgenes laterales, pero será procesado como una línea larga de caracteres, es

decir, viajará a su destino como una larga cadena de caracteres.

PROGRAMACION WEB

<TEXTAREA NAME="SUGERENCIAS" ROWS=6 COLS=50

WRAP="hard"></TEXTAREA>

WRAP="hard" significa que el texto es enviado tal cual fue ingresado.

Botones SUBMIT y RESET

Para enviar la información, el formulario necesita de un botón que le indique que el

formulario ha concluido y que pueden enviar la información.

Los botones Submit (enviar) se crean con la etiqueta <INPUT> de tipo “submit”. Y

para definir el texto que aparecerá escrito en el, se utiliza el atributo VALUE.

<FORM>

<INPUThTYPE="submit"kVALUE="EnviartDatos">

<INPUTgTYPE="reset"tVALUE="BorrarrDatos">

</FORM>

Enviar Datos Borrar Datos

Se puede utilizar una imagen como botón SUBMIT:

FORM> <INPUT TYPE="image" SRC="enviar.jpg" WIDTH=70 HEIGTH=35>

</FORM>

PROGRAMACION WEB

1.4 Evolución del desarrollo de aplicaciones web

Cuando Tim Berners-Lee inventó la Web moderna en CERN, se pretendía que

ésta sirviera como un sistema que hiciera posible que los documentos estáticos se

almacenaran en un sistema basado en la red con vínculos al mismo. Con el paso

de los años, se fueron incorporando innovaciones y el siguiente paso lógico fueron

los documentos “activos” que se generan en el momento en que se solicitan, con

información específica del momento o del usuario. Tecnologías como CGI

activaron este aspecto. Más adelante, la capacidad para generar documentos en

la Web se convirtió en algo primordial y la tecnología evolucionó de CGI, a Java,

ASP y, posteriormente, a ASP.NET. ASP.NET supuso un hito en la capacidad de

los desarrolladores para desarrollar aplicaciones web de calidad con un paradigma

de desarrollo de servidores y con las mejores herramientas de la línea de

productos Visual Studio.

La experiencia del usuario resultó ser una gran barrera en las aplicaciones web,

donde las restricciones técnicas evitaban que éstas pudieran ofrecer la misma

variedad de uso que una aplicación cliente con datos locales.

El objeto XMLHttp Request, que Microsoft lanzó como parte de Internet Explorer

en 2000, se convirtió en la base de la tecnología asíncrona de JavaScript y XML

(AJAX) que hizo posible que las aplicaciones web pudieran proporcionar una

respuesta más dinámica a las entradas de los usuarios, mediante la actualización

de pequeñas porciones de una página web sin necesidad de volver a cargar

totalmente los contenidos. Las soluciones innovadores que se generaron con

AJAX, como los mapas regionales de Windows Live, llevaron a las aplicaciones

web a dar un paso adelante en su capacidad para lograr un uso similar a las

aplicaciones cliente.

Silver light representa el paso siguiente en el desarrollo del potencial de riqueza

en utilización que los desarrolladores y diseñadores de aplicaciones pueden

presentar a sus clientes. Esto se consigue permitiendo a los diseñadores expresar

su creatividad y guardar su trabajo en un formato que funcione directamente en la

PROGRAMACION WEB

Web. En el pasado, los diseñadores creaban un sitio web y ofrecían una utilización

a los usuarios a través de herramientas que proporcionaban resultados variados,

pero el desarrollador tenía que solventar las restricciones de la plataforma web

siendo capaz de ofrecer tales resultados. En el modelo de Silver light, los

diseñadores pueden generar el tipo de utilización para el usuario que desean y

expresarlo como XAML. Un desarrollador puede incorporar este XAML

directamente en una página web mediante el tiempo de ejecución de Silver light.

De esta forma, ambos pueden trabajar más estrechamente que antes con el fin de

proporcionar una utilización completa y variada al usuario.

PROGRAMACION WEB

1.5 Hojas de estilo en cascada e introducción al XM L

El lenguaje HTML está limitado a la hora de aplicarle forma a un documento. Esto

es así porque fue hecho para otros usos (científicos sobre todo), distintos a los

actuales.

Para solucionar estos problemas los diseñadores utilizan técnicas tales como la

implementación de tablas, imágenes transparentes para ajustarlas, utilización de

etiquetas que no son estándares del HTML y otras. Estas "trampas" causan a

menudo problemas en las páginas a la hora de su visualización en distintas

plataformas.

Otro antecedente que ha hecho necesario el desarrollo de esta tecnología

consiste en que las páginas Web tienen mezclado en su código HTML el

contenido del documento con las etiquetas necesarias para darle forma. Esto tiene

sus inconvenientes ya que la lectura del código HTML se hace pesada y difícil a la

hora de buscar errores o depurar las páginas.

Pequeñas partes de la página.- Para definir estilos en secciones reducidas de

una página se utiliza la etiqueta <SPAN>. Con el atributo STYLE indicamos en

sintaxis CSS sus características.

<p>

P&aacute; párrafo con palabras <SPAN STYLE="color: green">en color

verde</SPAN>.

Estilo definido para una etiqueta.- Con esto, toda una etiqueta muestra un estilo

determinado. Por ejemplo, al definir un párrafo entero en color rojo y otro en color

azul, se utiliza el atributo STYLE, que se permite en todas las etiquetas del HTML

(siempre y cuando se disponga de un browser compatible con CSS).

PROGRAMACION WEB

<pHSTYLE="color:#990000"> </p> <pFSTYLE="color:#0000FF"> </p>

Esto es un Párrafo de color rojo.

Esto es un Párrafo de color azul.

Estilo definido en una parte de la página.- Con la etiqueta <DIV> se definen

estilos a todo un bloque de la página.

<divDSTYLE="color:F#0000FF;Ffont-weight:bold"> <h4>Estas etiquetas van en <i>azul y negrita</i></h4> <p> Seguimos dentro del DIV, luego permanecen los etilos </p> </div>

Estas etiquetas van en azul y negrita

Seguimos dentro del DIV, luego permanecen los etilo s

También, se definen estilos en la cabecera del documento, para que se apliquen a

toda la página. Es una manera de darle forma al documento, ya que estos estilos

serán seguidos en toda la página.

A grandes rasgos, entre <STYLE> y </STYLE>, se coloca el nombre de la etiqueta

o etiquetas para definir los estilos y entre llaves { } las características de estilos en

sintaxis CSS.

Si se aplican estilos a la etiqueta <BODY>, estos se heredan al resto de las

etiquetas del documento, siempre y cuando no se vuelvan a definir en las

siguientes etiquetas, en cuyo caso el estilo de la etiqueta más concreta es el que

se implementa. Este detalle se aprecia en la etiqueta <P>, que tiene estilos ya

PROGRAMACION WEB

definidos para <BODY>. Los estilos que se tienen en cuenta son los de la etiqueta

<P>, que es más concreta.

Por último, ha de apreciarse los comentarios HTML que engloban toda la

declaración de estilos: <!--Declaración de estilos-->. Éstos se utilizan para que los

browsers antiguos (por ejemplo Netscape 3), que no comprenden la sintaxis CSS,

no incluyan ese texto en el cuerpo de la página. Si no se define, publican ese

código en la página de manera íntegra.

Estilo definido para todo un sitio Web.- Una de las características de la

programación con hojas de estilos consiste en que, se definen también los estilos

de todo un sitio Web. Esto consigue creando un archivo donde se colocan las

declaraciones de estilos de la página y enlazando todas las páginas del sitio con

ese archivo. De este modo, todas comparten una misma declaración de estilos y,

por tanto, si se cambian, cambiarán todas. Esto ahorra líneas de código HTML (lo

que reduce el tamaño del documento) y evita definir una y otra vez los estilos con

el HTML.

Sintaxis y unidades CSS

Básicamente se trata de colocar selectores de elementos seguidos de los valores

o atributos de estilo que se aplicarán a ellos, las reglas de sintaxis son las

siguientes:

• Para definir un estilo se utilizan atributos como font-size, color, text-

decoration, entre otros, Seguidos de dos puntos y el valor asignado. Se

logra definir un estilo a base de definir muchos atributos separados por

punto y coma, y encerrados entre llaves { }.

PROGRAMACION WEB

H1 {font-size: 14pt; text-align: center; color: black ;}

• Muchos de los valores que se asignan a los atributos, son unidades de

medida CSS, por ejemplo, el valor del tamaño de un margen o el tamaño de

la fuente, se clasifican en dos grupos, las relativas y las absolutas. Más la

posibilidad de expresar valores en porcentaje.

Relativas : Se llaman así porque son unidades relativas al medio o soporte sobre

el que se está viendo la página Web, que dependiendo de cada usuario es

distinto, puesto que existen muchos dispositivos que acceden a la Web, como

computadoras o teléfonos móviles. Las unidades relativas son más aconsejables,

porque se ajustan mejor al medio con el que el usuario está accediendo a la Web.

Son las siguientes:

Fuente actual: em

La unidad em es relativa a la fuente actual con la que se está trabajando por

defecto en el sistema del usuario. Por ejemplo si un visitante tiene configurada la

fuente por defecto en 12 puntos, 1em será igual a 12 puntos y 2em será igual a 24

puntos.

Altura de la letra "x": ex

1ex será igual a la altura de la letra x, según la fuente actual del usuario. La altura

de la letra x generalmente es la mitad de la de la fuente normal.

Píxeles: px

Un pixel es un punto en la pantalla del dispositivo. Dependiendo de la resolución

de la pantalla, un píxel es mayor o menor.

PROGRAMACION WEB

Absolutas : Son medidas fijas, que en teoría se ven igual en todos los dispositivos.

Como los centímetros, que son una convención de medida internacional. Pese a

que en principio parecen más útiles, puesto que se verían en todos los sistemas

igual, tienen el problema de adaptarse menos a las distintas particularidades de

los dispositivos que acceden a una Web y restan accesibilidad a la Web diseñada,

ya que en una computadora, un centímetro es una medida razonable, pero en un

teléfono móvil es un espacio exageradamente grande, puesto que la pantalla es

mucho menor. Se aconseja utilizar, por tanto, medidas relativas.

Puntos pt (Un punto es 1/72 pulgadas), Pulgadas in, Centímetros cm,

Milímetros mm, Picas pc (Una pica son 12 puntos).

Porcentaje : el porcentaje es utilizado para definir una unidad en función de la que

esté definida en un momento dado. Si se trabaja en 12 puntos y posteriormente

se define una unidad como 150%. Esto sería igual al 150% de los 12 puntos

actuales, que equivale a 18 puntos.

*Los colores se expresan con valores RGB, igual que en HTML. Con la salvedad

que un color se especifica con tres números hexadecimales, en lugar de 6, como

es obligatorio en HTML. Por ejemplo #fff equivale a #ffffff, o #123 es #112233.

Además, los colores se especifican también en valores RGB decimales, con la

notación rgb(r, g, b), siendo los valores de r, g, b números entre 0 y 255, por

ejemplo rgb(100,0,255). Otra notación posible es rgb(r%,g%,b%), siendo cada uno

de los r%,g%, b% un valor entre 0 y 100, por ejemplo rgb(100%,50%,0%), que

sería todo de rojo, la mitad de verde y cero de azul.

*Otro tipo de valores utilizados en las hojas de estilo en cascada son las URL, que

sirven para especificar rutas hacia elementos como imágenes a colocar en fondos

de elementos. Se especifican con la notación URL (valor), siendo valor la URL a la

que se desea dirigir, la cual es absoluta o relativa.

PROGRAMACION WEB

UNIDAD 2

DESARROLLO DE APLICACIONES WEB

El diseño y desarrollo de aplicaciones web consiste en implementar sus necesidades,

objetivos o ideas en Internet utilizando las tecnologías más idóneas según su proyecto.

Las aplicaciones web ofrecen servicios a los usuarios de Internet que acceden

utilizando un navegador web como I. Explorer, Firefox entre otros, dirigiéndose a una

dirección de Internet donde obtendrán los servicios que buscan.

Las aplicaciones web pueden ser de acceso público como tiendas virtuales, diarios

digitales, portales de Internet,... o de acceso restringido como son las intranets para

mejorar las gestiones internas de su empresa como el reporte de horas de su personal,

gestión de proyectos y tareas, control de presencia, gestores documentales,… o el uso

de extranets para aumentar y mejorar el servicio con sus distribuidores, clientes,

proveedores, comerciales y colaboradores externos.

PROGRAMACION WEB

2.1 Arquitectura de las aplicaciones web

Arquitectura de dos capas : es conocida también como la arquitectura tradicional de

cliente/servidor. Requiere una interfaz de usuario que se instala y corre en una PC o

estación de trabajo y envía solicitudes a un servidor para ejecutar operaciones

complejas. Por ejemplo, una estación de trabajo utilizada como cliente puede correr una

aplicación de interfaz de usuario que interroga a un servidor central de bases de datos.

Ventajas:

� El desarrollo de aplicaciones en un ambiente de dos capas es mucho más rápido que en

ambientes anteriores, pero no es necesariamente más rápido que con el nuevo

ambienteNdetresGcapas.

� Las herramientas para el desarrollo con dos capas son robustas y evaluadas. Las

técnicasVdeVprototipoVseMempleanVfácilmente.

� Las soluciones de dos capas trabajan bien en ambientes no dinámicos estables, pero no

se ejecutan bien en organizaciones rápidamente cambiantes.

Desventajas:

� Los ambientes de dos capas requieren control excesivo de las versiones y

demandan esfuerzo de distribución de la aplicación cuando se les hacen

cambios. Esto se debe al hecho de que la mayoría de la aplicación lógica existe

en la estación de trabajo del cliente.

PROGRAMACION WEB

� La seguridad del sistema en un diseño de dos capas es compleja y a menudo

requiere administración de las bases de datos; esto es debido al número de

dispositivos con acceso directo al ambiente de esas bases de datos.

� Las herramientas del cliente y de la base de datos, utilizadas en diseños de dos

capas, constantemente están cambiando. La dependencia a largo plazo de

cualquier herramienta, puede complicar el escalamiento futuro o las

implementaciones.

• Arquitectura de tres capas: es un diseño reciente que introduce una capa

intermedia en el proceso. Cada capa es un proceso separado y bien definido

corriendo en plataformas separadas. Se instala una interfaz de usuario en la

computadora del usuario final (el cliente). Ésta arquitectura transforma la interfaz

de búsqueda existente (el explorador de Web), en la interfaz del usuario final.

Ventajas:

� Las llamadas de la interfaz del usuario en la estación de trabajo, al servidor de

capa intermedia, son más flexibles que en el diseño de dos capas, ya que la

estación solo necesita transferir parámetros a la capa intermedia.

� La interfaz del cliente no es requerida para comunicarse con el receptor de los

datos. Por lo tanto, esa estructura de datos puede ser modificada sin cambiar la

interfazCdelCusuarioDenDlaFPC.

� El código de la capa intermedia puede ser reutilizado por múltiples aplicaciones

siDestaFdiseñadoRenRformatoTmodular.

PROGRAMACION WEB

� La separación de roles en tres capas, hace mas fácil reemplazar o modificar a

una, sin afectar a los módulos restantes.

Desventajas:

� Los ambientes pueden incrementar el tráfico en la red y requiere más balance de carga u tolerancia a las fallas.

� Los exploradores actuales no son iguales. La estandarización entre diferentes proveedores ha sido lenta en desarrollarse. Muchas organizaciones son forzadas a escoger uno en lugar de otro, mientras que cada uno ofrece sus propias ventajas.

Figura 2.1 Arquitectura de

dos capas o arquitectura

tradicional de

cliente/servidor.

Figura 2.2 Arquitectura de

tres

capas o arquitectura

basada en web.

PROGRAMACION WEB

Arquitectura MVC: La arquitectura Model-View-Controller surgió como patrón

arquitectónico para el desarrollo de interfaces gráficos de usuario en entornos

Smalltalk. Su concepto se basaba en separar el modelo de datos de la aplicación de su

representación de cara al usuario y de la interacción de éste con la aplicación, mediante

la división de la aplicación en tres partes fundamentales:

• El modelo, que contiene la lógica de negocio de la aplicación.

• La vista, que muestra al usuario la información que éste necesita.

• El controlador, que recibe e interpreta la interacción del usuario, actuando sobre

modelo y vista de manera adecuada para provocar cambios de estado en la

representación interna de los datos, así como en su visualización.

Esta arquitectura ha demostrado ser muy apropiada para las aplicaciones web y

especialmente adaptarse bien a las tecnologías proporcionadas por la plataforma J2EE,

de manera que:

• El modelo, conteniendo lógica de negocio, sería modelado por un conjunto de

clases Java, existiendo dos claras alternativas de implementación, utilizando

objetos java tradicionales llamados POJOs (Plain Old Java Objects) o bien

utilizando EJB (Enterprise JavaBeans) en sistemas con mayores necesidades de

concurrencia o distribución.

• La vista proporcionará una serie de páginas web dinámicamente al cliente,

siendo para él simples páginas HTML. Existen múltiples frameworks que

PROGRAMACION WEB

generan estas páginas web a partir de distintos formatos, siendo el más

extendido el de páginas JSP (JavaServer Pages), que mediante un conjunto de

etiquetas o tags XML proporcionan un interfaz sencillo y adecuado a clases Java

y objetos proporcionados por el servidor de aplicaciones. Esto permite que sean

sencillas de desarrollar por personas con conocimientos de HTML. Entre estos

tags tiene mención la librería estándar JSTL (JavaServer Pages Standard Tag

Library) que proporciona una gran funcionalidad y versatilidad.

• El controlador en la plataforma J2EE se desarrolla mediante servlets, que hacen

de intermediarios entre la vista y el modelo, más versátiles que los JSP para esta

función al estar escritos como clases Java normales, evitando mezclar código

visual (HTML, XML) con código Java. Para facilitar la implementación de estos

servlets también existe una serie de frameworks que proporcionan soporte a los

desarrolladores, entre los que cabe destacar Struts, que con una amplia

comunidad de usuarios se ha convertido en el estándar de facto en este rol.

El funcionamiento de una aplicación web J2EE que utilice el patrón arquitectural MVC

se puede descomponer en una serie de pasos:

• El usuario realiza una acción en su navegador, que llega al servidor mediante

una petición HTTP y es recibida por un servlet (controlador). Esa petición es

interpretada y se transforma en la ejecución de código java que delegará al

modelo la ejecución de una acción de éste.

• El modelo recibe las peticiones del controlador, a través de un interfaz o fachada

que encapsulará y ocultará la complejidad del modelo al controlador. El resultado

de esa petición será devuelto al controlador.

• El controlador recibe del modelo el resultado, y en función de éste, selecciona la

vista que será mostrada al usuario, y le proporcionará los datos recibidos del

modelo y otros datos necesarios para su transformación a HTML. Una vez hecho

PROGRAMACION WEB

esto el control pasa a la vista para la realización de esa transformación.

• En la vista se realiza la transformación tras recibir los datos del controlador,

elaborando la respuesta HTML adecuada para que el usuario la visualice.

Ventajas:

� Al separar de manera clara la lógica de negocio (modelo) de la vista permite la

reusabilidad del modelo, de modo que la misma implementación de la lógica de

negocio que maneja una aplicación pueda ser usado en otras aplicaciones, sean

éstas web o no.

� Permite una sencilla división de roles, dejando que sean diseñadores gráficos

sin conocimientos de programación l os que se encarguen de la realización de la

capa vista, sin necesidad de mezclar código Java entre el código visual que

desarrollen (tan sólo utilizando algunos tags, no muy diferentes de los usados en

el código HTML).

Figura 2.3 MVC o Modelo-Vista-Controlador.

PROGRAMACION WEB

2.2 Lenguajes de programación del lado del cliente

El navegador es una aplicación capaz de interpretar las órdenes recibidas en

forma de código HTML fundamentalmente y convertirlas en las páginas que son el

resultado de dicha orden.

Al dar clic sobre un enlace de hipertexto, se establece una petición de un archivo

HTML residente en el servidor (un ordenador que se encuentra continuamente

conectado a la red) el cual es enviado e interpretado por el navegador del usuario

(el cliente).

Un lenguaje de lado cliente es totalmente independiente del servidor, lo cual

permite que la página pueda ser albergada en cualquier sitio sin necesidad de

pagar más, ya que, por regla general, los servidores que aceptan páginas con

scripts de lado servidor son en su mayoría de pago o sus prestaciones son muy

limitadas. Inversamente, un lenguaje de lado servidor es independiente del cliente

PROGRAMACION WEB

por lo que es mucho menos rígido respecto al cambio de un navegador a otro o

respecto a las versiones del mismo.

2.3 Lenguajes de programación del lado del servidor

Los lenguajes de lado servidor son aquellos lenguajes que son reconocidos,

ejecutados e interpretados por el propio servidor y que se envían al cliente en un

formato comprensible para él. Por otro lado, los lenguajes de lado cliente son

aquellos que pueden ser directamente "digeridos" por el navegador y no necesitan

un pre-tratamiento

PROGRAMACION WEB

Fig. 2.4 Comunicació

lado del cliente.

La siguiente tabla describe los lenguajes de programación usados en el lado del cliente.

Lenguaje de Programación

Definición

HTML

Indica al navegador donde poner cada texto, cada imagen cada video y la forma que tendrán estos al ser colocados en la página.

Consta de etiquetas que tienen esta forma <B>, <P>. Cada etiqueta significa una función y se utilizan para definir la forma o estilo que queremos aplicar al documento.

JAVASCRIPT

Es un lenguaje de programación utilizado para crear pequeños programitas encargados de realizar acciones dentro del ámbito de una página web. Es un lenguaje de programación del lado del cliente, porque es el navegador el que soporta la carga de procesamie

PROGRAMACION WEB

2.4 Comunicación cliente/servidor usando aplicaciones del

La siguiente tabla describe los lenguajes de programación usados en el lado del

Definición

Indica al navegador donde poner cada texto, cada imagen cada video y la forma que tendrán estos al ser colocados en la página.

Consta de etiquetas que tienen esta forma <B>, <P>. Cada etiqueta significa una función y se utilizan para definir la forma o estilo que queremos aplicar al documento. Es un lenguaje de programación utilizado para crear pequeños programitas encargados de realizar acciones dentro del ámbito de una página web. Es un lenguaje de programación del lado del cliente, porque es el navegador el que soporta la carga de procesamiento. Su uso se basa

n cliente/servidor usando aplicaciones del

La siguiente tabla describe los lenguajes de programación usados en el lado del

Indica al navegador donde poner cada texto, cada imagen o cada video y la forma que tendrán estos al ser colocados en

Consta de etiquetas que tienen esta forma <B>, <P>. Cada etiqueta significa una función y se utilizan para definir la forma o estilo que queremos aplicar al documento. Es un lenguaje de programación utilizado para crear pequeños programitas encargados de realizar acciones dentro del ámbito de una página web. Es un lenguaje de programación del lado del cliente, porque es el navegador

nto. Su uso se basa

PROGRAMACION WEB

fundamentalmente en la creación de efectos especiales en las páginas y la definición de interactividades con el usuario, las sentencias escritas en JavaScript se encapsulan entre las etiquetas <script> y </script>.

APPLETS

DE JAVA

Es otra manera de incluir código a ejecutar en los clientes que visualizan una página web. Se trata de pequeños programas hechos en Java, que se transfieren con las páginas web y que el navegador ejecuta en el espacio de la página. Ya que están programados en Java y pre-compilados, la manera de trabajar de éstos varía un poco con respecto a los lenguajes de script como JavaScript. Los applets son más difíciles de programar que los scripts en y requerirán unos conocimientos básicos o medios del lenguaje Java.

La ventaja de utilizar applets consiste en que son mucho menos dependientes del navegador que los scripts en Javascript, incluso independientes del sistema operativo del ordenador donde se ejecutan. Además, Java es más potente que Javascript, por lo que el número de aplicaciones de los applets podrá ser mayor.

Como desventajas en relación con Javascript cabe señalar que los applets son más lentos de procesar y que tienen espacio muy delimitado en la página donde se ejecutan, es decir, no se mezclan con todos los componentes de la página ni tienen acceso a ellos. Es por ello que con los applets de Java no podremos hacer directamente cosas como abrir ventanas secundarias, controlar Frames, formularios, capas, etc.

VISUAL BASIC SCRIPT

Es un lenguaje compatible sólo con Internet Explorer. Es por ello que su utilización está desaconsejada a favor de Javascript. Está basado en Visual Basic, un popular lenguaje para crear aplicaciones Windows. Tanto su sintaxis como la manera de trabajar están muy inspiradas en él. Sin embargo, no todo lo que se puede hacer en Visual Basic lo podremos hacer en Visual Basic Script, pues este último es una versión reducida del primero.

CSS

Es una tecnología que permite crear páginas web de una manera más exacta. Gracias a las CSS se pueden controlar los resultados finales de la página, pudiendo hacer muchas cosas más que HTML, como incluir márgenes, tipos de letra, fondos, colores, etc. CSS son las siglas de Cascading Style Sheets, en español Hojas de estilo en Cascada.

PROGRAMACION WEB

FLASH

Es una tecnología, y un programa, para crear efectos especiales en páginas web. Con Flash también conseguimos hacer páginas dinámicas del lado del cliente. Flash en realidad no es un lenguaje; Sin embargo, si tuviéramos que catalogarlo en algún sitio quedaría dentro del ámbito de las páginas dinámicas de cliente. Para visualizar las "películas" Flash, el navegador debe tener instalado un programa (plug-in) que le permita visualizarlas

2.4 Ambientes para el desarrollo de aplicaciones we b

Es un programa compuesto por un conjunto de herramientas para un

programador, puede dedicarse en exclusiva a un sólo lenguaje de programación o

bien, poder utilizarse para varios. Consiste en un editor de código, un compilador,

un depurador y un constructor de interfaz gráfica, su meta es proveer un marco de

trabajo amigable para los programadores de algún lenguaje de programación.

PROGRAMACION WEB

Los IDE (ambientes integrados de desarrollo) para aplicaciones Web son muy

numerosos, algunos son específicos para lenguajes del lado del servidor. Por

ejemplo, Visual Studio solo soporta ASP.NET del lado del servidor.

Entre varios IDE’s destacan algunos:

• Microsoft Visual Studio.

• Microsoft Web Developer Express.

• Mono (para ASP.NET).

• Net Beans.

• Jbuilder.

• Eclipse.

2.5 Metodologías para el desarrollo de aplicaciones Web

• EORM

Es una Metodología de Relación entre Objeto (Enhanced Object Relationship

Methodology), definida por un proceso iterativo que se concentra en el modelado

orientado a objetos por la representación de relaciones entre ellos (acoplamientos)

PROGRAMACION WEB

como objetos, es por ello que fue una de las primeras propuestas para Web

centrada en el paradigma de la orientación a objetos.

Para automatizar la aplicación de la metodología EORM, su autor ha desarrollado,

en los laboratorios de investigación de IBM, una herramienta denominada

ODMTool que, junto a un generador comercial de Interfaces Gráficas de Usuario

denominado ONTOS Studio y un Sistema de Gestión de Base de Datos Orientado

a Objetos (SGBDOO), permite el diseño interactivo de esquemas EORM y la

generación de código fuente, inicialmente en C++, de las clases incluidas en estos

esquemas. El SGBDOO ofrece un repositorio de objetos que permite la

compartición de la información de los esquemas entre las herramientas (ODMTool,

ONTOS Studio) y las aplicaciones hipermediales desarrolladas.

Esta metodología tiene las siguientes ventajas:

• Encajamiento de relaciones semánticas en construcciones extensibles,

pudiendo participar en otras relaciones y ser parte de bibliotecas

reutilizables. EORM distingue dos tipos de relaciones orientadas a objetos:

Relaciones de generalización y relaciones definidas por el usuario. Mientras

que los primeros se concentran como en la semántica asociada entre ellas,

los segundos confían totalmente en la especificación del usuario.

• La semántica de vínculos básicos de clases que se manejan, son las

siguientes de manera resumida:

• SimpleLink: Es la raíz vínculo básica de clase que proporciona capacidad

de interconexión, incluido funciones para la creación, supresión y recorrido.

• NavigationalLink: Proporciona mecanismos para enlaces hipermedia que

incluye el almacenamiento de creación de tiempo e información histórica.

Se hereda de simpleLink.

• NodeToNode: Es un vínculo que hereda de NavigationalLink y proporciona

a un objeto Hipermedia vínculo de funcionalidad.

PROGRAMACION WEB

• SpanToNode: Se hereda de NavigationalLink. Vincula el contenido de un

objeto a otro objeto.

• StructureLink: Se hereda de SimpleLink y la raíz de los vínculos

estructurales. Se inserta después creación en el contexto estructural.

• SetLink: Es una structureLink que proporciona acceso a un objeto en una

desordenada colección de objetos.

• ListLink: Es un structureLink que proporciona acceso a un objeto en una

colección ordenada de objetos.

EORM consta de tres fases:

Fase de Análisis: Se trata de orientar a objetos al sistema, sin considerar los aspectos hipermediales del mismo, obteniéndose para ello un Modelo de Objetos con la misma notación utilizada en OMT, que refleje la estructura de la información (mediante clases de objetos con atributos y relaciones entre las clases) y el comportamiento del sistema (a través de los métodos asociados a las clases de objetos).

Fase de Diseño: Procede a modificar el modelo de objetos obtenido durante el

análisis añadiendo la semántica apropiada a las relaciones entre clases de objetos

para convertirlas en enlaces hipermedia, obteniendo finalmente un modelo

enriquecido (EORM), en el que se refleje tanto la estructura de la información

(modelo abstracto hipermedia compuesto de nodos y enlaces) como las

posibilidades de navegación ofrecidas por el sistema sobre dicha estructura, para

lo cual existirá una librería de clases de enlaces, donde se especifican las posibles

operaciones asociadas a cada enlace de un hiper documento, que serán de tipo

crear, eliminar, atravesar, siguiente, previo etc., así como sus posibles atributos

PROGRAMACION WEB

(fecha de creación del enlace, estilo de presentación en pantalla, restricciones de

acceso, etc.).

Fase de Construcción: Se transforman los esquemas en código y son guardados

en una Base de Datos Orientada a Objetos, al elaborar formularios de consulta de

las clases con la ayuda de un editor gráfico de interfaces. Se genera el código

fuente (por ejemplo C#) correspondiente a cada clase y se prepara la Interface

Gráfica de Usuario.

Las relaciones definidas en un modelo orientado a objetos pueden ser

representadas por clases de enlaces hipermedia. Estas clases añaden a las

relaciones del modelo objeto la semántica navegacional de la aplicación. Están

organizadas en una jerarquía de herencia propuesta por el método bajo la forma

de una biblioteca de clases. La semántica relativa a las propiedades hipermedia

de las relaciones encuentra, por tanto, una representación en EORM bajo la forma

de clases.

• OOHDM

Es un Método de Diseño de Desarrollo en Hipermedia Orientado a Objetos (Object-Oriented Hypermedia Design Method) y abarca las cuatro actividades: El modelado conceptual, diseño navegacional, diseño abstracto de interfaz y la puesta en práctica. Estas actividades se realizan en una mezcla de estilo incremental, iterativo y basado en prototipos de desarrollo.

Consta de cuatro fases:

PROGRAMACION WEB

Fase Conceptual: durante esta actividad se construye un esquema conceptual

representado por los objetos del dominio, las relaciones y colaboraciones

existentes establecidas entre ellos. En las aplicaciones hipermedia

convencionales, cuyos componentes no son modificados durante la ejecución, se

podría usar un modelo de datos semántico estructural (como el modelo de

entidades y relaciones). De este modo, en los casos en que la información base

pueda cambiar dinámicamente o se intenten ejecutar cálculos complejos, se

necesitará enriquecer el comportamiento del modelo de objetos En OOHDM, el

esquema conceptual está construido por clases, relaciones y subsistemas. Las

clases son descritas como en los modelos orientados a objetos tradicionales. Sin

embargo, los atributos pueden ser de múltiples tipos para representar perspectivas

diferentes de las mismas entidades del mundo real.

Fase Navegacional: se debe tener en mente que la generación de aplicaciones

Web fue pensada para realizar navegación a través del espacio de información,

utilizando un simple modelo de datos de hipermedia. En OOHDM, la navegación

es considerada un paso crítico en el diseño aplicaciones. Un modelo

navegacional es construido como una vista sobre un diseño conceptual,

admitiendo la construcción de modelos diferentes de acuerdo con los distinto

perfiles de usuarios. Cada modelo navegacional provee una vista subjetiva del

diseño conceptual. El diseño de navegación es expresado en dos esquemas: el

esquema de clases navegacionales y el esquema de contextos navegacionales.

En OOHDM existe un conjunto de tipos predefinidos de clases navegacionales:

nodos, enlaces y estructuras de acceso. La semántica de los nodos y los enlaces

son las tradicionales de las aplicaciones hipermedia, y las estructuras de acceso,

tales como índices o recorridos guiados, representan los posibles caminos de

acceso a los nodos. La principal estructura primitiva del espacio navegacional es

la noción de contexto navegacional. Un contexto navegacional es un conjunto de

nodos, enlaces, clases de contextos, y otros contextos navegacionales (contextos

anidados). Pueden ser definidos por comprensión o extensión, o por enumeración

PROGRAMACION WEB

de sus miembros. Los contextos navegacionales juegan un rol similar a las

colecciones y fueron inspirados sobre el concepto de contextos anidados.

Organizan el espacio navegacional en conjuntos convenientes que pueden ser

recorridos en un orden particular y que deberían ser definidos como caminos para

ayudar al usuario a lograr la tarea deseada. Los nodos son enriquecidos con un

conjunto de clases especiales que permiten observar y presentar sus atributos

(incluidos las anclas), así como métodos (comportamiento) cuando se navega en

un particular contexto.

Fase de Interfaz Abstracta : Las estructuras navegacionales son definidas y se

deben especificar los aspectos de interfaz. Esto significa definir la forma en la cual

los objetos navegacionales pueden aparecer, de cómo los objetos de interfaz

activarán la navegación y el resto de la funcionalidad de la aplicación, qué

transformaciones de la interfaz son pertinentes y cuándo es necesario realizarlas.

Una clara separación entre diseño navegacional y diseño de interfaz abstracta

permite construir diferentes interfaces para el mismo modelo navegacional,

dejando un alto grado de independencia de la tecnología de interfaz de usuario.

El aspecto de la interfaz de usuario de aplicaciones interactivas (en particular las

aplicaciones Web) es un punto crítico en el desarrollo que las modernas

metodologías tienden a descuidar. En OOHDM se utiliza el diseño de interfaz

abstracta para describir la interfaz del usuario de la aplicación de hipermedia. El

modelo de interfaz ADVs (Vista de Datos Abstracta) especifica la organización y

comportamiento de la interfaz, pero la apariencia física real o de los atributos, y la

disposición de las propiedades de las ADVs en la pantalla real son hechas en la

fase de implementación.

PROGRAMACION WEB

Fase Implementación: Se tendrá en cuanta que el diseñador debe ya

implementar el diseño. Hasta ahora, todos los modelos fueron construidos en

forma independiente de la plataforma de implementación; en esta fase es tenido

en cuenta el entorno particular en el cual se va a correr la aplicación. Al llegar a

esta fase, el primer paso que debe realizar el diseñador es definir los ítems de

información que son parte del dominio del problema. Debe identificar también,

cómo son organizados los ítems de acuerdo con el perfil del usuario y su tarea;

decidir qué interfaz debería ver y cómo debería comportarse. A fin de implementar

todo en un entorno Web, el diseñador debe decidir además qué información debe

ser almacenada.

Construir la interfaz de una aplicación Web es una tarea compleja; no sólo se

necesita especificar cuáles son los objetos de la interfaz que deberían ser

implementados, sino también la manera en la cual interactuarán con el resto de la

aplicación.

OOHDM propone un conjunto de tareas que en principio pueden involucrar

mayores costos de diseño, pero que a mediano y largo plazo reducen

notablemente los tiempos de desarrollo al tener como objetivo principal la

reusabilidad de diseño, y así simplificar la evolución y el mantenimiento.

• SOHDM

Es un Método que Desarrolla Diseño en panoramas (scenario) Orientada a

Objetos en Hipermedia (Scenario - based Object-oriented Hypermedia Design

PROGRAMACION WEB

Methodology). Presenta la necesidad de disponer de un proceso que permita

capturar las necesidades del sistema. Para ello, propone el uso de escenarios.

Es una de las primeras propuestas para la web y brinda más importancia a la

tarea de tratamiento de requisitos. Se caracteriza principalmente porque su ciclo

de vida comienza con la aplicación de los escenarios como técnica de licitación y

definición de requisitos. El proceso de definición de requisitos parte de la

realización de un diagrama de contexto tal y como se propone en los diagramas

de flujos de datos (DFD) de Yourdon (1989). En este diagrama de contexto se

identifican las entidades externas que se comunican con el sistema, así como los

eventos que provocan esa comunicación. La lista de eventos es una tabla que

indica en qué eventos puede participar cada entidad. Por cada evento diferente,

SOHDM propone elaborar un escenario. Estos son representados gráficamente

mediante los denominados SACs2 (Scenario Activity Chart).

Cada escenario describe el proceso de interacción entre el usuario y el sistema

cuando se produce un evento determinado, especificando el flujo de actividades,

los objetos involucrados y las transacciones realizadas. SOHDM propone un

proceso para conseguir a partir de estos escenarios el modelo conceptual del

sistema, que es representado mediante un diagrama de clases. El proceso de

SOHDM continúa reagrupando estas clases para conseguir un modelo de clases

navegacionales del sistema.

Esta metodología tiene semejanzas con, OOHDM y EORM donde se diferencian

en el uso de panoramas, que describen las actividades en los acontecimientos y

primitivas de flujos de actividades. Los panoramas se definen en la fase de

análisis y se utilizan para modelar los objetos y consta de seis fases:

PROGRAMACION WEB

Fase de Análisis: Se realiza un estudio de las necesidades de la aplicación, del

entorno de trabajo y de los actores. La finalidad principal de esta fase es conseguir

los escenarios que representen las actividades que se pueden llevar a cabo en el

sistema.

Fase de Modelado de Objetos: Se desarrolla un diagrama de clases que

representa la estructura conceptual del sistema.

Fase de Diseño de Vistas: Se reorganizan los objetos en unidades

navegacionales, que representan una vista de los objetos del sistema.

Fase de Diseño Navegacional: Se enriquecen dichas vistas definiendo los

enlaces e hiperenlaces que existen en el sistema.

Fase de Diseño de la Implementación: Se diseñan las páginas, la interfaz y la

base de datos del sistema.

Fase de Construcción: Se realiza la construcción de la base de datos del

sistema. La cual que se implementará a la aplicación.

• WSDM

Es un Método de Diseño para Sitios Web (Web Site Design Method), donde hay

un acercamiento al usuario que define los objetos de información basado en sus

requisitos de información para el uso de la Web. En este método se definen una

PROGRAMACION WEB

aplicación Web a partir de los diferentes grupos de usuarios que vaya a reconocer

el sistema; consta de cuatro fases:

Fase de Modelo de Usuario: Se intenta detectar los perfiles de usuarios para los

cuales se construye la aplicación. Durante esta fase es necesario determinar:

¿Quién es el público objetivo? ¿Cómo será la visión de su sitio Web? ¿Cuáles son

los objetivos de marketing de la empresa? ¿Cuáles son los objetivos de su sitio

web? ¿Qué mensaje tiene su compañía quiere transmitir? ¿Cuál es el campo del

negocio?

Una vez que tenemos una comprensión de su negocio y sus objetivos de la

empresa, que hará recomendaciones a la mejor alcanzar sus metas. Nuestro

proceso de planificación estratégica se creará un plan inicial de su sitio web. Se

divide en dos sub-fases siguientes:

• Clasificación de usuarios: Se deben identificar y clasificar a los usuarios que

van a hacer uso del sistema. Para ello, WSDM propone el estudio del

entorno de la organización donde se vaya a implantar el sistema y los

procesos que se vayan a generar, describiendo las relaciones entre

usuarios y actividades que realizan estos usuarios.

• Descripción de los grupos de usuarios: Se describen con más detalles los

grupos de usuarios detectados en la etapa anterior. Para ello, se debe

elaborar un diccionario de datos, en principio con formato libre, en el que

indican los requisitos de almacenamiento de información, requisitos

funcionales y de seguridad para cada grupo de usuarios.

PROGRAMACION WEB

Fase de Diseño Conceptual: Se desarrolla el modelado conceptual no tiene el

mismo significado que en OOHDM. Durante el modelado conceptual se realizan

dos tareas a la vez: el modelado de objetos, que es lo que en OOHDM se llama

modelo conceptual y el diseño de la navegación, que coincide con la idea de su

diseño navegacional, Este tipo de diseño de navegación en aplicaciones Web

tiene una estructura muy jerárquica.

Pocas recomendaciones se dan en esta etapa, tales como la utilización de

páginas de índice, derecho de información dividida en diversos tamaños, el uso de

contexto y de la información y el uso de señales de navegación. Este modelo

distingue tres tipos de componentes de navegación, información y externos. Cada

una consta de tres capas: contexto, navegación y capas de información. En

WSDM puede existir más de un modelo de navegación, dependiendo de los roles

de usuario detectados durante la primera fase.

Fase de Diseño de Implementación : Se modela la interfaz para cada rol de

usuario, Ahora que se tiene una versión definitiva del plan se pueda comenzar con

la construcción del sitio web. Durante esta fase, se tendrá lugar lo siguiente:

• Creación de alta funcionalidad, teniendo como fin a la animación, pues hará

que se propague por todas las páginas de los medios necesarios con sus

los gráficos y el texto.

• El código de los programas técnicos y la funcionalidad del sitio.

• La creación y diseño de la página principal disponible.

• Fase de Realización de Implementación, se codifican todos estos aspectos

en el lenguaje concreto que se haya seleccionado.

PROGRAMACION WEB

Se Prepara el lanzamiento de la web teniendo en cuenta ¿Cuándo entrarían a

nuestra web? Antes de eso hay que asegurar lo siguiente:

• Continuo y exhaustivas pruebas que garantizará un impecable final del sitio

web.

• Trabajo directamente con la empresa para garantizar la técnica y la

usabilidad se cumplen las normas.

• Velar el final del proyecto para ver si se cumplieron los requisitos

planteados.

• Crear una fecha de lanzamiento y el plan.

WSDM se describe en términos de componentes y enlaces. Distingue tres tipos

de componentes de navegación. Cada navegación consta de tres capas:

contexto, la navegación y capas de información . El contexto es la capa

superior de la navegación y a su vez la de información es la capa inferior. La capa

de navegación conecta la capa de contexto y la capa de información. Para

acceder a la información intermedia por componentes y los vínculos que se crean,

tales como los índices. En la actualidad, es uno de los trabajos más interesantes y

novedosos que se le está aplicando es el desarrollo de una herramienta CASE

que permita aplicar el ciclo de vida de desarrollo de WSDM.

• RNA

Es un método de Análisis de Navegación Relacional (Relationship Navigational

Analysis), que define una secuencia de pasos que se utilizarán para el desarrollo

de la Web. Es especialmente útil para uso de la Web creados en base de sistema

de herencia.

PROGRAMACION WEB

La propuesta de RNA es quizás una de las que más ha resaltado la necesidad de

trabajar con la especificación de requisitos, incluyendo tareas como el análisis del

entorno y de los elementos de interés. Además, resulta interesante pues plantea la

necesidad de analizar los requisitos conceptuales de manera independiente a los

navegacionales. Consta de cinco fases:

Fase de Definición de Elementos: Aquí prosiguen los elementos de interés en la

cual se han listando dichos elementos de la aplicación. Por elementos de interés

se entienden los documentos, las pantallas que se van a requerir, la información,

etc.

Fase de Análisis del Conocimiento: Se desarrolla un esquema que represente a

la aplicación. Para ello RNA propone identificar los objetos, los procesos y las

operaciones que se van a poder realizar en la aplicación, así como las relaciones

que se producen entre estos elementos

Fase de Análisis de Navegación: Se verifica que el esquema obtenido en la fase

anterior sea enriquecido con las posibilidades de navegación dentro de la

aplicación.

Fase de Implementación del Análisis: Una vez obtenido el esquema final en el

que ya se encuentran incluidos los aspectos de navegación, se pasa el esquema a

un lenguaje entendible por la máquina.

PROGRAMACION WEB

2.6 Aspectos de seguridad

Las tecnologías Web 2.0 permiten abrir nuevos canales de comunicación y

mejorar la usabilidad de las aplicaciones Web, haciendo que estas sean más

amigables e interactivas a través de funcionalidades como redes sociales, blogs, y

servicios de interactivos, los principales aspectos asociados con la Web 2.0 son:

• Rich Internet Applications (RIA) principalmente usando AJAX. Que permite

la actualización del contenido web en tiempo real y asíncrono.

PROGRAMACION WEB

• Colaboración, donde se cambia el paradigma de tener contenido controlado

o definido por el publicador a uno controlado por la comunidad.

• Sindicalización, que permite la emisión y recepción de contenido en tiempo

real, así como realizar la fusión de contenido proveniente de diversas

fuentes distintas.

Las tecnologías Web 2.0 expanden funcionalidades de las aplicaciones y mejoran

su usabilidad, sin embargo, abren nuevos riesgos a la seguridad, los cuales deben

ser atendidos.

Implicaciones de las tecnologías Web 2.0 en la segu ridad

• Existe mayor complejidad en las aplicaciones, por lo tanto es más difícil

protegerlas.

• Las aplicaciones se conforman por un mayor número de componentes,

normalmente con tareas muy pequeñas y cada uno de ellos deberá ser

protegido ya que pueden ser sujetos de posibles ataques.

• Las pruebas de hacking ético se vuelven más complejas por lo que se

puede dejar de detectar algunas vulnerabilidades.

• Existen nuevas formas de inyección de código malicioso debido a la

utilización de Java Scripts ya que XML puede contener scripts con

funciones.

• Los usuarios pueden usar los blogs para insertar código HTML malicioso o

insertar archivos con virus o gusanos.

PROGRAMACION WEB

Hoy en día, las tecnologías Web 2.0 ya son objeto de múltiples ataques. Según

datos del Security Enterprise 2.0 Fórum los principales vectores de ataques son

los siguientes:

• SQL Injection con un 21%.

• Autenticación insuficiente con un 18%.

• Falsificación de contenido con un 11%.

• Cross-site scripting (XSS) con un 11%.

• Cross-Site Request Forgery con un 8%.

• Mala configuración con un 8%.

Siendo las principales consecuencias identificadas las siguientes:

• Fuga de información con un 29%.

• Desinformación con un 26%.

Recientemente se han conocido múltiples casos de identidades robadas en redes

sociales así como la difusión de noticias y comentarios falsos.

Estrategias de protección

De acuerdo a lo que diversos expertos en el tema han definido, algunas de las

estrategias que se pueden seguir para mitigar los riesgos que las tecnologías Web

2.0 implican son las siguientes:

PROGRAMACION WEB

• Sensibilizar tanto a los desarrolladores de las aplicaciones como a los

dueños de las mismas sobre los riesgos que supone la utilización de

tecnologías Web 2.0.

• Mantenerse actualizado sobre las vulnerabilidades y sus exploits, pudiendo

utilizar un inventario de componentes para facilitar esta tarea.

• Usar prácticas de desarrollo seguro, que consideren aspectos como:

o Contar con un inventario de todos los componentes Web 2.0

existentes y realizar una validación antes de utilizarlos.

o Evitar poner la lógica de seguridad en el lado cliente de la aplicación.

o Separar los datos del código de la aplicación, es decir, usar módulos

distintos para generar las estructuras de despliegue y otros para el

rellenado de contenido.

o No procesar Java Scripts provistos por el usuario, codificar los datos

XML y no ejecutarlos directamente como scripts.

o Validar siempre las entradas en el servidor Evitar que los usuarios

puedan postear archivos con virus o gusanos.

• Implementar sistemas de Firewall para aplicaciones Web, que permiten

entre otras cosas:

o Analizar el tráfico HTTP y XML, así como proteger de ataques de tipo

XSS, CSRF u otros tipos de ataques por inyección.

o Automatizar lo más posible la creación y mantenimiento de la política

de seguridad, por ejemplo utilizando tecnologías que identifiquen de

PROGRAMACION WEB

manera automática todas las peticiones XML inclusive las que

suceden en "background".

o Detectar de contenido malicioso en RSS feeds y Atom feeds

Detectar oportuna de vulnerabilidades en las aplicaciones usadas

para RSS feeds y mashups.

Las tecnologías Web 2.0 aportan grandes beneficios pero su despliegue requiere

considerar estrategias de seguridad específicas y concretas.