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:
Windows, Microsoft SQL Server, Microsoft Acces y Visual Basicson 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.

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. 7

1.1 Perspectiva histrica del Internet 8
1.2 Protocolo http (protocolo de transferencia de 9
hipertexto).
1.2.1 Arquitectura del WWW. 15
1.2.2 URLs. 16
1.2.3 Mtodos http. Persistencia en http Cookies. 18
1.3 Introduccin al HTML. Lenguaje de despliegue del 19
Web
1.3.1 HTML como un tipo SGML. 19
1.3.2 Elementos del lenguaje HTML. 21
1.3.3 Tablas en HTML. 27
1.3.4 Formularios. 31
1.4 Evolucin del desarrollo de aplicaciones Web. 38
1.5 Hojas de estilo en cascada e introduccin al XML. 39

2.- Desarrollo de aplicaciones Web 51

2.1 Arquitectura de las aplicaciones Web. 52
2.2 Lenguajes de programacin del lado del cliente. 53
2.3 Lenguajes de programacin del lado del servidor. 55
2.4 Ambientes para el desarrollo de aplicaciones Web. 59
2.5 Metodologas para el desarrollo de aplicaciones Web 60
2.6 Aspectos de seguridad. 69

3.- Programacin del lado del servidor. 89

3.1 Procesamiento del lado del servidor. 90
3.2 Conceptos bsicos de la herramienta de desarrollo. 92
3.3 Operadores. 95
3.4 Sentencias. 100
3.5 Arreglos. 107
3.6 Funciones y libreras. 109
3.7 Ejemplos prcticos. 120
3.8 Procesado de formularios. 120
3.9 Sesiones. 124
3.10 Conectividad entre el servidor Web y 127
el servidor de base de datos.
3.11 Manejo de archivos. 140
3.12 Seguridad. 143

4.- Procesamiento del lado del cliente. 153

4.1 Lenguaje Script del cliente. 154
4.2 Modelo de objetos con lenguaje Script. 158
4.3 Objetos lenguaje Script nter construidos. 166

4
 4.4 Eventos con lenguaje Script. 166
4.5 Validacin de entrada de datos del lado del cliente. 170
4.6 Consideraciones del soporte del navegador. 174

Unidad 5.- Servicios Web XML. 178

5.1 Visin general de servicios Web XML. 179
5.2 Tecnologas subyacentes. 180
5.2.1 SOAP 181
5.2.2 WSDL 185
5.2.3 UDDI 185
5.3 Publicacin de un servicio WEB. 186
5.4 Consumo de un servicio WEB. 186

Anexo A.- Programacin de un caso de estudio 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.com

LA 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 (<crlf> significa retorno
de carro y avance de lnea):

MTODO VERSIN URL<crlf>

ENCABEZADO: Valor<crlf>
. . . ENCABEZADO: Valor<crlf>
Lnea en blanco <crlf>
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 del Descripcin
encabezado
Accept Tipo de contenido aceptado por el navegador (por
ejemplo, texto/html). Consulte Tipos de MIME
Accept-Charset Juego de caracteres que el navegador espera
Accept-Encoding Codificacin de datos que el navegador acepta
Accept-Language Idioma que el navegador espera (de forma

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

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 una

12
 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 sintaxis

VERSIN-HTTP CDIGO EXPLICACIN <crlf>

ENCABEZADO: Valor<crlf>
. . . ENCABEZADO: Valor<crlf>
Lnea en blanco <crlf>
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

<html>
<head>
<title>Instituto Tecnolgico del Istmo</title>
</head>
<body>
(Contenido)
.
.
.
</body>
</html>

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 Mensaje Descripcin

10x Mensaje de Estos cdigos no se utilizan en la versin 1.0 del protocolo
informacin
20x xito Estos cdigos indican la correcta ejecucin de la
transaccin
200 OK La solicitud se llev a cabo de manera correcta
201 CREATED 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.
202 ACCEPTED La solicitud ha sido aceptada, pero el procedimiento que
sigue no se ha llevado a cabo
203 PARTIAL Cuando se recibe este cdigo en respuesta a un comando
INFORMATION
de GET indica que la respuesta no est completa.
204 NO RESPONSE El servidor ha recibido la solicitud, pero no hay
informacin de respuesta
205 RESET CONTENT El servidor le indica al navegador que borre el contenido
en los campos de un formulario
206 PARTIAL Es una respuesta a una solicitud que consiste en el
CONTENT
encabezado range. El servidor debe indicar el encabezado
content-Range
30x Redireccin Estos cdigos indican que el recurso ya no se encuentra
en la ubicacin especificada
301 MOVED Los datos solicitados han sido transferidos a una nueva
direccin
302 FOUND Los datos solicitados se encuentran en una nueva
direccin URL, pero, no obstante, pueden haber sido
trasladados
303 METHOD Significa que el cliente debe intentarlo con una nueva
direccin; es preferible que intente con otro mtodo en vez
de GET
304 NOT MODIFIED 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.
40x Error debido Estos cdigos indican que la solicitud es incorrecta
al cliente
400 BAD REQUEST La sintaxis de la solicitud se encuentra formulada de
manera errnea o es imposible de responder
401 UNAUTHORIZED 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
402 PAYMENT El cliente debe reformular la solicitud con los datos de
REQUIRED

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

1.2.1 ARQUITECTURA DEL WWW

La 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 cliente

15
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
Es el servicio invocado para transmitir pginas Web y el que se usar
normalmente en los enlaces.

16
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, la URL
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:

ruta_relativa/archivo

En 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.

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

17
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 Contador de visitas.htm

Cookies - Bienvenida personalizada.htm
Cookies - ltima visita.htm
Cookies - Personalizacin de colores.htm

18
1.3 INTRODUCCIN AL HTML. LENGUAJE DE DESPLIEGUE
DEL WEB

QU 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 de

19
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.

<!-- primera pagina.htm -->

<html>
<head>
<title>Libro de Programacin Web</title>
</head>
<body bgcolor="#0033CC">
<h1>BIENVENIDOS A PROGRAMACIN WEB</h1>
<hr>
</body>
</html>

En primer lugar se puede observar que en todo el programa se encuentran un conjunto

de etiquetas, cuya sintaxis general es:

<ETIQUETA parmetros> ... </ETIQUETA>

Hay ocasiones en que no es necesario cerrar la etiqueta, En primer lugar se

encuentran las siguientes etiquetas:

<html>
</html>

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.

<head>
<title>Libro de programacin Web</title>
</head>

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 >

</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.

<h1>BIENVENIDOS A PROGRAMACIN WEB</h1>

<hr>

Al finalizar aparece la etiqueta <hr> 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.

Formato del prrafo

22
Estas son las etiquetas ms importantes

Etiqueta Utilidad Resultado

<P> Sirve para delimitar un prrafo. Inserta una Soy un prrafo
lnea en blanco antes del texto.
<CENTER> ... Permite centrar todo el texto del prrafo. Normal
</CENTER>
Centrado
<PRE WIDTH=x> Representa el texto encerrado en ella con un Estoy en paso fijo
... </PRE>
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.
<DIV ALIGN=x> Permite justificar el texto del prrafo a la izquierda
... </DIV>
izquierda (ALIGN=LEFT), derecha (RIGHT), centro
al centro (CENTER) o a ambos mrgenes derecha
(JUSTIFY)
<ADDRESS> ... Para escribir direcciones (de esas donde vive Juan Prez Av.
</ADDRESS>
la gente, no electrnicas). Jurez No.30,
Juchitan,Oax.
<BLOCKQUOTE> Para citar un texto ajeno. Se suele
...
</BLOCKQUOTE> 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

<H1> ... </H1>

Nivel 1
<H2> ... </H2>
Nivel 2
<H3> ... </H3>
Nivel 3
<H4> ... </H4>
Nivel 4
<H5> ... </H5> Nivel 5
<H6> ... </H6> Nivel 6

23
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 Resultado

<B> ... </B> Pone el texto en negrita. Texto en
negrita
<I> ... </I> Representa el texto en cursiva. Texto en
cursiva
<U> ... </U> Para subrayar algo. Texto
subrayado
<S> ... </S> Para tachar. Texto tachado
<TT> ... </TT> Permite representar el texto en un tipo de letra Texto fijo
de paso fijo.
<SUP> ... </SUP> Letra superndice. E=mc2
<SUB> ... </SUB> Letra subndice. ai,j=bi,j+1
<BIG> ... </BIG> Incrementa el tamao del tipo de letra. GRANDE
<SMALL> ... Disminuye el tamao del tipo de letra. Soy pequeo
</SMALL>
<BLINK> ... Hace parpadear el texto. Cuidado?
</BLINK>

Otros elementos

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

Etiqueta Utilidad Resultado

<HR> Inserta una barra horizontal.
<BR> Salto de lnea. Hay un antes y un
despus de saltar a otra lnea
<!-- ... --> Comentarios. Esto se escribe y <!-- esto no -->

El siguiente ejemplo muestra el uso de algunas de las etiquetas de formato.

24
<!--formato.htm-->
<HTML>
<HEAD>
<TITLE>Formato</TITLE>
</HEAD>
<BODY>
<DIV ALIGN=CENTER><H1>FORMATO DE LA PAGINA</H1></DIV>
<H2>Instituto Tecnolgico del Istmo</H2>
<HR>
<P>Este prrafo es muy sencillo. Por el momento no se que
tendr, pero dentro de poco pondr aqu muchas cosas
interesantes.

<BR><BR><H2>Instituto Tecnolgico del Istmo</H2>

<HR>
<DIV ALIGN=CENTER>Este <STRONG>prrafo</STRONG> esta mejor (<I>chispas</I>). Por
el momento no se que tendr, pero <S>dentro de poco</S> pondr
<EM>aqu</EM> muchas cosas <B>interesantes</B>.</DIV>
<BR><BR>
<marquee><H3>CONOCES ESTAS FORMULAS?</H3></marquee>
A= PI*R <SUP>2</SUP> <br>
Tiempo<SUB>T</SUB>=t<SUB>1</SUB>+t<SUB>2</SUB>+ ...+t<SUB>n</SUB>
<!-- Esto es un comentario
y no se mostrar en la pagina-->
</BODY>
</HTML>

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:

<!-- index -->

<html>
<head>
<title>Venta en lnea</title>
</head>
<frameset rows="30%,*" frameborder="0" border="0" framespacing="0">
<frame src="superior.php" name="superior" scrolling="NO" noresize >
<frame src="principal.php" name="principal">
</frameset><noframes></noframes>
</html>

25
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 <FRAMESET> se hacen dos cosas. Primero, definir cada uno de los
marcos ponindoles un nombre y especificando qu archivo HTML le corresponde
mediante la etiqueta <FRAME>.

Etiqueta <FRAMESET>

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 <FRAME> de cada
una de los marcos contiguos al borde a eliminar o incluyendo el parmetro
FRAMEBORDER=0 en el <FRAMESET>.

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.

<frameset rows="30%,*">

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

Etiqueta <FRAME>

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

Parmetro Utilidad
NAME Asigna un nombre a un marco para identificarlo y referenciarlo
despus.
SRC Indica la direccin del documento HTML que ocupar el marco.
SCROLLING 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.
NORESIZE Si se especifica el usuario no podr cambiar de tamao el marco.
FRAMEBORDER Al igual que su homnimo en la etiqueta <FRAMESET>, si se iguala a
cero se eliminar el borde con todos los marcos contiguos que tengan
tambin este valor a cero.
MARGINWIDTH Permite cambiar los mrgenes horizontales dentro de un marco. Se
representa en pixels.
MARGINHEIGHT Igual al anterior pero con mrgenes verticales.

1.3.3 TABLAS EN HTML

Las 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,
definindose una celda como el espacio formado por la interseccin de una fila y una
columna.

columna 1 columna 2 columna 3

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

27
 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
<TABLE> y su correspondiente de cierre </TABLE>.

Seguidamente indicarle cuantas filas se va a tener en la tabla, cosa que se hace con las
etiqueta de inicio de fila <TR> y su correspondiente de cierre de fila </TR>, 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 <TD> y </TD>.

De esta forma, y siguiendo con la tabla inicial de Ejemplo, el esquema de etiquetas

sera el siguiente:

<TABLE>
<TR> <TD>...</TD> <TD>...</TD> <TD>...</TD> </TR>

<TR> <TD>...</TD> <TD>...</TD> <TD>...</TD> </TR>

</TABLE>

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

<TABLE>
<TR>
<TD> celda(1,1) </TD>
<TD> celda(1,2) </TD>
<TD> celda(1,3) </TD>
</TR>
<TR>
<TD> celda(2,1) </TD>
<TD> celda(2,2) </TD>
<TD> celda(2,3) </TD>
</TR>
</TABLE>
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.

28
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 <TABLE> Y SUS ATRIBUTOS.

Las tablas tienen sus propios atributos o propiedades que se colocaran dentro de su
etiqueta. Entre los ms importantes estn:
align Alinea horizontalmente la tabla con respecto a su entorno.
background 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 nmero de pxel del borde principal.
bordercolor Define el color del borde.
cellpadding Define, en pxel, el espacio entre los bordes de la celda y el contenido
de la misma.
cellspacing Define el espacio entre los bordes (en pxel).
height Define la altura de la tabla en pxel o porcentaje.
width Define la anchura de la tabla en pxel o porcentaje.

Algunos atributos que permiten modificar una celda en concreto o toda una fila:

align Justifica el texto de la celda del mismo modo que si fuese el de un

prrafo.
valign Podemos elegir si queremos que el texto aparezca arriba (top), en el
centro (middle) o abajo (bottom) de la celda.
bgcolor Da color a la celda o lnea elegida.
bordercolor 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 Permite colocar un fondo para la celda a partir de un enlace a una

imagen.
height Define la altura de la celda en pixels o porcentaje.
width Define la anchura de la celda en pixels o porcentaje.
colspan Expande una celda horizontalmente.
rowspan Expande una celda verticalmente.

29
Algunos de los atributos usan la siguiente sintaxis:
Atributo=Valor

Donde 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.htm -->

<html>
<head>
<title>Tablas</title>
</head>
<body>
<table width="30%" border="1" align="center">
<tr bgcolor="#00FF00">
<td colspan="2"><p align="center">REGISTRO DE CLIENTES </p></td>
</tr>
<tr>
<td>NOMBRE </td>
<td bgcolor="#FFFF33" width="60%">&nbsp;</td>
</tr>
<tr>
<td>DIRECCION</td>
<td bgcolor="#FFFF33" >&nbsp;</td>
</tr>
</table>
</body>
</html>
El ejemplo muestra una tabla como el siguiente:

REGISTRO DE CLIENTES
NOMBRE

30
 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 FORMULARIOS

Los 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 <FORM> y

</FORM>. Como parmetros cabe destacar los siguientes:

action 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.
method 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.
name Identifica el nombre de la variable de formulario
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.

31
Ejemplo:

<form name='registro' method='post' action='Autenticacion.php'>

</form>

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 mtodo
post

Los elementos que se deseen incluir en el formulario debern hallarse entre las
etiquetas <FORM> y </FORM>

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 <INPUT>:

<INPUT TYPE=TEXT>

<INPUT TYPE=PASSWORD>

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 Tamao de la caja de texto.

32
 MAXLENGTH Nmero mximo de caracteres que puede introducir el usuario.
VALUE Texto por defecto que contendr la caja.

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:

<TEXTAREA> Por defeto

Por defecto
</TEXTAREA>

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 Filas que ocupar la caja de texto.
COLS 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 <input name="Sexo" type="radio" value="H"> <br>
Mujer <input name="Sexo" type="radio" value="M"> Hombre

Mujer

As segn la seleccin que realice el usuario, ser el valor que tomar la variable.
Acepta los siguientes parmetros:

Parmetro Utilidad
VALUE Este es el valor que asignar a la variable.
Si se indica en una de las opciones esta ser la que est activada por
CHECKED
defecto.

La segunda posibilidad que ocupa menos cdigo es usando una Lista/Men. Para
emplearlas se debe utilizar dos etiquetas, SELECT y OPTION:
<SELECT NAME="Navegador"> Netscape
<OPTION value="Net">Netscape
<OPTION value="Exp">Explorer
<OPTION value="Ope">Opera
<OPTION value="Lin">Lynx
<OPTION value="Otr">Otros
</SELECT>

33
Los parmetros que admite SELECT son las siguientes:
Parmetro Utilidad
El nmero de opciones que se podr ver. Si es mayor que 1 se ver una
SIZE
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:
<input type="submit" name="Submit" value="Aceptar">
Aceptar
<input type="reset" name="Submit2" value="Limpiar">
Limpiar

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
<input name="promo" type="checkbox" value="1" checked> 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
ejemplo, se podra asignar en forma oculta la clave de un producto a una variable para
verificar este valor en la pgina receptora.

<input name="clvp" type="hidden" id="claveproducto" value="DD120">

CONTROLES AVANZADOS PARA FORMULARIOS

34
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:
<BUTTON TYPE="button"> Soy una tabla
<table border="1">
<tr> que est en un botn
<th>Soy una</th>
<th>tabla</th>
</tr>
<tr>
<td>que est</td>
<td>en un botn</td>
</tr>
</table>
</BUTTON>
Los parmetros de dicha etiqueta son los normales, TYPE, que podr tomar los valores
SUBMIT (por defecto), RESET y BUTTON, NAME y VALUE.

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

<INPUT TYPE="image" SRC="imagenes/camara.jpg" alt="Elije la

Cmara">

Este elemento se comportar del mismo modo que un botn de tipo SUBMIT, pero
aadir como informacin en el formulario las coordenadas x, y donde el usuario lo
puls.

ETIQUETAS
Hasta hora, el texto que acompaaba a los campos de entrada no estaba asociado a los
mismos de ninguna manera. As, por ejemplo, si se pulsa en el texto que acompaaba
a un control de confirmacin, no suceda nada. Ahora, en cambio, si se sita la
etiqueta LABEL, el control cambiar de estado

<LABEL>
PROMOCIN PROMOCIN

35
<input name="promo" type="checkbox" value="1" checked>
</LABEL>

AGRUPACIN DE ELEMENTOS
Una manera de agrupar visualmente varios elementos de un formulario es encerrando
una parte de un formulario dentro de la etiqueta FIELDSET, se mostrar un rectngulo
alrededor de los mismos. Si adems, se le pone un ttulo por medio de la etiqueta
LEGEND l formularios quedar ms elegante.

<FIELDSET> Registro de Productos

<LEGEND>Registro de Productos </LEGEND>
<LABEL> Clave:
Clave:
<INPUT TYPE="text"> Nombre:
</LABEL>
<br>
<LABEL>
Nombre:
<INPUT TYPE="text">
</LABEL>
</FIELDSET>

LEGEND admite como parmetro ALIGN, que indicar en qu lugar se coloca el ttulo. Por
defecto es TOP (arriba), pudiendo estar tambin abajo ( BOTTOM), a la izquierda (LEFT) o a
la derecha (RIGHT).

DESACTIVACIN DE ELEMENTOS
Todos los controles de un formulario se pueden desactivar, impidiendo as al usuario
que los utilice. Se seguirn mostrando en pantalla, aunque con un aspecto distinto
para indicar su triste estado. Para ello slo se pone el parmetro disabled:

Clave:
<INPUT TYPE="text" disabled> Clave:

Esto, en principio, no parece de demasiada utilidad. Para qu se quiere tener

controles desactivados? Para eso no se pone y ya, no? Lo bueno que tiene es que el
estado de activacin de un control es accesible desde JavaScript. Eso permitir
activar o desactivar una parte del formulario dependiendo de lo que el usuario haya
introducido previamente en otros controles del mismo. Por ejemplo cuando se va a
modificar los datos de un producto, seguramente no ser conveniente modificar la
clave del producto, ms sin embargo sus dems campos s.

CAMPO DE ARCHIVO
Este elemento se utiliza para transmitir documentos externos desde el disco duro de
un usuario al servidor Web, para ello se utiliza nuevamente la etiqueta input con su
type establecida en file.

36
<input type="file" name="imagen" >
Examinar...

Al pulsar cobre el botn el navegador mostrar una caja de dilogos que permitir al
usuario seleccionar el archivo en el disco duro.

Ms adelante se mostrarn ejemplos de envi de archivos al servidor completos.

Es muy recomendable utilizar tablas para organizar los elementos de los

formularios. Utilizando tablas se consigue una mejor distribucin de los elementos
del formulario, lo que facilita su comprensin y mejora su apariencia. Ejemplo:

<!-- formulario.htm -->

<html>
<head>
<title>Manejo de Formulario</title>
</head>
<body>
<form name='form1' method='post' enctype="multipart/form-data" action='alta
de productos.php' >
<table border='1' align='center'>
<tr>
<td colspan='2'><p align='center'>REGISTRO DE PRODUCTOS</p> </td>
</tr>
<tr>
<td>CLAVE</td>
<td ><input type='text' name='clv' id='clvp2' size='10'
maxlength='10'></td>
</tr>
<tr>
<td>NOMBRE</td>
<td><input type='text' name='nom' id='nom' size='30' maxlength='30'></td>
</tr>
<tr>
<td>UNIDAD</td>
<td>PIEZA
<input type="radio" name="unidad" value="radiobutton" checked>
CAJA
<input type="radio"name="unidad" value="radiobutton"></td>
</tr>
<tr>
<td>PRECIO</td>
<td><input type='text' name='preve' id='preve'></td>
</tr>
<tr>
<td>EXISTENCIA</td>
<td><input type='text' name='exist' id='existencia2' size='10'
maxlength='10'></td>
</tr>
<tr>
<td>CATEGORIA</td>
<td><select name='categoria' >
<option>DISCOS DUROS</option>
<option>MOUSES</option>
<option>TARJETAS MADRES</option>
</select></td>
</tr>
<tr>
<td>IMAGEN</td>

37
 <td><input type="file" name="imagen" id="imagen"></td>
</tr>
<tr>
<td>PROMOCION</td>
<td><input type="checkbox" name="promocion" id="promocion" value="1"
checked> </td>
</tr>
<tr>
<td><input type='submit' name='Aceptar' id='Aceptar'
value='Aceptar'></td>
<td><input type='reset' name='Submit2' value='Restablecer'></td>
</tr>
</table>
</form>
</body>
</html>

En el navegador se mostrara as:

REGISTRO DE PRODUCTOS
CLAVE
NOMBRE
UNIDAD PIEZA CAJA
PRECIO
EXISTENCIA
CATEGORIA DISCOS DUROS

IMAGEN
PROMOCION
Aceptar Restablecer

Bsicamente el cdigo consiste en un formulario, en cuyo interior se encuentra una

tabla de 10 filas por 2 columnas, en las celdas de la segunda columna se encuentran
un conjunto de elementos de formulario, entre los que destacan, 4 cuadros de texto, 2
botones de opciones, 1 Lista/Men, 1 casilla de verificacin y 2 botones normales
uno para enviar los datos capturados en el formulario a la pagina 'alta de
productos.php y el otro para limpiar el contenido de cada uno de los elementos
hallados en el formulario.

1.4 EVOLUCIN DEL DESARROLLO DE APLICACIONES WEB

Con la introduccin de Internet y del Web en concreto, se han abierto infinidad de

posibilidades en cuanto al acceso a la informacin desde casi cualquier sitio. Esto

38
representa un desafo a los desarrolladores de aplicaciones, ya que la gran cantidad de
programas escritos con anterioridad se estn transformando a plataforma Web, los
avances en tecnologa demandan cada vez aplicaciones ms rpidas, ligeras y
robustas que permitan utilizar el Web.
Afortunadamente, se tienen herramientas potentes para realizar esto, ya que han
surgido nuevas tecnologas que permiten que el acceso a una base de datos desde el
Web, por ejemplo, sea un mero trmite. El nico problema es decidir entre el
conjunto de posibilidades la correcta para cada situacin.
El viejo Interfaz de entrada comn (CGI) ha cumplido con el propsito de aadir
interactividad a las pginas Web pero sus deficiencias en el desarrollo de aplicaciones
y en la escalabilidad de las mismas ha conducido al desarrollo de aplicaciones
especficos de servidor como Paginas de Servidor Activo (ASP y ASP.NET), Pginas
de Servidor Java (JSP) y PreProcesador de Hipertexto (PHP).
ASP, JSP y PHP son lenguajes ejecutados en el servidor Web y no en el cliente Web,
se encargan de gestionar el acceso y manipulacin de la base de datos para
proporcionar el dinamismo requerido en las pginas Web.

En un principio el aspecto o presentacin que tenan las pginas Web eran

directamente controladas desde cada pgina, estableciendo las propiedades de sus
componentes segn se requiriera, considerando que una aplicacin Web a veces
consta de cientos o miles de estas pginas, modificar el aspecto de todo el sitio
realmente implicaba una gran labor, sin embargo actualmente para realizar esto con
ms eficiencia se lleva a cabo usando Hojas de Estilo en Cascada (CSS).

1.5 HOJAS DE ESTILO EN CASCADA E INTRODUCCIN AL

XML

CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentacin

de los documentos definidos con HTML y XHTML. CSS es la mejor forma de
separar los contenidos y su presentacin y es imprescindible para crear pginas Web
complejas.

Separar la definicin de los contenidos y la definicin de su aspecto presenta

numerosas ventajas, ya que obliga a crear documentos bien definidos y con
significado completo. Adems, mejora la accesibilidad del documento, reduce la
complejidad de su mantenimiento y permite visualizar el mismo documento en
infinidad de dispositivos diferentes.

Al crear una pgina Web, se utiliza en primer lugar el lenguaje HTML para marcar
los contenidos, es decir, para designar la funcin de cada elemento dentro de la
pgina: prrafo, titular, texto destacado, tabla, etc.

39
Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el aspecto de
cada elemento: color, tamao y tipo de letra del texto, separacin horizontal y vertical
entre elementos, posicin de cada elemento dentro de la pgina, etc.

Antes de la adopcin de CSS, los diseadores de pginas Web deban definir el

aspecto de cada elemento dentro de las etiquetas HTML de la pgina. El siguiente
ejemplo muestra una pgina HTML con estilos definidos sin utilizar CSS.

<!-- sin css.htm -->

<html>
<head>
<title>Paginas con Estilos sin CSS</title>
</head>
<body>
<h1><font color="red" face="Arial" size="5"> Pagina sin CSS </font></h1>
<p><font color="gray" face="Verdana" size="2">Los estilos en una pgina le dan la
presentacin a la misma
.</font></p>
</body>
</html>

El ejemplo anterior utiliza la etiqueta <font> 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 <font>. Si el sitio Web entero se compone de 10.000
pginas diferentes, habra que definir 500.000 etiquetas <font>. Como cada etiqueta
<font> 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 <font>, 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:

<!-- con css interna.htm -->

<html>
<head>
<title>Paginas con Estilos utilazando CSS</title>
<style type="text/css">
h1 { color: red; font-family: Arial; font-size: large; }
p { color: gray; font-family: Verdana; font-size: medium; }
</style>
</head>
<body>
<h1>Pgina con CSS Interna</h1>
<p>Los estilos en una pgina le dan la presentacin a la misma
</p>
</body>

40
</html>

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 <h1> 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 <p> 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 <p> 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 <link>. 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 <link> para enlazar el

archivo CSS externo que tiene los estilos que va a utilizar la pgina:

<!-- con css externa.htm -->

<html>
<head>
<title>Paginas con Estilos utilizando Externa CSS</title>
<link href="estilos.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Pagina con CSS Externa</h1>
<p>Los estilos en una pgina le dan la presentacin a la misma
</p>
</body>
</html>

41
Normalmente, la etiqueta <link> 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.
<!-- con css enlinea.htm -->
<html>
<head>
<title>Paginas con CSS en lnea</title>
</head>
<body>
<h1 style= "color:red; font-size:50px;">Pagina con CSS en lnea </h1>
<p style="color: gray; font-family: Verdana; font-size:12px;"> Los estilos en una
pgina le dan la presentacin a la misma</p>
</body>
</html>

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:

Medio Descripcin
all Todos los medios definidos
braille Dispositivos tctiles que emplean el sistema braille
embosed Impresoras braille
handheld Dispositivos de mano: mviles, PDA, etc.
print Impresoras y navegadores en el modo "Vista Previa para Imprimir"
projection Proyectores y dispositivos para presentaciones
screen Pantallas de computadora
speech Sintetizadores para navegadores de voz utilizados por personas discapacitadas
tty Dispositivos textuales limitados como teletipos y terminales de texto
tv 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 @media

Las 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,
margin-left, los dems elementos. Tanto margin porcentaje o auto.
margin: top right como margins() se utilizan para Por defecto es
bottom left cambiar todos estos atributos a la vez. cero.
padding-top, padding- Distancia entre el borde y el Tamao,
right, padding-bottom,
padding-left, contenido de un bloque. porcentaje o auto.
padding: top right Por defecto es
bottom left cero.
border-top-width, Anchura del borde de un bloque. numrico
border-right-width,
border-bottom-width,
border-left-width,
border-width: top right
bottom left
border-style Estilo del borde de un bloque. none, solid o 3D,
por defecto
ninguno (none).
border-color Color del borde de un bloque. cualquier color
width, height Tamao de un bloque. Su mayor Tamao,
utilidad est en su aplicacin a un porcentaje o auto,
elemento grfico. automtico por
defecto.
float Justificacin del contenido de un left, right o none,
bloque. por defecto
ninguna.
clear Permiso para que otro elemento se left, right, both o
pueda colocar a su izquierda o none, por defecto
derecha. ninguno.

PROPIEDADES DE TIPO DE LETRA

Las propiedades del tipo de letra que el usuario va a ver son las siguientes:
Propiedad Descripcin Posibles valores

45
font- Tipo de letra (que Lista de tipos, ya sean genricos o no, separados
family
puede ser genrico) por comas.
font-size Tamao del tipo de xx-small, x-small, small, medium, large, x-
letra. large, xx-large, tamao relativo o tamao
absoluto. Por defecto medium.
font- Grosor del tipo de normal, bold, bolder, lighter o 100-900 (donde
weight
letra (negrita). 900 es la negrita ms gruesa). Por defecto
normal.
font-style Estilo del tipo de normal, italic, italic small-caps, oblique,
letra (cursiva). oblique small-caps o small-caps. Por defecto
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.
text- Efectos variados sobre none, underline (subrayado), overline (como
decoration
el texto. subrayado, pero por encima), line-through
(tachado) o blink (parpadeante); por defecto
ninguno.
vertical- Posicin vertical del baseline (normal), sub (subndice), super
align
texto. (superndice), top, text-top, middle, bottom,
text-bottom o un porcentaje. Por defecto
baseline
text- Transforma el texto a capitalize (pone la primera letra en
transform
maysculas o maysculas), uppercase (convierte todo a
minsculas. maysculas), lowecase (a minsculas) o none,
por defecto no hace nada.
text-align Justificacin del texto. left, right, center o justify
text-indent Tabulacin con que tamao o porcentaje, por defecto cero.
aparece la primera
lnea del texto.

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 <I>), un bloque (<P>) o un 'apaga' el elemento)
elemento de una lista (<LI>).
list-style Estilo de un elemento de una disc, circle, square, decimal,
lista, pudiendo incluir un grfico lower-roman, upper-roman, lower-
alpha, upper-alpha, none o la
al comienzo del mismo.
direccin de un grfico
white- Decide como se manejan los normal y pre
space
espacios, si de manera normal o
como sucede dentro de la etiqueta
<PRE>.

47
PREGUNTAS
1. 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 pgina
empleado2.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 <script> y

</script> . Por ejemplo, si en el cdigo de una pgina Web se incluye la
sentencia

<script language="JavaScript" type="text/JavaScript">

window.alert("Bienvenido a mi sitio web. Gracias...")
</script>

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, incluso

54
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 <?php y ?>. 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, dimensiones, 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 WEB

Los 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 Sesin del

Cliente Administrador

Datos de Productos Compras Datos de Clientes Facturas

Sesin Sesin

Seleccionar Detalle de
Producto Facturas

Fig. 2.6.- Mapa general del sitio Ventas en lnea

En la figura se muestra el mapa general de un pequeo sitio de ventas en lnea que

permite el inicio de sesin a dos tipos de usuarios. Es pequeo comparado con los
diagramas para sitios corporativos, pero demuestra cmo se representan las paginas y
las conexiones entre paginas.

No hay nada mejor que lpiz y papel cuando llega al momento de poner en marcha y
documentar el proceso creativo. Antes de implementar cualquier cosa no hay mejor
forma de expresar las ideas rpidamente que en un bloc de notas, en una servilletas o
pizarra, o cualquier superficie que se encuentre disponible. Se trata de creatividad.

DESARROLLAR EL ASPECTO VISUAL Y COMPORTAMIENTO

El aspecto visual de un sitio hace referencia a su diseo grafico y apariencia visual
global incluido su esquema de color tipografa y estilo de imagen.
Dibujar
Esta es otra oportunidad para sacar lpices, rotuladores y cuadernos. O quizs se
prefiera trabajar las ideas en alguna herramienta de edicin grafica (como
Photoshop). De cualquier forma, es el momento de ser creativo y probar cosas. El
resultado es uno o ms bocetos que muestran l estilo visual propuesto para el sitio.

Un boceto es normalmente un archivo grafico plano en las dimensiones aproximadas

de la ventana del navegador. Cuando es necesario mostrar interactividad (como un
efecto), algunos diseadores utilizan una capa que se puede activar y desactiva para
simular el efecto.

64
En algunos casos puede ser necesario crear una pgina principal prototipo en HTML
para mostrar la interactividad y las caractersticas animadas.

En la fase de direccin artstica es para explorar el aspecto que tendr el sitio, por lo
que los bocetos grficos planos son normalmente adecuados.

El proceso de direccin de arte

En la mayora de los trabajos de desarrollo Web profesionales, el cliente recibe dos o
tres bocetos que muestran su pgina principal en varios estilos visuales.

En algunos casos, se puede incluir un diseo de segundo o tercer nivel si es

importante mostrar cmo se desarrolla el diseo en varios niveles.

De forma ideal, se debe contar con una lista de elementos que cada pgina debe
contener, incluidas imgenes obligatorias, elementos de navegacin y un manuscrito
para el texto. Puede incluso haber un diagrama de la funcionalidad.

Fig. 2.7.- Propuestas de los bocetos del sitio Ventas en lnea

Despus de revisar los bocetos, el cliente elige uno, a menudo con una lista de
cambios, solicitando una nueva ronda de diseo hasta que el diseo final est
aprobado.

65
 PRODUCIR UN PROTOTIPO
Una vez que el diseo esta aprobado y el documento estn listos, el sitio entra en la
fase de produccin se puede realizar por una persona. Es ms comn en el diseo
Web comercial contar con un equipo de personas que trabajan en tareas
especializadas.

El departamento de arte utiliza sus herramientas graficas para crear todos los grficos
necesarios para el sitio. El departamento de produccin codifica el contenido con
HTML y dems lenguajes requeridos, formatea el texto con hojas de estilo. Pueden
crear las hojas finales o simplemente plantillas que se rellenan con el contenido en el
momento. Los programadores escriben los scripts y aplicaciones del lado del servidor
necesarias para que el sitio funcione segn lo esperado. Puede haber tambin
elementos multimedia como videos o pelculas flash. Es decir, todas las partes del
sitio se tienen que crear.

