Upload
others
View
3
Download
0
Embed Size (px)
Citation preview
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 <
• el carácter > será reemplazado por >
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:[email protected]" 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="[email protected]">
<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á 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.