• Author / Uploaded
• Deyvid Fifa Che

• Categories
• Servidor web
• HTML
• Protocolo de Transferencia de Hipertexto
• Cookie HTTP
• Lenguaje de marcado

Citation preview

---

1

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: 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 registradapor Sun Microsystems. Unix: Es una marca registradapor The Open Group. Windows, Microsoft SQL Server, Microsoft Acces yVisual Basic

2

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.

3

Contenido

1.- Introducción a las tecnologías Web. 1.1 Perspectiva histórica del Internet 1.2 Protocolo http (protocolo de transferencia de hipertexto). 1.2.1 Arquitectura del WWW. 1.2.2 URL’s. 1.2.3 Métodos http. Persistencia en http –Cookies. 1.3 Introducción al HTML. Lenguaje de despliegue del Web 1.3.1 HTML como un tipo SGML. 1.3.2 Elementos del lenguaje HTML. 1.3.3 Tablas en HTML. 1.3.4 Formularios. 1.4 Evolución del desarrollo de aplicaciones Web. 1.5 Hojas de estilo en cascada e introducción al XML.

7 8 9 15 16 18 19 19 21 27 31 38 39

2.- Desarrollo de aplicaciones Web 2.1 Arquitectura de las aplicaciones Web. 2.2 Lenguajes de programación del lado del cliente. 2.3 Lenguajes de programación del lado del servidor. 2.4 Ambientes para el desarrollo de aplicaciones Web. 2.5 Metodologías para el desarrollo de aplicaciones Web 2.6 Aspectos de seguridad.

51 52 53 55 59 60 69

3.- Programación del lado del servidor. 3.1 Procesamiento del lado del servidor. 3.2 Conceptos básicos de la herramientade 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.

89 90 92 95 100 107 109 120 120 124 127

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.

153 154 158 166

140 143

4

4.4 Eventos con lenguaje Script. 4.5 Validación de entrada de datos dellado del cliente. 4.6 Consideraciones del soporte delnavegador.

166 170 174

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.

178 179 180 181 185 185 186 186

Anexo A.- Programación de un caso de estudio

189

5

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 tresdonde 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”

6

1 Introducción a las tecnologías Web.

7

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ónWEB, 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. 8

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.

9

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.

10



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 ( significa retorno de carro y avance de línea): MÉTODO VERSIÓN URL ENCABEZADO: Valor . . . ENCABEZADO: Valor Línea en blanco CUERPO DE LA SOLICITUD

Para obtener un recurso con el URL http://www.itistmo.edu.mx/index.html 1. Se abre un socket con el host www. itistmo.edu.mx, puerto 80 que es el puerto por defecto para HTTP. 2. Se 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 encabezado

del 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 11

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 servidor. Cada una 12



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 ENCABEZADO: Valor . . . ENCABEZADO: Valor Línea en blanco 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

Instituto Tecnológico del Istmo

(Contenido) . . .

Al recibirse la respuesta, el servidor cierra la comunicación. Encabezados de respuesta Nombre del Descripción encabezado 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

13

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 10x 20x

Mensaje de información Éxito

200

OK

201

CREATED

202

ACCEPTED

203

PARTIAL INFORMATION

204

NO RESPONSE

205

RESET CONTENT

206

PARTIAL CONTENT

30x

Redirección

301

MOVED

302

FOUND

303

METHOD

304

NOT MODIFIED

40x 400

Error debido al cliente BAD REQUEST

401

UNAUTHORIZED

402

PAYMENT REQUIRED

Descripción Estos códigos no se utilizan en la versión 1.0 del protocolo Estos códigos indican la correcta ejecución de la transacción La solicitud se llevó a cabo de manera correcta Sigue a un comando POST e indica el éxito, la parte restante del cuerpo indica la dirección URL donde se ubicará el documento creado recientemente. La solicitud ha sido aceptada, pero el procedimiento que sigue no se ha llevado a cabo Cuando se recibe este código en respuesta a un comando de GET indica que la respuesta no está completa. El servidor ha recibido la solicitud, pero no hay información de respuesta El servidor le indica al navegador que borre el contenido en los campos de un formulario Es una respuesta a una solicitud que consiste en el encabezado range. El servidor debe indicar el encabezado content-Range Estos códigos indican que el recurso ya no se encuentra en la ubicación especificada Los datos solicitados han sido transferidos a una nueva dirección Los datos solicitados se encuentran en una nueva dirección URL, pero, no obstante, pueden haber sido trasladados Significa que el cliente debe intentarlo con una nueva dirección; es preferible que intente con otro método en vez de GET Si el cliente llevó a cabo un comando GET condicional (con la solicitud relativa a si el documento ha sido modificado desde la última vez) y el documento no ha sido modificado, este código se envía como respuesta. Estos códigos indican que la solicitud es incorrecta La sintaxis de la solicitud se encuentra formulada de manera errónea o es imposible de responder 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 El cliente debe reformular la solicitud con los datos de 14