En algn momento, todas estas piezas se juntan en un sitio. Este no es necesariamente

otro paso, sino que ms bien es un proceso continuo, como en el diseo de software,
el primer prototipo a menudo se denomina la versin alfa. Se debera poner
disponible nicamente a las personas dentro del equipo Web para su revisin antes de
presentrselo al cliente. Despus de los cambios, la segunda revisin se denomina
beta. El cliente debera implicarse en esta fase. En este punto, hay todava mucho
que hacer antes de que el sitio est listo para llevarse a la Web. Existen tambin sitios
ah afuera, a menudo aplicaciones Web y servicios, que ponen disponibles sus
versiones beta al pblico o una base limitada de suscriptores con el fin de recibir sus
observaciones o comentarios.

PROBARLO
Todos los sitios Web se tienen que probar antes de que estn listos para el pblico.
Los desarrolladores Web profesionales dedican tiempo y recursos al calendario de
produccin para realizar pruebas. Tanto formalmente como informalmente, los sitios
se deberan probar para funcionalidad bsica, rendimiento en diferentes entornos de
navegacin y facilidad de uso.

El sitio se puede probar localmente (en el disco duro) antes de subirse a su lugar
definitivo en el servidor Web. Tambin es de utilidad establecer un sitio de pruebas
oculto en el servidor de modo que los problemas se puedan resolver en su entorno
natural antes de hacerlo pblico.

Comprobacin bsica de calidad

Como mnimo, todos los sitios se deberan comprobar para asegurar de que
funcionan. En el negocio del diseo Web, comprobar un sitio en busca de
funcionalidad bsica es parte de lo que se denomina la fase de control de calidad de la
produccin.

Las siguientes preguntas abordan algunos de los requerimientos mnimos antes de

publicar un sitio en la Web.

66
 Est todo el contenido?: asegrese de que no falta ningn contenido.
Existen errores tipogrficos o errores gramaticales?: la importancia de revisar
un texto a veces se pasa por alto, pero los errores en la copia pueden daar
seriamente la credibilidad percibida del sitio.
Funcionan todos los vnculos?: es fcil dejar vnculos sin vincular durante el
proceso de produccin. Tambin es posible que algunos archivos se hayan
movido de sitio y que los vnculos no estn actualizados. Antes de salir a la
Web, se debe comprobar que todos los vnculos en las pginas son correctos.
Se muestran todas las imgenes?: Confirmar que todos los archivos grficos
estn en el directorio adecuado y que la ruta de acceso correcta se utiliza en
los elementos para evitar que falten imgenes.
Funcionan adecuadamente todos los scripts y aplicaciones?: Ejecutar las
paginas en algunos escenarios tpicos de usuario (completando formularios,
comprando un producto, o cualquier otra interaccin que tenga sentido para el
sitio) para asegurarse de que todo funciona como debera.

Prueba del entorno de navegacin

El sitio se ver en un amplio rango de entornos de navegacin que impactara en la
forma que tiene y sus funciones. Otra parte de la comprobacin de calidad es
comprobar las pginas bajo tantas condiciones como sea posible.

Normalmente se debe probar el sitio en diferentes sistemas operativos y numerosas

versiones de navegador.

Un sitio robusto no tendr ningn problema cuando se pruebe de acuerdo a los

siguientes criterios.
Qu aspecto tiene la pgina en diferentes navegadores?: en otra plataforma?
Los navegadores son desiguales en su soporte de hojas de estilo en cascada,
por lo que si se utiliza CSS para el diseo de pgina, es necesario que se vea
en tantos navegadores como sea posible
Cmo funciona el sitio en diferentes navegadores?: en otra plataforma? De
forma similar, existen diferencia de navegador en el soporte de script, por lo
tanto, es conveniente realizar pruebas de funcionalidad bajo ms de una
configuracin de navegador/plataforma.
Qu les pasa a las paginas cuando la ventana del navegador se hace muy
grande o muy pequea?: Qu pasa si el texto se ampla mucho o se reduce
mucho? Puede el sitio soportar una cierta cantidad de ventanas y tamao de
texto? Se sale el contenido de la pantalla? Se divide la pgina?
Se puede utilizar el sitio en un navegador de solo texto?: Qu vern los
usuarios si acceden a su pgina con un telfono mvil o quipo similar? Las
pginas deberan estar accesibles en todos los dispositivos de navegacin.

67
 Merece la pena ver el sitio bajo condiciones mnimas para ver si puede
realizar alguna modificacin para mejorar la experiencia.
Es el sitio til con los grficos desactivados?: Algunos usuarios con
conexiones ms lentas pueden navegar por la Web con grficos desactivados
en el navegador para agilizar la visualizacin del contenido. Algunos
navegadores muestran el texto alternativo para cada elemento de imagen pero
otros no. Ha tenido en cuenta a esos usuarios?
Qu sucede si el usuario no puede ver los elementos multimedia?: Sera
estupendo si el usuario tuviera los plugins necesarios para ver la multimedia
como las pelculas flash o Windows media, pero desafortunadamente, este no
es el caso. Proporciona ayuda para obtener los plugins que necesita? Existen
versiones alternativas de su contenido para aquellos que no puedan ver la
multimedia?.
Qu aspecto tiene el sitio en una conexin de modem por lnea telefnica?:
existen todava una importante cantidad de usuarios que acceden a la Web con
conexiones lentas. Hay algo que puede hacer para que sus pginas se carguen
rpidamente?

Pruebas de usuario
Otro tipo de pruebas que es importante realizar son las pruebas de usuario. Este
proceso implica sentar a gente en el sitio y ver lo sencillo que les es encontrar
informacin o completar tareas. Las pruebas de usuario se llevan a cabo pronto en el
proceso de desarrollo para que el diseo del sitio se pueda ajustar antes de que
empiece la produccin seria. No es raro realizar pruebas adicionales de usabilidad en
intervalos regulares durante el proceso de produccin e incluso despus de que se
haya lanzado el sitio, para que el sitio se pueda modificar para atender mejor las
necesidades de los visitantes.

Existen compaas que se puede contratar para que realicen pruebas controladas, pero
el precio normalmente es elevado, siendo una opcin solamente para sitios Web
comerciales con importantes presupuestos. Sin embargo, es posible llevar a cabo una
prueba de usuario informal con los miembros de la familia, compaeros de trabajo,
amigos y cualquier otra persona que consiga que se siente delante de la computadora
y conteste algunas preguntas.

Existen dos tipos generales de pruebas de usuario: comportamiento observado y

pruebas orientadas a tareas. En la primera, la persona se sienta delante del sitio y lo
explore por su cuenta. Proporcionan informacin a medida que se va avanzando,
anotando lo que le gusta y lo que no le gusta, que est claro y que est confuso.

En las pruebas orientadas a tareas, a los usuarios se les proporciona una serie de
tareas de dificultad variada a realizar en el sitio como averiguar quien ofrece las
videocmaras a mejor precio. Un observador toma notas de cmo se completa la
tarea, al igual que lo vnculos que sigue el usuario en el proceso de completar la tarea.
Algunas preguntas que le gustara contestar por medio de las pruebas de usuarios son:

68
 Pueden los usuarios decir a primera vista de que se trata un sitio?
Existen obstculos en la forma de alcanzar los objetivos? Pueden encontrar
fcilmente informacin crtica o realizar una compra?
Disfrutan las personas utilizando el sitio?
Existe una tarea determinada o caracterstica en el sitio al que pare que
tropiezan mltiples usuarios?

LANZAR EL SITIO
Una vez que se tiene todos los detalles resueltos para el sitio, es el momento de
enviarlo al servidor final, y ponerlo disponible al mundo.

Es una buena idea realizar una ltima ronda de pruebas para asegurarse que todo sea
transferido con xito y que las pginas funcionan adecuadamente bajo la
configuracin del servidor final. Esto puede parecer trabajo adicional, pero esto es la
reputacin del negocio o la del cliente la que va en el xito del sitio Web, por lo que
prestar atencin a los detalles es esencial.

MANTENER EL SITIO
Un sitio Web nunca est del todo terminado. De hecho la posibilidad de realizar
actualizacin y mantener el contenido actualizado es una de las ventajas del medio
Web. Es importante tener una estrategia para lo que ocurrira con el sitio despus de
su lanzamiento inicial.

Aunque el mantenimiento es un proceso continuo que ocurre despus de que el sitio

haya sido creado inicialmente, las decisiones relacionadas con el mantenimiento se
deberan tomar pronto en el proceso de desarrollo. Por ejemplo, se debera dejar claro
quin ser el responsable del mantenimiento del sitio, tambin decidir que partes del
sitio se actualizaran y con qu frecuencia. La actualizacin afectara a la forma en que
se organice la informacin y diseo del sitio.

Tambin se debera considerar la vida til del sitio. Si es un sitio que proporciona un
evento especifico, Qu suceder con el sitio cuando el evento termina? Incluso en
los sitios diseados para estar en funcionamiento un tiempo requerirn normalmente
un rediseo despus de unos aos para mantenerse al tanto de los cambios de
contenido y las practicas actuales de publicaciones.

2.6 ASPECTOS DE SEGURIDAD.

En este tema se analiza el papel de la seguridad en los sitios Web dinmicos. Se
indicar quin puede estar interesado en la informacin y como podran obtenerla, los
principios implicados en la creacin de una poltica para evitar este tipo de
problemas y algunas tecnologas disponibles para salvaguardad la seguridad de un
sitio Web incluida la criptografa, la autentificacin y el rastreo.

69
Entre los aspectos de seguridad estn:
Importancia de la informacin
Amenazas contra seguridad
Equilibrio entre usabilidad, rendimiento, costes y seguridad
Crear una poltica de seguridad
Principios de autentificacin
Fundamentos de la criptografa
Criptografa de la clave publica
Firmas digitales
Certificados digitales
Servidores Web seguros
Auditorias y registros
Cortafuegos
Copia de seguridad de datos
Seguridad fsica

IMPORTANCIA DE LA INFORMACIN
Al analizar el tema de la seguridad, lo primero que se debe valorar es la importancia
de los datos que se est protegiendo, tanto para el propietario como para los posibles
atacantes.
Puede resultar tentador creer que siempre debera aplicarse el nivel ms alto
seguridad a todos los sitios, pero la proteccin tiene un coste. Antes de decidir el
esfuerzo o los gastos que se desean invertir en el sistema de seguridad, es necesario
determinar el valor de la informacin.
El valor de la informacin almacenada en el equipo de un usuario que lo utilice para
divertirse, el de una empresa, el de un banco y el de una organizacin militar es
diferente, al igual que varan los esfuerzos que invertir un atacante para obtener
acceso a dicha informacin. Se debe determinar el valor que tiene los contenidos
almacenados en los equipos para un visitante mal intencionado.
Los usuarios que utilizan la computadora como pasatiempo dispondrn de tiempo
limitado para profundizar en el tema de la seguridad de sus sistemas o en aumentarla.
Como la informacin que almacenaran en sus equipos es poco probable que interese a
otros usuarios, los ataques sern poco frecuentes y el esfuerzo invertido en ellos ser
limitado. Sin embargo, todos los usuarios de equipos con conexin a la red deberan
tomar una serie de precauciones ya que incluso los equipos con los datos menos
interesantes pueden utilizarse como plataformas para lanzar ataques a otros sistemas.
Los equipos militares son un objetivo obvio tanto para individuos como para
gobiernos extranjeros. Para atacar a los gobiernos es necesario disponer de muchos
medios, por lo que resulta aconsejable invertir en personal y otro tipo de recursos
para garantizar la aplicacin de todas las precauciones posibles.

70
AMENAZAS CONTRA LA SEGURIDAD.
Las amenazas variaran en funcin del tipo de sitio Web pero se pueden citar las
siguientes:
Exposicin de datos confidenciales
Perdida o destruccin de datos
Modificar datos
Denegacin de servicio
Errores en el software
Repudio

Exposicin de datos confidenciales

La informacin almacenada en los equipos o la transmitida de un equipo a otro,
pueden ser confidenciales. Podran tratarse de informacin destinada nicamente a
determinadas personas, como listas de precios de mayoristas, informacin
suministrada por un cliente, como su contrasea, datos de contacto o el nmero de
una tarjeta de crdito.
Los servidores Web no son el lugar ms aconsejable en el que se deba guardar
informacin secreta. Si se almacenan los datos sobre nomina o el plan para la
dominacin del mundo en una computadora, no se debera utilizar el mismo que el
utilizado como servidor Web. Los servidores Web son equipos diseados para su
acceso pblico por lo que solo deberan contener informacin que se ofrezca
pblicamente o que se acabe de recoger del pblico. Para reducir el riesgo de la
exposicin de datos, se debe limitar los mtodos de acceso a la informacin y los
usuarios que disponen de dicho acceso, lo cual implica desarrollar las labores de
diseo teniendo presente la seguridad, configurar el servidor y el software de manera
correcta, programar con atencin, realizar pruebas exhaustivas, eliminar los servicios
innecesarios de servidor Web y exigir autentificacin.

Se deben Suprimir los servicios innecesarios de un servidor Web para reducir el

nmero de puntos dbiles potenciales. Cada servicio que este ejecutando puede
resultar vulnerable. Es necesario mantener todos los servicios actualizados para
eliminar los puntos vulnerables conocidos. Los servicios no utilizados pueden resultar
peligrosos. Si no se utiliza el comando rcp, Por qu tenerlo instalado?, los sistemas
operativos actuales instalaran una gran cantidad de servicios que no se necesitan y
que se debera eliminar.

La autenticacin implica solicitar a los usuarios que demuestren su identidad. Cuando

un sistema sabe quien realiza la peticin, puede decidir si dicha persona dispone de
acceso. Existen varios mtodos de autenticacin de los cuales solo se utilizan dos de
forma generalizada: las contraseas y las firmas digitales. Se analizaran ms adelante.

Los datos tambin corren el riesgo de exposicin en sus trayectos por la red. Las
redes TCP/IP incorporan una gran cantidad de funciones que han contribuido a
convertirlas en el estndar de facto para la conexin de diversas redes como internet.
Sin embargo, la seguridad no se incluye entre ellas. Los protocolos TCP/IP dividen
los datos en paquetes y los reenvan de equipo en equipo hasta que alcanza su destino.

71
Por lo tanto, los datos pasan a travs de una gran cantidad de computadoras hasta
llegar a su destinatario, como se ilustra en la figura 2.8, y cualquiera de ellas puede
ver los datos en su trnsito.

Fig. 2.8.- Rutas por donde pueden viajar los mensajes

Los datos enviados a travs de internet recorren una gran cantidad de equipos
potencialmente inseguros.

Existen comandos y aplicaciones de software para ver la ruta que siguen los datos
desde un equipo origen hasta el equipo de destino. Si los datos van dirigidos a un
equipo de un mismo pas, podran atravesar una decena de equipos diferentes. Si
fueran destinados a un equipo situado fuera del pas, el nmero de intermediarios
podra supera los veinte. Si una organizacin es de gran tamao y consta de una red
compleja, los datos podran recorrer hasta cinco equipos antes de abandonar el
edificio. Para proteger la informacin confidencial, se pueden cifrar los datos antes de
enviarlos a travs de una red y descifrarlos en el otro extremo. Los servidores Web
suelen utilizar el sistema SSL (Secure Socket Layer), desarrollando por Netscape
para realizar esta tarea mientras los datos navegan entre los servidores Web y los
navegadores.
Se trata de una forma bastante barata en trminos de costes y de esfuerzos de proteger
las transmisiones, pero como el servidor necesita cifrar y descifrar los datos en lugar
de enviarlos y recibirlos simplemente, el nmero de visitantes por segundo al que
puede dar servicio el equipo se reduce drsticamente, debido al tiempo que requiere
este proceso.

Prdida o destruccin de la informacin

La prdida de datos puede resultar ms costosa que su apropiacin indebida. Si se
llevan meses construyendo un sitio, recogiendo informacin sobre usuarios y pedidos,
si no se ha realizado ninguna copia de seguridad de esos datos, se vern obligados a
volver a escribir el sitio Web y a comenzar desde cero.

72
Un pirata informtico podra colarse en el sistema y formatear el disco duro. Tambin
podra ocurrir que un programador o un administrador poco atento eliminen el disco
sin querer o que un disco se estropee. Los discos duros en ocasiones fallan.
Se pueden adoptar varias medidas para reducir la probabilidad de perder datos.
Proteger los servidores contra ataques informticos. Reducir al mnimo los empleados
con acceso al equipo. Contratar nicamente personal competente y atento. Comprar
discos duros de calidad.
Independientemente del causante de las prdidas de datos, solo hay una forma de
proteccin real: las copias de seguridad. La realizacin de copias de seguridad es una
funcin vital. Asegrese de volcar sus datos de manera peridica y de almacenar las
copias de seguridad lejos de los equipos habituales. Aunque es poco probable que los
locales de su empresa se quemen o sufran alguna otra catstrofe, el almacenamiento
de una copia de seguridad fuera de ellos es una medida de seguridad barata y eficaz.

Modificar datos
Aunque la prdida de datos puede causar muchos daos, su modificacin puede
resultar aun peor. La eliminacin completa de los datos no tardara mucho tiempo en
detectarse sin embargo detectar una modificacin de datos requerira de mucho ms.
Entre las formas de modificacin se incluyen cambios en los archivos de datos
ejecutables. La intencin de un pirata informtico puede ser modificar el aspecto de la
Web u obtener beneficios fraudulentos. Mediante la sustitucin de archivos
ejecutables con versiones saboteadas, un pirata informtico que haya logrado entrar
una vez en el sistema podra crear una puerta trasera secreta para futuras visitas.

Se puede proteger los datos contra su modificacin al viajar por la red mediante una
firma. Esta tcnica no impide la modificacin de los datos pero, si el receptor
comprueba que la firma coincide al recibir los archivos, sabr que el archivo no se ha
modificado. Si cifra los datos para proteger contra la visualizacin no autorizada,
resultaran muy difciles de modificar durante el trayecto sin su deteccin.
La proteccin de los archivos almacenados en un servidor frente a su modificacin
exige el uso de las funciones de permisos de acceso a archivos que incorpore el
sistema operativo y protege el sistema de acceso no autorizado. La aplicacin de
permiso de archivo permite autorizar el uso de sistema, pero no modificar los
archivos del sistema ni de otros usuarios.

Detectar las modificaciones puede resultar difcil. Si se descubre que alguien ha

penetrado en el sistema de seguridad, Cmo se puede saber si se han modificado
archivos importantes? Algunos archivos, como los archivos datos que se almacenan
en una base de datos, estn ideados para cambiar con el paso del tiempo. Sin
embargo, la intencin de otros es permanecer invariables desde su instalacin a
menos que se actualicen deliberadamente. La modificacin de programas y datos
puede resultar engaosa, y aunque los programas puedan reinstalarse si se sospecha
que han sido modificados, puede que no sepa que versin de los datos esta intacta.

Existen aplicaciones que permiten comprobar la integridad de los archivos, como

