1

Derechos Reservados 2009 por Gastn Dehesa Valencia Todos los Derechos Reservados. Ninguna parte de esta publicacin puede ser reproducida, almacenada en un sistema de consulta, o transmitida en cualquier forma o por cualquier medio, electrnico, mecnico, fotocopiado, grabado o de cualquier tipo sin antes tener el permiso escrito del Editor. En este libro se han incluido programas y descripciones grficas por su valor educacional. Han sido debidamente probados pero no se garantizan para ningn propsito en particular. El editor no proporciona ninguna garanta o representacin, ni acepta ninguna responsabilidad con respecto a los programas y descripciones grficas. Muchos de los nombres utilizados por los fabricantes o vendedores de software para distinguir sus productos son marcas registradas. El editor tiene toda la intencin de proporcionar la informacin de la marca registrada acerca de los fabricantes y los productos mencionados en este libro. Una lista de las designaciones de marcas registradas se muestra a continuacin:

Marcas Registradas: son marcas registradas de Microsoft Corporation. Adobe Dreamweaver: Es una marca registrada por Adobe Systems Incorporated. C++ Builder: Es una marca registrada por Borland software Corporation Java: Es una marca registrada por Sun Microsystems. Unix: Es una marca registrada por The Open Group.Windows, Microsoft SQL Server, Microsoft Acces y Visual Basic

2

Agradecimientos Este libro no habra sido posible, y no estara ahora en sus manos sin el apoyo de la Direccin General de Educacin Superior Tecnolgica, el Instituto Tecnolgico del Istmo y de mis compaeros docentes de la Academia de Sistemas y Computacin. Una agradecimiento especial a mi amada esposa Josefina Blas Lpez, a mis consentidos hijos: Shunashi, Guiecniza y Josenandxo.

3

Contenido

1.- Introduccin a las tecnologas Web. 1.1 Perspectiva histrica del Internet 1.2 Protocolo http (protocolo de transferencia de hipertexto). 1.2.1 Arquitectura del WWW. 1.2.2 URLs. 1.2.3 Mtodos http. Persistencia en http Cookies. 1.3 Introduccin al HTML. Lenguaje de despliegue del Web 1.3.1 HTML como un tipo SGML. 1.3.2 Elementos del lenguaje HTML. 1.3.3 Tablas en HTML. 1.3.4 Formularios. 1.4 Evolucin del desarrollo de aplicaciones Web. 1.5 Hojas de estilo en cascada e introduccin al XML. 2.- Desarrollo de aplicaciones Web 2.1 Arquitectura de las aplicaciones Web. 2.2 Lenguajes de programacin del lado del cliente. 2.3 Lenguajes de programacin del lado del servidor. 2.4 Ambientes para el desarrollo de aplicaciones Web. 2.5 Metodologas para el desarrollo de aplicaciones Web 2.6 Aspectos de seguridad. 3.- Programacin del lado del servidor. 3.1 Procesamiento del lado del servidor. 3.2 Conceptos bsicos de la herramienta de desarrollo. 3.3 Operadores. 3.4 Sentencias. 3.5 Arreglos. 3.6 Funciones y libreras. 3.7 Ejemplos prcticos. 3.8 Procesado de formularios. 3.9 Sesiones. 3.10 Conectividad entre el servidor Web y el servidor de base de datos. 3.11 Manejo de archivos. 3.12 Seguridad. 4.- Procesamiento del lado del cliente. 4.1 Lenguaje Script del cliente. 4.2 Modelo de objetos con lenguaje Script. 4.3 Objetos lenguaje Script nter construidos.

7 8 9 15 16 18 19 19 21 27 31 38 39 51 52 53 55 59 60 69 89 90 92 95 100 107 109 120 120 124 127 140 143 153 154 158 1664

4.4 Eventos con lenguaje Script. 4.5 Validacin de entrada de datos del lado del cliente. 4.6 Consideraciones del soporte del navegador. Unidad 5.- Servicios Web XML. 5.1 Visin general de servicios Web XML. 5.2 Tecnologas subyacentes. 5.2.1 SOAP 5.2.2 WSDL 5.2.3 UDDI 5.3 Publicacin de un servicio WEB. 5.4 Consumo de un servicio WEB. Anexo A.- Programacin de un caso de estudio

166 170 174 178 179 180 181 185 185 186 186 189

5

Prologo Este libro pretende ser una gua para el docente y los alumnos en el curso de PROGRAMACIN WEB que se ofrece en un semestre en la carrera de Ingeniera en Sistemas Computacionales del sistema de Institutos Tecnolgicos. El avance tecnolgico en el rea de software a veces es mucho ms rpido que el ritmo que los docentes se pueden actualizar o preparar, la implementacin de sistemas de informacin involucra diversos lenguajes para su construccin, como es el caso de los sistemas de informacin basados en Web en este sentido el presente libro engloba el conjunto de lenguajes necesarios para llevar a cobo una implementacin de un sitio Web, contiene un lenguaje de programacin tanto por el lado del cliente, como por el lado del servidor, sin perder de vista los elementos necesarios para hacer del sistema un sistema confiable, abordando la seguridad Web. Este libro est organizado de la siguiente forma: Desde el primer captulo se abordan ya aspectos prcticos del lenguaje HTML, tales como el manejo de tablas, marcos, formularios y hojas de estilos en cascada. En el capitulo dos se da un panorama general de la programacin Web, desde el punto de vista del cliente, el servidor y la seguridad necesaria para evitar el acceso de intrusos al sistema. Es en el capitulo tres donde se aborda la programacin por el lado del servidor en detalle, se profundiza con ejemplos por lo menos en un lenguaje de entre los varios existentes. En el captulo cuarto se trata sobre uno de los lenguajes ms utilizados para la programacin por el lado del cliente. Por ltimo en el capitulo cinco los servicios Web como estandar de comunicacin entre aplicaciones usando XML. Un caso de estudio, se encuentra al final en un anexo con la finalidad de darle al lector una visin de lo que puede ser en conjunto un sistema de informacin en ambiente Web. Cada tema expuesto viene acompaado de uno o ms ejercicios, el nombre del archivo aparece como comentario al inicio de cada listado de programa En el CD ROM que acompaa al libro encontrar un directorio por cada unidad con los ejercicios desarrollados. Espero que al terminar de leer este libro se cubran las expectativas planteadas, cualquier comentario o sugerencia acerca del contenido del material lo puede hacer a la siguiente direccin de correo electrnico: gastondv@hotmail.comLA EDUCACIN Y LA TECNOLOGA SON LA LLAVE PARA LA SUPERACIN PERSONAL

6

1 Introduccion a las tecnologas Web.

7

1.1.- PERSPECTIVA HISTRICA DEL INTERNET Internet fue desarrollado por el Departamento de la Defensa de los Estados Unidos afines de la dcada de los 60, para realizar actividades de Investigacin de tipo privado exclusivamente, ms tarde en 1990 se convierte en una red pblica en donde se conectan en un principio unos cientos de redes de computadoras, hasta la actualidad que contiene millones. Tiene como caracterstica que cada computadora que se conecte a ella deba trabajar con el protocolo de comunicacin conocido como Protocolo de Control de Transmisin/ Protocolo de Internet (TCP/IP). El protocolo TCP/IP se ha modelado representando a una computadora en la red como un conjunto de capas, en donde se encuentran ubicados diferentes protocolos de comunicacin, siendo as TCP/IP en realidad un conjunto de protocolos, que operando de manera coordinada ha logrado actualmente tener el avance tecnolgico que en tan solo hace algunos aos no se hubiese imaginado.

Fig. 1.1 Modelo TCP/IP y conjunto de protocolos El incremento de usuarios en Internet de manera exponencial, se dio con el lanzamiento en 1991 de la aplicacin conocida como World Wide Web (WWW) que traducido al espaol significa Telaraa mundial, y a medida que pasan los aos aparecen nuevas aplicacin, que hacen cada vez ms atractiva su utilizacin. Una computadora conectada a Internet se modela mediante un conjunto de capas, teniendo a la capa de aplicacin como la capa con la cual interacta el usuario, es decir solamente con esta capa se pueden utilizar las aplicaciones que se encuentran disponibles en la red, como es el caso del WWW, esta aplicacin, as como las dems existentes requieren de un protocolo hallado en la capa de aplicacin para su funcionalidad, de tal forma que una aplicacin WWW aplicacin WEB, usa el Protocolo de Trasferencia de Hipertexto (HTTP) para poder funcionar. En este libro, se profundiza en los detalles para la creacin de aplicaciones WEB utilizando el protocolo HTTP, quedando los otros protocolos existentes del TCP/IP fuera del alcance, ms sin embargo se muestran en la figura 1.1 solo como referencia.8

Cada protocolo del TCP/IP se describe en un documento conocido como RFC (Request For Comment) y un nmero, mismos que se pueden hallar en la red para su anlisis o revisin, as por ejemplo el protocolo HTTP se describe en el RFC 2616, de igual forma existen documentos para cada uno de los dems protocolos. Actualmente millones de empresas de todo el mundo cuentan ya con sus aplicaciones WEB disponibles en la red Internet, ya sea solamente como medios publicitarios para darse a conocer o como verdaderos sistemas de Informacin que les permiten realizar operaciones con sus clientes distribuidos en todo el mundo, otras empresas estn en proceso de desarrollo de sus aplicaciones WEB; sin embargo a medida que la tecnologa va cambiando, cambian tambin las necesidades de las empresas, requiriendo por lo tanto que existan ms especialistas en esta materia para cubrir esta necesidad.

1.2 PROTOCOLO HTTP (PROTOCOLO DE TRANSFERENCIA DE HIPERTEXTO)Desde 1990, el protocolo HTTP es el protocolo ms utilizado en Internet. La versin 0.9 slo tena la finalidad de transferir los datos a travs de Internet (en particular pginas Web escritas en HTML). La versin 1.0 del protocolo permite la transferencia de mensajes con encabezados que describen el contenido de los mensajes mediante la codificacin MIME (Extensiones de Correo de Internet Multipropsito). En el RFC 2616 se especifica la versin 1.1. El propsito del protocolo HTTP es permitir la transferencia de archivos (principalmente, en formato HTML), entre un navegador (el cliente) y un servidor Web localizado mediante una cadena de caracteres denominada direccin URL.

9

COMUNICACIN ENTRE EL NAVEGADOR Y EL SERVIDOR WEB La comunicacin entre el navegador y el servidor se lleva a cabo en dos etapas:

Fig. 1.2.- Comunicacin entre el navegador y el servidor Web El navegador realiza una solicitud HTTP El servidor procesa la solicitud y despus enva una respuesta HTTP

En realidad, la comunicacin se realiza en ms etapas si se considera el procesamiento de la solicitud en el servidor. Dado que slo nos ocupamos del protocolo HTTP, no se explicar la parte del procesamiento en el servidor en esta seccin. Solicitud HTTP Una solicitud HTTP es un conjunto de lneas que el navegador enva al servidor. Incluye: Una lnea de solicitud: es una lnea que especifica el tipo de documento solicitado, el mtodo que se aplicar y la versin del protocolo utilizada. La lnea est formada por tres elementos que deben estar separados por un espacio: o el mtodo o la direccin URL o la versin del protocolo utilizada por el cliente (por lo general, HTTP/1.0) Los campos del encabezado de solicitud: es un conjunto de lneas opcionales que permiten aportar informacin adicional sobre la solicitud y/o el cliente (navegador, sistema operativo, etc.). Cada una de estas lneas est formada por un nombre que describe el tipo de encabezado, seguido de dos puntos (:) y el valor del encabezado.