403

FORBIDDEN

404

NOT FOUND

50x

Error debido al servidor

500

INTERNAL ERROR

501

NOT IMPLEMENTED

502

BAD GATEWAY

503

SERVICE UNAVAILABLE

504

GATEWAY TIMEOUT

pago correctos El acceso al recurso simplemente se deniega Un clásico. El servidor no halló nada en la dirección especificada. Se ha abandonado sin dejar una dirección para redireccionar... :) Estos códigos indican que existe un error interno en el servidor El servidor encontró una condición inesperada que le impide seguir con la solicitud (una de esas cosas que les suceden a los servidores...) El servidor no admite el servicio solicitado (no puede saberlo todo...) El servidor que actúa como una puerta de enlace o proxy ha recibido una respuesta no válida del servidor al que intenta acceder 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) 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 15

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 WideWeb, 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. 16

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, mailto:[email protected] me enviaría un mensaje.

la

URL

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 computadorasexternas 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 17

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

Contador de visitas.htm - Bienvenida personalizada.htm - Última visita.htm - Personalización de colores.htm

18

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 19

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

20

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. Comentarios. Esto se escribe y

Formato

FORMATO DE LA PAGINA Instituto Tecnológico del Istmo

Este párrafo es muy sencillo. Por el momento no se que tendrá, pero dentro de poco pondré aquí muchas cosas interesantes.

Instituto Tecnológico del Istmo

Este párrafo esta mejor (chispas). Por el momento no se que tendrá, pero dentro de poco pondré aquí muchas cosas interesantes.

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

Venta en línea





25

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

Etiqueta 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 de cada una de los marcos contiguos al borde a eliminar o incluyendo el parámetro FRAMEBORDER=0 en el . 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 ROWSse 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.

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

Etiqueta

26

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 NAME SRC SCROLLING

NORESIZE FRAMEBORDER

MARGINWIDTH MARGINHEIGHT

Utilidad Asigna un nombre a un marco para identificarlo y referenciarlo después. Indica la dirección del documento HTML que ocupará el marco. Decide si se colocan o no barras de desplazamiento al marco. Su valor por defecto es AUTO, que deja al navegador la decisión. Las otras opciones son YES y NO. Si se especifica el usuario no podrá cambiar de tamaño el marco. Al igual que su homónimo en la etiqueta , si se iguala a cero se eliminará el borde con todos los marcos contiguos que tengan también este valor a cero. Permite cambiar los márgenes horizontales dentro de un marco. Se representa en pixels. 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 esuna 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 fila 2

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

27

celda(2,1) celda(2,2) celda(2,3) Lo primero que se tiene que hacer para introducir una tabla es decirle al navegador dónde empieza y dónde acaba esta; esto se consigue mediante la etiqueta de inicio

y su correspondiente de cierre . Seguidamente indicarle cuantas filas se va a tener en la tabla, cosa que se hace con las etiqueta de inicio de fila y su correspondiente de cierre de fila, por lo que se debe insertar una pareja de etiquetas por cada fila que tenga la tabla. Por último, dentro de cada fila indicar cuantas celdas va a haber, que inicialmente deben corresponderse con el número de columnas que se desea tenga la tabla. Esto se consigue mediante las parejas de etiquetas y . De esta forma, y siguiendo con la tabla inicial de Ejemplo, el esquema de etiquetas sería el siguiente:

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

Este es el esquema general de toda tabla simple, que traducido a código HTML quedaría de la forma:

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

La cantidad de celdas debe ser el mismo en cada uno de las filas, para que la tabla tenga la misma cantidad de columnas. Se debe definir la cantidad de columnas que va a tener la tabla mediante el número de celdas que se defina en la primera fila.

28

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 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 background bgcolor border bordercolor cellpadding cellspacing height width

