Libro de programacion web doc
195
1
-
Upload
shadowmerab -
Category
Documents
-
view
1.447 -
download
1
Transcript of Libro de programacion web doc
1
2
Derechos Reservados 2009 por Gastón Dehesa Valencia
Todos los Derechos Reservados. Ninguna parte de esta publicación puede ser
reproducida, almacenada en un sistema de consulta, o transmitida en cualquier forma
o por cualquier medio, electrónico, mecánico, fotocopiado, grabado o de cualquier
tipo sin antes tener el permiso escrito del Editor.
En este libro se han incluido programas y descripciones gráficas por su valor
educacional. Han sido debidamente probados pero no se garantizan para ningún
propósito en particular. El editor no proporciona ninguna garantía o representación, ni
acepta ninguna responsabilidad con respecto a los programas y descripciones
gráficas.
Muchos de los nombres utilizados por los fabricantes o vendedores de software para
distinguir sus productos son marcas registradas. El editor tiene toda la intención de
proporcionar la información 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 continuación:
Marcas Registradas:
Windows, Microsoft SQL Server, Microsoft Acces y Visual Basic son marcas registradas
de Microsoft Corporation.
Adobe Dreamweaver: Es una marca registrada por Adobe Systems Incorporated.
C++ Builder: Es una marca registrada por Borland software Corporation
Java: Es una marca registrada por Sun Microsystems.
Unix: Es una marca registrada por The Open Group.
3
Agradecimientos
Este libro no habría sido posible, y no estaría ahora en sus manos sin el apoyo de la
Dirección General de Educación Superior Tecnológica, el Instituto Tecnológico del
Istmo y de mis compañeros docentes de la Academia de Sistemas y Computación.
Una agradecimiento especial a mi amada esposa Josefina Blas López, a mis
consentidos hijos: Shunashi, Guiecniza y Josenandxo.
4
Contenido
1.- Introducción a las tecnologías Web. 7
1.1 Perspectiva histórica del Internet 8
1.2 Protocolo http (protocolo de transferencia de
hipertexto).
9
1.2.1 Arquitectura del WWW. 15
1.2.2 URL’s. 16
1.2.3 Métodos http. Persistencia en http –Cookies. 18
1.3 Introducción al HTML. Lenguaje de despliegue del
Web
19
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 Evolución del desarrollo de aplicaciones Web. 38
1.5 Hojas de estilo en cascada e introducción al XML. 39
2.- Desarrollo de aplicaciones Web 51
2.1 Arquitectura de las aplicaciones Web. 52
2.2 Lenguajes de programación del lado del cliente. 53
2.3 Lenguajes de programación del lado del servidor. 55
2.4 Ambientes para el desarrollo de aplicaciones Web. 59
2.5 Metodologías para el desarrollo de aplicaciones Web 60
2.6 Aspectos de seguridad. 69
3.- Programación del lado del servidor.
3.1 Procesamiento del lado del servidor.
3.2 Conceptos básicos de la herramienta de desarrollo.
3.3 Operadores.
3.4 Sentencias.
3.5 Arreglos.
3.6 Funciones y librerías.
3.7 Ejemplos prácticos.
3.8 Procesado de formularios.
3.9 Sesiones.
3.10 Conectividad entre el servidor Web y
el servidor de base de datos.
3.11 Manejo de archivos.
3.12 Seguridad.
4.- Procesamiento del lado del cliente.
4.1 Lenguaje Script del cliente.
4.2 Modelo de objetos con lenguaje Script.
4.3 Objetos lenguaje Script ínter construidos.
89
90
92
95
100
107
109
120
120
124
127
140
143
153
154
158
166
5
4.4 Eventos con lenguaje Script.
4.5 Validación de entrada de datos del lado del cliente.
4.6 Consideraciones del soporte del navegador.
Unidad 5.- Servicios Web XML.
5.1 Visión general de servicios Web XML.
5.2 Tecnologías subyacentes.
5.2.1 SOAP
5.2.2 WSDL
5.2.3 UDDI
5.3 Publicación de un servicio WEB.
5.4 Consumo de un servicio WEB.
Anexo A.- Programación de un caso de estudio
166
170
174
178
179
180
181
185
185
186
186
189
6
Prologo
Este libro pretende ser una guía para el docente y los alumnos en el curso de
PROGRAMACIÓN WEB que se ofrece en un semestre en la carrera de Ingeniería
en Sistemas Computacionales del sistema de Institutos Tecnológicos.
El avance tecnológico en el área de software a veces es mucho más rápido que el
ritmo que los docentes se pueden actualizar o preparar, la implementación de
sistemas de información involucra diversos lenguajes para su construcción, como es
el caso de los sistemas de información basados en Web en este sentido el presente
libro engloba el conjunto de lenguajes necesarios para llevar a cobo una
implementación de un sitio Web, contiene un lenguaje de programación 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 capítulo se abordan ya aspectos prácticos 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 programación 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 programación por el lado del servidor en
detalle, se profundiza con ejemplos por lo menos en un lenguaje de entre los varios
existentes.
En el capítulo cuarto se trata sobre uno de los lenguajes más utilizados para la
programación por el lado del cliente. Por último en el capitulo cinco los servicios
Web como estandar de comunicación entre aplicaciones usando XML.
Un caso de estudio, se encuentra al final en un anexo con la finalidad de darle al
lector una visión de lo que puede ser en conjunto un sistema de información en
ambiente Web.
Cada tema expuesto viene acompañado de uno o más ejercicios, el nombre del
archivo aparece como comentario al inicio de cada listado de programa
En el CD ROM que acompaña 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 dirección de correo electrónico: [email protected]
“LA EDUCACIÓN Y LA TECNOLOGÍA SON LA LLAVE PARA LA SUPERACIÓN
PERSONAL”
7
1
Introducción a las tecnologías Web.
8
1.1.- PERSPECTIVA HISTÓRICA DEL INTERNET
Internet fue desarrollado por el Departamento de la Defensa de los Estados Unidos
afines de la década de los 60, para realizar actividades de Investigación de tipo
privado exclusivamente, más tarde en 1990 se convierte en una red pública en donde
se conectan en un principio unos cientos de redes de computadoras, hasta la
actualidad que contiene millones. Tiene como característica que cada computadora
que se conecte a ella deba trabajar con el protocolo de comunicación conocido como
Protocolo de Control de Transmisión/ 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
comunicación, siendo así TCP/IP en realidad un conjunto de protocolos, que
operando de manera coordinada ha logrado actualmente tener el avance tecnológico
que en tan solo hace algunos años 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 aplicación conocida como World Wide Web (WWW) que
traducido al español significa “Telaraña mundial”, y a medida que pasan los años
aparecen nuevas aplicación, que hacen cada vez más atractiva su utilización.
Una computadora conectada a Internet se modela mediante un conjunto de capas,
teniendo a la capa de aplicación como la capa con la cual interactúa 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 aplicación, así como las
demás existentes requieren de un protocolo hallado en la capa de aplicación para su
funcionalidad, de tal forma que una aplicación WWW ó aplicación WEB, usa el
Protocolo de Trasferencia de Hipertexto (HTTP) para poder funcionar.
En este libro, se profundiza en los detalles para la creación de aplicaciones WEB
utilizando el protocolo HTTP, quedando los otros protocolos existentes del TCP/IP
fuera del alcance, más sin embargo se muestran en la figura 1.1 solo como referencia.
9
Cada protocolo del TCP/IP se describe en un documento conocido como RFC
(Request For Comment) y un número, mismos que se pueden hallar en la red para su
análisis o revisión, así por ejemplo el protocolo HTTP se describe en el RFC 2616,
de igual forma existen documentos para cada uno de los demás 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 Información que les permiten realizar
operaciones con sus clientes distribuidos en todo el mundo, otras empresas están en
proceso de desarrollo de sus aplicaciones WEB; sin embargo a medida que la
tecnología va cambiando, cambian también las necesidades de las empresas,
requiriendo por lo tanto que existan más 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 más utilizado en Internet. La versión
0.9 sólo tenía la finalidad de transferir los datos a través de Internet (en particular
páginas Web escritas en HTML). La versión 1.0 del protocolo permite la
transferencia de mensajes con encabezados que describen el contenido de los
mensajes mediante la codificación MIME (Extensiones de Correo de Internet
Multipropósito). En el RFC 2616 se especifica la versión 1.1.
El propósito 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 dirección URL.
10
COMUNICACIÓN ENTRE EL NAVEGADOR Y EL SERVIDOR WEB
La comunicación entre el navegador y el servidor se lleva a cabo en dos etapas:
Fig. 1.2.- Comunicación entre el navegador y el servidor Web
El navegador realiza una solicitud HTTP
El servidor procesa la solicitud y después envía una respuesta HTTP
En realidad, la comunicación se realiza en más etapas si se considera el
procesamiento de la solicitud en el servidor. Dado que sólo nos ocupamos del
protocolo HTTP, no se explicará la parte del procesamiento en el servidor en esta
sección.
Solicitud HTTP
Una solicitud HTTP es un conjunto de líneas que el navegador envía al servidor.
Incluye:
Una línea de solicitud: es una línea que especifica el tipo de documento
solicitado, el método que se aplicará y la versión del protocolo utilizada. La línea
está formada por tres elementos que deben estar separados por un espacio:
o el método
o la dirección URL
o la versión del protocolo utilizada por el cliente (por lo general, HTTP/1.0)
Los campos del encabezado de solicitud: es un conjunto de líneas opcionales
que permiten aportar información adicional sobre la solicitud y/o el cliente
(navegador, sistema operativo, etc.). Cada una de estas líneas está formada por un
nombre que describe el tipo de encabezado, seguido de dos puntos (:) y el valor
del encabezado.
11
El cuerpo de la solicitud: es un conjunto de líneas opcionales que deben estar
separadas de las líneas precedentes por una línea en blanco y, por ejemplo,
permiten que se envíen datos por un comando POST durante la transmisión de
datos al servidor utilizando un formulario.
Por lo tanto, una solicitud HTTP posee la siguiente sintaxis (<crlf> significa retorno
de carro y avance de línea):
MÉTODO VERSIÓN URL<crlf>
ENCABEZADO: Valor<crlf>
. . . ENCABEZADO: Valor<crlf>
Línea 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 envía un mensaje en el estilo siguiente :
GET /index.html HTTP/1.0 From: [email protected] User-Agent: mozilla/5.0 [Línea en blanco]
Comandos
Comando Descripción GET Solicita el recurso ubicado en la URL especificada HEAD Solicita el encabezado del recurso ubicado en la URL
especificada POST Envía datos al programa ubicado en la URL especificada PUT Envía datos a la URL especificada DELETE Borra el recurso ubicado en la URL especificada
Encabezados
Nombre del
encabezado
Descripción
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 Codificación de datos que el navegador acepta
Accept-Language Idioma que el navegador espera (de forma
12
predeterminada, inglés)
Authorization Identificación del navegador en el servidor
Content-Encoding Tipo de codificación para el cuerpo de la solicitud
Content-Language Tipo de idioma en el cuerpo de la solicitud
Content-Length Extensión 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 dirección de correo electrónico del
cliente
From Permite especificar que debe enviarse el documento si ha
sido modificado desde una fecha en particular
Link Vínculo entre dos direcciones URL
Orig-URL Dirección URL donde se originó la solicitud
Referer Dirección URL desde la cual se realizó la solicitud
User-Agent Cadena con información sobre el cliente, por ejemplo, el
nombre y la versión del navegador y el sistema operativo
RESPUESTA HTTP
Una respuesta HTTP es un conjunto de líneas que el servidor envía al navegador.
Está constituida por:
Una línea de estado: es una línea que especifica la versión del protocolo utilizada y
el estado de la solicitud en proceso mediante un texto explicativo y un código. La
línea está compuesta por tres elementos que deben estar separados por un espacio: La
línea está formada por tres elementos que deben estar separados por un espacio:
o la versión del protocolo utilizada
o el código de estado
o el significado del código
Los campos del encabezado de respuesta: es un conjunto de líneas
opcionales que permiten aportar información adicional sobre la respuesta y/o el
13
servidor. Cada una de estas líneas está formada por un nombre que describe el tipo de
encabezado, seguido de dos puntos (:) y el valor del encabezado.
El cuerpo de la respuesta: contiene el documento solicitado.
Por lo tanto, una respuesta HTTP posee la siguiente sintaxis
VERSIÓN-HTTP CÓDIGO EXPLICACIÓN <crlf>
ENCABEZADO: Valor<crlf>
. . . ENCABEZADO: Valor<crlf>
Línea en blanco <crlf>
CUERPO DE LA RESPUESTA
A continuación 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 Tecnológico del Istmo</title> </head> <body> (Contenido) . . . </body> </html>
Al recibirse la respuesta, el servidor cierra la comunicación.
Encabezados de respuesta
Nombre del
encabezado
Descripción
Content-Encoding Tipo de codificación para el cuerpo de la respuesta Content-Language Tipo de idioma en el cuerpo de la respuesta Content-Length Extensión 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 límite de uso de los datos Forwarded Utilizado por equipos intermediarios entre el navegador y el
servidor Location Redireccionamiento a una nueva dirección URL asociada
con el documento Server Características del servidor que envió la respuesta
Los códigos de respuesta
14
Son los códigos que se ven cuando el navegador no puede mostrar la página
solicitada. El código de respuesta está formado por tres dígitos: el primero indica el
estado y los dos siguientes explican la naturaleza exacta del error.
Código Mensaje Descripción 10x Mensaje de
información Estos códigos no se utilizan en la versión 1.0 del protocolo
20x Éxito Estos códigos indican la correcta ejecución de la
transacción 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 dirección 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
INFORMATION Cuando se recibe este código en respuesta a un comando
de GET indica que la respuesta no está completa. 204 NO RESPONSE El servidor ha recibido la solicitud, pero no hay
información de respuesta 205 RESET CONTENT El servidor le indica al navegador que borre el contenido
en los campos de un formulario 206 PARTIAL
CONTENT Es una respuesta a una solicitud que consiste en el
encabezado range. El servidor debe indicar el encabezado
content-Range 30x Redirección Estos códigos indican que el recurso ya no se encuentra
en la ubicación especificada 301 MOVED Los datos solicitados han sido transferidos a una nueva
dirección 302 FOUND Los datos solicitados se encuentran en una nueva
dirección URL, pero, no obstante, pueden haber sido
trasladados 303 METHOD Significa que el cliente debe intentarlo con una nueva
dirección; es preferible que intente con otro método 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 código se envía como respuesta. 40x Error debido
al cliente Estos códigos indican que la solicitud es incorrecta
400 BAD REQUEST La sintaxis de la solicitud se encuentra formulada de
manera errónea o es imposible de responder 401 UNAUTHORIZED Los parámetros del mensaje aportan las especificaciones
de formularios de autorización que se admiten. El cliente
debe reformular la solicitud con los datos de autorización
correctos 402 PAYMENT
REQUIRED El cliente debe reformular la solicitud con los datos de
15
pago correctos 403 FORBIDDEN El acceso al recurso simplemente se deniega 404 NOT FOUND Un clásico. El servidor no halló nada en la dirección
especificada. Se ha abandonado sin dejar una dirección
para redireccionar... :) 50x Error debido
al servidor Estos códigos indican que existe un error interno en el
servidor 500 INTERNAL ERROR El servidor encontró una condición inesperada que le
impide seguir con la solicitud (una de esas cosas que les
suceden a los servidores...) 501 NOT
IMPLEMENTED El servidor no admite el servicio solicitado (no puede
saberlo todo...) 502 BAD GATEWAY El servidor que actúa como una puerta de enlace o proxy
ha recibido una respuesta no válida del servidor al que
intenta acceder 503 SERVICE
UNAVAILABLE El servidor no puede responder en ese momento debido a
que se encuentra congestionado (todas las líneas de
comunicación se encuentran congestionadas, inténtelo de
nuevo más adelante) 504 GATEWAY
TIMEOUT La respuesta del servidor ha llevado demasiado tiempo en
relación al tiempo de espera que la puerta de enlace podía
admitir (excedió el tiempo asignado...)
1.2.1 ARQUITECTURA DEL WWW
La arquitectura de una aplicación Web dinámica, 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 aplicación Web estática se elimiría 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 aplicación Web es dinámico, 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 programación 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 programación, 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 aplicación Web dinámica, el cliente realiza la petición 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
aplicación Web sea estática o dinámica el servidor Web siempre entregará al cliente
16
respuestas en formato HTML, de esta forma el cliente nunca recibirá respuesta en el
lenguaje de programación Web dinámica. Esto sirve como un mecanismo de
seguridad para evitar que el usuario del cliente Web pueda ver los detalles de
implementación ejecutados en el servidor Web utilizando el modor de base de datos.
Fig. 1.3.- Arquitectura del www
1.2.2 URL’s.
URL significa Uniform Resource Locator, es decir, localizador uniforme de
recurso. Es una secuencia de caracteres, de acuerdo a un formato estándar, que se usa
para nombrar recursos, como documentos e imágenes en Internet, para su
localización.
El URL es la cadena de caracteres con la cual se asigna una dirección única a cada
uno de los recursos de información disponibles en la Internet. Existe un URL único
para cada página de cada uno de los documentos de la World Wide Web,
Una URL indica tanto una dirección de Internet como el servicio que se espera
ofrezca el servidor al que corresponde la dirección. Tiene el siguiente formato:
servicio://máquina:puerto/ruta/archivo@usuario
Donde el servicio podrá ser uno de los siguientes:
http
Es el servicio invocado para transmitir páginas Web y el que se usará
normalmente en los enlaces.
17
https
Es una innovación sobre el anterior, que permite acceder a servidores
(generalmente comerciales) que ofrecen el uso de técnicas de encriptación
para proteger los datos que se intercambien con él de terceras personas.
ftp
Permite trasmitir archivos desde servidores de ftp anónimo. 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 cómodamente.
Utilizando la @ se puede acceder a servidores privados.
mailto Para poder mandar un mensaje. Por ejemplo, la URL
mailto:[email protected] me enviaría un mensaje.
news
Para poder acceder a foros de discusión (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 conectaría con el foro
es.comp.demos en el servidor nacional de Telefónica.
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 dirección de la máquina puede ser, o bien la dirección IP compuesto por una serie
de cuatro números entre 0 y 255 (148.208.237.1) o bien algo más fácil de recordar
cómo es una serie de palabras separadas por puntos (www.itistmo.edu.mx).
El puerto es un número 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 símbolo /.
Existe otro formato de URL. Cuando se accede a un archivo situado en la misma
máquina que la página 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.
Diferenciación entre mayúsculas/minúsculas
De acuerdo al estándar actual, no se diferencian mayúsculas y minúsculas, y cuando
se normalizan durante el procesamiento, deben estar en minúsculas. Se debe asumir
que en otros componentes sí hay diferenciación. Sin embargo, en la práctica, esta
18
diferenciación es dependiente del servidor Web y del sistema operativo del sistema
que albergue al servidor, como en el caso de Windows que no diferencía entre
mayúsculas y minúsculas, sin embargo los sistemas operativos basados en Unix sí.
1.2.3 MÉTODOS HTTP. PERSISTENCIA EN HTTP –COOKIES.
COOKIES
Las cookies constituyen una potente herramienta empleada por los servidores Web
para almacenar y recuperar información acerca de sus visitantes. Dado que el HTTP
es un protocolo sin estados (no almacena el estado de la sesión entre peticiones
sucesivas), las cookies proporcionan una manera de conservar información entre
peticiones del cliente, extendiendo significativamente las capacidades de las
aplicaciones cliente/servidor basadas en la Web. Mediante el uso de cookies se
permite al servidor Web recordar algunos datos concernientes al usuario, como sus
preferencias para la visualización de las páginas de ese servidor, nombre y
contraseña, productos que más le interesan, personalización, es la palabra clave.
Una cookie no es más que un archivo de texto que algunos servidores piden al
navegador que escriba en el disco duro, con información acerca de lo que se ha estado
haciendo en las páginas.
Entre las mayores ventajas de las cookies se cuenta el hecho de ser almacenadas en el
disco duro del usuario, liberando así al servidor de una importante sobrecarga. Es el
propio cliente el que almacena la información y quien se la devolverá posteriormente
al servidor cuando éste la solicite. Además, las cookies poseen una fecha de
caducidad, que puede oscilar desde el tiempo que dure la sesión hasta una fecha
futura especificada, a partir de la cual dejan de ser operativas.
Algunos ejemplos que se pueden revisar y podrán servir para aclarar la función de las
cookies son los siguientes archivos:
Cookies Contador de visitas.htm Cookies - Bienvenida personalizada.htm Cookies - Última visita.htm Cookies - Personalización de colores.htm
19
1.3 INTRODUCCIÓN AL HTML. LENGUAJE DE DESPLIEGUE
DEL WEB
¿QUÉ ES HTML?
HTML es el lenguaje con el que se "escriben" la mayoría de páginas Web.
Los diseñadores utilizan el lenguaje HTML para crear sus páginas Web, los
programas que utilizan los diseñadores generan páginas escritas en HTML y los
navegadores que utilizamos los usuarios muestran las páginas Web después de leer su
contenido HTML.
Aunque HTML es un lenguaje que utilizan las computadoras y los programas de
diseño, es muy fácil de aprender y escribir por parte de las personas. En realidad,
HTML son las siglas de HyperText Markup Language y significa Lenguaje de
Marcación de Hipertexto.
El lenguaje HTML es un estándar reconocido en todo el mundo y cuyas normas
define un organismo sin ánimo de lucro llamado World Wide Web Consortium
(http://www.w3.org/) , más conocido como W3C. Como se trata de un estándar
reconocido por todas las empresas relacionadas con el mundo de Internet, una misma
página 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 información de forma global". Desde su
creación, el lenguaje HTML ha pasado de ser un lenguaje utilizado exclusivamente
para crear documentos electrónicos a ser un lenguaje que se utiliza en muchas
aplicaciones electrónicas como buscadores, tiendas en línea y banca electrónica.
ESPECIFICACIÓN OFICIAL
El organismo W3C elabora las normas que deben seguir los diseñadores de páginas
Web para crear las páginas HTML. Las normas oficiales están escritas en inglés y se
pueden consultar de forma gratuita en las siguientes direcciones:
Especificación oficial de HTML 4.01 (http://www.w3.org/TR/html401/)
Revisión 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 organización y etiquetado de
20
documentos. La Organización Internacional de Estándares (ISO) normalizó este
lenguaje en 1986.
El lenguaje SGML sirve para especificar las reglas de etiquetado de documentos y no
impone en sí ningún conjunto de etiquetas en especial.
El lenguaje HTML está definido en términos del SGML.
XML, es un estándar de creación posterior (Extensible Markup Language) (lenguaje
de marcas ampliable), es un metalenguaje extensible de etiquetas desarrollado
también por el W3C. Es una simplificación y adaptación del SGML y permite definir
la gramática de lenguajes específicos (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 definición son XHTML
Especificación oficial de XHTML 1.0 (http://www.w3.org/TR/xhtml1/)
El estándar XHTML 1.0 incluye el 95% del estándar HTML 4.01, ya que sólo añade
pequeñas mejoras y modificaciones menores. Afortunadamente, no es necesario leer
las especificaciones y recomendaciones oficiales de HTML para aprender a diseñar
páginas con HTML o XHTML. Las normas oficiales están escritas con un lenguaje
bastante formal y algunas secciones son difíciles de comprender
HTML y XHTML
El lenguaje XHTML es muy similar al lenguaje HTML. De hecho, XHTML no es
más que una adaptación de HTML al lenguaje XML. Técnicamente, HTML es
descendiente directo del lenguaje SGML, mientras que XHTML lo es del XML (que
a su vez, también es descendiente de SGML).
21
Fig. 1.4.- Lenguajes descendientes de SGML
Las páginas y documentos creados con XHTML son muy similares a las páginas y
documentos HTML. Las discusiones sobre si HTML es mejor que XHTML o
viceversa son recurrentes en el ámbito de la creación de contenidos Web, aunque no
existe una conclusión ampliamente aceptada.
1.3.2 ELEMENTOS DEL LENGUAJE HTML.
HTML es un lenguaje de etiquetas (también llamado lenguaje de marcado) y las
páginas Web habituales están 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 inglés 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 electrónicos. La principal
desventaja es que pueden aumentar mucho el tamaño 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 Programación Web</title> </head> <body bgcolor="#0033CC"> <h1>BIENVENIDOS A PROGRAMACIÓN 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 parámetros> ... </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.
22
Un documento HTML tiene una estructura que lo separa en dos partes: cuerpo y
cabecera. En la primera estará la página 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 código es la cabecera.
<head>
<title>Libro de programación Web</title>
</head>
Dentro de la cabecera sólo hay otra etiqueta. Es la única imprescindible: el título de la
página. Es lo que se ve como título de la ventana en los navegadores que lo permitan.
Es como se conocerá nuestra página 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 código HTML reside entre las etiquetas de inicio y cierre del
cuerpo del documento, es decir contendrá una gran cantidad de etiquetas según la
función que se le pretenda dar a las pagina Web, como en este caso tan solo, se
encuentran dos juegos de etiquetas más, que muestra un mensaje con un tamaño de
encabezado grande.
<h1>BIENVENIDOS A PROGRAMACIÓN WEB</h1> <hr>
Al finalizar aparece la etiqueta <hr> que muestra una línea horizontal. La línea
horizontal carece de etiqueta de cierre. Esto es normal en etiquetas que no varían los
atributos de un texto, sino que insertan un elemento.
FORMATEO BÁSICO
Se pueden establecer varias categorías dentro de las etiquetas usadas para formatear
el texto. Se pueden dividir en aquellas que sirven para cambiar párrafos enteros y las
que son capaces de formatear tiras de caracteres dentro del párrafo.
Formato del párrafo
23
Estas son las etiquetas más importantes
Etiqueta Utilidad Resultado <P> Sirve para delimitar un párrafo. Inserta una
línea en blanco antes del texto.
Soy un párrafo
<CENTER> ... </CENTER>
Permite centrar todo el texto del párrafo. Normal
Centrado <PRE WIDTH=x> ... </PRE>
Representa el texto encerrado en ella con un
tipo de letra de paso fijo. Muy útil a la hora de
representar código fuente. El parámetro
WIDTH especifica el número máximo de
caracteres en una línea.
Estoy en paso fijo
<DIV ALIGN=x> ... </DIV>
Permite justificar el texto del párrafo a la
izquierda (ALIGN=LEFT), derecha (RIGHT),
al centro (CENTER) o a ambos márgenes
(JUSTIFY)
izquierda
centro
derecha
<ADDRESS> ... </ADDRESS>
Para escribir direcciones (de esas donde vive
la gente, no electrónicas).
Juan Pérez Av.
Juárez No.30,
Juchitan,Oax. <BLOCKQUOTE> ... </BLOCKQUOTE>
Para citar un texto ajeno. Se suele
implementar dejando márgenes tanto a
izquierda como a derecha, razón 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
24
Estas etiquetas se pueden definir como de formato de párrafo pero por su importancia
se prefiere tratarlas aparte. No resulta recomendable utilizarlas para aumentar o
disminuir el tamaño del tipo de letra, ya que cada navegador los muestra de manera
diferente. Se usan para dividir correctamente en secciones una página, 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
párrafo.
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
de paso fijo.
Texto fijo
<SUP> ... </SUP> Letra superíndice. E=mc2
<SUB> ... </SUB> Letra subíndice. ai,j=bi,j+1 <BIG> ... </BIG> Incrementa el tamaño del tipo de letra. GRANDE <SMALL> ... </SMALL>
Disminuye el tamaño del tipo de letra. Soy pequeño
<BLINK> ... </BLINK>
Hace parpadear el texto. ¿Cuidado?
Otros elementos
Otros elementos que no son texto más sin embargo se pueden incorporar a una página
son:
Etiqueta Utilidad Resultado
<HR> Inserta una barra horizontal. <BR> Salto de línea. Hay un antes y un
después de saltar a otra línea
<!-- ... --> Comentarios. Esto se escribe y <!-- esto no -->
El siguiente ejemplo muestra el uso de algunas de las etiquetas de formato.
25
<!--formato.htm--> <HTML> <HEAD> <TITLE>Formato</TITLE> </HEAD> <BODY> <DIV ALIGN=CENTER><H1>FORMATO DE LA PAGINA</H1></DIV> <H2>Instituto Tecnológico del Istmo</H2> <HR> <P>Este párrafo es muy sencillo. Por el momento no se que tendrá, pero dentro de poco pondré aquí muchas cosas interesantes. <BR><BR><H2>Instituto Tecnológico del Istmo</H2> <HR> <DIV ALIGN=CENTER>Este <STRONG>párrafo</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 página se dividirá en la práctica en varias páginas independientes.
Para crearlos se necesita un documento HTML específico, que se conoce como
documento de definición de marcos. En él se especifica el tamaño y posición de cada
marco y el documento HTML que contendrá.
Ejemplo:
<!-- index --> <html> <head> <title>Venta en línea</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>
26
Se puede observar que la cabecera de la página 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 parámetro COLS o por ROWS. En éste, separado por comas, se
define el número de marcos y el tamaño de cada uno.
Dentro del <FRAMESET> se hacen dos cosas. Primero, definir cada uno de los
marcos poniéndoles un nombre y especificando qué archivo HTML le corresponde
mediante la etiqueta <FRAME>.
Etiqueta <FRAMESET>
Según el estándar, esta etiqueta sólo debería contener el número y tamaño de cada
marco, pero las extensiones de Netscape y Explorer al estándar obligan a estudiar un
par de parámetros más.
En general, los navegadores dibujan un borde de separación 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 parámetro
FRAMEBORDER=0 en el <FRAMESET>.
Cuando se elimina el borde, se ve cómo el navegador deja aún un hueco entre
marcos. Este se elimina añadiendo los parámetros FRAMESPACING=0
BORDER=0.
Las propiedades COLS y ROWS se les asigna una lista de tamaños separados por
comas. Se admiten los siguientes formatos de tamaño:
Con porcentajes: El tamaño de un marco se define como un porcentaje del
espacio total disponible.
Absolutos: El marco correspondiente tendrá el tamaño 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 código es una muestra de cómo 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>
27
Esta etiqueta define tan sólo las características de un marco determinado, no de un
conjunto de ellos. Estos son los parámetros que admite:
Parámetro Utilidad NAME Asigna un nombre a un marco para identificarlo y referenciarlo
después. SRC Indica la dirección 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 decisión. Las otras
opciones son YES y NO. NORESIZE Si se especifica el usuario no podrá cambiar de tamaño el marco. FRAMEBORDER Al igual que su homónimo en la etiqueta <FRAMESET>, si se iguala a
cero se eliminará el borde con todos los marcos contiguos que tengan
también este valor a cero. MARGINWIDTH Permite cambiar los márgenes horizontales dentro de un marco. Se
representa en pixels. MARGINHEIGHT Igual al anterior pero con márgenes verticales.
1.3.3 TABLAS EN HTML
Las tablas son una de las herramientas más ú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 había antes de la introducción de las Hojas de Estilo y de las etiquetas.
Es por esta facilidad a la hora de organizar con tablas nuestras páginas, el que el 99%
de las que veamos en Internet las usen, aunque muchas veces no las veamos
directamente porque están "ocultas".
ESTRUCTURA DE UNA TABLA
Las tablas están formadas por filas, columnas y celdas. Cada espacio horizontal
continuado es una fila y cada espacio vertical continuado es una columna,
definiéndose una celda como el espacio formado por la intersección 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
28
celda(2,1) celda(2,2) celda(2,3)
Lo primero que se tiene que hacer para introducir una tabla es decirle al navegador
dónde empieza y dónde 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 número 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
sería el siguiente:
<TABLE>
<TR> <TD>...</TD> <TD>...</TD> <TD>...</TD>
<TD>...</TD> <TD>...</TD> <TD>...</TD>
</TR>
<TR> </TR>
</TABLE>
Este es el esquema general de toda tabla simple, que traducido a código HTML
quedaría 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 número de celdas que se defina en la primera fila.
29
Además de estas etiquetas básicas existen otras que van a permitir adaptar la tabla a
ciertas necesidades. Y cada etiqueta posee además 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 más importantes están:
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 número de píxel del borde principal. bordercolor Define el color del borde. cellpadding Define, en píxel, el espacio entre los bordes de la celda y el contenido
de la misma. cellspacing Define el espacio entre los bordes (en píxel). height Define la altura de la tabla en píxel o porcentaje. width Define la anchura de la tabla en píxel 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
párrafo. 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 línea 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 línea 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.
30
Algunos de los atributos usan la siguiente sintaxis:
Atributo=”Valor”
Donde el Valor puede venir expresado en píxeles ó en tanto por ciento (%). Si toma un
valor en píxeles será un valor absoluto, mientras que si toma un valor en % será
relativa al tamaño de pantalla ó del elemento que lo contenga.
Así por ejemplo, si se desea que la tabla tenga un tamaño absoluto de 400 pixeles se
especificaría 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 notación absoluta provocará que el tamaño de la tabla en la pantalla del
navegador se vea de forma distinta según la resolución que se fije en la
configuración, así por ejemplo: Una tabla con ancho de 400 pixeles en una pantalla
con resolución de 800 *600 pixeles ocupará hasta la mitad de la misma, mientras que
con una resolución 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 tamaño distinto según la configuración 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%"> </td> </tr> <tr> <td>DIRECCION</td> <td bgcolor="#FFFF33" > </td> </tr> </table> </body> </html>
El ejemplo muestra una tabla como el siguiente:
REGISTRO DE CLIENTES
NOMBRE
31
DIRECCIÓN
Se trata de una tabla de 3 filas por 2 columnas, con atributos ancho del 30% del
tamaño de la pantalla, borde de tamaño 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á vacía con sus atributo color fijado en amarillo y del
60% del ancho de la tabla; la tercera fila, su primera celda contiene el texto
“DIRECCIÓN” y la segunda está vacía y también 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 interactúan con las
aplicaciones Web. Los datos que los usuarios introducen son procesados o enviados a
otras páginas 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 parámetros cabe destacar los siguientes:
action Define el URL que deberá gestionar el formulario. Puede ser un
archivo ó una dirección de correo (precedida del inevitable
mailto:, en cuyo caso se deberá añadir el parámetro
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 métodos POST y GET:
POST.- Es el mejor método puesto que envía 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 interrogación “? “ separa el URL del resto de
datos. name Identifica el nombre de la variable de formulario enctype Le indica al servidor el tipo de información que se va a enviar, si
no se indica, el servidor asume que solo recibirá información de
formulario convencional, destaca también:
"multipart/form-data" Indica al servidor que se recibirá un
archivo además de la información habitual del formulario.
32
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 serán enviados al archivo Web 'Autenticacion.php usando el método post
Los elementos que se deseen incluir en el formulario deberán hallarse entre las
etiquetas <FORM> y </FORM>
ELEMENTOS DE UN FORMULARIO
Campos de texto
Botón de opción
Lista/Menú
Botón
Casilla de verificación
Campo oculto
Botones mejorados
Campo de Imagen
Etiquetas
Campo de archivo
Algunos de estos elementos son usados con más frecuencia que otros, sin embargo a
continuación se explicarán cada uno de ellos para más 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
línea). El segundo es equivalente, pero no se verá lo que se teclee en él, más bien los
caracteres se remplazará por un carácter * por ello se conoce como Cuadro de texto
para contraseña. Estos son los atributos para modificarlos:
Parámetro Utilidad
SIZE Tamaño de la caja de texto.
MAXLENGTH Número máximo de caracteres que puede introducir el usuario.
33
VALUE Texto por defecto que contendrá la caja.
Por otro lado, puede que se necesite que el usuario pueda introducir más de una
línea. En ese caso se utilizará el componente conocido como área de texto, para ello
se usa la siguiente etiqueta:
<TEXTAREA> Por defecto </TEXTAREA>
Por defeto
Lo que se incluya entre las dos etiquetas será lo que se muestre por defecto dentro de
la caja. Admite estos parámetros:
Parámetro 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í según la selección que realice el usuario, será el valor que tomará la variable.
Acepta los siguientes parámetros:
Parámetro Utilidad
VALUE Este es el valor que asignará a la variable.
CHECKED Si se indica en una de las opciones esta será la que esté activada por
defecto.
La segunda posibilidad que ocupa menos código es usando una Lista/Menú. Para
emplearlas se debe utilizar dos etiquetas, SELECT y OPTION: <SELECT NAME="Navegador"> <OPTION value="Net">Netscape <OPTION value="Exp">Explorer <OPTION value="Ope">Opera <OPTION value="Lin">Lynx <OPTION value="Otr">Otros </SELECT>
Netscape
Los parámetros que admite SELECT son las siguientes:
34
Parámetro Utilidad
SIZE El número de opciones que se podrá ver. Si es mayor que 1 se verá una
lista de selección y, si no, un menú desplegable.
MULTIPLE Si se indica se podrá elegir más de una opción.
Y OPTION estos:
Parámetro 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"> <input type="reset" name="Submit2" value="Limpiar">
Aceptar
Limpiar
Con la propiedad VALUE se fija el texto del botón
CASILLA DE VERIFICACIÓN
Puede que se necesite que el usuario sencillamente confirme o niegue algo. Se podrá
conseguir por medio de Casillas de Verificación:
PROMOCIÓN <input name="promo" type="checkbox" value="1" checked> PROMOCIÓN
Si se desea que el control esté activado por defecto se le añade 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 enviárselo a otra página. Por
ejemplo, se podría asignar en forma oculta la clave de un producto a una variable para
verificar este valor en la página receptora.
<input name="clvp" type="hidden" id="claveproducto" value="DD120">
CONTROLES AVANZADOS PARA FORMULARIOS El estándar HTML 4.0 ha traído varias mejoras a los formularios, que acercan los
mismos a las características que tienen en lenguajes como Java o Visual Basic, C++
Builder, etc.
35
BOTONES MEJORADOS
Una de las cosas que más 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 gráficos o, incluso, tablas enteras. La etiqueta en cuestión se llama
BUTTON: <BUTTON TYPE="button"> <table border="1"> <tr> <th>Soy una</th> <th>tabla</th> </tr> <tr> <td>que está</td> <td>en un botón</td> </tr> </table> </BUTTON>
Soy una tabla
que está en un botón
Los parámetros 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 gráfico como un elemento más 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 Cámara">
Este elemento se comportará del mismo modo que un botón de tipo SUBMIT, pero
añadirá como información en el formulario las coordenadas x, y donde el usuario lo
pulsó.
ETIQUETAS
Hasta hora, el texto que acompañaba a los campos de entrada no estaba asociado a los
mismos de ninguna manera. Así, por ejemplo, si se pulsa en el texto que acompañaba
a un control de confirmación, no sucedía nada. Ahora, en cambio, si se sitúa la
etiqueta LABEL, el control cambiará de estado
<LABEL> PROMOCIÓN <input name="promo" type="checkbox" value="1" checked> </LABEL>
PROMOCIÓN
36
AGRUPACIÓN 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 rectángulo
alrededor de los mismos. Si además, se le pone un título por medio de la etiqueta
LEGEND él formularios quedará más elegante.
<FIELDSET> <LEGEND>Registro de Productos </LEGEND> <LABEL> Clave: <INPUT TYPE="text"> </LABEL> <br> <LABEL> Nombre: <INPUT TYPE="text"> </LABEL> </FIELDSET>
Registro de Productos
Clave:
Nombre:
LEGEND admite como parámetro ALIGN, que indicará en qué lugar se coloca el título. Por
defecto es TOP (arriba), pudiendo estar también abajo (BOTTOM), a la izquierda (LEFT) o a
la derecha (RIGHT).
DESACTIVACIÓN DE ELEMENTOS
Todos los controles de un formulario se pueden desactivar, impidiendo así al usuario
que los utilice. Se seguirán mostrando en pantalla, aunque con un aspecto distinto
para indicar su triste estado. Para ello sólo se pone el parámetro 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 activación 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, más sin embargo sus demás 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.
<input type="file" name="imagen" >
Examinar...
Al pulsar cobre el botón el navegador mostrará una caja de diálogos que permitirá al
usuario seleccionar el archivo en el disco duro.
37
Más adelante se mostrarán 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 distribución de los elementos
del formulario, lo que facilita su comprensión 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> <td><input type="file" name="imagen" id="imagen"></td> </tr> <tr> <td>PROMOCION</td>
38
<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 mostraría así:
REGISTRO DE PRODUCTOS
CLAVE
NOMBRE
UNIDAD PIEZA CAJA
PRECIO
EXISTENCIA
CATEGORIA DISCOS DUROS
IMAGEN
PROMOCION
Aceptar
Restablecer
Básicamente el código 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 verificación 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 EVOLUCIÓN DEL DESARROLLO DE APLICACIONES WEB
Con la introducción de Internet y del Web en concreto, se han abierto infinidad de
posibilidades en cuanto al acceso a la información desde casi cualquier sitio. Esto
representa un desafío a los desarrolladores de aplicaciones, ya que la gran cantidad de
programas escritos con anterioridad se están transformando a plataforma Web, los
39
avances en tecnología demandan cada vez aplicaciones más rápidas, ligeras y
robustas que permitan utilizar el Web.
Afortunadamente, se tienen herramientas potentes para realizar esto, ya que han
surgido nuevas tecnologías que permiten que el acceso a una base de datos desde el
Web, por ejemplo, sea un mero trámite. El único problema es decidir entre el
conjunto de posibilidades la correcta para cada situación.
El viejo Interfaz de entrada común (CGI) ha cumplido con el propósito de añadir
interactividad a las páginas Web pero sus deficiencias en el desarrollo de aplicaciones
y en la escalabilidad de las mismas ha conducido al desarrollo de aplicaciones
específicos de servidor como Paginas de Servidor Activo (ASP y ASP.NET), Páginas
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 manipulación de la base de datos para
proporcionar el dinamismo requerido en las páginas Web.
En un principio el aspecto o presentación que tenían las páginas Web eran
directamente controladas desde cada página, estableciendo las propiedades de sus
componentes según se requiriera, considerando que una aplicación Web a veces
consta de cientos o miles de estas páginas, modificar el aspecto de todo el sitio
realmente implicaba una gran labor, sin embargo actualmente para realizar esto con
más eficiencia se lleva a cabo usando Hojas de Estilo en Cascada (CSS).
1.5 HOJAS DE ESTILO EN CASCADA E INTRODUCCIÓN AL
XML
CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación
de los documentos definidos con HTML y XHTML. CSS es la mejor forma de
separar los contenidos y su presentación y es imprescindible para crear páginas Web
complejas.
Separar la definición de los contenidos y la definición de su aspecto presenta
numerosas ventajas, ya que obliga a crear documentos bien definidos y con
significado completo. Además, 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 página Web, se utiliza en primer lugar el lenguaje HTML para marcar
los contenidos, es decir, para designar la función de cada elemento dentro de la
página: párrafo, titular, texto destacado, tabla, etc.
40
Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el aspecto de
cada elemento: color, tamaño y tipo de letra del texto, separación horizontal y vertical
entre elementos, posición de cada elemento dentro de la página, etc.
Antes de la adopción de CSS, los diseñadores de páginas Web debían definir el
aspecto de cada elemento dentro de las etiquetas HTML de la página. El siguiente
ejemplo muestra una página 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 página le dan la presentación 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 tipografía y el tamaño 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 página tuviera 50 elementos diferentes,
habría que insertar 50 etiquetas <font>. Si el sitio Web entero se compone de 10.000
páginas diferentes, habría que definir 500.000 etiquetas <font>. Como cada etiqueta
<font> tiene 3 atributos, habría que definir 1.5 millones de atributos.
Por otra parte, el diseño de los sitios Web está en constante evolución y es habitual
modificar cada cierto tiempo los colores principales de las páginas o la tipografía
utilizada para el texto. Si se emplea la etiqueta <font>, habría que modificar el valor
de 1.5 millones de atributos para modificar el diseño general del sitio Web.
HOJA DE ESTILO INTERNA La solución 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>Página con CSS Interna</h1> <p>Los estilos en una página le dan la presentación a la misma </p> </body>
41
</html>
CSS permite separar los contenidos de la página y su aspecto o presentación. En el
ejemplo anterior, dentro de la propia página HTML se reserva una zona en la que se
incluye toda la información relacionada con los estilos de la página.
Utilizando CSS, en esa zona reservada se indica que todas las etiquetas <h1> de la
página se deben ver de color rojo, con un tipo de letra Arial y con un tamaño de letra
grande. Además, las etiquetas <p> de la página se deben ver de color gris, con un tipo
de letra Verdana y con un tamaño de letra medio.
Definiendo los estilos de esta forma, no importa el número de elementos <p> que
existan en la página, ya que todos tendrán el mismo aspecto establecido mediante
CSS. Como se verá a continuación, esta forma de trabajar con CSS no es ideal, ya
que si el sitio Web dispone de 10.000 páginas, habría 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 código HTML de la página Web. Esta es la manera de programar más
potente, porque separa completamente las reglas de formateo para la página HTML
de la estructura básica de la página.
En este caso, todos los estilos CSS se incluyen en un archivo de tipo CSS que las
páginas HTML enlazan mediante la etiqueta <link>. Un archivo de tipo CSS no es
más que un archivo simple de texto cuya extensión es .css Se pueden crear todos los
archivos CSS que sean necesarios y cada página 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 continuación, en la página HTML se utiliza la etiqueta <link> para enlazar el
archivo CSS externo que tiene los estilos que va a utilizar la página:
<!-- 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 página le dan la presentación a la misma </p> </body> </html>
42
Normalmente, la etiqueta <link> incluye cuatro atributos cuando se enlaza un archivo
CSS:
rel: indica el tipo de relación que tiene el recurso enlazado (en este caso, el
archivo CSS) y la página HTML. Para los archivos CSS, siempre se utiliza el
valor stylesheet
type: indica el tipo de recurso enlazado. Sus valores están 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 páginas HTML, esta es la más utilizada con
mucha diferencia. La principal ventaja es que se puede incluir un mismo archivo CSS
en multitud de páginas HTML, por lo que se garantiza la aplicación homogénea de
los mismos estilos a todas las páginas que forman un sitio Web.
Con este método, el mantenimiento del sitio Web se simplifica al máximo, ya que un
solo cambio en un solo archivo CSS permite variar de forma instantánea los estilos de
todas las páginas HTML que enlazan ese archivo.
HOJA DE ESTILO EN LINEA
El último método 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 línea</title> </head> <body> <h1 style= "color:red; font-size:50px;">Pagina con CSS en línea </h1> <p style="color: gray; font-family: Verdana; font-size:12px;"> Los estilos en una página le dan la presentación 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 específico para
un solo elemento concreto.
CSS define una serie de términos 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 básico:
43
Fig. 1.5.- Partes de una regla básica CSS
Un archivo CSS puede contener infinitas reglas CSS, cada regla puede contener
infinitos selectores y cada declaración puede estar formada por un número infinito de
pares propiedad/valor.
MEDIOS CSS
Una de las características más importantes de las hojas de estilos CSS es que
permiten definir diferentes estilos para diferentes medios o dispositivos: pantallas,
impresoras, móviles, proyectores, etc.
Además, CSS define algunas propiedades específicamente para determinados medios,
como por ejemplo la paginación y los saltos de página 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 descripción:
Medio Descripción all Todos los medios definidos braille Dispositivos táctiles que emplean el sistema braille embosed Impresoras braille handheld Dispositivos de mano: móviles, 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 resolución baja
Los medios más utilizados actualmente son screen (para definir el aspecto de la
página en pantalla) y print (para definir el aspecto de la página cuando se imprime),
seguidos de handheld (que define el aspecto de la página cuando se visualiza
mediante un dispositivo móvil).
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 aplicarán los estilos incluidos en la regla. Para especificar el medio en el que se aplican los estilos, se incluye su nombre después de
@media. Si los estilos se aplican a varios medios, se incluyen los nombres de todos los
medios separados por comas.
A continuación se muestra un ejemplo sencillo: @media print {
44
body { font-size: 10pt } } @media screen {
body { font-size: 13px } } @media screen, print {
body { line-height: 1.2 } }
El ejemplo anterior establece que el tamaño de letra de la página cuando se visualiza
en una pantalla debe ser 13 píxel. Sin embargo, cuando se imprimen los contenidos
de la página, su tamaño de letra debe ser de 10 puntos. Por último, tanto cuando la
página se visualiza en una pantalla como cuando se imprimen sus contenidos, el
interlineado del texto debe ser de 1.2 veces el tamaño de letra del texto.
SELECTORES BÁSICOS
Selector universal
Se utiliza para seleccionar todos los elementos de la página. 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 difícil que un mismo estilo se pueda aplicar a
todos los elementos de una página.
No obstante, sí que se suele combinar con otros selectores.
Selector de tipo o etiqueta
Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el
valor del selector. El siguiente ejemplo selecciona todos los párrafos de la página:
p { ... }
El siguiente ejemplo aplica diferentes estilos a los titulares y a los párrafos de una
página 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 títulos de sección h1, h2 y h3 comparten
los mismos estilos:
h1, h2, h3 {
45
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 clasificación:
PROPIEDADES DE BLOQUE Definen cosas como los márgenes o la colocación de bloques de contenido HTML:
Propiedad Descripción Posibles valores margin-top, margin-right, margin-bottom, margin-left, margin: top right bottom left
Distancia mínima entre un bloque y
los demás elementos. Tanto margin
como margins() se utilizan para
cambiar todos estos atributos a la vez.
Tamaño,
porcentaje o auto.
Por defecto es
cero. padding-top, padding-right, padding-bottom, padding-left, padding: top right bottom left
Distancia entre el borde y el
contenido de un bloque.
Tamaño,
porcentaje o auto.
Por defecto es
cero. border-top-width, border-right-width, border-bottom-width, border-left-width, border-width: top right bottom left
Anchura del borde de un bloque. numérico
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 Tamaño de un bloque. Su mayor
utilidad está en su aplicación a un
elemento gráfico.
Tamaño,
porcentaje o auto,
automático por
defecto. float Justificación del contenido de un
bloque.
left, right o none,
por defecto
ninguna. clear Permiso para que otro elemento se
pueda colocar a su izquierda o
derecha.
left, right, both o
none, por defecto
ninguno.
PROPIEDADES DE TIPO DE LETRA
Las propiedades del tipo de letra que el usuario va a ver son las siguientes:
Propiedad Descripción Posibles valores
46
font-family
Tipo de letra (que
puede ser genérico)
Lista de tipos, ya sean genéricos o no, separados
por comas. font-size Tamaño del tipo de
letra.
xx-small, x-small, small, medium, large, x-
large, xx-large, tamaño relativo o tamaño
absoluto. Por defecto medium. font-weight
Grosor del tipo de
letra (negrita).
normal, bold, bolder, lighter o 100-900 (donde
900 es la negrita más gruesa). Por defecto
normal. font-style Estilo del tipo de
letra (cursiva).
normal, italic, italic small-caps, oblique,
oblique small-caps o small-caps. Por defecto
normal.
Cabe recordar que los tipos genéricos son serif, sans-serif, cursive, fantasy y
monospace. Cada uno de estos tipos serán 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 Descripción Posibles valores line-height Interlineado. Número o porcentaje. text-decoration
Efectos variados sobre
el texto.
none, underline (subrayado), overline (como
subrayado, pero por encima), line-through
(tachado) o blink (parpadeante); por defecto
ninguno. vertical-align
Posición vertical del
texto.
baseline (normal), sub (subíndice), super
(superíndice), top, text-top, middle, bottom,
text-bottom o un porcentaje. Por defecto baseline
text-transform
Transforma el texto a
mayúsculas o
minúsculas.
capitalize (pone la primera letra en
mayúsculas), uppercase (convierte todo a
mayúsculas), lowecase (a minúsculas) o none,
por defecto no hace nada. text-align Justificación del texto. left, right, center o justify
text-indent Tabulación con que
aparece la primera
línea del texto.
tamaño o porcentaje, por defecto cero.
PROPIEDADES DE COLOR Y FONDO
También es posible cambiar los colores y el gráfico de fondo de un elemento.
Propiedad Descripción Posibles valores color Color del texto. Un color (en el formato habitual). background Modifica tanto el gráfico el
color de fondo.
Dirección del archivo que contiene la
imagen o un color.
47
Hay que decir que, en la sintaxis en cascada, las direcciones se expresan del siguiente
modo: background: url(fondobonito.gif);
PROPIEDADES DE CLASIFICACIÓN
Hasta ahora habíamos 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 Descripción Posibles valores display Decide si un elemento es interior
(como <I>), un bloque (<P>) o un
elemento de una lista (<LI>).
inline, block, list y none (que
'apaga' el elemento)
list-style Estilo de un elemento de una
lista, pudiendo incluir un gráfico
al comienzo del mismo.
disc, circle, square, decimal, lower-roman, upper-roman, lower-
alpha, upper-alpha, none o la
dirección de un gráfico white-space
Decide como se manejan los
espacios, si de manera normal o
como sucede dentro de la etiqueta
<PRE>.
normal y pre
48
PREGUNTAS 1. ¿En qué año Internet se convierte en una red pública 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 año y que aplicación provoco el incremento de usuarios en Internet?
5. ¿Cuál es el protocolo utilizado para los sitios Web y en qué consiste?
6. ¿Qué es un RFC?
7. Explique el proceso de comunicación entre el navegador y servidor Web
8. ¿Cuál es la sintaxis de una solicitud HTTP?
9. Indique por lo menos 3 comandos de Solicitud HTTP y su descripción
10. Indique por lo menos 5 tipos de encabezados de Solicitud del HTTP y su
descripción
11. ¿Cuál es la sintaxis de una respuesta HTTP?
12. Indique por lo menos 4 tipos de encabezados de Respuesta del HTTP y su
descripción
13. ¿Qué son los códigos de respuesta y de 2 ejemplos?
14. En una arquitectura Web ¿Qué es un motor de base de datos?
15. ¿Cuál es la diferencia entre una aplicación Web estática y una dinámica?
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 explicación de cada uno.
19. Al definir una URL ¿Existen diferencias entre mayúsculas y minúsculas?, si, no,
porque.
20. ¿Qué es una cookies?
21. Explique cada uno de los ejemplos planteados donde se utilizaron cookies
22. ¿Quién define el estándar HTML?
23. Defina que es SGML, XML y HTML
24. Muestre con un dibujo la relación 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 cuál es la estructura de una tabla
30. Indique por lo menos 5 atributos de una tabla, así como su descripción
31. Explique cuál es la diferencia entre expresar el valor de una atributo en pixeles y
en porcentaje
32. ¿Qué es un formulario?
49
33. ¿Cuáles son los parámetros de un formulario, así como su descripción?
34. Muestre una lista de los elementos que puede contener un formulario?
35. ¿En qué parámetro se almacena el texto que contiene un cuadro de texto?
36. ¿Cuáles son los dos tipos de botones que existen?
37. ¿Con que parámetro se marca una casilla de verificación?
38. ¿Para qué se utiliza un campo oculto?
39. ¿Para qué se utilizan los lenguajes ASP, JSP y PHP?
40. ¿Cuál 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 cómo se le puede aplicar CSS al body de todas las páginas de un sitio
Web.
50
EJERCICIOS PROPUESTOS. 1. Busque en la red el RFC 2616, analice y realice un cuadro sinóptico de su
contenido.
2. Plantee e implemente un ejercicio donde se apliquen una “cookies” (uso de
cookies.htm)
3. Crear una página (index.htm) que incluya la definición de un conjunto de 3
marcos:
un marco superior que ocupe el 20% de la pantalla, se usará como
encabezado, vincular con la página 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 interés del lector, implementar cada una
de las tres páginas de tal manera que encabezado.html contenga el logotipo y
nombre de la empresa, menú.htm las posibles opciones de menú que podría
contener el sistema y finalmente principal.htm información relevante de la
empresa seleccionada.
4. Utilizando tablas (uso de tablas.htm), diseñe e implemente una, aplicando las
propiedades requeridas para lograr una mejor estética de la misma, la tabla
deberá contener las etiquetas necesarias para mostrar los datos de un
Empleado, tales como: RFC, Nombre, Dirección, 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 página 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 página se siga viendo igual ó
mejor que empleado.htm.
51
2
Desarrollo de aplicaciones Web
52
2.1 ARQUITECTURA DE LAS APLICACIONES WEB.
Al hablar de arquitecturas de aplicaciones Web resulta adecuado presentarlas dentro
de las aplicaciones multinivel. Los sistemas típicos cliente/servidor pertenecen a la
categoría de las aplicaciones de dos niveles. La aplicación reside en el cliente
mientras que la base de datos se encuentra en el servidor. En este tipo de aplicaciones
el peso del cálculo recae en el cliente, mientras que el servidor hace la parte menos
pesada, y eso que los clientes suelen ser máquinas menos potentes que los servidores.
Además, está el problema de la actualización 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 presentación, lógica de la aplicación y los datos.
La capa intermedia es el código que el usuario invoca para recuperar los datos
deseados. La capa de presentación recibe los datos y los formatea para mostrarlos
adecuadamente. Esta división entre la capa de presentación y la de la lógica permite
una gran flexibilidad a la hora de construir aplicaciones, ya que se pueden tener
múltiples interfaces sin cambiar la lógica de la aplicación.
La tercera capa consiste en los datos que gestiona la aplicación. Estos datos pueden
ser cualquier fuente de información como una base de datos o documentos XML.
Convertir un sistema de tres niveles a otro multinivel es fácil ya que consiste en
extender la capa intermedia permitiendo que convivan múltiples aplicaciones en lugar
de una sola
53
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 presentación que incluye no sólo el navegador,
sino también el servidor Web que es el responsable de dar a los datos un formato
adecuado. El segundo nivel está referido habitualmente a algún tipo de programa o
script. Finalmente, el tercer nivel proporciona al segundo los datos necesarios para su
ejecución.
Una aplicación Web típica 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 PROGRAMACIÓN 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 interpretación
del servidor.
Entre los cuales no sólo se encuentra el HTML y CSS sino también los que se
muestran en la siguiente tabla.
54
LENGUAJES DE PROGRAMACIÓN DEL LADO DEL CLIENTE
HTML
CSS
JAVASCRIPT
APPLETS DE JAVA
VISUAL BASIC SCRIPT
FLASH
JAVASCRIPT
Javascript es un lenguaje de programación utilizado para crear pequeños
programitas encargados de realizar acciones dentro del ámbito de una página
Web. Se trata de un lenguaje de programación del lado del cliente, porque es el
navegador el que soporta la carga de procesamiento. Su uso se basa
fundamentalmente en la creación de efectos especiales en las páginas y la
definición de interactividades con el usuario.
Las sentencias escritas en javascript se encapsulan entre las etiquetas <script> y
</script>. Por ejemplo, si en el código de una página Web se incluye la
sentencia
<script language="JavaScript" type="text/JavaScript"> window.alert("Bienvenido a mi sitio web. Gracias...") </script>
Al abrir la página con el navegador mostrará una ventana de bienvenida
Por ser este el lenguaje de programación del lado del cliente más util izado en el
capítulo 4 se trata con más profundidad.
APPLETS DE JAVA
Es otra manera de incluir código a ejecutar en los clientes que visualizan una
página Web. Se trata de pequeños programas hechos en Java, que se transfieren
con las páginas Web y que el navegador ejecuta en el espacio de la página.
Los applets de Java están programados en Java y precompilados, es por ello que
la manera de trabajar de éstos varía un poco con respecto a los lenguajes de
script como Javascript. Los applets son más difíciles de programar que los
scripts en Javascript y requerirán unos conocimientos básicos 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
55
independientes del sistema operativo de la computadora donde se ejecutan.
Además, Java es más potente que Javascript, por lo que el número de
aplicaciones de los applets podrá ser mayor.
Como desventajas en relación con Javascript cabe señalar que los applet s son
más lentos de procesar y que tienen espacio muy delimitado en la página donde
se ejecutan, es decir, no se mezclan con todos los componentes de la página ni
tienen acceso a ellos. Es por ello que con los applets de Java no se puede hacer
directamente cosas como abrir ventanas secundarias, controlar Frames,
formularios, etc.
VISUAL BASIC SCRIPT
Es un lenguaje de programación de scripts del lado del cliente, pero sólo
compatible con Internet Explorer. Es por ello que su utilización está
desaconsejada a favor de Javascript.
Está basado en Visual Basic, un popular lenguaje para crear aplicaciones
Windows. Tanto su sintaxis como la manera de trabajar están muy 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 versión reducida del primero.
El modo de funcionamiento de Visual Basic Script para construir efectos
especiales en páginas Web es muy similar al utilizado en Javascript y los
recursos a los que se puede acceder también son los mismos: el navegador.
FLASH
Flash es una tecnología, y un programa, para crear efectos especiales en páginas
Web. Con Flash también se consigue hacer páginas dinámicas del lado del
cliente. Flash en realidad no es un lenguaje; Sin embargo, si se tuviera que
catalogarlo en algún sitio quedaría dentro del ámbito de las páginas dinámicas
de cliente.
Para visualizar las "películas" Flash, el navegador debe tener instalado un
pequeño programa (plug-in) que le permita visualizarlas.
2.3 LENGUAJES DE PROGRAMACIÓN DEL LADO DEL
SERVIDOR.
Son aquellos lenguajes que son reconocidos, ejecutados e interpretados por el
propio servidor y que se envían al cliente en un formato comprensible para él.
56
Existe una multitud de lenguajes concebidos o no para Internet. Cada uno de
ellos explota más a fondo ciertas características que lo hacen más 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 más amplio y más 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 cuestión lo permite o no.
En el dominio de la red, los lenguajes de lado servidor más ampliamente
utilizados para el desarrollo de páginas dinámicas son el ASP, PHP y JSP.
LENGUAJES POR EL LADO DEL SERVIDOR
CGI
PERL
ASP / ASP.NET
PHP
JSP
CGI
Es el sistema más antiguo que existe para la programación de las páginas
dinámicas 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 también empleados para
construirlos.
PERL
Perl es un lenguaje de programación interpretado, al igual que muchos otros
lenguajes de Internet como Javascript o ASP. Esto quiere decir que el código de
los scripts en Perl no se compila sino que cada vez que se quiere ejecutar se lee
el código y se pone en marcha interpretando lo que hay escrito. Además es
extensible a partir de otros lenguajes, ya que desde Perl se pueden hacer
llamadas a subprogramas escritos en otros lenguajes. También desde otros
lenguajes se puede ejecutar código Perl.
Perl es un lenguaje de programación que actualmente se emplea para el diseño
de sitios Web, pero que en un principio se utilizaba para procesar texto. Su
nombre significa Practical Extraction and Report Language, es decir, lenguaje
57
práctico para la extracción e informe. Se trata de un lenguaje fácil 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 programación de Microsoft “del lado
del servidor”, con el cual se realizan sitios Web dinámicos. Generalmente se
comercializa junto con el servidor ISS (Internet Information Server). Se llama ASP
clásico 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. También se
pueden emplear tecnologías como Flash y JavaScript junto con ASP y HTML.
A partir del año 2002 Microsoft lanzó al mercado el lenguaje ASP.NET. Este
lenguaje es más ordenado que el ASP, dado que se separa el contenido de un sitio de
su comportamiento dinámico. Por otra parte, una restricción del ASP y del ASP.NET
es que este lenguaje sólo puede ser ejecutado en el sistema operativo Windows.
PHP
PHP es un lenguaje de programación del lado del servidor gratuito e
independiente de plataforma, rápido, con una gran librería de funciones y
mucha documentación.
El código PHP se incluye dentro del HTML, entre las etiquetas <?php y ?>. Es
una tecnología “del lado del servidor”, ya que éste es el que interpreta y ejecuta
el código PHP de un sitio dinámico. El navegador solamente recibe la
ejecución. Entre sus principales ventajas se puede señalar:
Es un lenguaje que puede ejecutarse en diferentes sistemas operativos
(Linux, Windows y Macintosh) y en los servidores más populares.
Permite programar sitios con contenido dinámico, combinándolo con los
principales servidores de bases de datos, entre ellos MySQL. De esta
manera los sitios desarrollados con PHP presentan no sólo un gran
dinamismo sino también un excelente manejo de datos. Por ello este
lenguaje es ideal para crear sitios Web catálogos.
Es un lenguaje libre y, por ende, accesible a todas las personas.
JSP
JSP es un acrónimo de Java Server Pages, que en español significa Páginas de
Servidor Java. Es, pues, una tecnología orientada a crear páginas Web con
programación en Java.
58
Con JSP se puede crear aplicaciones Web que se ejecuten en variados
servidores Web, de múltiples 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 programación. Más 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 página que antes.
Cualquier página que responde a las actividades del usuario y realiza efectos y
funcionalidades se puede englobar dentro del DHTML, pero en este caso se
refiere más a efectos en el navegador por los cuales se pueden mostrar y ocultar
elementos de la página, se puede modificar su posición, dimensiones, color, etc.
DHTML proporciona más control sobre la página, gracias a que los
navegadores modernos incluyen una nueva estructura para visualizar en páginas
Web denominada capa. Las capas se pueden ocultar, mostrar, desplazar, etc.
Para realizar las acciones sobre la página, como modificar la apariencia de una
capa, se requiere de un lenguaje de programación del lado del cliente como
Javascript o VBScript.
En la actualidad, DHTML también puede englobar la programación en el
servidor.
XML
XML es una tecnología en realidad muy sencilla que tiene a su alrededor otras
tecnologías que la complementan y la hacen mucho más grande y con unas
posibilidades mucho mayores.
XML, con todas las tecnologías relacionadas, representa una manera distinta de
hacer las cosas, más 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.
59
2.4 AMBIENTES PARA EL DESARROLLO DE APLICACIONES
WEB.
Existen en el mercado multitud de aplicaciones que facilitan la creación y el
mantenimiento de los sitios Web. Las primeras páginas 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 creación artesanal
en favor de la más industrial. Lo malo es que al final se corre el riesgo de que los
portales se parezcan demasiado unos a otros.
La utilización 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 prolongaría 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 código y para hacerlo se requiere de un dominio en los diferentes
lenguajes, de otra forma su actividad estaría muy limitada, así la herramienta ayudará
en la confección del sitio en las actividades más repetitivas y comunes, sin embargo
en los detalles finos, se realiza desde el código. Ahora también en la codificación 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 código, aumentando así
la productividad y la calidad de la aplicación que se va a producir. Dos programas
para el desarrollo de aplicaciones Web más populares son:
Adobe Dreamweaver.- Es el estándar de la industria debido a su código
limpio y características avanzadas.
60
Fig. 2.3.- Pantalla principal de Dreanweaver cs4
Nvu.- es una herramienta de código abierto que coincide con muchas de las
características de Dreamwaver, y se puede descargar gratuitamente de la
página www.nvu.com.
Fig. 2.4.- Pantalla principal de NVU
2.5 METODOLOGÍAS 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, proporción 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 línea, sea para fines personales o comerciales. Esta primera fase es
emocionante. Se empieza con una idea (“sitio de venta en línea”, “ambiente virtual de
aprendizaje”, “banca en línea”, etc.) y luego realizar una lluvia de ideas sobre cómo
se va a manifestar como sitio Web. Este es el momento de las listas y bocetos,
61
pizarras y cuadernos. ¿Qué va hacer emociónate? ¿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 más importante, los usuarios.
Muchas grandes empresas de diseño y desarrollo Web dedican más tiempo a
investigar e identificar las necesidades del cliente que cualquier otro nivel de
producción. 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
preparación 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 podrían formular a los clientes o a uno mismo,
durante la fase de investigación del diseño 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? ¿Después de que se
hayan marchado?
¿Qué hace volver a sus visitantes?
Descripción generan del sitio
¿Qué tipo de sitio es? (¿Meramente proporcional? ¿Una publicación? ¿Un
punto de venta?
¿Qué características tendrá?
¿Cuáles son sus mensajes más importantes?
¿Quiénes son sus competidores? ¿Qué hacen bien? ¿Qué se podría mejorar?
Audiencia objetivo
¿Quién es su principal audiencia?
¿Tiene experiencia con internet y conocimientos técnicos?
¿Puede haber previsiones de la velocidad de conexión de un usuario medio?
¿plataforma? ¿tamaño de monitor? ¿navegador?
¿Cada cuanto se espera que visiten el sitio? ¿Cuánto tiempo permanecerá
durante una visita media?
Contenido
¿Quién es responsable de generar el contenido original?
¿Cómo se enviara el contenido?
62
Recursos
¿Qué recursos se ha dedicado al sitio (presupuesto, personal, tiempo)?
¿Requiere el sitio un sistema de gestión 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 estándares existentes, como logos y colores, que se tengan que
incorporar
¿Forma el sitio parte de un sitio más grande o grupos de sitios con estándares
de diseño 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 dinámicos, se requiere del diseño de la base de datos que
almacenará la información que se procese, siendo necesario después de la
investigación diseñar los modelos para su representación como lo es un modelo
Entidad-Relación.
Fig. 2.5.- Modelo Entidad – Relación de Ventas en línea
En la figura se muestra el modelo entidad – relación de una porción de una base de
datos de ventas en línea.
También se deben obtener el conjunto de tablas que conformarán 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)
63
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 más importante de un sitio Web es su contenido. A pesar del ruido sobre
tecnologías 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.
Creación 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.
Diseño de la información
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 fácil 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, categoría, etc. Decidir lo que va en la página principal y lo que se divide
en apartados. Pensar en cómo los usuarios esperarían encontrar la información en su
sitio y diseñar en base a sus necesidades y suposiciones en mente.
El resultado de la fase de diseño de información puede ser un diagrama (a menudo
llamado mapa de sitio) que revela la “forma” global del sitio.
Las páginas en diagramas normalmente se representan por rectángulos; las flechas
indican vínculos entre páginas o secciones del sitio.
64
El mapa del sitio proporciona a los diseñadores una idea de la escala del sitio y como
se relacionan las secciones y ayudas en el diseño de navegación.
Fig. 2.6.- Mapa general del sitio Ventas en línea
En la figura se muestra el mapa general de un pequeño sitio de ventas en línea que
permite el inicio de sesión a dos tipos de usuarios. Es pequeño comparado con los
diagramas para sitios corporativos, pero demuestra cómo se representan las paginas y
las conexiones entre paginas.
No hay nada mejor que lápiz 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 rápidamente 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 diseño grafico y apariencia visual
global incluido su esquema de color tipografía y estilo de imagen.
Dibujar
Esta es otra oportunidad para sacar lápices, rotuladores y cuadernos. O quizás se
prefiera trabajar las ideas en alguna herramienta de edición grafica (como
Photoshop). De cualquier forma, es el momento de ser creativo y probar cosas. El
resultado es uno o más 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 diseñadores utilizan una capa que se puede activar y desactiva para
simular el efecto.
Sesión del
Administrador
Página
Principal
Sesión del
Cliente
Datos de
Sesión
Productos
Compras
Datos de
Sesión
Clientes
Facturas
Seleccionar
Producto
Detalle de
Facturas
65
En algunos casos puede ser necesario crear una página principal prototipo en HTML
para mostrar la interactividad y las características animadas.
En la fase de dirección artística es para explorar el aspecto que tendrá el sitio, por lo
que los bocetos gráficos planos son normalmente adecuados.
El proceso de dirección de arte
En la mayoría de los trabajos de desarrollo Web profesionales, el cliente recibe dos o
tres bocetos que muestran su página principal en varios estilos visuales.
En algunos casos, se puede incluir un diseño de segundo o tercer nivel si es
importante mostrar cómo se desarrolla el diseño en varios niveles.
De forma ideal, se debe contar con una lista de elementos que cada página debe
contener, incluidas imágenes obligatorias, elementos de navegación 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 línea
Después de revisar los bocetos, el cliente elige uno, a menudo con una lista de
cambios, solicitando una nueva ronda de diseño hasta que el diseño final esté
aprobado.
66
PRODUCIR UN PROTOTIPO
Una vez que el diseño esta aprobado y el documento están listos, el sitio entra en la
fase de producción se puede realizar por una persona. Es más común en el diseño
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 gráficos
necesarios para el sitio. El departamento de producción codifica el contenido con
HTML y demás 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 según lo esperado. Puede haber también
elementos multimedia como videos o películas flash. Es decir, todas las partes del
sitio se tienen que crear.
En algún momento, todas estas piezas se juntan en un sitio. Este no es necesariamente
otro paso, sino que más bien es un proceso continuo, como en el diseño de software,
el primer prototipo a menudo se denomina la versión “alfa”. Se debería poner
disponible únicamente a las personas dentro del equipo Web para su revisión antes de
presentárselo al cliente. Después de los cambios, la segunda revisión se denomina
“beta”. El cliente debería implicarse en esta fase. En este punto, hay todavía mucho
que hacer antes de que el sitio esté listo para llevarse a la Web. Existen también sitios
ahí afuera, a menudo aplicaciones Web y servicios, que ponen disponibles sus
versiones beta al público 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 estén listos para el público.
Los desarrolladores Web profesionales dedican tiempo y recursos al calendario de
producción para realizar pruebas. Tanto formalmente como informalmente, los sitios
se deberían probar para funcionalidad básica, rendimiento en diferentes entornos de
navegación 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. También 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 público.
Comprobación básica de calidad Como mínimo, todos los sitios se deberían comprobar para asegurar de que
funcionan. En el negocio del diseño Web, comprobar un sitio en busca de
funcionalidad básica es parte de lo que se denomina la fase de control de calidad de la
producción.
Las siguientes preguntas abordan algunos de los requerimientos mínimos antes de
publicar un sitio en la Web.
67
¿Está todo el contenido?: asegúrese de que no falta ningún contenido.
¿Existen errores tipográficos o errores gramaticales?: la importancia de revisar
un texto a veces se pasa por alto, pero los errores en la copia pueden dañar
seriamente la credibilidad percibida del sitio.
¿Funcionan todos los vínculos?: es fácil dejar vínculos sin vincular durante el
proceso de producción. También es posible que algunos archivos se hayan
movido de sitio y que los vínculos no estén actualizados. Antes de salir a la
Web, se debe comprobar que todos los vínculos en las páginas son correctos.
¿Se muestran todas las imágenes?: Confirmar que todos los archivos gráficos
están en el directorio adecuado y que la ruta de acceso correcta se utiliza en
los elementos para evitar que falten imágenes.
¿Funcionan adecuadamente todos los scripts y aplicaciones?: Ejecutar las
paginas en algunos escenarios típicos de usuario (completando formularios,
comprando un producto, o cualquier otra interacción que tenga sentido para el
sitio) para asegurarse de que todo funciona como debería.
Prueba del entorno de navegación El sitio se verá en un amplio rango de entornos de navegación que impactara en la
forma que tiene y sus funciones. Otra parte de la comprobación de calidad es
comprobar las páginas 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á ningún problema cuando se pruebe de acuerdo a los
siguientes criterios.
¿Qué aspecto tiene la página 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 diseño de página, es necesario que se vea
en tantos navegadores como sea posible
¿Cómo 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 más de una
configuración de navegador/plataforma.
¿Qué les pasa a las paginas cuando la ventana del navegador se hace muy
grande o muy pequeña?: ¿Qué pasa si el texto se amplía mucho o se reduce
mucho? ¿Puede el sitio soportar una cierta cantidad de ventanas y tamaño de
texto? ¿Se sale el contenido de la pantalla? ¿Se divide la página?
¿Se puede utilizar el sitio en un navegador de solo texto?: ¿Qué verán los
usuarios si acceden a su página con un teléfono móvil o quipo similar? Las
páginas deberían estar accesibles en todos los dispositivos de navegación.
68
Merece la pena ver el sitio bajo condiciones mínimas para ver si puede
realizar alguna modificación para mejorar la experiencia.
¿Es el sitio útil con los gráficos desactivados?: Algunos usuarios con
conexiones más lentas pueden navegar por la Web con gráficos desactivados
en el navegador para agilizar la visualización 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?: Sería
estupendo si el usuario tuviera los plugins necesarios para ver la multimedia
como las películas 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 conexión de modem por línea telefónica?:
existen todavía una importante cantidad de usuarios que acceden a la Web con
conexiones lentas. ¿Hay algo que puede hacer para que sus páginas se carguen
rápidamente?
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
información o completar tareas. Las pruebas de usuario se llevan a cabo pronto en el
proceso de desarrollo para que el diseño del sitio se pueda ajustar antes de que
empiece la producción seria. No es raro realizar pruebas adicionales de usabilidad en
intervalos regulares durante el proceso de producción e incluso después de que se
haya lanzado el sitio, para que el sitio se pueda modificar para atender mejor las
necesidades de los visitantes.
Existen compañías que se puede contratar para que realicen pruebas controladas, pero
el precio normalmente es elevado, siendo una opción 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, compañeros 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 información 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
videocámaras a mejor precio”. Un observador toma notas de cómo se completa la
tarea, al igual que lo vínculos que sigue el usuario en el proceso de completar la tarea.
Algunas preguntas que le gustaría contestar por medio de las pruebas de usuarios son:
69
¿Pueden los usuarios decir a primera vista de que se trata un sitio?
¿Existen obstáculos en la forma de alcanzar los objetivos? ¿Pueden encontrar
fácilmente información crítica o realizar una compra?
¿Disfrutan las personas utilizando el sitio?
¿Existe una tarea determinada o característica en el sitio al que pare que
tropiezan múltiples 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 páginas funcionan adecuadamente bajo la
configuración del servidor final. Esto puede parecer trabajo adicional, pero esto es la
reputación del negocio o la del cliente la que va en el éxito del sitio Web, por lo que
prestar atención a los detalles es esencial.
MANTENER EL SITIO Un sitio Web nunca está del todo terminado. De hecho la posibilidad de realizar
actualización y mantener el contenido actualizado es una de las ventajas del medio
Web. Es importante tener una estrategia para lo que ocurriría con el sitio después de
su lanzamiento inicial.
Aunque el mantenimiento es un proceso continuo que ocurre después de que el sitio
haya sido creado inicialmente, las decisiones relacionadas con el mantenimiento se
deberían tomar pronto en el proceso de desarrollo. Por ejemplo, se debería dejar claro
quién será el responsable del mantenimiento del sitio, también decidir que partes del
sitio se actualizaran y con qué frecuencia. La actualización afectara a la forma en que
se organice la información y diseño del sitio.
También se debería 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 diseñados para estar en funcionamiento un tiempo requerirán normalmente
un rediseño después de unos años 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 dinámicos. Se
indicará quién puede estar interesado en la información y como podrían obtenerla, los
principios implicados en la creación de una política para evitar este tipo de
problemas y algunas tecnologías disponibles para salvaguardad la seguridad de un
sitio Web incluida la criptografía, la autentificación y el rastreo.
70
Entre los aspectos de seguridad están:
Importancia de la información
Amenazas contra seguridad
Equilibrio entre usabilidad, rendimiento, costes y seguridad
Crear una política de seguridad
Principios de autentificación
Fundamentos de la criptografía
Criptografía de la clave publica
Firmas digitales
Certificados digitales
Servidores Web seguros
Auditorias y registros
Cortafuegos
Copia de seguridad de datos
Seguridad física
IMPORTANCIA DE LA INFORMACIÓN
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 debería aplicarse el nivel más alto
seguridad a todos los sitios, pero la protección 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 información.
El valor de la información almacenada en el equipo de un usuario que lo utilice para
divertirse, el de una empresa, el de un banco y el de una organización militar es
diferente, al igual que varían los esfuerzos que invertirá un atacante para obtener
acceso a dicha información. 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 dispondrán de tiempo
limitado para profundizar en el tema de la seguridad de sus sistemas o en aumentarla.
Como la información que almacenaran en sus equipos es poco probable que interese a
otros usuarios, los ataques serán poco frecuentes y el esfuerzo invertido en ellos será
limitado. Sin embargo, todos los usuarios de equipos con conexión a la red deberían
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 aplicación de todas las precauciones posibles.
71
AMENAZAS CONTRA LA SEGURIDAD.
Las amenazas variaran en función del tipo de sitio Web pero se pueden citar las
siguientes:
Exposición de datos confidenciales
Perdida o destrucción de datos
Modificar datos
Denegación de servicio
Errores en el software
Repudio
Exposición de datos confidenciales
La información almacenada en los equipos o la transmitida de un equipo a otro,
pueden ser confidenciales. Podrían tratarse de información destinada únicamente a
determinadas personas, como listas de precios de mayoristas, información
suministrada por un cliente, como su contraseña, datos de contacto o el número de
una tarjeta de crédito.
Los servidores Web no son el lugar más aconsejable en el que se deba guardar
información secreta. Si se almacenan los datos sobre nomina o el plan para la
dominación del mundo en una computadora, no se debería utilizar el mismo que el
utilizado como servidor Web. Los servidores Web son equipos diseñados para su
acceso público por lo que solo deberían contener información que se ofrezca
públicamente o que se acabe de recoger del público. Para reducir el riesgo de la
exposición de datos, se debe limitar los métodos de acceso a la información y los
usuarios que disponen de dicho acceso, lo cual implica desarrollar las labores de
diseño teniendo presente la seguridad, configurar el servidor y el software de manera
correcta, programar con atención, realizar pruebas exhaustivas, eliminar los servicios
innecesarios de servidor Web y exigir autentificación.
Se deben Suprimir los servicios innecesarios de un servidor Web para reducir el
número de puntos débiles 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 debería eliminar.
La autenticación implica solicitar a los usuarios que demuestren su identidad. Cuando
un sistema sabe quien realiza la petición, puede decidir si dicha persona dispone de
acceso. Existen varios métodos de autenticación de los cuales solo se utilizan dos de
forma generalizada: las contraseñas y las firmas digitales. Se analizaran más adelante.
Los datos también corren el riesgo de exposición en sus trayectos por la red. Las
redes TCP/IP incorporan una gran cantidad de funciones que han contribuido a
convertirlas en el estándar de facto para la conexión 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 reenvían de equipo en equipo hasta que alcanza su destino.
72
Por lo tanto, los datos pasan a través 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 tránsito.
Fig. 2.8.- Rutas por donde pueden viajar los mensajes
Los datos enviados a través 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 país, podrían atravesar una decena de equipos diferentes. Si
fueran destinados a un equipo situado fuera del país, el número de intermediarios
podría supera los veinte. Si una organización es de gran tamaño y consta de una red
compleja, los datos podrían recorrer hasta cinco equipos antes de abandonar el
edificio. Para proteger la información confidencial, se pueden cifrar los datos antes de
enviarlos a través 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 términos 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 número de visitantes por segundo al que
puede dar servicio el equipo se reduce drásticamente, debido al tiempo que requiere
este proceso.
Pérdida o destrucción de la información
La pérdida de datos puede resultar más costosa que su apropiación indebida. Si se
llevan meses construyendo un sitio, recogiendo información sobre usuarios y pedidos,
si no se ha realizado ninguna copia de seguridad de esos datos, se verán obligados a
volver a escribir el sitio Web y a comenzar desde cero.
73
Un pirata informático podría colarse en el sistema y formatear el disco duro. También
podría 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 informáticos. Reducir al mínimo los empleados
con acceso al equipo. Contratar únicamente personal competente y atento. Comprar
discos duros de calidad.
Independientemente del causante de las pérdidas de datos, solo hay una forma de
protección real: las copias de seguridad. La realización de copias de seguridad es una
función vital. Asegúrese de volcar sus datos de manera periódica 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 catástrofe, el almacenamiento
de una copia de seguridad fuera de ellos es una medida de seguridad barata y eficaz.
Modificar datos
Aunque la pérdida de datos puede causar muchos daños, su modificación puede
resultar aun peor. La eliminación completa de los datos no tardaría mucho tiempo en
detectarse sin embargo detectar una modificación de datos requeriría de mucho más.
Entre las formas de modificación se incluyen cambios en los archivos de datos
ejecutables. La intención de un pirata informático puede ser modificar el aspecto de la
Web u obtener beneficios fraudulentos. Mediante la sustitución de archivos
ejecutables con versiones saboteadas, un pirata informático que haya logrado entrar
una vez en el sistema podría crear una puerta trasera secreta para futuras visitas.
Se puede proteger los datos contra su modificación al viajar por la red mediante una
firma. Esta técnica no impide la modificación 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 visualización no autorizada,
resultaran muy difíciles de modificar durante el trayecto sin su detección.
La protección de los archivos almacenados en un servidor frente a su modificación
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 aplicación 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 difícil. Si se descubre que alguien ha
penetrado en el sistema de seguridad, ¿Cómo se puede saber si se han modificado
archivos importantes? Algunos archivos, como los archivos datos que se almacenan
en una base de datos, están ideados para cambiar con el paso del tiempo. Sin
embargo, la intención de otros es permanecer invariables desde su instalación a
menos que se actualicen deliberadamente. La modificación de programas y datos
puede resultar engañosa, y aunque los programas puedan reinstalarse si se sospecha
que han sido modificados, puede que no sepa que versión de los datos esta “intacta”.
Existen aplicaciones que permiten comprobar la integridad de los archivos, como
Tripwire (htt://www.tripwire.com). Esta aplicación registra información sobre
archivos en un estado seguro, probablemente inmediatamente después de la
74
instalación, y permite utilizarla en un momento posterior para verificar si los archivos
han variado.
Negación de servicio
Una de las amenazas más difíciles de evitar es lo que se denominado Negación 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 víctimas se encontraba yahoo!, eBay, Amazon, ETrade y
Buy.com. Estos sitios están acostumbrados a niveles de trafico que solo se puede
concebir en sueños, 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 reputación.
Algunos sitios esperan concentrar sus transacciones en determinadas horas. Algunos
sitios de apuestas en línea 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 envía
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 débiles 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 cuestión de segundos.
Una vez afectados varios equipos, reciben instrucciones para inundar el destino con
tráfico de red.
Protegerse de ataques DoS es una difícil tarea. Si se realiza una búsqueda, 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 tráfico que utiliza determinados protocolos como por ejemplo ICMP. Resulta más
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
métodos de ataque, la única defensa realmente eficaz consiste en controlar el
comportamiento del tráfico normal y contar con una serie de expertos para que
adopten las medidas oportunas en caso de que se produzca alguna situación 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
75
probable que el software incluya errores. Todas las iniciativas comerciales basadas en
procesos informáticos 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, pérdidas financieras y
servicios deficientes. Entre las causad habituales de los errores se pueden citar las
malas especificaciones técnicas, suposiciones erróneas realizadas por los
desarrolladores y pruebas incompletas.
Malas especificaciones técnicas
Cuanto más escasa y ambigua resulte su documentación de diseño, más probables que
el producto final incluya errores. Aunque puede que resulte obvio especificar la
anulación de un pedido si se rechaza la tarjeta de crédito de un cliente. Mientras
menos experiencia tengan los desarrolladores con el tipo de sistemas con el que están
trabajando, más precisas deberían ser las especificaciones técnicas.
Suposiciones erróneas hechas por los desarrolladores
Los diseñadores 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 erróneas. Por ejemplo, un
desarrollador podría asumir que los datos de entrada serán validos, que no incluirán
caracteres inusuales o qué cantidad de caracteres introducidos será inferior a un
tamaño dado. También podría asumir que no tendrán lugar dos acciones simultaneas
que entren en conflicto o que una tarea de procesamiento compleja lleva más tiempo
que una tarea sencilla.
Suposiciones como estas se pueden deslizar por que suelen ser ciertas. Un pirata
informático puede aprovecharse de un desbordamiento de búfer generado por una
suposición hecha por un programador con respecto a la longitud máxima 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 combinación de pruebas y revisiones detallada del
código.
Históricamente, el sistema operativo o las debilidades del nivel de aplicación
exploradas por los piratas informática se relacionan con los desbordamientos de búfer
o con los errores de sincronización.
Pruebas incompletas
Resulta prácticamente 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 parámetros de usuarios disponibles.
Es necesario implementar un plan de pruebas bien diseñado que verifique todas las
funciones del software en un conjunto representativo de equipos. Un conjunto de
pruebas bien planteado debería probar todas las líneas de código del proyecto al
menos una vez. De manera ideal, estas pruebas deberían automatizarse para poder
ejecutarlas en los equipos seleccionados con muy poco esfuerzo.
76
El problema más importante de esta operación 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 además de los desarrolladores originales. Uno de
los objetivos principales de las pruebas es detectar las suposiciones erróneas
realizadas por los desarrolladores. Es probable que una persona no implicada realice
suposiciones diferentes. Además, 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 transacción niega haber tomado parte en ella. En el comercio
electrónico puede tratarse de una persona que realice un pedido a través del sitio Web
y que rehace la autorización para realizar el cargo sobre su tarjeta de crédito, o una
persona que acepte algo procedente del correo electrónico y que después afirme que
alguien falsifico dicho correo.
De manera ideal, las transacciones financieras deberían garantizar la seguridad de que
ninguna de las partes las repudiara. Ninguna parte podría denegar su participación en
una transacción o, para ser más exacto, ambas partes podrían demostrar de manera
terminante las acciones realizadas por la otra parte ante un tercero, como por ejemplo
un tribunal. En la práctica, esto no suele ocurrir. La autenticación ofrece ciertas
ganancias sobre la parte con la que se está tratando. Los certificados digitales de
autenticación emitidos por una organización de confianza brindan una gran fiabilidad.
También deberían poder certificarse los contenidos de los mensajes enviados por
cualquiera de las partes.
Para las transacciones entre las partes con una relación 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 electrónico y un usuario que utilice una tarjeta de
crédito, esta opción no resulta tan práctica.
Las compañías de comercio electrónico deben estar dispuestas a probar su identidad y
a contratar los servicios de una autoridad de certificación como VeriSign
(http://www.verisign.com) o Thawte (http://www.thawte.com) para garantizar la
autenticidad de la compañía. En las pequeñas transacciones, los comerciantes están
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á diseñado para
permitir que numerosos usuarios soliciten servicios desde sus equipos. La mayor
parte de estas peticiones realizan peticiones de páginas Web perfectamente legítimas,
pero al conectar sus equipos a internet también existe la posibilidad de que la gente
realice otros tipos de conexiones.
77
Aunque resulta tentador asumir que es apropiado establecer el nivel de seguridad,
más alto, no suele ser así. Si se desea estar completamente protegido, tendrá que
colocar todos los equipos en una caja fuerte sin conexión 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 también puede reducir el nivel de rendimiento de los
equipos. La ejecución de software para lograr que el sistema resulte más seguro
(como sistemas de encriptación y detección de intrusos, escáneres de virus y
operaciones de registros de usuario) absorbe recursos. Se necesita mucho más
potencial de procesamiento para suministrar una sesión cifrada, como una conexión
SSL a un sitio Web, que una sesión normal. La pérdida de rendimiento se puede
compensar con la adquisición de equipos o hardware más rápido que este
especialmente diseñado para operaciones de encriptación.
El rendimiento, la usabilidad, el coste y la seguridad se pueden considerar como
objetivos contrapuestos. Se deberán examinar los pros y los contras de cada opción y
tomar una decisión que logre un compromiso en función del valor de la información,
del presupuesto, de la cantidad de visitas esperadas y de los obstáculos que considere
que aceptaran los usuarios legítimos.
CREAR UNA POLÍTICA DE SEGURIDAD
Una política de seguridad es un documento que describe
La filosofía general sobre seguridad en una organización
Que se debe proteger: software, hardware y datos
Quien es responsable de la protección de estos elementos
Estándares de seguridad e indicadores para medir el cumplimiento de dichos
estándares
A la hora de desarrollar la política de seguridad se pueden aplicar las mismas reglas
utilizadas para escribir un conjunto de requisitos de software. En esta política no
debería hablarse de implementaciones o soluciones, si no de requisitos de seguridad y
objetivos dentro del entorno. Y no debería actualizarse a menudo.
Se debería crear un documento en el que se establezcan las directrices utilizadas para
medir el cumplimiento de la política de seguridad en un entorno dado. Se pueden
establecer directrices diferentes para las distintas partes de la organización. Sería
como un documento de diseño o un procedimiento manual en el que se recoja que se
está haciendo para garantizar el nivel de seguridad requerido.
PRINCIPIO DE AUTENTICACIÓN
El objetivo de la autenticación es demostrar que alguien es quien dice ser. Existen
muchas formas de suministrar autenticación pero como en el caso de muchas medidas
78
de seguridad, cuanto más seguro son los métodos más problemáticos resultan de
utilizar.
Las técnicas de autenticación incluyen el uso de contraseñas, firmas digitales,
medidas biométricas mediante escáneres de huellas y medidas que implican el uso de
hardware como tarjetas inteligentes. En la Web solo se utilizan dos de manera
extendida: las contraseñas y las firmas digitales.
Las medidas biométricas y la mayor parte de las soluciones de hardware implican el
uso de dispositivos de entrada especiales, lo que limitaría el acceso a aquellos
usuarios autorizados con computadoras equipados. Esta opción podría resultar
aceptable o incluso deseable para obtener acceso a los sistemas internos de una
organización, pero reduce gran parte de las ventajas de permitir el acceso al sistema
en la Web.
Las contraseñas resultan fáciles de implementar, sencillas de utilizar y no requieren el
uso de dispositivos de entrada especiales. Suministran un determinado nivel de
autenticación pero es posible que resulten insuficientes para sistemas de alta
seguridad.
El concepto de una contraseña es sencillo. El usuario y el sistema conocen la
contraseña. Si otro visitante afirma ser un usuario y conoce su contraseña, el sistema
lo aceptará. Este sistema resulta seguro siempre y cuando nadie más sepa o pueda
adivinar la contraseña. Las contraseñas presentan en sí mismas varios puntos débiles
y no suministran autenticación segura.
Muchas contraseñas resultan fáciles de averiguar. Si se permite que los usuarios
seleccionen sus propias contraseñas, un 50% escogerá contraseñas fáciles de
descubrir, como vocablos de un diccionario o el nombre de usuario. Puede obligar a
los usuarios a incluir números o signos de puntuación en sus contraseñas, aunque esta
medida afectara a ala usabilidad.
Otra opción consiste en mostrar a los usuarios como seleccionar mejores contraseñas
pero de todas maneras el 25% de ellos seguirán utilizando contraseñas sencillas de
adivinar. Se pueden implementar políticas de contraseñas que impidan a los usuarios
seleccionar combinaciones fáciles comparando las contraseñas introducidas con un
diccionario de letras en mayúsculas y minúsculas. El peligro de una política de este
tipo es que los usuarios legítimos no logren recordar las contraseñas escogidas. Las
contraseñas difíciles de recordar aumentan la probabilidad de que los usuarios
realicen una acción poco segura como escribirlas en una nota y pegarla en sus
monitores. Es necesario educar a los usuarios para que no escriban sus contraseñas ni
las comuniquen por teléfono a alguien que afirme estar trabando en el sistema.
Las contraseñas solo deberían capturarse electrónicamente. Mediante el uso de
programas para capturar pulsaciones del teclado en una terminal o la información que
circula por la red, los piratas informáticos pueden capturar pares de nombres de
usuarios y contraseñas. Puede limitar las oportunidades de capturar contraseñas
cifrando el tráfico de red.
A pesar de sus defectos potenciales, las contraseñas son una forma sencilla y
relativamente efectiva de autentificar usuarios. Puede que el nivel de anonimato no
79
resulte adecuado para la seguridad nacional, pero son una solución perfecta para
comprobar el estado del pedido de un cliente.
FUNDAMENTOS DE LA ENCRIPTACIÓN
Un algoritmo de encriptación es un proceso matemático que transforma información
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 información (que se trate de texto o de otro tipo de
datos). La información 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 encriptación, que podría ser un programa informático. El
motor devuelve el texto encriptado.
Fig. 2.9.- Encriptación de mensajes
Muchas contraseñas se almacenan utilizando un algoritmo de encriptación de una
sola dirección. Para poder determinar si una contraseña introducida resulta correcta,
no es necesario descifrar la contraseña almacenada. En su lugar, bastara con cifrar la
contraseña introducida y compararla con la versión almacenada, esta es mecanismo
utilizado con la función sha1() de PHP que se verá más adelante en el tercer capítulo
(3.12 Seguridad)
Muchos procesos de encriptación se pueden invertir, aunque no todos. El proceso
inverso al encriptación se conoce como decriptación. En la siguiente figura se
muestra un proceso de encriptación de doble sentido.
Fig. 2.10.- Encriptación simétrica
El proceso de encriptación toma texto sin procesar y lo transforma en texto cifrado
con aspecto aleatorio. El proceso de decriptación toma el texto encriptado y lo
transforma en el texto original.
La criptografía tiene unos 4000 años de antigüedad, pero alcanzo la mayoría 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 años 70 se extendió su uso
y en los años 90 se hizo omnipresente. En los últimos años, la encriptación ha pasado
Texto sin
procesar
Algoritmo de
encriptación
Texto
cifrado
80
de ser un concepto que solo la gente conocía por las películas de espías y de la
segunda guerra mundial a convertirse en algo de lo que se habla en los periódicos y se
utiliza cada vez que se compra algo a través de navegadores Web.
Existen muchos algoritmos de encriptación disponibles. Algunos utilizan una clave
secreta o privada, y otros, utilizan una clave pública y una clave privada distinta.
Encriptación de la clave privada La encriptación 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 podrían ser leídos 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 más utilizado es DES (del ingles Data Ecryptation
Stanar, Estandar de Encriptación de Datos). Fue desarrollado por IBM en los años 70
y fue adoptado como el estándar 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 (paradójicamente, este sistema
es dos veces más seguro que DES; si se necesita un sistema tres veces más seguro, se
puede escribir un programa que implemente algoritmo DES quíntuple). 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 encriptación 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 método de clave pública.
Encriptación de clave pública
La encriptación de clave pública se basa en dos claves, una clave pública y una clave
privada. Como se ilustra en la siguiente figura, la clave pública se utiliza para cifrar
mensajes y la clave privada para descifrarlos.
La ventaja de este sistema es que la clave pública, como su nombre indica, se puede
distribuir públicamente. Todo el mundo al que se le entregue la clave pública 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.- Encriptación de llave pública
81
El algoritmo de clave pública más 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 pública se utiliza para transmitir la clave para un sistema de
clave secreta que se utiliza durante el resto de una comunicación de sesión. Esta
complejidad añadida resulta tolerable por que los sistemas de clave secreta son unas
1000 veces más rápidos que los sistemas de clave pública.
FIRMAS DIGITALES
Las firmas digitales están relacionadas con la criptografía de clave pública, pero
invierten los papeles de las claves públicas 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 técnicas y claves, la
finalidad de uso de la encriptación en este caso es impedir la modificación 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 tamaño, se suele utilizar otro tipo de algoritmo, llamado función hash, para
mejorar la eficacia. La función 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 pequeño y que el algoritmo sea rápido.
Las funciones hash más habituales son MD5 y SHA. Una función hash genera un
mensaje implícito 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 implícito. La forma más habitual de crear una
firma digital consiste en crear un mensaje implícito para todo el mensaje utilizando
una función hash rápida y, a continuación, cifrar únicamente el mensaje implícito
utilizando un algoritmo de clave pública. Seguidamente se puede enviar la firma con
el mensaje a través de cualquier método normal no seguro.
Cuando se recibe un mensaje, se puede realizar su comprobación, la firma se descifra
utilizando la clave pública de remitente. Se genera un valor hash para el mensaje
utilizando el mismo método 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.
82
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,
resultaría incluso mejor disponer de la posibilidad de vincular a dicho usuario o
servidor a una entidad legal real como una persona o compañía.
Un certificado digital combina una clave pública con los detalles de una organización
o individuo en un formato digital. En un certificado, se tiene la clave pública 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 información 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
Certificación” (CA). Las autoridades de certificación expiden certificados digitales a
individuos y compañías sujetas a una serie de comprobaciones de identidad. Las dos
CA más conocida como VeriSign (http://www.verisign.com) y Thawte
(http://www.thawte.com), pero existen otras. VeriSign y thawte pertenecen a la
misma compañía y hay muy poca diferencia entre ambas. Algunas menos conocidas,
como Equifax Secure (http://www.equifaxsecure.com), resultan bastante más baratas.
Las autoridades firman un certificado para acreditar que se ha comprobado la
identidad de una persona o compañía. Tenga en cuenta que el certificado no es una
referencia ni una declaración de solvencia. No garantiza que se está trabajando con
una entidad fiable. Lo único que garantiza es que en caso de que engañen, es probable
que se obtenga una dirección física y una entidad o persona contra la que dirigir la
demanda.
Los certificados suministran una estructura de confianza. Si se confía en la CA, se
puede confiar en aquellas partes en las que confía la CA y a su vez en aquellas partes
en las que confía la parte certificada.
Los certificados digitales se suele utilizar para conferir un aire de respetabilidad a un
sitio Web de comercio electrónico. 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 través de SSL. Apache permite utilizar el sistema operativo UNIX, que
suelen resultar más fiables pero más difíciles 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 instalación de tres
paquetes diferentes: Apache, Mod_SSL y OpenSSL
83
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 certificación.
El proceso exacto para lograrlo varía según la autoridad de certificación, pero por
regla general se deberá demostrar que la empresa está reconocida legalmente, que
consta de una dirección física y que es el titular del nombre de dominio pertinente.
Se necesitara generar una solicitud de firma de certificado. El proceso para lograrlo
varía de un servidor a otro. Las instrucciones se encontrarán en los sitios Web de las
autoridades de certificación. 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 documentación
que prueba la existencia y verificar que el nombre de dominio que se está utilizando
es el mismo que el incluido en la documentación corporativa, se estará en disposición
de firmar un certificado con una autoridad de certificación.
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
erróneos o malintencionados cuando tienen lugar. También se puede utilizar para
84
determinar cómo tuvo lugar un problema o una intrusión si se examina tras observar
problemas. Los archivos de registro presentan dos problemas principales: el tamaño y
la veracidad.
Si se establecen los criterios para detectar y registrar problemas en el nivel de mayor
paranoia, se obtendrán registros gigantescos que resultan muy difíciles de examinar.
Para trabajar con archivos de registro de gran tamaño, se tendrá que recurrir a una
herramienta existente o derivar algunas secuencias de comandos de la política de
seguridad establecida para realizar búsquedas de eventos “interesantes” dentro de los
registros.
El proceso de auditar los registros puede realizarse en tiempo real o de manera
periódica.
Los archivos de registros resultan vulnerables a ataques. Si un intruso dispone de
acceso de usuario raíz o de administrador al sistema, podrá alterar los archivos de
registro para borrar sus huellas.
El administrador del sistema puede realizar auditorías periódicas, pero además, se
podría contratar un servicio de auditoría 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 están diseñados para proteger los equipos de una red del mundo
exterior. Filtran y rechazan el tráfico 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 también 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 términos 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 misión
consiste supervisar todo el tráfico 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, dirección de orígenes, dirección de destino o
puertos. En algunos casos, los paquetes pueden rechazarse simplemente y en otros
pueden desencadenar entradas en el registro o activar alarmas.
85
COPIA DE SEGURIDAD DE LOS DATOS
No se puede subestimar la importancia de las copias de seguridad en ningún plan de
recuperación 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 periódicas de todos los componentes del sitio
Web (páginas estáticas, secuencias de comandos y bases de datos). La frecuencia
depende del dinamismo del sitio. Si se trata de un sitio completamente estático,
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 línea. La mayor parte de los sitios con un tamaño 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 réplica. De esta
forma, queda cubierta la probabilidad de que ocurra un fallo en el disco duro. sin
embargo, se debe considerar que ocurriría en una situación que afecta a la matriz, al
equipo a al edificio entero.
La frecuencia con la que se deben realizarlas está en función con el volumen de
actualización. Estas copias de seguridad deberían 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 debería descuidar la seguridad
física de un sistema. Se debe prever un sistema de aire acondicionado y sistemas de
protección contra el fuego, personas (torpes o criminales), fallos en el suministro
eléctrico y fallos en la red.
El sistema debería estar protegido bajo llave en un lugar seguro. El lugar concreto
dependerá de cada caso pero puede ser una habitación, una jaula o un armario. Solo
se debería conceder permiso de acceso a esta habitación al personal pertinente. El
personal no autorizado podría, 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 daño a los componentes electrónicos
como el fuego. Los sistemas para la extinción de incendios deben utilizar alternativas
poco dañinas como el gas argón o el dióxido de carbono.
En determinados lugares, se producen breves cortes de energía eléctrica de manera
habitual. En sitios con climatologías extremas o cables enterrados se suelen producir
cortes de larga duración. Si el funcionamiento continuo del sistema es un factor
importante, se debería utilizar un sistema de alimentación ininterrumpible. Los cortes
de suministro de larga duración requieren un generador que alimente el sistema de
refrigeración y los equipos.
Al igual que los fallos de suministro eléctrico, 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.
86
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 aplicación Web?
4. ¿Qué son los lenguajes de programación del lado del cliente?
5. ¿Entre que etiquetas se escribe el código de Javascript?
6. ¿Cuál es la principal ventaja de los Applets de java?
7. ¿Cuál es la desventaja de Visual Basic Script?
8. ¿Flash es un lenguaje, si, no, porque?
9. ¿Qué son los lenguajes de programación del lado del servidor?
10. ¿Cuáles son los lenguajes del lado del servidor más utilizados?
11. ¿Cuáles son las razones por los que los CGI se encuentran desfasados?
12. El lenguaje PERT ¿se parece más 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 código de PHP?
15. Menciones tres ventajas de PHP
16. ¿A quién se parece más JSP, a ASP.NET o a PHP?, ¿Por qué?
17. ¿Cuáles 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. ¿Cuáles son los pasos básicos para el desarrollo de una aplicación Web?
21. ¿Cómo se empieza un sitio Web?
22. ¿En qué etapa del desarrollo Web se realiza el modelo entidad – relación?
23. ¿Para qué sirve el mapa de un sitio Web?
24. ¿Cuál es la finalidad de presentar las propuestas de bocetos del sitio al cliente?
25. ¿En qué consiste la fase de producción del prototipo?
26. ¿En qué consiste la prueba de funcionalidad básica del sitio?
27. ¿En qué consisten las pruebas del entorno de navegación?
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 debería aplicar el nivel más alto de seguridad a un sitio Web? Si, no.
¿Porque?
33. ¿Cómo evitar la exposición de datos confidenciales de un sitio Web?
34. ¿Es más costosa la exposición de datos confidenciales, la perdida de datos o la
modificación de los mismos?, ¿Por qué?
35. ¿Cómo se puede verificar la modificación de datos?
36. ¿Cómo protegerse de la denegación de servicio?
37. ¿Qué comportamientos pueden causar los errores en el software?
38. Explique que es el repudio
39. ¿Cuáles 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?
87
41. ¿Qué describe una política de seguridad?
42. ¿Qué es la autenticación?
43. ¿Cuáles son las técnicas de autenticación?
44. ¿Qué es la encriptación?
45. ¿Explique cómo funciona la función sha1()?
46. ¿En qué consiste la encriptación de clave privada?
47. ¿En qué consiste la encriptación de clave pública?
48. ¿Cuál es la función de una Autoridad de Certificación?
49. ¿Cómo 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. ¿Cuáles son los elementos que se consideran en la seguridad física de un sistema?
88
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 metodología para el desarrollo de aplicaciones Web, seleccionar un
caso de estudio y presentar:
Una descripción general de la aplicación
El modelo Entidad – Relación
Tablas Normalizadas
Descripción de tablas y diccionario de datos
Un mapa del sitio propuesto
Tres propuestas de bocetos de la página principal del sitio.
89
3
Programación del lado del servidor.
90
3.1 PROCESAMIENTO DEL LADO DEL SERVIDOR.
En este capítulo se aborda la programación del lado del servidor, es decir el lenguaje
de programación que se procesan solo en el servidor. Los lenguajes del lado del
servidor son invisibles para los clientes. Las páginas que utilicen scripts de este tipo
contienen el código entre etiquetas parecidas a las de HTML, pero éstas desaparecen
cuando el cliente recibe la página.
Los pasos que sigue el navegador son:
Solicita al servidor una página Web a través de Internet.
El servidor comprueba si la página solicitada contiene script del lado del
servidor (PHP, ASP, JSP, etc.)
Ejecuta los posibles script y añade el resultado final a la página Web
resultante.
El navegador recibe estos datos, interpreta la página Web enviada y la muestra
en la pantalla de acuerdo con la resolución del monitor, las preferencias del
usuario y algún otro factor.
Los lenguajes del lado del servidor necesitan un motor (un programa) que interprete
el código según el lenguaje de programación 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 código de PHP sin acceso a una base de datos se
muestra a continuación:
91
El siguiente listado es el archivo original que reside en el servidor Web, contiene
además de código HTML código de PHP, mismo se encuentra entre las etiquetas
<?php … ?>, todo los que se encuentre entre estas etiquetas es considerado como
código de PHP; la primera línea hallada entre estas etiquetas defines una variable y la
segunda línea 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>
Después de que el motor de PHP hace su trabajo y el servidor Web responde al
cliente, el cliente recibirá el siguiente código.
<!-- 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 código recibido por el cliente ya no contiene
ninguna instrucción de PHP, sino más bien código HTML solamente, de esta forma
es como se oculta el código 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 código 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
páginas que contienen código de lenguajes por el lado del cliente solamente, como
son HTML y Java Script.
Así como en este caso se usa código de PHP, también se puede usar código de un
lenguaje distinto como son JSP, ASP.NET; de ser así cambiarían las etiquetas que
definen el lenguaje en la pagina, así como en el servidor Web se tendría que instalar
el interprete correspondiente.
En el presente libro se abordará con detalle la sintaxis y demás aspectos relacionados
con el lenguaje PHP, como lenguaje por el lado del servidor, pues es un lenguaje muy
92
poderoso, capaz de interactuar con cualquier manejador de base de datos y además
gratuito.
3.2 CONCEPTOS BÁSICOS 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 instalación del servidor web, la habilitación 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 programación,
pero además 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 podría 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 podría optar por la misma herramienta de desarrollo
de aplicaciones Web o escoger uno distinto, según 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 APLICACIÓN
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 encontrarán las últimas versiones o también 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 versión más
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 instalación y configuración es mucho más fácil y rápido, mientras que
usar por separado cada uno de los servicios requiere de mayor experiencia, ya que se
deben configurar adecuadamente para que interactúen entre sí.
93
Al usar Wamp Server 2.0 por ejemplo, instala en el equipo los servicios y versiones
indicados en la tabla 3.2
SERVIDOR APLICACIÓN 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
CONFIGURACIÓN DE APACHE
El archivo que contiene la configuración del servidor web se llama “httpd.conf”.
Este archivo contiene un conjunto de parámetros que configuran el servidor cada vez
que inicia, este archivo se puede editar para cambiar algún parámetro desde la barra
de tarea directamente en el icono que identifica al programa “wamp” y después de
hacerlo se tendrían que reiniciar los servicios para que surta efecto.
Las líneas que inicien con el carácter # en el archivo “httpd.conf” son considerados
como comentarios, por lo que no tienen efecto en la configuración del servidor. Por
mencionar alguno de los parámetros 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
index.html index.htm index.html.var
Indica el orden de prioridad a evaluar de
la página de inicio
Listen 80 Indica el número de puerto con el cual
funcionara el servidor Web
LoadModule php5_module
"c:/wamp/php/php5apache2_2.dll"
Carga el modulo de PHP, para ligarlo
con el servidor apache
Tabla 3.4.- Parámetros de configuración de Apache
CONFIGURACIÓN DE PHP. PHP también se puede configurar editando su archivo de configuración llamado
“php.ini” funciona de una forma similar al archivo de configuración de apache, solo
que aquí las líneas con punto y como se consideran como comentarios. Algunos de
los parámetros contenidos en este archivo se muestran en la tabla 3.5
94
PARAMETRO SIGNIFICADO
register_globals = Off Habilita o deshabilita el manejo de
variables globales en el código de
php
extension_dir = "c:/wamp/php/ext/" Especifica el directorio de los
archivos de librería dinámica usados
por php
extension=php_mysql.dll Agrega la librería 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 código de
php
session.auto_start=1 Habilita el manejo de sesiones
automáticamente
session.cache_expire = 180 Define la duración de las páginas de
session en cache, en minutos.
Tabla 3.5.- Parámetros de configuración de PHP
CONFIGURACIÓN DE MySQL.
MySQL también se puede configurar editando su archivo de configuración llamado
“my.ini” funciona de una forma similar al archivo de configuración de apache.
Algunos de los parámetros contenidos en este archivo se muestran en la tabla 3.6
PARAMETRO SIGNIFICADO
Basedir =
c:/wamp/bin/mysql/mysql5.0.51b
Especifica la ruta donde ubicará el
servidor MySQL
Datadir =
c:/wamp/bin/mysql/mysql5.0.51b/data
Especifica la ruta donde ubicará las
bases de datos creados en MySQL
Port 3306 Indica el número de puerto con el cual
funcionara el servidor de base de datos
Tabla 3.6.- Parámetros de configuración 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 algún ajuste en los archivos de configuración para crear una
personalización 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 dirección IP del
equipo, en cualquiera de los casos lo que básicamente se hace es la prueba de
retrociclo Web, este consiste en usar la misma computadora para mantener activos
95
tanto el cliente (Navegador) como el servidor (Apache) y además 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 están activos es momento de empezar a programar,
pero antes se debe tener conocimientos básicos del lenguaje de programación del lado
del servidor, que a continuación se aborda en PHP.
3.3 OPERADORES. Los operadores son símbolos que se pueden utilizar para manipular valores y
variables realizando una operación sobre ellos. Se pueden agrupar como:
De asignación.
Unario.
Aritméticos.
De comparación.
Lógicos.
Ternario.
Bit a bit.
Incremento/Decremento.
Supresión de errores.
El más básico es el símbolo de asignación “=”, utilizado para dar valores a las
variables que usamos en el código
96
<?php $variable = 50.10; $variable2 = "alumnos"; ?>
Las variables que están a la izquierda del operador toman el valor que se encuentra en
la expresión de la derecha
Se puede apreciar que las variables no requieren de la definición 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.
También es importante no confundir el operador de asignación “=”, con el operador
de comparación “= =”
OPERADOR UNARIO
El signo menos (-) se utiliza delante de un número o variable numérica. Este operador
tiene la propiedad de hacer a los números, 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 línea se hace con la doble diagonal “//” y si se trata de
un comentario de bloque entre los signos /* --------*/
OPERADORES ARITMÉTICOS
Este tipo de operadores forman parte de la aritmética básica. Resultará familiar porque
son símbolos muy utilizados en el aprendizaje de las matemáticas.
Ejemplo Nombre
$a + $b Suma
$a - $b Resta
Sa * $b Multiplicación
$a / $b División
$a % $b Módulo
Tabla 3.7. Operadores Aritméticos
OPERADORES DE COMPARACIÓN Los operadores de comparación permiten comparar dos variables o expresiones,
usados frecuentemente en sentencias de control como el if else.
97
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 comparación
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, mostrándose así el primer mensaje.
OPERADORES LÓGICOS Los operadores lógicos permiten unir varias comparaciones entre sí, cuyo resultado
dependerá de la tabla de verdad del operador lógico que se aplique.
Ejemplo Nombre
$a and $b Y
$a or $b O
$a xor $b O exclusiva
! $a Negación
$a && $b Y
$a || $b O
Tabla 3.9. Operadores de lógicos
Ejemplo:
<?php $a=5; $b=4; $c=3; if ($a>$b)&&( ($a>$c) Echo ‛$a es mayor que $b y $c ‛; ?>
La condición será verdadera solamente si las dos condiciones son verdaderas.
98
OPERADOR TERNARIO
Los operadores que se han visto hasta ahora son capaces de manejar un operando
(Unarios) o dos operandos (binarios). El operador ternario, o de comparación, evalúa
un operando y, dependiendo de si es falso o verdadero, evalúa el segundo operando o
el tercero.
La expresión que se quiere evaluar se escribe delante de un símbolo (?), después la
expresión que tiene que ejecutarse si la evaluación anterior es true, seguida del
símbolo (:) con la expresión 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 código anterior realizaría lo mismo que el ejemplo de operadores lógicos.
OPERADORES BIT A BIT Los operadores de bit utilizan las variables a bajo nivel, es decir a nivel de lógica
binaria, tal y como se almacenan en memoria física y comparan bit a bit los valores.
Ejemplo Nombre Resultado
$a & $b Y Se activan los bits que están activos tanto en $a como $b.
$a | $b O Se activan los bits que están activos en $a o que lo están en $b.
$a ^ $b Xor ("o exclusiva") Se activan los bits que están activos en $a o en $b pero no en
ambos a la vez.
~ $a No Se activan los bits que no están activos en $a.
$a << $b Desplazamiento a la
izquierda
Desplaza los bits de $a, $b posiciones hacia la izquierda (por
aritmética binaria, cada posición desplazada equivale a multiplicar
por dos el valor de $a)
$a >> $b Desplazamiento a la
derecha
Desplaza los bits de $a, $b posiciones hacia la derecha (por
aritmética binaria, cada posición 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 (símbolo &) compara bit a bit las variables $a y $b. Si los bits
de una misma posición son true (tienen el valor 1), el bit resultado es 1. En este caso,
sólo 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)
99
OPERADORES DE INCREMENTO/DECREMENTO
PHP soporta los operadores de predecremento y post incremento al estilo de C.
Ejemplo Nombre Resultado
++$a Preincremento Incrementa $a en uno y después devuelve $a.
$a++ Postincremento Devuelve $a y después incrementa $a en uno.
--$a Predecremento Decrementa $a en uno y después devuelve $a.
$a-- Postdecremento Devuelve $a y después decrementa $a en uno.
Tabla 3.11. Operadores Incremento y decremento
Ejemplos: <?php echo "<h3>Preincremento</h3>"; $a = 5; echo "Debería ser 6: " . ++$a . "<br>\n"; echo "Debería ser 6: " . $a . "<br>\n"; echo "<h3>Postincremento</h3>"; $a = 5; echo "Debería ser 5: " . $a++ . "<br>\n"; echo "Debería ser 6: " . $a . "<br>\n"; echo "<h3>Predecremento</h3>"; $a = 5; echo "Debería ser 4: " . --$a . "<br>\n"; echo "Debería ser 4: " . $a . "<br>\n"; echo "<h3>Postdecremento</h3>"; $a = 5; echo "Debería ser 5: " . $a--. "<br>\n"; echo "Debería ser 4: " . $a . "<br>\n"; ?>
OPERADOR DE SUPRESIÓN DE ERRORES
La mayoría 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 ejecución del programa. El operador (@), colocado
delante de una función, 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 ejecutándose"); ?>
PRECEDENCIA DE OPERADORES
La precedencia de operadores especifica cómo 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 expresión 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 multiplicación tiene mayor precedencia
que la suma, en el segundo caso al existir los paréntesis primero se lleva a cabo la
suma de 4+3 y luego se multiplica, debido precisamente a que ahora los paréntesis
tienen mayor precedencia que la multiplicación. En la tabla 3.12 se muestra la de
precedencia de operadores-
Operador Operación Asociación
() Paréntesis de preferencia N/A
100
new Instancia de objeto N/A
[] array Derecha
! NO lógico Derecha
Signo menos Derecha
++ - Incremento, decremento Derecha
@ Supresión de errores Derecha
* / % Multiplicación, división y módulo Izquierda
+ . Suma, resta, concatenación 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 lógico Izquierda
|| O lógico Izquierda
?: condicional Derecha
= += .= *= /= Asignación Derecha
= %= &= != -= <<= >>= and Y lógico Izquierda
xor O exclusivo lógico Izquierda
or O lógico Izquierda
Tabla 3.12. Precedencia de Operadores
3.4 SENTENCIAS.
Una sentencia puede ser una asignación, una llamada a función, un bucle, una
sentencia condicional e incluso una sentencia que no haga nada (una sentencia vacía).
Las sentencias normalmente acaban con punto y coma. Además, las sentencias se
pueden agrupar en grupos de sentencias encapsulando un grupo de sentencias con
llaves. Un grupo de sentencias es también una sentencia.
Para controlar que secciones de código se ejecutan y cuáles no, se pueden utilizar:
if
else
elseif
switch
Para manejar ciclos o bucles:
101
while
do..while
for
foreach
if
Esta instrucción ejecuta una línea o un bloque de código dependiendo de si se cumple
o no una o varias condiciones. La sintaxis básica para ejecutar una sola línea de
código es la siguiente:
if(expresion) codigo php
Si se van ejecutar varias líneas se requieren las llaves para delimitar el código: if(expresion) { código php... código php... }
Ejemplo: <?php $registros=0; if (!$registros) //Si no $rgistros { echo "ERROR AL GUARDAR LOS DATOS"; exit(); } ?>
El ejemplo anterior se usa típicamente después 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 expresión si no $registro retornará
un valor true y el mensaje se mostrará. La función exit() se usa para producir la
terminación abrupta de una página.
else
Si no se cumple una condición del if, se puede utilizar esta instrucción para ejecutar
una línea o un bloque de código. La sintaxis es la siguiente:
if(expresion) { código php } else { código php }
102
Ejemplo: <?php $promocion=10; if($promocion) $pro="SI"; else $pro="NO"; echo $pro; ?>
Al ser evaluado la variable $promocion por la condición if se obtiene un valor
verdadero, asignándose a $pro la cadena ‚SI‛. Sin embargo el único valor que haría
falsa la condición sería asignar a $promocion=0, ejecutándose por lo tanto el código
hallado después del else
elseif
Aunque se pueden anidar varios if y else, se puede utilizar el elseif para mejorar la
legibilidad del código. La sintaxis básica para ejecutar una sola línea de código es la
siguiente: if(expresion1) código php elseif(epxresion2) código php elseif(epxresionN) código php else código php
Ejemplo: <?php //Determina el número de $opcion $opcion=2; if ($opcion==1) echo"OPCIÓN UGUAL A UNO"; elseif($opcion==2) echo"OPCIÓN UGUAL A DOS"; elseif($opcion==3) echo"OPCIÓN UGUAL A TRES"; else echo"OPCIÓN NO ES UNO, DOS NI TRES"; ?>
Si las tres primeras condiciones no son verdaderas se ejecuta la última sentencia else
103
switch
Cuando se tiene una lista larga de if..elseif..else el código se puede volver difícil
de mantener y leer, switch puede ser una mejor opción. switch(expresion) { case 0: código php... break; case 1: código php... break; case N: código php... break; default: código php... }
break sirve para detener la ejecución del código una vez que se cumple la condición.
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 número de $opcion $opcion=2; switch($opcion) { case 1: echo"OPCIÓN UGUAL A UNO"; break; case 2: echo"OPCIÓN UGUAL A DOS"; break; case 3: echo"OPCIÓN UGUAL A TRES"; break; default: echo"OPCIÓN NO ES UNO, DOS NI TRES"; } ?>
while
Esta sentencia ejecuta una línea o un bloque de código repetidamente hasta que se
cumple una condición. La sintaxis es la siguiente:
while(expresion) { código php }
104
Ejemplo:
Muestra una tabla con 2 columnas, una contiene los números del 1 al 10 y la otra la
multiplicación de ese número 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 iteración 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 código de
php, marcado en negrita, la iteración se llevará a cabo mientras la condición sea
verdadera $x<10, por lo que se actúan 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 función echo de php para
imprimir cada fila de una tabla del html.
do...while
A diferencia del while, esta sentencia verifica la condición al final del ciclo en lugar
de al inicio.
do { código php } while (expresión);
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>
105
<td>No.</td> <td><p>Mult. por 5</p> </td> </tr> <?php $x=1; do { $r=$x*5; //Multiplica por 5 en cada iteración echo"<tr> <td>$x</td> <td>$r</td> </tr>"; $x++; } while($x<=10) ?> </table> </body> </html>
En un while se puede "brincar" la ejecución de cierto bloque de código con continue,
por ejemplo:
while(expresion) { código php if(expresion) { continue; } código php }
Ejemplo:
Imprime los números del 0 al 40 que sean múltiplos 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
106
También se puede detener la ejecución del ciclo en cualquier momento con break,
ejemplo. while(expresion) { código php if(expresion) { break; } código php }
Ejemplo:
Genera números aleatorios en el intervalo de 1 a 20 en un ciclo infinito, se interrumpe
cuando se genera el número 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 números aleatorios hallados en el intervalo de 1 a 20,
hasta que se interrumpe con la generación del número 5.
for
Se utiliza frecuentemente para ejecutar un bloque de código un número definido de
veces, los criterios que utiliza para lo anterior comúnmente son variables numéricas.
La sintaxis de este comando es:
for(expresion1; expresion2; expresion3) { código php código php }
expresion1 se ejecuta solo al inicio del ciclo, expresion2 se evalúa en cada ciclo y si
evalúa a true se ejecuta el código. expresion3 se ejecuta en cada ciclo.
107
Ejemplo:
En un formulario, llena una lista/menú de números 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 también el continue y break.
foreach
Se utiliza para obtener los elementos de un arreglo, para su mejor comprensión se
detallará en el siguiente tema.
3.5 ARREGLOS. Un arreglo es una colección de valores con un único nombre. Para acceder a los
distintos valores de la variable se utiliza un índice numérico o alfanumérico.
En PHP los arreglos no tienen que definirse de una forma concreta, sino que pueden
tomar distintos tipos de valores: enteros, caracteres, objetos, etcétera. En PHP no se
necesita saber de antemano el número de valores máximo que podrá tomar el
arreglo., ya que se podrá ir creando valores nuevos a medida que se vayan
necesitando, además el índice para acceder a los valores distintos puede ser numérico
o alfanumérico.
<?php $arreglo[l] = 15; $arreglo[2] = "Hola amigos"; $arreglo["asociativo"] = "Arreglo asociativo"; ?>
Formas de crear un arreglo:
Por asignación directa:
Cuando se hace la asignación 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:
108
$arreglo[] = 15; //Empieza con el indice 0 $arreglo[] = 10; //Indice 1
Uso de la función 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 función for para mostrar el contenido del arreglo se puede usar la
sentencia foreach que es más 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 código con foreach es mucho más compacto y claro, además de que no se requiere
especificar el número de iteraciones, este finaliza al terminar los elementos hallados
en el arreglo.
Usando la función array(), se pueden definir índices numéricos, alfanuméricos o una
combinación 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 además de acceder al valor del arreglo, también 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 tendría el número de
control y el nombre de un personal, se podrían 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>";
Mostraría: 272 GASTON DEHESA VALENCIA 285 JUAN TOLEDO GARCIA 301 MARIA CARRASCO FUENTES
109
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 definición 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 función range() devuelve un array con valores numéricos, que van
desde un número de inicio hasta un número 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 función range(), existen otras que crean o manipulan arreglos.
3.6 FUNCIONES Y LIBRERÍAS. Como muchos otros lenguajes PHP soporta la creación de funciones definidas por el
usuario, la sintaxis básica es la siguiente: <?php function nombre($argumento1, ..., $argumentoN) { //codigo php... return $valor-que-regresa; } ?>
Si se requiere se le puede enviar parámetros a la función, si una función 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)
110
{ echo $numero1 * $numero2; // 100 } function multiplica3() { echo 100 * 100; // 10000 } ?>
ARGUMENTOS POR VALOR Por default, los argumentos que utiliza una función los recibe por valor, esto es,
recibe una copia del valor original. De esta manera si la función 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 función 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 carácter & 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
111
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 función
automáticamente 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 función en una página PHP se consideran
globales, esto es, se pueden referenciar en cualquier parte del código. Sin embargo, si
una función utiliza una variable que está declarada también fuera de la función,
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; } ?>
112
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 línea marcada
en negrita del primer listado para llamar a cada una de las dos últimas funciones. Se
podrá observar que al llamar a la función multiplica2() ó multiplica3(), el resultado
será el mismo, en estos casos, en el interior de estas funciones se puede modificar a
las variables globales.
VARIABLES ESTÁTICAS Otro concepto que maneja PHP es de las variables estáticas, las cuales se manejan
solo dentro de una función. Las variables normales pierden su valor una vez que se
termina de ejecutar la función, las variables estáticas conservan su valor.
Para utilizar una variable estática 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 función incrementa(), $valor2 se incrementa en
uno y conserva su valor al salir de la función. Por otra parte, $variable1 se
incrementa en uno y pierde su valor al salir de la función, por lo que siempre tiene un
valor de 1.
113
Además de las funciones creados por el usuario para su uso personal, PHP cuenta con
una gran cantidad de funciones predefinidas o de librerías, mismas que se pueden
clasificar de la siguiente manera:
Manejo de cadenas
Matemáticas
Fecha y Hora
Archivo
Directorio
Manipulación de MySQL
Manipulación de Microsoft SQL Server
Manipulación de una base de datos con ODBC
Manejo de Sesiones
En las siguientes tablas se muestran algunas funciones de cada clasificación,
aclarando que existen muchos más.
Funciones de manejo de cadenas
FUNCION DESCRIPCION Ejemplo trim(cad) Elimina espacios en los extremos de una
cadena.
$correo=" [email protected] "; $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
minúsculas
$nom="JUAN PEREZ"; $nom=strtolower($nom);
Strtoupper (cad) convierten todos los caracteres de la cadena a
mayúsculas
$nom=strtoupper($nom);
substr(cad,n1,n2)
produce una extracción de subcadenas.
n1 A partir del cual se comience la extracción
n2 En caso de estar, la extracción se detendrá en
ese caracter.
$ap=substr($nom,5);
strcmp (cad1,cad2)
Comparación de cadenas con seguridad binaria Devuelve < 0 si cad1 es menor que cad2; > 0 si
cad1 es mayor que cad2, y 0 si son iguales.
if (!strcmp($nom,$nom2)) echo "cadenas iguales";
Tabla 3.13. Funciones para el manejo de cadenas
Funciones Matemáticas
FUNCION DESCRIPCION abs (num) Devuelve el valor absoluto de un número. 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 cálculo 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 ( binario)
Devuelve el equivalente decimal del número binario representado por el
argumento binario cos (arg) Devuelve el coseno de arg en radianes decbin (num) Devuelve una cadena conteniendo la representación en binario de el número dado
en el argumento
114
dechex (num) Devuelve una cadena conteniendo la representación hexadecimal del número
dado en el argumento exp (arg) Devuelve el número 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, max)
genera un valor aleatorio mejorado entre de un valor mínimo a un máximo
pi (void) Devuelve una aproximación de pi pow (base, exp)
Devuelve base elevado a la potencia de exp.
rand (min, max)
genera un valor aleatorio entre de un valor mínimo a un máximo
sin (arg) Devuelve el seno de arg en radianes. sqrt (arg) Devuelve la raíz cuadrada de arg. srand ( semilla)
Inicializa la semilla del generador de números aleatorios
tan (arg) Devuelve la tangente de arg en radianes.
Tabla 3.14. Funciones Matemática
Funciones de Fecha y Hora
FUNCION DESCRIPCION checkdate Valida una fecha u hora date Da formato a la fecha/hora local getdate Obtiene información 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 según 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 descripción textual de fecha/hora en Inglés convirtiéndola 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 línea del archivo apuntado file_exists Verifica si un archivo existe Filesize Obtiene el tamaño del archivo fopen Abre un archivo o una URL Fread Lee archivo en plan binario Fseek Sitúa el apuntador a un archivo fwrite Escribe archivos en plan binario Readfile Muestra el contenido de un archivo
Tabla 3.16.- Funciones de archivos
115
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 manipulación de MySQL
FUNCION DESCRIPCION
mysql_affected_rows Devuelve el número de filas afectadas de la última operación
MySQL mysql_change_user Cambia el usuario conectado en la conexión activa
mysql_client_encoding Devuelve el nombre del conjunto de
mysql_close Cierra la conexión con MySQL
mysql_connect Abre una conexión 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 número del mensaje de error de la última operación MySQL
mysql_error Devuelve el texto del mensaje de error de la última operación
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 información 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 versión del cliente MySQL
mysql_get_host_info Retorna el nombre del host MySQL
mysql_get_proto_info Retorna la versión del protocolo usado para la conexión
mysql_get_server_info Retorna la versión del Servidor MySQL
mysql_info Retorna información 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
116
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 número de campos de la consulta
mysql_num_rows Obtiene el número de filas de la consulta
mysql_pconnect Abre una conexión persistente al servidor MySQL
mysql_ping Prueba la conexión 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 conexión actual
mysql_unbuffered_query Envía una consulta SQL a MySQL, sin recuperar ni colocar en
búfer 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 presentarán en el tema 3.10
en detalle.
Así como existe un repertorio de funciones para MySQL, también se encuentran para
otros manejadores de bases de datos como Microsoft SQL Server, dBase, Oracle,
Informix, Interbase, Ingres, etc. También 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 manipulación de Microsoft SQL Server
FUNCION DESCRIPCION
mssql_bind Adds a parameter to a stored procedure or a remote stored
procedure
mssql_close Cierra una conexión con MS SQL Server
mssql_connect abre una conexión 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 información 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
117
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 número de campos de la consulta
mssql_num_rows Obtiene el número de filas de la consulta
mssql_pconnect Abre una conexión 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, también
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
función mysql_query y mssql_query hacen exactamente lo mismo, “Envía 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
118
Funciones de manipulación de una base de datos con ODBC
FUNCION DESCRIPCION odbc_close_all Cierra todas las conexiones ODBC odbc_close Cierra una conexión ODBC odbc_commit Entrega una transacción ODBC odbc_connect Conecta a una fuente de datos odbc_cursor Toma un nombre de cursor odbc_data_source Retorna información de la conexión actual odbc_exec Ejecuta una sentencia SQL odbc_execute ejecuta una declaración 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 número de campos de la consulta odbc_num_rows Obtiene el número de filas de la consulta odbc_pconnect Abre una conexión persistente de base de datos odbc_prepare Prepara una declaración para su ejecución odbc_procedures Retorna la lista de procedimientos almacenados odbc_result Devuelve datos de un resultado odbc_rollback Volver a pasar una transacción odbc_setoption Ajusta la configuración 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 sesión a partir de una cadena session_destroy Destruye todos los datos guardados en una sesión session_encode Codifica los datos de la sesión actual en una cadena session_get_cookie_params Obtiene los parámetros de la cookie de la sesión session_id Lee y/o cambia el session id actual session_is_registered Comprueba si una variable está registrada en la sesión session_module_name Lee y/o cambia el módulo de la sesión actual session_name Lee y/o cambia el nombre de la sesión actual session_readonly Inicia una sesión - reinicializa las variables, pero sin guardar los
cambios al terminar session_register Registra una o más variables con la session actual. session_save_path Lee y/o cambia la ruta donde se guardan los datos de la sesión actual session_set_cookie_params Cambia los parámetros de la cookie de la sesión session_set_save_handler Establece unas funciones para el almacenamiento de los datos de la
119
sesión a nivel de usuario session_start Inicializar los datos de una sesión session_unregister Elimina una o más variable de la sesión actual session_unset Elimina todas las variables de la sesión session_write_close Escribe los datos de la sesión y la finaliza
Tabla 3.22 Funciones de PHP para el manejo de Sesiones.
Funciones para creación de archivos PDF
PHP no tiene librerías propias para generar formato de documento portable (PDF),
para poder generarlos se hacen uso de librerías externas. Como por ejemplo:
PDFlib.- Es una librería 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 orientación a objetos, siendo el Objeto fpdf el
encargado de ir almacenando la estructura, y mostrándolo con la función
Output, teniendo diferentes salidas tanto por pantalla como por impresora o
simplemente ofreciendo la posibilidad descargar el archivo. Entre sus
funciones más 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 además se puede modificar.
TCPDF.- Es una librería basada en FPDF creado por Nicola Asuni, además de
ser completamente gratuito, es software libre. Dos de las cualidades más
apreciadas de esta clase, es su simplicidad a la hora de crear archivos PDF y la
capacidad de interpretar código 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 librería se muestran en la
tabla 3.23
FUNCION DESCRIPCION AddPage Añade una nueva página Cell Imprime un celda TCPDF Constructor Image Imprime una imagen Line Dibuja una línea Ln Salto de línea MultiCell Imprime texto con saltos de línea Output Guarda o envía el documento Rect Dibuja un rectángulo SetAuthor Establece el autor del documento SetAutoPageBreak Establece el modo de salto de pagina automático SetCreator Establece el creador del documento SetDrawColor Establece el color de graficación SetFillColor Establece el color de relleno SetFont Establece la fuente SetFontSize Establece el tamaño de la fuente SetKeywords Asocia las palabras claves con el documento
120
SetLineWidth Establece el ancho de la línea SetMargins Establece los márgenes SetSubject Establece el tema del documento SetTextColor Establece el color del texto SetTitle Establece el título del documento Text Imprime una cadena Write Imprime un texto writeHTML Imprime texto en formato HTML
Tabla 3.23 Funciones para creación de PDF con la librería TCPDF.
3.7 EJEMPLOS PRÁCTICOS. Para poder realizar ejercicios prácticos más elaborados de los sitios Web, se requiere
de algunos conocimientos adicionales que se irán adquiriendo en los siguientes temas,
por lo que se deja su implementación en la sección de caso de estudio del apéndice A.
3.8 PROCESADO DE FORMULARIOS. La verdadera potencia del lenguaje reside cuando se pasa información de una página
a otra, como es el envío de los datos contenidos en un formulario a otra página para
su procesamiento, como puede ser la inserción, eliminación, o actualización de los
datos en una tabla de una base de datos. Dos de los métodos comúnmente usados son:
Uso de GET
Uso de POST
GET y POST son métodos propios del protocolo HTTP. Su funcionamiento es
prácticamente idéntico, se recomienda en los siguientes casos:
GET:
Si no importa que los parámetros se vean en la URL.
Si se desea transferir los datos de la manera más rápida posible.
Si el formulario HTML va a transferir variables de poco tamaño.
Si el usuario puede cambiar el contenido de la web a través de los parámetros de la URL.
POST:
Si no se deseas que las variables se muestren en la URL.
Si el formulario transfiere mucha información, o variables que tengan un tamaño
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 dirección URL seguido de un símbolo de interrogación (?) y el
conjunto de parejas de variable = valor separadas del símbolo (&), ejemplo:
<!—get_url.php -->
121
<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> </html>
En este ejemplo el hipervínculo 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 página en el navegador y se pulsa sobre el
hipervínculo se llama al archivo:
<!-- get2_url.php --> <html> <head> <title>Uso de get con url Continuación</title> </head> <body> <?php $cl=$_GET[c]; $de=$_GET[d]; $pe=$_GET[p]; echo "$cl <br> $de <br> $pe"; //Muestra ?> </body> </html>
Aquí se recibirán las variables enviadas desde el archivo get.php y se visualizarán
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 más utilizada para recabar información 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>
DD120G
DISCO DURO DE 120 GBYTES
650.5
VER DATOS DEL PRODUCTO
122
<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 están visibles para el
usuario, por tal razón se dice que este método no es seguro, puesto que puede ser
invocado desde sitios distintos a una aplicación Web desarrollado por el
programador, causando en algunos casos efectos perjudiciales para los sistemas de
información y en particular cuando los datos se insertan o modifican una base de
datos.
La página encargada de procesar los datos del formulario es:
<!-- get_formulario.php --> <html> <head> <title>Formulario con get Continuación</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 ?> </body> </html>
MOP
MOUSE OPTICO
60
5
123
Para leer los datos provenientes del formulario, nuevamente se usa la variable súper
global GET[] . En el ejemplo los datos solo se muestran usando el echo, como una
forma de simplificar el código, por lo regular, estos datos se insertan en una tabla de
una base de datos o como parámetros 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 método más usado para pasar datos
de un formulario a otra página, 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>
Básicamente la diferencia entre este ejemplo y el ejemplo get_formulario.htm es la
definición del método, en este se define como post y en el otro como get. El
formulario visto en el navegador se muestra así:
124
Al pulsar sobre el botón 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 Continuación</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
método 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 sesión es un período de tiempo durante el cual, un usuario ve una secuencia de
páginas 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 navegación.
A este identificador de sesión se le denomina, comúnmente, como la sesión.
Para que las sesiones funcionen, todas las paginas por las que se desee que se ejecute
deben tener la extensión .php, si se ejecuta por otra página que no sea .php las
sesiones se perderán al abandonar el archivo php.
Los pasos para el manejo de sesiones en PHP son:
1. Iniciar o continuar una sesión: Usar session_start().
2. Registrar la variable de sesión: session_register()
3. Usar la variable de sesión
4. Cerrar la sesión: session_unregister() y session_destroy().
125
1.- session_start()
Esta función, lo que hace es comprobar si existe alguna sesión abierta, y si no hay
ninguna, se abrirá una. Es una buena idea incluir esta línea en cada script de cada
página ya que si la sesión ya existe no abrirá otra nueva, sino que se limitará a abrir
toda la información asociada a dicha sesión. Una manera de evitar incluir esta función
en todas las paginas es inicializar la variable session.auto_start = 1 en el archivo de
configuración php.ini
2.- session_register()
Esta función sirve para registrar una variable de sesión:
Ejemplo: $us=dehesa; $_SESSION['usuario'] = $us;
3.-Para determinar si una variable de sesión 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 sesión implica dos etapas: des registrar la variable de sesión y
destruir los datos asociados.
Ejemplo: unset($_SESSION['usuario']); //Eliminar la variable de sesión registrada session_destroy(); //Destruye los datos asociados a la sesión
El siguiente ejemplo, muestra el manejo de sesiones, consta de tres archivos .php. El
primero muestra los vínculos a cada uno de los otros dos archivos y el mensaje del
estado de la sesión según el caso:
<!-- sesion_php.php --> <html> <head> <title>Manejo de seiones</title> </head> <body> <p><a href="sesion_php_abrir.php">Iniciar Sesión</a></p> <p><a href="sesion_php_cerrar.php">Cerrar Cesión </a></p> <?php if (isset($_SESSION['usuario'])) //3. Usar la variable de sesión echo "SESIÓN ABIERTA"; else echo "SESIÓN CERARADA";
126
?> </body> </html>
El segundo archivo comprueba si la sesión 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 sesión: echo "SESION AHORA ESTA ABIERTA"; } ?> </body> </html>
El tercer y último archivo verifica si la sesión 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 sesión registrada session_destroy(); //Destruye los datos asociados a la sesión echo "SESION AHORA CERRADA"; } ?> </body> </html> Se puede observar que la variable de sesión, 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 aplicación 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 sesión, este caso se presentará más adelante.
127
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 ejecución. Al instalar WAMP Server ambos
servicios quedan listos para operar. Se puede utilizar el cliente MySQL para verificar
que este en correcta operación, 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á recién instalado, la cuenta de usuario que lo
administra conocido como superusario root, no tiene contraseña, por lo que se puede
invocar como muestra la figura 3.4
Fig. 3.4.- Acceso al cliente MySQL
128
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 código 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 bibliografías al respecto, en este libro se anexa
información al respecto en la carpeta: /Curso de SQL
Tras conocer el lenguaje SQL, en lugar de crear la base de datos de la aplicación en
desarrollo desde la interfaz de comando, se recomienda escribirla en un archivo de
tipo texto. Este debe contener la descripción de la base de datos, así como la
inicialización 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 relación 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),
129
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');
130
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 descripción 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 definición
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 categoría, se debe poner
especial atención a la tabla de ventas, pues está en integridad referencias con
clientes, producto y factura. Después de la definición de cada una de las tablas, se
insertan algunos registros en cada una de ellas para inicializarlas, según 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 contraseña 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 recién 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 ningún error, significa que ahora la base de datos ya está construida y
puede ser accedida desde el código PHP.
CONEXIÓN DE PHP AL SERVIDOR MySQL
Se realiza básicamente usando dos funciones de PHP.
Ejemplo:
//Parámetros de conexión $servidor="localhost"; $usuario="alumnos"; $contasena="iti"; $bd="ventas"; //Función de conexión 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);
131
if (!$cbd) { echo "ERROR DE CONEXION CON LA BASE DE DATOS"; exit(); }
Básicamente la función que hace la conexión con el servidor de base de datos es la
función mysql_connect(), este recibe tres parámetros para lograrlo: El nombre del
servidor, el nombre del usuario y la contraseña, para este caso son localhost y el
usuario creado con GRANT, alumnos y su respectiva contraseña iti.
La función mysql_connect() retorna un identificador de la conexión 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
contraseña son incorrectos.
Ahora la función encargada de poner en uso la base de datos es
mysql_select_db(),este recibe como parámetros el nombre de la base de datos, así
como el identificador de la conexión, también retorna un NULL en el caso de no
poderse conectarse con la base de datos.
El código para la conexión con una base de datos en una aplicación Web, es un
código que se usa frecuentemente en diferentes paginas que conforman el sitio, por
ello se recomienda tenerla como función en un archivo.
Ejemplo:
<!-- conexion.php --> <html> <head> <title>Conexión a una base de datos</title> </head> <body> <?php function conectar() { //Parámetros de conexión $servidor="localhost"; $usuario="alumnos"; $contasena="iti"; $bd="ventas"; //Función de conexión 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); }
132
?> </body> </html>
La función 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,
contraseña iti y a la base de datos ventas, en caso de tener éxito retornará el
identificador de conexión en otro caso no retorna nada.
La pagina que use la función conectar() lo puede hacer incluyendo el siguiente
código al inicio:
include ("conexion.php"); $conexion=conectar();
Para el caso de establecer la conexión con otros servidores de bases de datos, se
utilizan funciones similares de PHP, para ello se debe consultar con la tabla
correspondiente según el manejador de base de datos.
OPERACIONES EN TABLAS DE UNA BASE DE DATOS
Una vez que se logra la conexión con el servidor de base de datos y con una base de
datos en particular, las operaciones más frecuentes que se realizan en cada una de las
tablas que conforman la base de datos se pueden resumir en:
Inserción
Consulta
Eliminación
Actualización
Para demostrar cada una de ellas se usará la tabla de clientes del archivo ventas.sql
INSERSION
En el siguiente ejemplo se realiza la inserción 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, contraseña, dirección y teléfono. Estos
datos son enviados al segundo archivo usando el método POST, se conecta a la base
de datos, usando la función 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>
133
<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Ñ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 botón 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 mayúscula
134
$no= strtoupper($_POST[nom]); $dir=strtoupper($_POST[direccion]); $cont= $_POST[contrasena]; $tel=$_POST[tel]; if (empty($clv)||empty($no)) //Si los campos Clave ó Nombre están vacíos { echo "DATOS INSUFICIENTES <BR>"; exit(); } //Conecta al servidor Mysql y a la base de datos ventas include ("conexion.php"); $conexion=conectar(); //Sentencia de insersión 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 ejecución de la página } //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>Dirección </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:
135
CONSULTA
Para realizar una consulta en la tabla de clientes, basta con un archivo .php, al igual
que el proceso de inserción primeramente se conecta al servidor de base de datos
MySQL así como a la base de datos ventas, se efectúa 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 función
mysql_fetch_object(), por cada iteración que se efectúa 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 tenía 3 registros en la tabla de clientes, tras agregar uno más, su
contenido se vería así:
136
ELIMINACIÓN
Para la eliminación de un registro en la tabla de clientes, es similar al proceso de
inserción, también se utilizan dos páginas, la primera pagina consiste en un
formulario donde el usuario escribe la clave de cliente que se desea eliminar y la
segunda, recibe este parámetro con el método POST, y efectúa el proceso de
eliminación en la tabla. El primer archivo es el siguiente: <!-- clientes_eliminar.htm --> <html> <head> <title>Eliminación 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 página 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> <?php
137
$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 página y el registro se elimina con éxito se muestra en el
navegador el siguiente mensaje:
ACTUALIZACIÓN
Para ejemplificar este caso, se plantea un ejemplo aún más largo que los anteriores,
por eso se encuentra al final de los otros tres casos, consiste en tres páginas. La
primera contiene un formulario donde el usuario escribe la clave del cliente que desee
actualizar sus datos, la segunda página, recibe la clave y realiza una consulta en la
tabla de clientes para obtener todos los demás 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, según las modificación
efectuadas por el usuario se envían a la tercera página, quien realmente realiza la
actualización en la tabla de clientes.
Este es la primera página:
<!-- 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> </table>
138
</form> </body> </html>
Muestra:
El código de la segunda página 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>CONTRASEÑA</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> </tr>
139
</table> </form>"; ?> </body> </html>
Con la clave del cliente recibido muestra cada uno de sus demás campos:
Al pulsar el botón Aceptar se llama la tercera página quien realiza las modificaciones
en la tabla. <!-- clientes_actualizar2.php --> <html> <head> <title>Actualizar Cliente</title> </head> <body> <?php //Parámetros 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 vacíos { echo "DATOS INSUFICIENTES <BR>"; exit(); } //Conecta al servidor Mysql y a la base de datos ventas include ("conexion.php"); $conexion=conectar(); //Sentencia de actualización 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> </html>
140
En conclusión para realizar las cuatro operaciones más frecuentes en una tabla de una
base de datos, como son: Inserción, consulta, eliminación y actualización se usaron
las siguientes sentencias SQL para la tabla de clientes:
Operación Sentencia
Inserción insert clientes values('$clv','$cont','$no','$dir','$tel'
Consulta select * from clientes
Eliminación delete from clientes where id_clie='$clv'
Actualización 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. También 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 práctica muy común 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 operación.
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 función fopen() asigna a una variable un puntero (un descriptor) al archivo que
que se abra. La variable puede utilizarse después para hacer cualquier tipo de
operación. 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 Descripción
'r' Sólo lectura
'r+' Lectura y escritura
'w' Sólo escritura
'w+' Lectura y escritura. Suprime el contenido anterior si se escribe. El archivo es creado si no
existe.
'a' Sólo 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.
Tabla 3.25 Modos de apertura de archivos
141
si se trata con archivos binarios se debe colocar una b delante del modo (Ejemplo.
ba, bw+,...)
Leer el archivo.
La función fgets() se encarga de leer línea a línea el contenido de un archivo texto
por lo que su utilización 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 línea por línea 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 añade a la línea de texto agregando cambio de línea $texto .= $linea."<br>"; } return $texto; } //Aqui inicia la ejecución $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 continuación, se le cambia el formato para ponerla en
subrayado por medio de la etiqueta <u>. Esto puede resultar útil si se lleva a cabo
búsquedas internas en el sitio y se desea resaltar la cadena de búsqueda en el texto de
la página encontrada.
Escribir en el archivo.
Las funciones para escribir archivos son tan sencillas de utilizar como las de lectura.
La función 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 número de veces que se visita la página, Este número
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 función fwrite()
incrementando el contador. <!-- ecribe_archivo.php --> <?php
142
function contador($archivo) { $contador = 0; //Se inicializa el número 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 función ?>
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 parámetros de configuración en
el archivo php.ini
file_uploads: (On / Off), pemite que haya o no cargas de archivos
uploads_max_filesize: tamaño máximo del archivo que se puede subir
upload_tmp_dir: directorio temporal donde se guardan los archivos cargados
post_max_size: tamaño máximo de los datos enviados por el método post
Un formulario puede enviar un archivo al servidor mediante un control de tipo file. El
formulario sería:
<!-- 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 tenía el archivo
cargado en el ordenador del cliente
$_FILES['nombre_archivo_cliente']['type']: tipo MIME del archivo
cargado
$_FILES['nombre_archivo_cliente']['size']: tamaño del archivo cargado
$_FILES['nombre_archivo_cliente']['tmp_name']: nombre del archivo
cargado en el directorio temporal del servidor
143
$_FILES['nombre_archivo_cliente']['error']: código 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 función
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 código 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 características del archivo son las adecuadas if (!((strpos($tipo_archivo, "gif") || strpos($tipo_archivo, "jpeg")) && ($tamano_archivo < 100000))) { echo "La extensión o el tamaño del archivo no es correcta. <br>Se permiten archivos .gif o .jpg<br>Se permiten archivos de 100 Kb máximo."; }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 teórico fueron tratados en el
tema 2.6, en este tema, se aborda desde el punto de la programación, los aspectos que
ayudan a mejorar el nivel de seguridad en un sitio Web, son:
Autenticación
Encriptación
Sesiones
Usuarios del sitio Web
AUTENTICACIÓN
La autenticación 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
operación con el sitio un nombre de usuario y contraseña.
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 contraseña
respectivamente, para autenticar a los clientes que entran al sitio.
Ejemplo:
144
Este ejemplo consta de dos páginas, la primera consiste en una tabla HTML que
contiene un formulario, donde el usuario introduce su nombre de usuario y
contraseña, estos están inicializados con ‚MLF‛ e ‚iti‛ respectivamente ya que en la
tabla de clientes existe un registro con estos datos. La segunda página, recibe con el
método POST el nombre de usuario y contraseña 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 página: <!-- autenticacion.php --> <html> <head> <title>Autenticación</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Ñ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 página que recibe el nombre de usuario, contraseña y que realiza la autenticación: <!-- autenticacion2.php --> <html> <head> <title>Autenticación</title> </head> <body> <?php $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='$clave'"; $reg = mysql_query($sql, $conexion);
145
$r= mysql_fetch_object($reg); $n=mysql_num_rows($reg); //Número 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 autenticación 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.
ENCRIPTACIÓN
PHP, cuenta con diferentes funciones de encriptación, entre los que se pueden
mencionar el MD5() y el sha1(),siendo este último el más 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 aplicación nuevamente de la
función, 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 tamaño máximo 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 aún en estas circunstancias no está nada mal.
La función sha1(), se puede aplicar para encriptar la contraseña del usuario, durante
la autenticación, de tal manera que un usuario que se encuentre monitoreando la red
no pueda interpretar la contraseña del algún 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 función sha1() aplicado al campo clave ó
contraseña, 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 función de encripatación. Para probar lo anterior, se puede realizar
la siguiente consulta en el servidor MySQL, y obtener su correspondiente resultado.
146
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 contraseña en texto normal, luego se le
aplica la función 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 autenticación con encriptación en la contraseña a un usuario, sustituyendo
solamente la línea de la consulta realizada en la página 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
autenticación con contraseña, es que se utilice además como el inicio de sesión 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
sesión y este se mantenga mientras navega en el sitio Web hasta que decida cerrar la
sesión.
El siguiente ejemplo implementa la autenticación con encriptación de la contraseña
del usuario, así como el manejo de sesiones, es una modificación de las paginas
autenticación.php y autenticacion2.php, dando lugar a las paginas:
autenticacion_encriptacion_sesion.php y autenticacion_encriptacion_sesion2.php con
otras dos páginas para cerrar la sesión que se inicie, implementadas en las páginas:
cerrar sesion.php y cerrar sesion2.php, por obviedad solo se muestra la página más
importante, sin embargo se puede cargar en el navegador la página
autenticacion_encriptacion_sesion.php para verificar la funcionalidad en conjunto
<!-- autenticacion_encriptacion_sesion2.php --> <html> <head> <title>Autenticación, Encriptación y Sesión</title> </head> <body> <?php include "cerrar session.php"; //Contiene la función cerrar() if (isset($_SESSION['usuario'])) //Comprueba si la sesión esta iniciada { cerrar(); //Si la sesión esta iniciada se llama a la función cerrar() exit(); //termina la página }
147
$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); //Número 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 sesión } else //No se encontro al cliente echo"<h2 align='center'>USUARIO NO REGISTRADO</h2>"; ?> </body> </html>
Al inicio del código de php, se comprueba si la sesión esta iniciada, si es así se llama
a la función cerrar(), para cerrarla, en caso contrario se realiza la consulta SQL para
verificar que el usuario, con la contraseña correspondiente exista en la tabla de
clientes, de ser así se muestra el mensaje de bienvenida, se muestra el vinculo para
acceder a otra página que representaría las opciones accesibles para este usuario y
finalmente registra en la variable de sesión el usuario autenticado, con lo cual se da
por iniciado la sesión.
Se recomienda como medida de seguridad que en todas las páginas accesibles para el
usuario una vez autenticado, se verifique si ya inicio sesión, para mostrársela, en caso
contrario, impedirlo indicándole con el mensaje apropiado.
Ejemplo: if (!isset($_SESSION['usuario'])) { echo "Debe iniciar sesión"; exit(); }
Este código puede insertarse al inicio de cada página, para cuidar que otros usuarios
no puedan accederla sin haber antes iniciado una sesión.
USUARIOS DEL SITIO WEB
Aplicar las tres medidas de seguridad durante el inicio de sesión 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 según la función 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 sesión, si se trata
148
de un cliente mostrarle la pagina que contenga las opciones que pueda realizar y si se
trata de una administrador una página 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 autenticación 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>Autenticación diferentes tipos de usuarios</title> </head> <body> <?php include "cerrar session.php"; //Contiene la función cerrar() if (isset($_SESSION['usuario'])) //Comprueba si la sesión esta iniciada { cerrar(); //Si la sesión esta iniciada se llama a la función cerrar() exit(); //termina la página } $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); //Número 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 sesión } 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); //Número 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 sesión } else //No se encontro al usuario echo"<h2 align='center'>USUARIO NO REGISTRADO</h2>"; } ?>
149
</body> </html>
Este ejemplo se puede probar modificando la página
autenticacion_encriptacion_sesion.php, asignando a la propiedad del formulario el
nombre de la página:
action= ‘autenticacion_tipos_usuarios.php’.
Se puede apreciar como si se encuentra a un cliente se llama a una página y si se
encuentra un administrador a una página distinta. El algoritmo puede funcionar para
más tipos de usuario, basta con ampliar y adecuar el código ligeramente.
150
PREGUNTAS
1. ¿Existe la posibilidad de que en una petición de un cliente Web reciba código
PHP,JSP ó ASP.NET?, si, no, por que
2. ¿Cuáles son los pasos que sigue el navegador cuando realiza una petición?
3. Explique cómo se prueba una página que contiene código de php
4. Mencione los programas que se pueden utilizar como plataforma de trabajo
Web
5. ¿Cómo se llaman los archivos de configuración de: apache, php y MySQL?
6. Mencione por lo menos tres parámetros de configuración de apache y para qué
sirven
7. Mencione por lo menos tres parámetros de configuración de php y para qué
sirven
8. Como se prueban los servicios Web para verificar si están funcionando
correctamente
9. Muestre una tabla de los operadores aritméticos
10. Muestre una tabla de los operadores de comparación
11. Muestre una tabla de los operadores lógicos
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. ¿Cuáles son las sentencias que se pueden utilizar para efectuar ciclos?
16. ¿Cuáles son las sentencias de control?
17. ¿Qué es un arreglo?
18. ¿Qué es una función definida por el usuario?
19. Indique las diferencias entre un argumento por valor y por referencia
20. ¿Cuál es el alcance de una variable global?
21. ¿Qué son las variables estáticas?
22. ¿Qué son las funciones de librerías?
23. ¿Qué son las librerías externas? de un ejemplo
24. ¿Qué métodos se pueden usar para procesar formularios?
25. ¿Cuándo se recomienda el uso del método GET
26. ¿Cuándo se recomienda el uso del método POST
27. ¿Qué es una sesión?
28. ¿Cuáles son los pasos para el manejo de sesiones?
29. ¿Explique cómo se prueba le servidor de base de datos MySQL?
30. ¿Cuáles son las operaciones más frecuentes en una tabla de una base de datos?
Especifique las sentencias SQL que se utilizan para cada caso.
31. ¿Cuáles son las operaciones que se realizan en un archivo?
32. Muestre la función con los modificadores adecuados para abrir el archivo
”nuevo.bin” de tipo binario para lectura y escritura
151
33. ¿Cómo se define el directorio donde se guardan los archivos que se cargan
temporalmente en el servidor?
34. ¿Cómo se determina el tamaño 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 autenticación?
37. ¿En qué consiste la Encriptación?
38. ¿En qué consiste el manejo de sesiones?
39. ¿En qué consiste el manejo de usuarios de un sitio Web?
152
EJERCICIOS PROPUESTOS
Según el ejercicio del caso de estudio presentado por él alumno en el capítulo 2:
1. Seleccionar 2 de las tablas que contenga la base de datos e implementar los
formularios correspondientes para los procesos de Inserción, Consulta,
Eliminación y Actualización, para cada una.
2. Utilizando la librería 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 autenticación
para los usuarios del sitio Web, considerando las medidas de seguridad como
el manejo de sesiones y la encriptación.
4. Identificar en que tabla es conveniente la utilización de carga de archivos, e
implementarla.
153
4
Procesamiento del lado del cliente.
154
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, además
del HTML, permiten construir paginas más interesantes.
Un lenguaje de script es un pequeño lenguaje de programación cuyo código se inserta
dentro del documento HTML. El programa se ejecuta en la máquina del cliente
cuando se carga la página, 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 dinámicamente.
Los scripts pueden acompañar a un formulario para procesar los datos a
medida que éstos se introducen. Los diseñadores pueden rellenar
dinámicamente partes de un formulario según los valores de los otros campos.
También 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 ratón, etc.
Los scripts pueden ser vinculados a controles de formulario (p.ej., botones)
para producir elementos gráficos para la interfaz del usuario.
Sin embargo, conviene recordar que se ejecutan en el navegador del usuario y no en
la máquina donde estén alojadas, por lo que no podrán 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 versión 2.0 de este navegador y basado en la sintaxis de Java, su utilidad y el casi
absoluto monopolio que entonces ejercía Netscape en el mercado de navegadores
permitieron que se popularizara y extendiera su uso.
El máximo rival del Netscape Navigator, el Internet Explorer de Microsoft, comenzó
a soportar este lenguaje en su versión 3.0. Fue también 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 difusión en Internet
debido a la previa implantación del JavaScript, es por ello que en lo sucecivo se
aborda este lenguaje.
Para introducir un script JavaScript se hace dentro de las etiquetas:
155
<SCRIPT LANGUAGE=‚JavaScript‛> Código del script </SCRIPT>
Veamos un ejemplo muy básico de una página 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>
El resultado es:
La funcionalidad anterior es muy básico, 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 algún evento,
como sea un click de ratón, que éste pase por encima de un enlace, que se envíen los
datos de un formulario.
En el siguiente ejemplo se utiliza el evento onclick() de un botón 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">
Esto es HTML
Esto es JavaScript
Esto vuelve a ser HTML
156
<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Ñ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 botón Aceptar se ejecuta su
evento onClick(). A este evento se le asigna la función validar(), La función
validar() se encuentra implementado en la parte superior del código entre las
etiquetas <script> y </script>. El código de esta función, verifica si el valor de los
cuadros de texto “clv” y “nom” no están vacíos para llamar a la pagina
clientes_alta.php invocando a la función sumit(). Si el usuario no introduce la clave
en el formulario y se pulsa sobre el botón 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 información que los usuarios
introducen en los formularios, no tiene caso enviar los datos del formulario por la red
hasta el servidor, cuando estos no están bien rellenados por los usuarios.
La sintaxis del lenguaje JavaScript es prácticamente 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.
157
Antes de comenzar a desarrollar programas y utilidades con JavaScript, es necesario
conocer los elementos básicos con los que se construyen las aplicaciones.
VARIABLES
Las variables en JavaScript se crean mediante la palabra reservada var, una de las
características 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:
Sólo puede estar formado por letras, números y los símbolos $ y _ .
El primer carácter no puede ser un número.
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 número var numero;1_123; // Contiene un carácter ";"
En JavaScript un comentario en línea 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 cálculos, buscan
igualdades, realizan asignaciones. En la siguiente tabla se presentan los de uso más
común.
Operador Descripción Ejemplo Operador Descripción Ejemplo
OPERADORES ARITMÉTICOS OPERADORES DE ASIGNACIÓN
+ Suma x=x+z; = Asignación x=10;
- Resta x=x-z; += Asignar y sumar x+=10; * Multiplicación x=x*z -= Asignar y restar x-=10;
/ División x=x/z; *= Asignar y multiplicar x*=10;
% Modulo o resto x=x%z; /= Asignar y dividir x/=10;
OPERADORES LÓGICOS &= Asig. operador AND x&=0x02;
&& AND Lógico if (x&&0xFF) |= Asignar operador OR x|=0x02;
158
|| OR Lógico if (x||0xFF) OPERADORES A NIVEL DE BITS
NOT Lógico 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 * Indirección Int *Ap;
OTROS & Dirección 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 iteración: 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 están 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 métodos que interactúan sobre él (funciones o procedimientos).
Aunque JavaScript no permite dos de las características clásicas de los lenguajes
orientados a objetos (ni la herencia ni el polimorfismo), sí permite la creación y
manipulación de objetos sencillos, y la definición de métodos 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 página y a ciertas características específicas del navegador
El DOM es una jerarquía de objetos predefinidos que describen los elementos de la
página Web que está mostrando el navegador, así como otras características del
proceso de navegación (como son el historial, el tamaño de la ventana de navegación
o el contenido de la barra de estado del navegador).
Un ejemplo sencillo. En JavaScript, para escribir un mensaje en un cuadro de
diálogo es:
window.alert("FALTA LA CLAVE");
159
Si bien no se conoce como funciona internamente la función alert(), se sabe que
se trata de una función del objeto window. A estas funciones se las llama
métodos, y a las variables propiedades. Tanto los métodos como las propiedades
siempre se representan de la siguiente manera:
nombre_objeto.nombre_método(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
consideración que si lo existe aunque sea minima.
En la figura 4.1 se muestra la jerarquía de objetos de JavaScript
Fig. 4.1.- Jerarquía de objetos de JavaScript
160
A continuación se describen las propiedades y métodos de algunos de los objetos más
importantes de la jerarquía de objetos de JavScript
Objeto windows Se trata del objeto más alto en la jerarquía del navegador (navigator es un objeto
independiente de todos en la jerarquía), pues todos los componentes de una página
Web están situados dentro de una ventana. El objeto window hace referencia a la
ventana actual. A continuación se presentan sus propiedades y métodos.
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 según se
definen en el documento HTML.
history. Se trata de un array que representa las URLS visitadas por la ventana
(están almacenadas en su historial).
length. Variable que nos indica cuántos frames tiene la ventana actual.
location. Cadena con la URL de la barra de dirección.
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 método 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.
Métodos
alert(mensaje). Muestra el mensaje 'mensaje' en un cuadro de diálogo
blur(). Elimina el foco del objeto window actual.
clearInterval(id). Elimina el intervalo referenciado por 'id' (ver el
método setInterval(), también del objeto window).
clearTimeout(nombre). Cancela el intervalo referenciado por 'nombre' (ver el método setTimeout(), también del objeto window).
close(). Cierra el objeto window actual.
confirm(mensaje). Muestra un cuadro de diálogo 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 ratón sobre el objeto window actual.
moveBy(x,y). Mueve el objeto window actual el número 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 parámetro en una ventana de nombre 'nombre'. Si esta ventana no
161
existe, abrirá una ventana nueva en la que mostrará el contenido con las
características especificadas. Las características 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
localización o no.
directories = [yes|no|1|0]. Indica si la nueva ventana tendrá botones
de dirección 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
menús 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 tamaño (con el ratón) 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 diálogo que
contiene una caja de texto en la cual se puede escribir una respuesta a lo que
se pregunte en 'mensaje'. El parámetro 'respuesta_por_defecto' es
opcional, y mostrará la respuesta por defecto indicada al abrirse el cuadro de
diálogo. El método 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 número 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 expresión especificada después
de que hayan pasado el número de milisegundos especificados en tiempo.
Devuelve un valor que puede ser usado como identificado por clearInterval().
setTimeout(expresion,tiempo). Evalúa la expresión especificada después de
que hayan pasado el número de milisegundos especificados en tiempo.
Devuelve un valor que puede ser usado como identificador por
clearTimeout().
162
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 posición actual 10,5 pixeles más i++; if (i<20) //Se repite mientras i<20 setTimeout('moverVentana()',100); //Se llama a la misma función else mi_ventana.close(); //Cierra la ventana después 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 página que se está
visualizando. Esto incluye el texto, imágenes, enlaces, formularios, etc. Gracias a este
objeto se puede añadir dinámicamente contenido a la página, o hacer cambios, según
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
163
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 métodos.
images. Array con todas las imágenes del documento
lastModified. Es una cadena con la fecha de la última modificación 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 título del documento actual
vlinkColor. Propiedad en la que se guarda el color de los enlaces visitados
Métodos
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 además lo finaliza con un salto
de línea
El siguiente ejemplo muestra algunas propiedades del documento, además 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 función //--> </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>");
164
//--> </script> </BODY> </HTML>
Objeto location Este objeto contiene la URL actual así como algunos datos de interés 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 número del puerto,
dentro de la URL.
hostname. Cadena que contiene el nombre de dominio del servidor (o la
dirección 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 número 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 información pasada en una llamada a un
script, dentro de la URL.
Métodos
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>
165
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 atrás 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 número de entradas del historial (i.e., cuántas
direcciones han sido visitadas).
previous. Cadena que contiene la URL completa de la anterior entrada en el
historial.
Métodos
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 posición 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 parámetro ACTION del form, es
decir, la dirección en la que los datos del formulario serán 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
verificación y una lista de selección, la caja de texto será elements[0], la
casilla de verificación será elements[1] y la lista de selección será elements[2].
encoding. Es una cadena que tiene la codificación mime especificada en el
parámetro ENCTYPE del form.
method. Es una cadena que tiene el nombre del método con el que se va a
recibir/procesar la información del formulario (GET/POST).
Métodos
reset(). Resetea el formulario: tiene el mismo efecto que si se pulsa un botón
de tipo RESET dispuesto en el form.
submit(). Envía el formulario: tiene el mismo efecto que si pulsáramos un
botón de tipo SUBMIT dispuesto en el form.
166
Uan vez que se conocen las propiedades y métodos de los objetos de JavaScrit, es
momento de analizar un poco la función 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 línea de código 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 vacíos para así ejecutar la línea:
document.form1.submit(); este ejecuta el método sumit() del formulario. Cuando el
método 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 acción del usuario. Por ejemplo, hacer clic sobre
un botón 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 través de la red.
Una lista de los eventos más comunes, cuando se producen y sobre qué etiquetas
pueden actuar se presenta en la tabla 4.2.
167
Tabla 4.2.- Eventos definidos por JavaScript
Los eventos más utilizados en las aplicaciones Web tradicionales son onload para
esperar a que se cargue la página por completo, los eventos onclick, onmouseover,
onmouseout para controlar el ratón y onsubmit para controlar el envío de los
formularios.
168
Las acciones típicas que realiza un usuario en una página Web pueden dar lugar a una
sucesión de eventos. Al pulsar por ejemplo sobre un botón 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 código JavaScript a
cada evento. De esta forma, cuando se produce un evento se ejecuta el código
indicado, por lo que la aplicación puede responder ante cualquier evento que se
produzca durante su ejecución
Se recomienda que el código 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 continuación se presentan algunos ejemplos donde se utilizarán los eventos onLoad,
onClick, onChange y onKeyUp de JavaScript.
En este ejemplo se utiliza el evento onLoad que ejecuta la función confirma(), este
muestra un cuadro donde se puede pulsar el botón Aceptar o Cancelar.
<!-- onLoad.htm --> <html> <head> <title>Evento Onload</title> <script language="javascript"> function confirma() { var respuesta=confirm("Pulsa un botón"); if (respuesta==true) alert("Has pulsado ACEPTAR"); else alert("Has pulsado CANCELAR"); } </script> </head> <body onLoad="confirma();"> Ejemplo del evento OnLoad y función CONFIRM </body> </html>
En el siguiente ejemplo se utiliza el evento onClick en diferentes componentes, tales
como: dos botones de opción, una casilla de verificación y 2 botones, todos ejecutan
la misma función de javaScricpt, solo que cambia el mensaje que se envía como
argumento. <!-- onclick.htm --> <html> <head> <title> Evento onClick </title> <script language="JavaScript"> function mensaje(elemento) { alert("Ha hecho click en el "+elemento+"!");
169
} </script> </head> <body> Evento: OnClick <form> <input type="radio" name="radio" onClick="mensaje('botón de opción 1')">Opcion 1<br> <input type="radio" name="radio" onClick="mensaje('botón de opción 2')">Opcion 2<br> <input type="checkbox" onClick="mensaje('Casilla de verificicación')">Check-Button<br> <input type="submit" value="Enviar" onClick="mensaje('botón de envío')"> <input type="reset" value="Restablecer" onClick="mensaje('botón 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 función cambio() este muestra un mensaje del cambio ocurrido; cuando se
suelta una tecla pulsada sobre el cuadro de texto se ejecuta la función
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 también aplicar de forma creativa los demás eventos
a los componentes HTML que los soporten, según la tabla 4.2.
170
4.5. VALIDACIÓN DE ENTRADA DE DATOS DEL LADO DEL
CLIENTE. Una de las grandes aportaciones de JavaScript a la creación 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 validación de los datos de un formulario mediante
scripts JavaScript no sustituye a la validación que debe realizarse, por motivos de
seguridad, en la aplicación del servidor que recibe la información. Sin embargo, al
añadir una validación local con JavaScript, la experiencia del usuario mejora
notablemente, al no ser necesario enviar los datos al servidor y esperar su
respuesta para obtener sólo un mensaje informando de la incorrección de la
información suministrada.
Estas son algunas de las validaciones típicas:
Comprobar que se han suministrado todos los campos obligatorios
Comprobar que el formato de un campo es el esperado (fechas, teléfonos, etc.)
Comprobar la validez (sintáctica) de las direcciones de correo y URLs
Comprobar que no se sobrepasa la longitud, número de líneas o tamaño de la
entrada
Evento onSubmit
La validación de campos de formulario se basa en interceptar el momento en que el
usuario realiza el envío de los datos del formulario (es decir, al pulsar sobre el botón
de enviar). Como es sabido, el botón de envío de datos se codifica con HTML
mediante un tipo especial de objeto de formulario, llamado submit.
Cuando el usuario pulsa sobre el botón de enviar, se genera el evento submit,
asociado al envío 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 envío de los datos.
A continuación mostramos referencias a múltiples ejemplos prácticos de validación
de formularios con JavaScript.
Este ejemplo valida que no este vacío 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="text⁄javascript"> 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
171
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 Año 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 Día var Dia= new String(Fecha.substring(0,Fecha.indexOf("-"))) // Valida el año if (isNaN(Ano) || Ano.length<4 || parseFloat(Ano)<1900){ alert('Año inválido') return false } // Valida el Mes if (isNaN(Mes) || parseFloat(Mes)<1 || parseFloat(Mes)>12){ alert('Mes inválido') return false } // Valida el Dia if (isNaN(Dia) || parseInt(Dia, 10)<1 || parseInt(Dia, 10)>31){ alert('Día inválido') return false } if (Mes==4 || Mes==6 || Mes==9 || Mes==11 || Mes==2) { if (Mes==2 && Dia > 28 || Dia>30) { alert('Día inválido') return false } }
172
document.form1.submit(); //Fecha correcta, se llama a la página } </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 también se podría validar cuando el día, mes y año 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 función Date(ano, mes, dia) es una función interna de JavaScript que permite
construir fechas a partir del año, el mes y el día de la fecha. Es muy importante tener
en cuenta que el número de mes se indica de 0 a 11, siendo 0 el mes de Enero y 11 el
mes de Diciembre. Los días del mes siguen una numeración diferente, ya que el
mínimo permitido es 1 y el máximo 31.
La validación 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 validación del formulario no será correcta.
La siguiente función valida tres campos de un formulario usando expresiones
regulares:
<!-- valida campos.htm --> function validaCampos(form) { //expresiones regulares var er_tel = /^\d{10}$/ //Acepta 10 dígitos 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 válido.') return false //no submit } if(!er_correo.test(form.correo.value)) {
173
alert('Campo CORREO no válido.') return false //no submit } if(!er_cp.test(form.cp.value)) { alert('Campo CODIGO POSTAL no válido.') return false } alert('Todo bien'); //Todos los campos estan validados }
A continuación se muestran otras expresiones regulares que se pueden utilizar para otros formatos de número de teléfono:
Número Expresión 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 00
/^\d{3}\s\d{2}\s\d{2}\s\d{2}$/ 9 cifras las 3 primeras separadas por un espacio las siguientes agrupadas de 2 en 2
(900) 900900
/^\(\d{3}\)\s\d{6}$/ 9 cifras las 3 primeras encerradas por paréntesis y un espacio de separación respecto del resto
+34 900900900
/^\+\d{2,3}\s\d{9}$/ Prefijo internacional (+ seguido de 2 o 3 cifras) espacio en blanco y 9 cifras consecutivas
El siguiente ejemplo valida si un botón de opción esta marcado y almenos una casilla
de verificación.
<!-- valida casilla de verificacion.htm --> <html> <head> <title>Valida Casillas de verificación</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 suscripción
174
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 boletín 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 interés:<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="Música">Música<br> <input type="button" name="Submit" value="Botó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 validación de los formularios se puede realizar con la
programación 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 día 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 además con las diferentes versiones de
las tecnologías que usa, como Javascript
Todos los navegadores modernos interpretan el código JavaScript integrado dentro de
las páginas 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 estándar.
175
Javascript 1.1: Es la versión de JavaScript que se diseñó con la
llegada de Netscape 3.0. Implementaba poco más que su anterior versión,
como por ejemplo el tratamiento de imágenes dinámicamente y la creación 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 versión 4.07 del Netscape Navigator. Esta versión
es una pequeña revisión de la 1.2 creada para ajustarse al estándar internacional
“European Computer Manufacturers' Association” (ECMA) que regula el lenguaje
JavaScript.
Javascript 1.5: Implementada con Netscape 6.
Por su parte, Microsoft también ha evolucionado hasta presentar su
versión 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 versión con la que se pienza trabajar. Por ejemplo para la versión: LANGUAGE="JavaScript1.1"
176
PREGUNTAS
1. ¿Se necesita de un servidor WEB para ejecutar código por el lado del
cliente?, si, no, porque
2. De al menos tres casos de aplicación de la programación por el lado del
cliente
3. ¿En que secciones de una pagina WEB se puede incrustar código 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 jerarquía de objetos de JavaScript
9. Describa por lo menos 5 propiedades del objeto Windows
10. Describa por lo menos 5 métodos del objeto windows
11. Describa por lo menos 5 propiedades del objeto document
12. Describa por lo menos 5 métodos del objeto document
13. Describa por lo menos 5 propiedades del objeto location
14. Describa por lo menos 2 métodos del objeto location
15. Describa por lo menos 3 propiedades del objeto history
16. Describa por lo menos 3 métodos del objeto history
17. Describa por lo menos 3 propiedades del objeto form
18. Describa por lo menos 2 métodos 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 validación de un formulario con
JavaScript
22. ¿Qué navegadores soportan JavaScript?
23. De una reseña de las versiones de JavaScript
177
EJERCICIOS PROPUESTOS
1. Implementar las validaciones necesarias utilizando JavaScript, para cada uno
de los formularios de los procesos de Inserción, Consulta, Eliminación y
Actualización de al menos dos tablas del caso de estudio presentado en el
capitulo 2 y 3
178
5
Servicios Web XML.
179
5.1 VISIÓN GENERAL DE SERVICIOS WEB XML.
Un servicio Web es un conjunto de protocolos y estándares que sirven para
intercambiar datos entre aplicaciones.
Los sitios Web creados en diferentes lenguajes de programación 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 adopción de estándares abiertos. Las
organizaciones OASIS (Organization for the Advancement of Structured Information
Standards) y W3C son los comités responsables de la arquitectura y reglamentación
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
más exhaustiva estos estándares, 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 diseñado principalmente para
documentos Web. Permite a los diseñadores crear sus propias “etiquetas” (Ej:
<productos>), habilitando la definición, transmisión, validación, y la interpretación
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
información, mientras que el XML se ocupa de la información 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 información 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>
180
<?xml version="1.0" encoding="UTF-8"?>
Todo documento XML debe comenzar indicando
que es un documento XML, la versión del mismo
y su codificación. Es por eso que se utiliza la
etiqueta <?xml .... ?> . Todos los elementos a
partir de aquí son definidos por el usuario.
<productos>
Luego se indica una etiqueta raiz <productos>) el
cual contendrá a los demás elementos. Es como
en HTML la etiqueta <HTML> .. </HTML>, que
dentro de el se encuentran las demás etiquetas. Se
lo conoce generalmente como raiz del
documento.
<producto>
Luego se define una etiqueta <producto> el cual
contendrá un producto en particular (en este caso
solo incorpore 3 características de un producto:
id_producto, nombre, y precio).
<id_pro>DD40G</id_pro> <nombre>DISCO DURO </nombre> <precio>500</precio>
Se definen 3 etiquetas (<id_pro>, <nombre>, y
<precio>), los cuales contienen los datos para un
producto en particular. <productos> <producto> <id_pro>DD40G</id_pro> <nombre>DISCO</nombre> <precio>500</precio> </producto> </productos>
En el documento se puede apreciar que todas las
etiquetas que son abiertos <id_pro>deben ser
cerrados </id_pro>. Esto es una exigencia del
XML.
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 básicos para conocer de que se
trata el mundo de los Web.
5.2 TECNOLOGÍAS SUBYACENTES.
Hoy en día existe una tendencia muy marcada en las empresas por el desarrollo de
aplicaciones que trabajen sobre Internet, principalmente por la ventaja de la
distribución global de la información. Las tecnologías más 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 tecnologías proporciona un marco de
trabajo para la activación de objetos remotos, mediante la solicitud a un servidor de
aplicaciones o mediante un servidor Web para la ejecución de servicios de aplicación.
Estas tecnologías 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
programación.
181
5.2.1 SOAP Se conoce como Protocolo Simple de Acceso a Objetos, es un protocolo estándar
propuesto por Microsoft, IBM y otros al Consorcio WWW (W3C) que permite la
comunicación y la interoperabilidad entre diversas aplicaciones Web desarrolladas
bajo tecnologías 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 elección de HTTP como transporte se
debe a que es el transporte más usado, y si una organización de cualquier tipo provee
una sola salida o conexión con el mundo exterior (Internet) lo más 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 método que se invoca y
opcionalmente una serie de parámetros con tipos definidos. La respuesta a este
requerimiento se empaqueta de la misma forma, en una estructura que contiene el
resultado del método invocado
La ventaja de SOAP frente a las tecnologías subyacentes es que es más sencillo de
implementar y dado que es XML vía HTTP el vocabulario y el método de transporte
son comunes en la actualidad
Para poder utilizar SOAP en un lenguaje de programación por el lado del servidor se
debe usar alguna librería disponible que implemente el estándar.
SOAP en PHP
Para usar el estándar SOAP en php se puede realizar de dos formas:
Utilizando la librería NuSOAP
Utilizando las funciones nativas de PHP5
Utilizando la librería 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 fácilmente 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 librería NuSOAP, para implementar un cliente SOAP para
Google; hace uso del servicio de búsqueda provisto por Google a través de sus APIs
SOAP. Son muy básicos justamente para mostrar lo sencillo que es empezar a usar
esta tecnología, se pueden crear programas que realicen las búsquedas periódicamente
en lugar de hacerlas de forma manual.
182
<!--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 descripción 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 librería NuSOAP y
ubicarla en la carpeta “nusoap/” como lo indica la línea de código
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 línea de código $key = 'iwnUXUtHj3bteg5FWfBJDwui3SPeB+iy'; y esta
limitada a 1000 consultas por día, por lo que el acceso puede no ser permitido si se
rebasa el limite.
183
El cliente Web del código anterior recibe una variable de un formulario que contendrá
la cadena de búsqueda, inicializa los parámetros del servicio ofrecido por Google y
realiza la búsqueda, 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 búsqueda:
Servicios Web 1 Servicio web - Wikipedia, la enciclopedia libre
Servicio web - Wikipedia, la enciclopedia libre Un servicio web (en inglés, Web service) es un conjunto de protocolos y
estándares 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, Efemérides, juegos
online, maps, turismo Mapas de las Regiones de Chile,Canciones, ...
En la carpeta “/ejemplos nusoap” de este capitulo se encuentran 30 ejemplos de
aplicación de SOAP que vienen con la librería 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 librería nuSOAP no funciona correctamente si se tiene
habilitada la extensión SOAP nativa de PHP 5, Es decir si se va a utilizar nuSOAP se
debe verificar que la extensión 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 extensión
extension=php_soap.dll en el archivo php.ini, solo verificar que no tenga el punto y
coma al inicio de la línea.
Con el uso de las funciones SOAP nativas de PHP se consigue máxima transparencia
para el programador en el momento de crear los servicios y clientes Web. En la
siguiente tabla se muestran las funciones de la extensión SOAP de php.
184
SoapClient Constructor SoapClient->__construct() Construye un nuevo objeto SoapClient
Métodos SoapClient->__call() Llama una función SOAP (obsoleto) SoapClient->__doRequest() Realiza una petición SOAP SoapClient->__getFunctions() Devuelve una lista de funciones SOAP SoapClient->__getLastRequest() Devuelve la última petición SOAP SoapClient->__getLastRequestHeaders() Devuelve las cabeceras de la última petición 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 petición
SOAP SoapClient->__soapCall() Llama una función 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
Métodos SoapServer->addFunction() Agrega una o varias funciones para manejar
peticiones SOAP SoapServer->getFunctions() Devuelve la lista de funciones definidas SoapServer->handle() Maneja una petición 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 función hola($nombre) para mostrar un saludo a
un nombre que reciba como parámetro.
<!-- 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 función function hola($nombre) { return 'Hola, ' . $nombre; } // Se añade la función $servidor->addFunction("hola"); //Agrega la función $servidor->handle(); //Activa el servicio ?> </body> </html>
185
Iniciando el código de PHP, se crea el objeto $servidor utilizando el constructor de la
librería SOAP de PHP, pasándole como parámetro el nombre del archivo WSDL, se
debe considerar que el constructor cuenta con otras formas de instanciarse, la función
hola() es muy simple, pero ilustrativa; recibe como parámetro la variable $nombre y
retorna la cadena “Hola” concatenado con la variable que recibió como parámetro,
finalmente se pone en funcionamiento el servicio con el método handle(). Así de fácil
es ofrecer un servicio Web. En un caso práctico la función debería ser más compleja
como buscar información de una base de datos y retornarla al cliente que la solicite.
Así mismo el servicio Web en lugar de contar con solamente una función podría
contar con varias.
El cliente Web que use el servicio Web anterior podría usar un código 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 parámetro el archivo WSDL que el proveedor del servicio Web tiene
disponible para los clientes, posteriormente se llama a la función hola con el método
__soapCall() pasándole el par: índice valor; como resultado final, se visualizará la
cadena “Hola María”.
Así de fácil es implementar clientes Web con funciones nativas de PHP 5.
5.2.2 WSDL Es el lenguaje de definición de servicios Web, Es un protocolo basado en XML que
describe los accesos al Servicio Web. Es decir, es el manual de operación del Servicio
Web, porque indica cuales son las interfaces que provee el Servicio Web y los tipos
de datos necesarios para la utilización 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 sólo indica cuales dispone, sino que además da una referencia
precisa sobre ellos, para poder invocarlos usando los parámetros adecuados.
La estructura y demás detalles del estándar WSDL se encuentran en
http://www.w3.org/TR/wsdl
5.2.3 UDDI Es un modelo de directorios para Servicios Web. Es una especificación para mantener
directorios estandarizados de información acerca de los Servicios Web, sus
capacidades, ubicación, y requerimientos en un formato reconocido universalmente.
UDDI utiliza WSDL para describir las interfaces de los Web Services.
186
En la siguiente figura se muestra su relación con SOAP y WSDL.
Fig. 5.1 Relación entre los servicios Web
En la siguiente tabla se muestra la ubicación del UDDI en el contexto del resto de
protocolos en la pila de interoperabilidad de servicios Web.
Pila de
Interoperabilidad
de Servicio Web
UDDI (Universal Description, Discovery and
Integration)
SOAP (Simple Objet Access Protocol)
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
páginas 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 línea que se
puede utilizar desde las aplicaciones para descubrir de forma dinámica otros servicios
en línea, todos ellos perfectamente integrados en una interfaz XML simple. En pocas
palabras, el UDDI es una especificación para un registro distribuido de información
sobre servicios Web, el sitio oficial de UDDI es http://uddi.xml.org/
5.3 Publicación de un servicio WEB.
La publicación de un servicio Web requiere en primer lugar la creación del servicio
por medio de una o más funciones, usando una librería especifica, como puede ser las
funciones disponibles por nuSOAP o usando las funciones nativas de PHP, también
es importante crear un archivo WSDL que contenga la descripción de las funciones
disponibles, así como los parámetros para su invocación 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 razón para
consumirlos, dentro de las razones se podrían listar los siguientes:
187
Búsqueda 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 económicas, como tipo de cambio
Obtener regalías por concepto de venta de productos o artículos cuando el
usuario los adquiera desde nuestro portal
Extraer datos de una base de datos de un sitio externo.
Cuando existe la razón 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
programación del cliente Web utilizando la librería que se tenga disponible o que más
convenga, tal y como se mostró en el tema 5.2.1.
188
PREGUNTAS
1. ¿Qué es un servicio Web?
2. Mencione por lo menos cinco estándares para los servicios Web
3. ¿Cuál es la diferencia fundamental entre XML y HTML?
4. Proporcione un ejemplo de código XML
5. ¿Cuáles son las tecnologías que se consideran como subyacentes?
6. ¿Cuál es la ventaja de los servicios Web sobre las tecnologías subyacentes?
7. ¿Qué es SOAP?
8. ¿SOAP solamente se puede implementar en PHP?, si, no, porque
9. ¿Cómo se puede implementar SOAP en PHP?
10. Explique de manera general como se programa un servicio Web SOAP cliente
11. ¿Es posible utilizar simultáneamente diferentes librerías 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 relación entre SOAP, UDDI y WSDL
16. ¿Dónde 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. Según el caso de estudio en desarrollo, buscar que servicio Web cliente podría
consumir de algún otro sitio externo y programarlo utilizando SOAP
2. Según el caso de estudio en desarrollo, programar con SOAP un servicio
Web Servidor que retorne una porción de datos de su base de datos para los
clientes Web que lo requieran, además escribir el archivo WSDL.
3. Implementar el cliente Web SOAP que demuestre la funcionalidad del
servicio Web servidor implementado en la pregunta anterior.
189
Anexo A.- Programación de un caso de estudio
VENTAS EN LINEA
Es una pequeña aplicación Web dinámica de venta de productos de computación en
línea creado para ilustrar los conocimientos que se adquieren durante un curso de
Programación Web, entre los que se pueden mencionar, programación con HTML,
manejo de formularios y objetos de formulario, envío de datos a formularios con los
métodos POST y GET, validación de los datos del formulario usando eventos de
Java Script, programación en PHP con acceso a base de datos, reportes con PDF, etc.
Consta de una página de bienvenida accesible por cualquier usuario, donde se pueden
conocer los productos que se encuentran en promoción, o filtrarlos en función de la
categoría a la cual pertenecen
Ventas en línea maneja como medidas de seguridad, la autenticación, el manejo de
sesiones y la encriptación de la contraseña de los usuarios en el momento de su
autenticación.
Cuenta con dos tipos de usuarios:
Clientes: Los clientes pueden registrarse si no se encuentran registrados, y una
vez que se hallan autenticado podrán modificar sus datos personales, su
contraseña, comprar los productos en existencia y ver las facturas que se le
hallan emitido.
Administradores: Podrán cambiar sus datos personales, su contraseña, 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 implementación se usan tres plantillas, una plantilla para los usuarios no
registrados, otra para los clientes y una más 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. También 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 permitirán su utilización 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
Después de unos segundos la base de datos se creará y podrá ser utilizada.
190
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 línea esta listo para probarse.
Los detalles de la base de datos son los siguientes:
Modelo Entidad – Relación
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 categoría *
Descripcion V 30 Descripcion de la categoría
producto
CAMPO TIPO LONGITUD DESCRIPCION LLAVE
191
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 categoría
Jpg V 30 Archivo JPG
promocion T Indica si esta en promosión
clientes
CAMPO TIPO LONGITUD DESCRIPCION LLAVE
id_clie V 13 Clave del cliente *
clave V 40 Contraseña de acceso
nom V 40 Nombre del proveedor dir V 30 Dirección del proveedor
tel V 15 Teléfono del proveedor
factura
campo Tipo Longitud Descripcion Llave
id_fac
fecha
I
D
Num. de la fact.de comp.
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 Contraseña de acceso nom V 40 Nombre del proveedor
dir V 30 Dirección del proveedor
tel V 15 Teléfono del proveedor
Donde:
V=varchar I=int S=smallint T=tinyint F=float D=date
192
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),
193
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 ESPAÑOL','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');
194
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 aplicación Web esta programado y organizando de tal forma que las paginas
Web sean facilmentelas localizados y analizados según la siguiente estructura de
directorios.
En la raíz 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 descripción de la base de datos y el script MySQL para
su construcción 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
páginas
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 distribución del diseño del sitio Web se muestran solamente
las siguientes tres pantallas principalas:
195
Para usuarios no registrados
Para usuarios Clientes
Para usuario Administradoras
Se recomienda instalar y revisar el cógido fuente hallado en las carpetas indicadas
para comprender con mayor detalles sobre la funcionalidad del sitio.
![Libro - Programacion Concurrente (Traducido) [Andrews]](https://static.fdocuments.mx/doc/165x107/557212af497959fc0b90b9b5/libro-programacion-concurrente-traducido-andrews.jpg)