10

El cuerpo de la solicitud: es un conjunto de lneas opcionales que deben estar separadas de las lneas precedentes por una lnea en blanco y, por ejemplo, permiten que se enven datos por un comando POST durante la transmisin de datos al servidor utilizando un formulario.

Por lo tanto, una solicitud HTTP posee la siguiente sintaxis ( significa retorno de carro y avance de lnea):MTODO VERSIN URL ENCABEZADO: Valor . . . ENCABEZADO: Valor Lnea en blanco CUERPO DE LA SOLICITUD

Para obtener un recurso con el URL http://www.itistmo.edu.mx/index.html 1. Se abre un socket con el host www. itistmo.edu.mx, puerto 80 que es el puerto por defecto para HTTP. 2. Se enva un mensaje en el estilo siguiente :GET /index.html HTTP/1.0 From: yo@miHost.com User-Agent: mozilla/5.0 [Lnea en blanco]

Comandos Comando Descripcin GET Solicita el recurso ubicado en la URL especificada HEAD Solicita el encabezado del recurso ubicado en la URL especificada POST Enva datos al programa ubicado en la URL especificada PUT Enva datos a la URL especificada DELETE Borra el recurso ubicado en la URL especificada

Encabezados Nombre encabezadoAccept

del Descripcin Tipo de contenido aceptado por el navegador (por ejemplo, texto/html). Consulte Tipos de MIME Juego de caracteres que el navegador espera Codificacin de datos que el navegador acepta Idioma que el navegador espera (de forma11

Accept-Charset Accept-Encoding Accept-Language

predeterminada, ingls)Authorization Content-Encoding Content-Language Content-Length Content-Type

Identificacin del navegador en el servidor Tipo de codificacin para el cuerpo de la solicitud Tipo de idioma en el cuerpo de la solicitud Extensin del cuerpo de la solicitud Tipo de contenido del cuerpo de la solicitud (por ejemplo, texto/html). Consulte Tipos de MIME Fecha en que comienza la transferencia de datos Utilizado por equipos intermediarios entre el navegador y el servidor Permite especificar la direccin de correo electrnico del cliente Permite especificar que debe enviarse el documento si ha sido modificado desde una fecha en particular Vnculo entre dos direcciones URL Direccin URL donde se origin la solicitud Direccin URL desde la cual se realiz la solicitud Cadena con informacin sobre el cliente, por ejemplo, el nombre y la versin del navegador y el sistema operativo

Date Forwarded

From

From

Link Orig-URL Referer User-Agent

RESPUESTA HTTP Una respuesta HTTP es un conjunto de lneas que el servidor enva al navegador. Est constituida por: Una lnea de estado: es una lnea que especifica la versin del protocolo utilizada y el estado de la solicitud en proceso mediante un texto explicativo y un cdigo. La lnea est compuesta por tres elementos que deben estar separados por un espacio: La lnea est formada por tres elementos que deben estar separados por un espacio: o la versin del protocolo utilizada o el cdigo de estado o el significado del cdigo

Los campos del encabezado de respuesta: es un conjunto de lneas opcionales que permiten aportar informacin adicional sobre la respuesta y/o el servidor. Cada una12

de estas lneas est formada por un nombre que describe el tipo de encabezado, seguido de dos puntos (:) y el valor del encabezado. El cuerpo de la respuesta: contiene el documento solicitado. Por lo tanto, una respuesta HTTP posee la siguiente sintaxisVERSIN-HTTP CDIGO EXPLICACIN ENCABEZADO: Valor . . . ENCABEZADO: Valor Lnea en blanco CUERPO DE LA RESPUESTA A continuacin se encuentra un ejemplo de una respuesta HTTP: HTTP/1.0 200 OK Date: Fri, 05 Dec 2008 23:59:59 GMT Content-Type: text/html Content-Length: 1221 Instituto Tecnolgico del Istmo (Contenido) . . .

Al recibirse la respuesta, el servidor cierra la comunicacin. Encabezados de respuesta Nombre del Descripcin encabezado Content-Encoding Tipo de codificacin para el cuerpo de la respuesta Content-Language Tipo de idioma en el cuerpo de la respuesta Content-Length Extensin del cuerpo de la respuesta Content-Type Tipo de contenido del cuerpo de la respuesta (por ejemplo, texto/html). Date Fecha en que comienza la transferencia de datos Expires Fecha lmite de uso de los datos Forwarded Utilizado por equipos intermediarios entre el navegador y el servidor Location Redireccionamiento a una nueva direccin URL asociada con el documento Server Caractersticas del servidor que envi la respuesta Los cdigos de respuesta

13

Son los cdigos que se ven cuando el navegador no puede mostrar la pgina solicitada. El cdigo de respuesta est formado por tres dgitos: el primero indica el estado y los dos siguientes explican la naturaleza exacta del error. Cdigo Mensaje10x 20x 200 201 Mensaje de informacin xito OK CREATED

Descripcin Estos cdigos no se utilizan en la versin 1.0 del protocolo Estos cdigos indican la correcta ejecucin de la transaccin La solicitud se llev a cabo de manera correcta Sigue a un comando POST e indica el xito, la parte restante del cuerpo indica la direccin URL donde se ubicar el documento creado recientemente. La solicitud ha sido aceptada, pero el procedimiento que sigue no se ha llevado a cabo Cuando se recibe este cdigo en respuesta a un comando de GET indica que la respuesta no est completa. El servidor ha recibido la solicitud, pero no hay informacin de respuesta El servidor le indica al navegador que borre el contenido en los campos de un formulario Es una respuesta a una solicitud que consiste en el encabezado range. El servidor debe indicar el encabezado content-Range Estos cdigos indican que el recurso ya no se encuentra en la ubicacin especificada Los datos solicitados han sido transferidos a una nueva direccin Los datos solicitados se encuentran en una nueva direccin URL, pero, no obstante, pueden haber sido trasladados Significa que el cliente debe intentarlo con una nueva direccin; es preferible que intente con otro mtodo en vez de GET Si el cliente llev a cabo un comando GET condicional (con la solicitud relativa a si el documento ha sido modificado desde la ltima vez) y el documento no ha sido modificado, este cdigo se enva como respuesta. Estos cdigos indican que la solicitud es incorrecta La sintaxis de la solicitud se encuentra formulada de manera errnea o es imposible de responder Los parmetros del mensaje aportan las especificaciones de formularios de autorizacin que se admiten. El cliente debe reformular la solicitud con los datos de autorizacin correctos El cliente debe reformular la solicitud con los datos de14

202 203 204 205 206

ACCEPTED PARTIAL INFORMATION NO RESPONSE RESET CONTENT PARTIAL CONTENT Redireccin MOVED FOUND

30x 301 302

303

METHOD

304

NOT MODIFIED

40x 400 401

Error debido al cliente BAD REQUEST UNAUTHORIZED

402

PAYMENT REQUIRED

403 404

FORBIDDEN NOT FOUND

50x 500

Error debido al servidor INTERNAL ERROR

501 502

NOT IMPLEMENTED BAD GATEWAY

503

SERVICE UNAVAILABLE

504

GATEWAY TIMEOUT

pago correctos El acceso al recurso simplemente se deniega Un clsico. El servidor no hall nada en la direccin especificada. Se ha abandonado sin dejar una direccin para redireccionar... :) Estos cdigos indican que existe un error interno en el servidor El servidor encontr una condicin inesperada que le impide seguir con la solicitud (una de esas cosas que les suceden a los servidores...) El servidor no admite el servicio solicitado (no puede saberlo todo...) El servidor que acta como una puerta de enlace o proxy ha recibido una respuesta no vlida del servidor al que intenta acceder El servidor no puede responder en ese momento debido a que se encuentra congestionado (todas las lneas de comunicacin se encuentran congestionadas, intntelo de nuevo ms adelante) La respuesta del servidor ha llevado demasiado tiempo en relacin al tiempo de espera que la puerta de enlace poda admitir (excedi el tiempo asignado...)

1.2.1 ARQUITECTURA DEL WWWLa arquitectura de una aplicacin Web dinmica, consta de tres elementos principales que son: un cliente Web, un Servidor Web y un servidor de base de datos, si se tratar de una aplicacin Web esttica se elimira el servidor de base de datos, de tal manera que el cliente Web realiza las peticiones al servidor y este responde el mensaje en formato HTML solamente. Cuando una aplicacin Web es dinmico, el servidor Web no es capaz de respondor por si solo las peticiones del cliente Web, auxiliandose para ello del servidor de base de datos, atravez un motor de base de datos que sirve como interfaz entre ambos, el motor se encarga de traducir el lenguaje utilizado durante la programacin Web dinamica, como pueden ser PHP, JSP, ASP al lenguaje del servidor de base de datos que se este utilizando, as se puede utilizar PHP o cualquiera de los otros lenguajes para acceder y manipular una base de datos de MySQL, Microsoft SQL server, Microsoft Acces, o cualquier otra. Por supuesto dependiendo del lenguaje utilizado para el acceso a la base de datos ser el motor que se debe usar, existiendo un motor por cada lenguaje de programacin, mismo que deber instalarse y configurarse para operar de manera coordinada con el servidor Web y el servidor de base de datos. En el caso de una aplicacin Web dinmica, el cliente realiza la peticin al servidor, el servidor utilizando el motor de base de datos accese a la base de datos, quien responde y entrega los resultados al servidor Web, finalmente el servidor Web responde al cliente Web en formato HTML. Se puede notar que ya sea que la aplicacin Web sea esttica o dinmica el servidor Web siempre entregar al cliente15

respuestas en formato HTML, de esta forma el cliente nunca recibir respuesta en el lenguaje de programacin Web dinmica. Esto sirve como un mecanismo de seguridad para evitar que el usuario del cliente Web pueda ver los detalles de implementacin ejecutados en el servidor Web utilizando el modor de base de datos.

Fig. 1.3.- Arquitectura del www

1.2.2 URLs.URL significa Uniform Resource Locator, es decir, localizador uniforme de recurso. Es una secuencia de caracteres, de acuerdo a un formato estndar, que se usa para nombrar recursos, como documentos e imgenes en Internet, para su localizacin. El URL es la cadena de caracteres con la cual se asigna una direccin nica a cada uno de los recursos de informacin disponibles en la Internet. Existe un URL nico para cada pgina de cada uno de los documentos de la World Wide Web, Una URL indica tanto una direccin de Internet como el servicio que se espera ofrezca el servidor al que corresponde la direccin. Tiene el siguiente formato:

servicio://mquina:puerto/ruta/archivo@usuario

Donde el servicio podr ser uno de los siguientes: http

16