Alinea horizontalmente la tabla con respecto a su entorno. Permite colocar un fondo para la tabla a partir de un enlace a una imagen. Da color de fondo a la tabla. Define el número de píxel del borde principal. Define el color del borde. Define, en píxel, el espacio entre los bordes de la celda y el contenido de la misma. Define el espacio entre los bordes (en píxel). Define la altura de la tabla en píxel o porcentaje. 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 valign bgcolor bordercolor

Justifica el texto de la celda del mismo modo que si fuese el de un párrafo. Podemos elegir si queremos que el texto aparezca arriba (top), en el centro (middle) o abajo (bottom) de la celda. Da color a la celda o línea elegida. 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 height width colspan rowspan

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

29

Algunos de los atributos usan la siguiente sintaxis:

Atributo=”Valor” Donde el Valorpuede 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 unapantalla 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:

Manejo de Formulario



37

REGISTRO DE PRODUCTOS
CLAVE
NOMBRE
UNIDAD	PIEZA CAJA
PRECIO
EXISTENCIA
CATEGORIA	DISCOS DUROS MOUSES TARJETAS MADRES
IMAGEN
PROMOCION

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 avances en tecnología demandan cada vez aplicaciones más rápidas, ligeras y robustas que permitan utilizar el Web.

38

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 encargande gestionar el acceso y manipulación de la base de datospara 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 Weba 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 numerosasventajas, ya que obliga a crear documentos bien definidos y con significadocompleto. Además, mejora la accesibilidad deldocumento, reduce la complejidad de su mantenimiento y permite visualizar el mismodocumento en infinidad de dispositivos diferentes. Al crear una página Web, se utiliza en primer lugar el lenguaje HTML para marcar loscontenidos, es decir, para designar la función de cada elemento dentro de la página: párrafo,titular, texto destacado, tabla, etc. Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el aspecto de cadaelemento: color, tamaño y tipo de letra del texto, separación horizontal y vertical entreelementos, posición de cada elemento dentro de la página, etc.

39

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.

Paginas con Estilos utilazando CSS

Página con CSS Interna

Los estilos en una página le dan la presentación a la misma

40

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

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

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.000pá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 . 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 para enlazar el archivo CSS externo que tiene los estilos que va a utilizar la página:

Paginas con CSS en línea

Pagina con CSS en línea

Los estilos en una página le dan la presentación a la misma

Esta forma de incluir CSS directamente en los elementos HTML solamente se utiliza en determinadas situaciones en las que se debe incluir un estilo muy 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:

42

Fig. 1.5.- Partes de una regla básica CSS Un archivo CSS puede contener infinitas reglas CSS, cada regla puede contener infinitosselectores 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 definirdiferentes estilos para diferentes medios o dispositivos: pantallas, impresoras, móviles,proyectores, etc. Además, CSS define algunas propiedades específicamente para determinados medios, como porejemplo la paginación y los saltos de página para los medios impresos o el volumen y tipo de vozpara los medios de audio. La siguiente tabla muestra el nombre que CSS utiliza para identificarcada medio y su descripción: Medio all braille embosed handheld print projection screen speech tty tv

Descripción Todos los medios definidos Dispositivos táctiles que emplean el sistema braille Impresoras braille Dispositivos de mano: móviles, PDA, etc. Impresoras y navegadores en el modo "Vista Previa para Imprimir" Proyectores y dispositivos para presentaciones Pantallas de computadora Sintetizadores para navegadores de voz utilizados por personas discapacitadas Dispositivos textuales limitados como teletipos y terminales de texto Televisores y dispositivos con resolución baja