Tripwire (htt://www.tripwire.com). Esta aplicacin registra informacin sobre
archivos en un estado seguro, probablemente inmediatamente despus de la

73
instalacin, y permite utilizarla en un momento posterior para verificar si los archivos
han variado.

Negacin de servicio
Una de las amenazas ms difciles de evitar es lo que se denominado Negacin de
servicio (DoS en Ingles). Se produce cuando alguien impide a los usuarios acceder a
un servicio o retrasa el acceso a un servicio en el que el tiempo es crucial.
A principio de 2000, se produjo una oleada de ataques DoS distribuidos a importantes
sitios Web. Entre las vctimas se encontraba yahoo!, eBay, Amazon, ETrade y
Buy.com. Estos sitios estn acostumbrados a niveles de trafico que solo se puede
concebir en sueos, pero siguen siendo vulnerables a este tipo de ataques. Aunque los
atacantes no ganan nada con conseguirlo colapsar un sitio, el propietario del mismo
puede perder ingreso, tiempo y reputacin.
Algunos sitios esperan concentrar sus transacciones en determinadas horas. Algunos
sitios de apuestas en lnea experimentan una mayor demanda antes de un evento
deportivo importante.
Una de las razones de la dificultad de evitar este tipo de ataques es que se pueden
introducir de diferentes formas. Se puede instalar un programa en el equipo de la
victima que utilice el tiempo del procesador del sistema, el envi inverso de correo
basura o recurrir a una herramienta automatizada. El correo basura inverso enva
correo basura en el que se incluye el destinatario como emisor. De esta forma, el
destinatario recibir miles de respuestas de usuario enfadados.

Existen herramientas automatizadas que pueden lanzar ataques DoS a un destinatario

no concreto. No hay que ser un genio para buscar los puntos dbiles de una serie de
equipos e instalar la herramienta en los mismos. Como el proceso esta automatizado,
un atacante puede instalar la herramienta en un solo host en cuestin de segundos.
Una vez afectados varios equipos, reciben instrucciones para inundar el destino con
trfico de red.

Protegerse de ataques DoS es una difcil tarea. Si se realiza una bsqueda, se pueden
descubrir los puertos predeterminados que utilizan las herramientas DoS habituales y
cerrarlos. Puede que el enrutador cuente con un mecanismo para limitar el porcentaje
de trfico que utiliza determinados protocolos como por ejemplo ICMP. Resulta ms
sencillo detectar los host de una red utilizada para atacar a otros que proteger los
equipos de posibles ataques. Si todos los administradores de redes se comprometieran
a vigilar su propia red, los ataques DoS no serian un problema. Como existen tantos
mtodos de ataque, la nica defensa realmente eficaz consiste en controlar el
comportamiento del trfico normal y contar con una serie de expertos para que
adopten las medidas oportunas en caso de que se produzca alguna situacin fuera de
lo normal.

Errores en el software
Es posible que el software que se haya comprado, obtenido o escrito incluya errores
graves. Dados los cortos plazos de desarrollo asignado a los proyectos Web, es muy

74
probable que el software incluya errores. Todas las iniciativas comerciales basadas en
procesos informticos resultaran vulnerables a software con errores.
Los errores en el software pueden causar todo tipo de compartimientos impredecibles
incluida la indisponibilidad del servicio, lagunas de seguridad, prdidas financieras y
servicios deficientes. Entre las causad habituales de los errores se pueden citar las
malas especificaciones tcnicas, suposiciones errneas realizadas por los
desarrolladores y pruebas incompletas.

Malas especificaciones tcnicas

Cuanto ms escasa y ambigua resulte su documentacin de diseo, ms probables que
el producto final incluya errores. Aunque puede que resulte obvio especificar la
anulacin de un pedido si se rechaza la tarjeta de crdito de un cliente. Mientras
menos experiencia tengan los desarrolladores con el tipo de sistemas con el que estn
trabajando, ms precisas deberan ser las especificaciones tcnicas.

Suposiciones errneas hechas por los desarrolladores

Los diseadores y los programadores de un sistema necesitan realizar una gran

cantidad de suposiciones. Es de esperar que las documenten y que resulten
aceptadas. Sin embargo, las suposiciones pueden resultar errneas. Por ejemplo, un
desarrollador podra asumir que los datos de entrada sern validos, que no incluirn
caracteres inusuales o qu cantidad de caracteres introducidos ser inferior a un
tamao dado. Tambin podra asumir que no tendrn lugar dos acciones simultaneas
que entren en conflicto o que una tarea de procesamiento compleja lleva ms tiempo
que una tarea sencilla.
Suposiciones como estas se pueden deslizar por que suelen ser ciertas. Un pirata
informtico puede aprovecharse de un desbordamiento de bfer generado por una
suposicin hecha por un programador con respecto a la longitud mxima de los datos
de entrada o un usuario legitimo puede obtener mensajes de error confuso o
abandonar la visita por que a los desarrolladores no se les ocurri prever que el
nombre de una persona puede incluir un apostrofe. Este tipo de errores se pueden
detectar y solucionar mediante una combinacin de pruebas y revisiones detallada del
cdigo.
Histricamente, el sistema operativo o las debilidades del nivel de aplicacin
exploradas por los piratas informtica se relacionan con los desbordamientos de bfer
o con los errores de sincronizacin.

Pruebas incompletas
Resulta prcticamente imposible verificar todas las posibles entradas de los usuarios
en todos dispositivos de hardware existentes, con todos los sistemas operativos
posibles y utilizando todos los parmetros de usuarios disponibles.
Es necesario implementar un plan de pruebas bien diseado que verifique todas las
funciones del software en un conjunto representativo de equipos. Un conjunto de
pruebas bien planteado debera probar todas las lneas de cdigo del proyecto al
menos una vez. De manera ideal, estas pruebas deberan automatizarse para poder
ejecutarlas en los equipos seleccionados con muy poco esfuerzo.

75
El problema ms importante de esta operacin es que se trata de un trabajo repetitivo
muy poco atractivo. Aunque hay gente a la que le gusta romper cosas, hay muy pocas
a las que le guste romper la misma cosa una y otra vez. Es importante que en este
proceso participen otras personas adems de los desarrolladores originales. Uno de
los objetivos principales de las pruebas es detectar las suposiciones errneas
realizadas por los desarrolladores. Es probable que una persona no implicada realice
suposiciones diferentes. Adems, los profesionales no suelen mostrarse muy
implicados a buscar errores dentro de su trabajo.

Repudio
El ultimo riesgo que considerar es el repudio. El repudio tiene lugar cuando una parte
implicada en una transaccin niega haber tomado parte en ella. En el comercio
electrnico puede tratarse de una persona que realice un pedido a travs del sitio Web
y que rehace la autorizacin para realizar el cargo sobre su tarjeta de crdito, o una
persona que acepte algo procedente del correo electrnico y que despus afirme que
alguien falsifico dicho correo.
De manera ideal, las transacciones financieras deberan garantizar la seguridad de que
ninguna de las partes las repudiara. Ninguna parte podra denegar su participacin en
una transaccin o, para ser ms exacto, ambas partes podran demostrar de manera
terminante las acciones realizadas por la otra parte ante un tercero, como por ejemplo
un tribunal. En la prctica, esto no suele ocurrir. La autenticacin ofrece ciertas
ganancias sobre la parte con la que se est tratando. Los certificados digitales de
autenticacin emitidos por una organizacin de confianza brindan una gran fiabilidad.
Tambin deberan poder certificarse los contenidos de los mensajes enviados por
cualquiera de las partes.
Para las transacciones entre las partes con una relacin ya establecida, los certificados
digitales y el uso de comunicaciones cifradas o firmadas proporcionan una forma
efectiva de limitar el repudio. Si las transacciones son aisladas, como el contacto
inicial entre un sitio de comercio electrnico y un usuario que utilice una tarjeta de
crdito, esta opcin no resulta tan prctica.

Las compaas de comercio electrnico deben estar dispuestas a probar su identidad y

a contratar los servicios de una autoridad de certificacin como VeriSign
(http://www.verisign.com) o Thawte (http://www.thawte.com) para garantizar la
autenticidad de la compaa. En las pequeas transacciones, los comerciantes estn
dispuestos a admitir un determinado nivel de fraude o riesgo de repudio a cambios de
mantener el nivel de transacciones.

EQUILIBRIO ENTRE USABILIDAD, RENDIMIENTO, COSTE Y

SEGURIDAD

Por su propia naturaleza, la Web es un lugar peligroso. Este medio est diseado para
permitir que numerosos usuarios soliciten servicios desde sus equipos. La mayor
parte de estas peticiones realizan peticiones de pginas Web perfectamente legtimas,
pero al conectar sus equipos a internet tambin existe la posibilidad de que la gente
realice otros tipos de conexiones.

76
Aunque resulta tentador asumir que es apropiado establecer el nivel de seguridad,
ms alto, no suele ser as. Si se desea estar completamente protegido, tendr que
colocar todos los equipos en una caja fuerte sin conexin a la red. Para que los
equipos resulten accesibles se puedan utilizar, es necesario rebajar el nivel de
seguridad de alguna manera.
Se debe buscar el equilibrio entre la seguridad, la usabilidad, el coste y el
rendimiento. Si se aumenta la seguridad de un servicio se puede reducir su capacidad
de uso, por ejemplo, al limitar lo que puede hacer la gente o pedir que se identifiquen.
El incremento de la seguridad tambin puede reducir el nivel de rendimiento de los
equipos. La ejecucin de software para lograr que el sistema resulte ms seguro
(como sistemas de encriptacin y deteccin de intrusos, escneres de virus y
operaciones de registros de usuario) absorbe recursos. Se necesita mucho ms
potencial de procesamiento para suministrar una sesin cifrada, como una conexin
SSL a un sitio Web, que una sesin normal. La prdida de rendimiento se puede
compensar con la adquisicin de equipos o hardware ms rpido que este
especialmente diseado para operaciones de encriptacin.
El rendimiento, la usabilidad, el coste y la seguridad se pueden considerar como
objetivos contrapuestos. Se debern examinar los pros y los contras de cada opcin y
tomar una decisin que logre un compromiso en funcin del valor de la informacin,
del presupuesto, de la cantidad de visitas esperadas y de los obstculos que considere
que aceptaran los usuarios legtimos.

CREAR UNA POLTICA DE SEGURIDAD

Una poltica de seguridad es un documento que describe

La filosofa general sobre seguridad en una organizacin
Que se debe proteger: software, hardware y datos
Quien es responsable de la proteccin de estos elementos
Estndares de seguridad e indicadores para medir el cumplimiento de dichos
estndares

A la hora de desarrollar la poltica de seguridad se pueden aplicar las mismas reglas

utilizadas para escribir un conjunto de requisitos de software. En esta poltica no
debera hablarse de implementaciones o soluciones, si no de requisitos de seguridad y
objetivos dentro del entorno. Y no debera actualizarse a menudo.

Se debera crear un documento en el que se establezcan las directrices utilizadas para

medir el cumplimiento de la poltica de seguridad en un entorno dado. Se pueden
establecer directrices diferentes para las distintas partes de la organizacin. Sera
como un documento de diseo o un procedimiento manual en el que se recoja que se
est haciendo para garantizar el nivel de seguridad requerido.

PRINCIPIO DE AUTENTICACIN

El objetivo de la autenticacin es demostrar que alguien es quien dice ser. Existen

muchas formas de suministrar autenticacin pero como en el caso de muchas medidas

77
de seguridad, cuanto ms seguro son los mtodos ms problemticos resultan de
utilizar.

Las tcnicas de autenticacin incluyen el uso de contraseas, firmas digitales,

medidas biomtricas mediante escneres de huellas y medidas que implican el uso de
hardware como tarjetas inteligentes. En la Web solo se utilizan dos de manera
extendida: las contraseas y las firmas digitales.

Las medidas biomtricas y la mayor parte de las soluciones de hardware implican el

uso de dispositivos de entrada especiales, lo que limitara el acceso a aquellos
usuarios autorizados con computadoras equipados. Esta opcin podra resultar
aceptable o incluso deseable para obtener acceso a los sistemas internos de una
organizacin, pero reduce gran parte de las ventajas de permitir el acceso al sistema
en la Web.
Las contraseas resultan fciles de implementar, sencillas de utilizar y no requieren el
uso de dispositivos de entrada especiales. Suministran un determinado nivel de
autenticacin pero es posible que resulten insuficientes para sistemas de alta
seguridad.
El concepto de una contrasea es sencillo. El usuario y el sistema conocen la
contrasea. Si otro visitante afirma ser un usuario y conoce su contrasea, el sistema
lo aceptar. Este sistema resulta seguro siempre y cuando nadie ms sepa o pueda
adivinar la contrasea. Las contraseas presentan en s mismas varios puntos dbiles
y no suministran autenticacin segura.

Muchas contraseas resultan fciles de averiguar. Si se permite que los usuarios

seleccionen sus propias contraseas, un 50% escoger contraseas fciles de
descubrir, como vocablos de un diccionario o el nombre de usuario. Puede obligar a
los usuarios a incluir nmeros o signos de puntuacin en sus contraseas, aunque esta
medida afectara a ala usabilidad.

Otra opcin consiste en mostrar a los usuarios como seleccionar mejores contraseas
pero de todas maneras el 25% de ellos seguirn utilizando contraseas sencillas de
adivinar. Se pueden implementar polticas de contraseas que impidan a los usuarios
seleccionar combinaciones fciles comparando las contraseas introducidas con un
diccionario de letras en maysculas y minsculas. El peligro de una poltica de este
tipo es que los usuarios legtimos no logren recordar las contraseas escogidas. Las
contraseas difciles de recordar aumentan la probabilidad de que los usuarios
realicen una accin poco segura como escribirlas en una nota y pegarla en sus
monitores. Es necesario educar a los usuarios para que no escriban sus contraseas ni
las comuniquen por telfono a alguien que afirme estar trabando en el sistema.
Las contraseas solo deberan capturarse electrnicamente. Mediante el uso de
programas para capturar pulsaciones del teclado en una terminal o la informacin que
circula por la red, los piratas informticos pueden capturar pares de nombres de
usuarios y contraseas. Puede limitar las oportunidades de capturar contraseas
cifrando el trfico de red.
A pesar de sus defectos potenciales, las contraseas son una forma sencilla y
relativamente efectiva de autentificar usuarios. Puede que el nivel de anonimato no

78
resulte adecuado para la seguridad nacional, pero son una solucin perfecta para
comprobar el estado del pedido de un cliente.

FUNDAMENTOS DE LA ENCRIPTACIN
Un algoritmo de encriptacin es un proceso matemtico que transforma informacin
en una cadena aparentemente aleatoria de datos.

Los datos de los que se parte son textos sin procesar, aun que no es importante para el
proceso lo que represente la informacin (que se trate de texto o de otro tipo de
datos). La informacin cifrada se conoce como texto encriptado, aunque se parezca
poco a un texto en la mayor parte de los casos. El texto que se desea cifrar se
introduce en un motor de encriptacin, que podra ser un programa informtico. El
motor devuelve el texto encriptado.

Texto sin Algoritmo de Texto

procesar encriptacin cifrado

Fig. 2.9.- Encriptacin de mensajes

Muchas contraseas se almacenan utilizando un algoritmo de encriptacin de una

sola direccin. Para poder determinar si una contrasea introducida resulta correcta,
no es necesario descifrar la contrasea almacenada. En su lugar, bastara con cifrar la
contrasea introducida y compararla con la versin almacenada, esta es mecanismo
utilizado con la funcin sha1() de PHP que se ver ms adelante en el tercer captulo
(3.12 Seguridad)

Muchos procesos de encriptacin se pueden invertir, aunque no todos. El proceso

inverso al encriptacin se conoce como decriptacin. En la siguiente figura se
muestra un proceso de encriptacin de doble sentido.

Fig. 2.10.- Encriptacin simtrica

El proceso de encriptacin toma texto sin procesar y lo transforma en texto cifrado

con aspecto aleatorio. El proceso de decriptacin toma el texto encriptado y lo
transforma en el texto original.

La criptografa tiene unos 4000 aos de antigedad, pero alcanzo la mayora de edad
en la segunda guerra mundial. Su crecimiento desde entonces ha seguido de cerca al
desarrollo de las redes de computadoras. En un principio solo era utilizada por las
instituciones militares y organizaciones financieras. En los aos 70 se extendi su uso
y en los aos 90 se hizo omnipresente. En los ltimos aos, la encriptacin ha pasado

79
de ser un concepto que solo la gente conoca por las pelculas de espas y de la
segunda guerra mundial a convertirse en algo de lo que se habla en los peridicos y se
utiliza cada vez que se compra algo a travs de navegadores Web.

Existen muchos algoritmos de encriptacin disponibles. Algunos utilizan una clave

secreta o privada, y otros, utilizan una clave pblica y una clave privada distinta.

Encriptacin de la clave privada

La encriptacin de la clave privada se basa en usuarios autorizados que conocen o
disponen de acceso a una clave. Esta clave debe mantenerse en secreto ya que de lo
contrario los mensaje cifrados podran ser ledos por personas no autorizadas como se
muestra en al figura anterior, tanto el remitente (la persona que cifra el mensaje)
como el receptor (el que descifra el mensaje) tienen la misma clave.
El algoritmo de clave secreta ms utilizado es DES (del ingles Data Ecryptation
Stanar, Estandar de Encriptacin de Datos). Fue desarrollado por IBM en los aos 70
y fue adoptado como el estndar americano para comunicaciones comerciales y
gubernamentales no clasificadas. La velocidad de las computadoras ha aumentado
mucho desde entonces y DES ha quedado obsoleto desde al menos 1998.
Otros sistemas de claves secretas conocidos son RC2, RC4, RC5. Triple DES e
IDEA. El sistema triple DES resulta bastante seguro (paradjicamente, este sistema
es dos veces ms seguro que DES; si se necesita un sistema tres veces ms seguro, se
puede escribir un programa que implemente algoritmo DES quntuple). Utiliza el
mismo algoritmo DES, pero se aplica tres veces con hasta tres claves diferentes. El
mensaje de texto se cifra con la primera clave, se descifra con la segunda y se vuelve
a cifrar con la tercera.
Uno de los defectos de la encriptacin con clave secreta es que para enviar un
mensaje seguro a alguien, es necesario disponer de una forma segura de enviar una
clave, por qu no utilizarla para enviar el mensaje?
Afortunadamente, en 1976 se produjo un avance significativo cuando diffie y hellman
publicaron el primer mtodo de clave pblica.

Encriptacin de clave pblica

La encriptacin de clave pblica se basa en dos claves, una clave pblica y una clave
privada. Como se ilustra en la siguiente figura, la clave pblica se utiliza para cifrar
mensajes y la clave privada para descifrarlos.

La ventaja de este sistema es que la clave pblica, como su nombre indica, se puede
distribuir pblicamente. Todo el mundo al que se le entregue la clave pblica puede
enviar un mensaje seguro al receptor, mientras se tenga en secreto la clave privada,
solo el receptor podr descifrar el mensaje.

Fig. 2.11.- Encriptacin de llave pblica

80
El algoritmo de clave pblica ms utilizada es el RSA. Desarrollado por Rivest,
Shamir y Adelman en MIT y publicado en 1978. RSA era un sistema propietario poro
la patente venci en septiembre de 2000.

La capacidad para transmitir una clave publica de forma abierta y sin necesidad de
preocuparse por que resulte visible para una tercera parte supone una gran ventaja.
Un sistema de clave pblica se utiliza para transmitir la clave para un sistema de
clave secreta que se utiliza durante el resto de una comunicacin de sesin. Esta
complejidad aadida resulta tolerable por que los sistemas de clave secreta son unas
1000 veces ms rpidos que los sistemas de clave pblica.

FIRMAS DIGITALES
Las firmas digitales estn relacionadas con la criptografa de clave pblica, pero
invierten los papeles de las claves pblicas y privadas. Un remitente puede cifrar y
firmar digitalmente un mensaje con su clave secreta. Cuando se recibe el mensaje, el
receptor puede descifrarlo con la clave secreta del remitente. Como el remitente es la
nica persona con acceso a la clave secreta, el receptor puede estar bastante seguro de
la procedencia del mensaje y de que no se ha alterado.
Las firmas digitales resultan muy tiles. Garantizan la procedencia de los mensajes y
dificultan el rechazo del envi por parte del remitente. De todos modos, es importante
tener en cuenta, que aunque el mensaje se ha cifrado, cualquier persona que tenga la
clave publica puede leerlo. Si bien se utilizan las mismas tcnicas y claves, la
finalidad de uso de la encriptacin en este caso es impedir la modificacin de los
mensajes y su repudio, no su lectura.
Como el cifrado de clave publica resulta bastante lento en el caso de mensajes de
gran tamao, se suele utilizar otro tipo de algoritmo, llamado funcin hash, para
mejorar la eficacia. La funcin hash calcula un mensaje o valor hash para cualquier
mensaje que se le indique. El valor generado por el algoritmo no es importante. Lo
importante es que el resultado sea fijo, es decir, que sea el mismo cada vez que se
utiliza una entrada dada, que sea pequeo y que el algoritmo sea rpido.
Las funciones hash ms habituales son MD5 y SHA. Una funcin hash genera un
mensaje implcito que coincide con un mensaje dado. Si se dispone de ambos
mensajes, se podr verificar si el texto se ha variado, siempre y cuando se est seguro
de que no se ha tocado el mensaje implcito. La forma ms habitual de crear una
firma digital consiste en crear un mensaje implcito para todo el mensaje utilizando
una funcin hash rpida y, a continuacin, cifrar nicamente el mensaje implcito
utilizando un algoritmo de clave pblica. Seguidamente se puede enviar la firma con
el mensaje a travs de cualquier mtodo normal no seguro.
Cuando se recibe un mensaje, se puede realizar su comprobacin, la firma se descifra
utilizando la clave pblica de remitente. Se genera un valor hash para el mensaje
utilizando el mismo mtodo utilizado por el remitente. Si el valor hash descifrado
coincide con el valor hash generado, se pode estar seguro de que el mensaje procede
del remitente y no se ha alterado.

81
CERTIFICADOS DIGITALES
La posibilidad de verificar que un mensaje no se ha alterado y que procede de un
usuario o de un equipo dado es un gran avance. Para las interacciones comerciales,
resultara incluso mejor disponer de la posibilidad de vincular a dicho usuario o
servidor a una entidad legal real como una persona o compaa.
Un certificado digital combina una clave pblica con los detalles de una organizacin
o individuo en un formato digital. En un certificado, se tiene la clave pblica de otra
parte, por si se quiere enviar un mensaje cifrado y tener los detalles de la otra parte
que podr estar seguro de que no se ha alterado.

El problema en este caso es que la fiabilidad de la informacin depende de lo fiable

que sea el remitente ya que todo el mundo puede generar y firmar certificado
utilizando otra identidad. En las transacciones comerciales, resulta til utilizar una
tercera parte de confianza que acredite la identidad de los participantes y los detalles
de sus certificados. Estas terceras partes se conocen como Autoridades de
Certificacin (CA). Las autoridades de certificacin expiden certificados digitales a
individuos y compaas sujetas a una serie de comprobaciones de identidad. Las dos
CA ms conocida como VeriSign (http://www.verisign.com) y Thawte
(http://www.thawte.com), pero existen otras. VeriSign y thawte pertenecen a la
misma compaa y hay muy poca diferencia entre ambas. Algunas menos conocidas,
como Equifax Secure (http://www.equifaxsecure.com), resultan bastante ms baratas.
Las autoridades firman un certificado para acreditar que se ha comprobado la
identidad de una persona o compaa. Tenga en cuenta que el certificado no es una
referencia ni una declaracin de solvencia. No garantiza que se est trabajando con
una entidad fiable. Lo nico que garantiza es que en caso de que engaen, es probable
que se obtenga una direccin fsica y una entidad o persona contra la que dirigir la
demanda.

Los certificados suministran una estructura de confianza. Si se confa en la CA, se

puede confiar en aquellas partes en las que confa la CA y a su vez en aquellas partes
en las que confa la parte certificada.

Los certificados digitales se suele utilizar para conferir un aire de respetabilidad a un

sitio Web de comercio electrnico. Con un certificado emitido por una CA conocida,
los navegadores Web pueden establecer conexiones SSL al sitio sin generar cuadros
de dialogo de advertencia. Los servidores Web que permite conexiones SSL se suelen
llamar servidores Web seguros.

SERVIDORES WEB SEGUROS

Se puede utilizar el servidor Web apache, el servidor IIS de Microsoft o cualquier
otro servidor Web comercial para establecer comunicaciones seguras con
navegadores a travs de SSL. Apache permite utilizar el sistema operativo UNIX, que
suelen resultar ms fiables pero ms difciles de configurar que IIS. El servidor
apache se puede utilizar en una plataforma Windows.
El uso de SSL sobre IIS implica sencillamente instalar IIS, generar un par de claves e
instalar el certificado. El uso de SSL en apache requiere la instalacin de tres
paquetes diferentes: Apache, Mod_SSL y OpenSSL

82
Se puede comenzar a utilizar SSL de forma inmediata si genera certificados propios.
Para poder utilizar SSL con eficiencia, necesitara un certificado publicado por una
autoridad de certificacin.

El proceso exacto para lograrlo vara segn la autoridad de certificacin, pero por
regla general se deber demostrar que la empresa est reconocida legalmente, que
consta de una direccin fsica y que es el titular del nombre de dominio pertinente.

Se necesitara generar una solicitud de firma de certificado. El proceso para lograrlo

vara de un servidor a otro. Las instrucciones se encontrarn en los sitios Web de las
autoridades de certificacin. Sin embargo, el proceso es esencialmente el mismo para
todos los servidores. El resultado final es una solicitud de firma de certificado (CSR)
cifrada. Las CSR presentan un aspecto parecido al siguiente:

-----BEGIN NEW CERTIFICATE REQUEST-----

MIIDGjCCAoMCAQAwgYQxITAfBgNVBAMTGHd3dy50ZXN0Y2VydGlQoubD
qnc7Duih17eR1zmrUuJiwEj8vFk0Us5Ka3XEar4frLNzeWAAGgggFTMBoGCisGA
QQBgjcNAgMxDBYKNS4wLjIxOTUuMjA1BgorBgEEAYI3AgEOMScwJTAOBg
NVHQ8BAf8EBAMCBPAwEwYDVR0lBAwwCgYIKwYBBQUHAwEwgf0GCisG
AQQBgjcNAgIxge4wgesCAQEeWgBNAGkAYwByAG8AcwBvAGYAdAAgAFIA
UwBBACAAUwBDAGgAYQBuAG4AZQBsACAAQwByAHkAcAB0AG8AZwBy
AGEAcABoAGkAYwAgAFA
AcgBvAHYAaQBkAGUAcgOBiQBfE24DPqBwFplR15/xZDY8Cugoxbyymtwq/tA
PZ6dzPr9Zy30NnkKQbKcsbLR/4t9/tWJIMmrFhZonrx12qBfICoiKUXreSK89OILr
LEto1frm/dycoXHhStSsZdm25vszv827FKKk5bRW/vIIeBqfKnEPJHOnoiG6UScvg
A8QfgAAAAAAAAAAMA0GCSqGSIb3DQEBBQUAA4GBAGsHA9fKzGdjfJRZ
oe07MNFqRbmwwX+M+EXpzS+78Wr6D7HUPk3g6ixkEcC3cLER5Rt5VMu9vjlm
OIkJAzIWuWDj1Z4BpVeI33loaGS3PmLSnCt1lULaRalQNHk1vOc+L0ygNwwNIv
KLMPq4/LcUkZ9Oo4AssXW5mvvhHWGz2RWY
-----END NEW CERTIFICATE REQUEST-----
Tras adquirir la CSR, se paga la cuota correspondiente, conseguir la documentacin
que prueba la existencia y verificar que el nombre de dominio que se est utilizando
es el mismo que el incluido en la documentacin corporativa, se estar en disposicin
de firmar un certificado con una autoridad de certificacin.

Cuando la autoridad de certificados emita el suyo, se deber guardarlo e indicarle al

servidor Web donde encontrarlo. El certificado final es un archivo de texto parecido
al CSR mostrado anteriormente.

AUDITORIAS Y REGISTROS
El sistema operativo permitir registrar todo tipo de evento. Los eventos en los que se
puede estar interesado desde el punto de vista de la seguridad incluyen errores de red,
acceso a archivos de datos, etc.

Los archivos de registro pueden servir de ayuda para detectar comportamientos

errneos o malintencionados cuando tienen lugar. Tambin se puede utilizar para

83
determinar cmo tuvo lugar un problema o una intrusin si se examina tras observar
problemas. Los archivos de registro presentan dos problemas principales: el tamao y
la veracidad.

Si se establecen los criterios para detectar y registrar problemas en el nivel de mayor

paranoia, se obtendrn registros gigantescos que resultan muy difciles de examinar.
Para trabajar con archivos de registro de gran tamao, se tendr que recurrir a una
herramienta existente o derivar algunas secuencias de comandos de la poltica de
seguridad establecida para realizar bsquedas de eventos interesantes dentro de los
registros.

El proceso de auditar los registros puede realizarse en tiempo real o de manera

peridica.
Los archivos de registros resultan vulnerables a ataques. Si un intruso dispone de
acceso de usuario raz o de administrador al sistema, podr alterar los archivos de
registro para borrar sus huellas.
El administrador del sistema puede realizar auditoras peridicas, pero adems, se
podra contratar un servicio de auditora extremo para que controlara el
comportamiento de los administradores.

CORTAFUEGOS
El objetivo de los cortafuegos es alejar una red del mundo exterior. De la misma
forma que los cortafuegos de un edificio o de un coche impiden que el fuego se
extienda a otros compartimientos, los cortafuegos de red impiden que el caos se
extienda por una red.
Los cortafuegos estn diseados para proteger los equipos de una red del mundo
exterior. Filtran y rechazan el trfico que no cumple las reglas establecidas en ellos.
Restringe las actividades de la gente y los equipos situados fuera de los cortafuegos.
En ocasiones, los cortafuegos tambin se pueden utilizar para restringir las
actividades de los equipos incluidos en su interior. Uno cortafuegos puede limitar los
protocolos de red que se pueden utilizar, los host a los que se pueden conectar o
forzar el uso de un servidor proxy para reducir costes en trminos de ancho de banda.

Un cortafuegos puede ser un dispositivo de hardware, como un enrutador con reglas

de filtrado o un programa de software que se ejecute en un equipo. En cualquier caso,
el cortafuego necesita interfaces para las dos redes y un conjunto de reglas. Su misin
consiste supervisar todo el trfico que intenta pasar de una red a otra. Si el trafico
cumple las reglas establecidas, ser dirigido a otra red; de lo contrario, se detendr o
se rechazara.
Los paquetes se pueden filtrar por tipo, direccin de orgenes, direccin de destino o
puertos. En algunos casos, los paquetes pueden rechazarse simplemente y en otros
pueden desencadenar entradas en el registro o activar alarmas.

84
COPIA DE SEGURIDAD DE LOS DATOS
No se puede subestimar la importancia de las copias de seguridad en ningn plan de
recuperacin de desastres. El hardware y los inmuebles se pueden asegurar y sustituir,
o los sitios alojados en cualquier host, pero si el software Web personal desaparece,
ninguna entidad aseguradora podr sustituirlo.
Se deben hacer copias de seguridad peridicas de todos los componentes del sitio
Web (pginas estticas, secuencias de comandos y bases de datos). La frecuencia
depende del dinamismo del sitio. Si se trata de un sitio completamente esttico,
bastara con hacer una copia cuando se modifique. Sin embargo, el tipo de sitio que se
est tratando es probable que cambie con frecuencia, en especial si se reciben pedidos
en lnea. La mayor parte de los sitios con un tamao razonable deben alojarse en un
servidor con un sistema RAID (del ingles Redundant Array of Inexpensive Disk,
Matriz redundante de discos independientes) que admite funciones de rplica. De esta
forma, queda cubierta la probabilidad de que ocurra un fallo en el disco duro. sin
embargo, se debe considerar que ocurrira en una situacin que afecta a la matriz, al
equipo a al edificio entero.
La frecuencia con la que se deben realizarlas est en funcin con el volumen de
actualizacin. Estas copias de seguridad deberan almacenarse en un lugar diferente y
a ser posible en un lugar distinto y seguro contra incendios, robos o desastres
naturales.

SEGURIDAD FISICA
Las amenazas de seguridad consideradas hasta el momento hacen referencia a
elementos intangibles como el software, pero no se debera descuidar la seguridad
fsica de un sistema. Se debe prever un sistema de aire acondicionado y sistemas de
proteccin contra el fuego, personas (torpes o criminales), fallos en el suministro
elctrico y fallos en la red.
El sistema debera estar protegido bajo llave en un lugar seguro. El lugar concreto
depender de cada caso pero puede ser una habitacin, una jaula o un armario. Solo
se debera conceder permiso de acceso a esta habitacin al personal pertinente. El
personal no autorizado podra, voluntaria o involuntariamente, desconectar los cables
o intentar eludir los mecanismos de seguridad utilizando un disco de reinicio.
Los rociadores de agua pueden causar tanto dao a los componentes electrnicos
como el fuego. Los sistemas para la extincin de incendios deben utilizar alternativas
poco dainas como el gas argn o el dixido de carbono.

En determinados lugares, se producen breves cortes de energa elctrica de manera

habitual. En sitios con climatologas extremas o cables enterrados se suelen producir
cortes de larga duracin. Si el funcionamiento continuo del sistema es un factor
importante, se debera utilizar un sistema de alimentacin ininterrumpible. Los cortes
de suministro de larga duracin requieren un generador que alimente el sistema de
refrigeracin y los equipos.

Al igual que los fallos de suministro elctrico, los fallos de red pueden durar minutos
o hasta horas, Si el mantenimiento de la red es vital, es aconsejable contratar los
servicios de varios proveedores de servicios. El coste ser superior, pero en caso de
fallo, el sitio seguir estando activo, aunque se vea afectada su capacidad.

85
PREGUNTAS
1. En qu consiste una arquitectura de aplicaciones de dos niveles?
2. En qu consiste una arquitectura de aplicaciones de tres niveles?
3. Qu elementos intervienen en el primer nivel de una aplicacin Web?
4. Qu son los lenguajes de programacin del lado del cliente?
5. Entre que etiquetas se escribe el cdigo de Javascript?
6. Cul es la principal ventaja de los Applets de java?
7. Cul es la desventaja de Visual Basic Script?
8. Flash es un lenguaje, si, no, porque?
9. Qu son los lenguajes de programacin del lado del servidor?
10. Cules son los lenguajes del lado del servidor ms utilizados?
11. Cules son las razones por los que los CGI se encuentran desfasados?
12. El lenguaje PERT se parece ms a Javascript o a un applet de java?, Por qu?
13. Qu servidor Web y que sistema operativo utiliza el ASP.NET?
14. Entre que etiquetas se incluye el cdigo de PHP?
15. Menciones tres ventajas de PHP
16. A quin se parece ms JSP, a ASP.NET o a PHP?, Por qu?
17. Cules son los lenguajes considerados como por el lado del cliente como por el
lado del servidor?
18. Explique, Por qu se requieren los ambientes para el desarrollo de aplicaciones
Web?
19. De dos ejemplos de ambientes para el desarrollo de aplicaciones Web
20. Cules son los pasos bsicos para el desarrollo de una aplicacin Web?
21. Cmo se empieza un sitio Web?
22. En qu etapa del desarrollo Web se realiza el modelo entidad relacin?
23. Para qu sirve el mapa de un sitio Web?
24. Cul es la finalidad de presentar las propuestas de bocetos del sitio al cliente?
25. En qu consiste la fase de produccin del prototipo?
26. En qu consiste la prueba de funcionalidad bsica del sitio?
27. En qu consisten las pruebas del entorno de navegacin?
28. En qu consisten los dos tipos de pruebas de usuario?
29. En qu consiste el lanzamiento de un sitio?
30. En qu consiste el mantenimiento del sitio?
31. Muestre por lo menos una lista de 8 aspectos de seguridad para un sitio Web?
32. Se debera aplicar el nivel ms alto de seguridad a un sitio Web? Si, no.
Porque?
33. Cmo evitar la exposicin de datos confidenciales de un sitio Web?
34. Es ms costosa la exposicin de datos confidenciales, la perdida de datos o la
modificacin de los mismos?, Por qu?
35. Cmo se puede verificar la modificacin de datos?
36. Cmo protegerse de la denegacin de servicio?
37. Qu comportamientos pueden causar los errores en el software?
38. Explique que es el repudio
39. Cules son las formas efectivas de limitar el repudio?
40. Si aumenta el nivel de seguridad, qu pasa con el nivel de usabilidad y el
rendimiento del sitio?, aumenta, disminuye, porque?

86
41. Qu describe una poltica de seguridad?
42. Qu es la autenticacin?
43. Cules son las tcnicas de autenticacin?
44. Qu es la encriptacin?
45. Explique cmo funciona la funcin sha1()?
46. En qu consiste la encriptacin de clave privada?
47. En qu consiste la encriptacin de clave pblica?
48. Cul es la funcin de una Autoridad de Certificacin?
49. Cmo se utilizan los SSL?
50. Por qu no se deben utilizar los Certificados digitales propios?
51. De qu forma los cortafuegos protegen la red?
52. Con que frecuencia se deben realizar las copias de seguridad de datos?
53. Cules son los elementos que se consideran en la seguridad fsica de un sistema?

87
EJERCICIOS PROPUESTOS.
1. Instalar un servidor Web en ambiente Windows, describir el procedimiento y
probar su funcionalidad.
2. Instalar un servidor Web en ambiente Unix , describir el procedimiento y probar
su funcionalidad.
3. Siguiendo la metodologa para el desarrollo de aplicaciones Web, seleccionar un
caso de estudio y presentar:
Una descripcin general de la aplicacin
El modelo Entidad Relacin
Tablas Normalizadas
Descripcin de tablas y diccionario de datos
Un mapa del sitio propuesto
Tres propuestas de bocetos de la pgina principal del sitio.

88
 3

Programacion del lado del servidor.

89
3.1 PROCESAMIENTO DEL LADO DEL SERVIDOR.

En este captulo se aborda la programacin del lado del servidor, es decir el lenguaje
de programacin que se procesan solo en el servidor. Los lenguajes del lado del
servidor son invisibles para los clientes. Las pginas que utilicen scripts de este tipo
contienen el cdigo entre etiquetas parecidas a las de HTML, pero stas desaparecen
cuando el cliente recibe la pgina.

Los pasos que sigue el navegador son:

Solicita al servidor una pgina Web a travs de Internet.
El servidor comprueba si la pgina solicitada contiene script del lado del
servidor (PHP, ASP, JSP, etc.)
Ejecuta los posibles script y aade el resultado final a la pgina Web
resultante.
El navegador recibe estos datos, interpreta la pgina Web enviada y la
muestra en la pantalla de acuerdo con la resolucin del monitor, las
preferencias del usuario y algn otro factor.

Los lenguajes del lado del servidor necesitan un motor (un programa) que interprete
el cdigo segn el lenguaje de programacin que se est utilizando. El procesamiento
realizado cuando se use PHP como lenguaje de acceso a base de datos se muestra en
la figura 3.1.

Fig. 3.1.- Uso del Motor de PHP

Un sencillo ejemplo donde se utiliza cdigo de PHP sin acceso a una base de datos se
muestra a continuacin:

90
El siguiente listado es el archivo original que reside en el servidor Web, contiene
adems de cdigo HTML cdigo de PHP, mismo se encuentra entre las etiquetas
<?php ?>, todo los que se encuentre entre estas etiquetas es considerado como
cdigo de PHP; la primera lnea hallada entre estas etiquetas defines una variable y la
segunda lnea muestra la variable como un mensaje.

<!-- basico en el servidor.php -->

<html>
<head>
<title>PROCESAMIENTO DEL SERVIDOR</title>
</head>
<body>
<?php
$men="SE EJECUTA EN EL SERVIDOR";
echo $men;
?>
</body>
</html>

Despus de que el motor de PHP hace su trabajo y el servidor Web responde al

cliente, el cliente recibir el siguiente cdigo.

<!-- basico en el servidor.php -->

<html>
<head>
<title>PROCESAMIENTO DEL SERVIDOR</title>
</head>
<body>
SE EJECUTA EN EL SERVIDOR
</body>
</html>

Se puede observar claramente que el cdigo recibido por el cliente ya no contiene

ninguna instruccin de PHP, sino ms bien cdigo HTML solamente, de esta forma
es como se oculta el cdigo que reside en el servidor Web por el cliente,
contribuyendo de esta forma a aumentar el nivel de seguridad en las operaciones
efectuadas.

Una forma de verificar que el cdigo anterior solo se puede ejecutar en el servidor, es
tratando de ejecutar la pagina basico en el servidor.php directamente en el
navegador, por supuesto que esto no se podr llevar a cabo, a diferencia de aquellas
pginas que contienen cdigo de lenguajes por el lado del cliente solamente, como
son HTML y Java Script.

As como en este caso se usa cdigo de PHP, tambin se puede usar cdigo de un
lenguaje distinto como son JSP, ASP.NET; de ser as cambiaran las etiquetas que
definen el lenguaje en la pagina, as como en el servidor Web se tendra que instalar
el interprete correspondiente.

En el presente libro se abordar con detalle la sintaxis y dems aspectos relacionados

con el lenguaje PHP, como lenguaje por el lado del servidor, pues es un lenguaje muy

91
poderoso, capaz de interactuar con cualquier manejador de base de datos y adems
gratuito.

3.2 CONCEPTOS BSICOS DE LA HERRAMIENTA DE

DESARROLLO

Para poder utilizar un lenguaje por el lado del servidor se requiere de una plataforma
de trabajo, en primer lugar la instalacin del servidor web, la habilitacin del motor
de acceso a la base de datos, as como el servidor de bases de datos propiamente
dicho, estos son los tres programas para poder iniciar con las tareas de programacin,
pero adems de una herramienta que nos facilite el desarrollo del sitio web.

En este libro se trabajar con Apache como servidor Web, PHP como motor de
acceso a base de datos y MySQL como servidor de base de datos.

Otro programador podra optar por IIS de Microsoft como servidor Web, ASP.NET
como motor para acceso a base de datos y SQL Server como servidor de base de
datos.

En cualquiera de los dos casos se podra optar por la misma herramienta de desarrollo
de aplicaciones Web o escoger uno distinto, segn convenga a cada programador.

Una vez seleccionado la plataforma de trabajo, se procede a instalar y en su caso

configurar los programas requeridos.

INSTALACION Y CONFIGURACION DE SERVIDORES

Los servicios requeridos para desarrollar aplicaciones Web, se indican en la tabla 3.1

SERVIDOR APLICACIN
WEB APACHE
BASE DE DATOS MySQL
MOTOR PHP PHP
Tabla 3.1.- Servicios requeridos para desarrollo Web

Cada una de las aplicaciones se pueden descargar por separado en sus sitios oficiales
de forma gratuita, donde se encontrarn las ltimas versiones o tambin se pueden
utilizar programas que se encuentran en Internet que integran todos los servicios en
un solo paquete, Uno de estos programas se conoce como Wamp Server su sitio
oficial es: http://www.wampserver.com/ de donde se puede descargar la versin ms
reciente que en estos momentos es 2.0.

La ventaja de usar un solo programa que contenga todos los servicios es que el
proceso de instalacin y configuracin es mucho ms fcil y rpido, mientras que
usar por separado cada uno de los servicios requiere de mayor experiencia, ya que se
deben configurar adecuadamente para que interacten entre s.

92
Al usar Wamp Server 2.0 por ejemplo, instala en el equipo los servicios y versiones
indicados en la tabla 3.2

SERVIDOR APLICACIN Versiones

WEB APACHE 2.2.11
BASE DE DATOS MySQL 5.1.33
MOTOR PHP PHP 5.2.9-2
Administrador PHPMYADMIN 2.10.1
Base de Datos SQLITEMANAGER 1.2.0
Tabla 3.2.- Servicios de Wamp Server 2.0

CONFIGURACIN DE APACHE
El archivo que contiene la configuracin del servidor web se llama httpd.conf.
Este archivo contiene un conjunto de parmetros que configuran el servidor cada vez
que inicia, este archivo se puede editar para cambiar algn parmetro desde la barra
de tarea directamente en el icono que identifica al programa wamp y despus de
hacerlo se tendran que reiniciar los servicios para que surta efecto.

Las lneas que inicien con el carcter # en el archivo httpd.conf son considerados
como comentarios, por lo que no tienen efecto en la configuracin del servidor. Por
mencionar alguno de los parmetros y sus funciones se muestra la tabla 3.3

PARAMETRO SIGNIFICADO
DocumentRoot "C:/wamp/www" Especifica la ruta donde ubicara el sitio
web
DirectoryIndex index.php index.php3 Indica el orden de prioridad a evaluar de
index.html index.htm index.html.var la pgina de inicio
Listen 80 Indica el nmero de puerto con el cual
funcionara el servidor Web
LoadModule php5_module Carga el modulo de PHP, para ligarlo
"c:/wamp/php/php5apache2_2.dll" con el servidor apache
Tabla 3.4.- Parmetros de configuracin de Apache

CONFIGURACIN DE PHP.
PHP tambin se puede configurar editando su archivo de configuracin llamado
php.ini funciona de una forma similar al archivo de configuracin de apache, solo
que aqu las lneas con punto y coma se consideran como comentarios. Algunos de
los parmetros contenidos en este archivo se muestran en la tabla 3.5

93
 PARAMETRO SIGNIFICADO
register_globals = Off Habilita o deshabilita el manejo de
variables globales en el cdigo de
php
extension_dir = "c:/wamp/php/ext/" Especifica el directorio de los
archivos de librera dinmica usados
por php
extension=php_mysql.dll Agrega la librera MySQL en php
session.save_path = "c:/wamp/tmp" Directorio donde se guardan los
registros de sesiones de php
display_errors = On Habilita o deshabilita el despliegue
de errores al ejecutarse el cdigo de
php
session.auto_start=1 Habilita el manejo de sesiones
automticamente
session.cache_expire = 180 Define la duracin de las pginas de
session en cache, en minutos.
Tabla 3.5.- Parmetros de configuracin de PHP

CONFIGURACIN DE MySQL.
MySQL tambin se puede configurar editando su archivo de configuracin llamado
my.ini funciona de una forma similar al archivo de configuracin de apache.
Algunos de los parmetros contenidos en este archivo se muestran en la tabla 3.6

PARAMETRO SIGNIFICADO
Basedir = Especifica la ruta donde ubicar el
c:/wamp/bin/mysql/mysql5.0.51b servidor MySQL
Datadir = Especifica la ruta donde ubicar las
c:/wamp/bin/mysql/mysql5.0.51b/data bases de datos creados en MySQL
Port 3306 Indica el nmero de puerto con el cual
funcionara el servidor de base de datos
Tabla 3.6.- Parmetros de configuracin de MySQL

Tan solo con instalar el Wamp Server, todos los servicios quedan configurados y
listos para ser usados por el programador, sin embargo en ocasiones existe la
necesidad de algn ajuste en los archivos de configuracin para crear una
personalizacin en el funcionamiento de cada uno de los servicios.

Para probar si el servidor est funcionando correctamente, se puede hacer escribiendo

en la barra de direcciones del navegador la palabra: localhost o la direccin IP del
equipo, en cualquiera de los casos lo que bsicamente se hace es la prueba de
retrociclo Web, este consiste en usar la misma computadora para mantener activos

94
tanto el cliente (Navegador) como el servidor (Apache) y adems que puedan
interactuar entre s, como se muestra en la figura 3.2

Fig. 3.2.- Prueba de Retrociclo Web

Una vez que todos los servicios estn activos es momento de empezar a programar,
pero antes se debe tener conocimientos bsicos del lenguaje de programacin del lado
del servidor, que a continuacin se aborda en PHP.

3.3 OPERADORES.
Los operadores son smbolos que se pueden utilizar para manipular valores y
variables realizando una operacin sobre ellos. Se pueden agrupar como:
De asignacin.
Unario.
Aritmticos.
De comparacin.
Lgicos.
Ternario.
Bit a bit.
Incremento/Decremento.
Supresin de errores.

El ms bsico es el smbolo de asignacin =, utilizado para dar valores a las

variables que usamos en el cdigo

95
<?php $variable = 50.10;
$variable2 = "alumnos";
?>
Las variables que estn a la izquierda del operador toman el valor que se encuentra en
la expresin de la derecha

Se puede apreciar que las variables no requieren de la definicin de su tipo de dato,

como ocurre con otros lenguajes para ser usados, en PHP basta con asignarles un
valor y con eso se define el tipo de dato.

Tambin es importante no confundir el operador de asignacin =, con el operador

de comparacin = =

OPERADOR UNARIO

El signo menos (-) se utiliza delante de un nmero o variable numrica. Este operador
tiene la propiedad de hacer a los nmeros, negativos o positivos, dependiendo del
signo actual.

<?php $entero = 5;
$entero_negativo = -$entero; // El valor es ahora -5
$entero2 = -$entero__negativo; // El valor cambia ahora a 5
?>

Para definir un comentario en lnea se hace con la doble diagonal // y si se trata de

un comentario de bloque entre los signos /* --------*/

OPERADORES ARITMTICOS
Este tipo de operadores forman parte de la aritmtica bsica. Resultar familiar porque
son smbolos muy utilizados en el aprendizaje de las matemticas.

Ejemplo Nombre
$a + $b Suma
$a - $b Resta
Sa * $b Multiplicacin
$a / $b Divisin
$a % $b Mdulo
Tabla 3.7. Operadores Aritmticos

OPERADORES DE COMPARACIN
Los operadores de comparacin permiten comparar dos variables o expresiones,
usados frecuentemente en sentencias de control como el if else.

96
 Ejemplo Nombre
$a == $b Igualdad
$a === $b Identidad
$a != $b Distinto
$a <> $b Distinto
$a < $b Menor que
$a > $b Mayor que
$a <= $b Menor o igual
$a >= $b Mayor o igual
Tabla 3.8. Operadores de comparacin
Ejemplo:

<?php $a=5;
$b=7;
if ($a>$b)
Echo $a es mayor que $b ;
else
Echo $a no es mayor que $b ;
?>

Al comparar si ($a>$b) el resultado va a ser false, por lo tanto se mostrar el segundo

mensaje, al cambiar el valor de $a por un valor mayor que la de $b entonces el
resultado ser true, mostrndose as el primer mensaje.

OPERADORES LGICOS
Los operadores lgicos permiten unir varias comparaciones entre s, cuyo resultado
depender de la tabla de verdad del operador lgico que se aplique.

Ejemplo Nombre
$a and $b Y
$a or $b O
$a xor $b O exclusiva
! $a Negacin
$a && $b Y
$a || $b O
Tabla 3.9. Operadores de lgicos

Ejemplo:

<?php $a=5;
$b=4;
$c=3;
if ($a>$b)&&( ($a>$c)
Echo $a es mayor que $b y $c ;
?>

La condicin ser verdadera solamente si las dos condiciones son verdaderas.

OPERADOR TERNARIO

97
Los operadores que se han visto hasta ahora son capaces de manejar un operando
(Unarios) o dos operandos (binarios). El operador ternario, o de comparacin, evala
un operando y, dependiendo de si es falso o verdadero, evala el segundo operando o
el tercero.
La expresin que se quiere evaluar se escribe delante de un smbolo (?), despus la
expresin que tiene que ejecutarse si la evaluacin anterior es true, seguida del
smbolo (:) con la expresin que debe ejecutarse si es false.

<?php $a=5;
$b=7;
$a>$b ? $mensaje = "A mayor que B": $mensaje = "A No mayor a B";
Echo $mensaje;
?>

El cdigo anterior realizara lo mismo que el ejemplo de operadores lgicos.

OPERADORES BIT A BIT

Los operadores de bit utilizan las variables a bajo nivel, es decir a nivel de lgica
binaria, tal y como se almacenan en memoria fsica y comparan bit a bit los valores.

Ejemplo Nombre Resultado

$a & $b Y Se activan los bits que estn activos tanto en $a como $b.
$a | $b O Se activan los bits que estn activos en $a o que lo estn en $b.
$a ^ $b Xor ("o exclusiva") Se activan los bits que estn activos en $a o en $b pero no en
ambos a la vez.
~ $a No Se activan los bits que no estn activos en $a.
$a << $b Desplazamiento a la Desplaza los bits de $a, $b posiciones hacia la izquierda (por
izquierda aritmtica binaria, cada posicin desplazada equivale a multiplicar
por dos el valor de $a)
$a >> $b Desplazamiento a la Desplaza los bits de $a, $b posiciones hacia la derecha (por
derecha aritmtica binaria, cada posicin desplazada equivale a dividir
entre dos el valor de $a)
Tabla 3.10. Operadores bit a bit

Ejemplo:
<?php
$a =127; // Valor binario 01111111
$b =129; // Valor binario 10000001
$c =$a & $b; // El valor de c 00000001
echo "A:$a B: $b C:$c";

?>

El operador binario Y (smbolo &) compara bit a bit las variables $a y $b. Si los bits
de una misma posicin son true (tienen el valor 1), el bit resultado es 1. En este caso,
slo existe un bits que es igual a true (sus dos valores son 1), por lo tanto el valor de
la variable $c es 1 (en binario 00000001)

OPERADORES DE INCREMENTO/DECREMENTO

98
PHP soporta los operadores de predecremento y post incremento al estilo de C.

Ejemplo Nombre Resultado

++$a Preincremento Incrementa $a en uno y despus devuelve $a.
$a++ Postincremento Devuelve $a y despus incrementa $a en uno.
--$a Predecremento Decrementa $a en uno y despus devuelve $a.
$a-- Postdecremento Devuelve $a y despus decrementa $a en uno.
Tabla 3.11. Operadores Incremento y decremento
Ejemplos:
<?php
echo "<h3>Preincremento</h3>"; $a = 5; echo "Debera ser 6: " . ++$a . "<br>\n"; echo "Debera ser 6: " . $a . "<br>\n";
echo "<h3>Postincremento</h3>"; $a = 5; echo "Debera ser 5: " . $a++ . "<br>\n"; echo "Debera ser 6: " . $a . "<br>\n";
echo "<h3>Predecremento</h3>"; $a = 5; echo "Debera ser 4: " . --$a . "<br>\n"; echo "Debera ser 4: " . $a . "<br>\n";
echo "<h3>Postdecremento</h3>"; $a = 5; echo "Debera ser 5: " . $a--. "<br>\n"; echo "Debera ser 4: " . $a . "<br>\n";
?>

OPERADOR DE SUPRESIN DE ERRORES

La mayora de las funciones que se utilizan en PHP muestran errores en el navegador
cuando algo falla. Si se intenta abrir un archivo que no existe, PHP mostrar un
mensaje de error y continuar la ejecucin del programa. El operador (@), colocado
delante de una funcin, evitar que se muestre el error.

Ejemplo:

<?php
$archivo1 = fopen("prueba.txt","r"); //Muestra un error en el navegador
$archivo2 = @fopen("prueba.txt","r"); //Aqu no se muestra el mensaje de error
echo ("El programa sigue ejecutndose");
?>

PRECEDENCIA DE OPERADORES
La precedencia de operadores especica cmo se agrupan las expresiones, por
ejemplo:
<?php
$Res=4+3*3; // El resultado es 13
$Res2=(4+3)*3; // El resultado es 21
echo "$Res $Res2";
?>
En la primera expresin primero se multiplica 3*3 y luego se le suma 4 de tal forma
que $Res toma el valor de 13, debido a que la multiplicacin tiene mayor precedencia
que la suma, en el segundo caso al existir los parntesis primero se lleva a cabo la
suma de 4+3 y luego se multiplica, debido precisamente a que ahora los parntesis
tienen mayor precedencia que la multiplicacin. En la tabla 3.12 se muestra la de
precedencia de operadores-

Operador Operacin Asociacin

() Parntesis de preferencia N/A
new Instancia de objeto N/A

99
 [] array Derecha
! NO lgico Derecha
Signo menos Derecha
++ - Incremento, decremento Derecha
@ Supresin de errores Derecha
*/% Multiplicacin, divisin y mdulo Izquierda
+. Suma, resta, concatenacin Izquierda
<< >> Desplazamiento izquierda y derecha Izquierda
<<=>>= Menor que, menor o igual, N/A
mayor que, mayor o igual
== != Igual, no igual N/A
& Y izquierda
A
O exclusivo Izquierda
| O Izquierda
&& Y lgico Izquierda
|| O lgico Izquierda
?: condicional Derecha
= += .= *= /= Asignacin Derecha
= %= &= !=
-= <<= >>=
and Y lgico Izquierda
xor O exclusivo lgico Izquierda
or O lgico Izquierda
Tabla 3.12. Precedencia de Operadores

3.4 SENTENCIAS.
Una sentencia puede ser una asignacin, una llamada a funcin, un bucle, una
sentencia condicional e incluso una sentencia que no haga nada (una sentencia vaca).
Las sentencias normalmente acaban con punto y coma. Adems, las sentencias se
pueden agrupar en grupos de sentencias encapsulando un grupo de sentencias con
llaves. Un grupo de sentencias es tambin una sentencia.

Para controlar que secciones de cdigo se ejecutan y cules no, se pueden utilizar:

if
else
elseif
switch

Para manejar ciclos o bucles:

while

100
 do..while
for
foreach

if
Esta instruccin ejecuta una lnea o un bloque de cdigo dependiendo de si se cumple
o no una o varias condiciones. La sintaxis bsica para ejecutar una sola lnea de
cdigo es la siguiente:

if(expresion)
codigo php

Si se van ejecutar varias lneas se requieren las llaves para delimitar el cdigo:
if(expresion)
{
cdigo php...
cdigo php...
}

Ejemplo:
<?php
$registros=0;
if (!$registros) //Si no $rgistros
{
echo "ERROR AL GUARDAR LOS DATOS";
exit();
}
?>

El ejemplo anterior se usa tpicamente despus de efectuar una consulta a una tabla o
un conjunto de tablas de una base de datos, cuando se lleva a cabo con xito toma un
valor diferente de 0 y en caso contrario toma el valor de 0, para omitir los detalles se
asigno a la variable $registro= 0, por lo tanto la expresin si no $registro retornar
un valor true y el mensaje se mostrar. La funcin exit() se usa para producir la
terminacin abrupta de una pgina.

else
Si no se cumple una condicin del if, se puede utilizar esta instruccin para ejecutar
una lnea o un bloque de cdigo. La sintaxis es la siguiente:

if(expresion)
{
cdigo php
}
else
{
cdigo php
}

101
Ejemplo:
<?php
$promocion=10;
if($promocion)
$pro="SI";
else
$pro="NO";
echo $pro;
?>

Al ser evaluado la variable $promocion por la condicin if se obtiene un valor

verdadero, asignndose a $pro la cadena SI. Sin embargo el nico valor que hara
falsa la condicin sera asignar a $promocion=0, ejecutndose por lo tanto el cdigo
hallado despus del else

elseif
Aunque se pueden anidar varios if y else, se puede utilizar el elseif para mejorar la
legibilidad del cdigo. La sintaxis bsica para ejecutar una sola lnea de cdigo es la
siguiente:
if(expresion1)
cdigo php
elseif(epxresion2)
cdigo php
elseif(epxresionN)
cdigo php
else
cdigo php

Ejemplo:
<?php
//Determina el nmero de $opcion
$opcion=2;
if ($opcion==1)
echo"OPCIN UGUAL A UNO";
elseif($opcion==2)
echo"OPCIN UGUAL A DOS";
elseif($opcion==3)
echo"OPCIN UGUAL A TRES";
else
echo"OPCIN NO ES UNO, DOS NI TRES";
?>

Si las tres primeras condiciones no son verdaderas se ejecuta la ltima sentencia else

102
switch
Cuando se tiene una lista larga de if..elseif..else el cdigo se puede volver difcil
de mantener y leer, switch puede ser una mejor opcin.
switch(expresion)
{
case 0:
cdigo php...
break;
case 1:
cdigo php...
break;
case N:
cdigo php...
break;
default:
cdigo php...
}

break sirve para detener la ejecucin del cdigo una vez que se cumple la condicin.
El valor de cada case debe ser un numero o string, no se recomienda utilizar
expresiones ya que puede marcar errores de sintaxis o bien es mejor utilizar un if.
El siguiente ejemplo hace exactamente lo mismo que el ejemplo anterior solo que
ahora con la sentencia switch.

<?php
//Determina el nmero de $opcion
$opcion=2;
switch($opcion)
{
case 1:
echo"OPCIN UGUAL A UNO";
break;
case 2:
echo"OPCIN UGUAL A DOS";
break;
case 3:
echo"OPCIN UGUAL A TRES";
break;
default:
echo"OPCIN NO ES UNO, DOS NI TRES";
}
?>

while
Esta sentencia ejecuta una lnea o un bloque de cdigo repetidamente hasta que se
cumple una condicin. La sintaxis es la siguiente:

while(expresion)
{
cdigo php
}

103
Ejemplo:
Muestra una tabla con 2 columnas, una contiene los nmeros del 1 al 10 y la otra la
multiplicacin de ese nmero por 5.

<!-- while.php-->
<head>
<title>Uso de while</title>
</head>
<body>
<table border="1" >
<tr>
<td>No.</td>
<td><p>Mult. por 5</p> </td>
</tr>
<?php
$x=1;
while($x<=10) {
$r=$x*5; //Multiplica por 5 en cada iteracin
echo"<tr>
<td>$x</td>
<td>$r</td>
</tr>";
$x++;
}
?>
</table>
</body>
</html>

En primer lugar se usa HTML para definir la tabla y visualizar su primera fila, la fila
de encabezado de columna, posteriormente cada fila se muestra usando cdigo de
php, marcado en negrita, la iteracin se llevar a cabo mientras la condicin sea
verdadera $x<10, por lo que se actan un total de 10 ciclos, en cada ciclo se muestra
el valor de $x, as como el producto de $x*5, que conforma la tabla de multiplicar por
5. Se puede observar en este ejemplo la forma de usar la funcin echo de php para
imprimir cada fila de una tabla del html.

do...while

A diferencia del while, esta sentencia verifica la condicin al final del ciclo en lugar
de al inicio.

do
{
cdigo php
} while (expresin);

Ejemplo: El mismo que while.php solo que ahora con la sentencia do while

<!-- do while.php--><head>
<title>Uso de do while</title>
</head>
<body>
<table border="1" >
<tr>

104
 <td>No.</td>
<td><p>Mult. por 5</p> </td>
</tr>
<?php
$x=1;
do {
$r=$x*5; //Multiplica por 5 en cada iteracin
echo"<tr>
<td>$x</td>
<td>$r</td>
</tr>";
$x++;
}
while($x<=10)
?>
</table>
</body>
</html>

En un while se puede "brincar" la ejecucin de cierto bloque de cdigo con continue,

por ejemplo:

while(expresion)
{
cdigo php
if(expresion)
{
continue;
}
cdigo php
}

Ejemplo:
Imprime los nmeros del 0 al 40 que sean mltiplos de 4.
<!-- do while continue.php--><head>
<title>Uso de do while y continue</title>
</head>
<body>
<?php
$x=0;
do {
$x++;
if ($x % 4) //Cualquier valor diferente de cero es verdadero
continue;
echo"$x ";
}
while ($x<=40)
?>
</body>
</html>

La salida es: 4 8 12 16 20 24 28 32 36 40

105
Tambin se puede detener la ejecucin del ciclo en cualquier momento con break,
ejemplo.
while(expresion)
{
cdigo php
if(expresion)
{
break;
}
cdigo php
}

Ejemplo:
Genera nmeros aleatorios en el intervalo de 1 a 20 en un ciclo infinito, se interrumpe
cuando se genera el nmero 5.

<!-- do while break.php-->

<head>
<title>Uso de do while y break</title>
</head>
<body>
<?php
do {
$num = rand(1,20);
if ($num== 5) //Se interrumpe cuando se genera un 5
break;
echo"$num ";
}
while ($num)
?>
</body>
</html>

La salida es una secuencia de nmeros aleatorios hallados en el intervalo de 1 a 20,

hasta que se interrumpe con la generacin del nmero 5.

for
Se utiliza frecuentemente para ejecutar un bloque de cdigo un nmero definido de
veces, los criterios que utiliza para lo anterior comnmente son variables numricas.
La sintaxis de este comando es:

for(expresion1; expresion2; expresion3)

{
cdigo php
cdigo php
}

expresion1 se ejecuta solo al inicio del ciclo, expresion2 se evala en cada ciclo y si
evala a true se ejecuta el cdigo. expresion3 se ejecuta en cada ciclo.

106
Ejemplo:
En un formulario, llena una lista/men de nmeros del 1 al 4

<!-- for.php-->
<head>
<title>Uso de for</title>
</head>
<body>
<form name="form1" method="post" action="">
<select name="select">
<?php
for ($x=1;$x<5;$x++)
echo"<option value='$x'>$x</option>";
?>
</select>
</form>
</body>
</html>

En el for se pueden utilizar tambin el continue y break.

foreach

Se utiliza para obtener los elementos de un arreglo, para su mejor comprensin se

detallar en el siguiente tema.

3.5 ARREGLOS.
Un arreglo es una coleccin de valores con un nico nombre. Para acceder a los
distintos valores de la variable se utiliza un ndice numrico o alfanumrico.

En PHP los arreglos no tienen que definirse de una forma concreta, sino que pueden
tomar distintos tipos de valores: enteros, caracteres, objetos, etctera. En PHP no se
necesita saber de antemano el nmero de valores mximo que podr tomar el
arreglo., ya que se podr ir creando valores nuevos a medida que se vayan
necesitando, adems el ndice para acceder a los valores distintos puede ser numrico
o alfanumrico.

<?php $arreglo[l] = 15;

$arreglo[2] = "Hola amigos";
$arreglo["asociativo"] = "Arreglo asociativo";
?>

Formas de crear un arreglo:

Por asignacin directa:
Cuando se hace la asignacin por primera vez al arreglo, se crea en el entorno.
Ejemplo: $arreglo[l] = 15;
En este caso el ndice del arreglo es 1, pero puede darse el caso en que el ndice no se
especifique, entonces PHP crea un ndice distinto para cada varo:

107
$arreglo[] = 15; //Empieza con el indice 0
$arreglo[] = 10; //Indice 1

Uso de la funcin array() para inicializar un arreglo

Ejemplo:

$num=array(10,20,30,40,50,60); //Crea un arreglo de 6 elementos

for ($x=0;$x<6;$x++) //Se inicia el ciclo con el ndice 0
echo "$num[$x] "; //Muestra 10 20 30 40 50 60

En lugar de usar la funcin for para mostrar el contenido del arreglo se puede usar la
sentencia foreach que es ms especializado para este fin. Quedando de la siguiente
manera:
$num=array(10,20,30,40,50,60); //Crea un arreglo de 6 elementos
foreach ($num as $valor) //se usa foreach
echo "$valor "; //Muestra 10 20 30 40 50 60

El cdigo con foreach es mucho ms compacto y claro, adems de que no se requiere

especificar el nmero de iteraciones, este finaliza al terminar los elementos hallados
en el arreglo.

Usando la funcin array(), se pueden definir ndices numricos, alfanumricos o una

combinacin de estos, para ello se utiliza el operador =>

$personal=array("nctrl"=>272,"nombre"=>"GASTON DEHESA VALENCIA");

Para recorrer el arreglo, nuevamente se puede usar la sentencia foreach, solo que
ahora adems de acceder al valor del arreglo, tambin se puede acceder al ndice
correspondiente, ejemplo:
foreach ($personal as $indice=>$valor)
echo "$indice = $valor "; //muestra:nctrl = 272 nombre = GASTON DEHESA VALENCIA

Si el arreglo se tratar de un arreglo bidimensional, cada fila tendra el nmero de

control y el nombre de un personal, se podran almacenar en el arreglo una tabla
completa.
Ejemplo:
//Arreglo bidimensional
$personal=array (array("nctrl"=>272,"nombre"=>"GASTON DEHESA VALENCIA"),
array("nctrl"=>285,"nombre"=>"JUAN TOLEDO GARCIA"),
array("nctrl"=>301,"nombre"=>"MARIA CARRASCO FUENTES"));
La forma de mostrar el contenido del arreglo bidimensional puede ser con el uso de la
sentencia for de la siguiente forma:
for ($fila=0;$fila<3;$fila++)
echo $personal[$fila]["nctrl"] ." ". $personal[$fila]["nombre"]. "<br>";

Mostrara:
272 GASTON DEHESA VALENCIA
285 JUAN TOLEDO GARCIA
301 MARIA CARRASCO FUENTES

108
El primer ndice del arreglo se indexa con la variable que controla el ciclo for y el
segundo ndice con el nombre asignado en la definicin del array.

Uso de funciones que retornan arrays

La ltima forma de obtener un array es utilizando alguna de las funciones que
devuelven este tipo de datos. Es muy frecuente que las funciones que manejan bases
de datos devuelvan las ocurrencias dentro de un array

Por ejemplo, la funcin range() devuelve un array con valores numricos, que van
desde un nmero de inicio hasta un nmero final con un incremento

Ejemplo:

<!-- foreach.php --><html>

<head>
<title>Funciones que retornan arreglos</title>
</head>
<body>
<?php

$arreglo=range(0, 50, 10); // arreglo(0, 10, 20, 30, 40, 50)

foreach ($arreglo as $numero)
echo "$numero ";
?>
</body>
</html>

As como existe la funcin range(), existen otras que crean o manipulan arreglos.

3.6 FUNCIONES Y LIBRERAS.

Como muchos otros lenguajes PHP soporta la creacin de funciones definidas por el
usuario, la sintaxis bsica es la siguiente:
<?php
function nombre($argumento1, ..., $argumentoN)
{
//codigo php...
return $valor-que-regresa;
}
?>
Si se requiere se le puede enviar parmetros a la funcin, si una funcin tiene que
regresar un resultado se utiliza el return,
Ejemplo:
<?php
$valor1 = 5;
$valor2 = 5;
$valor3 = multiplica1($valor1, $valor2);
echo $valor3; // 25
multiplica2(10,10);
multiplica3();
function multiplica($numero1,$numero2)
{
return $numero1 * $numero2;
}
function multiplica2($numero1,$numero2)

109
{
echo $numero1 * $numero2; // 100
}
function multiplica3()
{
echo 100 * 100; // 10000
}
?>
ARGUMENTOS POR VALOR
Por default, los argumentos que utiliza una funcin los recibe por valor, esto es,
recibe una copia del valor original. De esta manera si la funcin altera el valor de la
copia, el original no se ve afectado.
<?php
$valor1 = 5;
$valor2 = 5;
echo $valor1; // 5
echo $valor2; // 5
$valor3 = multiplica($valor1, $valor2);
echo $valor3; // 100
echo $valor1; // 5
echo $valor2; // 5
function multiplica($valor1,$valor2)
{
$valor1 += 5;
$valor2 += 5;
return $valor1 * $valor2;
}
?>

ARGUMENTOS POR REFERENCIA

En caso que sea necesario una funcin puede recibir un valor como una referencia
que apunta hacia el valor original. De esta manera al cambiar el valor que recibe
afecta el valor original, lo que se hace en este caso es agregar el carcter & al declarar
los argumentos:
<?php
$valor1 = 5;
$valor2 = 5;
echo $valor1; // 5
echo $valor2; // 5
$valor3 = multiplica($valor1, $valor2);
echo $valor1; // 10
echo $valor2; // 10
echo $valor3; // 100
function multiplica(&$valor1, &$valor2)
{
$valor1 += 5;
$valor2 += 5;
return $valor1 * $valor2;
}
?>
ARGUMENTOS CON VALORES DEFAULT

110
PHP permite asignar un valor defautl a un argumento al momento que se declara. La
utilidad de este valor default es que si se omite el valor al mandar llamar la funcin
automticamente se le asigna el valor default al argumento.
<?php
$valor1 = 5;
$valor2 = 5;
$valor3 = multiplica($valor1);
echo $valor1; // 5
echo $valor2; // 5
echo $valor3; // 25
function multiplica($valor1, $valor2 = 5)
{
return $valor1 * $valor2;
}
?>
Si se van a asignar valores default a uno o varios argumentos primero se deben
declarar los argumentos que no tienen valores default, y posteriormente los que si
tienen.
<?php
// Correcto
function multiplica($valor1, $valor2 = 5)
{
return $valor1 * $valor2;
}
// Incorrecto
function multiplica($valor2 = 5, $valor1)
{
return $valor1 * $valor2;
}
?>

ALCANCE DE LAS VARIABLES EN LAS FUNCIONES

Las variables que se declaran fuera de una funcin en una pgina PHP se consideran
globales, esto es, se pueden referenciar en cualquier parte del cdigo. Sin embargo, si
una funcin utiliza una variable que est declarada tambin fuera de la funcin,
entonces se crea una variable local con el mismo nombre.
<?php
$valor1 = 10;
$valor2 = 10;
$valor3 = multiplica(); //Modificar esta linea
echo "Despues de mandar llamar la funcion<br>";
echo "\$valor1 = $valor1<br>"; // 10
echo "\$valor2 = $valor2<br>"; // 10
echo "\$valor3 = $valor3<br>"; // 25

function multiplica()
{
/* Se crean nuevas variables $valor1 y $valor2 con alcance local.
Las variables globales no se ven afectadas. */
$valor1 += 5;
$valor2 += 5;
return $valor1 * $valor2;
}
?>

111
Hay dos maneras de referenciar las variables globales en las funciones: con la palabra
reservada global y con el arreglo $GLOBALS[].

function multiplica2()
{
global $valor1, $valor2;
$valor1 += 5;
$valor2 += 5;
return $valor1 * $valor2;
}

function multiplica3()
{
$GLOBALS["valor1"] += 5;
$GLOBALS["valor2"] += 5;
return $GLOBALS["valor1"] * $GLOBALS["valor2"];
}

Al escriber las tres funciones en un solo archivo, se puede modificar la lnea marcada
en negrita del primer listado para llamar a cada una de las dos ltimas funciones. Se
podr observar que al llamar a la funcin multiplica2() multiplica3(), el resultado
ser el mismo, en estos casos, en el interior de estas funciones se puede modificar a
las variables globales.

VARIABLES ESTTICAS
Otro concepto que maneja PHP es de las variables estticas, las cuales se manejan
solo dentro de una funcin. Las variables normales pierden su valor una vez que se
termina de ejecutar la funcin, las variables estticas conservan su valor.
Para utilizar una variable esttica se utiliza la palabra reservada static.
Ejemplo:
<?php
function incrementa()
{
static $valor2 = 0;
++$valor1;
++$valor2;
echo "\$valor1 = $valor1<br>";
echo "\$valor2 = $valor2<br><br>";
}
?>

Cada vez que se mande a llamar la funcin incrementa(), $valor2 se incrementa en

uno y conserva su valor al salir de la funcin. Por otra parte, $variable1 se
incrementa en uno y pierde su valor al salir de la funcin, por lo que siempre tiene un
valor de 1.

112
Adems de las funciones creados por el usuario para su uso personal, PHP cuenta con
una gran cantidad de funciones predefinidas o de libreras, mismas que se pueden
clasificar de la siguiente manera:

Manejo de cadenas
Matemticas
Fecha y Hora
Archivo
Directorio
Manipulacin de MySQL
Manipulacin de Microsoft SQL Server
Manipulacin de una base de datos con ODBC
Manejo de Sesiones
PDF

En las siguientes tablas se muestran algunas funciones de cada clasificacin,

aclarando que existen muchos ms.

Funciones de manejo de cadenas

FUNCION DESCRIPCION Ejemplo
trim(cad) Elimina espacios en los extremos de una $correo=" xx@dom.com ";
cadena. $correo=trim($correo);
strlen(cad) Devuelve la cantidad de caracteres de la cadena $long=strlen($correo);
Strtolower(cad) convierten todos los caracteres de la cadena a $nom="JUAN PEREZ";
minsculas $nom=strtolower($nom);
Strtoupper (cad) convierten todos los caracteres de la cadena a $nom=strtoupper($nom);
maysculas
substr(cad,n1,n2 produce una extraccin de subcadenas. $ap=substr($nom,5);
) n1 A partir del cual se comience la extraccin
n2 En caso de estar, la extraccin se detendr en
ese caracter.
strcmp Comparacin de cadenas con seguridad binaria if (!strcmp($nom,$nom2))
(cad1,cad2) Devuelve < 0 si cad1 es menor que cad2; > 0 si echo "cadenas iguales";
cad1 es mayor que cad2, y 0 si son iguales.
Tabla 3.13. Funciones para el manejo de cadenas

Funciones Matemticas
FUNCION DESCRIPCION
abs (num) Devuelve el valor absoluto de un nmero.
acos (arg) Devuelve el arco coseno de arg en radianes.
asin (arg) Devuelve el arco seno de arg en radianes
atan2 (y,x) Devuelve el arco tangente de las dos variables x e y. Es similar a el clculo de la
arco tangente de y / x, excepto que los signos de ambos argumentos son usados
para determinar el cuadrante del resultado
atan (arg) Devuelve la arco tangente de arg en radianes
bindec ( Devuelve el equivalente decimal del nmero binario representado por el
binario) argumento binario
cos (arg) Devuelve el coseno de arg en radianes
decbin (num) Devuelve una cadena conteniendo la representacin en binario de el nmero dado
en el argumento

113
dechex (num) Devuelve una cadena conteniendo la representacin hexadecimal del nmero
dado en el argumento
exp (arg) Devuelve el nmero e elevado a la potencia de arg.
log10 (arg) Devuelve el logaritmo en base-10 de arg.
log (arg) Devuelve el logaritmo de arg.
mt_rand (min, genera un valor aleatorio mejorado entre de un valor mnimo a un mximo
max)
pi (void) Devuelve una aproximacin de pi
pow (base, Devuelve base elevado a la potencia de exp.
exp)
rand (min, genera un valor aleatorio entre de un valor mnimo a un mximo
max)
sin (arg) Devuelve el seno de arg en radianes.
sqrt (arg) Devuelve la raz cuadrada de arg.
srand ( Inicializa la semilla del generador de nmeros aleatorios
semilla)
tan (arg) Devuelve la tangente de arg en radianes.
Tabla 3.14. Funciones Matemtica

Funciones de Fecha y Hora

FUNCION DESCRIPCION
checkdate Valida una fecha u hora
date Da formato a la fecha/hora local
getdate Obtiene informacin de fecha y hora
gettimeofday Obtiene la hora actual
gmdate Da formato a una fecha/hora GMT/CUT
gmmktime Obtiene el valor timestamp UNIX de una fecha GMT
gmstrftime Da formato a una fecha/hora GMT/CUT segn las convenciones locales
localtime Obtiene la hora local
microtime Devuelve el valor timestamp UNIX actual con microsegundos
mktime Obtiene el timestamp UNIX de una fecha
strftime da formato a la hora o fecha local de acuerdo con las convenciones locales
strtotime Procesar cualquier descripcin textual de fecha/hora en Ingls convirtindola en una
timestamp de UNIX
time Devuelve el timestamp UNIX actual
Tabla 3.15 Funciones de Fecha y Hora

Funciones de manejo de archivo

FUNCION DESCRIPCION
fclose Cierra el apuntador a un archivo abierto
feof Verifica si el apuntador a un archivo est al final del archivo (end-of-file)
Fgets Obtiene una lnea del archivo apuntado
file_exists Verifica si un archivo existe
Filesize Obtiene el tamao del archivo
fopen Abre un archivo o una URL
Fread Lee archivo en plan binario
Fseek Sita el apuntador a un archivo
fwrite Escribe archivos en plan binario
Readfile Muestra el contenido de un archivo
Tabla 3.16.- Funciones de archivos

114
Funciones de Directorio

FUNCION DESCRIPCION
chdir cambia de directorio
dir Crea un objeto de la clase directorio
closedir Cierra el manejador de directorios
getcwd Devuelve el directorio actual
opendir Abre el manejador de directorios
readdir Lee las entradas del manejador de directorios
rewinddir Rebobinar el manejador de directorios
Tabla 3.17.- Funciones de Directorios

Funciones de manipulacin de MySQL

FUNCION DESCRIPCION
mysql_affected_rows Devuelve el nmero de filas afectadas de la ltima operacin
MySQL
mysql_change_user Cambia el usuario conectado en la conexin activa
mysql_client_encoding Devuelve el nombre del conjunto de
mysql_close Cierra la conexin con MySQL
mysql_connect Abre una conexin a un servidor MySQL
mysql_create_db Crea una base MySQL
mysql_data_seek Mueve el puntero interno
mysql_db_name Retorna el nombre de la base de datos
mysql_db_query Envia una sentencia MySQL al servidor
mysql_drop_db Borra una base de datos MySQL
mysql_errno Deuelve el nmero del mensaje de error de la ltima operacin
MySQL
mysql_error Devuelve el texto del mensaje de error de la ltima operacin
MySQL
mysql_escape_string Escapa una cadena para su uso en mysql_query
mysql_fetch_array Extrae la fila de resultado como una matriz asociativa
mysql_fetch_assoc Devuelve una matriz asociativa que corresponde a la fila
recuperada y mueve el apuntador de datos interno hacia adelante
mysql_fetch_field Extrae la informacin de una columna y la devuelve como un
objeto
mysql_fetch_lengths Devuelve la longitud de cada salida en un resultado
mysql_fetch_object Extrae una fila de resultado como un objeto
mysql_fetch_row Devuelve una fila de resultado como matriz
mysql_field_flags Devuelve los flags asociados con el campo especificado en un
resultado
mysql_field_len Devuelve la longitud del campo especificado
mysql_field_name Devuelve el nombre del campo especificado en un resultado
mysql_field_seek Asigna el puntero del resultado al offset del campo especificado
mysql_field_table Devuelve el nombre de la tabla donde est el campo especificado
mysql_field_type Devuelve el tipo del campo especificado en un resultado
mysql_free_result libera de la memoria el resultado de una consulta
mysql_get_client_info Retorna la versin del cliente MySQL
mysql_get_host_info Retorna el nombre del host MySQL
mysql_get_proto_info Retorna la versin del protocolo usado para la conexin
mysql_get_server_info Retorna la versin del Servidor MySQL
mysql_info Retorna informacin de la ltima sentencia SQL efectuada
mysql_insert_id Devuelve el identificador generado en la ltima llamada a INSERT
mysql_list_dbs Lista las bases de datos disponibles en el servidor MySQL

115
mysql_list_fields Lista los campos del resultado de MySQL
mysql_list_processes Lista los procesos MySQL
mysql_list_tables Lista las tablas en una base de datos MySQL
mysql_num_fields Obtiene el nmero de campos de la consulta
mysql_num_rows Obtiene el nmero de filas de la consulta
mysql_pconnect Abre una conexin persistente al servidor MySQL
mysql_ping Prueba la conexin con el servidor o lo conecta si no esta
establecido
mysql_query Ejecuta una sentencia SQL a MySQL
mysql_real_escape_string Escapa caracteres especiales de una cadena para su uso en una
sentencia SQL
mysql_result Devuelve datos de un resultado
mysql_select_db Pone en uso un base de datos MySQL
mysql_stat Devuelve el status actual del servidor
mysql_tablename Devuelve el nombre de la tabla de un campo
mysql_thread_id Regresa el identificador del hilo para la conexin actual
mysql_unbuffered_query Enva una consulta SQL a MySQL, sin recuperar ni colocar en
bfer las filas de resultado
Tabla 3.18 Funciones para Acceso a MySQL

En la tabla 3.18 se muestran las funciones utilizadas para acceder y manipular una
base de datos con el manejador MySQL, mismos que se presentarn en el tema 3.10
en detalle.

As como existe un repertorio de funciones para MySQL, tambin se encuentran para

otros manejadores de bases de datos como Microsoft SQL Server, dBase, Oracle,
Informix, Interbase, Ingres, etc. Tambin se pueden acceder a las bases de datos
usando funciones de PHP para ODBC (Conectividad abierta de base de datos), este
tiene la ventaja de poder conectarse con cualquier manejador de base de datos, tan
solo con contar con el manejador ODBC correspondiente, aunque por el hecho de
agregar un intermediario en el proceso de acceso a la base de datos trae consigo un
coste de rendimiento. En la tabla 3.19 se muestra el repertorio de funciones para
manipular una base de datos con Microsoft SQL Server.

Funciones de manipulacin de Microsoft SQL Server

FUNCION DESCRIPCION
mssql_bind Adds a parameter to a stored procedure or a remote stored
procedure
mssql_close Cierra una conexin con MS SQL Server
mssql_connect abre una conexin con MS SQL server
mssql_data_seek mueve el puntero interno de las filas
mssql_execute Ejecuta un procedimiento almacenado en la de base de datos
MS SQL server
mssql_fetch_array Extrae la fila de resultado como una matriz asociativa
mssql_fetch_assoc Devuelve una matriz asociativa que corresponde a la fila
recuperada y mueve el apuntador de datos interno hacia adelante
mssql_fetch_batch Retorna el siguiente registro secualcialcialmente
mssql_fetch_field Extrae la informacin de una columna y la devuelve como un
objeto
mssql_fetch_object Extrae una fila de resultado como un objeto
mssql_fetch_row Devuelve una fila de resultado como matriz

116
mssql_field_length Devuelve la longitud del campo especificado
mssql_field_name Devuelve el nombre del campo especificado en un resultado
mssql_field_seek Asigna el puntero del resultado al offset del campo especificado
mssql_field_type Devuelve el tipo del campo especificado en un resultado
mssql_free_result libera de la memoria el resultado de una consulta
mssql_get_last_message Retorna mensajes del servidor (En casos de error)
mssql_guid_string Convierte un numero de 16 bits a cadena
mssql_init Inicializa un procedimiento almacenado procedimiento
almacenado remoto
mssql_min_error_severity Define un nivel de error bajo
mssql_min_message_severity Define un nivel de mensajes de error a bajo
mssql_next_result Mueve el resultado interno del apuntador al siguiente resultado
mssql_num_fields Obtiene el nmero de campos de la consulta
mssql_num_rows Obtiene el nmero de filas de la consulta
mssql_pconnect Abre una conexin persistente con MS SQL
mssql_query Ejecuta una sentencia SQL a MS SQL
mssql_result Devuelve datos de un resultado
mssql_rows_affected Devuelveel numero de registros afectados por una sentencia
SQL
mssql_select_db Pone en uso una base de datos de MS SQL
Tabla 3.19 Funciones para Acceso a Microsoft SQL server

Se puede observar que muchas de las funciones utilizadas en MySQL, tambin

existen para Microsoft SQL Server, las coincidencias se encuentran marcadas en las
tabla 3.19 en negrita, solo que se diferencian en su palabra de inicio, por ejemplo: la
funcin mysql_query y mssql_query hacen exactamente lo mismo, Enva una
sentencia SQL a .. la primera a MySQL y la segunda a Microsoft SQL Server, y la
diferencia entre estos son: la primera inicia con: mysql y la segunda con mssql.

En la tabla 3.20 se muestran las palabras de inicio de funciones de PHP para

diferentes manejadores de base de datos:

MANEJADOR PALABRA DE INICIO

dBase dbase
Informix ifx
Ingres II ingles
Interbase ibase
Microsoft SQL Server mssql
MySQL mysql
ODBC odbc
Oracle ora

Tabla 3.20 Palabras de inicio de funciones para Acceso a diferentes bases de datos

Algunos manejadores de bases de datos por el momento no tienen funciones definidas

en PHP, para poder manipularlos como es el caso de Acces, es utilizando ODBC,
algunas de las funciones se muestran en la tabla 3.21

117
Funciones de manipulacin de una base de datos con ODBC

FUNCION DESCRIPCION
odbc_close_all Cierra todas las conexiones ODBC
odbc_close Cierra una conexin ODBC
odbc_commit Entrega una transaccin ODBC
odbc_connect Conecta a una fuente de datos
odbc_cursor Toma un nombre de cursor
odbc_data_source Retorna informacin de la conexin actual
odbc_exec Ejecuta una sentencia SQL
odbc_execute ejecuta una declaracin preparada
odbc_fetch_array Extrae la fila de resultado como una matriz asociativa
odbc_fetch_object Extrae una fila de resultado como un objeto
odbc_fetch_row Devuelve una fila de resultado como matriz
odbc_field_len Devuelve la longitud del campo especificado
odbc_field_name Devuelve el nombre del campo especificado en un resultado
odbc_field_num Devuelve el numero de campo
odbc_field_type Devuelve el tipo del campo especificado en un resultado
odbc_free_result Recursos libres asociados con un resultado
odbc_longreadlen Manejo de LONGITUD de columnas
odbc_next_result Mueve el resultado interno del apuntador al siguiente resultado
odbc_num_fields Obtiene el nmero de campos de la consulta
odbc_num_rows Obtiene el nmero de filas de la consulta
odbc_pconnect Abre una conexin persistente de base de datos
odbc_prepare Prepara una declaracin para su ejecucin
odbc_procedures Retorna la lista de procedimientos almacenados
odbc_result Devuelve datos de un resultado
odbc_rollback Volver a pasar una transaccin
odbc_setoption Ajusta la configuracin de ODBC. Devuelve FALSE en caso de error, en
otro caso TRUE
odbc_tableprivileges Lista las tablas y sus privilegios asociados con cualquier
odbc_tables Retorna la lista de las tablas almacenadas en una fuente de datos.
Tabla 3.21 Funciones para Acceso a una base de datos con ODBC

Funciones para manejo de Sesiones:

FUNCION DESCRIPCION
session_cache_expire Devuelve la caducidad actual del cach
session_cache_limiter Lee y/o cambia el limitador del cach actual
session_decode Decodifica los datos de una sesin a partir de una cadena
session_destroy Destruye todos los datos guardados en una sesin
session_encode Codifica los datos de la sesin actual en una cadena
session_get_cookie_params Obtiene los parmetros de la cookie de la sesin
session_id Lee y/o cambia el session id actual
session_is_registered Comprueba si una variable est registrada en la sesin
session_module_name Lee y/o cambia el mdulo de la sesin actual
session_name Lee y/o cambia el nombre de la sesin actual
session_readonly Inicia una sesin - reinicializa las variables, pero sin guardar los
cambios al terminar
session_register Registra una o ms variables con la session actual.
session_save_path Lee y/o cambia la ruta donde se guardan los datos de la sesin actual
session_set_cookie_params Cambia los parmetros de la cookie de la sesin
session_set_save_handler Establece unas funciones para el almacenamiento de los datos de la

118
 sesin a nivel de usuario
session_start Inicializar los datos de una sesin
session_unregister Elimina una o ms variable de la sesin actual
session_unset Elimina todas las variables de la sesin
session_write_close Escribe los datos de la sesin y la finaliza
Tabla 3.22 Funciones de PHP para el manejo de Sesiones.

Funciones para creacin de archivos PDF

PHP no tiene libreras propias para generar formato de documento portable (PDF),
para poder generarlos se hacen uso de libreras externas. Como por ejemplo:
PDFlib.- Es una librera comercial para crear archivos PDFs muy poderosa,
creados por Thomas Merz. Se puede descargar de si sitio oficial:
www.pdflib.com
FPDF.- Esta desarrollado con orientacin a objetos, siendo el Objeto fpdf el
encargado de ir almacenando la estructura, y mostrndolo con la funcin
Output, teniendo diferentes salidas tanto por pantalla como por impresora o
simplemente ofreciendo la posibilidad descargar el archivo. Entre sus
funciones ms utilizadas se encuentra Cell que es la base de todo el muestreo,
creando celdas las cuales pueden contener texto, se puede descargar en forma
gratuita en http://www.fpdf.org/ y adems se puede modificar.
TCPDF.- Es una librera basada en FPDF creado por Nicola Asuni, adems de
ser completamente gratuito, es software libre. Dos de las cualidades ms
apreciadas de esta clase, es su simplicidad a la hora de crear archivos PDF y la
capacidad de interpretar cdigo XHTML, actualmente se encuentra en
constante desarrollo, se puede descargar de su sitio oficial: www.tcpdf.org.
Una vez descargado el archivo empaquetado, se deben copiar todos los
archivos y carpetas en el directorio del servidor Web (c:/wamp), consta de 52
ejemplos que se pueden probar para adaptarlos a las necesidades propias de
cada programador. Algunas de las funciones de esta librera se muestran en la
tabla 3.23

FUNCION DESCRIPCION
AddPage Aade una nueva pgina
Cell Imprime un celda
TCPDF Constructor
Image Imprime una imagen
Line Dibuja una lnea
Ln Salto de lnea
MultiCell Imprime texto con saltos de lnea
Output Guarda o enva el documento
Rect Dibuja un rectngulo
SetAuthor Establece el autor del documento
SetAutoPageBreak Establece el modo de salto de pagina automtico
SetCreator Establece el creador del documento
SetDrawColor Establece el color de graficacin
SetFillColor Establece el color de relleno
SetFont Establece la fuente
SetFontSize Establece el tamao de la fuente
SetKeywords Asocia las palabras claves con el documento

119
 SetLineWidth Establece el ancho de la lnea
SetMargins Establece los mrgenes
SetSubject Establece el tema del documento
SetTextColor Establece el color del texto
SetTitle Establece el ttulo del documento
Text Imprime una cadena
Write Imprime un texto
writeHTML Imprime texto en formato HTML
Tabla 3.23 Funciones para creacin de PDF con la librera TCPDF.

3.7 EJEMPLOS PRCTICOS.

Para poder realizar ejercicios prcticos ms elaborados de los sitios Web, se requiere
de algunos conocimientos adicionales que se irn adquiriendo en los siguientes temas,
por lo que se deja su implementacin en la seccin de caso de estudio del apndice A.

3.8 PROCESADO DE FORMULARIOS.

La verdadera potencia del lenguaje reside cuando se pasa informacin de una pgina
a otra, como es el envo de los datos contenidos en un formulario a otra pgina para
su procesamiento, como puede ser la insercin, eliminacin, o actualizacin de los
datos en una tabla de una base de datos. Dos de los mtodos comnmente usados son:
Uso de GET
Uso de POST

GET y POST son mtodos propios del protocolo HTTP. Su funcionamiento es

prcticamente idntico, se recomienda en los siguientes casos:

GET:
Si no importa que los parmetros se vean en la URL.
Si se desea transferir los datos de la manera ms rpida posible.
Si el formulario HTML va a transferir variables de poco tamao.
Si el usuario puede cambiar el contenido de la web a travs de los parmetros de la URL.

POST:
Si no se deseas que las variables se muestren en la URL.
Si el formulario transfiere mucha informacin, o variables que tengan un tamao
considerable.
Si las variables contienen caracteres que no son ASCII.

Existen dos formas de enviar datos por GET: Mediante URL y mediante
formulario:

USO DE GET MEDIANTE URL.

Consiste en escribir la direccin URL seguido de un smbolo de interrogacin (?) y el
conjunto de parejas de variable = valor separadas del smbolo (&), ejemplo:

<!get_url.php -->

120
<html>
<head>
<title>Uso de get con url</title>
</head>
<body>
<?php
$clave="DD120G";
$des="DISCO DURO DE 120 GBYTES";
$precio=650.50;
echo "<a href='get2.php? c=$clave & d=$des &p=$precio'>VER DATOS DEL
PRODUCTO</a>"; //Muestra
?>
</body> VER DATOS DEL PRODUCTO
</html>

En este ejemplo el hipervnculo se liga con el archivo get2.php y se le pasan 3

variables c,d,p con sus respectivos valores mediante las variables de php $clave,
$des, $precio. Una vez que se muestra la pgina en el navegador y se pulsa sobre el
hipervnculo se llama al archivo:

<!-- get2_url.php -->

<html>
<head>
<title>Uso de get con url Continuacin</title>
</head>
<body>
<?php
$cl=$_GET[c];
$de=$_GET[d];
$pe=$_GET[p];
echo "$cl <br> $de <br> $pe"; //Muestra
?>
DD120G
</body> DISCO DURO DE 120 GBYTES
</html> 650.5

Aqu se recibirn las variables enviadas desde el archivo get.php y se visualizarn

usando la variable superglobal $_GET[], Este es un arreglo bidimensional, se usa el
nombre de la variable definido en get.php como ndice del arreglo para obtener el
valor correspondiente.

USO DE GET MEDIANTE FORMULARIO.

La forma ms utilizada para recabar informacin acerca de los usuarios es empleando
formularios HTML
<!-- get_formulario.htm -->
<html>
<head>
<title>Formulario con GET</title>
</head>
<body>
<form name='form1' method='get' enctype="multipart/form-data"
action='get_formulario.php' >
<table border='1' align='center'>
<tr>
<td colspan='2'><p align='center'>REGISTRO DE PRODUCTOS</p> </td>
</tr>
<tr>
<td>CLAVE</td>

121
 <td ><input name='clv' type='text' id='clvp2' size='10' maxlength='10'></td>
</tr>
<tr>
<td>NOMBRE</td>
<td><input name='nom' type='text' id='nom' size='30' maxlength='30'></td>
</tr>
<tr>
<td>PRECIO</td>
<td><input name='preve' type='text' id='preve'></td>
</tr>
<tr>
<td>EXISTENCIA</td>
<td><input name='exist' type='text' id='existencia2' size='10'
maxlength='10'></td>
</tr>
<tr>
<td><input name='Aceptar' type='submit' id='Aceptar' value='Aceptar'></td>
<td><input type='reset' name='Submit2' value='Restablecer'></td>
</tr>
</table>
</form>
</body>
</html>

La URL que se muestra en la barra de direcciones del navegador es el siguiente:

http://192.168.1.107/libro_programacion_web/3/get_formulario.php?clv=MOP&nom=MOUSE+
OPTICO&preve=60&exist=5&Aceptar=Aceptar

Se puede observar claramente que todas las variables y valores estn visibles para el
usuario, por tal razn se dice que este mtodo no es seguro, puesto que puede ser
invocado desde sitios distintos a una aplicacin Web desarrollado por el
programador, causando en algunos casos efectos perjudiciales para los sistemas de
informacin y en particular cuando los datos se insertan o modifican una base de
datos.

La pgina encargada de procesar los datos del formulario es:

<!-- get_formulario.php -->

<html>
<head>
<title>Formulario con get Continuacin</title>
</head>
<body>
<?php
$c=$_GET[clv];
$n=$_GET[nom];
$p=$_GET[preve];
$e=$_GET[exist];
echo "$c<br> $n<br> $p<br> $e"; //Muestra MOP
?> MOUSE OPTICO
</body> 60
</html> 5

122
Para leer los datos provenientes del formulario, nuevamente se usa la variable sper
global GET[] . En el ejemplo los datos solo se muestran usando el echo, como una
forma de simplificar el cdigo, por lo regular, estos datos se insertan en una tabla de
una base de datos o como parmetros para realizar una consulta.

USO DE POST
Con el uso de POST los datos provenientes de un formulario no quedan expuestas
ante la vista del usuario, es por ello que este es el mtodo ms usado para pasar datos
de un formulario a otra pgina, como muestra el siguiente ejemplo:

<!-- post_formulario.htm -->

<html>
<head>
<title>Formulario con POST</title>
</head>
<body>

<form name='form1' method='post' enctype="multipart/form-data"

action='post_formulario.php' >
<table border='1' align='center'>
<tr>
<td colspan='2'><p align='center'>REGISTRO DE PRODUCTOS</p> </td>
</tr>
<tr>
<td>CLAVE</td>
<td ><input name='clv' type='text' id='clvp2' size='10' maxlength='10'></td>
</tr>
<tr>
<td>NOMBRE</td>
<td><input name='nom' type='text' id='nom' size='30' maxlength='30'></td>
</tr>
<tr>
<td>PRECIO</td>
<td><input name='preve' type='text' id='preve'></td>
</tr>
<tr>
<td>EXISTENCIA</td>
<td><input name='exist' type='text' id='existencia2' size='10'
maxlength='10'></td>
</tr>
<tr>
<td><input name='Aceptar' type='submit' id='Aceptar' value='Aceptar'></td>
<td><input type='reset' name='Submit2' value='Restablecer'></td>
</tr>
</table>
</form>
</body>
</html>

Bsicamente la diferencia entre este ejemplo y el ejemplo get_formulario.htm es la

definicin del mtodo, en este se define como post y en el otro como get. El
formulario visto en el navegador se muestra as:

123
Al pulsar sobre el botn Aceptar en la barra de direcciones del navegador no se
muestras las variables ni los valores, estos se ocultan internamente. El archivo que
recibe los datos provenientes del formulario es el siguiente:

<!-- post_formulario.php -->

<html>
<head>
<title>Formulario con POST Continuacin</title>
</head>
<body>
<?php
$c=$_POST[clv];
$n=$_POST[nom];
$p=$_POST[preve];
$e=$_POST[exist];
echo "$c<br> $n<br> $p<br> $e";
?>
</body>
</html>

La forma de recibir las variables y valores provenientes de un formulario con el

mtodo post, es usando la variable super global POST[], la variables definidas en el
formulario, sirven como ndices para la variable POST[], el valor retornado, es el valor
asignado a la variable.

3.9 SESIONES.
Una sesin es un perodo de tiempo durante el cual, un usuario ve una secuencia de
pginas en un sitio Web. Desde que entra al sitio, hasta que lo abandona, para ello se
crea un identificador nico que se asigna a cada una de estas sesiones de navegacin.
A este identificador de sesin se le denomina, comnmente, como la sesin.

Para que las sesiones funcionen, todas las paginas por las que se desee que se ejecute
deben tener la extensin .php, si se ejecuta por otra pgina que no sea .php las
sesiones se perdern al abandonar el archivo php.

Los pasos para el manejo de sesiones en PHP son:

1. Iniciar o continuar una sesin: Usar session_start().
2. Registrar la variable de sesin: session_register()
3. Usar la variable de sesin
4. Cerrar la sesin: session_unregister() y session_destroy().

124
1.- session_start()
Esta funcin, lo que hace es comprobar si existe alguna sesin abierta, y si no hay
ninguna, se abrir una. Es una buena idea incluir esta lnea en cada script de cada
pgina ya que si la sesin ya existe no abrir otra nueva, sino que se limitar a abrir
toda la informacin asociada a dicha sesin. Una manera de evitar incluir esta funcin
en todas las paginas es inicializar la variable session.auto_start = 1 en el archivo de
configuracin php.ini

2.- session_register()
Esta funcin sirve para registrar una variable de sesin:

Ejemplo:
$us=dehesa;
$_SESSION['usuario'] = $us;

3.-Para determinar si una variable de sesin ya se encuentra registrada se puede hacer

de la siguiente forma:

if (isset($_SESSION['usuario']))
echo "SESION ABIERTA";
else
echo "SESION CERARADA";

4.- Para cerrar una sesin implica dos etapas: des registrar la variable de sesin y
destruir los datos asociados.
Ejemplo:
unset($_SESSION['usuario']); //Eliminar la variable de sesin registrada
session_destroy(); //Destruye los datos asociados a la sesin

El siguiente ejemplo, muestra el manejo de sesiones, consta de tres archivos .php. El

primero muestra los vnculos a cada uno de los otros dos archivos y el mensaje del
estado de la sesin segn el caso:

<!-- sesion_php.php -->

<html>
<head>
<title>Manejo de seiones</title>
</head>
<body>
<p><a href="sesion_php_abrir.php">Iniciar Sesin</a></p>
<p><a href="sesion_php_cerrar.php">Cerrar Cesin </a></p>
<?php

if (isset($_SESSION['usuario'])) //3. Usar la variable de sesin

echo "SESIN ABIERTA";
else
echo "SESIN CERARADA";

125
?>
</body>
</html>

El segundo archivo comprueba si la sesin no est iniciada, si es as entonces la

inicia, en otro caso no hace nada.

<!-- sesion_php_abrir.php -->

<html>
<head>
<title>Manejo de seiones</title>
</head>
<body>
<?php
if (!isset($_SESSION['usuario'])) //Comprueba si no existe la variable
{
$us=dehesa;
$_SESSION['usuario'] = $us; //2.- Registrar la variable de sesin:
echo "SESION AHORA ESTA ABIERTA";
}
?>
</body>
</html>

El tercer y ltimo archivo verifica si la sesin esta iniciada, si es as, entonces la

cierra en otro caso no hace nada.
<!-- sesion_php_cerrar.php -->
<html>
<head>
<title>Manejo de seiones</title>
</head>

<body>
<?php
if (isset($_SESSION['usuario'])) //Comprueba si la variable existe
{
unset($_SESSION['usuario']); //4.- Eliminar la variable de sesin registrada
session_destroy(); //Destruye los datos asociados a la sesin
echo "SESION AHORA CERRADA";
}
?>
</body>
</html>
Se puede observar que la variable de sesin, se registra nicamente en el archivo
sesion_php_abrir.php sin embargo este se detecta en los tres archivos, debido a que
se usa la variable super global $_SESSION[]. La variable $us=dehesa, es la que se
registra, en una aplicacin real, el valor asignado a la variable puede provenir de un
campo de una tabla de una base de datos, que identifique al nombre del usuario que
inicie la sesin, este caso se presentar ms adelante.

126
3.10 CONECTIVIDAD ENTRE EL SERVIDOR WEB Y EL
SERVIDOR DE BASE DE DATOS.
Para conectarse a un servidor de base de datos desde el servidor Web, en primer
lugar ambos deben estar instalados y en ejecucin. Al instalar WAMP Server ambos
servicios quedan listos para operar. Se puede utilizar el cliente MySQL para verificar
que este en correcta operacin, para ello se puede crear un acceso directo en el
escritorio de la interfaz de comandos del DOS y definir que inicie en la ruta donde se
encuentra el archivo ejecutable del cliente MySQL, accediendo a su ficha
propiedades, como muestra la siguiente figura:

Fig. 3.3.- Propiedades de Interfaz de comando para iniciar con MySQL

Tras definir la ruta de inicio del cliente MySQL, con solo pulsar doble click sobre el
acceso directo la interfaz de comando inicia donde se encuentra el archivo ejecutable.
Cuando el servidor de MySQL est recin instalado, la cuenta de usuario que lo
administra conocido como superusario root, no tiene contrasea, por lo que se puede
invocar como muestra la figura 3.4

Fig. 3.4.- Acceso al cliente MySQL

127
Tras escribir en la interfaz de comandos: mysql uroot, y obtener el shell de MySQL
(mysql>), significa que el servidor de base de datos est respondiendo correctamente y
se est ya en posibilidad de acceder al servidor de base de datos desde el cdigo de
PHP
Desde el Shell de MySQL se puede utilizar el conjunto de sentencias del Lenguaje
Estructurado de Consulta (SQL) para: Mostrar base de datos, tablas, poner en uso una
base de datos, crear bases de datos, tablas, insertar, eliminar y actualizar registros, etc.

Para poder realizar operaciones con bases de datos se requiere por lo tanto que
el lector previamente haya estudiado el SQL, de no ser as es el momento de
hacerlo. Existen gran cantidad de bibliografas al respecto, en este libro se anexa
informacin al respecto en la carpeta: /Curso de SQL

Tras conocer el lenguaje SQL, en lugar de crear la base de datos de la aplicacin en

desarrollo desde la interfaz de comando, se recomienda escribirla en un archivo de
tipo texto. Este debe contener la descripcin de la base de datos, as como la
inicializacin de cada una de las tablas que la conforman para poder realizar las
pruebas pertinentes durante el desarrollo web.

Ejemplo:
El siguiente archivo (ventas.sql) est escrito en lenguaje SQL y corresponde a la base
de datos del modelo entidad relacin mostrada en la figura 2.5

DROP DATABASE IF EXISTS ventas;

CREATE DATABASE ventas;

use ventas;

create table categoria

(id_cat varchar(10),
Descripcion varchar(49),
primary key(id_cat)
);

create table producto

( id_pro varchar(10) not null,
nombre varchar(40),
precio float,
existencia smallint,
preciov float,
id_cat varchar(10),
jpg varchar(30),
promocion tinyint,
primary key (id_pro),
foreign key (id_cat) references categoria(id_cat)
);

create table clientes

(
id_clie varchar(13),
clave varchar(40),
nom varchar(40),
dir varchar(30),
tel varchar(15),

128
 primary key (id_clie)
);

create table factura

(
id_fac int not null,
fecha DATE NULL,
primary key(id_fac)
);

create table ventas

(
id_clie varchar(13),
id_pro varchar(10),
id_fac int,
cantc smallint,
pu float,
primary key (id_clie,id_pro,id_fac),
foreign key (id_clie) references clientes(id_clie),
foreign key (id_pro) references producto(id_pro),
foreign key (id_fac) references factura(id_fac)
);

create table administradores

(
id_ad varchar(13),
clave varchar(40),
nom varchar(40),
dir varchar(30),
tel varchar(15),
primary key (id_ad)
);

insert categoria values('PRO','PROCESADORES');

insert categoria values('DID','DISCOS DUROS');
insert categoria values('MOU','MOUSES');
insert categoria values('POR','PORTATILES');

insert producto values('DD40G','DISCO DURO MAXTOR DE 250 GBYTES IDE A

7200RPM','705','20','810','DID','dd250g.jpg','1');
insert producto values('DD80G','DISCO DURO SEAGATE DE 80 GBYTES IDE A
7200RPM','510','15','573','DID','dd80g.jpg','1');
insert producto values('PIPIV','ROCESADOR INTEL PENTIUM IV 3
GHZ','687','13','759','PRO','pipiv.jpg','1');
insert producto values('MOOP','Mouse Acteck AM-950 ptico, USB. Color Plateado
','40','16','55','MOU','moop.jpg','1');

insert clientes values('GDV',sha1('iti'),'GASTON DEHESA VALENCIA','GPE.

VICTORIA','9717114526');
insert clientes values('MLF','iti','MARIA LOPEZ FUENTES','C. 5 DE MAYO
JUCHITAN','9717113210');
insert clientes values('JTL',sha1('iti'),'JORGE TOLEDO MATUS','AV. JUAREZ, ESPINAL,
OAX.','9717131056');

insert factura values('1','04/05/08');

insert factura values('2','04/05/08');

insert ventas values('GDV','DD40G','1','2','810');

insert ventas values('GDV','MOOP','1','5','55');
insert ventas values('JTL','PIPIV','2','1','759');

129
insert administradores values('AD1',sha1('iti'),'PEDRO TOLEDO GARCIA','GPE.
VICTORIA','9717114526');
insert administradores values('AD2',sha1('iti'),'JOSE TOLEDO FUENTES','GPE.
VICTORIA','9717114526');

GRANT ALL PRIVILEGES ON ventas.* TO alumnos@localhost IDENTIFIED BY 'iti';

Una breve descripcin del archivo es el siguiente: primeramente se borra la base de

datos ventas, si existe, esto con la finalidad de evitar el error producido por el
servidor de base de datos al intentar crear una base de datos que ya existe,
posteriormente se crea la base de datos y se pone en uso, continua con la definicin
con cada una de las tablas, definiendo en cada una de ellas los campos llaves y para el
caso de la tabla de producto la integridad referencial con categora, se debe poner
especial atencin a la tabla de ventas, pues est en integridad referencias con
clientes, producto y factura. Despus de la definicin de cada una de las tablas, se
insertan algunos registros en cada una de ellas para inicializarlas, segn el orden
como fueron creados y cuidando de no violar la integridad referencial para no
producir errores, finalmente con el comando GRANT, se crea una cuenta de usuario
(alumnos) con contrasea iti.

La conectividad con el servidor de base de datos MySQL, se puede establecer

precisamente con una cuenta de usuario, que puede ser la cuenta de root que tiene
todos los privilegios sobre todas las bases de datos que pudieran existir en el servidor
o con una cuenta con derechos restringidos como es el caso de la cuenta recin creada
con GRANT, en este caso alumnos.

Tras escribir la base de datos en lenguaje SQL en un archivo de texto (ventas.sql), se

puede procesar con el cliente MySQL desde la interfaz de comandos de la siguiente
forma:
Mysql uroot <ventas.sql

Si no aparece ningn error, significa que ahora la base de datos ya est construida y
puede ser accedida desde el cdigo PHP.

CONEXIN DE PHP AL SERVIDOR MySQL

Se realiza bsicamente usando dos funciones de PHP.
Ejemplo:

//Parmetros de conexin
$servidor="localhost";
$usuario="alumnos";
$contasena="iti";
$bd="ventas";
//Funcin de conexin al servidor mysql
$conexion = mysql_connect($servidor, $usuario, $contasena);
if (!$conexion)
{
echo "ERROR DE CONEXION CON EL SERVIDOR MYSQL";
exit();
}
$cbd=mysql_select_db($bd, $conexion);

130
if (!$cbd)
{
echo "ERROR DE CONEXION CON LA BASE DE DATOS";
exit();
}

Bsicamente la funcin que hace la conexin con el servidor de base de datos es la

funcin mysql_connect(), este recibe tres parmetros para lograrlo: El nombre del
servidor, el nombre del usuario y la contrasea, para este caso son localhost y el
usuario creado con GRANT, alumnos y su respectiva contrasea iti.

La funcin mysql_connect() retorna un identificador de la conexin si logra

conectarse con el servidor, de lo contrario regresa un NULL, esto puede ocurrir en
diferentes casos como: el servidor de base de datos no est activo, el usuario o
contrasea son incorrectos.

Ahora la funcin encargada de poner en uso la base de datos es

mysql_select_db(),este recibe como parmetros el nombre de la base de datos, as
como el identificador de la conexin, tambin retorna un NULL en el caso de no
poderse conectarse con la base de datos.

El cdigo para la conexin con una base de datos en una aplicacin Web, es un
cdigo que se usa frecuentemente en diferentes paginas que conforman el sitio, por
ello se recomienda tenerla como funcin en un archivo.
Ejemplo:

<!-- conexion.php -->

<html>
<head>
<title>Conexin a una base de datos</title>
</head>
<body>
<?php
function conectar()
{
//Parmetros de conexin
$servidor="localhost";
$usuario="alumnos";
$contasena="iti";
$bd="ventas";
//Funcin de conexin al servidor mysql
$conexion = mysql_connect($servidor, $usuario, $contasena);
if (!$conexion)
{
echo "ERROR DE CONEXION CON EL SERVIDOR MYSQL";
exit();
}
$cbd=mysql_select_db($bd, $conexion);
if (!$cbd)
{
echo "ERROR DE CONEXION CON LA BASE DE DATOS";
exit();
}
return($conexion);
}

131
?>
</body>
</html>

La funcin que se ha creado en este archivo se llama conectar(), este se encargar de

conectarse con el servidor de base de datos de nombre localhost, con usuario alumnos,
contrasea iti y a la base de datos ventas, en caso de tener xito retornar el
identificador de conexin en otro caso no retorna nada.

La pagina que use la funcin conectar() lo puede hacer incluyendo el siguiente

cdigo al inicio:

include ("conexion.php");
$conexion=conectar();

Para el caso de establecer la conexin con otros servidores de bases de datos, se

utilizan funciones similares de PHP, para ello se debe consultar con la tabla
correspondiente segn el manejador de base de datos.

OPERACIONES EN TABLAS DE UNA BASE DE DATOS

Una vez que se logra la conexin con el servidor de base de datos y con una base de
datos en particular, las operaciones ms frecuentes que se realizan en cada una de las
tablas que conforman la base de datos se pueden resumir en:
Insercin
Consulta
Eliminacin
Actualizacin

Para demostrar cada una de ellas se usar la tabla de clientes del archivo ventas.sql

INSERSION
En el siguiente ejemplo se realiza la insercin de registros en la tabla clientes, se usan
dos archivos, el primero contiene un formulario donde el usuario introduce los datos
de cada cliente como son: Clave, nombre, contrasea, direccin y telfono. Estos
datos son enviados al segundo archivo usando el mtodo POST, se conecta a la base
de datos, usando la funcin conectar() del archivo conexion.php, inserta el registro en
la tabla de clientes y finalmente muestra los datos introducidos en una tabla HTML.
He aqu el primer archivo:

<!-- clientes_alta.htm -->

<html>
<head>
<title>Alta de Clientes</title>
</head>
<body>
<form name="form1" method="post" action="clientes_alta.php">
<table border="1" align="center">
<tr>
<td colspan='2'><p align='center'>REGISTRO DE CLIENTES</p> </td>
</tr>

132
 <tr>
<td>CLAVE</td>
<td width="49%"><input name="clv" type="text" id="clv" size="10"
maxlength="10"></td>
</tr>
<tr>
<td>NOMBRE</td>
<td><input name="nom" type="text" id="nom" size="30" maxlength="30"></td>
</tr>
<tr>
<td>CONTRASE&Ntilde;A</td>
<td><input name="contrasena" type="password" id="contrasena" size="30"
maxlength="30"></td>
</tr>
<tr>
<td>DIRECCION</td>
<td><input name="direccion" type="text" id="precioc2"></td>
</tr>
<tr>
<td>TELEFONO</td>
<td><input name="tel" type="text" id="tel"></td>
</tr>

<tr>
<td colspan='2'><p align='center'><input name='Aceptar' ' type='submit'
id='Aceptar' value='Aceptar'>
</p></td>
</tr>
</table>
</form>
</body>
</html>

Una vez capturados los datos, el navegador lo muestra as:

El archivo encargado de procesar los datos una vez que se pulsa el botn Aceptar es el
siguiente:
<!-- clientes_alta.php -->
<html>
<head>
<title>Alta de clientes</title>
</head>
<body>
<?php
//Datos recibidos del formulario
$clv= strtoupper($_POST[clv]); //Convierte a mayscula

133
$no= strtoupper($_POST[nom]);
$dir=strtoupper($_POST[direccion]);
$cont= $_POST[contrasena];
$tel=$_POST[tel];

if (empty($clv)||empty($no)) //Si los campos Clave Nombre estn vacos

{
echo "DATOS INSUFICIENTES <BR>";
exit();
}

//Conecta al servidor Mysql y a la base de datos ventas

include ("conexion.php");
$conexion=conectar();

//Sentencia de insersin SQL

$sql="insert clientes values('$clv','$cont','$no','$dir','$tel')";
$registros = mysql_query($sql, $conexion); //Ejecuta la sentencia SQL
if (!$registros) //Si la sentencia no tiene xito
{
echo "ERROR AL GUARDAR LOS DATOS";
exit(); //Finaliza la ejecucin de la pgina
}
//Se muestran los datos insertados en una tabla HTML
echo "<h3 align='center'>DATOS GUARDADOS</H3>";
echo "<table align='center' border='1'>
<tr>
<td>Clave</td>
<td>$clv</td>
</tr>
<tr>
<td>Nombre</td>
<td>$no</td>
</tr>
<tr>
<td>Direccin </td>
<td>$dir</td>
</tr>
<tr>
<td>Telefono </td>
<td>$tel</td>
</tr>
</table>";
?>
</body>
</html>

El navegador tras insertar el registro en la tabla clientes muestra:

134
CONSULTA
Para realizar una consulta en la tabla de clientes, basta con un archivo .php, al igual
que el proceso de insercin primeramente se conecta al servidor de base de datos
MySQL as como a la base de datos ventas, se efecta posteriormente la consulta con
la sentencia SQL correspondiente, el resultado de la consulta se muestra se muestra
en una tabla HTML
<!-- clientes_consulta.php -->
<html>
<head>
<title>Consulta de Clientes</title>
</head>
<body>
<?php
//Conecta al servidor Mysql y a la base de datos ventas
include ("conexion.php");
$conexion=conectar();
//Sentencia de consulta SQL
$sql="select * from clientes";
$registros = mysql_query($sql, $conexion); //Ejecuta la sentencia SQL
//Muestra los datos de la consulta en una tabla HTML
echo "<table border='1' align='center'>
<tr>
<td>No</td>
<td>CLAVE</td>
<td>NOMBRE</td>
<td>DIRECCION</td>
<td>TELEFONO</td>
</tr>";
$x=1; //Contador de registros
while ($reg = mysql_fetch_object($registros))
{
echo"<tr>
<td>$x</td>
<td>$reg->id_clie</td>
<td>$reg->nom </td>
<td>$reg->dir</td>
<td>$reg->tel</td>
</tr>";
$x++;
}
echo"</table>";
?>
</body>
</html>

Los registros retornados por la consulta SQL, se extraen como objetos con la funcin
mysql_fetch_object(), por cada iteracin que se efecta con la sentencia while, gracias
a eso se puede acceder a cada uno de los campos del registro como una propiedad del
objeto $reg, para mostrarse en la columna adecuada en la tabla HTML. Como el
archivo ventas.sql ya tena 3 registros en la tabla de clientes, tras agregar uno ms, su
contenido se vera as:

135
ELIMINACIN
Para la eliminacin de un registro en la tabla de clientes, es similar al proceso de
insercin, tambin se utilizan dos pginas, la primera pagina consiste en un
formulario donde el usuario escribe la clave de cliente que se desea eliminar y la
segunda, recibe este parmetro con el mtodo POST, y efecta el proceso de
eliminacin en la tabla. El primer archivo es el siguiente:
<!-- clientes_eliminar.htm -->
<html>
<head>
<title>Eliminacin de Clientes</title>
</head>
<body>
<form name="form1" method="post" action="clientes_eliminar.php">
<table border="1" align="center">
<tr>
<td align="center" colspan="2">ELIMINAR REGISTRO </td>
</tr>
<tr>
<td>CLAVE</td>
<td><input name="clv" type="text" id="clv"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" name="Submit"
value="Enviar"></td>
</tr>
</table>
</form>
</body>
</html>

El formulario visto en el navegador es:

La pgina que recibe la clave introducida por el usuario y encargada de eliminar el

registro es el siguiente:
<!-- Clientes_eliminar.php -->

<html>
<head>
<title>Elimina un cliente</title>
</head>
<body>

136
<?php
$clv=$_POST[clv];
//Conecta al servidor Mysql y a la base de datos ventas
include ("conexion.php");
$conexion=conectar();
//Sentencia de consulta SQL
$sql="delete from clientes where id_clie='$clv'";
$registros = mysql_query($sql, $conexion); //Ejecuta la sentencia SQL
if ($registros==0)
{
echo "<H2 align='center'>ERROR AL BORRAR EL REGISTRO</H2>";
exit();
}
else
echo "<H2 align='center'>!REGISTRO BORRADO!</H2>";
?>
</body>
</html>

Una vez que se ejecuta la pgina y el registro se elimina con xito se muestra en el
navegador el siguiente mensaje:

ACTUALIZACIN
Para ejemplificar este caso, se plantea un ejemplo an ms largo que los anteriores,
por eso se encuentra al final de los otros tres casos, consiste en tres pginas. La
primera contiene un formulario donde el usuario escribe la clave del cliente que desee
actualizar sus datos, la segunda pgina, recibe la clave y realiza una consulta en la
tabla de clientes para obtener todos los dems campos del registro, muestra cada
campo en una tabla HTML y permite que el usuario pueda modificarlos, excepto la
llave que tiene el atributo de solo lectura, por ltimo, segn las modificacin
efectuadas por el usuario se envan a la tercera pgina, quien realmente realiza la
actualizacin en la tabla de clientes.
Este es la primera pgina:

<!-- clientes_actualizar.htm -->

<html>
<head>
<title>Actualizar Cliente</title>
</head>
<body>
<form name="form1" method="post" action="clientes_actualizar.php">
<table border="1" align="center">
<tr>
<td align="center" colspan="2">ACTUALIZAR REGISTRO </td>
</tr>
<tr>
<td>CLAVE</td>
<td><input name="clv" type="text" id="clv"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" name="Submit"
value="Enviar"></td>
</tr>

137
 </table>
</form>
</body>
</html>
Muestra:

El cdigo de la segunda pgina es:

<!-- clientes_actualizar.php -->
<html>
<head>
<title>Actualizar cliente</title>
</head>
<body>
<?php
$clv=$_POST[clv]; //Clave del cliente recibido desde el formulario
//Conecta al servidor Mysql y a la base de datos ventas
include ("conexion.php");
$conexion=conectar();
//Consulta los datos del cliente recibido
$sql="select * from clientes where id_clie='$clv'";
$registros = mysql_query($sql, $conexion); //Ejecuta la consulta
$reg = mysql_fetch_object($registros); //Extrae el registro como un objeto
//Muestra los datos del cliente en una tabla HTML
echo "<form name='form1' method='post' action='clientes_actualizar2.php'>
<table border='1' align='center'>
<tr>
<td align='center' colspan='2'>ACTUALIZAR DATOS DEL CLIENTE </td>
</tr>
<tr>
<td>CLAVE</td>
<td ><input name='clv' readonly='true' value='$reg->id_clie' type='text'
size='10' maxlength='10'></td>
</tr>
<tr>
<td>NOMBRE</td>
<td><input name='nom' type='text' value='$reg->nom' id='nom' size='30'
maxlength='30'></td>
</tr>
<tr>
<td>CONTRASEA</td>
<td><input name='cont' type='password' value='$reg->clave' id='cont'></td>
</tr>
<tr>
<td>DIRECCION</td>
<td><input name='dire' type='text' value='$reg->dir' id='dire'></td>
</tr>
<tr>
<td>TELEFONO</td>
<td><input name='tel' type='text' value='$reg->tel' id='tel' size='10'
maxlength='10'></td>
</tr>
<tr>
<td><input name='Aceptar' type='submit' id='Aceptar' value='Aceptar'></td>
<td><input type='reset' name='Submit2' value='Restablecer'></td>

138
 </tr>
</table>
</form>";
?>
</body>
</html>

Con la clave del cliente recibido muestra cada uno de sus dems campos:

Al pulsar el botn Aceptar se llama la tercera pgina quien realiza las modificaciones
en la tabla.
<!-- clientes_actualizar2.php -->
<html>
<head>
<title>Actualizar Cliente</title>
</head>
<body>
<?php
//Parmetros recibidos del formulario
$clv= strtoupper($_POST[clv]);
$no= strtoupper($_POST[nom]);
$dir= strtoupper($_POST[dire]);
$cont= $_POST[cont];
$tel= $_POST[tel];
if(empty($clv)||empty($no)) //valida que la clave y el nombre no esten vacos
{
echo "DATOS INSUFICIENTES <BR>";
exit();
}
//Conecta al servidor Mysql y a la base de datos ventas
include ("conexion.php");
$conexion=conectar();
//Sentencia de actualizacin SQL
$sql="update clientes set clave='$cont',nom='$no',dir='$dir',
tel='$tel' where id_clie='$clv'";
$registros = mysql_query($sql, $conexion); //Ejecuta la sentencia SQL
if (!$registros)
{
echo "ERROR AL MODIFICAR LOS DATOS";
exit();
}
echo "<h3 align='center'>DATOS ACTUALIZADOS</H3>";
?>

</body>

139
</html>

En conclusin para realizar las cuatro operaciones ms frecuentes en una tabla de una
base de datos, como son: Insercin, consulta, eliminacin y actualizacin se usaron
las siguientes sentencias SQL para la tabla de clientes:

Operacin Sentencia
Insercin insert clientes values('$clv','$cont','$no','$dir','$tel'
Consulta select * from clientes
Eliminacin delete from clientes where id_clie='$clv'
Actualizacin update clientes set clave='$cont',nom='$no',dir='$dir', tel='$tel'
where id_clie='$clv'
Tabla 3.24.- Sentencias SQL aplicados a la tabla de clientes.

Para aplicar las mismas operaciones sobre otra tabla, basta con sustituir el nombre de
la tabla, as como cada uno de los campos que lo componen en las sentencias de la
tabla 3.24. Tambin es importante adecuar los mensajes, formularios y tablas HTML
que se vayan a utilizar para que sean apropiadas a cada caso.

3.11 MANEJO DE ARCHIVOS.

El manejo de archivos resulta ser una prctica muy comn en cualquier sitio web.
Muy a menudo se requiere de procesar un texto para cambiarle el formato, buscar una
cadena en su interior o cualquier otro tipo de operacin.

Existen, en PHP, un conjunto muy numeroso de funciones como los mostrados en las
tablas 3.16 y 3.17, que permiten manejar archivos de diferentes formas, para:
Abrir el archivo para su lectura / escritura.
Leer el archivo.
Escribir en el archivo.
Cerrar el archivo

Abrir el archivo para su lectura / escritura.

La funcin fopen() asigna a una variable un puntero (un descriptor) al archivo que
que se abra. La variable puede utilizarse despus para hacer cualquier tipo de
operacin. Si el archivo que se intenta abrir no existe o no puede utilizarse en ese
momento, fopen() devuelve un valor false. Los archivos pueden abrirse en varios
modos tal y como indica la siguiente tabla.

Sintaxis Descripcin
'r' Slo lectura
'r+' Lectura y escritura
'w' Slo escritura
'w+' Lectura y escritura. Suprime el contenido anterior si se escribe. El archivo es creado si no
existe.
'a' Slo escritura. El archivo es creado si no existe y el puntero se coloca al final.
'a+' Lectura y escritura. El archivo es creado si no existe y el puntero se coloca al final.

140
 Tabla 3.25 Modos de apertura de archivos

si se trata con archivos binarios se debe colocar una b delante del modo (Ejemplo.
ba, bw+,...)

Leer el archivo.
La funcin fgets() se encarga de leer lnea a lnea el contenido de un archivo texto
por lo que su utilizacin debe ser incluida dentro de una sentencia de ciclo:
Ejemplo:
<!-- lee_archivo.php -->
<?php
function marcar($archivo,$cadena)
{
$texto = ""; //Se inicializa la variable
$fp = fopen($archivo,"r"); //se abre el archivo en modo lectura
//Se lee lnea por lnea el contenido del archivo
while ($linea= fgets($fp,1024))
{ //Se sustituyen las ocurrencias de la cadena de busqueda
$linea = str_replace($cadena,"<u>$cadena</u>",$linea);
//Se aade a la lnea de texto agregando cambio de lnea
$texto .= $linea."<br>";
}
return $texto;
}
//Aqui inicia la ejecucin
$archivo="lee_archivo.php"; //Puede probar con otro archivo
$cadena = "archivo"; //puede probar con otra cadena
$texto = marcar ($archivo,$cadena); //se llama a la funcion
echo $texto; //Se muestra el texto del archivo
?>

En el ejemplo se lee secuencial en un archivo de texto para localizar dentro del texto
una cadena, a la que a continuacin, se le cambia el formato para ponerla en
subrayado por medio de la etiqueta <u>. Esto puede resultar til si se lleva a cabo
bsquedas internas en el sitio y se desea resaltar la cadena de bsqueda en el texto de
la pgina encontrada.

Escribir en el archivo.
Las funciones para escribir archivos son tan sencillas de utilizar como las de lectura.
La funcin principal fwrite() escribe en un archivo, apuntado por un descriptor, una
cadena de caracteres. Es imprescindible que el archivo est abierto en uno de los
modos de escritura para que no d error.
El siguiente ejemplo muestra el nmero de veces que se visita la pgina, Este nmero
lo almacena en un archivo de texto (contador.txt). Cuando se muestra la pagina por
primera vez, el archivo no existe por lo que el proceso de apertura en modo de lectura
falla retornando un nulo, el proceso de apertura en modo de escritura crea el archivo y
gurda el valor del contador, en actualizaciones posteriores de la pagina, la apertura
del archivo en modo de lectura se enecarga de leer el valor del contador y el proceso
de apertura en modo de escritura de actualizarlo usando la funcin fwrite()
incrementando el contador.

141
<!-- ecribe_archivo.php -->
<?php
function contador($archivo)
{ $contador = 0; //Se inicializa el nmero de actualizaciones
$fp = fopen($archivo,"r"); //Se abre el archivo para lectura
if ($fp) //Si se pudo leer el archivo
{
$contador = fgets($fp, 26); //se lee el contador
fclose($fp); //Se cierra el archivo
}
++$contador; //Se incrementa el contador
//Se actualiza el archivo con el nuevo valor
$fp = fopen($archivo,"w+");
fwrite($fp, $contador, 26);
fclose($fp);
echo "Este script ha sido ejecutado $contador veces";
}
contador("contador.txt"); //Se llama a la funcin
?>

Carga de archivos al servidor

Auque este tema ya no usa las funciones de las tablas 3.16 y 3.17, es una de las
operaciones muy frecuentes en sitios Web. Para poder cargar archivos desde el cliente
al servisor, se debe tener establecidas los siguientes parmetros de configuracin en
el archivo php.ini
file_uploads: (On / Off), pemite que haya o no cargas de archivos
uploads_max_filesize: tamao mximo del archivo que se puede subir
upload_tmp_dir: directorio temporal donde se guardan los archivos cargados
post_max_size: tamao mximo de los datos enviados por el mtodo post
Un formulario puede enviar un archivo al servidor mediante un control de tipo file. El
formulario sera:
<!-- carga_archivo.php -->
<form action="carga_archivo2.php" method="post" enctype="multipart/form-data">
Archivo: <input name="nombre_archivo" type="file" id="nombre_archivo" />
<br />
<input type="submit" name="enviar" value="Enviar" />
</form>

Es importante que el atributo method tenga el valor "post" y que el atributo enctype
tenga el valor ="multipart/form-data"

Cuando PHP recibe el archivo, lo almacena en el directorio upload_tmp_dir y

rellena la matriz asociativa superglobal $_FILES["nombre_archivo_cliente"] (el
nombre que se haya dado al control en el formulario). Esa matriz contiene los
siguientes elementos:

$_FILES['nombre_archivo_cliente']['name']: nombre que tena el archivo

cargado en el ordenador del cliente
$_FILES['nombre_archivo_cliente']['type']: tipo MIME del archivo
cargado
$_FILES['nombre_archivo_cliente']['size']: tamao del archivo cargado

142
 $_FILES['nombre_archivo_cliente']['tmp_name']: nombre del archivo
cargado en el directorio temporal del servidor
$_FILES['nombre_archivo_cliente']['error']: cdigo de error (en su caso)

Como el archivo del directorio temporal desaparece al finalizar el script, es necesario

copiar el archivo a otro lugar. Para ello se utiliza la funcin
move_uploaded_file($origen, $destino), en la que $origen es el nombre
del archivo cargado en el directorio temporal (Se puede utilizar directamente
$_FILES['nombre_archivo_cliente']['tmp_name']) y $destino el nombre del
archivo que contendr la copia.
El cdigo de PHP que recibe el archivo es es siguiente:

<!-- carga_archivo2.php -->

<?php
//Datos del archivo
$nombre_archivo = $_FILES['nombre_archivo']['name'];
$tipo_archivo = $_FILES['nombre_archivo']['type'];
$tamano_archivo = $_FILES['nombre_archivo']['size'];
$destino="carga/".$nombre_archivo; //Directorio destino del archivo en el
servidor
//Se comprueba si las caractersticas del archivo son las adecuadas
if (!((strpos($tipo_archivo, "gif") || strpos($tipo_archivo, "jpeg")) &&
($tamano_archivo < 100000))) {
echo "La extensin o el tamao del archivo no es correcta. <br>Se permiten
archivos .gif o .jpg<br>Se permiten archivos de 100 Kb mximo.";
}else{
if (move_uploaded_file($_FILES['nombre_archivo']['tmp_name'], $destino)){
echo "El archivo ha sido cargado correctamente.";
}else{
echo "Error en la carga del archivo.";
}
}
?>

3.12 SEGURIDAD.
Los aspectos de la seguridad desde el punto de vista terico fueron tratados en el
tema 2.6, en este tema, se aborda desde el punto de la programacin, los aspectos que
ayudan a mejorar el nivel de seguridad en un sitio Web, son:

Autenticacin
Encriptacin
Sesiones
Usuarios del sitio Web

AUTENTICACIN
La autenticacin es un mecanismo para verificar que el usuario que entra al sitio Web
es quien dice ser, para ellos se le puede solicitar antes de poder realizar alguna
operacin con el sitio un nombre de usuario y contrasea.
Para el caso de la base de datos de estudio (ventas) en la tabla de clientes se
encuentran los campos id_clie y clave, que pueden servir como nombre y contrasea
respectivamente, para autenticar a los clientes que entran al sitio.

143
Ejemplo:
Este ejemplo consta de dos pginas, la primera consiste en una tabla HTML que
contiene un formulario, donde el usuario introduce su nombre de usuario y
contrasea, estos estn inicializados con MLF e iti respectivamente ya que en la
tabla de clientes existe un registro con estos datos. La segunda pgina, recibe con el
mtodo POST el nombre de usuario y contrasea y busca en la tabla de clientes si
este usuario existe, si es as, muestra un mensaje de bienvenida con el nombre
completo del usuario, en otro caso, muestra un mensaje indicando que el usuario no
est registrado.
Este es la primera pgina:
<!-- autenticacion.php -->
<html>
<head>
<title>Autenticacin</title>
</head>
<body >
<?php
echo"<table align='center' width='40%' border='1'>
<tr>
<td><div align='center'>Datos de tu cuenta</div></td>
</tr>
<tr>
<td><form name='form1' method='post' action='Autenticacion2.php'>
<table width='90%' border='0' align='center'>
<tr>
<td>USUARIO</td>
<td><input name='usuario' type='text' id='usuario' value='MLF'></td>
</tr>
<tr>
<td>CONTRASE&Ntilde;A</td>
<td><input name='clave' type='password' id='clave' value='iti'></td>
</tr>
<tr>
<td colspan='2'><p align='center'><input type='submit' name='Submit'
value='Aceptar'></p></td>
</tr>
</table>
</form></td>
</tr>
</table>";
?>
</body>
</html>

La pgina que recibe el nombre de usuario, contrasea y que realiza la autenticacin:

<!-- autenticacion2.php -->
<html>
<head>
<title>Autenticacin</title>
</head>
<body>
<?php
$us= $_POST[usuario];
$clave= $_POST[clave];
include "conexion.php";
$conexion=conectar();

144
 //Busca el cliente en la tabla de clientes
$sql="select * from clientes where id_clie='$us' and clave='$clave'";
$reg = mysql_query($sql, $conexion);
$r= mysql_fetch_object($reg);
$n=mysql_num_rows($reg); //Nmero de registros de la consulta
if ($n==1) //Se encontr al cliente
echo"<h2 align='center'>BIENVENIDO $r->nom</h2>";
else //No se encontr al cliente
echo"<h2 align='center'>USUARIO NO REGISTRADO</h2>";
?>
</body>
</html>

En algunas aplicaciones Web, se manejan diferentes tipos de usuarios, por lo que se

requiere que el proceso de autenticacin busque al usuario en varias tablas en lugar de
solo buscar en una sola como en el caso anterior. En general la idea es la misma.

ENCRIPTACIN
PHP, cuenta con diferentes funciones de encriptacin, entre los que se pueden
mencionar el MD5() y el sha1(),siendo este ltimo el ms seguro, ambos son
algoritmos no reversibles, es decir encriptan una cadena de caracteres pero no pueden
reconstruir la cadena original, es por ello que el mecanismo utilizado para probar la
autenticidad de la cadena original, es mediante la aplicacin nuevamente de la
funcin, y compararla con la encriptada que puede estar almacenado en un campo de
una tabla de una base de datos. sha1() producen una salida resumen de 160 bits (40
caracteres hexadecimales) de un mensaje que puede tener un tamao mximo de 264
bits. El nivel de seguridad del algoritmo sha1 es bueno, aunque en el 2005, un equipo
de investigadores chinos demostraron que son capaces de romperlo a los 269
operaciones, lo cual significa que an en estas circunstancias no est nada mal.

La funcin sha1(), se puede aplicar para encriptar la contrasea del usuario, durante
la autenticacin, de tal manera que un usuario que se encuentre monitoreando la red
no pueda interpretar la contrasea del algn usuario y poderla usar para autenticarse
posteriormente.

En el archivo ventas.sql, se insertaron tres registros en la tabla clientes, estos son:

insert clientes values('GDV',sha1('iti'),'GASTON DEHESA VALENCIA','GPE.

VICTORIA','9717114526');
insert clientes values('MLF','iti','MARIA LOPEZ FUENTES','C. 5 DE MAYO
JUCHITAN','9717113210');
insert clientes values('JTL',sha1('iti'),'JORGE TOLEDO MATUS','AV. JUAREZ,
ESPINAL, OAX.','9717131056');

Se puede observar como los registros que tienen asignados a su campo id_clie DGV
y JTL respectivamente, tienen la funcin sha1() aplicado al campo clave
contrasea, esto significa que la cadena que se almacena en el campo clave de la
tabla de clientes no es iti, sino una secuencia de 40 caracteres en hexadecimal
producidos pos la funcin de encripatacin. Para probar lo anterior, se puede realizar
la siguiente consulta en el servidor MySQL, y obtener su correspondiente resultado.

145
mysql> select id_clie,clave,nom from clientes;

id_clie Clave Nom

GDV 70b5992d48a5ccb513904387832b6dec99c32e4f GASTON DEHESA VALENCIA
JTL 70b5992d48a5ccb513904387832b6dec99c32e4f JORGE TOLEDO MATUS
MLF Iti MARIA LOPEZ FUENTES

As se puede observar que dos registros tienen una cadena encriptado, mientras que
una est en texto normal.

Cuando el usuario se autentica, registra una contrasea en texto normal, luego se le

aplica la funcin sha1(), generando la secuencia de 40 caracteres en hexadecimal
encriptado, mismo que se busca si existe una correspondencia en la base de datos, de
ser as significa que el usuario es un cliente registrado y se le puede dar acceso al
sistema.
Las paginas autenticacion.php y autenticacion2.php pueden ser utilizados para
proveer de autenticacin con encriptacin en la contrasea a un usuario, sustituyendo
solamente la lnea de la consulta realizada en la pgina autenticacion2.php. por el
siguiente:

$sql="select * from clientes where id_clie='$us' and clave=sha1('$clave')";

SESIONES
Un complemento perfecto para mejorar la seguridad en un sitio Web en el proceso de
autenticacin con contrasea, es que se utilice adems como el inicio de sesin del
usuario que se est autenticando, para ello es necesario una vez que se compruebe que
el usuario es una usuario registrado se registre su nombre de usuario en la variable de
sesin y este se mantenga mientras navega en el sitio Web hasta que decida cerrar la
sesin.
El siguiente ejemplo implementa la autenticacin con encriptacin de la contrasea
del usuario, as como el manejo de sesiones, es una modificacin de las paginas
autenticacin.php y autenticacion2.php, dando lugar a las paginas:
autenticacion_encriptacion_sesion.php y autenticacion_encriptacion_sesion2.php con
otras dos pginas para cerrar la sesin que se inicie, implementadas en las pginas:
cerrar sesion.php y cerrar sesion2.php, por obviedad solo se muestra la pgina ms
importante, sin embargo se puede cargar en el navegador la pgina
autenticacion_encriptacion_sesion.php para verificar la funcionalidad en conjunto

<!-- autenticacion_encriptacion_sesion2.php -->

<html>
<head>
<title>Autenticacin, Encriptacin y Sesin</title>
</head>
<body>
<?php
include "cerrar session.php"; //Contiene la funcin cerrar()
if (isset($_SESSION['usuario'])) //Comprueba si la sesin esta iniciada
{
cerrar(); //Si la sesin esta iniciada se llama a la funcin cerrar()
exit(); //termina la pgina
}

146
 $us= $_POST[usuario];
$clave= $_POST[clave];
include "conexion.php";
$conexion=conectar();
//Busca el cliente en la tabla de clientes
$sql="select * from clientes where id_clie='$us' and clave=sha1('$clave')";
$reg = mysql_query($sql, $conexion);
$r= mysql_fetch_object($reg);
$n=mysql_num_rows($reg); //Nmero de registros de la consulta
if ($n==1) //Se encontro al cliente
{
echo"<h2 align='center'>BIENVENIDO $r->nom</h2>";
echo"<p align='center'><a href='../2/plantilla1.htm'>Entrar al
sistema</a></p>";
$_SESSION['usuario'] = $us; //Registra la variable de sesin
}
else //No se encontro al cliente
echo"<h2 align='center'>USUARIO NO REGISTRADO</h2>";
?>
</body>
</html>

Al inicio del cdigo de php, se comprueba si la sesin esta iniciada, si es as se llama

a la funcin cerrar(), para cerrarla, en caso contrario se realiza la consulta SQL para
verificar que el usuario, con la contrasea correspondiente exista en la tabla de
clientes, de ser as se muestra el mensaje de bienvenida, se muestra el vinculo para
acceder a otra pgina que representara las opciones accesibles para este usuario y
finalmente registra en la variable de sesin el usuario autenticado, con lo cual se da
por iniciado la sesin.

Se recomienda como medida de seguridad que en todas las pginas accesibles para el
usuario una vez autenticado, se verifique si ya inicio sesin, para mostrrsela, en caso
contrario, impedirlo indicndole con el mensaje apropiado.

Ejemplo:
if (!isset($_SESSION['usuario']))
{
echo "Debe iniciar sesin";
exit();
}

Este cdigo puede insertarse al inicio de cada pgina, para cuidar que otros usuarios
no puedan accederla sin haber antes iniciado una sesin.

USUARIOS DEL SITIO WEB

Aplicar las tres medidas de seguridad durante el inicio de sesin aporta un buen nivel
de seguridad al sitio Web, pues es el punto de entrada al sistema. Otro aspecto de la
seguridad es clasificar a los diferentes tipos de usuarios segn la funcin que van a
realizar, para no mostrar las mismas opciones a todos los tipos de usuarios, por
ejemplo a los clientes, permitirles realizar compras y ver el catalogo de productos y
precios, mientras que a los administradores, mostrarles todas las facturas emitidas a
los clientes, as como permitirle las modificaciones pertinentes, esto trae como
resultado que una vez que se verifique el tipo de usuario que inicie sesin, si se trata

147
de un cliente mostrarle la pagina que contenga las opciones que pueda realizar y si se
trata de una administrador una pgina distinta que a su vez le permita otro nivel de
privilegio.

Un forma de poder clasificar a los usuarios es ubicandolos en tablas distintas en la

base de datos, como es el caso de clientes y administradores en la base de datos de
ventas, en este caso la autenticacin y el manejo de sesiones se complica un poco,
ahora al usuario no solo se debe buscar en una sola tabla, sino en dos.
Ejemplo:

<!-- autenticacion_tipos_usuarios.php -->

<html>
<head>
<title>Autenticacin diferentes tipos de usuarios</title>
</head>
<body>
<?php
include "cerrar session.php"; //Contiene la funcin cerrar()
if (isset($_SESSION['usuario'])) //Comprueba si la sesin esta iniciada
{
cerrar(); //Si la sesin esta iniciada se llama a la funcin cerrar()
exit(); //termina la pgina
}
$us= $_POST[usuario];
$clave= $_POST[clave];
include "conexion.php";
$conexion=conectar();
//Busca al usuario en la tabla de clientes
$sql="select * from clientes where id_clie='$us' and clave=sha1('$clave')";
$reg = mysql_query($sql, $conexion);
$r= mysql_fetch_object($reg);
$n=mysql_num_rows($reg); //Nmero de registros de la consulta
if ($n==1) //Se encontro al usuario en la tabla de clientes
{
echo"<h2 align='center'>BIENVENIDO CLIENTE: $r->nom</h2>";
echo"<p align='center'><a href='../2/plantilla1.htm'>Entrar al
sistema</a></p>";
$_SESSION['usuario'] = $us; //Registra la variable de sesin
}
else //No se encontro al usuario en la tabla de clientes
{
//Busca al usuario en la tabla de administrador
$sql="select * from administradores where id_ad='$us' and
clave=sha1('$clave')";
$reg = mysql_query($sql, $conexion);
$r= mysql_fetch_object($reg);
$n=mysql_num_rows($reg); //Nmero de registros de la consulta
if ($n==1) //Se encontro al usuario en la tabla de administradores
{
echo"<h2 align='center'>BIENVENIDO ADMINISTRADOR: $r->nom</h2>";
echo"<p align='center'><a href='../2/plantilla2.htm'>Entrar al
sistema</a></p>";
$_SESSION['usuario'] = $us; //Registra la variable de sesin
}
else //No se encontro al usuario
echo"<h2 align='center'>USUARIO NO REGISTRADO</h2>";
}
?>

148
</body>
</html>

Este ejemplo se puede probar modificando la pgina

autenticacion_encriptacion_sesion.php, asignando a la propiedad del formulario el
nombre de la pgina:
action= autenticacion_tipos_usuarios.php.

Se puede apreciar como si se encuentra a un cliente se llama a una pgina y si se

encuentra un administrador a una pgina distinta. El algoritmo puede funcionar para
ms tipos de usuario, basta con ampliar y adecuar el cdigo ligeramente.

149
PREGUNTAS
1. Existe la posibilidad de que en una peticin de un cliente Web reciba cdigo
PHP,JSP ASP.NET?, si, no, por que
2. Cules son los pasos que sigue el navegador cuando realiza una peticin?
3. Explique cmo se prueba una pgina que contiene cdigo de php
4. Mencione los programas que se pueden utilizar como plataforma de trabajo
Web
5. Cmo se llaman los archivos de configuracin de: apache, php y MySQL?
6. Mencione por lo menos tres parmetros de configuracin de apache y para
qu sirven
7. Mencione por lo menos tres parmetros de configuracin de php y para qu
sirven
8. Como se prueban los servicios Web para verificar si estn funcionando
correctamente
9. Muestre una tabla de los operadores aritmticos
10. Muestre una tabla de los operadores de comparacin
11. Muestre una tabla de los operadores lgicos
12. Muestre una tabla de los operadores bit a bit
13. Muestre una tabla de los operadores de incremento/decremento
14. Qu es la precedencia de operadores?
15. Cules son las sentencias que se pueden utilizar para efectuar ciclos?
16. Cules son las sentencias de control?
17. Qu es un arreglo?
18. Qu es una funcin definida por el usuario?
19. Indique las diferencias entre un argumento por valor y por referencia
20. Cul es el alcance de una variable global?
21. Qu son las variables estticas?
22. Qu son las funciones de libreras?
23. Qu son las libreras externas? de un ejemplo
24. Qu mtodos se pueden usar para procesar formularios?
25. Cundo se recomienda el uso del mtodo GET
26. Cundo se recomienda el uso del mtodo POST
27. Qu es una sesin?
28. Cules son los pasos para el manejo de sesiones?
29. Explique cmo se prueba le servidor de base de datos MySQL?
30. Cules son las operaciones ms frecuentes en una tabla de una base de datos?
Especifique las sentencias SQL que se utilizan para cada caso.
31. Cules son las operaciones que se realizan en un archivo?
32. Muestre la funcin con los modificadores adecuados para abrir el archivo
nuevo.bin de tipo binario para lectura y escritura

150
33. Cmo se define el directorio donde se guardan los archivos que se cargan
temporalmente en el servidor?
34. Cmo se determina el tamao de un archivo cargado en el servidor?
35. Porque se requiere copiar el archivo cargado en el directorio temporal del
servidor a otro directorio?
36. En qu consiste la autenticacin?
37. En qu consiste la Encriptacin?
38. En qu consiste el manejo de sesiones?
39. En qu consiste el manejo de usuarios de un sitio Web?

151
EJERCICIOS PROPUESTOS

Segn el ejercicio del caso de estudio presentado por l alumno en el captulo 2:

1. Seleccionar 2 de las tablas que contenga la base de datos e implementar los

formularios correspondientes para los procesos de Insercin, Consulta,
Eliminacin y Actualizacin, para cada una.
2. Utilizando la librera TCPDF, crear un archivo PDF que contenga la lista de
todos los registros de una de las consultadas efectuadas.
3. Identificar los posibles usuarios del sistema e implementar la autenticacin
para los usuarios del sitio Web, considerando las medidas de seguridad como
el manejo de sesiones y la encriptacin.
4. Identificar en que tabla es conveniente la utilizacin de carga de archivos, e
implementarla.

152
 4

Procesamiento del lado del cliente.

153
4.1. LENGUAJE SCRIPT DEL CLIENTE.

En el capitulo anterior se abordo un lenguaje que permite darle dinamismo a una

pagina web por el lado del servidor, en este capitulo se abordar un lenguaje que le
dar dinamismo a una pagina Web por el lado del cliente, ambos lenguajes, adems
del HTML, permiten construir paginas ms interesantes.

Un lenguaje de script es un pequeo lenguaje de programacin cuyo cdigo se inserta

dentro del documento HTML. El programa se ejecuta en la mquina del cliente
cuando se carga la pgina, o cuando sucede algo especial como puede ser el pulsar
sobre un enlace. El soporte de scripts de HTML es independiente del lenguaje de
scripts.

Los scripts ofrecen la posibilidad de extender los documentos HTML de maneras

activas e interactivas. Por ejemplo:
Pueden evaluarse los scripts a medida que se carga el documento para
modificar los contenidos del documento dinmicamente.
Los scripts pueden acompaar a un formulario para procesar los datos a
medida que stos se introducen. Los diseadores pueden rellenar
dinmicamente partes de un formulario segn los valores de los otros campos.
Tambin pueden asegurarse de que los datos introducidos concuerden con
rangos de valores predeterminados, de que los campos sean consistentes entre
s, etc.
Los scripts pueden ser llamados por eventos que afecten al documento, como
la carga, la descarga, el movimiento del foco sobre los elementos, los
movimientos del ratn, etc.
Los scripts pueden ser vinculados a controles de formulario (p.ej., botones)
para producir elementos grficos para la interfaz del usuario.

Sin embargo, conviene recordar que se ejecutan en el navegador del usuario y no en

la mquina donde estn alojadas, por lo que no podrn realizar cosas como manejar
bases de datos. Esto se hace con un lenguaje del lado del servidor

El primer lenguaje de script que vi la luz fue el JavaScript de Netscape. Nacido con
la versin 2.0 de este navegador y basado en la sintaxis de Java, su utilidad y el casi
absoluto monopolio que entonces ejerca Netscape en el mercado de navegadores
permitieron que se popularizara y extendiera su uso.

El mximo rival del Netscape Navigator, el Internet Explorer de Microsoft, comenz

a soportar este lenguaje en su versin 3.0. Fue tambin entonces cuando introdujo el
nico rival serio que el JavaScript ha tenido en el mercado de los lenguajes de script:
el VBScript. Basado en el lenguaje BASIC, no ha tenido excesiva difusin en Internet
debido a la previa implantacin del JavaScript, es por ello que en lo sucecivo se
aborda este lenguaje.

Para introducir un script JavaScript se hace dentro de las etiquetas:

154
<SCRIPT LANGUAGE=JavaScript>
Cdigo del script
</SCRIPT>

Veamos un ejemplo muy bsico de una pgina HTML que contiene un script de
Javascript:
<!-- basico.htm -->
<HTML>
<head>
<title>Java script</title>
</head>
<BODY>
<h3>Esto es HTML</h3>
<SCRIPT LANGUAGE="JavaScript">
document.write("Esto es JavaScript")
</SCRIPT>
<h3>Esto vuelve a ser HTML</h3>
</BODY>
</HTML>
Esto es HTML
El resultado es: Esto es JavaScript
Esto vuelve a ser HTML

La funcionalidad anterior es muy bsico, el script solo muestra un mensaje de texto,

sin emabargo ilustra como se puede cambiar entre HTML y Javascript, La verdadera
utilidad de JavaScript es el que los scripts se ejecuten cuando ocurra algn evento,
como sea un click de ratn, que ste pase por encima de un enlace, que se enven los
datos de un formulario.

En el siguiente ejemplo se utiliza el evento onclick() de un botn para validar que la

clave y el nombre del cliente sean introducidos por el usuario en el formulario antes
de llamar a la pagina clientes_alta.php.

!-- clientes_alta_valida.htm -->

<html>
<head>
<title>Alta de Clientes</title>
<script language="JavaScript" type="text/JavaScript">
function validar()
{
if (document.form1.clv.value!="" &&document.form1.nom.value!="")
document.form1.submit();
else
{
if(document.form1.clv.value=="")
window.alert("FALTA LA CLAVE");
else
window.alert("FALTA EL NOMBRE");
}

}
</script>
</head>
<body>
<form name="form1" method="post" action="clientes_alta.php">
<table border="1" align="center">

155
 <tr>
<td colspan='2'><p align='center'>REGISTRO DE CLIENTES</p> </td>
</tr>
<tr>
<td>CLAVE</td>
<td width="49%"><input name="clv" type="text" id="clv" size="10"
maxlength="10"></td>
</tr>
<tr>
<td>NOMBRE</td>
<td><input name="nom" type="text" id="nom" size="30" maxlength="30"></td>
</tr>
<tr>
<td>CONTRASE&Ntilde;A</td>
<td><input name="contrasena" type="password" id="contrasena" size="30"
maxlength="30"></td>
</tr>
<tr>
<td>DIRECCION</td>
<td><input name="direccion" type="text" id="precioc2"></td>
</tr>
<tr>
<td>TELEFONO</td>
<td><input name="tel" type="text" id="tel"></td>
</tr>

<tr>
<td colspan='2'><p align='center'><input name='Aceptar' onClick="validar();"
' type='button' id='Aceptar' value='Aceptar'>
</p></td>
</tr>
</table>
</form>
</body>
</html>

En este ejemplo cada vez que el usuario pulsa sobre el botn Aceptar se ejecuta su
evento onClick(). A este evento se le asigna la funcin validar(), La funcin
validar() se encuentra implementado en la parte superior del cdigo entre las
etiquetas <script> y </script>. El cdigo de esta funcin, verifica si el valor de los
cuadros de texto clv y nom no estn vacos para llamar a la pagina
clientes_alta.php invocando a la funcin sumit(). Si el usuario no introduce la clave
en el formulario y se pulsa sobre el botn Aceptar se muestra el mensaje: FALTA
LA CLAVE, de manera similar ocurre si se introduce una clave pero no el nombre.

En este ejemplo se aprecia una de las funciones importantes de los lenguajes de

script. Permite desde la pagina del cliente validar la informacin que los usuarios
introducen en los formularios, no tiene caso enviar los datos del formulario por la red
hasta el servidor, cuando estos no estn bien rellenados por los usuarios.

La sintaxis del lenguaje JavaScript es prcticamente igual que la de Java (es decir, igual
que la de C). As, tanto los operadores como las estructuras de control son exactamente
iguales a C.

156
Antes de comenzar a desarrollar programas y utilidades con JavaScript, es necesario
conocer los elementos bsicos con los que se construyen las aplicaciones.

VARIABLES
Las variables en JavaScript se crean mediante la palabra reservada var, una de las
caractersticas de JavaSript al igual que PHP es que tampoco es necesario declarar las
variables mediante la palabra reservada var
var x = 20;
var y = 25;
z = x+y;

La variable z no est declarada, por lo que JavaScript crea una variable y le asigna el
valor correspondiente, El nombre de una variable debe cumplir las siguientes reglas:
Slo puede estar formado por letras, nmeros y los smbolos $ y _ .
El primer carcter no puede ser un nmero.

Por tanto, las siguientes variables tienen nombres correctos:

var $Edat;
var _$Nombre;
var $$$Area;
var $_a__$8;
Sin embargo, las siguientes variables tienen identificadores incorrectos:
var 1x; // Empieza por un nmero
var numero;1_123; // Contiene un carcter ";"

En JavaScript un comentario en lnea se realiza con // y un comentario de bloque con

/* ---*/

Tipos de variables
En JavaScript el tipo de variable se define dependiendo del valor que se le asigne,
ejemplos:
var Edad = 20; // variable tipo entero
var PI = 3.1416; // variable tipo real
var Nombre = "JUAN PEREZ"; // Variable de tipo texto
var Calif = [100, 80, 100, 80]; //Variable de tipo arreglo de enteros
var Promocion = true; //Variable de tipo booleano

OPERADORES
Los operadores se utilizan para manipular variables: ejecutan clculos, buscan
igualdades, realizan asignaciones. En la siguiente tabla se presentan los de uso ms
comn.

Operador Descripcin Ejemplo Operador Descripcin Ejemplo

OPERADORES ARITMTICOS OPERADORES DE ASIGNACIN
+ Suma x=x+z; = Asignacin x=10;
- Resta x=x-z; += Asignar y sumar x+=10;
* Multiplicacin x=x*z -= Asignar y restar x-=10;
/ Divisin x=x/z; *= Asignar y multiplicar x*=10;
% Modulo o resto x=x%z; /= Asignar y dividir x/=10;
OPERADORES LGICOS &= Asig. operador AND x&=0x02;
&& AND Lgico if (x&&0xFF) |= Asignar operador OR x|=0x02;

157
 || OR Lgico if (x||0xFF) OPERADORES A NIVEL DE BITS
NOT Lgico If (Soltero) & AND a nivel de bits C=A&B;
OPERADORES RELACIONALES | OR a nivel de bits
== Igual que if (x==y) XOR a nivel de bits C=AB;
= Diferente que << Desp. a la izquierda B=A<<3;
< Menor que >> Desp. a la derecha C=A>>2;
> Mayor que ~ NOT a nivel de bits A=~D;
<= Menor o igual que OPERADORES DE APUNTADORES
>= Mayor o igual que * Indireccin Int *Ap;
OTROS & Direccin x=&Ap;
++ Incremento x++;
-- Decremento x--;

Tabla 4.1.- Operadores de JavaScript

SENTENCIAS.
Las sentencias de control de flujo tales como: if ,else, elseif, switch; as como las
sentencias de de iteracin: while, do..while, for, soportadas por JavaScript, tienen las
mismas reglas de sintaxis las soportadas por PHP, planteados en el tema 3.4, esto se
debe a que ambos lenguajes estn derivados del lenguaje C.

4.2. MODELO DE OBJETOS CON LENGUAJE SCRIPT.

JavaScript es un lenguaje de objetos. Un objeto es un ente abstracto que agrupa por
un lado a un conjunto de propiedades que definen al propio objeto y por otro, una
serie de mtodos que interactan sobre l (funciones o procedimientos).

Aunque JavaScript no permite dos de las caractersticas clsicas de los lenguajes

orientados a objetos (ni la herencia ni el polimorfismo), s permite la creacin y
manipulacin de objetos sencillos, y la definicin de mtodos y propiedades para
dichos objetos

Lo que verdaderamente interesa conocer de un lenguaje de scripts como JavaScript,

es el Modelo de Objetos de Documento (DOM, Document Object Model). El DOM
es el conjunto de objetos predefinidos que nos permite acceder a todos los elementos
de una pgina y a ciertas caractersticas especficas del navegador

El DOM es una jerarqua de objetos predefinidos que describen los elementos de la

pgina Web que est mostrando el navegador, as como otras caractersticas del
proceso de navegacin (como son el historial, el tamao de la ventana de navegacin
o el contenido de la barra de estado del navegador).

Un ejemplo sencillo. En JavaScript, para escribir un mensaje en un cuadro de

dilogo es:

window.alert("FALTA LA CLAVE");

158
Si bien no se conoce como funciona internamente la funcin alert(), se sabe que
se trata de una funcin del objeto window. A estas funciones se las llama
mtodos, y a las variables propiedades. Tanto los mtodos como las propiedades
siempre se representan de la siguiente manera:
nombre_objeto.nombre_mtodo(argumentos)
nombre_objeto.nombre_propiedad

Actualmente no existe una gran diferencia entre el soporte de JavaScript que

ofrecen los diferentes fabricantes de navegadores, sin embargo se debe tomar en
consideracin que si lo existe aunque sea minima.

En la figura 4.1 se muestra la jerarqua de objetos de JavaScript

Fig. 4.1.- Jerarqua de objetos de JavaScript

159
A continuacin se describen las propiedades y mtodos de algunos de los objetos ms
importantes de la jerarqua de objetos de JavScript

Objeto windows
Se trata del objeto ms alto en la jerarqua del navegador (navigator es un objeto
independiente de todos en la jerarqua), pues todos los componentes de una pgina
Web estn situados dentro de una ventana. El objeto window hace referencia a la
ventana actual. A continuacin se presentan sus propiedades y mtodos.
Propiedades
closed. Es un booleano que indica si la ventana est cerrada ( closed = true )
o no ( closed = false ).
defaultStatus. Cadena que contiene el texto por defecto que aparece en la
barra de estado (status bar) del navegador.
frames. Es un array: cada elemento de este array ( frames[0], frames[1],
...) es uno de los frames que contiene la ventana. Su orden se asigna segn se
definen en el documento HTML.
history. Se trata de un array que representa las URLS visitadas por la ventana
(estn almacenadas en su historial).
length. Variable que nos indica cuntos frames tiene la ventana actual.
location. Cadena con la URL de la barra de direccin.
name. Contiene el nombre de la ventana, o del frame actual.
opener. Es una referencia al objeto window que lo abri, si la ventana fue
abierta usando el mtodo open()
parent. Referencia al objeto window que contiene el frameset.
self. Es un nombre alternativo del window actual.
status. String con el mensaje que tiene la barra de estado.
top. Nombre alternativo de la ventana del nivel superior.
window. Igual que self: nombre alternativo del objeto window actual.
Mtodos
alert(mensaje). Muestra el mensaje 'mensaje' en un cuadro de dilogo
blur(). Elimina el foco del objeto window actual.
clearInterval(id). Elimina el intervalo referenciado por 'id' (ver el
mtodo setInterval(), tambin del objeto window).
clearTimeout(nombre). Cancela el intervalo referenciado por 'nombre'
(ver el mtodo setTimeout(), tambin del objeto window).
close(). Cierra el objeto window actual.
confirm(mensaje). Muestra un cuadro de dilogo con el mensaje 'mensaje'
y dos botones, uno de aceptar y otro de cancelar. Devuelve true si se pulsa
aceptar y devuelve false si se pulsa cancelar.
focus(). Captura el foco del ratn sobre el objeto window actual.
moveBy(x,y). Mueve el objeto window actual el nmero de pixels
especificados por (x,y).
moveTo(x,y). Mueve el objeto window actual a las coordenadas (x,y).
open(URL,nombre,caracteristicas). Abre la URL que le pasemos como
primer parmetro en una ventana de nombre 'nombre'. Si esta ventana no

160
 existe, abrir una ventana nueva en la que mostrar el contenido con las
caractersticas especificadas. Las caractersticas que se pueden elegir para la
ventana que se desea abrir son las siguientes:
toolbar = [yes|no|1|0]. Indica si la ventana tendr barra de
herramientas (yes,1) o no la tendr (no,0).
location = [yes|no|1|0]. Indica si la ventana tendr campo de
localizacin o no.
directories = [yes|no|1|0]. Indica si la nueva ventana tendr botones
de direccin o no.
status = [yes|no|1|0]. Indica si la nueva ventana tendr barra de estado
o no.
menubar = [yes|no|1|0]. Indica si la nueva ventana tendr barra de
mens o no.
scrollbars = [yes|no|1|0]. Indica si la nueva ventana tendr barras de
desplazamiento o no.
resizable = [yes|no|1|0]. Indica si la nueva ventana podr ser
cambiada de tamao (con el ratn) o no.
width = px. Indica el ancho de la ventana en pixels.
height = px. Indica el alto de la ventana en pixels.
outerWidth = px. Indica el ancho *total* de la ventana en pixels.
outerHeight = px. Indica el alto *total* de la ventana el pixels
left = px. Indica la distancia en pixels desde el lado izquierdo de la
pantalla a la que se debe colocar la ventana.
top = px. Indica la distancia en pixels desde el lado superior de la
pantalla a la que se debe colocar la ventana.
prompt(mensaje,respuesta_por_defecto). Muestra un cuadro de dilogo que
contiene una caja de texto en la cual se puede escribir una respuesta a lo que
se pregunte en 'mensaje'. El parmetro 'respuesta_por_defecto' es
opcional, y mostrar la respuesta por defecto indicada al abrirse el cuadro de
dilogo. El mtodo retorna una cadena de caracteres con la respuesta
introducida.
scroll(x,y). Desplaza el objeto window actual a las coordenadas
especificadas por (x,y).
scrollBy(x,y). Desplaza el objeto window actual el nmero de pixels
especificado por (x,y).
scrollTo(x,y). Desplaza el objeto window actual a las coordenadas
especificadas por (x,y).
setInterval(expresion,tiempo). Evalua la expresin especificada despus
de que hayan pasado el nmero de milisegundos especificados en tiempo.
Devuelve un valor que puede ser usado como identificado por
clearInterval().
setTimeout(expresion,tiempo). Evala la expresin especificada despus de
que hayan pasado el nmero de milisegundos especificados en tiempo.
Devuelve un valor que puede ser usado como identificador por
clearTimeout().

161
El siguiente ejemplo mueve 20 veces una ventana en la pantalla cada cierto intervalo
de tiempo al final se cierra.
<!-- windows.htm -->
<HTML>
<HEAD>
<title>Uso del objeto windows con JavaScript</title>
<script LANGUAGE="JavaScript">
<!--
function moverVentana()
{
mi_ventana.moveBy(10,5); //Mueve la ventana de su posicin actual 10,5 pixeles
ms
i++;
if (i<20) //Se repite mientras i<20
setTimeout('moverVentana()',100); //Se llama a la misma funcin
else
mi_ventana.close(); //Cierra la ventana despus de los desplazamientos
}
//-->
</script>

</HEAD>
<BODY>
<script LANGUAGE="JavaScript">
<!--
var opciones="left=100,top=100,width=400,height=150", i= 0;

mi_ventana = window.open("","",opciones); //Abre la ventana

mi_ventana.document.write("Una prueba de abrir ventanas");
mi_ventana.moveTo(100,100); //Mueve la ventana en las coordenas indicadas
moverVentana();
//-->
</script>
</BODY>
</HTML>

Objeto document
El objeto document es el que tiene el contenido de toda la pgina que se est
visualizando. Esto incluye el texto, imgenes, enlaces, formularios, etc. Gracias a este
objeto se puede aadir dinmicamente contenido a la pgina, o hacer cambios, segn
convenga.
Propiedades
alinkColor. Esta propiedad tiene almacenado el color de los enlaces activos
anchors. Se trata de un array con los enlaces internos existentes en el
documento
applets. Es un array con los applets existentes en el documento
bgColor. Propiedad que almacena el color de fondo del documento
cookie. Es una cadena con los valores de las cookies del documento actual
domain. Guarda el nombre del servidor que ha servido el documento
embeds. Es un array con todos los EMBED del documento
fgColor. En esta propiedad se tiene el color del primer plano

162
 forms. Se trata de un array con todos los formularios del documento. Los
formularios tienen a su vez elementos (cajas de texto, botones, etc) que tienen
sus propias propiedades y mtodos.
images. Array con todas las imgenes del documento
lastModified. Es una cadena con la fecha de la ltima modificacin del
documento
linkColor. Propiedad que almacena el color de los enlaces
links. Es un array con los enlaces externos
location. Cadena con la URL del documento actual
referrer. Cadena con la URL del documento que llam al actual, en caso de
usar un enlace.
title. Cadena con el ttulo del documento actual
vlinkColor. Propiedad en la que se guarda el color de los enlaces visitados
Mtodos
clear(). Limpia la ventana del documento
open(). Abre la escritura sobre un documento.
close(). Cierra la escritura sobre el documento actual
write(). Escribe texto en el documento.
writeln(). Escribe texto en el documento, y adems lo finaliza con un salto
de lnea

El siguiente ejemplo muestra algunas propiedades del documento, adems de que

cambia el titulo del documento letra por letra cada cierto tiempo:
<!--document.htm -->
<HTML>
<HEAD>
<title>Objeto document</title>
<script LANGUAGE="JavaScript">
<!--
var i=1;
var titulooriginal = document.title;
function cambiarTitulo() //Cambia el Titulo del documento
{
document.title = titulooriginal.substring(0,i);
i++;
if (i>titulooriginal.length)
i=0; //Reinicia la impression de la cadena
setTimeout('cambiarTitulo()',100);
}
cambiarTitulo(); //Se llama a la funcin
//-->
</script>
</HEAD>
<BODY>
<script LANGUAGE="JavaScript">
<!-- //Muestra algunas propiedades del documento
document.write("Navegador <b>alinkColor </b>: " + document.alinkColor + "<br>");
document.write("Navegador <b>lastModified</b>: " +document.lastModified +
"<br>");
document.write("Documento <b>bgColor</b>: " + document.bgColor + "<br>");
document.write("Documento <b>fgColor</b>: " + document.fgColor + "<br>");
document.write("Documento <b>referrer</b>: " + document.referrer + "<br>");

163
//-->
</script>
</BODY>
</HTML>

Objeto location
Este objeto contiene la URL actual as como algunos datos de inters respecto a esta
URL. Su finalidad principal es, por una parte, modificar el objeto location para cambiar
a una nueva URL, y extraer los componentes de dicha URL de forma separada para
poder trabajar con ellos de forma individual si es el caso. La sintaxis es:

Protocolo://maquina_host[:puerto]/ruta_al_recurso

Propiedades
hash. Cadena que contiene el nombre del enlace, dentro de la URL.
host. Cadena que contiene el nombre del servidor y el nmero del puerto,
dentro de la URL.
hostname. Cadena que contiene el nombre de dominio del servidor (o la
direccin IP), dentro de la URL.
href. Cadena que contiene la URL completa.
pathname. Cadena que contiene el camino al recurso, dentro de la URL.
port. Cadena que contiene el nmero de puerto del servidor, dentro de la URL.
protocol. Cadena que contiene el protocolo utilizado (incluyendo los dos
puntos), dentro de la URL.
search. Cadena que contiene la informacin pasada en una llamada a un
script, dentro de la URL.
Mtodos
reload(). Vuelve a cargar la URL especificada en la propiedad href del objeto
location.
replace(cadenaURL). Reemplaza el historial actual mientras carga la URL
especificada en cadena URL.
<!location.htm-->
<HTML>
<HEAD>
<title>Objeto location</title>
</HEAD>
<BODY>
<script LANGUAGE="JavaScript">
<!-- //Muestra algunas propiedades del objeto location
document.write("Location <b>href</b>: " + location.href + "<br>");
document.write("Location <b>host</b>: " + location.host + "<br>");
document.write("Location <b>hostname</b>: " + location.hostname + "<br>");
document.write("Location <b>pathname</b>: " + location.pathname + "<br>");
document.write("Location <b>port</b>: " + location.port + "<br>");
document.write("Location <b>protocol</b>: " + location.protocol + "<br>");
//-->
</script>
</BODY>
</HTML>

164
Objeto history
Este objeto se encarga de almacenar una lista con los sitios por los que se ha estado
navegando, es decir, guarda las referencias de los lugares visitados. Se utiliza, sobre
todo, para moverse hacia delante o hacia atrs en dicha lista.
Propiedades
current. Cadena que contiene la URL completa de la entrada actual en el
historial.
next. Cadena que contiene la URL completa de la siguiente entrada en el
historial.
length. Entero que contiene el nmero de entradas del historial (i.e., cuntas
direcciones han sido visitadas).
previous. Cadena que contiene la URL completa de la anterior entrada en el
historial.
Mtodos
back(). Vuelve a cargar la URL del documento anterior dentro del historial.
forward(). Vuelve a cargar la URL del documento siguiente dentro del
historial.
go(posicion). Vuelve a cargar la URL del documento especificado por
posicion dentro del historial. posicion puede ser un entero, en cuyo caso
indica la posicin relativa del documento dentro del historial; o puede ser una
cadena de caracteres, en cuyo caso representa toda o parte de una URL que est
en el historial.

Objeto form
Este objeto es el contenedor de todos los elementos del formulario. Los
formularios se agrupan en un array dentro de document. Cada elemento de este array
es un objeto de tipo form.
Propiedades
action. Es una cadena que contiene la URL del parmetro ACTION del form, es
decir, la direccin en la que los datos del formulario sern procesados.
elements. Es un array que contiene todos los elementos del formulario, en el
mismo orden en el que se definen en el documento HTML. Por ejemplo, si en
el formulario se ha puesto, en este orden, una caja de texto, una casilla de
verificacin y una lista de seleccin, la caja de texto ser elements[0], la
casilla de verificacin ser elements[1] y la lista de seleccin ser
elements[2].
encoding. Es una cadena que tiene la codificacin mime especificada en el
parmetro ENCTYPE del form.
method. Es una cadena que tiene el nombre del mtodo con el que se va a
recibir/procesar la informacin del formulario ( GET/POST).
Mtodos
reset(). Resetea el formulario: tiene el mismo efecto que si se pulsa un botn
de tipo RESET dispuesto en el form.
submit(). Enva el formulario: tiene el mismo efecto que si pulsramos un
botn de tipo SUBMIT dispuesto en el form.

165
Uan vez que se conocen las propiedades y mtodos de los objetos de JavaScrit, es
momento de analizar un poco la funcin validar() de la pagina
clientes_alta_valida.htm presentado en un ejercicio anterior donde se acceden a
propiedades y metodos del objeto document y un metodo del objeto windows

<script language="JavaScript" type="text/JavaScript">

function validar()
{
if (document.form1.clv.value!="" &&document.form1.nom.value!="")
document.form1.submit();
else
{
if(document.form1.clv.value=="")
window.alert("FALTA LA CLAVE");
else
window.alert("FALTA EL NOMBRE");
}

}
</script>

La lnea de cdigo if (document.form1.clv.value!="" &&document.form1.nom.value!="")

comprueba si la propiedad value de los elementos clv y nom hallados en el formulario
que es parte del documento no estan vacos para as ejecutar la lnea:
document.form1.submit(); este ejecuta el mtodo sumit() del formulario. Cuando el
mtodo sumit() se ejecuta se llama a la pagina definida en la propiedad action del
formulario.

4.3. OBJETOS LENGUAJE SCRIPT NTER CONSTRUIDOS.

4.4. EVENTOS CON LENGUAJE SCRIPT.

Los eventos son el resultado de una accin del usuario. Por ejemplo, hacer clic sobre
un botn o seleccionar un campo de un formulario.

La importancia de los eventos radica en que posibilita modificar el contenido de un

documento HTML sin intercambio de datos a travs de la red.

Una lista de los eventos ms comunes, cuando se producen y sobre qu etiquetas

pueden actuar se presenta en la tabla 4.2.

166
 Tabla 4.2.- Eventos definidos por JavaScript

Los eventos ms utilizados en las aplicaciones Web tradicionales son onload para
esperar a que se cargue la pgina por completo, los eventos onclick, onmouseover,
onmouseout para controlar el ratn y onsubmit para controlar el envo de los
formularios.

167
Las acciones tpicas que realiza un usuario en una pgina Web pueden dar lugar a una
sucesin de eventos. Al pulsar por ejemplo sobre un botn de tipo <input
type=submit> se desencadenan los eventos onmousedown, onclick, onmouseup y
onsubmit de forma consecutiva.

Para que los eventos resulten tiles, se deben asociar funciones o cdigo JavaScript a
cada evento. De esta forma, cuando se produce un evento se ejecuta el cdigo
indicado, por lo que la aplicacin puede responder ante cualquier evento que se
produzca durante su ejecucin

Se recomienda que el cdigo de JavaScrip para cada evento sea implementado

utilizando funciones, estos deben escribirse entre las etiquetas <head> </head> de
cada pagina Web, como es el caso del ejemplo clientes_alta_valida.htm presentado
anteriormente.

A continuacin se presentan algunos ejemplos donde se utilizarn los eventos onLoad,

onClick, onChange y onKeyUp de JavaScript.

En este ejemplo se utiliza el evento onLoad que ejecuta la funcin confirma(), este
muestra un cuadro donde se puede pulsar el botn Aceptar o Cancelar.

<!-- onLoad.htm -->

<html>
<head>
<title>Evento Onload</title>
<script language="javascript">
function confirma()
{
var respuesta=confirm("Pulsa un botn");
if (respuesta==true)
alert("Has pulsado ACEPTAR");
else
alert("Has pulsado CANCELAR");
}
</script>
</head>
<body onLoad="confirma();">
Ejemplo del evento OnLoad y funci&oacute;n CONFIRM
</body>
</html>

En el siguiente ejemplo se utiliza el evento onClick en diferentes componentes, tales

como: dos botones de opcin, una casilla de verificacin y 2 botones, todos ejecutan
la misma funcin de javaScricpt, solo que cambia el mensaje que se enva como
argumento.
<!-- onclick.htm -->
<html>
<head>
<title> Evento onClick </title>
<script language="JavaScript">
function mensaje(elemento)
{
alert("Ha hecho click en el "+elemento+"!");

168
 }
</script>
</head>
<body>
Evento: OnClick
<form>
<input type="radio" name="radio" onClick="mensaje('botn de opcin 1')">Opcion
1<br>
<input type="radio" name="radio" onClick="mensaje('botn de opcin 2')">Opcion
2<br>
<input type="checkbox" onClick="mensaje('Casilla de verificicacin')">Check-
Button<br>
<input type="submit" value="Enviar" onClick="mensaje('botn de envo')">
<input type="reset" value="Restablecer" onClick="mensaje('botn restablecer')">
</form>
</body>
</html>

El siguiente ejemplo utiliza el evento onClange en un men de opciones y el evento

onKeyUp en un cuadro de texto, cuando cambia el valor del men de opciones se
ejecuta la funcin cambio() este muestra un mensaje del cambio ocurrido; cuando se
suelta una tecla pulsada sobre el cuadro de texto se ejecuta la funcin
mod_propiedades(), este cambia las propiedades status del objeto Windows y title
del objeto document.

<!-- onchange y onKeyUp.htm -->

<html>
<head>
<script language="JavaScript">
function cambio(){
alert("Se cambio el valor");
}

function mod_propiedades(){
window.status=document.forms[0].cajatexto1.value;
document.title=document.forms[0].cajatexto1.value;
}
</script>
</head>

<body>
Eventos: OnChange en selector y OnKeyUp en caja de texto
<form>
<select name="selector1" onChange="cambio();">
<option selected value='1'>Opc1</option>
<option value='2'>Opc2</option>
</select>
<input type="text" name="cajatexto1" onKeyUp="mod_propiedades();">
</form>
</body>
</html>

As como en los ejemplos anteriores se utilizaron los eventos onLoad, onClick,

onChange y onKeyUp se pueden tambin aplicar de forma creativa los dems eventos
a los componentes HTML que los soporten, segn la tabla 4.2.

169
4.5. VALIDACIN DE ENTRADA DE DATOS DEL LADO DEL
CLIENTE.
Una de las grandes aportaciones de JavaScript a la creacin de interfaces Web es
la posibilidad de acceder al contenido de los campos de los formularios para
realizar acciones sobre los valores introducidos por el usuario, modificarlos y, en
ltima instancia, validarlos. La validacin de los datos de un formulario mediante
scripts JavaScript no sustituye a la validacin que debe realizarse, por motivos de
seguridad, en la aplicacin del servidor que recibe la informacin. Sin embargo, al
aadir una validacin local con JavaScript, la experiencia del usuario mejora
notablemente, al no ser necesario enviar los datos al servidor y esperar su
respuesta para obtener slo un mensaje informando de la incorreccin de la
informacin suministrada.
Estas son algunas de las validaciones tpicas:
Comprobar que se han suministrado todos los campos obligatorios
Comprobar que el formato de un campo es el esperado (fechas, telfonos, etc.)
Comprobar la validez (sintctica) de las direcciones de correo y URLs
Comprobar que no se sobrepasa la longitud, nmero de lneas o tamao de la
entrada

Evento onSubmit
La validacin de campos de formulario se basa en interceptar el momento en que el
usuario realiza el envo de los datos del formulario (es decir, al pulsar sobre el botn
de enviar). Como es sabido, el botn de envo de datos se codifica con HTML
mediante un tipo especial de objeto de formulario, llamado submit.

Cuando el usuario pulsa sobre el botn de enviar, se genera el evento submit,

asociado al envo de datos de un formulario. JavaScript proporciona un mecanismo
para capturar este evento, lo que nos permite ejecutar un script justo antes de que se
realice el envo de los datos.

A continuacin mostramos referencias a mltiples ejemplos prcticos de validacin

de formularios con JavaScript.

Este ejemplo valida que no este vaco el cuadro de texto de un formulario y no tenga
solo espacios en blanco
<!-- valida cadena.htm -->
<html>
<head>
<title>Valida una cadena de un formulario</title>
<script language="javascript" type="textjavascript">
function vacio(q) {
for ( i = 0; i < q.length; i++ ) {
if ( q.charAt(i) != " " ) {
return true
}
}
return false
}

//valida que el campo no este vacio y no tenga solo espacios en blanco

170
function valida(Obj) {
if( vacio(Obj.nombre.value) == false )
alert("Introduzca un cadena de texto.")
else
Obj.submit();

}
</script>
</head>
<body>
<form action="xxx.php" method="post" name="nomgre" id="nomgre">
Nombre
<input name="nombre" type="text" id="nombre">
<input type="button" name="Submit" value="Enviar"
onClick="valida(this.form);">
</form>
</body>
</html>

El siguiente ejemplo valida el siguiente formato de fecha dd-mm-aaaa en un solo

cuadro de texto.
<!-- valida fecha.htm -->
<html>
<head>
<title>Valida una Fecha</title>
<script language="javascript" type="text/javascript">

function validaF() {
Cadena=document.form1.fecha.value;
var Fecha= new String(Cadena) // Crea una cadena
var RealFecha= new Date() // Para sacar la fecha de hoy
// Cadena Ao
var Ano= new String(Fecha.substring(Fecha.lastIndexOf("-")+1,Fecha.length))
// Cadena Mes
var Mes= new String(Fecha.substring(Fecha.indexOf("-
")+1,Fecha.lastIndexOf("-")))
// Cadena Da
var Dia= new String(Fecha.substring(0,Fecha.indexOf("-")))

// Valida el ao
if (isNaN(Ano) || Ano.length<4 || parseFloat(Ano)<1900){
alert('Ao invlido')
return false
}
// Valida el Mes
if (isNaN(Mes) || parseFloat(Mes)<1 || parseFloat(Mes)>12){
alert('Mes invlido')
return false
}
// Valida el Dia
if (isNaN(Dia) || parseInt(Dia, 10)<1 || parseInt(Dia, 10)>31){
alert('Da invlido')
return false
}
if (Mes==4 || Mes==6 || Mes==9 || Mes==11 || Mes==2) {
if (Mes==2 && Dia > 28 || Dia>30) {
alert('Da invlido')
return false
}
}

171
 document.form1.submit(); //Fecha correcta, se llama a la pgina
}
</script>
</head>
<body>
<form action="xxx.php" method="post" name="form1" id="form1">
Fecha dd-mm-aaaa
<input name="fecha" type="text" id="fecha">
<input type="button" name="Submit" value="Enviar" onClick="validaF();">
</form>
</body>
</html>

La fecha tambin se podra validar cuando el da, mes y ao se encuentran en

diferentes cuadros de texto.
Ejemplo:
document.form1.fecha.value;
function validaF2() {
ano = document.form1.ano.value;
mes = document. form1.mes.value;
dia = document. form1.dia.value;

valor = new Date(ano, mes, dia);

if( !isNaN(valor) ) {
return false;
}
return true; //La fecha es correcta
}

La funcin Date(ano, mes, dia) es una funcin interna de JavaScript que permite
construir fechas a partir del ao, el mes y el da de la fecha. Es muy importante tener
en cuenta que el nmero de mes se indica de 0 a 11, siendo 0 el mes de Enero y 11 el
mes de Diciembre. Los das del mes siguen una numeracin diferente, ya que el
mnimo permitido es 1 y el mximo 31.
La validacin consiste en intentar construir una fecha con los datos proporcionados
por el usuario. Si los datos del usuario no son correctos, la fecha no se puede
construir correctamente y por tanto la validacin del formulario no ser correcta.

La siguiente funcin valida tres campos de un formulario usando expresiones

regulares:

<!-- valida campos.htm -->

function validaCampos(form) {
//expresiones regulares
var er_tel = /^\d{10}$/ //Acepta 10 dgitos consec. sin espacios ni guiones
var er_correo = /^(.+\@.+\..+)$/ //expresion regular para emails
var er_cp = /(^([0-9]{5,5})|^)$/ //5 numeros o cadena vacia

//Se usa el metodo test de expresion regular

if(!er_tel.test(form.tel.value)) {
alert('Campo TELEFONO no vlido.')
return false //no submit
}
if(!er_correo.test(form.correo.value)) {

172
 alert('Campo CORREO no vlido.')
return false //no submit
}
if(!er_cp.test(form.cp.value)) {
alert('Campo CODIGO POSTAL no vlido.')
return false
}
alert('Todo bien'); //Todos los campos estan validados
}

A continuacin se muestran otras expresiones regulares que se pueden utilizar

para otros formatos de nmero de telfono:

Nmero Expresin regular Formato

900900900 /^\d{9}$/ 9 cifras seguidas
900-900-900 /^\d{3}-\d{3}-\d{3}$/ 9 cifras agrupadas de 3 en 3 y
separadas por guiones
900 900900 /^\d{3}\s\d{6}$/ 9 cifras, las 3 primeras separadas por
un espacio
900 90 09 /^\d{3}\s\d{2}\s\d{2}\s\d{2}$/ 9 cifras
00 las 3 primeras separadas por un
espacio
las siguientes agrupadas de 2 en 2
(900) /^\(\d{3}\)\s\d{6}$/ 9 cifras
900900 las 3 primeras encerradas por
parntesis
y un espacio de separacin respecto del
resto
+34 /^\+\d{2,3}\s\d{9}$/ Prefijo internacional (+ seguido de 2 o
900900900 3 cifras)
espacio en blanco y 9 cifras
consecutivas

El siguiente ejemplo valida si un botn de opcin esta marcado y almenos una casilla
de verificacin.

<!-- valida casilla de verificacion.htm -->

<html>
<head>
<title>Valida Casillas de verificacin</title>
<script language="JavaScript" type="text/JavaScript">
function habilita(form)
{ //itera mientras exista elementos del objeto intereses
for (i=0;i<form.intereses.length;i++)
form.intereses[i].disabled = false;
}

function deshabilita(form)
{
for (i=0;i<form.intereses.length;i++)
form.intereses[i].disabled = true;
}

function validaCB(form)
{ ban=false;
if (form.boletin[0].checked){ // Si esta marcado la suscripcin

173
 for (i=0;i<form.intereses.length;i++)
if(form.intereses[i].checked)
ban=true; //La bandera se activa si almenos se marca una casilla
if (!ban){
alert('Marque almenos una casilla');
return(0);
}
}
form.submit(); //Todo bien

}
</script>

</head>

<body>
<form action="xxx.php" method="post" name="form1" id="form1">
Desea suscribirse a nuestro boletn de novedades? <br>
<input type="radio" name="boletin" value="si" checked
onClick="habilita(this.form)"> SI, quiero suscribirme.
<input type="radio" name="boletin" value="no" onClick="deshabilita(this.form)"> No,
gracias.
<br><br>
Seleccione los temas de su inters:<br>
<input type="checkbox" name="intereses" value="Arte y Cultura"> Arte y Cultura<br>
<input type="checkbox" name="intereses" value="Ciencia">Ciencia<br>
<input type="checkbox" name="intereses" value="Msica">Msica<br>
<input type="button" name="Submit" value="Bot&oacute;n"
onClick="validaCB(this.form);">
</form>
</body>
</html>

Los ejemplos anteriores se pueden adaptar para muchas aplicaciones, lo importante es

tener presente que esta tarea de validacin de los formularios se puede realizar con la
programacin por el lado del cliente usando JavaScript, asi que cada pagina que se
realice debe considerar este aspecto.

4.6. CONSIDERACIONES DEL SOPORTE DEL NAVEGADOR.

Un desarrollador Web cada da debe lidiar, para hacer compatibles sus aplicaciones,
con los diferentes navegadores que hay actualmente en Internet, con las diferentes
versiones de cada uno de los navegadores y adems con las diferentes versiones de
las tecnologas que usa, como Javascript

Todos los navegadores modernos interpretan el cdigo JavaScript integrado dentro de

las pginas Web, aunque existen algunas diferencias entre ellas. He aqu las
versiones:

Javascript 1: naci con el Netscape 2.0 y soportaba gran cantidad

de instrucciones y funciones, casi todas las que existen ahora ya se
introdujeron en el primer estndar.

174
Javascript 1.1: Es la versin de JavaScript que se dise con la
llegada de Netscape 3.0. Implementaba poco ms que su anterior versin,
como por ejemplo el tratamiento de imgenes dinmicamente y la creacin de
arrays.

Javascript 1.2: Se dise con la llegada de Netscape 4.0. Esta tiene como
desventaja que es un poco distinta en plataformas Microsoft y Netscape, ya que
ambos navegadores crecieron de distinto modo y estaban en plena lucha por el
mercado.

Javascript 1.3: introducida en la versin 4.07 del Netscape Navigator. Esta versin
es una pequea revisin de la 1.2 creada para ajustarse al estndar internacional
European Computer Manufacturers' Association (ECMA) que regula el lenguaje
JavaScript.

Javascript 1.5: Implementada con Netscape 6.

Por su parte, Microsoft tambin ha evolucionado hasta presentar su

versin 5.5 de JScript (as llaman al javascript utilizado por los
navegadores de Microsoft).

Para tener en cuenta la versiones se debe colocar en el atributo LANGUAGE de la

marca SCRIPT la versin con la que se pienza trabajar. Por ejemplo para la versin:
LANGUAGE="JavaScript1.1"

175
PREGUNTAS

1. Se necesita de un servidor WEB para ejecutar cdigo por el lado del

cliente?, si, no, porque
2. De al menos tres casos de aplicacin de la programacin por el lado del
cliente
3. En que secciones de una pagina WEB se puede incrustar cdigo de
JavaScript?
4. Como se define una variable en JavaScript?
5. Como se define el tipo de una variable en JavaScript?
6. De que lenguaje esta derivado JavaScript?
7. Que es DOM?
8. Muestre una figura de la jerarqua de objetos de JavaScript
9. Describa por lo menos 5 propiedades del objeto Windows
10. Describa por lo menos 5 mtodos del objeto windows
11. Describa por lo menos 5 propiedades del objeto document
12. Describa por lo menos 5 mtodos del objeto document
13. Describa por lo menos 5 propiedades del objeto location
14. Describa por lo menos 2 mtodos del objeto location
15. Describa por lo menos 3 propiedades del objeto history
16. Describa por lo menos 3 mtodos del objeto history
17. Describa por lo menos 3 propiedades del objeto form
18. Describa por lo menos 2 mtodos del objeto form
19. Qu es un evento?
20. Describa por lo menos 6 eventos de JavaScript
21. Explique como se lleva a cabo el proceso de validacin de un formulario con
JavaScript
22. Qu navegadores soportan JavaScript?
23. De una resea de las versiones de JavaScript

176
EJERCICIOS PROPUESTOS

1. Implementar las validaciones necesarias utilizando JavaScript, para cada uno

de los formularios de los procesos de Insercin, Consulta, Eliminacin y
Actualizacin de al menos dos tablas del caso de estudio presentado en el
capitulo 2 y 3

177
 5

Servicios Web XML.

178
5.1 VISIN GENERAL DE SERVICIOS WEB XML.

Un servicio Web es un conjunto de protocolos y estndares que sirven para

intercambiar datos entre aplicaciones.

Los sitios Web creados en diferentes lenguajes de programacin operando sobre

diferentes sistemas operativos pueden utilizar los servicios Web para
intercambiar datos en redes de computadoras como Internet.

La interoperabilidad se consigue mediante la adopcin de estndares abiertos. Las

organizaciones OASIS (Organization for the Advancement of Structured Information
Standards) y W3C son los comits responsables de la arquitectura y reglamentacin
de los servicios Web. Para mejorar la interoperabilidad entre distintas
implementaciones de servicios Web se ha creado el organismo WS-I (Web Services
Interoperability), encargado de desarrollar diversos perfiles para definir de manera
ms exhaustiva estos estndares, tales como:

XML (Extensible Markup Language

SOAP (Simple Object Access Protocol)
XML-RPC (XML Remote Procedure Call):
WSDL (Web Services Description Language):
UDDI (Universal Description, Discovery and Integration):
WS-Security (Web Service Security):

XML - eXtensible Markup Language

Es un subconjunto simplificado del SGML el cual fue diseado principalmente para
documentos Web. Permite a los diseadores crear sus propias etiquetas (Ej:
<productos>), habilitando la definicin, transmisin, validacin, y la interpretacin
de datos entre aplicaciones y entre organizaciones. Un aspecto importante es que el
HTML y el XML tienen funciones diferentes. El HTML tiene por objeto mostrar
informacin, mientras que el XML se ocupa de la informacin propiamente dicha (el
contenido). Este concepto es importante tenerlo en cuenta, ya que muchos piensan
que es el sucesor de HTML.
Ejemplo de un documento XML sobre informacin de autos:

<?xml version="1.0" encoding="UTF-8"?>

<productos>
<producto>
<id_pro>DD40G</id_pro>
<nombre>DISCO DURO</nombre>
<precio>500</precio>
</producto>
<producto>
<id_pro>MOOP</id_pro>
<nombre>MOUSE</nombre>
<precio>70</precio>
</producto>
</productos>

179
 Todo documento XML debe comenzar indicando
<?xml version="1.0" encoding="UTF- que es un documento XML, la versin del mismo
8"?> y su codificacin. Es por eso que se utiliza la
etiqueta <?xml .... ?> . Todos los elementos a
partir de aqu son definidos por el usuario.
Luego se indica una etiqueta raiz <productos>) el
cual contendr a los dems elementos. Es como
<productos> en HTML la etiqueta <HTML> .. </HTML>, que
dentro de el se encuentran las dems etiquetas. Se
lo conoce generalmente como raiz del
documento.
Luego se define una etiqueta <producto> el cual
<producto>
contendr un producto en particular (en este caso
solo incorpore 3 caractersticas de un producto:
id_producto, nombre, y precio).
<id_pro>DD40G</id_pro> Se definen 3 etiquetas (<id_pro>, <nombre>, y
<nombre>DISCO DURO </nombre> <precio>), los cuales contienen los datos para un
<precio>500</precio>
producto en particular.
<productos>
<producto> En el documento se puede apreciar que todas las
<id_pro>DD40G</id_pro>
<nombre>DISCO</nombre>
etiquetas que son abiertos <id_pro>deben ser
<precio>500</precio> cerrados </id_pro>. Esto es una exigencia del
</producto> XML.
</productos>

El XML provee muchas otras posibilidades como puede ser que las etiquetas tengan
atributos <producto color=azul> .. </producto> ), pero no nos detendremos en ellas
ya que la idea es simplemente ofrecer los conceptos bsicos para conocer de que se
trata el mundo de los Web.

5.2 TECNOLOGAS SUBYACENTES.

Hoy en da existe una tendencia muy marcada en las empresas por el desarrollo de
aplicaciones que trabajen sobre Internet, principalmente por la ventaja de la
distribucin global de la informacin. Las tecnologas ms usadas para el desarrollo
de estas aplicaciones, han sido CORBA (Common Object Request Broker
Architecture) de OMG, COM (Component Object Model) de Microsoft y EJB
(Enterprise JavaBeans). Cada una de estas tecnologas proporciona un marco de
trabajo para la activacin de objetos remotos, mediante la solicitud a un servidor de
aplicaciones o mediante un servidor Web para la ejecucin de servicios de aplicacin.
Estas tecnologas han probado ser efectivas para el establecimiento de sitios Web
corporativos; sin embargo, presentan algunas desventajas como la falta de
interoperabilidad, la dependencia a la arquitectura de trabajo, as como el lenguaje de
programacin.

180
5.2.1 SOAP
Se conoce como Protocolo Simple de Acceso a Objetos, es un protocolo estndar
propuesto por Microsoft, IBM y otros al Consorcio WWW (W3C) que permite la
comunicacin y la interoperabilidad entre diversas aplicaciones Web desarrolladas
bajo tecnologas diferentes, como HTML y XML.

El protocolo SOAP esta construido sobre XML y solo describe el formato de los
mensajes dejando abierta la posibilidad de usar varios transportes, aunque
actualmente el transporte usado es HTTP. La eleccin de HTTP como transporte se
debe a que es el transporte ms usado, y si una organizacin de cualquier tipo provee
una sola salida o conexin con el mundo exterior (Internet) lo ms probable es que
sea HTTP

El protocolo define una estructura en el que se empaqueta el requerimiento donde se

especifica el destinatario de la llamada, el nombre del mtodo que se invoca y
opcionalmente una serie de parmetros con tipos definidos. La respuesta a este
requerimiento se empaqueta de la misma forma, en una estructura que contiene el
resultado del mtodo invocado

La ventaja de SOAP frente a las tecnologas subyacentes es que es ms sencillo de

implementar y dado que es XML va HTTP el vocabulario y el mtodo de transporte
son comunes en la actualidad

Para poder utilizar SOAP en un lenguaje de programacin por el lado del servidor se
debe usar alguna librera disponible que implemente el estndar.

SOAP en PHP
Para usar el estndar SOAP en php se puede realizar de dos formas:
Utilizando la librera NuSOAP
Utilizando las funciones nativas de PHP5

Utilizando la librera NuSOAP

NuSOAP es un kit de herramientas para desarrollar Servicios Web bajo el lenguaje

PHP, desarrollada por la empresa NuSphere, licenciada bajo LGPL y disponible en
sourceforge ( http://sourceforge.net/projects/nusoap/). Est compuesto por una serie
de clases que permiten fcilmente el desarrollo de Servicios Web. Provee soporte
para el desarrollo de clientes (aquellos que consumen los Servicios Web) y de
servidores (aquellos que los proveen). NuSOAP est basado en SOAP 1.1, WSDL 1.1
y HTTP 1.0/1.1

El siguiente ejemplo usa la librera NuSOAP, para implementar un cliente SOAP para
Google; hace uso del servicio de bsqueda provisto por Google a travs de sus APIs
SOAP. Son muy bsicos justamente para mostrar lo sencillo que es empezar a usar
esta tecnologa, se pueden crear programas que realicen las bsquedas peridicamente
en lugar de hacerlas de forma manual.

181
<!--buscar.php-->
<html>
<head>
<title>Cliente SOAP para Google</title>
</head>
<body>
<?php
require_once('nusoap/nusoap.php');

// Licencia de Google para poder tener acceso

$key = 'iwnUXUtHj3bteg5FWfBJDwui3SPeB+iy';

$buscar=$_POST[buscar]; //Variable de formulario

//$buscar= "Servicios Web"; //Se puede descomentar para no requerir formulario
echo "Resultados de la cadena de busqueda: <h2>$buscar</h2>";
$PaginaInicio = 0;

$parametros = array(
'key' => $key,
'q' => $buscar,
'start' => $PaginaInicio,
'maxResults' => 5,
'filter' => false,
'restrict' => '',
'safeSearch' => false,
'lr' => '',
'ie' => '',
'oe' => ''
);

$ClienteSOAP = new soapclient('http://api.google.com/search/beta2');

$Resultado = $ClienteSOAP->call('doGoogleSearch',$parametros, 'urn:GoogleSearch');
//Procesa y muestra los resultados
$lst2 = $Resultado['resultElements'];
if(is_array($lst2)) {
list($k, $el) = each($lst2);
$i = 1;
while($el) {
echo "$i <a href=".$el['URL'].">".$el['title']."</a><br>"; //Muestra URL
echo "<strong>".$el['title']."</strong><br>"; //Muestra Titutlo
echo $el['snippet']."<br>"; //Muestra descripcin
list($k, $el) = each($lst2); //Asigna a $e1 el siguiente valor del arreglo
$i++;
}
}
?>
</body>
</html>

Para poder probar este ejemplo se requiere haber descargado la librera NuSOAP y
ubicarla en la carpeta nusoap/ como lo indica la lnea de cdigo
require_once('nusoap/nusoap.php'); Google requiere que cada usuario de su servicio
Web tenga una cuenta en su sitio para tal fin, esta cuenta tiene una clave como la que
se muestra en la lnea de cdigo $key = 'iwnUXUtHj3bteg5FWfBJDwui3SPeB+iy'; y esta
limitada a 1000 consultas por da, por lo que el acceso puede no ser permitido si se
rebasa el limite.

182
El cliente Web del cdigo anterior recibe una variable de un formulario que contendr
la cadena de bsqueda, inicializa los parmetros del servicio ofrecido por Google y
realiza la bsqueda, guardando el resultado en la variable $Resultado, posteriormente
este es procesado para mostrar los resultados retornados por Google tal y como se
muestra si la variable $buscar = "Servicios Web":

Resultados de la cadena de bsqueda:

Servicios Web
1 Servicio web - Wikipedia, la enciclopedia libre
Servicio web - Wikipedia, la enciclopedia libre
Un servicio web (en ingls, Web service) es un conjunto de protocolos y
estndares que sirven para intercambiar datos entre aplicaciones. ...
2 Web service - Wikipedia, the free encyclopedia
Web service - Wikipedia, the free encyclopedia
A Web Service (also Webservice) is defined by the W3C as "a software system
designed to support interoperable machine-to-machine interaction over a network.
...
3 SERVICIOWEB - NOTICIAS
SERVICIOWEB - NOTICIAS
portal de noticias, revista entretenida con Cocina Chilena, Efemrides, juegos
online, maps, turismo Mapas de las Regiones de Chile,Canciones, ...

En la carpeta /ejemplos nusoap de este capitulo se encuentran 30 ejemplos de

aplicacin de SOAP que vienen con la librera nuSOAP durante su descarga, se
recomienda al estudiante explorar cada uno de ellos para poder implementar sus
propios servicios y clientes SOAP con nuSOAP.

Se debe tener en cuenta que la librera nuSOAP no funciona correctamente si se tiene

habilitada la extensin SOAP nativa de PHP 5, Es decir si se va a utilizar nuSOAP se
debe verificar que la extensin SOAP de PHP 5 este deshabilitada en el archivo
php.ini.

Utilizando las funciones nativas de PHP5

Para poder utilizar las funciones SOAP nativas de PHP se debe habilitar la extensin
extension=php_soap.dll en el archivo php.ini, solo verificar que no tenga el punto y
coma al inicio de la lnea.

Con el uso de las funciones SOAP nativas de PHP se consigue mxima transparencia
para el programador en el momento de crear los servicios y clientes Web. En la
siguiente tabla se muestran las funciones de la extensin SOAP de php.

183
SoapClient Constructor
SoapClient->__construct() Construye un nuevo objeto SoapClient
Mtodos
SoapClient->__call() Llama una funcin SOAP (obsoleto)
SoapClient->__doRequest() Realiza una peticin SOAP
SoapClient->__getFunctions() Devuelve una lista de funciones SOAP
SoapClient->__getLastRequest() Devuelve la ltima peticin SOAP
SoapClient->__getLastRequestHeaders() Devuelve las cabeceras de la ltima peticin SOAP
SoapClient->__getLastResponse() Devuelve la ltima respuesta SOAP
SoapClient->__getLastResponseHeaders() Devuelve las cabeceras de la ltima respuesta
SOAP
SoapClient->__getTypes() Devuelve la lista de tipos SOAP
SoapClient->__setCookie() Define la cookie que ser enviada con la peticin
SOAP
SoapClient->__soapCall() Llama una funcin SOAP
SoapFault Constructor
SoapFault->__construct() Construir un nuevo objeto SoapFault
SoapHeader
SoapHeader->__construct() Construir un nuevo objeto SoapHeader
SoapServer Constructor
SoapServer->__construct() Construir un nuevo objeto SoapServer
Mtodos
SoapServer->addFunction() Agrega una o varias funciones para manejar
peticiones SOAP
SoapServer->getFunctions() Devuelve la lista de funciones definidas
SoapServer->handle() Maneja una peticin SOAP
SoapServer->setClass() Define una clase que manejar peticiones SOAP
SoapServer->setPersistence() Define el modo de persistencia de SoapServer
Tabla 5.1.- Funciones SOAP de PHP 5

El siguiente ejemplo utiliza las funciones SOAP nativas de php para implementar un
servicio SOAP mediante el uso de la funcin hola($nombre) para mostrar un saludo a
un nombre que reciba como parmetro.

<!-- Server PHP.php -->

<html>
<head>
<title>Servicio SOAP con funciones Nativas de PHP</title>
</head>
<body>
<?php
$servidor=new SoapServer("iti.wsdl");;

//se implementa la funcin

function hola($nombre) {
return 'Hola, ' . $nombre;
}
// Se aade la funcin
$servidor->addFunction("hola"); //Agrega la funcin
$servidor->handle(); //Activa el servicio
?>
</body>
</html>

184
Iniciando el cdigo de PHP, se crea el objeto $servidor utilizando el constructor de la
librera SOAP de PHP, pasndole como parmetro el nombre del archivo WSDL, se
debe considerar que el constructor cuenta con otras formas de instanciarse, la funcin
hola() es muy simple, pero ilustrativa; recibe como parmetro la variable $nombre y
retorna la cadena Hola concatenado con la variable que recibi como parmetro,
finalmente se pone en funcionamiento el servicio con el mtodo handle(). As de fcil
es ofrecer un servicio Web. En un caso prctico la funcin debera ser ms compleja
como buscar informacin de una base de datos y retornarla al cliente que la solicite.
As mismo el servicio Web en lugar de contar con solamente una funcin podra
contar con varias.

El cliente Web que use el servicio Web anterior podra usar un cdigo parecido al
siguiente:

<?php
$cliente = new new SoapClient("iti.wsdl");
$resultado=$cliente->__soapCall("hola", array('nombre' => 'Maria'));
print_r($resultado);
?>

En primer lugar se requiere de la instancia de un objeto de la clase SoapClient, al cual

se le pasa como parmetro el archivo WSDL que el proveedor del servicio Web tiene
disponible para los clientes, posteriormente se llama a la funcin hola con el mtodo
__soapCall() pasndole el par: ndice valor; como resultado final, se visualizar la
cadena Hola Mara.
As de fcil es implementar clientes Web con funciones nativas de PHP 5.

5.2.2 WSDL
Es el lenguaje de definicin de servicios Web, Es un protocolo basado en XML que
describe los accesos al Servicio Web. Es decir, es el manual de operacin del Servicio
Web, porque indica cuales son las interfaces que provee el Servicio Web y los tipos
de datos necesarios para la utilizacin del mismo.

El servidor que pretenda ofrecer servicios Web requiere de un archivo WSDL, este
archivo, en formato XML, indica a la computadora que lo consulta, qu servicios
dispone en su sitio. No slo indica cuales dispone, sino que adems da una referencia
precisa sobre ellos, para poder invocarlos usando los parmetros adecuados.

La estructura y dems detalles del estndar WSDL se encuentran en

http://www.w3.org/TR/wsdl

5.2.3 UDDI
Es un modelo de directorios para Servicios Web. Es una especificacin para mantener
directorios estandarizados de informacin acerca de los Servicios Web, sus
capacidades, ubicacin, y requerimientos en un formato reconocido universalmente.
UDDI utiliza WSDL para describir las interfaces de los Web Services.

185
En la siguiente figura se muestra su relacin con SOAP y WSDL.

Fig. 5.1 Relacin entre los servicios Web

En la siguiente tabla se muestra la ubicacin del UDDI en el contexto del resto de

protocolos en la pila de interoperabilidad de servicios Web.

UDDI (Universal Description, Discovery and

Integration)
Pila de
Interoperabilidad SOAP (Simple Objet Access Protocol)
de Servicio Web XML (eXtensible Markup Language)
Protocolos Comunes de Internet (HTTP, TCP/IP)
Tabla 5.2.- Pila de protocolos de servicios Web

Al igual que en la Web se tienen buscadores como Google, que nos llevan a las
pginas que nos interesan, existe el concepto equivalente a nivel de Servicios Web,
que es UDDI (Universal Description Discovery Integration) cerca de 7000 empresas
se han registrado en el directorio UDDI. UDDI es un Servicio Web en lnea que se
puede utilizar desde las aplicaciones para descubrir de forma dinmica otros servicios
en lnea, todos ellos perfectamente integrados en una interfaz XML simple. En pocas
palabras, el UDDI es una especificacin para un registro distribuido de informacin
sobre servicios Web, el sitio oficial de UDDI es http://uddi.xml.org/

5.3 Publicacin de un servicio WEB.

La publicacin de un servicio Web requiere en primer lugar la creacin del servicio
por medio de una o ms funciones, usando una librera especifica, como puede ser las
funciones disponibles por nuSOAP o usando las funciones nativas de PHP, tambin
es importante crear un archivo WSDL que contenga la descripcin de las funciones
disponibles, as como los parmetros para su invocacin y el tipo de dato que
retornar.

5.4 Consumo de un servicio WEB.

Para consumir servicios Web, en primer lugar se debe tener un fin o razn para
consumirlos, dentro de las razones se podran listar los siguientes:

186
 Bsqueda de temas nuevos en portales conocidos como buscadores
Conocer en tiempo real el estado del tiempo de nuestra cuidad
Conocer en tiempo real algunas variables econmicas, como tipo de cambio
Obtener regalas por concepto de venta de productos o artculos cuando el
usuario los adquiera desde nuestro portal
Extraer datos de una base de datos de un sitio externo.

Cuando existe la razn para consumir servicios Web, el siguiente paso es investigar
quien lo ofrece para poder utilizarlo, extrayendo del sitio el archivo WSDL que
permita conocer en detalle la interfaz del servicio, finalmente se procede a la
programacin del cliente Web utilizando la librera que se tenga disponible o que ms
convenga, tal y como se mostr en el tema 5.2.1.

187
PREGUNTAS

1. Qu es un servicio Web?
2. Mencione por lo menos cinco estndares para los servicios Web
3. Cul es la diferencia fundamental entre XML y HTML?
4. Proporcione un ejemplo de cdigo XML
5. Cules son las tecnologas que se consideran como subyacentes?
6. Cul es la ventaja de los servicios Web sobre las tecnologas subyacentes?
7. Qu es SOAP?
8. SOAP solamente se puede implementar en PHP?, si, no, porque
9. Cmo se puede implementar SOAP en PHP?
10. Explique de manera general como se programa un servicio Web SOAP cliente
11. Es posible utilizar simultneamente diferentes libreras SOAP en PHP? Si,
no, porque
12. Explique de manera general como se programa un servicio Web SOAP
servidor
13. Qu es WSDL?
14. Qu es UDDI?
15. Muestre la relacin entre SOAP, UDDI y WSDL
16. Dnde se encuentra WSDL en la pila de protocolos de servicios Web
17. Mencione por lo menos tres razones para consumir servicios Web

EJERCICIOS PROPUESTOS

1. Segn el caso de estudio en desarrollo, buscar que servicio Web cliente podra
consumir de algn otro sitio externo y programarlo utilizando SOAP
2. Segn el caso de estudio en desarrollo, programar con SOAP un servicio
Web Servidor que retorne una porcin de datos de su base de datos para los
clientes Web que lo requieran, adems escribir el archivo WSDL.
3. Implementar el cliente Web SOAP que demuestre la funcionalidad del
servicio Web servidor implementado en la pregunta anterior.

188
Anexo A.- Programacin de un caso de estudio

VENTAS EN LINEA
Es una pequea aplicacin Web dinmica de venta de productos de computacin en
lnea creado para ilustrar los conocimientos que se adquieren durante un curso de
Programacin Web, entre los que se pueden mencionar, programacin con HTML,
manejo de formularios y objetos de formulario, envo de datos a formularios con los
mtodos POST y GET, validacin de los datos del formulario usando eventos de
Java Script, programacin en PHP con acceso a base de datos, reportes con PDF, etc.

Consta de una pgina de bienvenida accesible por cualquier usuario, donde se pueden
conocer los productos que se encuentran en promocin, o filtrarlos en funcin de la
categora a la cual pertenecen

Ventas en lnea maneja como medidas de seguridad, la autenticacin, el manejo de

sesiones y la encriptacin de la contrasea de los usuarios en el momento de su
autenticacin.

Cuenta con dos tipos de usuarios:

Clientes: Los clientes pueden registrarse si no se encuentran registrados, y una
vez que se hallan autenticado podrn modificar sus datos personales, su
contrasea, comprar los productos en existencia y ver las facturas que se le
hallan emitido.
Administradores: Podrn cambiar sus datos personales, su contrasea, ver,
agregar, modificar, eliminar a los clientes y productos registrados y ver e
imprimir todas las facturas que se hayan emitido con sus respectivos detalles
en formato PDF.

En su implementacin se usan tres plantillas, una plantilla para los usuarios no

registrados, otra para los clientes y una ms para los administradores, estos se pueden
encontrar en la carpeta /Templates del disco anexo.

Para ponerlo en funcionamiento basta con instalar el programa WampServer2.0c.exe

que se encuentra en la carpeta /utililerias del disco anexo, este instalar los servicios
requeridos, como son: Apache, PHP y MySQL. Tambin es importante construir la
base de datos hallado en la carpeta Caso de estudio/bd/ en el archivo ventas.sql .
Este archivo es el escript MySQL de todas las tablas que conforman la base de datos,
as como un conjunto de registros que permitirn su utilizacin inmediata.

Para crear la base de datos se deber copiar el archivo ventas.sql en el directorio

donde se encuentra el cliente MySQL, (por defecto en
c:\wamp\bin\mysql\mysql5.0.51b\bin), ejecutar la interfaz de comando y ubicarse en
la misma carpeta para procesar el archivo de la siguiente forma:
mysql -uroot <ventas.sql
Despus de unos segundos la base de datos se crear y podr ser utilizada.

189
Para poder utilizar el manejo de sesiones se deber fijar la variable session.auto_start
= 1 hallado en el archivo php.ini

Con lo anterior ventas en lnea esta listo para probarse.

Los detalles de la base de datos son los siguientes:

Modelo Entidad Relacin

Conjunto de tablas de la base de datos:

categoria(id_cat, Descripcion)
producto (id_pro, clave, nombre, precio, existencia, preciov, id_cat)
clientes (id_clie, clave, nom, dir, tel)
factura (id_fac, fecha)
ventas (id_clie, id_pro, id_fac, cantc, pu)
administradores (id_ad, nom, dir, tel)

Diccionario de datos:

categoria
CAMPO TIPO LONGITUD DESCRIPCION LLAVE
Id_cat V 10 Clave de la categora *
Descripcion V 30 Descripcion de la categora

producto
CAMPO TIPO LONGITUD DESCRIPCION LLAVE

190
 Id_pro V 10 Clave del producto *
nombre V 30 Descripcion del producto
precio F Precio de compra
existencia S Existencia
preciov F Precio de venta
Id_cat V 10 Clave de la categora
Jpg V 30 Archivo JPG
promocion T Indica si esta en promosin

clientes
CAMPO TIPO LONGITUD DESCRIPCION LLAVE
id_clie V 13 Clave del cliente *
clave V 40 Contrasea de acceso
nom V 40 Nombre del proveedor
dir V 30 Direccin del proveedor
tel V 15 Telfono del proveedor

factura
campo Tipo Longitud Descripcion Llave
id_fac I Num. de la fact.de comp. *
fecha D Fecha expedicion de fac.

ventas

CAMPO TIPO LONGITUD DESCRIPCION LLAVE

id_clie V 13 Clave del cliente *
id_pro V 10 Clave del producto *
Id_fac I Numero de factura *
cantc S Cantidad de compras
pu F Precio unitario

administradores
CAMPO TIPO LONGITUD DESCRIPCION LLAVE
id_ad V 13 Clave del cliente *
clave V 40 Contrasea de acceso
nom V 40 Nombre del proveedor
dir V 30 Direccin del proveedor
tel V 15 Telfono del proveedor

Donde:
V=varchar I=int S=smallint T=tinyint F=float D=date

191
 Script MySQL:
DROP DATABASE IF EXISTS ventas;

CREATE DATABASE ventas;

use ventas;

create table categoria

(id_cat varchar(10),
Descripcion varchar(49),
primary key(id_cat)
);

create table producto

( id_pro varchar(10) not null,
nombre varchar(40),
precio float,
existencia smallint,
preciov float,
id_cat varchar(10),
jpg varchar(30),
promocion tinyint,
primary key (id_pro),
foreign key (id_cat) references categoria(id_cat)
);

create table clientes

(
id_clie varchar(13),
clave varchar(40),
nom varchar(40),
dir varchar(30),
tel varchar(15),
primary key (id_clie)
);

create table factura

(
id_fac int not null,
fecha DATE NULL,
primary key(id_fac)
);

create table ventas

(
id_clie varchar(13),
id_pro varchar(10),
id_fac int,
cantc smallint,
pu float,
primary key (id_clie,id_pro,id_fac),
foreign key (id_clie) references clientes(id_clie),
foreign key (id_pro) references producto(id_pro),
foreign key (id_fac) references factura(id_fac)
);

create table administradores

(
id_ad varchar(13),
clave varchar(40),
nom varchar(40),
dir varchar(30),

192
 tel varchar(15),
primary key (id_ad)
);

insert categoria values('HAR','HARDWARE');

insert categoria values('SOF','SOFTWARE');
insert categoria values('ALM','ALMACENAMIENTO');
insert categoria values('ACC','ACCESORIOS');
insert categoria values('VID','VIDEO');
insert categoria values('RED','REDES');
insert categoria values('POR','PORTATILES');

insert producto values('PIPIV','PROCESADOR INTEL PENTIUM IV 3

GHZ','687','13','759','HAR','pipiv.jpg','1');
insert producto values('TMAD','TARJETA MADRE
DUALCORE/2DUO','870','5','950','HAR','tarmadre.jpg','0');
insert producto values('FPOD','FUENTE DE PODER 450
WATS','200','20','270','HAR','fpoder.jpg','1');
insert producto values('WVIS','WINDOWS VISTA EN
ESPAOL','700','7','830','SOF','wvista.jpg','0');
insert producto values('DD40G','DISCO DURO MAXTOR DE 250 GBYTES IDE A
7200RPM','705','20','810','ALM','dd250g.jpg','1');
insert producto values('DD80G','DISCO DURO SEAGATE DE 80 GBYTES IDE A
7200RPM','510','15','573','ALM','dd80g.jpg','0');
insert producto values('QUEDVD','QUEMADOR DE DVD
16X','500','15','615','ALM','quedvd.jpg','1');
insert producto values('MOOP','MOUSE OPTICO, USB. PLATEADO
','40','16','55','ACC','moop.jpg','1');
insert producto values('TECl','TECLADO USB
NEGRO','140','30','190','ACC','teclado.jpg','1');
insert producto values('CAWEB','CAMARA WEB
INALAMBRICA','5000','4','5450','VID','camweb.jpg','0');
insert producto values('PROY','PROYECTOR DE 2200
LUMENES','9500','7','10430','VID','proyector.jpg','1');
insert producto values('RUTE','RUTEADOR INALAMBRICO
802.11G','1300','14','1450','RED','ruteador.jpg','0');
insert producto values('SWIT','SWITCH DE 24 PUERTOS
10/100','1600','11','1740','RED','switch.jpg','1');
insert producto values('LTOP','PORTATIL CORE 2
DUO','11700','3','12340','POR','laptop1.jpg','1');
insert producto values('LTOP2','MINI PORTATIL 10.1
PULG','5400','10','5950','POR','laptop2.jpg','0');

insert clientes values('GDV',sha1('iti'),'GASTON DEHESA VALENCIA','GPE.

VICTORIA','9717114526');
insert clientes values('MLF','iti','MARIA LOPEZ FUENTES','C. 5 DE MAYO
JUCHITAN','9717113210');
insert clientes values('JTL',sha1('iti'),'JORGE TOLEDO MATUS','AV. JUAREZ, ESPINAL,
OAX.','9717131056');

insert factura values('1','04/05/08');

insert factura values('2','04/05/08');

insert ventas values('GDV','DD40G','1','2','810');

insert ventas values('GDV','MOOP','1','5','55');
insert ventas values('JTL','PIPIV','2','1','759');

insert administradores values('AD1',sha1('iti'),'PEDRO TOLEDO GARCIA','GPE.

VICTORIA','9717114526');

193
insert administradores values('AD2',sha1('iti'),'JOSE TOLEDO FUENTES','GPE.
VICTORIA','9717114526');

GRANT ALL PRIVILEGES ON ventas.* TO alumnos@localhost IDENTIFIED BY 'iti';

Estructura de directorios
La aplicacin Web esta programado y organizando de tal forma que las paginas
Web sean facilmentelas localizados y analizados segn la siguiente estructura de
directorios.

En la raz se encuentran las paginas Web genericas y las del usuario no

registrado
En /administradores se encuentran todas las paginas Web que corresponden
al ususarrio administrador
En /bd se encuentra la descripcin de la base de datos y el script MySQL para
su construccin con el cliente MySQL.exe
En /clientes se encuentran todas las paginas Web que corresponden al
ususarrio cliente
En /fondos algunas imagenes que se pueden utilizar como fondos de las
pginas
En /imageness se encuentran todas las imagenes utilizados por el sitio como
logotipo, imagenes de productos, botones, etc.

Pantallas principales para cada tipo de usuario

Para tener una idea de la distribucin del diseo del sitio Web se muestran solamente
las siguientes tres pantallas principalas:

194
Para usuarios no registrados

Para usuarios Clientes

Para usuario Administradoras

Se recomienda instalar y revisar el cgido fuente hallado en las carpetas indicadas

para comprender con mayor detalles sobre la funcionalidad del sitio.

195