Es el servicio invocado para transmitir pginas Web y el que se usar normalmente en los enlaces. https Es una innovacin sobre el anterior, que permite acceder a servidores (generalmente comerciales) que ofrecen el uso de tcnicas de encriptacin para proteger los datos que se intercambien con l de terceras personas. ftp Permite trasmitir archivos desde servidores de ftp annimo. Si no se le pide un archivo sino un directorio, en general el navegador se encargar de mostrar el contenido del mismo para que se pueda escoger el archivo cmodamente. Utilizando la @ se puede acceder a servidores privados. mailto Para poder mandar un mensaje. Por ejemplo, mailto:gastondv@hotmail.com me enviara un mensaje. news Para poder acceder a foros de discusin (mal traducidos a veces como grupos de noticias). Se indica el servidor y el grupo. Por ejemplo news://news.ibernet.es/es.comp.demos se conectara con el foro es.comp.demos en el servidor nacional de Telefnica. telnet No es implementado generalmente por los navegadores, que suelen invocar un programa externo. Permite conectarse con otras computadoras externas y entrar a ellos como si la computadora local fuese una terminal del mismo. La direccin de la mquina puede ser, o bien la direccin IP compuesto por una serie de cuatro nmeros entre 0 y 255 (148.208.237.1) o bien algo ms fcil de recordar cmo es una serie de palabras separadas por puntos (www.itistmo.edu.mx). El puerto es un nmero que identifica al servicio generalmente no se indica, ya que el servicio predetermina uno, conocido como puerto por defecto. La ruta es una serie de directorios separados por el smbolo /. Existe otro formato de URL. Cuando se accede a un archivo situado en la misma mquina que la pgina Web que se est creando, puede utilizarse este formato: la URL

ruta_relativa/archivoEn la ruta relativa se puede utilizar los dos puntos (..) para acceder al directorio padre o comenzar con la barra diagonal (/) para acceder a una ruta absoluta dentro de la misma computadora.

17

Diferenciacin entre maysculas/minsculas De acuerdo al estndar actual, no se diferencian maysculas y minsculas, y cuando se normalizan durante el procesamiento, deben estar en minsculas. Se debe asumir que en otros componentes s hay diferenciacin. Sin embargo, en la prctica, esta diferenciacin es dependiente del servidor Web y del sistema operativo del sistema que albergue al servidor, como en el caso de Windows que no diferenca entre maysculas y minsculas, sin embargo los sistemas operativos basados en Unix s.

1.2.3 MTODOS HTTP. PERSISTENCIA EN HTTP COOKIES.COOKIES Las cookies constituyen una potente herramienta empleada por los servidores Web para almacenar y recuperar informacin acerca de sus visitantes. Dado que el HTTP es un protocolo sin estados (no almacena el estado de la sesin entre peticiones sucesivas), las cookies proporcionan una manera de conservar informacin entre peticiones del cliente, extendiendo significativamente las capacidades de las aplicaciones cliente/servidor basadas en la Web. Mediante el uso de cookies se permite al servidor Web recordar algunos datos concernientes al usuario, como sus preferencias para la visualizacin de las pginas de ese servidor, nombre y contrasea, productos que ms le interesan, personalizacin, es la palabra clave. Una cookie no es ms que un archivo de texto que algunos servidores piden al navegador que escriba en el disco duro, con informacin acerca de lo que se ha estado haciendo en las pginas. 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 informacin y quien se la devolver posteriormente al servidor cuando ste la solicite. Adems, las cookies poseen una fecha de caducidad, que puede oscilar desde el tiempo que dure la sesin hasta una fecha futura especificada, a partir de la cual dejan de ser operativas. Algunos ejemplos que se pueden revisar y podrn servir para aclarar la funcin de las cookies son los siguientes archivos: Cookies Cookies Cookies Cookies Contador de visitas.htm - Bienvenida personalizada.htm - ltima visita.htm - Personalizacin de colores.htm

18

1.3 INTRODUCCIN AL HTML. LENGUAJE DE DESPLIEGUE DEL WEBQU ES HTML? HTML es el lenguaje con el que se "escriben" la mayora de pginas Web. Los diseadores utilizan el lenguaje HTML para crear sus pginas Web, los programas que utilizan los diseadores generan pginas escritas en HTML y los navegadores que utilizamos los usuarios muestran las pginas Web despus de leer su contenido HTML. Aunque HTML es un lenguaje que utilizan las computadoras y los programas de diseo, es muy fcil de aprender y escribir por parte de las personas. En realidad, HTML son las siglas de HyperText Markup Language y significa Lenguaje de Marcacin de Hipertexto. El lenguaje HTML es un estndar reconocido en todo el mundo y cuyas normas define un organismo sin nimo de lucro llamado World Wide Web Consortium (http://www.w3.org/) , ms conocido como W3C. Como se trata de un estndar reconocido por todas las empresas relacionadas con el mundo de Internet, una misma pgina HTML se visualiza de forma muy similar en cualquier navegador de cualquier sistema operativo. El propio W3C define el lenguaje HTML como "un lenguaje reconocido universalmente y que permite publicar informacin de forma global". Desde su creacin, el lenguaje HTML ha pasado de ser un lenguaje utilizado exclusivamente para crear documentos electrnicos a ser un lenguaje que se utiliza en muchas aplicaciones electrnicas como buscadores, tiendas en lnea y banca electrnica. ESPECIFICACIN OFICIAL El organismo W3C elabora las normas que deben seguir los diseadores de pginas Web para crear las pginas HTML. Las normas oficiales estn escritas en ingls y se pueden consultar de forma gratuita en las siguientes direcciones: Especificacin oficial de HTML 4.01 (http://www.w3.org/TR/html401/) Revisin de HTML 5 http://dev.w3.org/html5/spec/Overview.html

1.3.1 HTML COMO UN TIPO SGML.SGML son las siglas de Standard Generalized Markup Language o "Lenguaje de Marcado Generalizado". Consiste en un sistema para la organizacin y etiquetado de19

documentos. La Organizacin Internacional de Estndares (ISO) normaliz este lenguaje en 1986. El lenguaje SGML sirve para especificar las reglas de etiquetado de documentos y no impone en s ningn conjunto de etiquetas en especial. El lenguaje HTML est definido en trminos del SGML. XML, es un estndar de creacin posterior (Extensible Markup Language) (lenguaje de marcas ampliable), es un metalenguaje extensible de etiquetas desarrollado tambin por el W3C. Es una simplificacin y adaptacin del SGML y permite definir la gramtica de lenguajes especficos (de la misma manera que HTML es a su vez un lenguaje definido por SGML). Por lo tanto XML no es realmente un lenguaje en particular, sino una manera de definir lenguajes para diferentes necesidades. Algunos de estos lenguajes que usan XML para su definicin son XHTML

Especificacin oficial de XHTML 1.0 (http://www.w3.org/TR/xhtml1/)

El estndar XHTML 1.0 incluye el 95% del estndar HTML 4.01, ya que slo aade pequeas mejoras y modificaciones menores. Afortunadamente, no es necesario leer las especificaciones y recomendaciones oficiales de HTML para aprender a disear pginas con HTML o XHTML. Las normas oficiales estn escritas con un lenguaje bastante formal y algunas secciones son difciles de comprender HTML y XHTML El lenguaje XHTML es muy similar al lenguaje HTML. De hecho, XHTML no es ms que una adaptacin de HTML al lenguaje XML. Tcnicamente, HTML es descendiente directo del lenguaje SGML, mientras que XHTML lo es del XML (que a su vez, tambin es descendiente de SGML).

20

Fig. 1.4.- Lenguajes descendientes de SGML Las pginas y documentos creados con XHTML son muy similares a las pginas y documentos HTML. Las discusiones sobre si HTML es mejor que XHTML o viceversa son recurrentes en el mbito de la creacin de contenidos Web, aunque no existe una conclusin ampliamente aceptada.

1.3.2 ELEMENTOS DEL LENGUAJE HTML.HTML es un lenguaje de etiquetas (tambin llamado lenguaje de marcado) y las pginas Web habituales estn formadas por cientos o miles de pares de etiquetas. De hecho, las letras "ML" de la sigla HTML significan "markup language", que es como se denominan en ingls a los lenguajes de marcado. La principal ventaja de los lenguajes de etiquetas es que son muy sencillos de leer y escribir por parte de las personas y de los sistemas electrnicos. La principal desventaja es que pueden aumentar mucho el tamao del documento, por lo que en general se utilizan etiquetas con nombres muy cortos. En el siguiente ejemplo se muestra la estructura general de un programa HTML. Libro de Programacin Web BIENVENIDOS A PROGRAMACIN WEB

En primer lugar se puede observar que en todo el programa se encuentran un conjunto de etiquetas, cuya sintaxis general es:

... Hay ocasiones en que no es necesario cerrar la etiqueta, En primer lugar se encuentran las siguientes etiquetas:

Estas etiquetas indican el inicio y el final del programa en general.

21

Un documento HTML tiene una estructura que lo separa en dos partes: cuerpo y cabecera. En la primera estar la pgina en s, mientras que en la segunda se incluyen algunas cosas que no se ven al principio pero que pueden llegar a ser muy importantes. Lo primero que hay que incluir en el cdigo es la cabecera.

Libro de programacin Web Dentro de la cabecera slo hay otra etiqueta. Es la nica imprescindible: el ttulo de la pgina. Es lo que se ve como ttulo de la ventana en los navegadores que lo permitan. Es como se conocer nuestra pgina en algunos buscadores y en la agenda de direcciones de los usuarios. Por tanto, parece importante pensarnos bien como llamarla.

EL CUERPO DEL DOCUMENTO Para indicar el cuerpo del documento se usa:Body >

La mayor parte del cdigo HTML reside entre las etiquetas de inicio y cierre del cuerpo del documento, es decir contendr una gran cantidad de etiquetas segn la funcin que se le pretenda dar a las pagina Web, como en este caso tan solo, se encuentran dos juegos de etiquetas ms, que muestra un mensaje con un tamao de encabezado grande.BIENVENIDOS A PROGRAMACIN WEB

Al finalizar aparece la etiqueta que muestra una lnea horizontal. La lnea horizontal carece de etiqueta de cierre. Esto es normal en etiquetas que no varan los atributos de un texto, sino que insertan un elemento.

FORMATEO BSICO Se pueden establecer varias categoras dentro de las etiquetas usadas para formatear el texto. Se pueden dividir en aquellas que sirven para cambiar prrafos enteros y las que son capaces de formatear tiras de caracteres dentro del prrafo.

22

Formato del prrafo Estas son las etiquetas ms importantes Etiqueta ... ...

...

... ...

Utilidad Resultado Sirve para delimitar un prrafo. Inserta una Soy un prrafo lnea en blanco antes del texto. Permite centrar todo el texto del prrafo. Normal Centrado Representa el texto encerrado en ella con un Estoy en paso fijo tipo de letra de paso fijo. Muy til a la hora de representar cdigo fuente. El parmetro WIDTH especifica el nmero mximo de caracteres en una lnea. Permite justificar el texto del prrafo a la izquierda izquierda (ALIGN=LEFT), derecha (RIGHT), centro al centro (CENTER) o a ambos mrgenes derecha (JUSTIFY) Para escribir direcciones (de esas donde vive Juan Prez Av. la gente, no electrnicas). Jurez No.30, Juchitan,Oax. Para citar un texto ajeno. Se suele implementar dejando mrgenes tanto a izquierda como a derecha, razn por la que se usa habitualmente.

Las 6 cabeceras El HTML nos ofrece seis etiquetas distintas para mostrar cabeceras. Son stas: Etiqueta ...

Resultado

Nivel 1Nivel 2Nivel 323

...

...

... ... ...

Nivel 4Nivel 5Nivel 6

Estas etiquetas se pueden definir como de formato de prrafo pero por su importancia se prefiere tratarlas aparte. No resulta recomendable utilizarlas para aumentar o disminuir el tamao del tipo de letra, ya que cada navegador los muestra de manera diferente. Se usan para dividir correctamente en secciones una pgina, tal y como se hace en un documento de texto normal.

Cambiando el tipo de letra Todas estas etiquetas permiten cambiar de una manera u otra el aspecto del tipo de letra que se est utilizando y se pueden utilizar con tiras de caracteres dentro de un prrafo. Etiqueta ... ... ... ... ... ... ... ... ... ...

Utilidad Pone el texto en negrita.

Resultado Texto en negrita Representa el texto en cursiva. Texto en cursiva Para subrayar algo. Texto subrayado Para tachar. Texto tachado Permite representar el texto en un tipo de letra Texto fijo de paso fijo. Letra superndice. E=mc2 Letra subndice. ai,j=bi,j+1 Incrementa el tamao del tipo de letra. GRANDE Soy pequeo Disminuye el tamao del tipo de letra. Hace parpadear el texto. Cuidado?

Otros elementos Otros elementos que no son texto ms sin embargo se pueden incorporar a una pgina son:

24

Etiqueta

Utilidad Resultado Inserta una barra horizontal. Salto de lnea. Hay un antes y un despus de saltar a otra lnea Comentarios. Esto se escribe y El siguiente ejemplo muestra el uso de algunas de las etiquetas de formato. Formato FORMATO DE LA PAGINA Instituto Tecnolgico del Istmo Este prrafo es muy sencillo. Por el momento no se que tendr, pero dentro de poco pondr aqu muchas cosas interesantes.

Instituto Tecnolgico del Istmo Este prrafo esta mejor (chispas). Por el momento no se que tendr, pero dentro de poco pondr aqu muchas cosas interesantes.

CONOCES ESTAS FORMULAS? A= PI*R 2
TiempoT=t1+t2+ ...+tn

MARCOS Un marco (o frame) es una ventana independiente dentro de la ventana general del navegador. Cada marco tendr sus bordes y sus propias barras de desplazamiento. As cada pgina se dividir en la prctica en varias pginas independientes. Para crearlos se necesita un documento HTML especfico, que se conoce como documento de definicin de marcos. En l se especifica el tamao y posicin de cada marco y el documento HTML que contendr.

Ejemplo:

25

Venta en lnea

Se puede observar que la cabecera de la pgina es similar a un documento normal, pero el habitual BODY es sustituido por un FRAMESET. En cada FRAMESET que exista se divide la ventana actual (sea la general o un marco) en varias ventanas definidas o por el parmetro COLS o por ROWS. En ste, separado por comas, se define el nmero de marcos y el tamao de cada uno. Dentro del se hacen dos cosas. Primero, definir cada uno de los marcos ponindoles un nombre y especificando qu archivo HTML le corresponde mediante la etiqueta .

Etiqueta Segn el estndar, esta etiqueta slo debera contener el nmero y tamao de cada marco, pero las extensiones de Netscape y Explorer al estndar obligan a estudiar un par de parmetros ms. En general, los navegadores dibujan un borde de separacin entre los marcos. Si se desea eliminarlo se puede hacer de dos maneras: en las etiquetas de cada una de los marcos contiguos al borde a eliminar o incluyendo el parmetro FRAMEBORDER=0 en el . Cuando se elimina el borde, se ve cmo el navegador deja an un hueco entre marcos. Este se elimina aadiendo los parmetros FRAMESPACING=0 BORDER=0. Las propiedades COLS y ROWS se les asigna una lista de tamaos separados por comas. Se admiten los siguientes formatos de tamao:

Con porcentajes: El tamao de un marco se define como un porcentaje del espacio total disponible. Absolutos: El marco correspondiente tendr el tamao especificado en pixeles. Sobre el espacio sobrante: Si se usa un asterisco (*) se indica que todo el espacio sobrante ser para ese marco.

Por ejemplo, el siguiente cdigo es una muestra de cmo combinar el formato en porcentaje y el espacio restante.26

En este caso el primer marco ocupar el 30%, del espacio vertical de la pantalla y el segundo marco el especio restante (70%).

Etiqueta Esta etiqueta define tan slo las caractersticas de un marco determinado, no de un conjunto de ellos. Estos son los parmetros que admite:

ParmetroNAME SRC SCROLLING

NORESIZE FRAMEBORDER

MARGINWIDTH MARGINHEIGHT

Utilidad Asigna un nombre a un marco para identificarlo y referenciarlo despus. Indica la direccin del documento HTML que ocupar el marco. Decide si se colocan o no barras de desplazamiento al marco. Su valor por defecto es AUTO, que deja al navegador la decisin. Las otras opciones son YES y NO. Si se especifica el usuario no podr cambiar de tamao el marco. Al igual que su homnimo en la etiqueta , si se iguala a cero se eliminar el borde con todos los marcos contiguos que tengan tambin este valor a cero. Permite cambiar los mrgenes horizontales dentro de un marco. Se representa en pixels. Igual al anterior pero con mrgenes verticales.

1.3.3 TABLAS EN HTMLLas tablas son una de las herramientas ms tiles que se disponen en HTML, ya que van a permitir en cierto modo "organizar" el documento, ayudando a situar dentro del mismo los diferentes elementos que lo componen, siendo esta la nica forma coherente que haba antes de la introduccin de las Hojas de Estilo y de las etiquetas. Es por esta facilidad a la hora de organizar con tablas nuestras pginas, el que el 99% de las que veamos en Internet las usen, aunque muchas veces no las veamos directamente porque estn "ocultas". ESTRUCTURA DE UNA TABLA Las tablas estn formadas por filas, columnas y celdas. Cada espacio horizontal continuado es una fila y cada espacio vertical continuado es una columna,27

definindose una celda como el espacio formado por la interseccin de una fila y una columna. columna 1 columna 2 columna 3 fila 1 fila 2 celda(2,1) celda(2,2) celda(2,3) Lo primero que se tiene que hacer para introducir una tabla es decirle al navegador dnde empieza y dnde acaba esta; esto se consigue mediante la etiqueta de inicio y su correspondiente de cierre . Seguidamente indicarle cuantas filas se va a tener en la tabla, cosa que se hace con las etiqueta de inicio de fila y su correspondiente de cierre de fila , por lo que se debe insertar una pareja de etiquetas por cada fila que tenga la tabla. Por ltimo, dentro de cada fila indicar cuantas celdas va a haber, que inicialmente deben corresponderse con el nmero de columnas que se desea tenga la tabla. Esto se consigue mediante las parejas de etiquetas y . De esta forma, y siguiendo con la tabla inicial de Ejemplo, el esquema de etiquetas sera el siguiente: celda(1,1) celda(1,2) celda(1,2)

... ... ... ... ... ...

Este es el esquema general de toda tabla simple, que traducido a cdigo HTML quedara de la forma:

celda(1,1) celda(1,2) celda(1,3)

celda(2,1) celda(2,2)

28

celda(2,3)

La cantidad de celdas debe ser el mismo en cada uno de las filas, para que la tabla tenga la misma cantidad de columnas. Se debe definir la cantidad de columnas que va a tener la tabla mediante el nmero de celdas que se defina en la primera fila. Adems de estas etiquetas bsicas existen otras que van a permitir adaptar la tabla a ciertas necesidades. Y cada etiqueta posee adems varios atributos, que van a modificar la forma en que se comportan.

ETIQUETA Y SUS ATRIBUTOS. Las tablas tienen sus propios atributos o propiedades que se colocaran dentro de su etiqueta. Entre los ms importantes estn:align background bgcolor border bordercolor cellpadding cellspacing height width

Alinea horizontalmente la tabla con respecto a su entorno. Permite colocar un fondo para la tabla a partir de un enlace a una imagen. Da color de fondo a la tabla. Define el nmero de pxel del borde principal. Define el color del borde. Define, en pxel, el espacio entre los bordes de la celda y el contenido de la misma. Define el espacio entre los bordes (en pxel). Define la altura de la tabla en pxel o porcentaje. Define la anchura de la tabla en pxel o porcentaje.

Algunos atributos que permiten modificar una celda en concreto o toda una fila:align valign bgcolor bordercolor

Justifica el texto de la celda del mismo modo que si fuese el de un prrafo. Podemos elegir si queremos que el texto aparezca arriba (top), en el centro (middle) o abajo (bottom) de la celda. Da color a la celda o lnea elegida. Define el color del borde.

Otros atributos que pueden ser nicamente asignados a una celda y no al conjunto de celdas de una lnea son:background height width

Permite colocar un fondo para la celda a partir de un enlace a una imagen. Define la altura de la celda en pixels o porcentaje. Define la anchura de la celda en pixels o porcentaje.29

colspan rowspan

Expande una celda horizontalmente. Expande una celda verticalmente.

Algunos de los atributos usan la siguiente sintaxis:

Atributo=ValorDonde el Valor puede venir expresado en pxeles en tanto por ciento (%). Si toma un valor en pxeles ser un valor absoluto, mientras que si toma un valor en % ser relativa al tamao de pantalla del elemento que lo contenga. As por ejemplo, si se desea que la tabla tenga un tamao absoluto de 400 pixeles se especificara el atributo a WIDTH="400" mientras que si se desea que la tabla ocupe toda la ventana del navegador, bastar con especificar el atributo a WIDTH="100%". Usar la notacin absoluta provocar que el tamao de la tabla en la pantalla del navegador se vea de forma distinta segn la resolucin que se fije en la configuracin, as por ejemplo: Una tabla con ancho de 400 pixeles en una pantalla con resolucin de 800 *600 pixeles ocupar hasta la mitad de la misma, mientras que con una resolucin de 1280*800 pixeles, la tabla solo ocupar un poco menos de una tercera parte de la pantalla. Para evitar que una tabla se vea de tamao distinto segn la configuracin de la pantalla es mejor usar valores en %.

Ejemplo: Tablas REGISTRO DE CLIENTES NOMBRE DIRECCION

30

El ejemplo muestra una tabla como el siguiente: REGISTRO DE CLIENTES NOMBRE DIRECCIN Se trata de una tabla de 3 filas por 2 columnas, con atributos ancho del 30% del tamao de la pantalla, borde de tamao 1, y centrado; la primera fila tiene combinada sus 2 celdas horizontalmente, y el atributo color est fijado en verde, contiene el texto REGISTRO DE CLIENTES, la segunda fila, su primera celda contiene el texto NOMBRE y la segunda est vaca con sus atributo color fijado en amarillo y del 60% del ancho de la tabla; la tercera fila, su primera celda contiene el texto DIRECCIN y la segunda est vaca y tambin con su atributo color en amarillo, se puede observar que ya no es necesario definir el ancho de la celda, pues se adapta al ancho fijado en la segunda celda de la segunda fila.

1.3.4 FORMULARIOSLos formularios son el interface mediante el cual los usuarios interactan con las aplicaciones Web. Los datos que los usuarios introducen son procesados o enviados a otras pginas que regularmente son lenguajes embebidos en el propio HTML, tales como PHP, JSP, ASP.NET

Todos los elementos de un formulario deben estar encerrados entre y . Como parmetros cabe destacar los siguientes:action

method

name

Define el URL que deber gestionar el formulario. Puede ser un archivo una direccin de correo (precedida del inevitable mailto:, en cuyo caso se deber aadir el parmetro ENCTYPE="text/plain" para que lo que se reciba resulte legible. Define la manera en que se enviar el formulario al servidor. Existen solamente dos mtodos POST y GET: POST.- Es el mejor mtodo puesto que enva la solicitud al servidor en forma segura de tal manera que el usuario no puede ver los datos enviados. GET.- Los datos enviados al servidor quedan registrados en el URL, de tal manera que el usuario los puede ver, un signo de interrogacin ? separa el URL del resto de datos. Identifica el nombre de la variable de formulario31

enctype

Le indica al servidor el tipo de informacin que se va a enviar, si no se indica, el servidor asume que solo recibir informacin de formulario convencional, destaca tambin: "multipart/form-data" Indica al servidor que se recibir un archivo adems de la informacin habitual del formulario.

Ejemplo:

Este formulario se identifica con el nombre de registro, los datos que en l se obtengan sern enviados al archivo Web 'Autenticacion.php usando el mtodopost

Los elementos que se deseen incluir en el formulario debern hallarse entre las etiquetas y

ELEMENTOS DE UN FORMULARIO Campos de texto Botn de opcin Lista/Men Botn Casilla de verificacin Campo oculto Botones mejorados Campo de Imagen Etiquetas Campo de archivo Algunos de estos elementos son usados con ms frecuencia que otros, sin embargo a continuacin se explicarn cada uno de ellos para ms adelante mostrar un ejemplo en conjunto. CAMPOS DE TEXTO Existen tres maneras de conseguir que el usuario introduzca texto en el formulario. Las dos primeras se obtienen por medio de la etiqueta :

32

El primero dibujar un cuadro de texto donde permitir escribir un texto (de una sola lnea). El segundo es equivalente, pero no se ver lo que se teclee en l, ms bien los caracteres se remplazar por un carcter * por ello se conoce como Cuadro de texto para contrasea. Estos son los atributos para modificarlos: Parmetro Utilidad SIZE VALUE Tamao de la caja de texto. Texto por defecto que contendr la caja. MAXLENGTH Nmero mximo de caracteres que puede introducir el usuario.

Por otro lado, puede que se necesite que el usuario pueda introducir ms de una lnea. En ese caso se utilizar el componente conocido como rea de texto, para ello se usa la siguiente etiqueta: Por defecto Por defeto

Lo que se incluya entre las dos etiquetas ser lo que se muestre por defecto dentro de la caja. Admite estos parmetros: Parmetro Utilidad ROWS COLS Filas que ocupar la caja de texto. Columnas que ocupar la caja de texto.

OPCIONES Si lo que se desea es que el usuario decida entre varias opciones se podr hacer de dos modos. El primero es asociando a varios botones de opciones un mismo NAME, como en este caso name="Sexo"Hombre Mujer

Hombre Mujer

As segn la seleccin que realice el usuario, ser el valor que tomar la variable. Acepta los siguientes parmetros: Parmetro Utilidad VALUE CHECKED Este es el valor que asignar a la variable. Si se indica en una de las opciones esta ser la que est activada por defecto.

33

La segunda posibilidad que ocupa menos cdigo es usando una Lista/Men. Para emplearlas se debe utilizar dos etiquetas, SELECT y OPTION: Netscape Explorer Opera Lynx Otros Netscape

Los parmetros que admite SELECT son las siguientes: Parmetro Utilidad SIZE El nmero de opciones que se podr ver. Si es mayor que 1 se ver una lista de seleccin y, si no, un men desplegable.

MULTIPLE Si se indica se podr elegir ms de una opcin. Y OPTION estos: Parmetro Utilidad VALUE Este es el valor que asignar a la variable. SELECTED Si se indica en una de las opciones esta ser la seleccionada por defecto.

BOTONES DEL FORMULARIO Existen dos: uno que se utiliza para mandar el formulario y otro que sirve para limpiar todo lo que haya rellenado el usuario: AceptarLimpiar

Con la propiedad VALUE se fija el texto del botn CASILLA DE VERIFICACIN Puede que se necesite que el usuario sencillamente confirme o niegue algo. Se podr conseguir por medio de Casillas de Verificacin:PROMOCIN

PROMOCIN

Si se desea que el control est activado por defecto se le aade CHECKED. El formulario asignar a la variable name el valor on u off a menos que la propiedad value se le asigne un valor distinto que tomar solo cuando este activado. CAMPO OCULTO Existe la posibilidad de que se necesite que, en el formulario, se tenga alguna variable con un valor previamente asignado para envirselo a otra pgina. Por

34

ejemplo, se podra asignar en forma oculta la clave de un producto a una variable para verificar este valor en la pgina receptora.

CONTROLES AVANZADOS PARA FORMULARIOS El estndar HTML 4.0 ha trado varias mejoras a los formularios, que acercan los mismos a las caractersticas que tienen en lenguajes como Java o Visual Basic, C++ Builder, etc.

BOTONES MEJORADOS Una de las cosas que ms han mejorado son los botones. Ahora disponen de una etiqueta propia, de modo que se pueda encerrar con ella todo tipo de elementos HTML, como grficos o, incluso, tablas enteras. La etiqueta en cuestin se llama BUTTON: Soy una tabla que est en un botn Soy una tabla que est en un botn

Los parmetros de dicha etiqueta son los normales, SUBMIT (por defecto), RESET y BUTTON, NAME y VALUE.

TYPE,

que podr tomar los valores

Se puede declarar un grfico como un elemento ms de entrada. Como un nuevo tipo dentro del elemento INPUT, este elemento de formulario se conoce como Campo de Imagen Paginas con Estilos sin CSS Pagina sin CSS Los estilos en una pgina le dan la presentacin a la misma .

El ejemplo anterior utiliza la etiqueta con sus atributos color, face y size para definir el color, la tipografa y el tamao del texto de cada elemento del documento. El principal problema de esta forma de definir el aspecto de los elementos se puede ver claramente con el siguiente ejemplo: si la pgina tuviera 50 elementos diferentes, habra que insertar 50 etiquetas . Si el sitio Web entero se compone de 10.000 pginas diferentes, habra que definir 500.000 etiquetas . Como cada etiqueta tiene 3 atributos, habra que definir 1.5 millones de atributos. Por otra parte, el diseo de los sitios Web est en constante evolucin y es habitual modificar cada cierto tiempo los colores principales de las pginas o la tipografa utilizada para el texto. Si se emplea la etiqueta , habra que modificar el valor de 1.5 millones de atributos para modificar el diseo general del sitio Web. HOJA DE ESTILO INTERNA La solucin que propone CSS es mucho mejor, como se puede ver en el siguiente ejemplo: Paginas con Estilos utilazando CSS h1 { color: red; font-family: Arial; font-size: large; } p { color: gray; font-family: Verdana; font-size: medium; }

40

Pgina con CSS Interna Los estilos en una pgina le dan la presentacin a la misma

CSS permite separar los contenidos de la pgina y su aspecto o presentacin. En el ejemplo anterior, dentro de la propia pgina HTML se reserva una zona en la que se incluye toda la informacin relacionada con los estilos de la pgina. Utilizando CSS, en esa zona reservada se indica que todas las etiquetas de la pgina se deben ver de color rojo, con un tipo de letra Arial y con un tamao de letra grande. Adems, las etiquetas de la pgina se deben ver de color gris, con un tipo de letra Verdana y con un tamao de letra medio. Definiendo los estilos de esta forma, no importa el nmero de elementos que existan en la pgina, ya que todos tendrn el mismo aspecto establecido mediante CSS. Como se ver a continuacin, esta forma de trabajar con CSS no es ideal, ya que si el sitio Web dispone de 10.000 pginas, habra que definir 10.000 veces el mismo estilo CSS.

HOJA DE ESTILO EXTERNA Es una hoja de estilo que est almacenada en un archivo diferente al archivo donde se almacena el cdigo HTML de la pgina Web. Esta es la manera de programar ms potente, porque separa completamente las reglas de formateo para la pgina HTML de la estructura bsica de la pgina. En este caso, todos los estilos CSS se incluyen en un archivo de tipo CSS que las pginas HTML enlazan mediante la etiqueta . Un archivo de tipo CSS no es ms que un archivo simple de texto cuya extensin es .css Se pueden crear todos los archivos CSS que sean necesarios y cada pgina HTML puede enlazar tantos archivos CSS como necesite. En el siguiente ejemplo, se crea un archivo de texto, se cambia su nombre a estilos.css y se incluye el siguiente contenido:h1 { color: red; font-family: Arial; font-size: large; } p { color: gray; font-family: Verdana; font-size: medium; }

A continuacin, en la pgina HTML se utiliza la etiqueta para enlazar el archivo CSS externo que tiene los estilos que va a utilizar la pgina: Paginas con Estilos utilizando Externa CSS

41

Pagina con CSS Externa Los estilos en una pgina le dan la presentacin a la misma

Normalmente, la etiqueta incluye cuatro atributos cuando se enlaza un archivo CSS: rel: indica el tipo de relacin que tiene el recurso enlazado (en este caso, el archivo CSS) y la pgina HTML. Para los archivos CSS, siempre se utiliza el valor stylesheet type: indica el tipo de recurso enlazado. Sus valores estn estandarizados y para los archivos CSS su valor siempre es text/css href: indica la URL del archivo CSS que contiene los estilos. La URL indicada puede ser relativa o absoluta y puede apuntar a un recurso interno o externo al sitio Web. media: indica el medio en el que se van a aplicar los estilos del archivo CSS. De todas las formas de incluir CSS en las pginas HTML, esta es la ms utilizada con mucha diferencia. La principal ventaja es que se puede incluir un mismo archivo CSS en multitud de pginas HTML, por lo que se garantiza la aplicacin homognea de los mismos estilos a todas las pginas que forman un sitio Web. Con este mtodo, el mantenimiento del sitio Web se simplifica al mximo, ya que un solo cambio en un solo archivo CSS permite variar de forma instantnea los estilos de todas las pginas HTML que enlazan ese archivo. HOJA DE ESTILO EN LINEA El ltimo mtodo para incluir estilos CSS en documentos HTML es el peor y el menos utilizado, ya que tiene los mismos problemas del ejemplo sin css.htm. Paginas con CSS en lnea Pagina con CSS en lnea Los estilos en una pgina le dan la presentacin a la misma

Esta forma de incluir CSS directamente en los elementos HTML solamente se utiliza en determinadas situaciones en las que se debe incluir un estilo muy especfico para un solo elemento concreto. CSS define una serie de trminos que permiten describir cada una de las partes que componen los estilos CSS. La siguiente figura muestra las partes que forman un estilo CSS muy bsico:

42

Fig. 1.5.- Partes de una regla bsica CSS Un archivo CSS puede contener infinitas reglas CSS, cada regla puede contener infinitos selectores y cada declaracin puede estar formada por un nmero infinito de pares propiedad/valor. MEDIOS CSS Una de las caractersticas ms importantes de las hojas de estilos CSS es que permiten definir diferentes estilos para diferentes medios o dispositivos: pantallas, impresoras, mviles, proyectores, etc. Adems, CSS define algunas propiedades especficamente para determinados medios, como por ejemplo la paginacin y los saltos de pgina para los medios impresos o el volumen y tipo de voz para los medios de audio. La siguiente tabla muestra el nombre que CSS utiliza para identificar cada medio y su descripcin:Medioall braille embosed handheld print projection screen speech tty tv

Descripcin Todos los medios definidos Dispositivos tctiles que emplean el sistema braille Impresoras braille Dispositivos de mano: mviles, PDA, etc. Impresoras y navegadores en el modo "Vista Previa para Imprimir" Proyectores y dispositivos para presentaciones Pantallas de computadora Sintetizadores para navegadores de voz utilizados por personas discapacitadas Dispositivos textuales limitados como teletipos y terminales de texto Televisores y dispositivos con resolucin baja

Los medios ms utilizados actualmente son screen (para definir el aspecto de la pgina en pantalla) y print (para definir el aspecto de la pgina cuando se imprime), seguidos de handheld (que define el aspecto de la pgina cuando se visualiza mediante un dispositivo mvil). Medios definidos con las reglas de tipo @mediaLas reglas @media son un tipo especial de regla CSS que permiten indicar de forma directa el medio o medios en los que se aplicarn los estilos incluidos en la regla. Para especificar el medio en el que se aplican los estilos, se incluye su nombre despus de@media.

Si los estilos se aplican a varios medios, se incluyen los nombres de todos los medios separados por comas. A continuacin se muestra un ejemplo sencillo:@media print {

43

body { font-size: 10pt } } @media screen { body { font-size: 13px } } @media screen, print { body { line-height: 1.2 } }

El ejemplo anterior establece que el tamao de letra de la pgina cuando se visualiza en una pantalla debe ser 13 pxel. Sin embargo, cuando se imprimen los contenidos de la pgina, su tamao de letra debe ser de 10 puntos. Por ltimo, tanto cuando la pgina se visualiza en una pantalla como cuando se imprimen sus contenidos, el interlineado del texto debe ser de 1.2 veces el tamao de letra del texto. SELECTORES BSICOS Selector universal Se utiliza para seleccionar todos los elementos de la pgina. El siguiente ejemplo elimina el margen y el relleno de todos los elementos HTML:* { margin: 0; padding: 0; }

El selector universal se indica mediante un asterisco (*). A pesar de su sencillez, no se utiliza habitualmente, ya que es difcil que un mismo estilo se pueda aplicar a todos los elementos de una pgina. No obstante, s que se suele combinar con otros selectores. Selector de tipo o etiqueta Selecciona todos los elementos de la pgina cuya etiqueta HTML coincide con el valor del selector. El siguiente ejemplo selecciona todos los prrafos de la pgina:p { ... }

El siguiente ejemplo aplica diferentes estilos a los titulares y a los prrafos de una pgina HTML:h1 { color: red; } h2 { color: blue; } p { color: black; }

Si se quiere aplicar los mismos estilos a dos etiquetas diferentes, se pueden encadenar los selectores. En el siguiente ejemplo, los ttulos de seccin h1, h2 y h3 comparten los mismos estilos:h1, h2, h3 {

44

color: #8A8E27; font-weight: normal; font-family: Arial, Helvetica, sans-serif; }

Es importante entonces conocer algunas propiedades que pueden afectar a las etiquetas HTML, para as utilizarlos en las hojas de Estilo en cascada, mismos que se muestran en base a la siguiente clasificacin:

PROPIEDADES DE BLOQUE Definen cosas como los mrgenes o la colocacin de bloques de contenido HTML: Propiedad Descripcin Posibles valores margin-top, margin- Distancia mnima entre un bloque y Tamao, right, margin-bottom, los dems elementos. Tanto margin porcentaje o auto. margin-left, defecto es margin: top right como margins() se utilizan para Por bottom left cambiar todos estos atributos a la vez. cero. padding-top, padding- Distancia entre el borde y el Tamao, right, padding-bottom, contenido de un bloque. porcentaje o auto. padding-left, Por defecto es padding: top right bottom left cero. border-top-width, Anchura del borde de un bloque. numricoborder-right-width, border-bottom-width, border-left-width, border-width: top right bottom left border-style

Estilo del borde de un bloque.

none, solid

border-color width, height

Color del borde de un bloque. Tamao de un bloque. Su mayor utilidad est en su aplicacin a un elemento grfico. Justificacin del contenido de un bloque. Permiso para que otro elemento se pueda colocar a su izquierda o derecha.

float

clear

o 3D, por defecto ninguno (none). cualquier color Tamao, porcentaje o auto, automtico por defecto. left, right o none, por defecto ninguna. left, right, both o none, por defecto ninguno.

PROPIEDADES DE TIPO DE LETRA Las propiedades del tipo de letra que el usuario va a ver son las siguientes: Propiedad Descripcin Posibles valores45

fontfamily font-size

fontweight font-style

Tipo de letra (que Lista de tipos, ya sean genricos o no, separados puede ser genrico) por comas. Tamao del tipo de xx-small, x-small, small, medium, large, xlarge, xx-large, tamao relativo o tamao letra. absoluto. Por defecto medium. Grosor del tipo de normal, bold, bolder, lighter o 100-900 (donde letra (negrita). 900 es la negrita ms gruesa). Por defecto normal. Estilo del tipo de normal, italic, italic small-caps, oblique, oblique small-caps o small-caps. Por defecto letra (cursiva). normal.

Cabe recordar que los tipos genricos son serif, sans-serif, cursive, fantasy y monospace. Cada uno de estos tipos sern equivalentes a alguno que pueda tener instalado la computadora del usuario. As, por ejemplo, en un PC con Windows instalado serif puede equivaler a Times New Roman y monospace a Courier.

PROPIEDADES DE FORMATO DEL TEXTO Las propiedades de formato del texto que cualquier procesador de textos permite cambiar. Propiedad Descripcin Posibles valores line-height Interlineado. Nmero o porcentaje. textEfectos variados sobre none, underline (subrayado), overline (como decoration el texto. subrayado, pero por encima), line-through (tachado) o blink (parpadeante); por defecto ninguno. verticalPosicin vertical del baseline (normal), sub (subndice), super align texto. (superndice), top, text-top, middle, bottom, text-bottom o un porcentaje. Por defectotexttransform

text-align text-indent

Transforma el texto a (pone la primera letra en maysculas o maysculas), uppercase (convierte todo a minsculas. maysculas), lowecase (a minsculas) o none, por defecto no hace nada. Justificacin del texto. left, right, center o justify Tabulacin con que tamao o porcentaje, por defecto cero. aparece la primera lnea del texto.

baseline capitalize

PROPIEDADES DE COLOR Y FONDO Tambin es posible cambiar los colores y el grfico de fondo de un elemento. Propiedad Descripcin Posibles valores color Color del texto. Un color (en el formato habitual). background Modifica tanto el grfico el Direccin del archivo que contiene la color de fondo. imagen o un color.46

Hay que decir que, en la sintaxis en cascada, las direcciones se expresan del siguiente modo: background: url(fondobonito.gif);

PROPIEDADES DE CLASIFICACIN Hasta ahora habamos distinguido a la hora de ver las propiedades de un elemento en si estos eran tratados como bloques o no. Pero el ser bloques o no... no es acaso otra propiedad? Estas y otras formas de clasificar los elementos se pueden cambiar usando las siguientes propiedades: Propiedad Descripcin Posibles valores display Decide si un elemento es interior inline, block, list y none (que (como ), un bloque () o un 'apaga' el elemento) elemento de una lista (). list-style Estilo de un elemento de una disc, circle, square, decimal, lista, pudiendo incluir un grfico lower-roman, upper-roman, loweralpha, upper-alpha, none o la al comienzo del mismo. direccin de un grfico whiteDecide como se manejan los normal y pre space espacios, si de manera normal o como sucede dentro de la etiqueta .

47

PREGUNTAS1. En qu ao Internet se convierte en una red pblica y que consecuencias trajo consigo? 2. Qu es Internet? 3. Muestre el modelo de capas del TCP/IP, as como el conjunto de protocolos 4. En que ao y que aplicacin provoco el incremento de usuarios en Internet? 5. Cul es el protocolo utilizado para los sitios Web y en qu consiste? 6. Qu es un RFC? 7. Explique el proceso de comunicacin entre el navegador y servidor Web 8. Cul es la sintaxis de una solicitud HTTP? 9. Indique por lo menos 3 comandos de Solicitud HTTP y su descripcin 10. Indique por lo menos 5 tipos de encabezados de Solicitud del HTTP y su descripcin 11. Cul es la sintaxis de una respuesta HTTP? 12. Indique por lo menos 4 tipos de encabezados de Respuesta del HTTP y su descripcin 13. Qu son los cdigos de respuesta y de 2 ejemplos? 14. En una arquitectura Web Qu es un motor de base de datos? 15. Cul es la diferencia entre una aplicacin Web esttica y una dinmica? 16. Qu es URL? 17. Muestre el formato de una URL y de un ejemplo de su uso 18. Indique por lo menos 3 tipos de servicios que se usan en una URL as como una breve explicacin de cada uno. 19. Al definir una URL Existen diferencias entre maysculas y minsculas?, si, no, porque. 20. Qu es una cookies? 21. Explique cada uno de los ejemplos planteados donde se utilizaron cookies 22. Quin define el estndar HTML? 23. Defina que es SGML, XML y HTML 24. Muestre con un dibujo la relacin entre las siglas de la pregunta anterior. 25. Muestre y explique la estructura general de un programa HTML. 26. Para qu sirve la etiqueta Hx? 27. Muestre por lo menos 5 etiquetas que permiten cambiar el formato del tipo de letra. 28. Explique que es un marco? 29. Explique cul es la estructura de una tabla 30. Indique por lo menos 5 atributos de una tabla, as como su descripcin 31. Explique cul es la diferencia entre expresar el valor de una atributo en pixeles y en porcentaje 32. Qu es un formulario? 33. Cules son los parmetros de un formulario, as como su descripcin?48

34. Muestre una lista de los elementos que puede contener un formulario? 35. En qu parmetro se almacena el texto que contiene un cuadro de texto? 36. Cules son los dos tipos de botones que existen? 37. Con que parmetro se marca una casilla de verificacin? 38. Para qu se utiliza un campo oculto? 39. Para qu se utilizan los lenguajes ASP, JSP y PHP? 40. Cul es la ventaja de utilizar CSS? 41. Explique las 3 zonas donde se pueden ubicar las Hojas de Estilo en Cascada e indique cual es la mejor. 42. Indique por lo menos 3 medios o dispositivos a los que se les puede aplicar CSS 43. Explique cmo se le puede aplicar CSS al body de todas las pginas de un sitio Web.

49

EJERCICIOS PROPUESTOS.1. Busque en la red el RFC 2616, analice y realice un cuadro sinptico de su contenido. 2. Plantee e implemente un ejercicio donde se apliquen una cookies (uso de cookies.htm) 3. Crear una pgina (index.htm) que incluya la definicin de un conjunto de 3 marcos: un marco superior que ocupe el 20% de la pantalla, se usar como encabezado, vincular con la pgina encabezado.html. En el rea restante un marco izquierdo del 30% para un men de opciones, vincular con men.htm El resto como marco principal, vincular con principal.htm. Considerando un caso particular de inters del lector, implementar cada una de las tres pginas de tal manera que encabezado.html contenga el logotipo y nombre de la empresa, men.htm las posibles opciones de men que podra contener el sistema y finalmente principal.htm informacin relevante de la empresa seleccionada. 4. Utilizando tablas (uso de tablas.htm), disee e implemente una, aplicando las propiedades requeridas para lograr una mejor esttica de la misma, la tabla deber contener las etiquetas necesarias para mostrar los datos de un Empleado, tales como: RFC, Nombre, Direccin, Estado civil, Fecha de Ingreso, Puesto. 5. Considerando el ejercicio anterior, complementar, de tal manera que se use un formulario (empleado.htm), as como los elementos del formularios necesarios que permitan la captura de los datos del empleado, enviar los datos a la pginaempleado2.php

6.

Eliminar todas las propiedades de formato aplicados a cada etiqueta del ejercicio anterior (guardar como empleadoe.htm), crear una hoja de estilo en cascada externa (estilos.css) y vincularla con empleadoe.htm, definir los estilos necesarios en la hoja de estilo para lograr que la pgina se siga viendo igual mejor que empleado.htm.

50

2 Desarrollo de aplicaciones Web

51

2.1 ARQUITECTURA DE LAS APLICACIONES WEB.Al hablar de arquitecturas de aplicaciones Web resulta adecuado presentarlas dentro de las aplicaciones multinivel. Los sistemas tpicos cliente/servidor pertenecen a la categora de las aplicaciones de dos niveles. La aplicacin reside en el cliente mientras que la base de datos se encuentra en el servidor. En este tipo de aplicaciones el peso del clculo recae en el cliente, mientras que el servidor hace la parte menos pesada, y eso que los clientes suelen ser mquinas menos potentes que los servidores. Adems, est el problema de la actualizacin y el mantenimiento de las aplicaciones, ya que las modificaciones a la misma han de ser trasladada a todos los clientes. Para solucionar estos problemas se ha desarrollado el concepto de arquitecturas de tres niveles: interfaz de presentacin, lgica de la aplicacin y los datos. La capa intermedia es el cdigo que el usuario invoca para recuperar los datos deseados. La capa de presentacin recibe los datos y los formatea para mostrarlos adecuadamente. Esta divisin entre la capa de presentacin y la de la lgica permite una gran flexibilidad a la hora de construir aplicaciones, ya que se pueden tener mltiples interfaces sin cambiar la lgica de la aplicacin. La tercera capa consiste en los datos que gestiona la aplicacin. Estos datos pueden ser cualquier fuente de informacin como una base de datos o documentos XML. Convertir un sistema de tres niveles a otro multinivel es fcil ya que consiste en extender la capa intermedia permitiendo que convivan mltiples aplicaciones en lugar de una sola

52

Fig. 2.1.- Arquitectura Multinivel. La arquitectura de las aplicaciones Web suelen presentar un esquema de tres niveles. El primer nivel consiste en la capa de presentacin que incluye no slo el navegador, sino tambin el servidor Web que es el responsable de dar a los datos un formato adecuado. El segundo nivel est referido habitualmente a algn tipo de programa o script. Finalmente, el tercer nivel proporciona al segundo los datos necesarios para su ejecucin. Una aplicacin Web tpica recoger datos del usuario (primer nivel), los enviar al servidor, que ejecutar un programa (segundo y tercer nivel) y cuyo resultado ser formateado y presentado al usuario en el navegador (primer nivel otra vez).

Fig. 2.2.- Arquitectura Web de tres niveles.

2.2 LENGUAJES DE PROGRAMACIN DEL LADO DEL CLIENTE.Los lenguajes del lado del cliente son aquellos que pueden ser directamente interpretados por el navegador cliente Web y no necesitan la interpretacin del servidor. Entre los cuales no slo se encuentra el HTML y CSS sino tambin los que se muestran en la siguiente tabla.

53

LENGUAJES DE PROGRAMACIN DEL LADO DEL CLIENTE HTML CSS JAVASCRIPT APPLETS DE JAVA VISUAL BASIC SCRIPT FLASH

JAVASCRIPT Javascript es un lenguaje de programacin utilizado para crear pequeos programitas encargados de realizar acciones dentro del mbito de una pgina Web. Se trata de un lenguaje de programacin del lado del cliente, porque es el navegador el que soporta la carga de procesamiento. Su uso se basa fundamentalmente en la creacin de efectos especiales en las pginas y la definicin de interactividades con el usuario. Las sentencias escritas en javascript se encapsulan entre las etiquetas y . Por ejemplo, si en el cdigo de una pgina Web se incluye la sentencia window.alert("Bienvenido a mi sitio web. Gracias...")

Al abrir la pgina con el navegador mostrar una ventana de bienvenida Por ser este el lenguaje de programacin del lado del cliente ms utilizado en el captulo 4 se trata con ms profundidad. APPLETS DE JAVA

Es otra manera de incluir cdigo a ejecutar en los clientes que visualizan una pgina Web. Se trata de pequeos programas hechos en Java, que se transfieren con las pginas Web y que el navegador ejecuta en el espacio de la pgina. Los applets de Java estn programados en Java y precompilados, es por ello que la manera de trabajar de stos vara un poco con respecto a los lenguajes de script como Javascript. Los applets son ms difciles de programar que los scripts en Javascript y requerirn unos conocimientos bsicos o medios del lenguaje Java. La principal ventaja de utilizar applets consiste en que son mucho menos dependientes del navegador que los scripts en Javascript, incluso54

independientes del sistema operativo de la computadora donde se ejecutan. Adems, Java es ms potente que Javascript, por lo que el nmero de aplicaciones de los applets podr ser mayor. Como desventajas en relacin con Javascript cabe sealar que los applets son ms lentos de procesar y que tienen espacio muy delimitado en la pgina donde se ejecutan, es decir, no se mezclan con todos los componentes de la pgina ni tienen acceso a ellos. Es por ello que con los applets de Java no se puede hacer directamente cosas como abrir ventanas secundarias, controlar Frames, formularios, etc.

VISUAL BASIC SCRIPT Es un lenguaje de programacin de scripts del lado del cliente, pero slo compatible con Internet Explorer. Es por ello que su utilizacin 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 estn mu y inspirados en l. Sin embargo, no todo lo que se puede hacer en Visual Basic se puede hacer en Visual Basic Script, pues este ltimo es una versin reducida del primero. El modo de funcionamiento de Visual Basic Script para construir efectos especiales en pginas Web es muy similar al utilizado en Javascript y los recursos a los que se puede acceder tambin son los mismos: el navegador. FLASH Flash es una tecnologa, y un programa, para crear efectos especiales en pginas Web. Con Flash tambin se consigue hacer pginas dinmicas del lado del cliente. Flash en realidad no es un lenguaje; Sin embargo, si se tuviera que catalogarlo en algn sitio quedara dentro del mbito de las pginas dinmicas de cliente. Para visualizar las "pelculas" Flash, el navegador debe tener instalado un pequeo programa (plug-in) que le permita visualizarlas.

2.3 LENGUAJES DE PROGRAMACIN DEL LADO DEL SERVIDOR.Son aquellos lenguajes que son reconocidos, ejecutados e interpretados por el propio servidor y que se envan al cliente en un formato comprensible para l.

55

Existe una multitud de lenguajes concebidos o no para Internet. Cada uno de ellos explota ms a fondo ciertas caractersticas que lo hacen ms o menos tiles para desarrollar distintas aplicaciones. La versatilidad de un lenguaje est ntimamente relacionada con su complejidad. Un lenguaje complicado en su aprendizaje permite en general el realizar un espectro de tareas ms amplio y ms profundamente. Es por ello que a la hora de elegir el lenguaje que se desea utilizar, se debe saber claramente qu es lo que se desea hacer y si el lenguaje en cuestin lo permite o no. En el dominio de la red, los lenguajes de lado servidor ms ampliamente utilizados para el desarrollo de pginas dinmicas son el ASP, PHP y JSP. LENGUAJES POR EL LADO DEL SERVIDOR CGI PERL ASP / ASP.NET PHP JSP

CGI Es el sistema ms antiguo que existe para la programacin de las pginas dinmicas de servidor. Actualmente se encuentra un poco desfasado por diversas razones entre las que destaca la dificultad con la que se desarrollan los programas y la pesada carga que supone para el servidor que los ejecuta. Los CGI se escriben habitualmente en el lenguaje Perl, sin embargo, otros lenguajes como C, C++ o Visual Basic pueden ser tambin empleados para construirlos. PERL Perl es un lenguaje de programacin interpretado, al igual que muchos otros lenguajes de Internet como Javascript o ASP. Esto quiere decir que el cdigo de los scripts en Perl no se compila sino que cada vez que se quiere ejecutar se lee el cdigo y se pone en marcha interpretando lo que hay escrito. Adems es extensible a partir de otros lenguajes, ya que desde Perl se pueden hacer llamadas a subprogramas escritos en otros lenguajes. Tambin desde otros lenguajes se puede ejecutar cdigo Perl. Perl es un lenguaje de programacin que actualmente se emplea para el diseo de sitios Web, pero que en un principio se utilizaba para procesar texto. Su nombre significa Practical Extraction and Report Language, es decir, lenguaje

56

prctico para la extraccin e informe. Se trata de un lenguaje fcil de usar y muy eficiente, que tiene un excelente sistema de procesamiento de texto. ASP / ASP.NET ASP (Active Server Pages) es un lenguaje de programacin de Microsoft del lado del servidor, con el cual se realizan sitios Web dinmicos. Generalmente se comercializa junto con el servidor ISS (Internet Information Server). Se llama ASP clsico a las versiones 1.0, 2.0 y 3.0, es decir a las previas al ASP.NET. Al crear sitios con este lenguaje se combina HTML con las instrucciones ASP. Tambin se pueden emplear tecnologas como Flash y JavaScript junto con ASP y HTML. A partir del ao 2002 Microsoft lanz al mercado el lenguaje ASP.NET. Este lenguaje es ms ordenado que el ASP, dado que se separa el contenido de un sitio de su comportamiento dinmico. Por otra parte, una restriccin del ASP y del ASP.NET es que este lenguaje slo puede ser ejecutado en el sistema operativo Windows.

PHP PHP es un lenguaje de programacin del lado del servidor gratuito e independiente de plataforma, rpido, con una gran librera de funciones y mucha documentacin. El cdigo PHP se incluye dentro del HTML, entre las etiquetas . Es una tecnologa del lado del servidor, ya que ste es el que interpreta y ejecuta el cdigo PHP de un sitio dinmico. El navegador solamente recibe la ejecucin. Entre sus principales ventajas se puede sealar: Es un lenguaje que puede ejecutarse en diferentes sistemas operativos (Linux, Windows y Macintosh) y en los servidores ms populares. Permite programar sitios con contenido dinmico, combinndolo con los principales servidores de bases de datos, entre ellos MySQL. De esta manera los sitios desarrollados con PHP presentan no slo un gran dinamismo sino tambin un excelente manejo de datos. Por ello este lenguaje es ideal para crear sitios Web catlogos. Es un lenguaje libre y, por ende, accesible a todas las personas.

JSP JSP es un acrnimo de Java Server Pages, que en espaol significa Pginas de Servidor Java. Es, pues, una tecnologa orientada a crear pginas Web con programacin en Java.

57

Con JSP se puede crear aplicaciones Web que se ejecuten en variados servidores Web, de mltiples plataformas, ya que Java es en esencia un lenguaje multiplataforma.

LENGUAJES DEL LADO CLIENTE-SERVIDOR DHTML XML DHTML DHTML no es precisamente un lenguaje de programacin. Ms bien se trata de una nueva capacidad de la que disponen los navegadores modernos, por la cual se puede tener un mayor control sobre la pgina que antes. Cualquier pgina que responde a las actividades del usuario y realiza efectos y funcionalidades se puede englobar dentro del DHTML, pero en este caso se refiere ms a efectos en el navegador por los cuales se pueden mostrar y ocultar elementos de la pgina, se puede modificar su posicin, dimension es, color, etc. DHTML proporciona ms control sobre la pgina, gracias a que los navegadores modernos incluyen una nueva estructura para visualizar en pginas Web denominada capa. Las capas se pueden ocultar, mostrar, desplazar, etc. Para realizar las acciones sobre la pgina, como modificar la apariencia de una capa, se requiere de un lenguaje de programacin del lado del cliente como Javascript o VBScript. En la actualidad, DHTML tambin puede englobar la programacin en el servidor. XML XML es una tecnologa en realidad muy sencilla que tiene a su alrededor otras tecnologas que la complementan y la hacen mucho ms grande y con unas posibilidades mucho mayores. XML, con todas las tecnologas relacionadas, representa una manera distinta de hacer las cosas, ms avanzada, cuya principal novedad consiste en permitir compartir los datos con los que se trabaja a todos los niveles, por todas las aplicaciones y soportes.

58

2.4 AMBIENTES PARA EL DESARROLLO DE APLICACIONES WEB.Existen en el mercado multitud de aplicaciones que facilitan la creacin y el mantenimiento de los sitios Web. Las primeras pginas Web se realizaban con un editor de texto simple, pero la complejidad de los lenguajes y sistemas implicados en el desarrollo de los portales Web hacen que se haya abandonado la creacin artesanal en favor de la ms industrial. Lo malo es que al final se corre el riesgo de que los portales se parezcan demasiado unos a otros. La utilizacin de los ambientes de desarrollo Web resultan necesarios pues los sitios actuales requieren que se terminen en el menor tiempo posible, codificar todo el sitio en forma rudimentaria prolongara el tiempo de desarrollo considerablemente, sin embargo el hecho de utilizar un ambiente para el desarrollo de los sitios Web, no exoneran al programador de conocer con profundidad cada uno de los lenguajes que intervienen para construir el sitio, tarde que temprano el programador tiene que meterle mano al cdigo y para hacerlo se requiere de un dominio en los diferentes lenguajes, de otra forma su actividad estara muy limitada, as la herramienta ayudar en la confeccin del sitio en las actividades ms repetitivas y comunes, sin embargo en los detalles finos, se realiza desde el cdigo. Ahora tambin en la codificacin la herramienta proporciona mucha utilidad. Es muy necesario utilizar ambientes de desarrollo para aplicaciones Web robustas ya que estos ambientes ayudan a organizar, probar y escribir el cdigo, aumentando as la productividad y la calidad de la aplicacin que se va a producir. Dos programas para el desarrollo de aplicaciones Web ms populares son: Adobe Dreamweaver.- Es el estndar de la industria debido a su cdigo limpio y caractersticas avanzadas.

59

Fig. 2.3.- Pantalla principal de Dreanweaver cs4 Nvu.- es una herramienta de cdigo abierto que coincide con muchas de las caractersticas de Dreamwaver, y se puede descargar gratuitamente de la pgina www.nvu.com.

Fig. 2.4.- Pantalla principal de NVU

2.5 METODOLOGAS PARA EL DESARROLLO DE APLICACIONES WEBLos sitios Web se presentan de todas formas y modelos, desde sencillas pagina a megasitios que gestionan los negocios para empresas a nivel mundial, el proceso de desarrollar un sitio implica los mismos pasos basicos: Conceptualizar e investigar Crear y organizar contenido. Desarrollar el aspecto visual y comportamiento Producir un prototipo Probarlo Lanzar el sitio Mantenimiento

Por supuesto, dependiendo de la naturaleza y escala del sitio, estos pasos variaran en secuencia, proporcin y numero de personas necesarias, pero en esencia, son los aspectos que se deben cubrir en la creacion de un sitio Web. CONCEPTUALIZAR E INVESTIGAR Todos los sitios Web empiezan con una idea. Es el resultado de que alguien quiera tener algo en lnea, sea para fines personales o comerciales. Esta primera fase es emocionante. Se empieza con una idea (sitio de venta en lnea, ambiente virtual de aprendizaje, banca en lnea, etc.) y luego realizar una lluvia de ideas sobre cmo se va a manifestar como sitio Web. Este es el momento de las listas y bocetos,

60

pizarras y cuadernos. Qu va hacer emocinate? Qu va haber en la primera pagina? No se debe preocupar por el ambiente de desarrollo Web hasta que se tenga las ideas y estrategias juntas. Esto implica formular a los clientes (o as mismo) una serie de preguntas referidas a recursos, objetivos y lo ms importante, los usuarios. Muchas grandes empresas de diseo y desarrollo Web dedican ms tiempo a investigar e identificar las necesidades del cliente que cualquier otro nivel de produccin. Para sitios grandes, este paso puede incluir casos de estudios, entrevistas, y un amplio estudio de mercado. Es posible que no se necesite dedicar esa cantidad de esfuerzo (o dinero) a la preparacin de un sitio Web, pero sigue siendo acertado tener claro las expectativas y recursos al principio del proceso, particularmente cuando se trata de trabajar de acuerdo a un presupuesto. Una muestra de las preguntas que se podran formular a los clientes o a uno mismo, durante la fase de investigacin del diseo pudriera ser: Estrategias Por qu crea este sitio Web? Qu espera conseguir? Qu ofrece a los usuarios? Qu quiere que los usuarios hagan en su sitio Web? Despus de que se hayan marchado? Qu hace volver a sus visitantes? Descripcin generan del sitio Qu tipo de sitio es? (Meramente proporcional? Una publicacin? Un punto de venta? Qu caractersticas tendr? Cules son sus mensajes ms importantes? Quines son sus competidores? Qu hacen bien? Qu se podra mejorar? Audiencia objetivo Quin es su principal audiencia? Tiene experiencia con internet y conocimientos tcnicos? Puede haber previsiones de la velocidad de conexin de un usuario medio? plataforma? tamao de monitor? navegador? Cada cuanto se espera que visiten el sitio? Cunto tiempo permanecer durante una visita media? Contenido Quin es responsable de generar el contenido original? Cmo se enviara el contenido?

61

Recursos Qu recursos se ha dedicado al sitio (presupuesto, personal, tiempo)? Requiere el sitio un sistema de gestin de contenido? El mantenimiento se puede gestionar por personal del cliente? Tiene un servidor para su sitio? Ha registrado un nombre de dominio para su sitio? Aspecto grafico Tiene en mente un aspecto para el sitio? Tiene ya estndares existentes, como logos y colores, que se tengan que incorporar Forma el sitio parte de un sitio ms grande o grupos de sitios con estndares de diseo con lo que tiene que coincidir? Qu aspecto tiene otros sitios Web? Qu le gusta de ellos? Qu sitios no le gustan? Para los sitios Web dinmicos, se requiere del diseo de la base de datos que almacenar la informacin que se procese, siendo necesario despus de la investigacin disear los modelos para su representacin como lo es un modelo Entidad-Relacin.

Fig. 2.5.- Modelo Entidad Relacin de Ventas en lnea En la figura se muestra el modelo entidad relacin de una porcin de una base de datos de ventas en lnea. Tambin se deben obtener el conjunto de tablas que conformarn la base de datos, que para este caso queda de la siguiente manera: categoria(id_cat, Descripcion) producto (id_pro, clave, nombre, precio, existencia, preciov, id_cat) clientes (id_clie, clave, nom, dir, tel)62

factura (id_fac, fecha) ventas (id_clie, id_pro, id_fac, cantc, pu) administradores (id_ad, nom, dir, tel)

CREAR Y ORGANIZAR CONTENIDO La parte ms importante de un sitio Web es su contenido. A pesar del ruido sobre tecnologas y herramientas, el contenido sigue siendo el rey de internet. Tiene que haber algo de valor, tanto sea algo de leer, algo que hacer o algo que comprar que atraiga a los visitantes y haga que regresen. Es acertado ser sensible a la necesidad de un buen contenido. Creacin de contenido Cuando se crea un sitio Web para un cliente, se necesita establecer inmediatamente quien ser responsable de generar el contenido que va en el sitio. Idealmente, el cliente es responsable de generar su propio contenido y destinara los recursos apropiados para hacerlo. Diseo de la informacin Una vez que se tiene el contenido o al menos una idea clara del contenido que tendr el siguiente paso es organizar el contenido para que sea accesible de forma fcil e intuitiva para su audiencia. Nuevamente, este es el momento para las listas y bocetos. Se debe tener todo lo que necesita en el sitio en una mesa. Organizarlo por importancia, categora, etc. Decidir lo que va en la pgina principal y lo que se divide en apartados. Pensar en cmo los usuarios esperaran encontrar la informacin en su sitio y disear en base a sus necesidades y suposiciones en mente. El resultado de la fase de diseo de informacin puede ser un diagrama (a menudo llamado mapa de sitio) que revela la forma global del sitio. Las pginas en diagramas normalmente se representan por rectngulos; las flechas indican vnculos entre pginas o secciones del sitio.

63

El mapa del sitio proporciona a los diseadores una idea de la escala del sitio y como se relacionan las secciones y ayudas en el diseo de navegacin.Pgina Principal

Sesin del Cliente

Sesin del Administrador

Datos de Sesin

Productos

Compras

Datos de Sesin

Clientes

Facturas

Seleccionar Producto

Detalle de Facturas

Fig. 2.6.- Mapa gen