Los medios más utilizados actualmente son screen (para definir el aspecto de la página enpantalla) 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 {

43

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

El ejemplo anterior establece que el 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 elmargen 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 utilizahabitualmente, ya que es difícil que un mismo estilo se pueda aplicar a todos los elementos deuna 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 delselector. 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 losselectores. En el siguiente ejemplo, los títulos de sección h1, h2 y h3 comparten los mismosestilos: h1, h2, h3 {

44

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

Es importante entonces conocer algunas propiedades que pueden afectar a las etiquetas HTML, para así utilizarlos en las hojas de Estilo en cascada, mismos que se muestran en base a la siguiente 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- Distancia mínima entre un bloque y Tamaño, right, margin-bottom, los demás elementos. Tanto margin porcentaje o auto. margin-left, defecto es margin: top right como margins() se utilizan para Por bottom left cambiar todos estos atributos a la vez. cero. padding-top, padding- Distancia entre el borde y el Tamaño, right, padding-bottom, contenido de un bloque. porcentaje o auto. padding-left, Por defecto es padding: top right bottom left cero. border-top-width, Anchura del borde de un bloque. numérico border-right-width, border-bottom-width, border-left-width, border-width: top right bottom left border-style

border-color width, height

Estilo del borde de un bloque.

Color del borde de un bloque. Tamaño de un bloque. Su mayor utilidad está en su aplicación a un elemento gráfico.

float

Justificación del contenido de un bloque.

clear

Permiso para que otro elemento se pueda colocar a su izquierda o derecha.

none, solid

o 3D, por defecto ninguno (none). cualquier color Tamaño, porcentaje o auto, automático por defecto. left, right o none, por defecto ninguna. left, right, both o none, por defecto ninguno.

PROPIEDADES DE TIPO DE LETRA Las propiedades del tipo de letra que el usuario va a ver son las siguientes: Propiedad Descripción Posibles valores 45

fontfamily font-size

fontweight font-style

Tipo de letra (que Lista de tipos, ya sean genéricos o no, separados puede ser genérico) por comas. Tamaño del tipo de xx-small, x-small, small, medium, large, xlarge, xx-large, tamaño relativo o tamaño letra. absoluto. Por defecto medium. Grosor del tipo de normal, bold, bolder, lighter o 100-900 (donde letra (negrita). 900 es la negrita más gruesa). Por defecto normal. Estilo del tipo de normal, italic, italic small-caps, oblique, oblique small-caps o small-caps. Por defecto letra (cursiva). normal.

Cabe recordar que los tipos genéricos son serif, sans-serif, cursive, fantasy y monospace. Cada uno de estos tipos serán equivalentes a alguno que pueda tener instalado lacomputadora 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. textEfectos variados sobre none, underline (subrayado), overline (como decoration el texto. subrayado, pero por encima), line-through (tachado) o blink (parpadeante); por defecto ninguno. verticalPosición vertical del baseline (normal), sub (subíndice), super align texto. (superíndice), top, text-top, middle, bottom, text-bottom o un porcentaje. Por defecto texttransform

text-align text-indent

baseline capitalize

Transforma el texto a (pone la primera letra en mayúsculas o mayúsculas), uppercase (convierte todo a minúsculas. mayúsculas), lowecase (a minúsculas) o none, por defecto no hace nada. Justificación del texto. left, right, center o justify Tabulación con que tamaño o porcentaje, por defecto cero. aparece la primera línea del texto.

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 Dirección del archivo que contiene la color de fondo. imagen o un color. 46

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

PROPIEDADES DE 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 inline, block, list y none (que (como ), un bloque (

) o un 'apaga' el elemento) elemento de una lista (

). list-style Estilo de un elemento de una disc, circle, square, decimal, lista, pudiendo incluir un gráfico lower-roman, upper-roman, loweralpha, upper-alpha, none o la al comienzo del mismo. dirección de un gráfico whiteDecide como se manejan los normal y pre space espacios, si de manera normal o como sucede dentro de la etiqueta .

47

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 ejemplosplanteadosdonde 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? 33. ¿Cuáles son los parámetros de un formulario, así como su descripción? 48

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.

49

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.htmlcontenga el logotipo y nombre de la empresa, menú.htmlas posibles opciones de menú que podría contener el sistema y finalmente principal.htminformació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.

50

2 Desarrollo de aplicaciones Web

51

2.1 ARQUITECTURA DE LAS APLICACIONES WEB. Al hablar de arquitecturas de aplicaciones Web resulta adecuado presentarlas dentro de las aplicaciones multinivel. Los sistemas 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

52

Fig. 2.1.- Arquitectura Multinivel. La arquitectura de las aplicaciones Web suelen presentar un esquema de tres niveles. El primer nivel consiste en la capa de 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énlos que se muestran en la siguiente tabla.

53

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 . Por ejemplo, si en el código de una página Webse incluye la sentencia

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 utilizado 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 54

independientes del sistema operativo delacomputadora donde se ejecutan. Además, Java es más potente que Javascript, por lo que el número de aplicaciones de los applets podrá ser mayor. Como desventajas en relación con Javascript cabe señalar que los applets son más lentos de procesar y que tienen espacio muy delimitado en la página donde se ejecutan, es decir, no se mezclan con todos los componentes de la página ni tienen acceso a ellos. Es por ello que con los applets de Java no 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.

55

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

56

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 . 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ñolsignifica Páginas de Servidor Java. Es, pues, una tecnología orientada a crear páginas Web con programación en Java.

57

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, dimension es, 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.

58

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 Webrobustas 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 aplicacionesWeb más populares son:  Adobe Dreamweaver.- Es el estándar de la industria debido a su código limpio y características avanzadas.

59



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 sitioWeb.  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,

60

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?

61

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 unabase 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) 62

  

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

 CREAR Y ORGANIZAR CONTENIDO La parte 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ómolos usuarios esperarían encontrar la información en su sitio y diseñaren 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.

63

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. Página Principal

Sesión del Cliente

Datos de Sesión

Productos

Sesión del Administrador

Compras

Datos de Sesión

Clientes

Seleccionar Producto

Facturas

Detalle de Facturas

Fig. 2.6.- Mapa general del sitio Ventas en línea En la figura se muestrael 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.

64

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

 PRODUCIR UN PROTOTIPO Una vez que el diseño esta aprobado y el documento estánlistos, 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 HTMLy 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. 66

 







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

67







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 agente en el sitio y ver lo sencillo que les es encontrar información o completar tareas. Las pruebas de usuario se llevan acabo 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 dela 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: 68

   

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

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.

70

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 unacomputadora, 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 analizaranmá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. 71

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ánobligados a volver a escribir el sitio Web y a comenzar desde cero. 72

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

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 74

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

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 SEGURIDAD

ENTRE

USABILIDAD,

RENDIMIENTO,

COSTE

Y

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

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 Ala 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 77

de seguridad, cuanto más seguro son los métodos másproblemá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 78

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. Texto sin procesar

Algoritmo de encriptación

Texto cifrado

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 79

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 80

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.

81

CERTIFICADOS DIGITALES La posibilidad de verificar que un mensaje no se ha alterado y que procede de un usuario o de un equipo dado es un gran avance. Para las interacciones comerciales, 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 sequiere 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 82

Se puede comenzar a utilizar SSL de forma inmediata si genera certificadospropios. 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á guardarloe 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 83

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.

84

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

PREGUNTAS 1. ¿En qué consiste una arquitectura de aplicaciones de dos niveles? 2. ¿En qué consiste una arquitectura de aplicaciones de tres niveles? 3. ¿Qué elementos intervienen en el primer nivel de una 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? 86

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?

87

EJERCICIOS PROPUESTOS. 1. Instalar un servidor Web en ambiente Windows, describir el procedimiento y probar su funcionalidad. 2. Instalar un servidor Web en ambiente Unix , describir el procedimiento y probar su funcionalidad. 3. Siguiendo la 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.

88

3 Programación del lado del servidor.

89

3.1PROCESAMIENTO 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 deHTML, pero éstas desaparecen cuando el cliente recibela 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 ladodel servidor (PHP, ASP, JSP, etc.)  Ejecuta los posibles script y añade el resultado final a la página Webresultante.  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, laspreferencias 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:

90

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

PROCESAMIENTO DEL SERVIDOR

SE EJECUTA EN EL SERVIDOR

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 91

poderoso, capaz de interactuar con cualquier manejador de base de datos y además gratuito.

3.2CONCEPTOS 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 programasse 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í. 92

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 DocumentRoot "C:/wamp/www"

SIGNIFICADO Especifica la ruta donde ubicara el sitio web DirectoryIndex index.php index.php3 Indica el orden de prioridad a evaluar de index.html index.htm index.html.var la página de inicio Listen 80 Indica el número de puerto con el cual funcionara el servidor Web LoadModule php5_module Carga el modulo de PHP, para ligarlo "c:/wamp/php/php5apache2_2.dll" con el servidor apache Tabla 3.4.- 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 coma se consideran como comentarios. Algunos de los parámetros contenidos en este archivo se muestran en la tabla 3.5

93

PARAMETRO register_globals = Off

SIGNIFICADO 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 = Especifica la ruta donde ubicará el c:/wamp/bin/mysql/mysql5.0.51b servidor MySQL Datadir = Especifica la ruta donde ubicará las c:/wamp/bin/mysql/mysql5.0.51b/data bases de datos creados en MySQL Port 3306 Indica el 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: localhosto 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

94

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

95



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

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 $a + $b

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

96

Ejemplo $a == $b $a === $b $a != $b $a $b $a < $b $a > $b $a = $b

Nombre Igualdad Identidad Distinto Distinto Menor que Mayor que Menor o igual Mayor o igual

Tabla 3.8. Operadores de comparación Ejemplo:

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: