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

2

Agradecimientos Este libro no 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

3.Programación del lado del servidor. 4. 1.2.Contenido 1. 1..3 Introducción al HTML. 2. 1. Lenguaje de despliegue del Web 1.. 3.7 Ejemplos prácticos..1 Procesamiento del lado del servidor.6 Aspectos de seguridad. 2.3.2 URL’s. 1. 1.3.3 Métodos http.5 Metodologías para el desarrollo de aplicaciones Web 2. 3.2 Modelo de objetos con lenguaje Script. 4.1 HTML como un tipo SGML. 1..6 Funciones y librerías.5 Arreglos. 1. 3.8 Procesado de formularios.5 Hojas de estilo en cascada e introducción al XML. 3. 3.2. 2. Persistencia en http –Cookies.2 Conceptos básicos de la herramienta de desarrollo.2 Elementos del lenguaje HTML.1 Arquitectura de las aplicaciones Web.4 Ambientes para el desarrollo de aplicaciones Web. 1.4 Formularios.4 Evolución del desarrollo de aplicaciones Web.9 Sesiones.2. 3. 2. 1. 2.10 Conectividad entre el servidor Web y el servidor de base de datos. 7 8 9 15 16 18 19 19 21 27 31 38 39 51 52 53 55 59 60 69 89 90 92 95 100 107 109 120 120 124 127 140 143 153 154 158 166 4 . 4. 3.3.2 Protocolo http (protocolo de transferencia de hipertexto). 1.3 Operadores. 3.1 Lenguaje Script del cliente. 3. 3.Introducción a las tecnologías Web.Desarrollo de aplicaciones Web 2.1 Arquitectura del WWW.12 Seguridad.3 Tablas en HTML.Procesamiento del lado del cliente.4 Sentencias.3 Objetos lenguaje Script ínter construidos.1 Perspectiva histórica del Internet 1. 3.2 Lenguajes de programación del lado del cliente.11 Manejo de archivos.3.3 Lenguajes de programación del lado del servidor. 4. 3.

2.4.2 Tecnologías subyacentes.3 UDDI 5.4 Eventos con lenguaje Script.Programación de un caso de estudio 166 170 174 178 179 180 181 185 185 186 186 189 5 .2.3 Publicación de un servicio WEB.1 SOAP 5.1 Visión general de servicios Web XML. Unidad 5. 5. 4..5 Validación de entrada de datos del lado del cliente.Servicios Web XML.6 Consideraciones del soporte del navegador.2 WSDL 5.2. 5. 5..4 Consumo de un servicio WEB. 4. 5. Anexo A.

Cada tema expuesto viene acompañado de uno o más ejercicios. como por el lado del servidor. 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. contiene un lenguaje de programación tanto por el lado del cliente. Por último en el capitulo cinco los servicios Web como estandar de comunicación entre aplicaciones usando XML. el servidor y la seguridad necesaria para evitar el acceso de intrusos al sistema. marcos. 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. cualquier comentario o sugerencia acerca del contenido del material lo puede hacer a la siguiente dirección de correo electrónico: gastondv@hotmail. sin perder de vista los elementos necesarios para hacer del sistema un sistema confiable. tales como el manejo de tablas. Este libro está organizado de la siguiente forma: Desde el primer capítulo se abordan ya aspectos prácticos del lenguaje HTML. desde el punto de vista del cliente.com “LA EDUCACIÓN Y LA TECNOLOGÍA SON LA LLAVE PARA LA SUPERACIÓN PERSONAL” 6 . la implementación de sistemas de información involucra diversos lenguajes para su construcción. se profundiza con ejemplos por lo menos en un lenguaje de entre los varios existentes. Espero que al terminar de leer este libro se cubran las expectativas planteadas. 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. formularios y hojas de estilos en cascada. abordando la seguridad Web. Es en el capitulo tres donde se aborda la programación por el lado del servidor en detalle.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. En el capitulo dos se da un panorama general de la programación Web. Un caso de estudio. En el capítulo cuarto se trata sobre uno de los lenguajes más utilizados para la programación por el lado del cliente. 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.

1 Introduccion a las tecnologías Web. 7 .

se profundiza en los detalles para la creación de aplicaciones WEB utilizando el protocolo HTTP. 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). 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. para realizar actividades de Investigación de tipo privado exclusivamente.1 solo como referencia. Fig. como es el caso del WWW. esta aplicación. siendo así TCP/IP en realidad un conjunto de protocolos..1. usa el Protocolo de Trasferencia de Hipertexto (HTTP) para poder funcionar. El protocolo TCP/IP se ha modelado representando a una computadora en la red como un conjunto de capas. En este libro. Una computadora conectada a Internet se modela mediante un conjunto de capas. 8 . hasta la actualidad que contiene millones. en donde se encuentran ubicados diferentes protocolos de comunicación. que hacen cada vez más atractiva su utilización.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. 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. y a medida que pasan los años aparecen nuevas aplicación.1 Modelo TCP/IP y conjunto de protocolos El incremento de usuarios en Internet de manera exponencial. 1. de tal forma que una aplicación WWW ó aplicación WEB. así como las demás existentes requieren de un protocolo hallado en la capa de aplicación para su funcionalidad.1. teniendo a la capa de aplicación como la capa con la cual interactúa el usuario. 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”. más sin embargo se muestran en la figura 1. es decir solamente con esta capa se pueden utilizar las aplicaciones que se encuentran disponibles en la red. quedando los otros protocolos existentes del TCP/IP fuera del alcance.

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. 9 .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. El propósito del protocolo HTTP es permitir la transferencia de archivos (principalmente. mismos que se pueden hallar en la red para su análisis o revisión. En el RFC 2616 se especifica la versión 1.1.2 PROTOCOLO HTTP (PROTOCOLO DE TRANSFERENCIA DE HIPERTEXTO) Desde 1990. requiriendo por lo tanto que existan más especialistas en esta materia para cubrir esta necesidad. otras empresas están en proceso de desarrollo de sus aplicaciones WEB. así por ejemplo el protocolo HTTP se describe en el RFC 2616. sin embargo a medida que la tecnología va cambiando. cambian también las necesidades de las empresas. entre un navegador (el cliente) y un servidor Web localizado mediante una cadena de caracteres denominada dirección URL.Cada protocolo del TCP/IP se describe en un documento conocido como RFC (Request For Comment) y un número. 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. en formato HTML). 1. La versión 0. el protocolo HTTP es el protocolo más utilizado en Internet.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).

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. etc.  10 .2. el método que se aplicará y la versión del protocolo utilizada. la comunicación se realiza en más etapas si se considera el procesamiento de la solicitud en el servidor. sistema operativo.). Solicitud HTTP Una solicitud HTTP es un conjunto de líneas que el navegador envía al servidor. Dado que sólo nos ocupamos del protocolo HTTP.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.. Cada una de estas líneas está formada por un nombre que describe el tipo de encabezado. Incluye:  Una línea de solicitud: es una línea que especifica el tipo de documento solicitado. HTTP/1. no se explicará la parte del procesamiento en el servidor en esta sección.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. seguido de dos puntos (:) y el valor del encabezado. 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.

texto/html). 2.mx. Por lo tanto. una solicitud HTTP posee la siguiente sintaxis (<crlf> significa retorno de carro y avance de línea): MÉTODO VERSIÓN URL<crlf> ENCABEZADO: Valor<crlf> .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 Accept del Descripción Tipo de contenido aceptado por el navegador (por ejemplo. Consulte Tipos de MIME Juego de caracteres que el navegador espera Codificación de datos que el navegador acepta Idioma que el navegador espera (de forma 11 Accept-Charset Accept-Encoding Accept-Language . permiten que se envíen datos por un comando POST durante la transmisión de datos al servidor utilizando un formulario.edu. por ejemplo. itistmo.edu.itistmo. ENCABEZADO: Valor<crlf> Línea en blanco <crlf> CUERPO DE LA SOLICITUD Para obtener un recurso con el URL http://www.html 1. 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. . puerto 80 que es el puerto por defecto para HTTP.mx/index.0 From: yo@miHost. Se abre un socket con el host www.html HTTP/1.com User-Agent: mozilla/5. Se envía un mensaje en el estilo siguiente : GET /index. .

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. 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. Cada una 12 . texto/html). por ejemplo. el nombre y la versión del navegador y el sistema operativo Date Forwarded From From Link Orig-URL Referer User-Agent RESPUESTA HTTP Una respuesta HTTP es un conjunto de líneas que el servidor envía al navegador. Consulte Tipos de MIME Fecha en que comienza la transferencia de datos Utilizado por equipos intermediarios entre el navegador y el servidor Permite especificar la dirección de correo electrónico del cliente Permite especificar que debe enviarse el documento si ha sido modificado desde una fecha en particular Vínculo entre dos direcciones URL Dirección URL donde se originó la solicitud Dirección URL desde la cual se realizó la solicitud Cadena con información sobre el cliente. inglés) Authorization Content-Encoding Content-Language Content-Length Content-Type Identificación del navegador en el servidor Tipo de codificación para el cuerpo de la solicitud Tipo de idioma en el cuerpo de la solicitud Extensión del cuerpo de la solicitud Tipo de contenido del cuerpo de la solicitud (por ejemplo.predeterminada.

 de estas líneas está formada por un nombre que describe el tipo de encabezado. 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 . . texto/html). . El cuerpo de la respuesta: contiene el documento solicitado. 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. . el servidor cierra la comunicación.0 200 OK Date: Fri. Por lo tanto. 05 Dec 2008 23:59:59 GMT Content-Type: text/html Content-Length: 1221 <html> <head> <title>Instituto Tecnológico del Istmo</title> </head> <body> (Contenido) . una respuesta HTTP posee la siguiente sintaxis VERSIÓN-HTTP CÓDIGO EXPLICACIÓN <crlf> ENCABEZADO: Valor<crlf> . </body> </html> Al recibirse la respuesta. seguido de dos puntos (:) y el valor del encabezado. . ENCABEZADO: Valor<crlf> Línea en blanco <crlf> CUERPO DE LA RESPUESTA A continuación se encuentra un ejemplo de una respuesta HTTP: HTTP/1.

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.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. El servidor ha recibido la solicitud. este código se envía como respuesta. La solicitud ha sido aceptada. 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.Son los códigos que se ven cuando el navegador no puede mostrar la página solicitada. Código Mensaje 10x 20x 200 201 Mensaje de información Éxito OK CREATED Descripción Estos códigos no se utilizan en la versión 1. pueden haber sido trasladados Significa que el cliente debe intentarlo con una nueva dirección. no obstante. la parte restante del cuerpo indica la dirección URL donde se ubicará el documento creado recientemente. pero. 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. 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. 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 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. El cliente debe reformular la solicitud con los datos de autorización correctos El cliente debe reformular la solicitud con los datos de 14 202 203 204 205 206 ACCEPTED PARTIAL INFORMATION NO RESPONSE RESET CONTENT PARTIAL CONTENT Redirección MOVED FOUND 30x 301 302 303 METHOD 304 NOT MODIFIED 40x 400 401 Error debido al cliente BAD REQUEST UNAUTHORIZED 402 PAYMENT REQUIRED .

o cualquier otra. Microsoft Acces. Se ha abandonado sin dejar una dirección para redireccionar.. el cliente realiza la petición al servidor.. JSP.. Por supuesto dependiendo del lenguaje utilizado para el acceso a la base de datos será el motor que se debe usar. :) 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. En el caso de una aplicación Web dinámica. así se puede utilizar PHP o cualquiera de los otros lenguajes para acceder y manipular una base de datos de MySQL. consta de tres elementos principales que son: un cliente Web. existiendo un motor por cada lenguaje de programación. auxiliandose para ello del 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.) El servidor no admite el servicio solicitado (no puede saberlo todo. El servidor no halló nada en la dirección especificada. finalmente el servidor Web responde al cliente Web en formato HTML. un Servidor Web y un servidor de base de datos. el servidor utilizando el motor de base de datos accese a la base de datos. atravez un motor de base de datos que sirve como interfaz entre ambos..1 ARQUITECTURA DEL WWW La arquitectura de una aplicación Web dinámica. Microsoft SQL server.. 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.403 404 FORBIDDEN NOT FOUND 50x 500 Error debido al servidor INTERNAL ERROR 501 502 NOT IMPLEMENTED BAD GATEWAY 503 SERVICE UNAVAILABLE 504 GATEWAY TIMEOUT pago correctos El acceso al recurso simplemente se deniega Un clásico. el motor se encarga de traducir el lenguaje utilizado durante la programación Web dinamica. el servidor Web no es capaz de respondor por si solo las peticiones del cliente Web. Cuando una aplicación Web es dinámico. como pueden ser PHP.) 1. mismo que deberá instalarse y configurarse para operar de manera coordinada con el servidor Web y el servidor de base de datos.) 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. ASP al lenguaje del servidor de base de datos que se este utilizando.. si se tratará de una aplicación Web estática se elimiría el servidor de base de datos... 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 . quien responde y entrega los resultados al servidor Web.2.

de esta forma el cliente nunca recibirá respuesta en el lenguaje de programación Web dinámica.2. 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. Fig.Arquitectura del www 1. localizador uniforme de recurso. como documentos e imágenes en Internet. Es una secuencia de caracteres. 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.2 URL’s. para su localización. URL significa Uniform Resource Locator.respuestas en formato HTML. es decir.3. que se usa para nombrar recursos. Existe un URL único para cada página de cada uno de los documentos de la World Wide Web. Tiene el siguiente formato: servicio://máquina:puerto/ruta/archivo@usuario Donde el servicio podrá ser uno de los siguientes: http 16 . 1. de acuerdo a un formato estándar. Una URL indica tanto una dirección de Internet como el servicio que se espera ofrezca el servidor al que corresponde la dirección..

comp. La dirección de la máquina puede ser. Cuando se accede a un archivo situado en la misma máquina que la página Web que se está creando.comp.ibernet. ftp Permite trasmitir archivos desde servidores de ftp anónimo.. Si no se le pide un archivo sino un directorio. Por ejemplo news://news.Es el servicio invocado para transmitir páginas Web y el que se usará normalmente en los enlaces. El puerto es un número que identifica al servicio generalmente no se indica.208.edu. La ruta es una serie de directorios separados por el símbolo /. news Para poder acceder a foros de discusión (mal traducidos a veces como grupos de noticias).) para acceder al directorio padre o comenzar con la barra diagonal (/) para acceder a una ruta absoluta dentro de la misma computadora.237. que suelen invocar un programa externo.mx). mailto:gastondv@hotmail.1) o bien algo más fácil de recordar cómo es una serie de palabras separadas por puntos (www. Por ejemplo. telnet No es implementado generalmente por los navegadores. ya que el servicio predetermina uno.com me enviaría un mensaje. en general el navegador se encargará de mostrar el contenido del mismo para que se pueda escoger el archivo cómodamente.demos se conectaría con el foro es. https Es una innovación sobre el anterior.es/es.itistmo. Existe otro formato de URL. mailto Para poder mandar un mensaje. Utilizando la @ se puede acceder a servidores privados.demos en el servidor nacional de Telefónica. conocido como puerto por defecto. 17 . puede utilizarse este formato: la URL ruta_relativa/archivo En la ruta relativa se puede utilizar los dos puntos (. 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. Permite conectarse con otras computadoras externas y entrar a ellos como si la computadora local fuese una terminal del mismo. o bien la dirección IP compuesto por una serie de cuatro números entre 0 y 255 (148. Se indica el servidor y el grupo.

sin embargo los sistemas operativos basados en Unix sí. en la práctica. las cookies proporcionan una manera de conservar información entre peticiones del cliente. esta diferenciación es dependiente del servidor Web y del sistema operativo del sistema que albergue al servidor.3 MÉTODOS HTTP. liberando así al servidor de una importante sobrecarga. Dado que el HTTP es un protocolo sin estados (no almacena el estado de la sesión entre peticiones sucesivas). y cuando se normalizan durante el procesamiento. que puede oscilar desde el tiempo que dure la sesión hasta una fecha futura especificada. como sus preferencias para la visualización de las páginas de ese servidor. Sin embargo. Es el propio cliente el que almacena la información y quien se la devolverá posteriormente al servidor cuando éste la solicite.htm .htm . Mediante el uso de cookies se permite al servidor Web recordar algunos datos concernientes al usuario.Bienvenida personalizada. nombre y contraseña. no se diferencian mayúsculas y minúsculas. las cookies poseen una fecha de caducidad. es la palabra clave.htm . como en el caso de Windows que no diferencía entre mayúsculas y minúsculas.Personalización de colores. Entre las mayores ventajas de las cookies se cuenta el hecho de ser almacenadas en el disco duro del usuario. con información acerca de lo que se ha estado haciendo en las páginas. deben estar en minúsculas.2. Una cookie no es más que un archivo de texto que algunos servidores piden al navegador que escriba en el disco duro. Se debe asumir que en otros componentes sí hay diferenciación. PERSISTENCIA EN HTTP –COOKIES. 1. productos que más le interesan. a partir de la cual dejan de ser operativas.Diferenciación entre mayúsculas/minúsculas De acuerdo al estándar actual. personalización.Última visita. COOKIES Las cookies constituyen una potente herramienta empleada por los servidores Web para almacenar y recuperar información acerca de sus visitantes. 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 18 . Además. extendiendo significativamente las capacidades de las aplicaciones cliente/servidor basadas en la Web.

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. Desde su creación.w3. El propio W3C define el lenguaje HTML como "un lenguaje reconocido universalmente y que permite publicar información de forma global".01 (http://www. es muy fácil de aprender y escribir por parte de las personas.w3.3 INTRODUCCIÓN AL HTML.1 HTML COMO UN TIPO SGML.org/html5/spec/Overview. 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. 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.org/TR/html401/) Revisión de HTML 5 http://dev.3. 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.1. Como se trata de un estándar reconocido por todas las empresas relacionadas con el mundo de Internet. Aunque HTML es un lenguaje que utilizan las computadoras y los programas de diseño. 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. más conocido como W3C. una misma página HTML se visualiza de forma muy similar en cualquier navegador de cualquier sistema operativo. LENGUAJE DE DESPLIEGUE DEL WEB ¿QUÉ ES HTML? HTML es el lenguaje con el que se "escriben" la mayoría de páginas Web.w3. HTML son las siglas de HyperText Markup Language y significa Lenguaje de Marcación de Hipertexto. SGML son las siglas de Standard Generalized Markup Language o "Lenguaje de Marcado Generalizado".html 1. Los diseñadores utilizan el lenguaje HTML para crear sus páginas Web. Consiste en un sistema para la organización y etiquetado de 19 .org/) . En realidad. tiendas en línea y banca electrónica.

0 (http://www. 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.documentos. El lenguaje HTML está definido en términos del SGML. es un estándar de creación posterior (Extensible Markup Language) (lenguaje de marcas ampliable). 20 . HTML es descendiente directo del lenguaje SGML.01.org/TR/xhtml1/) El estándar XHTML 1. mientras que XHTML lo es del XML (que a su vez. XHTML no es más que una adaptación de HTML al lenguaje XML. La Organización Internacional de Estándares (ISO) normalizó este lenguaje en 1986. Por lo tanto XML no es realmente un lenguaje en particular. Técnicamente. El lenguaje SGML sirve para especificar las reglas de etiquetado de documentos y no impone en sí ningún conjunto de etiquetas en especial. no es necesario leer las especificaciones y recomendaciones oficiales de HTML para aprender a diseñar páginas con HTML o XHTML. ya que sólo añade pequeñas mejoras y modificaciones menores. XML. Algunos de estos lenguajes que usan XML para su definición son XHTML  Especificación oficial de XHTML 1. Afortunadamente. también es descendiente de SGML).0 incluye el 95% del estándar HTML 4. sino una manera de definir lenguajes para diferentes necesidades. es un metalenguaje extensible de etiquetas desarrollado también por el W3C.w3. 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).

Lenguajes descendientes de SGML Las páginas y documentos creados con XHTML son muy similares a las páginas y documentos HTML. que es como se denominan en inglés a los lenguajes de marcado. cuya sintaxis general es: <ETIQUETA parámetros> ..Fig. En el siguiente ejemplo se muestra la estructura general de un programa 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. 1.primera pagina.3. 1. las letras "ML" de la sigla HTML significan "markup language".2 ELEMENTOS DEL LENGUAJE HTML. La principal desventaja es que pueden aumentar mucho el tamaño del documento. Las discusiones sobre si HTML es mejor que XHTML o viceversa son recurrentes en el ámbito de la creación de contenidos Web. 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. En primer lugar se encuentran las siguientes etiquetas: <html> </html> Estas etiquetas indican el inicio y el final del programa en general. 21 . </ETIQUETA> Hay ocasiones en que no es necesario cerrar la etiqueta.htm --> <html> <head> <title>Libro de Programación Web</title> </head> <body bgcolor="#0033CC"> <h1>BIENVENIDOS A PROGRAMACIÓN WEB</h1> <hr> </body> </html> En primer lugar se puede observar que en todo el programa se encuentran un conjunto de etiquetas.. aunque no existe una conclusión ampliamente aceptada. <!-. por lo que en general se utilizan etiquetas con nombres muy cortos. De hecho.4..

<head> <title>Libro de programación Web</title> </head> Dentro de la cabecera sólo hay otra etiqueta. La línea horizontal carece de etiqueta de cierre. que muestra un mensaje con un tamaño de encabezado grande. Por tanto. Lo primero que hay que incluir en el código es la cabecera. <h1>BIENVENIDOS A PROGRAMACIÓN WEB</h1> <hr> Al finalizar aparece la etiqueta <hr> que muestra una línea horizontal.Un documento HTML tiene una estructura que lo separa en dos partes: cuerpo y cabecera. FORMATEO BÁSICO Se pueden establecer varias categorías dentro de las etiquetas usadas para formatear el texto. es decir contendrá una gran cantidad de etiquetas según la función que se le pretenda dar a las pagina Web. parece importante pensarnos bien como llamarla. Es lo que se ve como título de la ventana en los navegadores que lo permitan. Es la única imprescindible: el título de la página. 22 . como en este caso tan solo. sino que insertan un elemento. Esto es normal en etiquetas que no varían los atributos de un texto. se encuentran dos juegos de etiquetas más. Es como se conocerá nuestra página en algunos buscadores y en la agenda de direcciones de los usuarios. EL CUERPO DEL DOCUMENTO Para indicar el cuerpo del documento se usa: Body > … </body> La mayor parte del código HTML reside entre las etiquetas de inicio y cierre del cuerpo del documento. Se pueden dividir en aquellas que sirven para cambiar párrafos enteros y las que son capaces de formatear tiras de caracteres dentro del párrafo. En la primera estará la página en sí. mientras que en la segunda se incluyen algunas cosas que no se ven al principio pero que pueden llegar a ser muy importantes.

. Juárez No.. derecha (RIGHT)... El parámetro WIDTH especifica el número máximo de caracteres en una línea. </CENTER> <PRE WIDTH=x> .. </BLOCKQUOTE> Utilidad Resultado Sirve para delimitar un párrafo.. Permite centrar todo el texto del párrafo. </H2> <H3> . </H3> . </DIV> <ADDRESS> .. </PRE> <DIV ALIGN=x> .. </H1> Resultado Nivel 1 Nivel 2 Nivel 3 23 <H2> .30. Permite justificar el texto del párrafo a la izquierda izquierda (ALIGN=LEFT). Las 6 cabeceras El HTML nos ofrece seis etiquetas distintas para mostrar cabeceras. Son éstas: Etiqueta <H1> .. Inserta una Soy un párrafo línea en blanco antes del texto. </ADDRESS> <BLOCKQUOTE> ... centro al centro (CENTER) o a ambos márgenes derecha (JUSTIFY) Para escribir direcciones (de esas donde vive Juan Pérez Av... no electrónicas). Muy útil a la hora de representar código fuente. Juchitan. la gente.Oax.Formato del párrafo Estas son las etiquetas más importantes Etiqueta <P> <CENTER> .. Se suele implementar dejando márgenes tanto a izquierda como a derecha. Normal Centrado Representa el texto encerrado en ella con un Estoy en paso fijo tipo de letra de paso fijo.. razón por la que se usa habitualmente. Para citar un texto ajeno..

. . Texto subrayado Para tachar.. GRANDE Soy pequeño Disminuye el tamaño del tipo de letra...<H4> ... </U> <S> .. </H4> <H5> ..j+1 Incrementa el tamaño del tipo de letra.. </SUB> <BIG> . No resulta recomendable utilizarlas para aumentar o disminuir el tamaño del tipo de letra.. ya que cada navegador los muestra de manera diferente. </TT> <SUP> .. </SUP> <SUB> .. </H6> Nivel 4 Nivel 5 Nivel 6 Estas etiquetas se pueden definir como de formato de párrafo pero por su importancia se prefiere tratarlas aparte. Texto tachado Permite representar el texto en un tipo de letra Texto fijo de paso fijo.. </BIG> <SMALL> </SMALL> <BLINK> </BLINK> . Etiqueta <B> .. Texto en cursiva Para subrayar algo. </S> <TT> ... Cambiando el tipo de letra Todas estas etiquetas permiten cambiar de una manera u otra el aspecto del tipo de letra que se esté utilizando y se pueden utilizar con tiras de caracteres dentro de un párrafo... Utilidad Pone el texto en negrita. Resultado Texto en negrita Representa el texto en cursiva. Hace parpadear el texto. ¿Cuidado? Otros elementos Otros elementos que no son texto más sin embargo se pueden incorporar a una página son: 24 . Letra superíndice..... </I> <U> ..j=bi.... E=mc2 Letra subíndice. ai. Se usan para dividir correctamente en secciones una página. </H5> <H6> . </B> <I> . tal y como se hace en un documento de texto normal.

En él se especifica el tamaño y posición de cada marco y el documento HTML que contendrá.. Hay un antes y un después de saltar a otra línea <!-..</DIV> <BR><BR> <marquee><H3>¿CONOCES ESTAS FORMULAS?</H3></marquee> A= PI*R <SUP>2</SUP> <br> Tiempo<SUB>T</SUB>=t<SUB>1</SUB>+t<SUB>2</SUB>+ . Cada marco tendrá sus bordes y sus propias barras de desplazamiento. Para crearlos se necesita un documento HTML específico. Por el momento no se que tendrá. Así cada página se dividirá en la práctica en varias páginas independientes. <BR><BR><H2>Instituto Tecnológico del Istmo</H2> <HR> <DIV ALIGN=CENTER>Este <STRONG>párrafo</STRONG> esta mejor (<I>chispas</I>)... pero dentro de poco pondré aquí muchas cosas interesantes.. que se conoce como documento de definición de marcos.esto no --> El siguiente ejemplo muestra el uso de algunas de las etiquetas de formato. Salto de línea.index --> <html> <head> 25 . pero <S>dentro de poco</S> pondré <EM>aquí</EM> muchas cosas <B>interesantes</B>.Etiqueta <HR> <BR> Utilidad Resultado Inserta una barra horizontal. Por el momento no se que tendrá.Esto es un comentario y no se mostrará en la pagina--> </BODY> </HTML> MARCOS Un marco (o frame) es una ventana independiente dentro de la ventana general del navegador. Ejemplo: <!-.htm--> <HTML> <HEAD> <TITLE>Formato</TITLE> </HEAD> <BODY> <DIV ALIGN=CENTER><H1>FORMATO DE LA PAGINA</H1></DIV> <H2>Instituto Tecnológico del Istmo</H2> <HR> <P>Este párrafo es muy sencillo. --> Comentarios.+t<SUB>n</SUB> <!-. Esto se escribe y <!-. <!--formato.

definir cada uno de los marcos poniéndoles un nombre y especificando qué archivo HTML le corresponde mediante la etiqueta <FRAME>.php" name="principal"> </frameset><noframes></noframes> </html> Se puede observar que la cabecera de la página es similar a un documento normal. 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. pero el habitual BODY es sustituido por un FRAMESET. 26 . Cuando se elimina el borde. Si se desea eliminarlo se puede hacer de dos maneras: en las etiquetas <FRAME> de cada una de los marcos contiguos al borde a eliminar o incluyendo el parámetro FRAMEBORDER=0 en el <FRAMESET>. separado por comas.php" name="superior" scrolling="NO" noresize > <frame src="principal. el siguiente código es una muestra de cómo combinar el formato en porcentaje y el espacio restante. los navegadores dibujan un borde de separación entre los marcos. esta etiqueta sólo debería contener el número y tamaño de cada marco. se ve cómo el navegador deja aún un hueco entre marcos. En éste. Este se elimina añadiendo los parámetros FRAMESPACING=0 BORDER=0. se define el número de marcos y el tamaño de cada uno. 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. pero las extensiones de Netscape y Explorer al estándar obligan a estudiar un par de parámetros más. Sobre el espacio sobrante: Si se usa un asterisco (*) se indica que todo el espacio sobrante será para ese marco. En general. Dentro del <FRAMESET> se hacen dos cosas.<title>Venta en línea</title> </head> <frameset rows="30%. Etiqueta <FRAMESET> Según el estándar. Primero. Absolutos: El marco correspondiente tendrá el tamaño especificado en pixeles. Por ejemplo. Las propiedades COLS y ROWS se les asigna una lista de tamaños separados por comas.*" frameborder="0" border="0" framespacing="0"> <frame src="superior.

1. que deja al navegador la decisión. Es por esta facilidad a la hora de organizar con tablas nuestras páginas. 27 .3. 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. Cada espacio horizontal continuado es una fila y cada espacio vertical continuado es una columna. Indica la dirección del documento HTML que ocupará el marco. aunque muchas veces no las veamos directamente porque están "ocultas". Las otras opciones son YES y NO. ya que van a permitir en cierto modo "organizar" el documento. columnas y celdas. Su valor por defecto es AUTO. Etiqueta <FRAME> Esta etiqueta define tan sólo las características de un marco determinado.3 TABLAS EN HTML Las tablas son una de las herramientas más útiles que se disponen en HTML. Al igual que su homónimo en la etiqueta <FRAMESET>. ESTRUCTURA DE UNA TABLA Las tablas están formadas por filas. Permite cambiar los márgenes horizontales dentro de un marco. Se representa en pixels. del espacio vertical de la pantalla y el segundo marco el especio restante (70%).<frameset rows="30%.*"> En este caso el primer marco ocupará el 30%. Decide si se colocan o no barras de desplazamiento al marco. el que el 99% de las que veamos en Internet las usen. si se iguala a cero se eliminará el borde con todos los marcos contiguos que tengan también este valor a cero. siendo esta la única forma coherente que había antes de la introducción de las Hojas de Estilo y de las etiquetas. Igual al anterior pero con márgenes verticales. ayudando a situar dentro del mismo los diferentes elementos que lo componen. Si se especifica el usuario no podrá cambiar de tamaño el marco.

</TD> <TD>.. cosa que se hace con las etiqueta de inicio de fila <TR> y su correspondiente de cierre de fila </TR>. que traducido a código HTML quedaría de la forma: <TABLE> <TR> <TD> <TD> <TD> </TR> <TR> <TD> <TD> celda(1. el esquema de etiquetas sería el siguiente: celda(1.. De esta forma..2) celda(1.3) </TD> celda(2. dentro de cada fila indicar cuantas celdas va a haber... Esto se consigue mediante las parejas de etiquetas <TD> y </TD>.. y siguiendo con la tabla inicial de Ejemplo.</TD> <TD>..definiéndose una celda como el espacio formado por la intersección de una fila y una columna.3) Lo primero que se tiene que hacer para introducir una tabla es decirle al navegador dónde empieza y dónde acaba esta.2) <TABLE> <TR> <TR> <TD>.. que inicialmente deben corresponderse con el número de columnas que se desea tenga la tabla. columna 1 columna 2 columna 3 fila 1 fila 2 celda(2.2) </TD> celda(1.... Seguidamente indicarle cuantas filas se va a tener en la tabla.</TD> <TD>.1) celda(1.1) </TD> celda(1.2) celda(2..</TD> <TD>.1) celda(2.</TD> <TD>.1) </TD> celda(2. Por último. por lo que se debe insertar una pareja de etiquetas por cada fila que tenga la tabla.</TD> </TABLE> </TR> </TR> Este es el esquema general de toda tabla simple.2) </TD> 28 . esto se consigue mediante la etiqueta de inicio <TABLE> y su correspondiente de cierre </TABLE>.

<TD> celda(2. Define el color del borde. el espacio entre los bordes de la celda y el contenido de la misma. 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. Además de estas etiquetas básicas existen otras que van a permitir adaptar la tabla a ciertas necesidades. Define. Da color a la celda o línea elegida. Define la altura de la tabla en píxel o porcentaje. para que la tabla tenga la misma cantidad de columnas. Otros atributos que pueden ser únicamente asignados a una celda y no al conjunto de celdas de una línea son: background height width Permite colocar un fondo para la celda a partir de un enlace a una imagen. Define la anchura de la tabla en píxel o porcentaje. que van a modificar la forma en que se comportan.3) </TD> </TR> </TABLE> La cantidad de celdas debe ser el mismo en cada uno de las filas. Define la anchura de la celda en pixels o porcentaje. Y cada etiqueta posee además varios atributos. Permite colocar un fondo para la tabla a partir de un enlace a una imagen. 29 . en píxel. ETIQUETA <TABLE> Y SUS ATRIBUTOS. Define el color del borde. Las tablas tienen sus propios atributos o propiedades que se colocaran dentro de su etiqueta. 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. 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. Define el número de píxel del borde principal. en el centro (middle) o abajo (bottom) de la celda. Da color de fondo a la tabla. Define el espacio entre los bordes (en píxel). Podemos elegir si queremos que el texto aparezca arriba (top). Define la altura de la celda en pixels o porcentaje.

</td> </tr> <tr> <td>DIRECCION</td> <td bgcolor="#FFFF33" >&nbsp. Si toma un valor en píxeles será un valor absoluto. 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. la tabla solo ocupará un poco menos de una tercera parte de la pantalla. Ejemplo: <!-.htm --> <html> <head> <title>Tablas</title> </head> <body> <table width="30%" border="1" align="center"> <tr bgcolor="#00FF00"> <td colspan="2"><p align="center">REGISTRO DE CLIENTES </p></td> </tr> <tr> <td>NOMBRE </td> <td bgcolor="#FFFF33" width="60%">&nbsp. mientras que con una resolución de 1280*800 pixeles. Expande una celda verticalmente. Para evitar que una tabla se vea de tamaño distinto según la configuración de la pantalla es mejor usar valores en %. así por ejemplo: Una tabla con ancho de 400 pixeles en una pantalla con resolución de 800 *600 pixeles ocupará hasta la mitad de la misma. Así por ejemplo. mientras que si toma un valor en % será relativa al tamaño de pantalla ó del elemento que lo contenga.colspan rowspan Expande una celda horizontalmente.</td> </tr> 30 .tablas. bastará con especificar el atributo a WIDTH="100%". Algunos de los atributos usan la siguiente sintaxis: Atributo=”Valor” Donde el Valor puede venir expresado en píxeles ó en tanto por ciento (%). 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.

ASP.Los datos enviados al servidor quedan registrados en el URL. la primera fila tiene combinada sus 2 celdas horizontalmente.NET Todos los elementos de un formulario deben estar encerrados entre <FORM> y </FORM>. 1. un signo de interrogación “? “ separa el URL del resto de datos. Identifica el nombre de la variable de formulario 31 . con atributos ancho del 30% del tamaño de la pantalla. su primera celda contiene el texto “NOMBRE” y la segunda está vacía con sus atributo color fijado en amarillo y del 60% del ancho de la tabla. Puede ser un archivo ó una dirección de correo (precedida del inevitable mailto:.  GET. borde de tamaño 1. Define la manera en que se enviará el formulario al servidor. y centrado.Es el mejor método puesto que envía la solicitud al servidor en forma segura de tal manera que el usuario no puede ver los datos enviados. y el atributo color está fijado en verde. JSP. Existen solamente dos métodos POST y GET:  POST.</table> </body> </html> El ejemplo muestra una tabla como el siguiente: REGISTRO DE CLIENTES NOMBRE DIRECCIÓN Se trata de una tabla de 3 filas por 2 columnas. de tal manera que el usuario los puede ver. en cuyo caso se deberá añadir el parámetro ENCTYPE="text/plain" para que lo que se reciba resulte legible. tales como PHP. Como parámetros cabe destacar los siguientes: action method name Define el URL que deberá gestionar el formulario. contiene el texto “REGISTRO DE CLIENTES”. se puede observar que ya no es necesario definir el ancho de la celda.. la tercera fila.. su primera celda contiene el texto “DIRECCIÓN” y la segunda está vacía y también con su atributo color en amarillo.4 FORMULARIOS Los formularios son el interface mediante el cual los usuarios interactúan con las aplicaciones Web. Los datos que los usuarios introducen son procesados o enviados a otras páginas que regularmente son lenguajes embebidos en el propio HTML. pues se adapta al ancho fijado en la segunda celda de la segunda fila.3. la segunda fila.

sin embargo a continuación se explicarán cada uno de ellos para más adelante mostrar un ejemplo en conjunto. CAMPOS DE TEXTO Existen tres maneras de conseguir que el usuario introduzca texto en el formulario. Las dos primeras se obtienen por medio de la etiqueta <INPUT>: <INPUT TYPE=TEXT> <INPUT TYPE=PASSWORD> 32 .php usando el método post Los elementos que se deseen incluir en el formulario deberán hallarse entre las etiquetas <FORM> y </FORM> ELEMENTOS DE UN FORMULARIO  Campos de texto  Botón de opción  Lista/Menú  Botón  Casilla de verificación  Campo oculto  Botones mejorados  Campo de Imagen  Etiquetas  Campo de archivo Algunos de estos elementos son usados con más frecuencia que otros.php'> … </form> Este formulario se identifica con el nombre de registro.enctype Le indica al servidor el tipo de información que se va a enviar. si no se indica. los datos que en él se obtengan serán enviados al archivo Web 'Autenticacion. el servidor asume que solo recibirá información de formulario convencional. Ejemplo: <form name='registro' method='post' action='Autenticacion. destaca también:  "multipart/form-data" Indica al servidor que se recibirá un archivo además de la información habitual del formulario.

Admite estos parámetros: Parámetro Utilidad ROWS COLS Filas que ocupará la caja de texto. MAXLENGTH Número máximo de caracteres que puede introducir el usuario.El primero dibujará un cuadro de texto donde permitirá escribir un texto (de una sola línea). como en este caso name="Sexo" Hombre Mujer <input name="Sexo" type="radio" value="H"> <br> <input name="Sexo" type="radio" value="M"> Hombre Mujer Así según la selección que realice el usuario. Por otro lado. OPCIONES Si lo que se desea es que el usuario decida entre varias opciones se podrá hacer de dos modos. Si se indica en una de las opciones esta será la que esté activada por defecto. para ello se usa la siguiente etiqueta: <TEXTAREA> Por defecto </TEXTAREA> Por defeto Lo que se incluya entre las dos etiquetas será lo que se muestre por defecto dentro de la caja. Columnas que ocupará la caja de texto. pero no se verá lo que se teclee en él. El segundo es equivalente. más bien los caracteres se remplazará por un carácter * por ello se conoce como Cuadro de texto para contraseña. 33 . Texto por defecto que contendrá la caja. Acepta los siguientes parámetros: Parámetro Utilidad VALUE CHECKED Este es el valor que asignará a la variable. será el valor que tomará la variable. Estos son los atributos para modificarlos: Parámetro Utilidad SIZE VALUE Tamaño de la caja de texto. En ese caso se utilizará el componente conocido como área de texto. El primero es asociando a varios botones de opciones un mismo NAME. puede que se necesite que el usuario pueda introducir más de una línea.

si no. en el formulario. BOTONES DEL FORMULARIO Existen dos: uno que se utiliza para mandar el formulario y otro que sirve para limpiar todo lo que haya rellenado el usuario: <input type="submit" name="Submit" value="Aceptar"> <input type="reset" name="Submit2" value="Limpiar"> Aceptar Limpiar Con la propiedad VALUE se fija el texto del botón CASILLA DE VERIFICACIÓN Puede que se necesite que el usuario sencillamente confirme o niegue algo. SELECT y OPTION: <SELECT NAME="Navegador"> <OPTION value="Net">Netscape <OPTION value="Exp">Explorer <OPTION value="Ope">Opera <OPTION value="Lin">Lynx <OPTION value="Otr">Otros </SELECT> Netscape Los parámetros que admite SELECT son las siguientes: Parámetro Utilidad SIZE El número de opciones que se podrá ver. SELECTED Si se indica en una de las opciones esta será la seleccionada por defecto. un menú desplegable.La segunda posibilidad que ocupa menos código es usando una Lista/Menú. MULTIPLE Si se indica se podrá elegir más de una opción. Para emplearlas se debe utilizar dos etiquetas. Si es mayor que 1 se verá una lista de selección y. Y OPTION estos: Parámetro Utilidad VALUE Este es el valor que asignará a la variable. se tenga alguna variable con un valor previamente asignado para enviárselo a otra página. El formulario asignará a la variable name el valor on u off a menos que la propiedad value se le asigne un valor distinto que tomará solo cuando este activado. CAMPO OCULTO Existe la posibilidad de que se necesite que. Se podrá conseguir por medio de Casillas de Verificación: PROMOCIÓN <input name="promo" type="checkbox" value="1" checked> PROMOCIÓN Si se desea que el control esté activado por defecto se le añade CHECKED. Por 34 .

0 ha traído varias mejoras a los formularios. este elemento de formulario se conoce como Campo de Imagen <INPUT TYPE="image" Cámara"> SRC="imagenes/camara. por ejemplo. TYPE. C++ Builder. La etiqueta en cuestión se llama BUTTON: <BUTTON TYPE="button"> <table border="1"> <tr> <th>Soy una</th> <th>tabla</th> </tr> <tr> <td>que está</td> <td>en un botón</td> </tr> </table> </BUTTON> Soy una tabla que está en un botón Los parámetros de dicha etiqueta son los normales. SUBMIT (por defecto). Ahora disponen de una etiqueta propia. Como un nuevo tipo dentro del elemento INPUT. etc.jpg" alt="Elije la Este elemento se comportará del mismo modo que un botón de tipo SUBMIT. pero añadirá como información en el formulario las coordenadas x.ejemplo. incluso. BOTONES MEJORADOS Una de las cosas que más han mejorado son los botones. RESET y BUTTON. de modo que se pueda encerrar con ella todo tipo de elementos HTML. si se pulsa en el texto que acompañaba 35 . que podrá tomar los valores Se puede declarar un gráfico como un elemento más de entrada. <input name="clvp" type="hidden" id="claveproducto" value="DD120"> CONTROLES AVANZADOS PARA FORMULARIOS El estándar HTML 4. Así. ETIQUETAS Hasta hora. el texto que acompañaba a los campos de entrada no estaba asociado a los mismos de ninguna manera. que acercan los mismos a las características que tienen en lenguajes como Java o Visual Basic. NAME y VALUE. como gráficos o. se podría asignar en forma oculta la clave de un producto a una variable para verificar este valor en la página receptora. y donde el usuario lo pulsó. tablas enteras.

si se sitúa la etiqueta LABEL. Si además. ¿no? Lo bueno que tiene es que el estado de activación de un control es accesible desde JavaScript. Para ello sólo se pone el parámetro disabled: Clave: <INPUT TYPE="text" disabled> Clave: Esto. se le pone un título por medio de la etiqueta LEGEND él formularios quedará más elegante. en principio. Por defecto es TOP (arriba). DESACTIVACIÓN DE ELEMENTOS Todos los controles de un formulario se pueden desactivar. se mostrará un rectángulo alrededor de los mismos. a la izquierda (LEFT) o a la derecha (RIGHT). más sin embargo sus demás campos sí. el control cambiará de estado <LABEL> PROMOCIÓN <input name="promo" type="checkbox" value="1" checked> </LABEL> PROMOCIÓN AGRUPACIÓN DE ELEMENTOS Una manera de agrupar visualmente varios elementos de un formulario es encerrando una parte de un formulario dentro de la etiqueta FIELDSET. aunque con un aspecto distinto para indicar su triste estado.a un control de confirmación. seguramente no será conveniente modificar la clave del producto. no parece de demasiada utilidad. ¿Para qué se quiere tener controles desactivados? Para eso no se pone y ya. impidiendo así al usuario que los utilice. Eso permitirá activar o desactivar una parte del formulario dependiendo de lo que el usuario haya introducido previamente en otros controles del mismo. pudiendo estar también abajo (BOTTOM). Se seguirán mostrando en pantalla. que indicará en qué lugar se coloca el título. Ahora. Por ejemplo cuando se va a modificar los datos de un producto. en cambio. CAMPO DE ARCHIVO 36 . no sucedía nada. <FIELDSET> <LEGEND>Registro de Productos </LEGEND> <LABEL> Clave: <INPUT TYPE="text"> </LABEL> <br> <LABEL> Nombre: <INPUT TYPE="text"> </LABEL> </FIELDSET> LEGEND Registro de Productos Clave: Nombre: admite como parámetro ALIGN.

php' > <table border='1' align='center'> <tr> <td colspan='2'><p align='center'>REGISTRO DE PRODUCTOS</p> </td> </tr> <tr> <td>CLAVE</td> <td ><input type='text' name='clv' id='clvp2' size='10' maxlength='10'></td> </tr> <tr> <td>NOMBRE</td> <td><input type='text' name='nom' id='nom' size='30' maxlength='30'></td> </tr> <tr> <td>UNIDAD</td> <td>PIEZA <input type="radio" name="unidad" value="radiobutton" checked> CAJA <input type="radio"name="unidad" value="radiobutton"></td> </tr> <tr> <td>PRECIO</td> <td><input type='text' name='preve' id='preve'></td> </tr> <tr> <td>EXISTENCIA</td> <td><input type='text' name='exist' id='existencia2' size='10' maxlength='10'></td> </tr> <tr> <td>CATEGORIA</td> <td><select name='categoria' > <option>DISCOS DUROS</option> <option>MOUSES</option> 37 . <input type="file" name="imagen" > Examinar.. Al pulsar cobre el botón el navegador mostrará una caja de diálogos que permitirá al usuario seleccionar el archivo en el disco duro. Ejemplo: <!-. Más adelante se mostrarán ejemplos de envió de archivos al servidor completos.Este elemento se utiliza para transmitir documentos externos desde el disco duro de un usuario al servidor Web. para ello se utiliza nuevamente la etiqueta input con su type establecida en file. Es muy recomendable utilizar tablas para organizar los elementos de los formularios. lo que facilita su comprensión y mejora su apariencia.. Utilizando tablas se consigue una mejor distribución de los elementos del formulario.formulario.htm --> <html> <head> <title>Manejo de Formulario</title> </head> <body> <form name='form1' method='post' enctype="multipart/form-data" action='alta de productos.

<option>TARJETAS MADRES</option> </select></td> </tr> <tr> <td>IMAGEN</td> <td><input type="file" name="imagen" id="imagen"></td> </tr> <tr> <td>PROMOCION</td> <td><input type="checkbox" name="promocion" id="promocion" value="1" checked> </td> </tr> <tr> <td><input type='submit' name='Aceptar' id='Aceptar' value='Aceptar'></td> <td><input type='reset' name='Submit2' value='Restablecer'></td> </tr> </table> </form> </body> </html> En el navegador se mostraría así: REGISTRO DE PRODUCTOS CLAVE NOMBRE UNIDAD PRECIO EXISTENCIA CATEGORIA IMAGEN PROMOCION Aceptar Restablecer DISCOS DUROS PIEZA CAJA Básicamente el código consiste en un formulario. en las celdas de la segunda columna se encuentran un conjunto de elementos de formulario. 2 botones de opciones. en cuyo interior se encuentra una tabla de 10 filas por 2 columnas. entre los que destacan. 1 Lista/Menú. 4 cuadros de texto. 1. 1 casilla de verificación y 2 botones normales uno para enviar los datos capturados en el formulario a la pagina 'alta de productos.4 EVOLUCIÓN DEL DESARROLLO DE APLICACIONES WEB 38 .php’ y el otro para limpiar el contenido de cada uno de los elementos hallados en el formulario.

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. Afortunadamente, se tienen herramientas potentes para realizar esto, ya que han surgido nuevas tecnologías que permiten que el acceso a una base de datos desde el Web, por ejemplo, sea un mero trámite. El único problema es decidir entre el conjunto de posibilidades la correcta para cada situación. El viejo Interfaz de entrada común (CGI) ha cumplido con el propósito de añadir interactividad a las páginas Web pero sus deficiencias en el desarrollo de aplicaciones y en la escalabilidad de las mismas ha conducido al desarrollo de aplicaciones específicos de servidor como Paginas de Servidor Activo (ASP y ASP.NET), Páginas de Servidor Java (JSP) y PreProcesador de Hipertexto (PHP). ASP, JSP y PHP son lenguajes ejecutados en el servidor Web y no en el cliente Web, se encargan de gestionar el acceso y manipulación de la base de datos para proporcionar el dinamismo requerido en las páginas Web. En un principio el aspecto o presentación que tenían las páginas Web eran directamente controladas desde cada página, estableciendo las propiedades de sus componentes según se requiriera, considerando que una aplicación Web a veces consta de cientos o miles de estas páginas, modificar el aspecto de todo el sitio realmente implicaba una gran labor, sin embargo actualmente para realizar esto con más eficiencia se lleva a cabo usando Hojas de Estilo en Cascada (CSS).

1.5 HOJAS DE ESTILO EN CASCADA E INTRODUCCIÓN AL XML
CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos definidos con HTML y XHTML. CSS es la mejor forma de separar los contenidos y su presentación y es imprescindible para crear páginas Web complejas. Separar la definición de los contenidos y la definición de su aspecto presenta numerosas ventajas, ya que obliga a crear documentos bien definidos y con significado completo. Además, mejora la accesibilidad del documento, reduce la complejidad de su mantenimiento y permite visualizar el mismo documento en infinidad de dispositivos diferentes.
39

Al crear una página Web, se utiliza en primer lugar el lenguaje HTML para marcar los contenidos, es decir, para designar la función de cada elemento dentro de la página: párrafo, titular, texto destacado, tabla, etc. Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el aspecto de cada elemento: color, tamaño y tipo de letra del texto, separación horizontal y vertical entre elementos, posición de cada elemento dentro de la página, etc. Antes de la adopción de CSS, los diseñadores de páginas Web debían definir el aspecto de cada elemento dentro de las etiquetas HTML de la página. El siguiente ejemplo muestra una página HTML con estilos definidos sin utilizar CSS.
<!-- sin css.htm --> <html> <head> <title>Paginas con Estilos sin CSS</title> </head> <body> <h1><font color="red" face="Arial" size="5"> Pagina sin CSS </font></h1> <p><font color="gray" face="Verdana" size="2">Los estilos en una página le dan la presentación a la misma .</font></p> </body> </html>

El ejemplo anterior utiliza la etiqueta <font> con sus atributos color, face y size para definir el color, la tipografía y el tamaño del texto de cada elemento del documento. El principal problema de esta forma de definir el aspecto de los elementos se puede ver claramente con el siguiente ejemplo: si la página tuviera 50 elementos diferentes, habría que insertar 50 etiquetas <font>. Si el sitio Web entero se compone de 10.000 páginas diferentes, habría que definir 500.000 etiquetas <font>. Como cada etiqueta <font> tiene 3 atributos, habría que definir 1.5 millones de atributos. Por otra parte, el diseño de los sitios Web está en constante evolución y es habitual modificar cada cierto tiempo los colores principales de las páginas o la tipografía utilizada para el texto. Si se emplea la etiqueta <font>, habría que modificar el valor de 1.5 millones de atributos para modificar el diseño general del sitio Web. HOJA DE ESTILO INTERNA La solución que propone CSS es mucho mejor, como se puede ver en el siguiente ejemplo:
<!-- con css interna.htm --> <html> <head> <title>Paginas con Estilos utilazando CSS</title> <style type="text/css"> h1 { color: red; font-family: Arial; font-size: large; } p { color: gray; font-family: Verdana; font-size: medium; } </style> </head>

40

<body> <h1>Página con CSS Interna</h1> <p>Los estilos en una página le dan la presentación a la misma </p> </body> </html>

CSS permite separar los contenidos de la página y su aspecto o presentación. En el ejemplo anterior, dentro de la propia página HTML se reserva una zona en la que se incluye toda la información relacionada con los estilos de la página. Utilizando CSS, en esa zona reservada se indica que todas las etiquetas <h1> de la página se deben ver de color rojo, con un tipo de letra Arial y con un tamaño de letra grande. Además, las etiquetas <p> de la página se deben ver de color gris, con un tipo de letra Verdana y con un tamaño de letra medio. Definiendo los estilos de esta forma, no importa el número de elementos <p> que existan en la página, ya que todos tendrán el mismo aspecto establecido mediante CSS. Como se verá a continuación, esta forma de trabajar con CSS no es ideal, ya que si el sitio Web dispone de 10.000 páginas, habría que definir 10.000 veces el mismo estilo CSS.

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

A continuación, en la página HTML se utiliza la etiqueta <link> para enlazar el archivo CSS externo que tiene los estilos que va a utilizar la página:
<!-- con css externa.htm --> <html> <head> <title>Paginas con Estilos utilizando Externa CSS</title> <link href="estilos.css" rel="stylesheet" type="text/css"> </head> <body>

41

el archivo CSS) y la página HTML. el mantenimiento del sitio Web se simplifica al máximo. HOJA DE ESTILO EN LINEA El último método para incluir estilos CSS en documentos HTML es el peor y el menos utilizado. esta es la más utilizada con mucha diferencia.  media: indica el medio en el que se van a aplicar los estilos del archivo CSS.htm --> <html> <head> <title>Paginas con CSS en línea</title> </head> <body> <h1 style= "color:red. Con este método. por lo que se garantiza la aplicación homogénea de los mismos estilos a todas las páginas que forman un sitio Web. <!-.">Pagina con CSS en línea </h1> <p style="color: gray. De todas las formas de incluir CSS en las páginas HTML. Sus valores están estandarizados y para los archivos CSS su valor siempre es text/css  href: indica la URL del archivo CSS que contiene los estilos.con css enlinea. La siguiente figura muestra las partes que forman un estilo CSS muy básico: 42 . La URL indicada puede ser relativa o absoluta y puede apuntar a un recurso interno o externo al sitio Web. CSS define una serie de términos que permiten describir cada una de las partes que componen los estilos CSS. la etiqueta <link> incluye cuatro atributos cuando se enlaza un archivo CSS:  rel: indica el tipo de relación que tiene el recurso enlazado (en este caso.htm. siempre se utiliza el valor stylesheet  type: indica el tipo de recurso enlazado. font-size:12px."> Los estilos en una página le dan la presentación a la misma</p> </body> </html> Esta forma de incluir CSS directamente en los elementos HTML solamente se utiliza en determinadas situaciones en las que se debe incluir un estilo muy específico para un solo elemento concreto. font-size:50px. ya que un solo cambio en un solo archivo CSS permite variar de forma instantánea los estilos de todas las páginas HTML que enlazan ese archivo.<h1>Pagina con CSS Externa</h1> <p>Los estilos en una página le dan la presentación a la misma </p> </body> </html> Normalmente. ya que tiene los mismos problemas del ejemplo sin css. La principal ventaja es que se puede incluir un mismo archivo CSS en multitud de páginas HTML. font-family: Verdana. Para los archivos CSS.

móviles.. se incluye su nombre después de @media. impresoras. 1. 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 en pantalla) y print (para definir el aspecto de la página cuando se imprime). MEDIOS CSS Una de las características más importantes de las hojas de estilos CSS es que permiten definir diferentes estilos para diferentes medios o dispositivos: pantallas. Si los estilos se aplican a varios medios. La siguiente tabla muestra el nombre que CSS utiliza para identificar cada 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. etc. CSS define algunas propiedades específicamente para determinados medios. proyectores. se incluyen los nombres de todos los medios separados por comas. A continuación se muestra un ejemplo sencillo: @media print { 43 .Partes de una regla básica CSS Un archivo CSS puede contener infinitas reglas CSS.5. como por ejemplo la paginación y los saltos de página para los medios impresos o el volumen y tipo de voz para los medios de audio. Además. PDA. cada regla puede contener infinitos selectores y cada declaración puede estar formada por un número infinito de pares propiedad/valor. seguidos de handheld (que define el aspecto de la página cuando se visualiza mediante un dispositivo móvil). Para especificar el medio en el que se aplican los estilos. 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.Fig.

} h2 { color: blue. los títulos de sección h1. El siguiente ejemplo selecciona todos los párrafos de la página: p { .2 veces el tamaño de letra del texto. sí que se suele combinar con otros selectores. En el siguiente ejemplo.body { font-size: 10pt } } @media screen { body { font-size: 13px } } @media screen. El siguiente ejemplo elimina el margen y el relleno de todos los elementos HTML: * { margin: 0.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. } p { color: black. cuando se imprimen los contenidos de la página. Sin embargo. ya que es difícil que un mismo estilo se pueda aplicar a todos los elementos de una página. tanto cuando la página se visualiza en una pantalla como cuando se imprimen sus contenidos. h3 { 44 . print { body { line-height: 1. h2 y h3 comparten los mismos estilos: h1. } El siguiente ejemplo aplica diferentes estilos a los titulares y a los párrafos de una página HTML: h1 { color: red. padding: 0. el interlineado del texto debe ser de 1. } Si se quiere aplicar los mismos estilos a dos etiquetas diferentes. su tamaño de letra debe ser de 10 puntos. } El selector universal se indica mediante un asterisco (*). A pesar de su sencillez. SELECTORES BÁSICOS  Selector universal Se utiliza para seleccionar todos los elementos de la página. Por último. No obstante. se pueden encadenar los selectores.. no se utiliza habitualmente..  Selector de tipo o etiqueta Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector. h2.

margin-left. margin-bottom. left. cero. border-left-width. contenido de un bloque. font-family: Arial. border-width: top right bottom left border-style Estilo del borde de un bloque. por defecto ninguno.color: #8A8E27. border-bottom-width. Justificación del contenido de un bloque. float clear o 3D. padding. Su mayor utilidad está en su aplicación a un elemento gráfico. Anchura del borde de un bloque. 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. los demás elementos. font-weight: normal. Helvetica. height Color del borde de un bloque. both o none. Permiso para que otro elemento se pueda colocar a su izquierda o derecha. right o none. porcentaje o auto. left. } Es importante entonces conocer algunas propiedades que pueden afectar a las etiquetas HTML. por defecto ninguno (none). por defecto ninguna. Tanto margin porcentaje o auto. solid border-color width. margin. padding-left. right. border-top-width. right. Por defecto es padding: top right bottom left cero. defecto es margin: top right como margins() se utilizan para Por bottom left cambiar todos estos atributos a la vez.Distancia mínima entre un bloque y Tamaño. porcentaje o auto. 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 . para así utilizarlos en las hojas de Estilo en cascada.Distancia entre el borde y el Tamaño. numérico border-right-width. right. Tamaño de un bloque. none. automático por defecto. padding-bottom. sans-serif. cualquier color Tamaño. padding-top.

italic small-caps. line-through (tachado) o blink (parpadeante). textEfectos variados sobre none. right. por defecto cero. center o justify Tabulación con que tamaño o porcentaje. 900 es la negrita más gruesa). x-small. xx-large. por defecto ninguno. Por defecto medium. small. Por defecto texttransform text-align text-indent Transforma el texto a (pone la primera letra en mayúsculas o mayúsculas). Un color (en el formato habitual). separados puede ser genérico) por comas. bold. Estilo del tipo de normal. absoluto. por ejemplo. medium. 46 . large. verticalPosición vertical del baseline (normal). tamaño relativo o tamaño letra. baseline capitalize PROPIEDADES DE COLOR Y FONDO También es posible cambiar los colores y el gráfico de fondo de un elemento. (superíndice). cursive. Propiedad Descripción Posibles valores color Color del texto. Propiedad Descripción Posibles valores line-height Interlineado. italic. Justificación del texto. bolder. pero por encima). overline (como decoration el texto. background Modifica tanto el gráfico el Dirección del archivo que contiene la color de fondo. sub (subíndice). PROPIEDADES DE FORMATO DEL TEXTO Las propiedades de formato del texto que cualquier procesador de textos permite cambiar. oblique. en un PC con Windows instalado serif puede equivaler a Times New Roman y monospace a Courier. imagen o un color. mayúsculas). ya sean genéricos o no. middle. Así. uppercase (convierte todo a minúsculas. underline (subrayado). normal. bottom. xlarge. top. Número o porcentaje. sans-serif. fantasy y monospace. Tamaño del tipo de xx-small. super align texto. oblique small-caps o small-caps. aparece la primera línea del texto. text-bottom o un porcentaje. Cada uno de estos tipos serán equivalentes a alguno que pueda tener instalado la computadora del usuario. subrayado. text-top. lowecase (a minúsculas) o none.fontfamily font-size fontweight font-style Tipo de letra (que Lista de tipos. por defecto no hace nada. lighter o 100-900 (donde letra (negrita). Grosor del tipo de normal. Cabe recordar que los tipos genéricos son serif. Por defecto normal. left. Por defecto letra (cursiva).

none o la al comienzo del mismo. las direcciones se expresan del siguiente modo: background: url(fondobonito. list y none (que (como <I>).. loweralpha. Pero el ser bloques o no. 47 . lista. upper-roman. circle. square. upper-alpha.Hay que decir que. en la sintaxis en cascada. un bloque (<P>) o un 'apaga' el elemento) elemento de una lista (<LI>). list-style Estilo de un elemento de una disc. 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. decimal.. block. si de manera normal o como sucede dentro de la etiqueta <PRE>. dirección de un gráfico whiteDecide como se manejan los normal y pre space espacios.gif). ¿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. pudiendo incluir un gráfico lower-roman.

Muestre con un dibujo la relación entre las siglas de la pregunta anterior. Indique por lo menos 3 tipos de servicios que se usan en una URL así como una breve explicación de cada uno. Al definir una URL ¿Existen diferencias entre mayúsculas y minúsculas?. ¿Cuál es la sintaxis de una solicitud HTTP? 9. ¿Quién define el estándar HTML? 23. ¿Qué es Internet? 3. ¿Qué es un formulario? 33. En una arquitectura Web ¿Qué es un motor de base de datos? 15. así como el conjunto de protocolos 4. XML y HTML 24. ¿Qué son los códigos de respuesta y de 2 ejemplos? 14. ¿En que año y que aplicación provoco el incremento de usuarios en Internet? 5. Muestre el formato de una URL y de un ejemplo de su uso 18. 26. ¿Explique que es un marco? 29. ¿En qué año Internet se convierte en una red pública y que consecuencias trajo consigo? 2. si. porque. Indique por lo menos 5 tipos de encabezados de Solicitud del HTTP y su descripción 11. así como su descripción? 48 .PREGUNTAS 1. 25. Muestre el modelo de capas del TCP/IP. Indique por lo menos 5 atributos de una tabla. Indique por lo menos 3 comandos de Solicitud HTTP y su descripción 10. Muestre y explique la estructura general de un programa HTML. 20. Explique el proceso de comunicación entre el navegador y servidor Web 8. ¿Qué es URL? 17. así como su descripción 31. 28. Defina que es SGML. ¿Qué es un RFC? 7. ¿Cuál es el protocolo utilizado para los sitios Web y en qué consiste? 6. ¿Cuáles son los parámetros de un formulario. 19. Explique cada uno de los ejemplos planteados donde se utilizaron cookies 22. ¿Cuál es la diferencia entre una aplicación Web estática y una dinámica? 16. ¿Qué es una cookies? 21. ¿Para qué sirve la etiqueta Hx? 27. Muestre por lo menos 5 etiquetas que permiten cambiar el formato del tipo de letra. Explique cuál es la diferencia entre expresar el valor de una atributo en pixeles y en porcentaje 32. Indique por lo menos 4 tipos de encabezados de Respuesta del HTTP y su descripción 13. ¿Cuál es la sintaxis de una respuesta HTTP? 12. ¿Explique cuál es la estructura de una tabla 30. no.

¿Para qué se utilizan los lenguajes ASP. ¿Para qué se utiliza un campo oculto? 39. Explique cómo se le puede aplicar CSS al body de todas las páginas de un sitio Web. Explique las 3 zonas donde se pueden ubicar las Hojas de Estilo en Cascada e indique cual es la mejor. JSP y PHP? 40. 49 . ¿En qué parámetro se almacena el texto que contiene un cuadro de texto? 36. Muestre una lista de los elementos que puede contener un formulario? 35. 42. ¿Cuáles son los dos tipos de botones que existen? 37.34. ¿Cuál es la ventaja de utilizar CSS? 41. ¿Con que parámetro se marca una casilla de verificación? 38. Indique por lo menos 3 medios o dispositivos a los que se les puede aplicar CSS 43.

50 .htm) que incluya la definición de un conjunto de 3 marcos:  un marco superior que ocupe el 20% de la pantalla. 5. aplicando las propiedades requeridas para lograr una mejor estética de la misma.htm  El resto como marco principal.htm. diseñe e implemente una. enviar los datos a la página empleado2.htm las posibles opciones de menú que podría contener el sistema y finalmente principal. Considerando el ejercicio anterior. Utilizando tablas (uso de tablas. tales como: RFC. 2. así como los elementos del formularios necesarios que permitan la captura de los datos del empleado.htm).html. implementar cada una de las tres páginas de tal manera que encabezado. crear una hoja de estilo en cascada externa (estilos.htm).htm. Eliminar todas las propiedades de formato aplicados a cada etiqueta del ejercicio anterior (guardar como empleadoe.htm. vincular con principal.css) y vincularla con empleadoe. Nombre.htm). se usará como encabezado. Estado civil. Fecha de Ingreso.html contenga el logotipo y nombre de la empresa. Plantee e implemente un ejercicio donde se apliquen una “cookies” (uso de cookies. vincular con menú. 1. Dirección. definir los estilos necesarios en la hoja de estilo para lograr que la página se siga viendo igual ó mejor que empleado. Considerando un caso particular de interés del lector. de tal manera que se use un formulario (empleado.EJERCICIOS PROPUESTOS.htm) 3.php 6. 4.htm información relevante de la empresa seleccionada.  En el área restante un marco izquierdo del 30% para un menú de opciones. vincular con la página encabezado. menú. Puesto. Busque en la red el RFC 2616. analice y realice un cuadro sinóptico de su contenido. Crear una página (index. la tabla deberá contener las etiquetas necesarias para mostrar los datos de un Empleado. complementar.

2 Desarrollo de aplicaciones Web 51 .

mientras que el servidor hace la parte menos pesada. La capa intermedia es el código que el usuario invoca para recuperar los datos deseados. Los sistemas típicos cliente/servidor pertenecen a la categoría de las aplicaciones de dos niveles. y eso que los clientes suelen ser máquinas menos potentes que los servidores. La tercera capa consiste en los datos que gestiona la aplicación.1 ARQUITECTURA DE LAS APLICACIONES WEB. ya que se pueden tener múltiples interfaces sin cambiar la lógica de la aplicación. ya que las modificaciones a la misma han de ser trasladada a todos los clientes.2. 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. Para solucionar estos problemas se ha desarrollado el concepto de arquitecturas de tres niveles: interfaz de presentación. En este tipo de aplicaciones el peso del cálculo recae en el cliente. La aplicación reside en el cliente mientras que la base de datos se encuentra en el servidor. 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 . La capa de presentación recibe los datos y los formatea para mostrarlos adecuadamente. lógica de la aplicación y los datos. está el problema de la actualización y el mantenimiento de las aplicaciones. Al hablar de arquitecturas de aplicaciones Web resulta adecuado presentarlas dentro de las aplicaciones multinivel. Además.

el tercer nivel proporciona al segundo los datos necesarios para su ejecución. Fig. 2.Arquitectura Web de tres niveles.2..1. El segundo nivel está referido habitualmente a algún tipo de programa o script. 2. La arquitectura de las aplicaciones Web suelen presentar un esquema de tres niveles. 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..Arquitectura Multinivel. Finalmente. El primer nivel consiste en la capa de presentación que incluye no sólo el navegador. Una aplicación Web típica recogerá datos del usuario (primer nivel). 53 .Fig. los enviará al servidor. Entre los cuales no sólo se encuentra el HTML y CSS sino también los que se muestran en la siguiente tabla. que ejecutará un programa (segundo y tercer nivel) y cuyo resultado será formateado y presentado al usuario en el navegador (primer nivel otra vez).2 LENGUAJES DE PROGRAMACIÓN DEL LADO DEL CLIENTE. 2. sino también el servidor Web que es el responsable de dar a los datos un formato adecuado.

.. Se trata de un lenguaje de programación del lado del cliente. Los applets de Java están programados en Java y precompilados. si en el código de una página Web se incluye la sentencia <script language="JavaScript" type="text/JavaScript"> window. es por ello que la manera de trabajar de éstos varía un poco con respecto a los lenguajes de script como Javascript.") </script> Al abrir la página con el navegador mostrará una ventana de bienvenida Por ser este el lenguaje de programación del lado del cliente más 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. que se transfieren con las páginas Web y que el navegador ejecuta en el espacio de la página. 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. porque es el navegador el que soporta la carga de procesamiento.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. Las sentencias escritas en javascript se encapsulan entre las etiquetas <script> y </script> . 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. Se trata de pequeños programas hechos en Java. Gracias. incluso 54 .alert("Bienvenido a mi sitio web. Por ejemplo.

el navegador debe tener instalado un pequeño programa (plug-in) que le permita visualizarlas. Para visualizar las "películas" Flash. 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. 55 . Está basado en Visual Basic. formularios. Sin embargo. para crear efectos especiales en páginas Web.3 LENGUAJES DE PROGRAMACIÓN DEL LADO DEL SERVIDOR. ejecutados e interpretados por el propio servidor y que se envían al cliente en un formato comprensible para él. Son aquellos lenguajes que son reconocidos. Es por ello que con los applets de Java no se puede hacer directamente cosas como abrir ventanas secundarias. Java es más potente que Javascript. un popular lenguaje para crear aplicaciones Windows.independientes del sistema operativo de la computadora donde se ejecutan. no se mezclan con todos los componentes de la página ni tienen acceso a ellos. Además. no todo lo que se puede hacer en Visual Basic se puede hacer en Visual Basic Script. Tanto su sintaxis como la manera de trabajar están mu y inspirados en él. pero sólo compatible con Internet Explorer. etc. Flash en realidad no es un lenguaje. pues este último es una versión reducida del primero. controlar Frames. si se tuviera que catalogarlo en algún sitio quedaría dentro del ámbito de las páginas dinámicas de cliente. VISUAL BASIC SCRIPT Es un lenguaje de programación de scripts del lado del cliente. 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. Con Flash también se consigue hacer páginas dinámicas del lado del cliente. y un programa. Sin embargo. Es por ello que su utilización está desaconsejada a favor de Javascript. 2. FLASH Flash es una tecnología.

También desde otros lenguajes se puede ejecutar código Perl. pero que en un principio se utilizaba para procesar texto. PHP y JSP. Además es extensible a partir de otros lenguajes. C++ o Visual Basic pueden ser también empleados para construirlos. En el dominio de la red. Perl es un lenguaje de programación que actualmente se emplea para el diseño de sitios Web. 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. Su nombre significa Practical Extraction and Report Language. Es por ello que a la hora de elegir el lenguaje que se desea utilizar. PERL Perl es un lenguaje de programación interpretado. otros lenguajes como C. 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.NET PHP JSP CGI Es el sistema más antiguo que existe para la programación de las páginas dinámicas de servidor. al igual que muchos otros lenguajes de Internet como Javascript o ASP. ya que desde Perl se pueden hacer llamadas a subprogramas escritos en otros lenguajes. 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. Un lenguaje complicado en su aprendizaje permite en general el realizar un espectro de tareas más amplio y más profundamente. Los CGI se escriben habitualmente en el lenguaje Perl. sin embargo. lenguaje 56 . los lenguajes de lado servidor más ampliamente utilizados para el desarrollo de páginas dinámicas son el ASP.Existe una multitud de lenguajes concebidos o no para Internet. LENGUAJES POR EL LADO DEL SERVIDOR CGI PERL ASP / ASP. es decir. se debe saber claramente qué es lo que se desea hacer y si el lenguaje en cuestión lo permite o no.

De esta manera los sitios desarrollados con PHP presentan no sólo un gran dinamismo sino también un excelente manejo de datos. dado que se separa el contenido de un sitio de su comportamiento dinámico. Es una tecnología “del lado del servidor”.NET. El código PHP se incluye dentro del HTML. una tecnología orientada a crear páginas Web con programación en Java. pues. JSP JSP es un acrónimo de Java Server Pages.0.0. Por ello este lenguaje es ideal para crear sitios Web catálogos. Entre sus principales ventajas se puede señalar:  Es un lenguaje que puede ejecutarse en diferentes sistemas operativos (Linux.práctico para la extracción e informe.NET. También se pueden emplear tecnologías como Flash y JavaScript junto con ASP y HTML. con una gran librería de funciones y mucha documentación. Windows y Macintosh) y en los servidores más populares. Este lenguaje es más ordenado que el ASP.  Permite programar sitios con contenido dinámico. accesible a todas las personas. Generalmente se comercializa junto con el servidor ISS (Internet Information Server). combinándolo con los principales servidores de bases de datos. rápido. es decir a las previas al ASP. entre ellos MySQL. Es. con el cual se realizan sitios Web dinámicos. una restricción del ASP y del ASP. PHP PHP es un lenguaje de programación del lado del servidor gratuito e independiente de plataforma. Al crear sitios con este lenguaje se combina HTML con las instrucciones ASP.  Es un lenguaje libre y. por ende. El navegador solamente recibe la ejecución. que en español significa Páginas de Servidor Java.NET ASP (Active Server Pages) es un lenguaje de programación de Microsoft “del lado del servidor”. ya que éste es el que interpreta y ejecuta el código PHP de un sitio dinámico. Por otra parte.0 y 3.NET es que este lenguaje sólo puede ser ejecutado en el sistema operativo Windows. entre las etiquetas <?php y ?>. Se llama ASP clásico a las versiones 1. 57 . 2. Se trata de un lenguaje fácil de usar y muy eficiente. A partir del año 2002 Microsoft lanzó al mercado el lenguaje ASP. que tiene un excelente sistema de procesamiento de texto. ASP / ASP.

como modificar la apariencia de una capa. XML. DHTML también puede englobar la programación en el servidor. DHTML proporciona más control sobre la página. Para realizar las acciones sobre la página. etc. con todas las tecnologías relacionadas. Las capas se pueden ocultar. LENGUAJES DEL LADO CLIENTE-SERVIDOR DHTML XML DHTML DHTML no es precisamente un lenguaje de programación. 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. cuya principal novedad consiste en permitir compartir los datos con los que se trabaja a todos los niveles. etc. de múltiples plataformas. Más bien se trata de una nueva capacidad de la que disponen los navegadores modernos. más avanzada. 58 . 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. color. dimension es. por todas las aplicaciones y soportes. gracias a que los navegadores modernos incluyen una nueva estructura para visualizar en páginas Web denominada capa. mostrar. representa una manera distinta de hacer las cosas. se puede modificar su posición. desplazar.Con JSP se puede crear aplicaciones Web que se ejecuten en variados servidores Web. ya que Java es en esencia un lenguaje multiplataforma. se requiere de un lenguaje de programación del lado del cliente como Javascript o VBScript. Cualquier página que responde a las actividades del usuario y realiza efectos y funcionalidades se puede englobar dentro del DHTML. En la actualidad. por la cual se puede tener un mayor control sobre la página que antes.

4 AMBIENTES PARA EL DESARROLLO DE APLICACIONES WEB. Las primeras páginas Web se realizaban con un editor de texto simple. codificar todo el sitio en forma rudimentaria prolongaría el tiempo de desarrollo considerablemente. así la herramienta ayudará en la confección del sitio en las actividades más repetitivas y comunes. Lo malo es que al final se corre el riesgo de que los portales se parezcan demasiado unos a otros. 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. sin embargo el hecho de utilizar un ambiente para el desarrollo de los sitios Web. Es muy necesario utilizar ambientes de desarrollo para aplicaciones Web robustas ya que estos ambientes ayudan a organizar. La utilización de los ambientes de desarrollo Web resultan necesarios pues los sitios actuales requieren que se terminen en el menor tiempo posible. Dos programas para el desarrollo de aplicaciones Web más populares son:  Adobe Dreamweaver. 59 .. tarde que temprano el programador tiene que meterle mano al código y para hacerlo se requiere de un dominio en los diferentes lenguajes. sin embargo en los detalles finos. aumentando así la productividad y la calidad de la aplicación que se va a producir. Existen en el mercado multitud de aplicaciones que facilitan la creación y el mantenimiento de los sitios Web. de otra forma su actividad estaría muy limitada.2. no exoneran al programador de conocer con profundidad cada uno de los lenguajes que intervienen para construir el sitio.Es el estándar de la industria debido a su código limpio y características avanzadas. probar y escribir el código. Ahora también en la codificación la herramienta proporciona mucha utilidad. se realiza desde el código.

 CONCEPTUALIZAR E INVESTIGAR Todos los sitios Web empiezan con una idea. “banca en línea”.4. proporción y numero de personas necesarias.es una herramienta de código abierto que coincide con muchas de las características de Dreamwaver. 2. Este es el momento de las listas y bocetos. Se empieza con una idea (“sitio de venta en línea”. Fig.nvu. Esta primera fase es emocionante. y se puede descargar gratuitamente de la página www. estos pasos variaran en secuencia. Desarrollar el aspecto visual y comportamiento Producir un prototipo Probarlo Lanzar el sitio Mantenimiento Por supuesto. “ambiente virtual de aprendizaje”..) y luego realizar una lluvia de ideas sobre cómo se va a manifestar como sitio Web.5 METODOLOGÍAS PARA EL DESARROLLO DE APLICACIONES WEB Los sitios Web se presentan de todas formas y modelos. son los aspectos que se deben cubrir en la creacion de un sitio Web.. 60 . sea para fines personales o comerciales. Es el resultado de que alguien quiera tener algo en línea. pero en esencia.3. Fig.. el proceso de desarrollar un sitio implica los mismos pasos basicos:        Conceptualizar e investigar Crear y organizar contenido. dependiendo de la naturaleza y escala del sitio.com.Pantalla principal de NVU 2. desde sencillas pagina a megasitios que gestionan los negocios para empresas a nivel mundial. etc.Pantalla principal de Dreanweaver cs4 Nvu. 2.

¿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. Para sitios grandes. objetivos y lo más importante. este paso puede incluir casos de estudios.pizarras y cuadernos. Esto implica formular a los clientes (o así mismo) una serie de preguntas referidas a recursos. los usuarios. entrevistas. Es posible que no se necesite dedicar esa cantidad de esfuerzo (o dinero) a la preparación de un sitio Web. particularmente cuando se trata de trabajar de acuerdo a un presupuesto. 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 . Una muestra de las preguntas que se podrían formular a los clientes o a uno mismo. pero sigue siendo acertado tener claro las expectativas y recursos al principio del proceso. y un amplio estudio de mercado. 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.

siendo necesario después de la investigación diseñar los modelos para su representación como lo es un modelo Entidad-Relación. se requiere del diseño de la base de datos que almacenará la información que se procese. 2. 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. preciov. Descripcion)  producto (id_pro. Fig. precio. dir. clave. nombre. como logos y colores. tel) 62 .. personal.Recursos  ¿Qué recursos se ha dedicado al sitio (presupuesto. id_cat)  clientes (id_clie. clave.5. También se deben obtener el conjunto de tablas que conformarán la base de datos. nom. existencia. que para este caso queda de la siguiente manera:  categoria(id_cat. 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.Modelo Entidad – Relación de Ventas en línea En la figura se muestra el modelo entidad – relación de una porción de una base de datos de ventas en línea.

Tiene que haber algo de valor. el contenido sigue siendo el rey de internet. pu) administradores (id_ad. fecha) ventas (id_clie. etc. 63 . dir. cantc. las flechas indican vínculos entre páginas o secciones del sitio. id_fac. Es acertado ser sensible a la necesidad de un buen contenido. Nuevamente. Pensar en cómo los usuarios esperarían encontrar la información en su sitio y diseñar en base a sus necesidades y suposiciones en mente. Se debe tener todo lo que necesita en el sitio en una mesa. A pesar del ruido sobre tecnologías y herramientas. 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. 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. Idealmente. algo que hacer o algo que comprar que atraiga a los visitantes y haga que regresen. este es el momento para las listas y bocetos.   factura (id_fac. tanto sea algo de leer. categoría. tel)  CREAR Y ORGANIZAR CONTENIDO La parte más importante de un sitio Web es su contenido. id_pro. Creación de contenido Cuando se crea un sitio Web para un cliente. Organizarlo por importancia. Las páginas en diagramas normalmente se representan por rectángulos. nom. Decidir lo que va en la página principal y lo que se divide en apartados. se necesita establecer inmediatamente quien será responsable de generar el contenido que va en el sitio. el cliente es responsable de generar su propio contenido y destinara los recursos apropiados para hacerlo.

o cualquier superficie que se encuentre disponible..6. pero demuestra cómo se representan las paginas y las conexiones entre paginas. 64 .  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. 2. es el momento de ser creativo y probar cosas. No hay nada mejor que lápiz y papel cuando llega al momento de poner en marcha y documentar el proceso creativo. en una servilletas o pizarra.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. Es pequeño comparado con los diagramas para sitios corporativos. Página Principal Sesión del Cliente Sesión del Administrador Datos de Sesión Productos Compras Datos de Sesión Clientes Facturas Seleccionar Producto Detalle de Facturas Fig. Antes de implementar cualquier cosa no hay mejor forma de expresar las ideas rápidamente que en un bloc de notas. Se trata de creatividad. El resultado es uno o más bocetos que muestran él estilo visual propuesto para el sitio. rotuladores y cuadernos. algunos diseñadores utilizan una capa que se puede activar y desactiva para simular el efecto. Cuando es necesario mostrar interactividad (como un efecto). O quizás se prefiera trabajar las ideas en alguna herramienta de edición grafica (como Photoshop). Dibujar Esta es otra oportunidad para sacar lápices.Mapa general del sitio Ventas en línea En la figura se muestra el mapa general de un pequeño sitio de ventas en línea que permite el inicio de sesión a dos tipos de usuarios. Un boceto es normalmente un archivo grafico plano en las dimensiones aproximadas de la ventana del navegador. De cualquier forma.

el cliente recibe dos o tres bocetos que muestran su página principal en varios estilos visuales. por lo que los bocetos gráficos planos son normalmente adecuados. se debe contar con una lista de elementos que cada página debe contener. De forma ideal. a menudo con una lista de cambios. incluidas imágenes obligatorias. En algunos casos. En la fase de dirección artística es para explorar el aspecto que tendrá el sitio.7. 65 . elementos de navegación y un manuscrito para el texto. el cliente elige uno..Propuestas de los bocetos del sitio Ventas en línea Después de revisar los bocetos. El proceso de dirección de arte En la mayoría de los trabajos de desarrollo Web profesionales. 2. 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. Fig.En algunos casos puede ser necesario crear una página principal prototipo en HTML para mostrar la interactividad y las características animadas. Puede incluso haber un diagrama de la funcionalidad. solicitando una nueva ronda de diseño hasta que el diseño final esté aprobado.

sino que más bien es un proceso continuo. Este no es necesariamente otro paso. todos los sitios se deberían comprobar para asegurar de que funcionan. Es más común en el diseño Web comercial contar con un equipo de personas que trabajan en tareas especializadas. Los programadores escriben los scripts y aplicaciones del lado del servidor necesarias para que el sitio funcione según lo esperado.  PROBARLO Todos los sitios Web se tienen que probar antes de que estén listos para el público. El departamento de producción codifica el contenido con HTML y demás lenguajes requeridos. El cliente debería implicarse en esta fase. 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. En el negocio del diseño Web. los sitios se deberían probar para funcionalidad básica. PRODUCIR UN PROTOTIPO Una vez que el diseño esta aprobado y el documento están listos. Comprobación básica de calidad Como mínimo. el sitio entra en la fase de producción se puede realizar por una persona. Pueden crear las hojas finales o simplemente plantillas que se rellenan con el contenido en el momento. hay todavía mucho que hacer antes de que el sitio esté listo para llevarse a la Web. Puede haber también elementos multimedia como videos o películas flash. como en el diseño de software. Las siguientes preguntas abordan algunos de los requerimientos mínimos antes de publicar un sitio en la Web. el primer prototipo a menudo se denomina la versión “alfa”. la segunda revisión se denomina “beta”. rendimiento en diferentes entornos de navegación y facilidad de uso. a menudo aplicaciones Web y servicios. 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. El departamento de arte utiliza sus herramientas graficas para crear todos los gráficos necesarios para el sitio. todas estas piezas se juntan en un sitio. Es decir. Tanto formalmente como informalmente. que ponen disponibles sus versiones beta al público o una base limitada de suscriptores con el fin de recibir sus observaciones o comentarios. El sitio se puede probar localmente (en el disco duro) antes de subirse a su lugar definitivo en el servidor Web. formatea el texto con hojas de estilo. Después de los cambios. En este punto. Se debería poner disponible únicamente a las personas dentro del equipo Web para su revisión antes de presentárselo al cliente. 66 . todas las partes del sitio se tienen que crear. En algún momento. Existen también sitios ahí afuera. Los desarrolladores Web profesionales dedican tiempo y recursos al calendario de producción para realizar pruebas.

es conveniente realizar pruebas de funcionalidad bajo más de una configuración de navegador/plataforma. por lo tanto. ¿Funcionan todos los vínculos?: es fácil dejar vínculos sin vincular durante el proceso de producción. Antes de salir a la Web. Normalmente se debe probar el sitio en diferentes sistemas operativos y numerosas versiones de navegador.  ¿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. existen diferencia de navegador en el soporte de script. ¿Existen errores tipográficos o errores gramaticales?: la importancia de revisar un texto a veces se pasa por alto. También es posible que algunos archivos se hayan movido de sitio y que los vínculos no estén actualizados. 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. por lo que si se utiliza CSS para el diseño de página. Otra parte de la comprobación de calidad es comprobar las páginas bajo tantas condiciones como sea posible. comprando un producto. 67 . pero los errores en la copia pueden dañar seriamente la credibilidad percibida del sitio.     ¿Está todo el contenido?: asegúrese de que no falta ningún contenido.  ¿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. 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. 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. Un sitio robusto no tendrá ningún problema cuando se pruebe de acuerdo a los siguientes criterios. ¿Funcionan adecuadamente todos los scripts y aplicaciones?: Ejecutar las paginas en algunos escenarios típicos de usuario (completando formularios.

al igual que lo vínculos que sigue el usuario en el proceso de completar la tarea. Sin embargo. es posible llevar a cabo una prueba de usuario informal con los miembros de la familia. para que el sitio se pueda modificar para atender mejor las necesidades de los visitantes. que está claro y que está confuso. pero el precio normalmente es elevado. este no es el caso. Existen compañías que se puede contratar para que realicen pruebas controladas. amigos y cualquier otra persona que consiga que se siente delante de la computadora y conteste algunas preguntas. Algunos navegadores muestran el texto alternativo para cada elemento de imagen pero otros no. anotando lo que le gusta y lo que no le gusta. ¿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. compañeros de trabajo. ¿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. siendo una opción solamente para sitios Web comerciales con importantes presupuestos. Un observador toma notas de cómo se completa la tarea. En la primera. la persona se sienta delante del sitio y lo explore por su cuenta.   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. Proporcionan información a medida que se va avanzando. Algunas preguntas que le gustaría contestar por medio de las pruebas de usuarios son: 68 . ¿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. ¿Proporciona ayuda para obtener los plugins que necesita? ¿Existen versiones alternativas de su contenido para aquellos que no puedan ver la multimedia?. 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”. pero desafortunadamente. Las pruebas de usuario se llevan a cabo pronto en el proceso de desarrollo para que el diseño del sitio se pueda ajustar antes de que empiece la producción seria. No es raro realizar pruebas adicionales de usabilidad en intervalos regulares durante el proceso de producción e incluso después de que se haya lanzado el sitio. Este proceso implica sentar a gente en el sitio y ver lo sencillo que les es encontrar información o completar tareas. Existen dos tipos generales de pruebas de usuario: comportamiento observado y pruebas orientadas a tareas.

6 ASPECTOS DE SEGURIDAD. la autentificación y el rastreo. Aunque el mantenimiento es un proceso continuo que ocurre después de que el sitio haya sido creado inicialmente. 2. 69 . pero esto es la reputación del negocio o la del cliente la que va en el éxito del sitio Web.    ¿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. ¿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. Por ejemplo. y ponerlo disponible al mundo. Es importante tener una estrategia para lo que ocurriría con el sitio después de su lanzamiento inicial. 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. Si es un sitio que proporciona un evento especifico.  MANTENER EL SITIO Un sitio Web nunca está del todo terminado. También se debería considerar la vida útil del sitio. por lo que prestar atención a los detalles es esencial. Esto puede parecer trabajo adicional. se debería dejar claro quién será el responsable del mantenimiento del sitio. Se indicará quién puede estar interesado en la información y como podrían obtenerla. En este tema se analiza el papel de la seguridad en los sitios Web dinámicos. las decisiones relacionadas con el mantenimiento se deberían tomar pronto en el proceso de desarrollo. 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. De hecho la posibilidad de realizar actualización y mantener el contenido actualizado es una de las ventajas del medio Web. 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. es el momento de enviarlo al servidor final.

los ataques serán poco frecuentes y el esfuerzo invertido en ellos será limitado. rendimiento. por lo que resulta aconsejable invertir en personal y otro tipo de recursos para garantizar la aplicación de todas las precauciones posibles. 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. Para atacar a los gobiernos es necesario disponer de muchos medios. Puede resultar tentador creer que siempre debería aplicarse el nivel más alto seguridad a todos los sitios.Entre los aspectos de seguridad están:  Importancia de la información  Amenazas contra seguridad  Equilibrio entre usabilidad. Los equipos militares son un objetivo obvio tanto para individuos como para gobiernos extranjeros. al igual que varían los esfuerzos que invertirá un atacante para obtener acceso a dicha información. Antes de decidir el esfuerzo o los gastos que se desean invertir en el sistema de seguridad. el de una empresa. es necesario determinar el valor de la información. Como la información que almacenaran en sus equipos es poco probable que interese a otros usuarios. El valor de la información almacenada en el equipo de un usuario que lo utilice para divertirse. pero la protección tiene un coste. 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. 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. Sin embargo. lo primero que se debe valorar es la importancia de los datos que se está protegiendo. 70 . el de un banco y el de una organización militar es diferente. tanto para el propietario como para los posibles atacantes.

AMENAZAS CONTRA LA SEGURIDAD. La autenticación implica solicitar a los usuarios que demuestren su identidad. ¿Por qué tenerlo instalado?. Sin embargo. Los servidores Web no son el lugar más aconsejable en el que se deba guardar información secreta. Se deben Suprimir los servicios innecesarios de un servidor Web para reducir el número de puntos débiles potenciales. Los servicios no utilizados pueden resultar peligrosos. Si no se utiliza el comando rcp. puede decidir si dicha persona dispone de acceso. lo cual implica desarrollar las labores de diseño teniendo presente la seguridad. no se debería utilizar el mismo que el utilizado como servidor Web. información suministrada por un cliente. Podrían tratarse de información destinada únicamente a determinadas personas. eliminar los servicios innecesarios de servidor Web y exigir autentificación. realizar pruebas exhaustivas. Se analizaran más adelante. Los datos también corren el riesgo de exposición en sus trayectos por la red. configurar el servidor y el software de manera correcta. los sistemas operativos actuales instalaran una gran cantidad de servicios que no se necesitan y que se debería eliminar. 71 . Si se almacenan los datos sobre nomina o el plan para la dominación del mundo en una computadora. Los protocolos TCP/IP dividen los datos en paquetes y los reenvían de equipo en equipo hasta que alcanza su destino. Cuando un sistema sabe quien realiza la petición. se debe limitar los métodos de acceso a la información y los usuarios que disponen de dicho acceso. programar con atención. Cada servicio que este ejecutando puede resultar vulnerable. 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. como su contraseña. pueden ser confidenciales. Existen varios métodos de autenticación de los cuales solo se utilizan dos de forma generalizada: las contraseñas y las firmas digitales. 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. Es necesario mantener todos los servicios actualizados para eliminar los puntos vulnerables conocidos. 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. la seguridad no se incluye entre ellas. como listas de precios de mayoristas. Para reducir el riesgo de la exposición de datos. datos de contacto o el número de una tarjeta de crédito.

si no se ha realizado ninguna copia de seguridad de esos datos. Pérdida o destrucción de la información La pérdida de datos puede resultar más costosa que su apropiación indebida. desarrollando por Netscape para realizar esta tarea mientras los datos navegan entre los servidores Web y los navegadores. Si se llevan meses construyendo un sitio.8. el número de visitantes por segundo al que puede dar servicio el equipo se reduce drásticamente. podrían atravesar una decena de equipos diferentes. Si fueran destinados a un equipo situado fuera del país. se pueden cifrar los datos antes de enviarlos a través de una red y descifrarlos en el otro extremo. y cualquiera de ellas puede ver los datos en su tránsito.. el número de intermediarios podría supera los veinte. Fig. Los servidores Web suelen utilizar el sistema SSL (Secure Socket Layer).8.Rutas por donde pueden viajar los mensajes Los datos enviados a través de internet recorren una gran cantidad de equipos potencialmente inseguros. los datos pasan a través de una gran cantidad de computadoras hasta llegar a su destinatario. se verán obligados a volver a escribir el sitio Web y a comenzar desde cero. Para proteger la información confidencial. Se trata de una forma bastante barata en términos de costes y de esfuerzos de proteger las transmisiones. 2. debido al tiempo que requiere este proceso. 72 .Por lo tanto. pero como el servidor necesita cifrar y descifrar los datos en lugar de enviarlos y recibirlos simplemente. los datos podrían recorrer hasta cinco equipos antes de abandonar el edificio. Si los datos van dirigidos a un equipo de un mismo país. Si una organización es de gran tamaño y consta de una red compleja. recogiendo información sobre usuarios y pedidos. Existen comandos y aplicaciones de software para ver la ruta que siguen los datos desde un equipo origen hasta el equipo de destino. como se ilustra en la figura 2.

Modificar datos Aunque la pérdida de datos puede causar muchos daños. La intención de un pirata informático puede ser modificar el aspecto de la Web u obtener beneficios fraudulentos. sabrá que el archivo no se ha modificado. como Tripwire (htt://www. Si se descubre que alguien ha penetrado en el sistema de seguridad. Comprar discos duros de calidad. probablemente inmediatamente después de la 73 . Esta aplicación registra información sobre archivos en un estado seguro. Contratar únicamente personal competente y atento. Los discos duros en ocasiones fallan. Proteger los servidores contra ataques informáticos. están ideados para cambiar con el paso del tiempo. La aplicación de permiso de archivo permite autorizar el uso de sistema. ¿Cómo se puede saber si se han modificado archivos importantes? Algunos archivos. Se puede proteger los datos contra su modificación al viajar por la red mediante una firma.com). pero no modificar los archivos del sistema ni de otros usuarios. Aunque es poco probable que los locales de su empresa se quemen o sufran alguna otra catástrofe. También podría ocurrir que un programador o un administrador poco atento eliminen el disco sin querer o que un disco se estropee. Esta técnica no impide la modificación de los datos pero. y aunque los programas puedan reinstalarse si se sospecha que han sido modificados.tripwire. solo hay una forma de protección real: las copias de seguridad. si el receptor comprueba que la firma coincide al recibir los archivos. la intención de otros es permanecer invariables desde su instalación a menos que se actualicen deliberadamente. como los archivos datos que se almacenan en una base de datos. Entre las formas de modificación se incluyen cambios en los archivos de datos ejecutables. Se pueden adoptar varias medidas para reducir la probabilidad de perder datos. Reducir al mínimo los empleados con acceso al equipo. 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. La modificación de programas y datos puede resultar engañosa. el almacenamiento de una copia de seguridad fuera de ellos es una medida de seguridad barata y eficaz. su modificación puede resultar aun peor. Sin embargo. Detectar las modificaciones puede resultar difícil. Existen aplicaciones que permiten comprobar la integridad de los archivos.Un pirata informático podría colarse en el sistema y formatear el disco duro. Independientemente del causante de las pérdidas de datos. un pirata informático que haya logrado entrar una vez en el sistema podría crear una puerta trasera secreta para futuras visitas. resultaran muy difíciles de modificar durante el trayecto sin su detección. Asegúrese de volcar sus datos de manera periódica y de almacenar las copias de seguridad lejos de los equipos habituales. puede que no sepa que versión de los datos esta “intacta”. Si cifra los datos para proteger contra la visualización no autorizada. La realización de copias de seguridad es una función vital. 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. Mediante la sustitución de archivos ejecutables con versiones saboteadas.

obtenido o escrito incluya errores graves.com. Resulta más sencillo detectar los host de una red utilizada para atacar a otros que proteger los equipos de posibles ataques. El correo basura inverso envía correo basura en el que se incluye el destinatario como emisor. se produjo una oleada de ataques DoS distribuidos a importantes sitios Web. Algunos sitios de apuestas en línea experimentan una mayor demanda antes de un evento deportivo importante. los ataques DoS no serian un problema. Como el proceso esta automatizado. 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. tiempo y reputación. Si todos los administradores de redes se comprometieran a vigilar su propia red. Entre las víctimas se encontraba yahoo!. Algunos sitios esperan concentrar sus transacciones en determinadas horas. un atacante puede instalar la herramienta en un solo host en cuestión de segundos. A principio de 2000. No hay que ser un genio para buscar los puntos débiles de una serie de equipos e instalar la herramienta en los mismos. Aunque los atacantes no ganan nada con conseguirlo colapsar un sitio. reciben instrucciones para inundar el destino con tráfico de red. el envió inverso de correo basura o recurrir a una herramienta automatizada. Si se realiza una búsqueda. eBay. 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. Una de las razones de la dificultad de evitar este tipo de ataques es que se pueden introducir de diferentes formas. el propietario del mismo puede perder ingreso. Protegerse de ataques DoS es una difícil tarea. Dados los cortos plazos de desarrollo asignado a los proyectos Web. se pueden descubrir los puertos predeterminados que utilizan las herramientas DoS habituales y cerrarlos.instalación. Como existen tantos métodos de ataque. y permite utilizarla en un momento posterior para verificar si los archivos han variado. 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. Errores en el software Es posible que el software que se haya comprado. 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). Puede que el enrutador cuente con un mecanismo para limitar el porcentaje de tráfico que utiliza determinados protocolos como por ejemplo ICMP. ETrade y Buy. Se puede instalar un programa en el equipo de la victima que utilice el tiempo del procesador del sistema. 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. Amazon. es muy 74 . Una vez afectados varios equipos.

probable que el software incluya errores. las suposiciones pueden resultar erróneas. Suposiciones erróneas hechas por los desarrolladores Los diseñadores y los programadores de un sistema necesitan realizar una gran cantidad de suposiciones. Entre las causad habituales de los errores se pueden citar las malas especificaciones técnicas. 75 . pérdidas financieras y servicios deficientes. Es de esperar que las documenten y que resulten aceptadas. 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. Aunque puede que resulte obvio especificar la anulación de un pedido si se rechaza la tarjeta de crédito de un cliente. con todos los sistemas operativos posibles y utilizando todos los parámetros de usuarios disponibles. Todas las iniciativas comerciales basadas en procesos informáticos resultaran vulnerables a software con errores. Este tipo de errores se pueden detectar y solucionar mediante una combinación de pruebas y revisiones detallada del código. Pruebas incompletas Resulta prácticamente imposible verificar todas las posibles entradas de los usuarios en todos dispositivos de hardware existentes. Por ejemplo. Suposiciones como estas se pueden deslizar por que suelen ser ciertas. más probables que el producto final incluya errores. suposiciones erróneas realizadas por los desarrolladores y pruebas incompletas. De manera ideal. 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. Mientras menos experiencia tengan los desarrolladores con el tipo de sistemas con el que están trabajando. estas pruebas deberían automatizarse para poder ejecutarlas en los equipos seleccionados con muy poco esfuerzo. un desarrollador podría asumir que los datos de entrada serán validos. lagunas de seguridad. Sin embargo. Un conjunto de pruebas bien planteado debería probar todas las líneas de código del proyecto al menos una vez. Es necesario implementar un plan de pruebas bien diseñado que verifique todas las funciones del software en un conjunto representativo de equipos. más precisas deberían ser las especificaciones técnicas. 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. Malas especificaciones técnicas Cuanto más escasa y ambigua resulte su documentación de diseño. que no incluirán caracteres inusuales o qué cantidad de caracteres introducidos será inferior a un tamaño dado. Los errores en el software pueden causar todo tipo de compartimientos impredecibles incluida la indisponibilidad del servicio.

Es probable que una persona no implicada realice suposiciones diferentes. 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. Los certificados digitales de autenticación emitidos por una organización de confianza brindan una gran fiabilidad. Para las transacciones entre las partes con una relación ya establecida.com) para garantizar la autenticidad de la compañía. Uno de los objetivos principales de las pruebas es detectar las suposiciones erróneas realizadas por los desarrolladores. RENDIMIENTO.verisign. Es importante que en este proceso participen otras personas además de los desarrolladores originales.El problema más importante de esta operación es que se trata de un trabajo repetitivo muy poco atractivo. la Web es un lugar peligroso. 76 . EQUILIBRIO SEGURIDAD ENTRE USABILIDAD. como por ejemplo un tribunal. Si las transacciones son aisladas.thawte. los certificados digitales y el uso de comunicaciones cifradas o firmadas proporcionan una forma efectiva de limitar el repudio. La mayor parte de estas peticiones realizan peticiones de páginas Web perfectamente legítimas. para ser más exacto.com) o Thawte (http://www. Además. 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. pero al conectar sus equipos a internet también existe la posibilidad de que la gente realice otros tipos de conexiones. Aunque hay gente a la que le gusta romper cosas. esto no suele ocurrir. Este medio está diseñado para permitir que numerosos usuarios soliciten servicios desde sus equipos. o una persona que acepte algo procedente del correo electrónico y que después afirme que alguien falsifico dicho correo. ambas partes podrían demostrar de manera terminante las acciones realizadas por la otra parte ante un tercero. En la práctica. Repudio El ultimo riesgo que considerar es el repudio. De manera ideal. los comerciantes están dispuestos a admitir un determinado nivel de fraude o riesgo de repudio a cambios de mantener el nivel de transacciones. COSTE Y Por su propia naturaleza. los profesionales no suelen mostrarse muy implicados a buscar errores dentro de su trabajo. esta opción no resulta tan práctica. como el contacto inicial entre un sitio de comercio electrónico y un usuario que utilice una tarjeta de crédito. El repudio tiene lugar cuando una parte implicada en una transacción niega haber tomado parte en ella. hay muy pocas a las que le guste romper la misma cosa una y otra vez. En las pequeñas transacciones. También deberían poder certificarse los contenidos de los mensajes enviados por cualquiera de las partes. La autenticación ofrece ciertas ganancias sobre la parte con la que se está tratando. 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.

En esta política no debería hablarse de implementaciones o soluciones. la usabilidad. tendrá que colocar todos los equipos en una caja fuerte sin conexión a la red. no suele ser así. PRINCIPIO DE AUTENTICACIÓN El objetivo de la autenticación es demostrar que alguien es quien dice ser. 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. la usabilidad. Si se aumenta la seguridad de un servicio se puede reducir su capacidad de uso. Y no debería actualizarse a menudo. Se debe buscar el equilibrio entre la seguridad. 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. por ejemplo. más alto. el coste y el rendimiento. escáneres de virus y operaciones de registros de usuario) absorbe recursos. La ejecución de software para lograr que el sistema resulte más seguro (como sistemas de encriptación y detección de intrusos. Si se desea estar completamente protegido. es necesario rebajar el nivel de seguridad de alguna manera. El rendimiento.Aunque resulta tentador asumir que es apropiado establecer el nivel de seguridad. de la cantidad de visitas esperadas y de los obstáculos que considere que aceptaran los usuarios legítimos. 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. 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. si no de requisitos de seguridad y objetivos dentro del entorno. que una sesión normal. del presupuesto. 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. Se necesita mucho más potencial de procesamiento para suministrar una sesión cifrada. Existen muchas formas de suministrar autenticación pero como en el caso de muchas medidas 77 . CREAR UNA POLÍTICA DE SEGURIDAD Una política de seguridad es un documento que describe  La filosofía general sobre seguridad en una organización  Que se debe proteger: software. hardware y datos  Quien es responsable de la protección de estos elementos  Estándares de seguridad e indicadores para medir el cumplimiento de dichos estándares A la hora de desarrollar la política de seguridad se pueden aplicar las mismas reglas utilizadas para escribir un conjunto de requisitos de software. Para que los equipos resulten accesibles se puedan utilizar. el coste y la seguridad se pueden considerar como objetivos contrapuestos. como una conexión SSL a un sitio Web. Se pueden establecer directrices diferentes para las distintas partes de la organización.

Esta opción podría resultar aceptable o incluso deseable para obtener acceso a los sistemas internos de una organización. Suministran un determinado nivel de autenticación pero es posible que resulten insuficientes para sistemas de alta seguridad. Las contraseñas resultan fáciles de implementar. los piratas informáticos pueden capturar pares de nombres de usuarios y contraseñas. un 50% escogerá contraseñas fáciles de descubrir. Muchas contraseñas resultan fáciles de averiguar. El usuario y el sistema conocen la contraseña. Las técnicas de autenticación incluyen el uso de contraseñas. A pesar de sus defectos potenciales. 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. Este sistema resulta seguro siempre y cuando nadie más sepa o pueda adivinar la contraseña. Puede que el nivel de anonimato no 78 . 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 son una forma sencilla y relativamente efectiva de autentificar usuarios. El peligro de una política de este tipo es que los usuarios legítimos no logren recordar las contraseñas escogidas. Las medidas biométricas y la mayor parte de las soluciones de hardware implican el uso de dispositivos de entrada especiales. aunque esta medida afectara a ala usabilidad. el sistema lo aceptará. medidas biométricas mediante escáneres de huellas y medidas que implican el uso de hardware como tarjetas inteligentes.de seguridad. Puede obligar a los usuarios a incluir números o signos de puntuación en sus contraseñas. cuanto más seguro son los métodos más problemáticos resultan de utilizar. como vocablos de un diccionario o el nombre de usuario. Puede limitar las oportunidades de capturar contraseñas cifrando el tráfico de red. Las contraseñas presentan en sí mismas varios puntos débiles y no suministran autenticación segura. El concepto de una contraseña es sencillo. 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. Si se permite que los usuarios seleccionen sus propias contraseñas. pero reduce gran parte de las ventajas de permitir el acceso al sistema en la Web. firmas digitales. Las contraseñas solo deberían capturarse electrónicamente. Si otro visitante afirma ser un usuario y conoce su contraseña. 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. lo que limitaría el acceso a aquellos usuarios autorizados con computadoras equipados. En la Web solo se utilizan dos de manera extendida: las contraseñas y las firmas digitales. Mediante el uso de programas para capturar pulsaciones del teclado en una terminal o la información que circula por la red. sencillas de utilizar y no requieren el uso de dispositivos de entrada especiales.

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

el servidor IIS de Microsoft o cualquier otro servidor Web comercial para establecer comunicaciones seguras con navegadores a través de SSL. por si se quiere enviar un mensaje cifrado y tener los detalles de la otra parte que podrá estar seguro de que no se ha alterado. SERVIDORES WEB SEGUROS Se puede utilizar el servidor Web apache. Las autoridades firman un certificado para acreditar que se ha comprobado la identidad de una persona o compañía.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.com).com). Los servidores Web que permite conexiones SSL se suelen llamar servidores Web seguros. Apache permite utilizar el sistema operativo UNIX. El servidor apache se puede utilizar en una plataforma Windows. El uso de SSL sobre IIS implica sencillamente instalar IIS. 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. No garantiza que se está trabajando con una entidad fiable. Las dos CA más conocida como VeriSign (http://www. como Equifax Secure (http://www. Un certificado digital combina una clave pública con los detalles de una organización o individuo en un formato digital. Si se confía en la CA. Algunas menos conocidas.com) y Thawte (http://www. En un certificado. generar un par de claves e instalar el certificado.equifaxsecure. resulta útil utilizar una tercera parte de confianza que acredite la identidad de los participantes y los detalles de sus certificados.verisign. pero existen otras. Mod_SSL y OpenSSL 82 . El uso de SSL en apache requiere la instalación de tres paquetes diferentes: Apache. Los certificados digitales se suele utilizar para conferir un aire de respetabilidad a un sitio Web de comercio electrónico. Tenga en cuenta que el certificado no es una referencia ni una declaración de solvencia.thawte. los navegadores Web pueden establecer conexiones SSL al sitio sin generar cuadros de dialogo de advertencia. Las autoridades de certificación expiden certificados digitales a individuos y compañías sujetas a una serie de comprobaciones de identidad. Los certificados suministran una estructura de confianza. 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. que suelen resultar más fiables pero más difíciles de configurar que IIS. VeriSign y thawte pertenecen a la misma compañía y hay muy poca diferencia entre ambas. En las transacciones comerciales. Para las interacciones comerciales. es probable que se obtenga una dirección física y una entidad o persona contra la que dirigir la demanda. Lo único que garantiza es que en caso de que engañen. 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. Con un certificado emitido por una CA conocida. resultan bastante más baratas. Estas terceras partes se conocen como “Autoridades de Certificación” (CA). se tiene la clave pública de otra parte.

También se puede utilizar para 83 . pero por regla general se deberá demostrar que la empresa está reconocida legalmente. El resultado final es una solicitud de firma de certificado (CSR) cifrada. AUDITORIAS Y REGISTROS El sistema operativo permitirá registrar todo tipo de evento. se paga la cuota correspondiente.Se puede comenzar a utilizar SSL de forma inmediata si genera certificados propios. 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 necesitara generar una solicitud de firma de certificado. Cuando la autoridad de certificados emita el suyo. el proceso es esencialmente el mismo para todos los servidores. se estará en disposición de firmar un certificado con una autoridad de certificación. 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. necesitara un certificado publicado por una autoridad de certificación. Los archivos de registro pueden servir de ayuda para detectar comportamientos erróneos o malintencionados cuando tienen lugar. se deberá guardarlo e indicarle al servidor Web donde encontrarlo. Las instrucciones se encontrarán en los sitios Web de las autoridades de certificación. El certificado final es un archivo de texto parecido al CSR mostrado anteriormente. El proceso para lograrlo varía de un servidor a otro. Para poder utilizar SSL con eficiencia. El proceso exacto para lograrlo varía según la autoridad de certificación. Los eventos en los que se puede estar interesado desde el punto de vista de la seguridad incluyen errores de red. Sin embargo. etc. que consta de una dirección física y que es el titular del nombre de dominio pertinente. acceso a archivos de datos.

se podría contratar un servicio de auditoría extremo para que controlara el comportamiento de los administradores. 84 . Si un intruso dispone de acceso de usuario raíz o de administrador al sistema. Restringe las actividades de la gente y los equipos situados fuera de los cortafuegos. El proceso de auditar los registros puede realizarse en tiempo real o de manera periódica. 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. los cortafuegos también se pueden utilizar para restringir las actividades de los equipos incluidos en su interior. Filtran y rechazan el tráfico que no cumple las reglas establecidas en ellos.determinar cómo tuvo lugar un problema o una intrusión si se examina tras observar problemas. Para trabajar con archivos de registro de gran tamaño. será dirigido a otra red. El administrador del sistema puede realizar auditorías periódicas. En ocasiones. pero además. los cortafuegos de red impiden que el caos se extienda por una red. Los paquetes se pueden filtrar por tipo. se obtendrán registros gigantescos que resultan muy difíciles de examinar. Uno cortafuegos puede limitar los protocolos de red que se pueden utilizar. Su misión consiste supervisar todo el tráfico que intenta pasar de una red a otra. dirección de destino o puertos. el cortafuego necesita interfaces para las dos redes y un conjunto de reglas. 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. los paquetes pueden rechazarse simplemente y en otros pueden desencadenar entradas en el registro o activar alarmas. En algunos casos. De la misma forma que los cortafuegos de un edificio o de un coche impiden que el fuego se extienda a otros compartimientos. En cualquier caso. se detendrá o se rechazara. de lo contrario. podrá alterar los archivos de registro para borrar sus huellas. Un cortafuegos puede ser un dispositivo de hardware. Los cortafuegos están diseñados para proteger los equipos de una red del mundo exterior. Si se establecen los criterios para detectar y registrar problemas en el nivel de mayor paranoia. Si el trafico cumple las reglas establecidas. como un enrutador con reglas de filtrado o un programa de software que se ejecute en un equipo. Los archivos de registro presentan dos problemas principales: el tamaño y la veracidad. CORTAFUEGOS El objetivo de los cortafuegos es alejar una red del mundo exterior. Los archivos de registros resultan vulnerables a ataques. dirección de orígenes.

pero no se debería descuidar la seguridad física de un sistema. Matriz redundante de discos independientes) que admite funciones de réplica. secuencias de comandos y bases de datos). Sin embargo. desconectar los cables o intentar eludir los mecanismos de seguridad utilizando un disco de reinicio. De esta forma. SEGURIDAD FISICA Las amenazas de seguridad consideradas hasta el momento hacen referencia a elementos intangibles como el software. 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. El coste será superior. es aconsejable contratar los servicios de varios proveedores de servicios. 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. se debe considerar que ocurriría en una situación que afecta a la matriz. El lugar concreto dependerá de cada caso pero puede ser una habitación. Se deben hacer copias de seguridad periódicas de todos los componentes del sitio Web (páginas estáticas.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. queda cubierta la probabilidad de que ocurra un fallo en el disco duro. al equipo a al edificio entero. el sitio seguirá estando activo. Los rociadores de agua pueden causar tanto daño a los componentes electrónicos como el fuego. aunque se vea afectada su capacidad. 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. Los cortes de suministro de larga duración requieren un generador que alimente el sistema de refrigeración y los equipos. los fallos de red pueden durar minutos o hasta horas. El hardware y los inmuebles se pueden asegurar y sustituir. robos o desastres naturales. en especial si se reciben pedidos en línea. 85 . Estas copias de seguridad deberían almacenarse en un lugar diferente y a ser posible en un lugar distinto y seguro contra incendios. El sistema debería estar protegido bajo llave en un lugar seguro. ninguna entidad aseguradora podrá sustituirlo. personas (torpes o criminales). Si se trata de un sitio completamente estático. bastara con hacer una copia cuando se modifique. Al igual que los fallos de suministro eléctrico. sin embargo. La frecuencia con la que se deben realizarlas está en función con el volumen de actualización. fallos en el suministro eléctrico y fallos en la red. Si el mantenimiento de la red es vital. Solo se debería conceder permiso de acceso a esta habitación al personal pertinente. El personal no autorizado podría. La frecuencia depende del dinamismo del sitio. Si el funcionamiento continuo del sistema es un factor importante. una jaula o un armario. pero si el software Web personal desaparece. Se debe prever un sistema de aire acondicionado y sistemas de protección contra el fuego. se debería utilizar un sistema de alimentación ininterrumpible. voluntaria o involuntariamente. el tipo de sitio que se está tratando es probable que cambie con frecuencia. o los sitios alojados en cualquier host. pero en caso de fallo.

¿Cuáles son los lenguajes considerados como por el lado del cliente como por el lado del servidor? 18. ¿qué pasa con el nivel de usabilidad y el rendimiento del sitio?. ¿Flash es un lenguaje. ¿Cuáles son los lenguajes del lado del servidor más utilizados? 11. ¿porque? 86 .NET o a PHP?. ¿En qué etapa del desarrollo Web se realiza el modelo entidad – relación? 23. ¿En qué consiste la prueba de funcionalidad básica del sitio? 27. ¿En qué consisten las pruebas del entorno de navegación? 28. ¿Cómo protegerse de la denegación de servicio? 37. ¿Para qué sirve el mapa de un sitio Web? 24. Explique. ¿Qué elementos intervienen en el primer nivel de una aplicación Web? 4. ¿Se debería aplicar el nivel más alto de seguridad a un sitio Web? Si. Explique que es el repudio 39. De dos ejemplos de ambientes para el desarrollo de aplicaciones Web 20. aumenta. ¿Qué comportamientos pueden causar los errores en el software? 38. ¿Cómo se puede verificar la modificación de datos? 36. ¿Entre que etiquetas se escribe el código de Javascript? 6. ¿Cómo se empieza un sitio Web? 22. ¿Cuáles son los pasos básicos para el desarrollo de una aplicación Web? 21. ¿Entre que etiquetas se incluye el código de PHP? 15. ¿En qué consiste la fase de producción del prototipo? 26. ¿Porque? 33. El lenguaje PERT ¿se parece más a Javascript o a un applet de java?. ¿En qué consiste el mantenimiento del sitio? 31. ¿A quién se parece más JSP. ¿En qué consiste una arquitectura de aplicaciones de dos niveles? 2. ¿En qué consisten los dos tipos de pruebas de usuario? 29. ¿Qué servidor Web y que sistema operativo utiliza el ASP. ¿Cuáles son las formas efectivas de limitar el repudio? 40. ¿Cuáles son las razones por los que los CGI se encuentran desfasados? 12. si. Si aumenta el nivel de seguridad. ¿Por qué? 17. ¿Qué son los lenguajes de programación del lado del cliente? 5. ¿Cuál es la desventaja de Visual Basic Script? 8. la perdida de datos o la modificación de los mismos?. ¿Muestre por lo menos una lista de 8 aspectos de seguridad para un sitio Web? 32. porque? 9. ¿Cómo evitar la exposición de datos confidenciales de un sitio Web? 34. ¿Cuál es la finalidad de presentar las propuestas de bocetos del sitio al cliente? 25. ¿Por qué? 35. ¿Por qué? 13. disminuye. a ASP.NET? 14. no. ¿En qué consiste una arquitectura de aplicaciones de tres niveles? 3. ¿Es más costosa la exposición de datos confidenciales. no. ¿Por qué se requieren los ambientes para el desarrollo de aplicaciones Web? 19.PREGUNTAS 1. ¿Qué son los lenguajes de programación del lado del servidor? 10. Menciones tres ventajas de PHP 16. En qué consiste el lanzamiento de un sitio? 30. ¿Cuál es la principal ventaja de los Applets de java? 7.

¿Por qué no se deben utilizar los Certificados digitales propios? 51. ¿Cuáles son los elementos que se consideran en la seguridad física de un sistema? 87 . ¿Cuáles son las técnicas de autenticación? 44. ¿Explique cómo funciona la función sha1()? 46. ¿Con que frecuencia se deben realizar las copias de seguridad de datos? 53. ¿Qué es la autenticación? 43. ¿Qué es la encriptación? 45. ¿Cómo se utilizan los SSL? 50. ¿En qué consiste la encriptación de clave privada? 47. ¿Qué describe una política de seguridad? 42. ¿De qué forma los cortafuegos protegen la red? 52.41. ¿Cuál es la función de una Autoridad de Certificación? 49. ¿En qué consiste la encriptación de clave pública? 48.

describir el procedimiento y probar su funcionalidad. 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. 1. Instalar un servidor Web en ambiente Unix . 2. 3. Instalar un servidor Web en ambiente Windows.EJERCICIOS PROPUESTOS. Siguiendo la metodología para el desarrollo de aplicaciones Web. describir el procedimiento y probar su funcionalidad. 88 .

3 Programacion del lado del servidor. 89 .

etc.1.1PROCESAMIENTO DEL LADO DEL SERVIDOR. ASP. Fig.  El navegador recibe estos datos. las preferencias del usuario y algún otro factor. Los lenguajes del lado del servidor son invisibles para los clientes. En este capítulo se aborda la programación del lado del servidor.  El servidor comprueba si la página solicitada contiene script del lado del servidor (PHP.3. Los pasos que sigue el navegador son:  Solicita al servidor una página Web a través de Internet. interpreta la página Web enviada y la muestra en la pantalla de acuerdo con la resolución del monitor. Las páginas que utilicen scripts de este tipo contienen el código entre etiquetas parecidas a las de HTML.. pero éstas desaparecen cuando el cliente recibe la página. Los 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.1. es decir el lenguaje de programación que se procesan solo en el servidor. El procesamiento realizado cuando se use PHP como lenguaje de acceso a base de datos se muestra en la figura 3. JSP. 3.)  Ejecuta los posibles script y añade el resultado final a la página Web resultante.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 .

de esta forma es como se oculta el código que reside en el servidor Web por el cliente. Una forma de verificar que el código anterior solo se puede ejecutar en el servidor. mismo se encuentra entre las etiquetas <?php … ?>. <!-. la primera línea hallada entre estas etiquetas defines una variable y la segunda línea muestra la variable como un mensaje. también se puede usar código de un lenguaje distinto como son JSP. así como en el servidor Web se tendría que instalar el interprete correspondiente. de ser así cambiarían las etiquetas que definen el lenguaje en la pagina. ASP. como son HTML y Java Script. todo los que se encuentre entre estas etiquetas es considerado como código de PHP.El siguiente listado es el archivo original que reside en el servidor Web. echo $men. Así como en este caso se usa código de PHP. <!-. sino más bien código HTML solamente.php --> <html> <head> <title>PROCESAMIENTO DEL SERVIDOR</title> </head> <body> <?php $men="SE EJECUTA EN EL SERVIDOR". como lenguaje por el lado del servidor. a diferencia de aquellas páginas que contienen código de lenguajes por el lado del cliente solamente. En el presente libro se abordará con detalle la sintaxis y demás aspectos relacionados con el lenguaje PHP. por supuesto que esto no se podrá llevar a cabo. ?> </body> </html> Después de que el motor de PHP hace su trabajo y el servidor Web responde al cliente.basico en el servidor.basico en el servidor.php directamente en el navegador. contribuyendo de esta forma a aumentar el nivel de seguridad en las operaciones efectuadas. es tratando de ejecutar la pagina basico en el servidor. pues es un lenguaje muy 91 .php --> <html> <head> <title>PROCESAMIENTO DEL SERVIDOR</title> </head> <body> SE EJECUTA EN EL SERVIDOR </body> </html> Se puede observar claramente que el código recibido por el cliente ya no contiene ninguna instrucción de PHP. contiene además de código HTML código de PHP.NET. el cliente recibirá el siguiente código.

pero además de una herramienta que nos facilite el desarrollo del sitio web. ya que se deben configurar adecuadamente para que interactúen entre sí. Una vez seleccionado la plataforma de trabajo. capaz de interactuar con cualquier manejador de base de datos y además gratuito. 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.NET como motor para acceso a base de datos y SQL Server como servidor de base de datos.Servicios requeridos para desarrollo Web Cada una de las aplicaciones se pueden descargar por separado en sus sitios oficiales de forma gratuita.1 SERVIDOR APLICACIÓN WEB APACHE BASE DE DATOS MySQL MOTOR PHP PHP Tabla 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. Uno de estos programas se conoce como “Wamp Server” su sitio oficial es: http://www.poderoso. 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. se indican en la tabla 3. 92 . estos son los tres programas para poder iniciar con las tareas de programación. según convenga a cada programador. INSTALACION Y CONFIGURACION DE SERVIDORES Los servicios requeridos para desarrollar aplicaciones Web. mientras que usar por separado cada uno de los servicios requiere de mayor experiencia. la habilitación del motor de acceso a la base de datos. se procede a instalar y en su caso configurar los programas requeridos.com/ de donde se puede descargar la versión más reciente que en estos momentos es 2.wampserver.0. así como el servidor de bases de datos propiamente dicho.1. ASP. En cualquiera de los dos casos se podría optar por la misma herramienta de desarrollo de aplicaciones Web o escoger uno distinto. en primer lugar la instalación del servidor web. 3. 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.

2. PHP también se puede configurar editando su archivo de configuración llamado “php.4.html index. Las líneas que inicien con el carácter # en el archivo “httpd. Este archivo contiene un conjunto de parámetros que configuran el servidor cada vez que inicia.3 PARAMETRO DocumentRoot "C:/wamp/www" SIGNIFICADO Especifica la ruta donde ubicara el sitio web DirectoryIndex index.Parámetros de configuración de Apache CONFIGURACIÓN DE PHP.2.1 Base de Datos SQLITEMANAGER 1.ini” funciona de una forma similar al archivo de configuración de apache.conf”.0 Tabla 3.9-2 Administrador PHPMYADMIN 2.dll" con el servidor apache Tabla 3. por lo que no tienen efecto en la configuración del servidor.htm index.html. instala en el equipo los servicios y versiones indicados en la tabla 3.php3 Indica el orden de prioridad a evaluar de index. Por mencionar alguno de los parámetros y sus funciones se muestra la tabla 3.5 93 .0 CONFIGURACIÓN DE APACHE El archivo que contiene la configuración del servidor web se llama “httpd.php index..10. 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.2.1.Servicios de Wamp Server 2..0 por ejemplo.33 MOTOR PHP PHP 5. para ligarlo "c:/wamp/php/php5apache2_2.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.2. solo que aquí las líneas con punto y como se consideran como comentarios.11 BASE DE DATOS MySQL 5.Al usar Wamp Server 2.conf” son considerados como comentarios.2 SERVIDOR APLICACIÓN Versiones WEB APACHE 2. Algunos de los parámetros contenidos en este archivo se muestran en la tabla 3.

Algunos de los parámetros contenidos en este archivo se muestran en la tabla 3.51b servidor MySQL Datadir = Especifica la ruta donde ubicará las c:/wamp/bin/mysql/mysql5.cache_expire = 180 Define la duración de las páginas de session en cache. en cualquiera de los casos lo que básicamente se hace es la prueba de retrociclo Web. Para probar si el servidor está funcionando correctamente.0.auto_start=1 Habilita el manejo de sesiones automáticamente 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. se puede hacer escribiendo en la barra de direcciones del navegador la palabra: localhost o la dirección IP del equipo. todos los servicios quedan configurados y listos para ser usados por el programador..Parámetros de configuración de PHP CONFIGURACIÓN DE MySQL. este consiste en usar la misma computadora para mantener activos PARAMETRO 94 .ini” funciona de una forma similar al archivo de configuración de apache. Tabla 3.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.dll Agrega la librería MySQL en php session.Parámetros de configuración de MySQL Tan solo con instalar el Wamp Server.0.5. MySQL también se puede configurar editando su archivo de configuración llamado “my.6.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. 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. en minutos.6 SIGNIFICADO Basedir = Especifica la ruta donde ubicará el c:/wamp/bin/mysql/mysql5.

 Unario.  De comparación. El más básico es el símbolo de asignación “=”. que a continuación se aborda en PHP.Prueba de Retrociclo Web Una vez que todos los servicios están activos es momento de empezar a programar.  Ternario.  Aritméticos. Se pueden agrupar como:  De asignación. como se muestra en la figura 3.  Lógicos.  Bit a bit.  Incremento/Decremento.3 OPERADORES. utilizado para dar valores a las variables que usamos en el código 95 .2 Fig. 3..tanto el cliente (Navegador) como el servidor (Apache) y además que puedan interactuar entre sí. pero antes se debe tener conocimientos básicos del lenguaje de programación del lado del servidor.  Supresión de errores. Los operadores son símbolos que se pueden utilizar para manipular valores y variables realizando una operación sobre ellos. 3.2.

negativos o positivos. <?php $entero = 5. ?> 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. // El valor cambia ahora a 5 ?> Para definir un comentario en línea se hace con la doble diagonal “//” y si se trata de un comentario de bloque entre los signos /* --------*/ OPERADORES ARITMÉTICOS Este tipo de operadores forman parte de la aritmética básica. dependiendo del signo actual. Ejemplo $a + $b Nombre Suma $a . Este operador tiene la propiedad de hacer a los números.7. También es importante no confundir el operador de asignación “=”. $variable2 = "alumnos". // El valor es ahora -5 $entero2 = -$entero__negativo. $entero_negativo = -$entero. usados frecuentemente en sentencias de control como el if else. con el operador de comparación “= =” OPERADOR UNARIO El signo menos (-) se utiliza delante de un número o variable numérica.<?php $variable = 50. en PHP basta con asignarles un valor y con eso se define el tipo de dato.10. Operadores Aritméticos OPERADORES DE COMPARACIÓN Los operadores de comparación permiten comparar dos variables o expresiones. como ocurre con otros lenguajes para ser usados. 96 .$b Resta Sa * $b Multiplicación $a / $b División $a % $b Módulo Tabla 3. Resultará familiar porque son símbolos muy utilizados en el aprendizaje de las matemáticas.

else Echo ‛$a no es mayor que $b ‛. OPERADORES LÓGICOS Los operadores lógicos permiten unir varias comparaciones entre sí. mostrándose así el primer mensaje.Ejemplo $a == $b $a === $b $a != $b $a <> $b $a < $b $a > $b $a <= $b $a >= $b Ejemplo: <?php $a=5. OPERADOR TERNARIO 97 . 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. $b=4.9. cuyo resultado dependerá de la tabla de verdad del operador lógico que se aplique. if ($a>$b)&&( ($a>$c) Echo ‛$a es mayor que $b y $c ‛. por lo tanto se mostrará el segundo mensaje.8. if ($a>$b) Echo ‛$a es mayor que $b ‛. al cambiar el valor de $a por un valor mayor que la de $b entonces el resultado será true. $c=3. Nombre Igualdad Identidad Distinto Distinto Menor que Mayor que Menor o igual Mayor o igual Tabla 3. $b=7. Operadores de comparación ?> Al comparar si ($a>$b) el resultado va a ser false. ?> La condición será verdadera solamente si las dos condiciones son verdaderas. Operadores de lógicos Ejemplo: <?php $a=5.

el bit resultado es 1. Desplaza los bits de $a. // Valor binario 01111111 $b =129. $a>$b ? $mensaje = "A mayor que B": $mensaje = "A No mayor a B". El operador ternario. cada posición desplazada equivale a dividir entre dos el valor de $a) $a >> $b Tabla 3. por lo tanto el valor de la variable $c es 1 (en binario 00000001) OPERADORES DE INCREMENTO/DECREMENTO 98 . Si los bits de una misma posición son true (tienen el valor 1). Se activan los bits que no están activos en $a. ?> El operador binario Y (símbolo &) compara bit a bit las variables $a y $b. seguida del símbolo (:) con la expresión que debe ejecutarse si es false. <?php $a=5. ?> El código anterior realizaría lo mismo que el ejemplo de operadores lógicos. es decir a nivel de lógica binaria. evalúa el segundo operando o el tercero. sólo existe un bits que es igual a true (sus dos valores son 1).10. Se activan los bits que están activos en $a o en $b pero no en ambos a la vez. // El valor de c 00000001 echo "A:$a B: $b C:$c". En este caso. evalúa un operando y. Operadores bit a bit Ejemplo: <?php $a =127. cada posición desplazada equivale a multiplicar por dos el valor de $a) Desplaza los bits de $a. o de comparación. después la expresión que tiene que ejecutarse si la evaluación anterior es true. dependiendo de si es falso o verdadero. // Valor binario 10000001 $c =$a & $b. La expresión que se quiere evaluar se escribe delante de un símbolo (?). Ejemplo $a & $b $a | $b $a ^ $b ~ $a $a << $b Nombre Y O Xor ("o exclusiva") No Desplazamiento a la izquierda Desplazamiento a la derecha Resultado Se activan los bits que están activos tanto en $a como $b. $b posiciones hacia la derecha (por aritmética binaria. OPERADORES BIT A BIT Los operadores de bit utilizan las variables a bajo nivel. Echo $mensaje. tal y como se almacenan en memoria física y comparan bit a bit los valores. $b posiciones hacia la izquierda (por aritmética binaria.Los operadores que se han visto hasta ahora son capaces de manejar un operando (Unarios) o dos operandos (binarios). $b=7. Se activan los bits que están activos en $a o que lo están en $b.

"r"). // El resultado es echo "$Res $Res2". echo "Debería ser 5: " . Ejemplo: <?php $archivo1 = fopen("prueba. echo "<h3>Postdecremento</h3>". $a = 5. "<br>\n". ++$a . "<br>\n". $a = 5.txt". Decrementa $a en uno y después devuelve $a. $a . Si se intenta abrir un archivo que no existe. $a = 5. evitará que se muestre el error. echo "Debería ser 5: " . // El resultado es $Res2=(4+3)*3. $a = 5. echo "Debería ser 6: " . echo "Debería ser 4: " . $a . echo "Debería ser 6: " ."r"). "<br>\n". echo "Debería ser 4: " . $a . en el segundo caso al existir los paréntesis primero se lleva a cabo la suma de 4+3 y luego se multiplica.txt". Devuelve $a y después decrementa $a en uno. "<br>\n". "<br>\n".PHP soporta los operadores de predecremento y post incremento al estilo de C. El operador (@). "<br>\n".12 se muestra la de precedencia de operadores- Operador () new Operación Paréntesis de preferencia Instancia de objeto Asociación N/A N/A 99 . Operadores Incremento y decremento Ejemplos: <?php echo "<h3>Preincremento</h3>". ?> PRECEDENCIA DE OPERADORES La precedencia de operadores especifica cómo se agrupan las expresiones. ?> 13 21 En la primera expresión primero se multiplica 3*3 y luego se le suma 4 de tal forma que $Res toma el valor de 13. $a--.11. //Muestra un error en el navegador $archivo2 = @fopen("prueba. Tabla 3. Ejemplo ++$a $a++ --$a $a-- Nombre Preincremento Postincremento Predecremento Postdecremento Resultado Incrementa $a en uno y después devuelve $a. PHP mostrará un mensaje de error y continuará la ejecución del programa. echo "Debería ser 4: " . "<br>\n". por ejemplo: <?php $Res=4+3*3. Devuelve $a y después incrementa $a en uno. $a++ . echo "<h3>Predecremento</h3>". echo "Debería ser 6: " . En la tabla 3. "<br>\n". $a . --$a . debido precisamente a que ahora los paréntesis tienen mayor precedencia que la multiplicación. ?> OPERADOR DE SUPRESIÓN DE ERRORES La mayoría de las funciones que se utilizan en PHP muestran errores en el navegador cuando algo falla. echo "<h3>Postincremento</h3>". //Aquí no se muestra el mensaje de error echo ("El programa sigue ejecutándose"). colocado delante de una función. debido a que la multiplicación tiene mayor precedencia que la suma.

[] ! ++ @ */% +. Una sentencia puede ser una asignación. Además. Un grupo de sentencias es también una sentencia. decremento Supresión de errores Multiplicación. un bucle. una sentencia condicional e incluso una sentencia que no haga nada (una sentencia vacía). Para controlar que secciones de código se ejecutan y cuáles no. mayor o igual Igual.4 SENTENCIAS.= *= /= = %= &= != -= <<= >>= and xor or Y lógico O exclusivo lógico O lógico Izquierda Izquierda Izquierda Tabla 3. una llamada a función. las sentencias se pueden agrupar en grupos de sentencias encapsulando un grupo de sentencias con llaves. resta. << >> <<=>>= == != & A array NO lógico Signo menos Incremento.12. concatenación Desplazamiento izquierda y derecha Menor que. división y módulo Suma. no igual Y O exclusivo O Y lógico O lógico condicional Asignación Derecha Derecha Derecha Derecha Derecha Izquierda Izquierda Izquierda N/A N/A izquierda Izquierda Izquierda Izquierda Izquierda Derecha Derecha | && || ?: = += . mayor que. Las sentencias normalmente acaban con punto y coma. Precedencia de Operadores 3. se pueden utilizar:     if else elseif switch Para manejar ciclos o bucles:  while 100 . menor o igual.

por lo tanto la expresión si no $registro retornará un valor true y el mensaje se mostrará.. para omitir los detalles se asigno a la variable $registro= 0. La sintaxis es la siguiente: if(expresion) { código php } else { código php } 101 . código php. exit().. La función exit() se usa para producir la terminación abrupta de una página.while for foreach if Esta instrucción ejecuta una línea o un bloque de código dependiendo de si se cumple o no una o varias condiciones. if (!$registros) //Si no $rgistros { echo "ERROR AL GUARDAR LOS DATOS". } ?> El ejemplo anterior se usa típicamente después de efectuar una consulta a una tabla o un conjunto de tablas de una base de datos... se puede utilizar esta instrucción para ejecutar una línea o un bloque de código.   do.. cuando se lleva a cabo con éxito toma un valor diferente de 0 y en caso contrario toma el valor de 0. else Si no se cumple una condición del if. La sintaxis básica para ejecutar una sola línea de código es la siguiente: if(expresion) codigo php Si se van ejecutar varias líneas se requieren las llaves para delimitar el código: if(expresion) { código php. } Ejemplo: <?php $registros=0.

?> Si las tres primeras condiciones no son verdaderas se ejecuta la última sentencia else 102 . asignándose a $pro la cadena ‚SI‛. else echo"OPCIÓN NO ES UNO.Ejemplo: <?php $promocion=10. elseif($opcion==3) echo"OPCIÓN UGUAL A TRES". ?> Al ser evaluado la variable $promocion por la condición if se obtiene un valor verdadero. DOS NI TRES". ejecutándose por lo tanto el código hallado después del else elseif Aunque se pueden anidar varios if y else. if ($opcion==1) echo"OPCIÓN UGUAL A UNO". Sin embargo el único valor que haría falsa la condición sería asignar a $promocion=0. echo $pro. se puede utilizar el elseif para mejorar la legibilidad del código. elseif($opcion==2) echo"OPCIÓN UGUAL A DOS". if($promocion) $pro="SI". La sintaxis básica para ejecutar una sola línea de código es la siguiente: if(expresion1) código php elseif(epxresion2) código php elseif(epxresionN) código php else código php Ejemplo: <?php //Determina el número de $opcion $opcion=2. else $pro="NO".

elseif. case N: código php. default: echo"OPCIÓN NO ES UNO.else el código se puede volver difícil de mantener y leer. } ?> while Esta sentencia ejecuta una línea o un bloque de código repetidamente hasta que se cumple una condición. break... break. El siguiente ejemplo hace exactamente lo mismo que el ejemplo anterior solo que ahora con la sentencia switch. switch puede ser una mejor opción. break... La sintaxis es la siguiente: while(expresion) { código php } 103 . case 1: código php. El valor de cada case debe ser un numero o string.. } break sirve para detener la ejecución del código una vez que se cumple la condición.. case 3: echo"OPCIÓN UGUAL A TRES".switch Cuando se tiene una lista larga de if.. break. break. DOS NI TRES".. switch($opcion) { case 1: echo"OPCIÓN UGUAL A UNO". <?php //Determina el número de $opcion $opcion=2. case 2: echo"OPCIÓN UGUAL A DOS".. default: código php. no se recomienda utilizar expresiones ya que puede marcar errores de sintaxis o bien es mejor utilizar un if. switch(expresion) { case 0: código php. break..

while. $x++.do while. la iteración se llevará a cabo mientras la condición sea verdadera $x<10. Se puede observar en este ejemplo la forma de usar la función echo de php para imprimir cada fila de una tabla del html. while($x<=10) { $r=$x*5.</td> <td><p>Mult. así como el producto de $x*5.while A diferencia del while.php solo que ahora con la sentencia <!-. por 5</p> </td> </tr> <?php $x=1. esta sentencia verifica la condición al final del ciclo en lugar de al inicio. <!-. posteriormente cada fila se muestra usando código de php. do { código php } while (expresión).php--><head> <title>Uso de do while</title> </head> <body> <table border="1" > <tr> do while 104 . //Multiplica por 5 en cada iteración echo"<tr> <td>$x</td> <td>$r</td> </tr>". Ejemplo: El mismo que while.Ejemplo: Muestra una tabla con 2 columnas. una contiene los números del 1 al 10 y la otra la multiplicación de ese número por 5. en cada ciclo se muestra el valor de $x.. marcado en negrita. que conforma la tabla de multiplicar por 5.. por lo que se actúan un total de 10 ciclos. } ?> </table> </body> </html> En primer lugar se usa HTML para definir la tabla y visualizar su primera fila. la fila de encabezado de columna. do.php--> <head> <title>Uso de while</title> </head> <body> <table border="1" > <tr> <td>No.

if ($x % 4) //Cualquier valor diferente de cero es verdadero continue. //Multiplica por 5 en cada iteración echo"<tr> <td>$x</td> <td>$r</td> </tr>". do { $x++. do { $r=$x*5. } código php } Ejemplo: Imprime los números del 0 al 40 que sean múltiplos de 4.php--><head> <title>Uso de do while y continue</title> </head> <body> <?php $x=0. } while ($x<=40) ?> </body> </html> La salida es: 4 8 12 16 20 24 28 32 36 40 105 .do while continue.<td>No. por ejemplo: while(expresion) { código php if(expresion) { continue. $x++. <!-. } while($x<=10) ?> </table> </body> </html> En un while se puede "brincar" la ejecución de cierto bloque de código con continue.</td> <td><p>Mult. por 5</p> </td> </tr> <?php $x=1. echo"$x ".

expresion3) { código php código php } se ejecuta solo al inicio del ciclo. La sintaxis de este comando es: for(expresion1. Ejemplo: Genera números aleatorios en el intervalo de 1 a 20 en un ciclo infinito. hasta que se interrumpe con la generación del número 5. expresion3 se ejecuta en cada ciclo. while(expresion) { código php if(expresion) { break. echo"$num ".php--> <head> <title>Uso de do while y break</title> </head> <body> <?php do { $num = rand(1. <!-. expresion1 106 . expresion2.20). expresion2 se evalúa en cada ciclo y si evalúa a true se ejecuta el código. los criterios que utiliza para lo anterior comúnmente son variables numéricas.También se puede detener la ejecución del ciclo en cualquier momento con ejemplo. se interrumpe cuando se genera el número 5.do while break. if ($num== 5) //Se interrumpe cuando se genera un 5 break. for Se utiliza frecuentemente para ejecutar un bloque de código un número definido de veces. } código php } break. } while ($num) ?> </body> </html> La salida es una secuencia de números aleatorios hallados en el intervalo de 1 a 20.

for. Un arreglo es una colección de valores con un único nombre.5 ARREGLOS. Ejemplo: $arreglo[l] = 15. llena una lista/menú de números del 1 al 4 <!-. además el índice para acceder a los valores distintos puede ser numérico o alfanumérico. sino que pueden tomar distintos tipos de valores: enteros. etcétera. se crea en el entorno.php--> <head> <title>Uso de for</title> </head> <body> <form name="form1" method="post" action=""> <select name="select"> <?php for ($x=1. En PHP no se necesita saber de antemano el número de valores máximo que podrá tomar el arreglo. pero puede darse el caso en que el índice no se especifique. ?> Formas de crear un arreglo:  Por asignación directa: Cuando se hace la asignación por primera vez al arreglo.$x++) echo"<option value='$x'>$x</option>".. En PHP los arreglos no tienen que definirse de una forma concreta.Ejemplo: En un formulario. para su mejor comprensión se detallará en el siguiente tema. <?php $arreglo[l] = 15. $arreglo["asociativo"] = "Arreglo asociativo". foreach Se utiliza para obtener los elementos de un arreglo. Para acceder a los distintos valores de la variable se utiliza un índice numérico o alfanumérico. $arreglo[2] = "Hola amigos". 3. objetos. entonces PHP crea un índice distinto para cada varo: 107 .$x<5. ?> </select> </form> </body> </html> En el for se pueden utilizar también el continue y break. En este caso el índice del arreglo es 1. ya que se podrá ir creando valores nuevos a medida que se vayan necesitando. caracteres.

alfanuméricos o una combinación de estos. Quedando de la siguiente manera: $num=array(10. se pueden definir índices numéricos. //Empieza con el indice 0 //Indice 1  Uso de la función array() para inicializar un arreglo Ejemplo: $num=array(10.$arreglo[] = 15. //Muestra 10 20 30 40 50 60 El código con foreach es mucho más compacto y claro.20. para ello se utiliza el operador => $personal=array("nctrl"=>272.60). //muestra:nctrl = 272 nombre = GASTON DEHESA VALENCIA Si el arreglo se tratará de un arreglo bidimensional." ".20. cada fila tendría el número de control y el nombre de un personal. Usando la función array().60). $arreglo[] = 10. La forma de mostrar el contenido del arreglo bidimensional puede ser con el uso de la sentencia for de la siguiente forma: for ($fila=0.$x<6. este finaliza al terminar los elementos hallados en el arreglo."nombre"=>"JUAN TOLEDO GARCIA"). Ejemplo: //Arreglo bidimensional $personal=array (array("nctrl"=>272.$fila<3.50.$x++) //Se inicia el ciclo con el índice 0 echo "$num[$x] ". "<br>"."nombre"=>"GASTON DEHESA VALENCIA"). ejemplo: foreach ($personal as $indice=>$valor) echo "$indice = $valor ". $personal[$fila]["nombre"].30.$fila++) echo $personal[$fila]["nctrl"] . array("nctrl"=>285. se podrían almacenar en el arreglo una tabla completa. Para recorrer el arreglo. nuevamente se puede usar la sentencia foreach. //Crea un arreglo de 6 elementos for ($x=0. además de que no se requiere especificar el número de iteraciones. //Muestra 10 20 30 40 50 60 En lugar de usar la función for para mostrar el contenido del arreglo se puede usar la sentencia foreach que es más especializado para este fin. //Crea un arreglo de 6 elementos foreach ($num as $valor) //se usa foreach echo "$valor ". solo que ahora además de acceder al valor del arreglo."nombre"=>"MARIA CARRASCO FUENTES"))."nombre"=>"GASTON DEHESA VALENCIA"). también se puede acceder al índice correspondiente.40. array("nctrl"=>301. Mostraría: 272 GASTON DEHESA VALENCIA 285 JUAN TOLEDO GARCIA 301 MARIA CARRASCO FUENTES 108 .40.50.30.

la función range() devuelve un array con valores numéricos.$numero2) { return $numero1 * $numero2. 10). 50. $valor2). que van desde un número de inicio hasta un número final con un incremento Ejemplo: <!-.. la sintaxis básica es la siguiente: <?php function nombre($argumento1. 30. $argumentoN) { //codigo php.foreach. $valor2 = 5. 50) foreach ($arreglo as $numero) echo "$numero ". Ejemplo: <?php $valor1 = 5. ?> </body> </html> Así como existe la función range(). // arreglo(0. 20... // 25 multiplica2(10.php --><html> <head> <title>Funciones que retornan arreglos</title> </head> <body> <?php $arreglo=range(0. si una función tiene que regresar un resultado se utiliza el return. } function multiplica2($numero1. multiplica3().6 FUNCIONES Y LIBRERÍAS.El primer índice del arreglo se indexa con la variable que controla el ciclo segundo índice con el nombre asignado en la definición del array. function multiplica($numero1. existen otras que crean o manipulan arreglos. .. 10. Como muchos otros lenguajes PHP soporta la creación de funciones definidas por el usuario. for y el  Uso de funciones que retornan arrays La última forma de obtener un array es utilizando alguna de las funciones que devuelven este tipo de datos.$numero2) 109 . Es muy frecuente que las funciones que manejan bases de datos devuelvan las ocurrencias dentro de un array Por ejemplo. return $valor-que-regresa.10). } ?> Si se requiere se le puede enviar parámetros a la función. 3. $valor3 = multiplica1($valor1. echo $valor3. 40..

$valor2). // 100 function multiplica(&$valor1. } ?> ARGUMENTOS CON VALORES DEFAULT 110 . // 100 } function multiplica3() { echo 100 * 100. esto es.$valor2) { $valor1 += 5. // 5 echo $valor2. // 5 function multiplica($valor1. // 5 $valor3 = multiplica($valor1. echo $valor1. $valor2 = 5. echo $valor1. // 5 $valor3 = multiplica($valor1. $valor2 = 5. // 5 echo $valor2. lo que se hace en este caso es agregar el carácter & al declarar los argumentos: <?php $valor1 = 5. } ?> ARGUMENTOS POR REFERENCIA En caso que sea necesario una función puede recibir un valor como una referencia que apunta hacia el valor original. return $valor1 * $valor2. $valor2). &$valor2) { $valor1 += 5. // 10 echo $valor3. echo $valor3. return $valor1 * $valor2. De esta manera al cambiar el valor que recibe afecta el valor original. el original no se ve afectado. // 10000 } ?> ARGUMENTOS POR VALOR Por default. // 10 echo $valor2. $valor2 += 5.{ echo $numero1 * $numero2. // 100 echo $valor1. <?php $valor1 = 5. los argumentos que utiliza una función los recibe por valor. echo $valor1. $valor2 += 5. De esta manera si la función altera el valor de la copia. // 5 echo $valor2. recibe una copia del valor original.

Sin embargo. // 10 echo "\$valor3 = $valor3<br>". entonces se crea una variable local con el mismo nombre. } ?> Si se van a asignar valores default a uno o varios argumentos primero se deben declarar los argumentos que no tienen valores default. $valor2 = 5. } // Incorrecto function multiplica($valor2 = 5.PHP permite asignar un valor defautl a un argumento al momento que se declara. $valor2 = 10. La utilidad de este valor default es que si se omite el valor al mandar llamar la función automáticamente se le asigna el valor default al argumento. return $valor1 * $valor2. y posteriormente los que si tienen. $valor1) { return $valor1 * $valor2. $valor3 = multiplica(). echo "\$valor1 = $valor1<br>". esto es. Las variables globales no se ven afectadas. <?php $valor1 = 10. si una función utiliza una variable que está declarada también fuera de la función. <?php // Correcto function multiplica($valor1. $valor3 = multiplica($valor1). // 5 echo $valor3. echo $valor1. <?php $valor1 = 5. se pueden referenciar en cualquier parte del código. // 25 function multiplica($valor1. // 10 echo "\$valor2 = $valor2<br>". // 5 echo $valor2. $valor2 = 5) { return $valor1 * $valor2. $valor2 = 5) { return $valor1 * $valor2. } ?> ALCANCE DE LAS VARIABLES EN LAS FUNCIONES Las variables que se declaran fuera de una función en una página PHP se consideran globales. $valor2 += 5. // 25 function multiplica() { /* Se crean nuevas variables $valor1 y $valor2 con alcance local. //Modificar esta linea echo "Despues de mandar llamar la funcion<br>". } ?> 111 . */ $valor1 += 5.

} function multiplica3() { $GLOBALS["valor1"] += 5. las cuales se manejan solo dentro de una función. Se podrá observar que al llamar a la función multiplica2() ó multiplica3(). VARIABLES ESTÁTICAS Otro concepto que maneja PHP es de las variables estáticas. ++$valor2. echo "\$valor2 = $valor2<br><br>".Hay dos maneras de referenciar las variables globales en las funciones: con la palabra reservada global y con el arreglo $GLOBALS[]. por lo que siempre tiene un valor de 1. en el interior de estas funciones se puede modificar a las variables globales. Las variables normales pierden su valor una vez que se termina de ejecutar la función. Para utilizar una variable estática se utiliza la palabra reservada static. return $valor1 * $valor2. } Al escriber las tres funciones en un solo archivo. se puede modificar la línea marcada en negrita del primer listado para llamar a cada una de las dos últimas funciones. $valor2 += 5. $valor1 += 5. las variables estáticas conservan su valor. en estos casos. el resultado será el mismo. return $GLOBALS["valor1"] * $GLOBALS["valor2"]. Por otra parte. 112 . function multiplica2() { global $valor1. $variable1 se incrementa en uno y pierde su valor al salir de la función. $valor2. Ejemplo: <?php function incrementa() { static $valor2 = 0. ++$valor1. echo "\$valor1 = $valor1<br>". $GLOBALS["valor2"] += 5. $valor2 se incrementa en uno y conserva su valor al salir de la función. } ?> Cada vez que se mande a llamar la función incrementa().

aclarando que existen muchos más. $nom="JUAN PEREZ".Además de las funciones creados por el usuario para su uso personal. y 0 si son iguales. Ejemplo $correo=" xx@dom. mismas que se pueden clasificar de la siguiente manera:           Manejo de cadenas Matemáticas Fecha y Hora Archivo Directorio Manipulación de MySQL Manipulación de Microsoft SQL Server Manipulación de una base de datos con ODBC Manejo de Sesiones PDF En las siguientes tablas se muestran algunas funciones de cada clasificación. Funciones de manejo de cadenas FUNCION trim(cad) strlen(cad) Strtolower(cad) Strtoupper (cad) substr(cad. n1 A partir del cual se comience la extracción n2 En caso de estar.cad2) DESCRIPCION Elimina espacios en los extremos de una cadena. if (!strcmp($nom.n2 ) strcmp (cad1. PHP cuenta con una gran cantidad de funciones predefinidas o de librerías. Devuelve el arco seno de arg en radianes Devuelve el arco tangente de las dos variables x e y. $nom=strtolower($nom). excepto que los signos de ambos argumentos son usados para determinar el cuadrante del resultado Devuelve la arco tangente de arg en radianes Devuelve el equivalente decimal del número binario representado por el argumento binario Devuelve el coseno de arg en radianes Devuelve una cadena conteniendo la representación en binario de el número dado en el argumento 113 . ". Devuelve el arco coseno de arg en radianes. la extracción se detendrá en ese caracter. Devuelve la cantidad de caracteres de la cadena convierten todos los caracteres de la cadena a minúsculas convierten todos los caracteres de la cadena a mayúsculas produce una extracción de subcadenas.n1. $long=strlen($correo). $ap=substr($nom.com $correo=trim($correo). Es similar a el cálculo de la arco tangente de y / x. Tabla 3. Funciones para el manejo de cadenas Funciones Matemáticas FUNCION abs (num) acos (arg) asin (arg) atan2 (y.13.$nom2)) echo "cadenas iguales".5). > 0 si cad1 es mayor que cad2. Comparación de cadenas con seguridad binaria Devuelve < 0 si cad1 es menor que cad2.x) atan (arg) bindec ( binario) cos (arg) decbin (num) DESCRIPCION Devuelve el valor absoluto de un número. $nom=strtoupper($nom).

Tabla 3.16.14. genera un valor aleatorio mejorado entre de un valor mínimo a un máximo Devuelve una aproximación de pi Devuelve base elevado a la potencia de exp. Funciones Matemática Funciones de Fecha y Hora FUNCION checkdate date getdate gettimeofday gmdate gmmktime gmstrftime localtime microtime mktime strftime strtotime time DESCRIPCION Valida una fecha u hora Da formato a la fecha/hora local Obtiene información de fecha y hora Obtiene la hora actual Da formato a una fecha/hora GMT/CUT Obtiene el valor timestamp UNIX de una fecha GMT Da formato a una fecha/hora GMT/CUT según las convenciones locales Obtiene la hora local Devuelve el valor timestamp UNIX actual con microsegundos Obtiene el timestamp UNIX de una fecha da formato a la hora o fecha local de acuerdo con las convenciones locales Procesar cualquier descripción textual de fecha/hora en Inglés convirtiéndola en una timestamp de UNIX Devuelve el timestamp UNIX actual Tabla 3. exp) rand (min. Devuelve el logaritmo en base-10 de arg. genera un valor aleatorio entre de un valor mínimo a un máximo Devuelve el seno de arg en radianes. max) pi (void) pow (base.Funciones de archivos 114 .15 Funciones de Fecha y Hora Funciones de manejo de archivo FUNCION fclose feof Fgets file_exists Filesize fopen Fread Fseek fwrite Readfile DESCRIPCION Cierra el apuntador a un archivo abierto Verifica si el apuntador a un archivo está al final del archivo (end-of-file) Obtiene una línea del archivo apuntado Verifica si un archivo existe Obtiene el tamaño del archivo Abre un archivo o una URL Lee archivo en plan binario Sitúa el apuntador a un archivo Escribe archivos en plan binario Muestra el contenido de un archivo Tabla 3.. max) sin (arg) sqrt (arg) srand ( semilla) tan (arg) Devuelve una cadena conteniendo la representación hexadecimal del número dado en el argumento Devuelve el número e elevado a la potencia de arg. Devuelve el logaritmo de arg. Devuelve la raíz cuadrada de arg.dechex (num) exp (arg) log10 (arg) log (arg) mt_rand (min. Inicializa la semilla del generador de números aleatorios Devuelve la tangente de arg en radianes.

Funciones de Directorio FUNCION chdir dir closedir getcwd opendir readdir rewinddir DESCRIPCION cambia de directorio Crea un objeto de la clase directorio Cierra el manejador de directorios Devuelve el directorio actual Abre el manejador de directorios Lee las entradas del manejador de directorios Rebobinar el manejador de directorios Tabla 3..17.Funciones de Directorios Funciones de manipulación de MySQL FUNCION mysql_affected_rows mysql_change_user mysql_client_encoding mysql_close mysql_connect mysql_create_db mysql_data_seek mysql_db_name mysql_db_query mysql_drop_db mysql_errno mysql_error mysql_escape_string mysql_fetch_array mysql_fetch_assoc mysql_fetch_field mysql_fetch_lengths mysql_fetch_object mysql_fetch_row mysql_field_flags mysql_field_len mysql_field_name mysql_field_seek mysql_field_table mysql_field_type mysql_free_result mysql_get_client_info mysql_get_host_info mysql_get_proto_info mysql_get_server_info mysql_info mysql_insert_id mysql_list_dbs DESCRIPCION Devuelve el número de filas afectadas de la última operación MySQL Cambia el usuario conectado en la conexión activa Devuelve el nombre del conjunto de Cierra la conexión con MySQL Abre una conexión a un servidor MySQL Crea una base MySQL Mueve el puntero interno Retorna el nombre de la base de datos Envia una sentencia MySQL al servidor Borra una base de datos MySQL Deuelve el número del mensaje de error de la última operación MySQL Devuelve el texto del mensaje de error de la última operación MySQL Escapa una cadena para su uso en mysql_query Extrae la fila de resultado como una matriz asociativa Devuelve una matriz asociativa que corresponde a la fila recuperada y mueve el apuntador de datos interno hacia adelante Extrae la información de una columna y la devuelve como un objeto Devuelve la longitud de cada salida en un resultado Extrae una fila de resultado como un objeto Devuelve una fila de resultado como matriz Devuelve los flags asociados con el campo especificado en un resultado Devuelve la longitud del campo especificado Devuelve el nombre del campo especificado en un resultado Asigna el puntero del resultado al offset del campo especificado Devuelve el nombre de la tabla donde está el campo especificado Devuelve el tipo del campo especificado en un resultado libera de la memoria el resultado de una consulta Retorna la versión del cliente MySQL Retorna el nombre del host MySQL Retorna la versión del protocolo usado para la conexión Retorna la versión del Servidor MySQL Retorna información de la última sentencia SQL efectuada Devuelve el identificador generado en la última llamada a INSERT Lista las bases de datos disponibles en el servidor MySQL 115 .

mysql_list_fields mysql_list_processes mysql_list_tables mysql_num_fields mysql_num_rows mysql_pconnect mysql_ping mysql_query mysql_real_escape_string mysql_result mysql_select_db mysql_stat mysql_tablename mysql_thread_id mysql_unbuffered_query Lista los campos del resultado de MySQL Lista los procesos MySQL Lista las tablas en una base de datos MySQL Obtiene el número de campos de la consulta Obtiene el número de filas de la consulta Abre una conexión persistente al servidor MySQL Prueba la conexión con el servidor o lo conecta si no esta establecido Ejecuta una sentencia SQL a MySQL Escapa caracteres especiales de una cadena para su uso en una sentencia SQL Devuelve datos de un resultado Pone en uso un base de datos MySQL Devuelve el status actual del servidor Devuelve el nombre de la tabla de un campo Regresa el identificador del hilo para la conexión actual Envía una consulta SQL a MySQL. Interbase.18 Funciones para Acceso a MySQL En la tabla 3. Así como existe un repertorio de funciones para MySQL. En la tabla 3.10 en detalle. También se pueden acceder a las bases de datos usando funciones de PHP para ODBC (Conectividad abierta de base de datos). mismos que se presentarán en el tema 3.19 se muestra el repertorio de funciones para manipular una base de datos con Microsoft SQL Server.18 se muestran las funciones utilizadas para acceder y manipular una base de datos con el manejador MySQL. también se encuentran para otros manejadores de bases de datos como Microsoft SQL Server. Funciones de manipulación de Microsoft SQL Server FUNCION mssql_bind mssql_close mssql_connect mssql_data_seek mssql_execute mssql_fetch_array mssql_fetch_assoc mssql_fetch_batch mssql_fetch_field mssql_fetch_object mssql_fetch_row DESCRIPCION Adds a parameter to a stored procedure or a remote stored procedure Cierra una conexión con MS SQL Server abre una conexión con MS SQL server mueve el puntero interno de las filas Ejecuta un procedimiento almacenado en la de base de datos MS SQL server Extrae la fila de resultado como una matriz asociativa Devuelve una matriz asociativa que corresponde a la fila recuperada y mueve el apuntador de datos interno hacia adelante Retorna el siguiente registro secualcialcialmente Extrae la información de una columna y la devuelve como un objeto Extrae una fila de resultado como un objeto Devuelve una fila de resultado como matriz 116 . etc. este tiene la ventaja de poder conectarse con cualquier manejador de base de datos. tan solo con contar con el manejador ODBC correspondiente. sin recuperar ni colocar en búfer las filas de resultado Tabla 3. Informix. Ingres. dBase. aunque por el hecho de agregar un intermediario en el proceso de acceso a la base de datos trae consigo un coste de rendimiento. Oracle.

también existen para Microsoft SQL Server.” la primera a MySQL y la segunda a Microsoft SQL Server. por ejemplo: la función mysql_query y mssql_query hacen exactamente lo mismo.20 se muestran las palabras de inicio de funciones de PHP para diferentes manejadores de base de datos: MANEJADOR PALABRA DE INICIO dbase dBase ifx Informix ingles Ingres II ibase Interbase mssql Microsoft SQL Server mysql MySQL odbc ODBC ora Oracle Tabla 3.20 Palabras de inicio de funciones para Acceso a diferentes bases de datos Algunos manejadores de bases de datos por el momento no tienen funciones definidas en PHP. es utilizando ODBC.19 Funciones para Acceso a Microsoft SQL server Se puede observar que muchas de las funciones utilizadas en MySQL. las coincidencias se encuentran marcadas en las tabla 3. algunas de las funciones se muestran en la tabla 3. “Envía una sentencia SQL a .19 en negrita. y la diferencia entre estos son: la primera inicia con: mysql y la segunda con mssql.21 117 . En la tabla 3.mssql_field_length mssql_field_name mssql_field_seek mssql_field_type mssql_free_result mssql_get_last_message mssql_guid_string mssql_init mssql_min_error_severity mssql_min_message_severity mssql_next_result mssql_num_fields mssql_num_rows mssql_pconnect mssql_query mssql_result mssql_rows_affected mssql_select_db Devuelve la longitud del campo especificado Devuelve el nombre del campo especificado en un resultado Asigna el puntero del resultado al offset del campo especificado Devuelve el tipo del campo especificado en un resultado libera de la memoria el resultado de una consulta Retorna mensajes del servidor (En casos de error) Convierte un numero de 16 bits a cadena Inicializa un procedimiento almacenado ó procedimiento almacenado remoto Define un nivel de error bajo Define un nivel de mensajes de error a bajo Mueve el resultado interno del apuntador al siguiente resultado Obtiene el número de campos de la consulta Obtiene el número de filas de la consulta Abre una conexión persistente con MS SQL Ejecuta una sentencia SQL a MS SQL Devuelve datos de un resultado Devuelveel numero de registros afectados por una sentencia SQL Pone en uso una base de datos de MS SQL Tabla 3. para poder manipularlos como es el caso de Acces. solo que se diferencian en su palabra de inicio..

reinicializa las variables.Funciones de manipulación de una base de datos con ODBC FUNCION odbc_close_all odbc_close odbc_commit odbc_connect odbc_cursor odbc_data_source odbc_exec odbc_execute odbc_fetch_array odbc_fetch_object odbc_fetch_row odbc_field_len odbc_field_name odbc_field_num odbc_field_type odbc_free_result odbc_longreadlen odbc_next_result odbc_num_fields odbc_num_rows odbc_pconnect odbc_prepare odbc_procedures odbc_result odbc_rollback odbc_setoption odbc_tableprivileges odbc_tables DESCRIPCION Cierra todas las conexiones ODBC Cierra una conexión ODBC Entrega una transacción ODBC Conecta a una fuente de datos Toma un nombre de cursor Retorna información de la conexión actual Ejecuta una sentencia SQL ejecuta una declaración preparada Extrae la fila de resultado como una matriz asociativa Extrae una fila de resultado como un objeto Devuelve una fila de resultado como matriz Devuelve la longitud del campo especificado Devuelve el nombre del campo especificado en un resultado Devuelve el numero de campo Devuelve el tipo del campo especificado en un resultado Recursos libres asociados con un resultado Manejo de LONGITUD de columnas Mueve el resultado interno del apuntador al siguiente resultado Obtiene el número de campos de la consulta Obtiene el número de filas de la consulta Abre una conexión persistente de base de datos Prepara una declaración para su ejecución Retorna la lista de procedimientos almacenados Devuelve datos de un resultado Volver a pasar una transacción Ajusta la configuración de ODBC.21 Funciones para Acceso a una base de datos con ODBC Funciones para manejo de Sesiones: FUNCION session_cache_expire session_cache_limiter session_decode session_destroy session_encode session_get_cookie_params session_id session_is_registered session_module_name session_name session_readonly session_register session_save_path session_set_cookie_params session_set_save_handler DESCRIPCION Devuelve la caducidad actual del caché Lee y/o cambia el limitador del caché actual Decodifica los datos de una sesión a partir de una cadena Destruye todos los datos guardados en una sesión Codifica los datos de la sesión actual en una cadena Obtiene los parámetros de la cookie de la sesión Lee y/o cambia el session id actual Comprueba si una variable está registrada en la sesión Lee y/o cambia el módulo de la sesión actual Lee y/o cambia el nombre de la sesión actual Inicia una sesión . en otro caso TRUE Lista las tablas y sus privilegios asociados con cualquier Retorna la lista de las tablas almacenadas en una fuente de datos. pero sin guardar los cambios al terminar Registra una o más variables con la session actual. Lee y/o cambia la ruta donde se guardan los datos de la sesión actual Cambia los parámetros de la cookie de la sesión Establece unas funciones para el almacenamiento de los datos de la 118 . Devuelve FALSE en caso de error. Tabla 3.

es su simplicidad a la hora de crear archivos PDF y la capacidad de interpretar código XHTML.org/ y además se puede modificar. para poder generarlos se hacen uso de librerías externas. es software libre. Como por ejemplo:  PDFlib. se puede descargar de su sitio oficial: www.org. se deben copiar todos los archivos y carpetas en el directorio del servidor Web (c:/wamp). se puede descargar en forma gratuita en http://www. creando celdas las cuales pueden contener texto.Es una librería comercial para crear archivos PDFs muy poderosa. Algunas de las funciones de esta librería se muestran en la tabla 3. siendo el Objeto fpdf el encargado de ir almacenando la estructura. teniendo diferentes salidas tanto por pantalla como por impresora o simplemente ofreciendo la posibilidad descargar el archivo. creados por Thomas Merz. Una vez descargado el archivo empaquetado. además de ser completamente gratuito. Funciones para creación de archivos PDF PHP no tiene librerías propias para generar formato de documento portable (PDF).com  FPDF. actualmente se encuentra en constante desarrollo. Se puede descargar de si sitio oficial: www. Entre sus funciones más utilizadas se encuentra Cell que es la base de todo el muestreo.. y mostrándolo con la función Output.pdflib. consta de 52 ejemplos que se pueden probar para adaptarlos a las necesidades propias de cada programador.Esta desarrollado con orientación a objetos...session_start session_unregister session_unset session_write_close sesión a nivel de usuario Inicializar los datos de una sesión Elimina una o más variable de la sesión actual Elimina todas las variables de la sesión Escribe los datos de la sesión y la finaliza Tabla 3.Es una librería basada en FPDF creado por Nicola Asuni.fpdf.23 FUNCION AddPage Cell TCPDF Image Line Ln MultiCell Output Rect SetAuthor SetAutoPageBreak SetCreator SetDrawColor SetFillColor SetFont SetFontSize SetKeywords DESCRIPCION Añade una nueva página Imprime un celda Constructor Imprime una imagen Dibuja una línea Salto de línea Imprime texto con saltos de línea Guarda o envía el documento Dibuja un rectángulo Establece el autor del documento Establece el modo de salto de pagina automático Establece el creador del documento Establece el color de graficación Establece el color de relleno Establece la fuente Establece el tamaño de la fuente Asocia las palabras claves con el documento 119 .22 Funciones de PHP para el manejo de Sesiones.  TCPDF.tcpdf. Dos de las cualidades más apreciadas de esta clase.

Dos de los métodos comúnmente usados son:  Uso de GET  Uso de POST GET y POST son métodos propios del protocolo HTTP. como es el envío de los datos contenidos en un formulario a otra página para su procesamiento.8 PROCESADO DE FORMULARIOS. Consiste en escribir la dirección URL seguido de un símbolo de interrogación (?) y el conjunto de parejas de variable = valor separadas del símbolo (&). La verdadera potencia del lenguaje reside cuando se pasa información de una página a otra.  Si el formulario transfiere mucha información. o variables que tengan un tamaño considerable. Si el usuario puede cambiar el contenido de la web a través de los parámetros de la URL. Su funcionamiento es prácticamente idéntico. eliminación. Si el formulario HTML va a transferir variables de poco tamaño. o actualización de los datos en una tabla de una base de datos. por lo que se deja su implementación en la sección de caso de estudio del apéndice A.7 EJEMPLOS PRÁCTICOS.SetLineWidth SetMargins SetSubject SetTextColor SetTitle Text Write writeHTML Establece el ancho de la línea Establece los márgenes Establece el tema del documento Establece el color del texto Establece el título del documento Imprime una cadena Imprime un texto Imprime texto en formato HTML Tabla 3. Si se desea transferir los datos de la manera más rápida posible. Existen dos formas de enviar datos por “GET”: Mediante URL y mediante formulario: USO DE GET MEDIANTE URL. se recomienda en los siguientes casos: GET:     Si no importa que los parámetros se vean en la URL.  Si las variables contienen caracteres que no son ASCII. 3. como puede ser la inserción. POST:  Si no se deseas que las variables se muestren en la URL.23 Funciones para creación de PDF con la librería TCPDF. Para poder realizar ejercicios prácticos más elaborados de los sitios Web. ejemplo: <!—get_url. se requiere de algunos conocimientos adicionales que se irán adquiriendo en los siguientes temas. 3.php --> 120 .

5 Aquí se recibirán las variables enviadas desde el archivo get.50. La forma más utilizada para recabar información acerca de los usuarios es empleando formularios HTML <!-. //Muestra ?> VER DATOS DEL PRODUCTO </body> </html> En este ejemplo el hipervínculo se liga con el archivo get2. //Muestra ?> </body> </html> DD120G DISCO DURO DE 120 GBYTES 650. echo "<a href='get2. USO DE GET MEDIANTE FORMULARIO.d. $precio. $pe=$_GET[p]. Este es un arreglo bidimensional.get2_url.get_formulario. Una vez que se muestra la página en el navegador y se pulsa sobre el hipervínculo se llama al archivo: <!-.p con sus respectivos valores mediante las variables de php $clave.php' > <table border='1' align='center'> <tr> <td colspan='2'><p align='center'>REGISTRO DE PRODUCTOS</p> </td> </tr> <tr> <td>CLAVE</td> 121 .php como índice del arreglo para obtener el valor correspondiente. $des. $de=$_GET[d].<html> <head> <title>Uso de get con url</title> </head> <body> <?php $clave="DD120G".php? c=$clave & d=$des &p=$precio'>VER DATOS DEL PRODUCTO</a>".php y se le pasan 3 variables c.php y se visualizarán usando la variable superglobal $_GET[]. echo "$cl <br> $de <br> $pe".htm --> <html> <head> <title>Formulario con GET</title> </head> <body> <form name='form1' method='get' enctype="multipart/form-data" action='get_formulario. se usa el nombre de la variable definido en get. $precio=650.php --> <html> <head> <title>Uso de get con url Continuación</title> </head> <body> <?php $cl=$_GET[c]. $des="DISCO DURO DE 120 GBYTES".

168.php --> <html> <head> <title>Formulario con get Continuación</title> </head> <body> <?php $c=$_GET[clv].<td ><input name='clv' type='text' id='clvp2' size='10' maxlength='10'></td> </tr> <tr> <td>NOMBRE</td> <td><input name='nom' type='text' id='nom' size='30' maxlength='30'></td> </tr> <tr> <td>PRECIO</td> <td><input name='preve' type='text' id='preve'></td> </tr> <tr> <td>EXISTENCIA</td> <td><input name='exist' type='text' id='existencia2' size='10' maxlength='10'></td> </tr> <tr> <td><input name='Aceptar' type='submit' id='Aceptar' value='Aceptar'></td> <td><input type='reset' name='Submit2' value='Restablecer'></td> </tr> </table> </form> </body> </html> La URL que se muestra en la barra de direcciones del navegador es el siguiente: http://192. por tal razón se dice que este método no es seguro.php?clv=MOP&nom=MOUSE+ OPTICO&preve=60&exist=5&Aceptar=Aceptar Se puede observar claramente que todas las variables y valores están visibles para el usuario. causando en algunos casos efectos perjudiciales para los sistemas de información y en particular cuando los datos se insertan o modifican una base de datos. $n=$_GET[nom]. $e=$_GET[exist]. $p=$_GET[preve]. //Muestra ?> </body> </html> MOP MOUSE OPTICO 60 5 122 .get_formulario.107/libro_programacion_web/3/get_formulario. puesto que puede ser invocado desde sitios distintos a una aplicación Web desarrollado por el programador. La página encargada de procesar los datos del formulario es: <!-.1. echo "$c<br> $n<br> $p<br> $e".

es por ello que este es el método más usado para pasar datos de un formulario a otra página.htm --> <html> <head> <title>Formulario con POST</title> </head> <body> <form name='form1' method='post' enctype="multipart/form-data" action='post_formulario. El formulario visto en el navegador se muestra así: 123 . por lo regular.htm es la definición del método. estos datos se insertan en una tabla de una base de datos o como parámetros para realizar una consulta. USO DE POST Con el uso de POST los datos provenientes de un formulario no quedan expuestas ante la vista del usuario. como muestra el siguiente ejemplo: <!-.php' > <table border='1' align='center'> <tr> <td colspan='2'><p align='center'>REGISTRO DE PRODUCTOS</p> </td> </tr> <tr> <td>CLAVE</td> <td ><input name='clv' type='text' id='clvp2' size='10' maxlength='10'></td> </tr> <tr> <td>NOMBRE</td> <td><input name='nom' type='text' id='nom' size='30' maxlength='30'></td> </tr> <tr> <td>PRECIO</td> <td><input name='preve' type='text' id='preve'></td> </tr> <tr> <td>EXISTENCIA</td> <td><input name='exist' type='text' id='existencia2' size='10' maxlength='10'></td> </tr> <tr> <td><input name='Aceptar' type='submit' id='Aceptar' value='Aceptar'></td> <td><input type='reset' name='Submit2' value='Restablecer'></td> </tr> </table> </form> </body> </html> Básicamente la diferencia entre este ejemplo y el ejemplo get_formulario. como una forma de simplificar el código.Para leer los datos provenientes del formulario. en este se define como post y en el otro como get.post_formulario. nuevamente se usa la variable súper global GET[] . En el ejemplo los datos solo se muestran usando el echo.

un usuario ve una secuencia de páginas en un sitio Web. es usando la variable super global POST[]. 2. 124 . todas las paginas por las que se desee que se ejecute deben tener la extensión . Usar la variable de sesión 4. hasta que lo abandona. echo "$c<br> $n<br> $p<br> $e".Al pulsar sobre el botón Aceptar en la barra de direcciones del navegador no se muestras las variables ni los valores. estos se ocultan internamente.php. como la sesión. $n=$_POST[nom]. $p=$_POST[preve]. sirven como índices para la variable POST[].php las sesiones se perderán al abandonar el archivo php. 3. Desde que entra al sitio. El archivo que recibe los datos provenientes del formulario es el siguiente: <!-. la variables definidas en el formulario.post_formulario. Para que las sesiones funcionen. es el valor asignado a la variable. si se ejecuta por otra página que no sea . ?> </body> </html> La forma de recibir las variables y valores provenientes de un formulario con el método post. $e=$_POST[exist]. Los pasos para el manejo de sesiones en PHP son: 1. Cerrar la sesión: session_unregister() y session_destroy(). comúnmente.php --> <html> <head> <title>Formulario con POST Continuación</title> </head> <body> <?php $c=$_POST[clv]. el valor retornado. Iniciar o continuar una sesión: Usar session_start(). Registrar la variable de sesión: session_register() 3. para ello se crea un identificador único que se asigna a cada una de estas sesiones de navegación.9 SESIONES. Una sesión es un período de tiempo durante el cual. A este identificador de sesión se le denomina.

.1. else echo "SESION CERARADA".ini 2. Ejemplo: unset($_SESSION['usuario']). Una manera de evitar incluir esta función en todas las paginas es inicializar la variable session. Es una buena idea incluir esta línea en cada script de cada página ya que si la sesión ya existe no abrirá otra nueva. se abrirá una.sesion_php. lo que hace es comprobar si existe alguna sesión abierta.session_start() Esta función. $_SESSION['usuario'] = $us.php">Cerrar Cesión </a></p> <?php if (isset($_SESSION['usuario'])) echo "SESIÓN ABIERTA". else echo "SESIÓN CERARADA". Usar la variable de sesión 125 . sino que se limitará a abrir toda la información asociada a dicha sesión.auto_start = 1 en el archivo de configuración php. session_destroy().session_register() Esta función sirve para registrar una variable de sesión: Ejemplo: $us=dehesa.-Para determinar si una variable de sesión ya se encuentra registrada se puede hacer de la siguiente forma: if (isset($_SESSION['usuario'])) echo "SESION ABIERTA". consta de tres archivos .Para cerrar una sesión implica dos etapas: des registrar la variable de sesión y destruir los datos asociados.php --> <html> <head> <title>Manejo de seiones</title> </head> <body> <p><a href="sesion_php_abrir. 4. //3. muestra el manejo de sesiones. El primero muestra los vínculos a cada uno de los otros dos archivos y el mensaje del estado de la sesión según el caso: <!-. y si no hay ninguna. 3.php">Iniciar Sesión</a></p> <p><a href="sesion_php_cerrar. //Eliminar la variable de sesión registrada //Destruye los datos asociados a la sesión El siguiente ejemplo.php...

$_SESSION['usuario'] = $us. es la que se registra. si es así. este caso se presentará más adelante.Registrar la variable de sesión: echo "SESION AHORA ESTA ABIERTA".Eliminar la variable de sesión registrada session_destroy(). } ?> </body> </html> El tercer y último archivo verifica si la sesión esta iniciada. <!-. en otro caso no hace nada. } ?> </body> </html> Se puede observar que la variable de sesión. si es así entonces la inicia.php --> <html> <head> <title>Manejo de seiones</title> </head> <body> <?php if (isset($_SESSION['usuario'])) //Comprueba si la variable existe { unset($_SESSION['usuario']).. <!-.sesion_php_abrir. //2. debido a que se usa la variable super global $_SESSION[]. 126 . el valor asignado a la variable puede provenir de un campo de una tabla de una base de datos. //Destruye los datos asociados a la sesión echo "SESION AHORA CERRADA". La variable $us=dehesa.?> </body> </html> El segundo archivo comprueba si la sesión no está iniciada.php --> <html> <head> <title>Manejo de seiones</title> </head> <body> <?php if (!isset($_SESSION['usuario'])) //Comprueba si no existe la variable { $us=dehesa.php sin embargo este se detecta en los tres archivos. se registra únicamente en el archivo sesion_php_abrir..sesion_php_cerrar. entonces la cierra en otro caso no hace nada. en una aplicación real. que identifique al nombre del usuario que inicie la sesión. //4.

Para conectarse a un servidor de base de datos desde el servidor Web. en primer lugar ambos deben estar instalados y en ejecución.3. por lo que se puede invocar como muestra la figura 3.4 Fig.3. Cuando el servidor de MySQL está recién instalado. no tiene contraseña. accediendo a su ficha propiedades.Propiedades de Interfaz de comando para iniciar con MySQL Tras definir la ruta de inicio del cliente MySQL. con solo pulsar doble click sobre el acceso directo la interfaz de comando inicia donde se encuentra el archivo ejecutable. 3. Al instalar WAMP Server ambos servicios quedan listos para operar. Se puede utilizar el cliente MySQL para verificar que este en correcta operación. para ello se puede crear un acceso directo en el escritorio de la interfaz de comandos del DOS y definir que inicie en la ruta donde se encuentra el archivo ejecutable del cliente MySQL.. 3.. como muestra la siguiente figura: Fig.4.Acceso al cliente MySQL 127 . la cuenta de usuario que lo administra conocido como superusario root.10 CONECTIVIDAD ENTRE EL SERVIDOR WEB Y EL SERVIDOR DE BASE DE DATOS.

dir varchar(30). create table clientes ( id_clie varchar(13). en lugar de crear la base de datos de la aplicación en desarrollo desde la interfaz de comando. tel varchar(15). existencia smallint. precio float. Para poder realizar operaciones con bases de datos se requiere por lo tanto que el lector previamente haya estudiado el SQL. crear bases de datos. poner en uso una base de datos. Descripcion varchar(49). en este libro se anexa información al respecto en la carpeta: /Curso de SQL Tras conocer el lenguaje SQL. nom varchar(40).5 DROP DATABASE IF EXISTS ventas. use ventas. Existen gran cantidad de bibliografías al respecto. create table producto ( id_pro varchar(10) not null. clave varchar(40). preciov float. primary key (id_pro). id_cat varchar(10). tablas. primary key(id_cat) ). eliminar y actualizar registros. Ejemplo: El siguiente archivo (ventas. significa que el servidor de base de datos está respondiendo correctamente y se está ya en posibilidad de acceder al servidor de base de datos desde el código de PHP Desde el Shell de MySQL se puede utilizar el conjunto de sentencias del Lenguaje Estructurado de Consulta (SQL) para: Mostrar base de datos. se recomienda escribirla en un archivo de tipo texto. tablas. 128 . nombre varchar(40). de no ser así es el momento de hacerlo. foreign key (id_cat) references categoria(id_cat) ). y obtener el shell de MySQL (mysql>). create table categoria (id_cat varchar(10).Tras escribir en la interfaz de comandos: mysql –uroot. promocion tinyint. así como la inicialización de cada una de las tablas que la conforman para poder realizar las pruebas pertinentes durante el desarrollo web. Este debe contener la descripción de la base de datos.sql) está escrito en lenguaje SQL y corresponde a la base de datos del modelo entidad relación mostrada en la figura 2. CREATE DATABASE ventas. jpg varchar(30). insertar. etc.

'5'.'Mouse Acteck AM-950 Óptico. insert producto values('DD80G'.'40'. primary key (id_ad) ).'DID'. pu float.'PIPIV'. foreign key (id_clie) references clientes(id_clie).jpg'.sha1('iti').'16'. id_pro varchar(10).'705'. insert factura values('2'. clave varchar(40).primary key (id_clie) ).'510'. foreign key (id_fac) references factura(id_fac) ). cantc smallint. insert factura values('1'.'04/05/08').'15'. values('DID'. insert clientes values('JTL'.'2'.'55'). insert ventas values('GDV'.'1').'ROCESADOR INTEL PENTIUM IV 3 GHZ'.'MARIA LOPEZ FUENTES'.'PROCESADORES'). create table ventas ( id_clie varchar(13).'55'.'AV.sha1('iti'). insert insert insert insert categoria categoria categoria categoria values('PRO'. nom varchar(40). OAX. Color Plateado '.id_pro.'MOOP'.'MOU'.'DID'.'DISCOS DUROS').'dd250g.'moop.'dd80g. foreign key (id_pro) references producto(id_pro).'759').jpg'.'DISCO DURO MAXTOR DE 250 GBYTES IDE A 7200RPM'.'1'.'04/05/08'). insert producto values('MOOP'. ESPINAL.'1').'MOUSES').'1').'1'.'687'.'2'.'810').'iti'. insert producto values('DD40G'. dir varchar(30).'9717131056'). 129 . fecha DATE NULL. values('MOU'. create table factura ( id_fac int not null. insert ventas values('GDV'.'DISCO DURO SEAGATE DE 80 GBYTES IDE A 7200RPM'. primary key(id_fac) ).'810'.'573'. insert clientes values('GDV'. insert clientes values('MLF'.'GASTON DEHESA VALENCIA'. insert producto values('PIPIV'.'.'13'.'9717114526'). 5 DE MAYO JUCHITAN'. tel varchar(15).'GPE. insert ventas values('JTL'.jpg'. primary key (id_clie. values('POR'. create table administradores ( id_ad varchar(13).'1').'pipiv.'PORTATILES'). id_fac int. USB.'DD40G'.'9717113210').id_fac).'PRO'.'20'.'C.'759'. JUAREZ.'1'. VICTORIA'.jpg'.'JORGE TOLEDO MATUS'.

$bd="ventas". pues está en integridad referencias con clientes. exit(). significa que ahora la base de datos ya está construida y puede ser accedida desde el código PHP. según el orden como fueron creados y cuidando de no violar la integridad referencial para no producir errores. if (!$conexion) { echo "ERROR DE CONEXION CON EL SERVIDOR MYSQL".'JOSE TOLEDO TOLEDO GARCIA'.sql Si no aparece ningún error.* TO alumnos@localhost IDENTIFIED BY 'iti'.insert administradores VICTORIA'. en este caso alumnos. Ejemplo: //Parámetros de conexión $servidor="localhost". Tras escribir la base de datos en lenguaje SQL en un archivo de texto (ventas. continua con la definición con cada una de las tablas. CONEXIÓN DE PHP AL SERVIDOR MySQL Se realiza básicamente usando dos funciones de PHP.sql). $usuario="alumnos". //Función de conexión al servidor mysql $conexion = mysql_connect($servidor.sha1('iti'). insert administradores VICTORIA'. finalmente con el comando GRANT. values('AD1'. si existe. 130 .'GPE. se puede establecer precisamente con una cuenta de usuario. FUENTES'. } $cbd=mysql_select_db($bd. esto con la finalidad de evitar el error producido por el servidor de base de datos al intentar crear una base de datos que ya existe. $usuario. Una breve descripción del archivo es el siguiente: primeramente se borra la base de datos ventas. Después de la definición de cada una de las tablas. definiendo en cada una de ellas los campos llaves y para el caso de la tabla de producto la integridad referencial con categoría. que puede ser la cuenta de root que tiene todos los privilegios sobre todas las bases de datos que pudieran existir en el servidor o con una cuenta con derechos restringidos como es el caso de la cuenta recién creada con GRANT. $contasena). se debe poner especial atención a la tabla de ventas.'PEDRO values('AD2'. posteriormente se crea la base de datos y se pone en uso. GRANT ALL PRIVILEGES ON ventas.'9717114526').'9717114526'). se puede procesar con el cliente MySQL desde la interfaz de comandos de la siguiente forma: Mysql –uroot <ventas. se insertan algunos registros en cada una de ellas para inicializarlas. La conectividad con el servidor de base de datos MySQL. $contasena="iti".sha1('iti'). $conexion).'GPE. producto y factura. se crea una cuenta de usuario (alumnos) con contraseña iti.

} $cbd=mysql_select_db($bd.php --> <html> <head> <title>Conexión a una base de datos</title> </head> <body> <?php function conectar() { //Parámetros de conexión $servidor="localhost".este recibe como parámetros el nombre de la base de datos. } return($conexion). de lo contrario regresa un NULL. $usuario. //Función de conexión al servidor mysql $conexion = mysql_connect($servidor. Ahora función encargada de poner en uso la base de datos es mysql_select_db(). exit(). este recibe tres parámetros para lograrlo: El nombre del servidor. $contasena="iti". La función mysql_connect() retorna un identificador de la conexión si logra conectarse con el servidor. if (!$cbd) { echo "ERROR DE CONEXION CON LA BASE DE DATOS". el nombre del usuario y la contraseña.if (!$cbd) { echo "ERROR DE CONEXION CON LA BASE DE DATOS". también retorna un NULL en el caso de no poderse conectarse con la base de datos. el usuario o contraseña son incorrectos. $contasena). exit(). esto puede ocurrir en diferentes casos como: el servidor de base de datos no está activo. $conexion). exit(). es un código que se usa frecuentemente en diferentes paginas que conforman el sitio. El código para la conexión con una base de datos en una aplicación Web. $usuario="alumnos". alumnos y su respectiva contraseña iti. por ello se recomienda tenerla como función en un archivo. así como el identificador de la conexión. $bd="ventas". } Básicamente la función que hace la conexión con el servidor de base de datos es la función mysql_connect().conexion. Ejemplo: <!-. } la 131 . if (!$conexion) { echo "ERROR DE CONEXION CON EL SERVIDOR MYSQL". para este caso son localhost y el usuario creado con GRANT.

sql INSERSION En el siguiente ejemplo se realiza la inserción de registros en la tabla clientes. usando la función conectar() del archivo conexion. se usan dos archivos. contraseña. contraseña iti y a la base de datos ventas. Estos datos son enviados al segundo archivo usando el método POST. este se encargará de conectarse con el servidor de base de datos de nombre localhost.php"> <table border="1" align="center"> <tr> <td colspan='2'><p align='center'>REGISTRO DE CLIENTES</p> </td> </tr> 132 . con usuario alumnos. $conexion=conectar(). en caso de tener éxito retornará el identificador de conexión en otro caso no retorna nada. para ello se debe consultar con la tabla correspondiente según el manejador de base de datos.php. las operaciones más frecuentes que se realizan en cada una de las tablas que conforman la base de datos se pueden resumir en:  Inserción  Consulta  Eliminación  Actualización Para demostrar cada una de ellas se usará la tabla de clientes del archivo ventas. conectar() lo puede hacer incluyendo el siguiente Para el caso de establecer la conexión con otros servidores de bases de datos.?> </body> </html> La función que se ha creado en este archivo se llama conectar(). He aquí el primer archivo: <!-. inserta el registro en la tabla de clientes y finalmente muestra los datos introducidos en una tabla HTML. se conecta a la base de datos. se utilizan funciones similares de PHP. OPERACIONES EN TABLAS DE UNA BASE DE DATOS Una vez que se logra la conexión con el servidor de base de datos y con una base de datos en particular. el primero contiene un formulario donde el usuario introduce los datos de cada cliente como son: Clave.clientes_alta. nombre. La pagina que use la función código al inicio: include ("conexion.php").htm --> <html> <head> <title>Alta de Clientes</title> </head> <body> <form name="form1" method="post" action="clientes_alta. dirección y teléfono.

<tr> <td>CLAVE</td> <td width="49%"><input name="clv" type="text" id="clv" size="10" maxlength="10"></td> </tr> <tr> <td>NOMBRE</td> <td><input name="nom" type="text" id="nom" size="30" maxlength="30"></td> </tr> <tr> <td>CONTRASE&Ntilde.clientes_alta.A</td> <td><input name="contrasena" type="password" id="contrasena" size="30" maxlength="30"></td> </tr> <tr> <td>DIRECCION</td> <td><input name="direccion" type="text" id="precioc2"></td> </tr> <tr> <td>TELEFONO</td> <td><input name="tel" type="text" id="tel"></td> </tr> <tr> <td colspan='2'><p align='center'><input id='Aceptar' value='Aceptar'> </p></td> </tr> </table> </form> </body> </html> name='Aceptar' ' type='submit' Una vez capturados los datos. el navegador lo muestra así: El archivo encargado de procesar los datos una vez que se pulsa el botón Aceptar es el siguiente: <!-.php --> <html> <head> <title>Alta de clientes</title> </head> <body> <?php //Datos recibidos del formulario $clv= strtoupper($_POST[clv]). //Convierte a mayúscula 133 .

php"). echo "<table align='center' border='1'> <tr> <td>Clave</td> <td>$clv</td> </tr> <tr> <td>Nombre</td> <td>$no</td> </tr> <tr> <td>Dirección </td> <td>$dir</td> </tr> <tr> <td>Telefono </td> <td>$tel</td> </tr> </table>". } ó Nombre están vacíos //Conecta al servidor Mysql y a la base de datos ventas include ("conexion. $conexion).$no= strtoupper($_POST[nom]). exit(). ?> </body> </html> El navegador tras insertar el registro en la tabla clientes muestra: 134 . //Finaliza la ejecución de la página } //Se muestran los datos insertados en una tabla HTML echo "<h3 align='center'>DATOS GUARDADOS</H3>".'$tel')". $cont= $_POST[contrasena].'$cont'. $registros = mysql_query($sql. $tel=$_POST[tel]. $dir=strtoupper($_POST[direccion]). if (empty($clv)||empty($no)) //Si los campos Clave { echo "DATOS INSUFICIENTES <BR>". $conexion=conectar(). //Sentencia de insersión SQL $sql="insert clientes values('$clv'.'$no'.'$dir'. //Ejecuta la sentencia SQL if (!$registros) //Si la sentencia no tiene éxito { echo "ERROR AL GUARDAR LOS DATOS". exit().

se extraen como objetos con la función mysql_fetch_object(). $registros = mysql_query($sql.CONSULTA Para realizar una consulta en la tabla de clientes.php --> <html> <head> <title>Consulta de Clientes</title> </head> <body> <?php //Conecta al servidor Mysql y a la base de datos ventas include ("conexion. al igual que el proceso de inserción primeramente se conecta al servidor de base de datos MySQL así como a la base de datos ventas. //Contador de registros while ($reg = mysql_fetch_object($registros)) { echo"<tr> <td>$x</td> <td>$reg->id_clie</td> <td>$reg->nom </td> <td>$reg->dir</td> <td>$reg->tel</td> </tr>". por cada iteración que se efectúa con la sentencia while. su contenido se vería así: 135 .sql ya tenía 3 registros en la tabla de clientes. $x++. tras agregar uno más.php"). //Ejecuta la sentencia SQL //Muestra los datos de la consulta en una tabla HTML echo "<table border='1' align='center'> <tr> <td>No</td> <td>CLAVE</td> <td>NOMBRE</td> <td>DIRECCION</td> <td>TELEFONO</td> </tr>". $conexion=conectar(). Como el archivo ventas. se efectúa posteriormente la consulta con la sentencia SQL correspondiente. } echo"</table>". basta con un archivo .clientes_consulta. gracias a eso se puede acceder a cada uno de los campos del registro como una propiedad del objeto $reg. ?> </body> </html> Los registros retornados por la consulta SQL. //Sentencia de consulta SQL $sql="select * from clientes".php. para mostrarse en la columna adecuada en la tabla HTML. el resultado de la consulta se muestra se muestra en una tabla HTML <!-. $conexion). $x=1.

Clientes_eliminar. y efectúa el proceso de eliminación en la tabla.php"> <table border="1" align="center"> <tr> <td align="center" colspan="2">ELIMINAR REGISTRO </td> </tr> <tr> <td>CLAVE</td> <td><input name="clv" type="text" id="clv"></td> </tr> <tr> <td colspan="2" align="center"><input type="submit" name="Submit" value="Enviar"></td> </tr> </table> </form> </body> </html> El formulario visto en el navegador es: La página que recibe la clave introducida por el usuario y encargada de eliminar el registro es el siguiente: <!-.php --> <html> <head> <title>Elimina un cliente</title> </head> <body> <?php 136 .clientes_eliminar. recibe este parámetro con el método POST. la primera pagina consiste en un formulario donde el usuario escribe la clave de cliente que se desea eliminar y la segunda. también se utilizan dos páginas.htm --> <html> <head> <title>Eliminación de Clientes</title> </head> <body> <form name="form1" method="post" action="clientes_eliminar. El primer archivo es el siguiente: <!-. es similar al proceso de inserción.ELIMINACIÓN Para la eliminación de un registro en la tabla de clientes.

quien realmente realiza la actualización en la tabla de clientes. } else echo "<H2 align='center'>!REGISTRO BORRADO!</H2>". $conexion=conectar(). exit(). muestra cada campo en una tabla HTML y permite que el usuario pueda modificarlos. La primera contiene un formulario donde el usuario escribe la clave del cliente que desee actualizar sus datos. por eso se encuentra al final de los otros tres casos. por último.php"> <table border="1" align="center"> <tr> <td align="center" colspan="2">ACTUALIZAR REGISTRO </td> </tr> <tr> <td>CLAVE</td> <td><input name="clv" type="text" id="clv"></td> </tr> <tr> <td colspan="2" align="center"><input type="submit" value="Enviar"></td> </tr> </table> name="Submit" 137 . consiste en tres páginas. ?> </body> </html> Una vez que se ejecuta la página y el registro se elimina con éxito se muestra en el navegador el siguiente mensaje: ACTUALIZACIÓN Para ejemplificar este caso. //Sentencia de consulta SQL $sql="delete from clientes where id_clie='$clv'".clientes_actualizar. //Conecta al servidor Mysql y a la base de datos ventas include ("conexion.htm --> <html> <head> <title>Actualizar Cliente</title> </head> <body> <form name="form1" method="post" action="clientes_actualizar.php"). $registros = mysql_query($sql. excepto la llave que tiene el atributo de solo lectura. según las modificación efectuadas por el usuario se envían a la tercera página. se plantea un ejemplo aún más largo que los anteriores. la segunda página. //Ejecuta la sentencia SQL if ($registros==0) { echo "<H2 align='center'>ERROR AL BORRAR EL REGISTRO</H2>". $conexion).$clv=$_POST[clv]. Este es la primera página: <!-. recibe la clave y realiza una consulta en la tabla de clientes para obtener todos los demás campos del registro.

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

php"). ?> </body> </html> 139 . exit(). $tel= $_POST[tel]. } //Conecta al servidor Mysql y a la base de datos ventas include ("conexion. <!-. //Ejecuta la sentencia SQL if (!$registros) { echo "ERROR AL MODIFICAR LOS DATOS". $conexion). //Sentencia de actualización SQL $sql="update clientes set clave='$cont'. if(empty($clv)||empty($no)) //valida que la clave y el nombre no esten vacíos { echo "DATOS INSUFICIENTES <BR>".clientes_actualizar2. } echo "<h3 align='center'>DATOS ACTUALIZADOS</H3>". $conexion=conectar(). $registros = mysql_query($sql. $dir= strtoupper($_POST[dire]). exit().</table> </form>".nom='$no'.dir='$dir'. tel='$tel' where id_clie='$clv'". $cont= $_POST[cont]. $no= strtoupper($_POST[nom]).php --> <html> <head> <title>Actualizar Cliente</title> </head> <body> <?php //Parámetros recibidos del formulario $clv= strtoupper($_POST[clv]). ?> </body> </html> Con la clave del cliente recibido muestra cada uno de sus demás campos: Al pulsar el botón Aceptar se llama la tercera página quien realiza las modificaciones en la tabla.

eliminación y actualización se usaron las siguientes sentencias SQL para la tabla de clientes: Operación Inserción Consulta Eliminación Actualización Sentencia insert clientes values('$clv'.  Escribir en el archivo.'$no'. Sintaxis 'r' 'r+' 'w' 'w+' 'a' 'a+' Descripción Sólo lectura Lectura y escritura Sólo escritura Lectura y escritura. consulta. formularios y tablas HTML que se vayan a utilizar para que sean apropiadas a cada caso.En conclusión para realizar las cuatro operaciones más frecuentes en una tabla de una base de datos. El archivo es creado si no existe y el puntero se coloca al final. También es importante adecuar los mensajes.11 MANEJO DE ARCHIVOS. El manejo de archivos resulta ser una práctica muy común en cualquier sitio web.24.25 Modos de apertura de archivos 140 . Suprime el contenido anterior si se escribe.dir='$dir'.17. para:  Abrir el archivo para su lectura / escritura. Existen.'$tel' select * from clientes delete from clientes where id_clie='$clv' update clientes set clave='$cont'.24. Tabla 3.'$dir'.Sentencias SQL aplicados a la tabla de clientes. 3. buscar una cadena en su interior o cualquier otro tipo de operación. La variable puede utilizarse después para hacer cualquier tipo de operación. así como cada uno de los campos que lo componen en las sentencias de la tabla 3.. un conjunto muy numeroso de funciones como los mostrados en las tablas 3. Lectura y escritura. El archivo es creado si no existe. Si el archivo que se intenta abrir no existe o no puede utilizarse en ese momento. Los archivos pueden abrirse en varios modos tal y como indica la siguiente tabla.nom='$no'. Para aplicar las mismas operaciones sobre otra tabla. en PHP. El archivo es creado si no existe y el puntero se coloca al final. basta con sustituir el nombre de la tabla.16 y 3.  Cerrar el archivo Abrir el archivo para su lectura / escritura. where id_clie='$clv' tel='$tel' Tabla 3. Muy a menudo se requiere de procesar un texto para cambiarle el formato. La función fopen() asigna a una variable un puntero (un descriptor) al archivo que que se abra.  Leer el archivo. Sólo escritura.'$cont'. fopen() devuelve un valor false. como son: Inserción. que permiten manejar archivos de diferentes formas.

apuntado por un descriptor.php".php --> <?php 141 . Las funciones para escribir archivos son tan sencillas de utilizar como las de lectura. //se llama a la funcion echo $texto.. } //Aqui inicia la ejecución $archivo="lee_archivo. Este número lo almacena en un archivo de texto (contador.si se trata con archivos binarios se debe colocar una b delante del modo (Ejemplo. el proceso de apertura en modo de escritura crea el archivo y gurda el valor del contador."<u>$cadena</u>".ecribe_archivo.$cadena) { $texto = "". bw+.$linea). en actualizaciones posteriores de la pagina. //Puede probar con otro archivo $cadena = "archivo". //Se inicializa la variable $fp = fopen($archivo. } return $texto."<br>". //se abre el archivo en modo lectura //Se lee línea por línea el contenido del archivo while ($linea= fgets($fp. Esto puede resultar útil si se lleva a cabo búsquedas internas en el sitio y se desea resaltar la cadena de búsqueda en el texto de la página encontrada. //Se muestra el texto del archivo ?> En el ejemplo se lee secuencial en un archivo de texto para localizar dentro del texto una cadena.lee_archivo."r"). La función principal fwrite() escribe en un archivo.= $linea. Cuando se muestra la pagina por primera vez. se le cambia el formato para ponerla en subrayado por medio de la etiqueta <u>. El siguiente ejemplo muestra el número de veces que se visita la página. a la que a continuación. //Se añade a la línea de texto agregando cambio de línea $texto .php --> <?php function marcar($archivo. la apertura del archivo en modo de lectura se enecarga de leer el valor del contador y el proceso de apertura en modo de escritura de actualizarlo usando la función fwrite() incrementando el contador. el archivo no existe por lo que el proceso de apertura en modo de lectura falla retornando un nulo. //puede probar con otra cadena $texto = marcar ($archivo.) Leer el archivo. Es imprescindible que el archivo esté abierto en uno de los modos de escritura para que no dé error.. una cadena de caracteres. La función fgets() se encarga de leer línea a línea el contenido de un archivo texto por lo que su utilización debe ser incluida dentro de una sentencia de ciclo: Ejemplo: <!-.txt).1024)) { //Se sustituyen las ocurrencias de la cadena de busqueda $linea = str_replace($cadena. Escribir en el archivo.. ba.$cadena). <!-.

26).function contador($archivo) { $contador = 0. se debe tener establecidas los siguientes parámetros de configuración en el archivo php. fclose($fp). //se lee el contador fclose($fp). Esa matriz contiene los siguientes elementos:     $_FILES['nombre_archivo_cliente']['name']: nombre que tenía el archivo cargado en el ordenador del cliente $_FILES['nombre_archivo_cliente']['type']: tipo MIME del archivo cargado $_FILES['nombre_archivo_cliente']['size']: tamaño del archivo cargado $_FILES['nombre_archivo_cliente']['tmp_name']: nombre del archivo cargado en el directorio temporal del servidor 142 . $contador. //Se llama a la función ?> Carga de archivos al servidor Auque este tema ya no usa las funciones de las tablas 3. fwrite($fp. lo almacena en el directorio upload_tmp_dir y rellena la matriz asociativa superglobal $_FILES["nombre_archivo_cliente"] (el nombre que se haya dado al control en el formulario). //Se inicializa el número de actualizaciones $fp = fopen($archivo. Para poder cargar archivos desde el cliente al servisor. pemite que haya o no cargas de archivos  uploads_max_filesize: tamaño máximo del archivo que se puede subir  upload_tmp_dir: directorio temporal donde se guardan los archivos cargados  post_max_size: tamaño máximo de los datos enviados por el método post Un formulario puede enviar un archivo al servidor mediante un control de tipo file."w+").17.txt"). 26). //Se cierra el archivo } ++$contador.carga_archivo. //Se abre el archivo para lectura if ($fp) //Si se pudo leer el archivo { $contador = fgets($fp.php --> <form action="carga_archivo2."r").16 y 3. es una de las operaciones muy frecuentes en sitios Web. El formulario sería: <!-. echo "Este script ha sido ejecutado $contador veces".php" method="post" enctype="multipart/form-data"> Archivo: <input name="nombre_archivo" type="file" id="nombre_archivo" /> <br /> <input type="submit" name="enviar" value="Enviar" /> </form> Es importante que el atributo method tenga el valor "post" y que el atributo enctype tenga el valor ="multipart/form-data" Cuando PHP recibe el archivo.ini  file_uploads: (On / Off). //Se incrementa el contador //Se actualiza el archivo con el nuevo valor $fp = fopen($archivo. } contador("contador.

los aspectos que ayudan a mejorar el nivel de seguridad en un sitio Web. $destino="carga/". $destino)){ echo "El archivo ha sido cargado correctamente.carga_archivo2. que pueden servir como nombre y contraseña respectivamente.". Para el caso de la base de datos de estudio (ventas) en la tabla de clientes se encuentran los campos id_clie y clave. "gif") || strpos($tipo_archivo. son:     Autenticación Encriptación Sesiones Usuarios del sitio Web AUTENTICACIÓN La autenticación es un mecanismo para verificar que el usuario que entra al sitio Web es quien dice ser. } } ?> 3.6.jpg<br>Se permiten archivos de 100 Kb máximo. Para ello se utiliza la función move_uploaded_file($origen. $_FILES['nombre_archivo_cliente']['error']: código de error (en su caso) Como el archivo del directorio temporal desaparece al finalizar el script. Ejemplo: 143 . en este tema. }else{ if (move_uploaded_file($_FILES['nombre_archivo']['tmp_name']. en la que $origen es el nombre del archivo cargado en el directorio temporal (Se puede utilizar directamente $_FILES['nombre_archivo_cliente']['tmp_name']) y $destino el nombre del archivo que contendrá la copia. para ellos se le puede solicitar antes de poder realizar alguna operación con el sitio un nombre de usuario y contraseña. El código de PHP que recibe el archivo es es siguiente: <!-. Los aspectos de la seguridad desde el punto de vista teórico fueron tratados en el tema 2.gif o . para autenticar a los clientes que entran al sitio. }else{ echo "Error en la carga del archivo. es necesario copiar el archivo a otro lugar. $tipo_archivo = $_FILES['nombre_archivo']['type']. <br>Se permiten archivos .".php --> <?php //Datos del archivo $nombre_archivo = $_FILES['nombre_archivo']['name']. $destino).12 SEGURIDAD. //Directorio destino del archivo en el servidor //Se comprueba si las características del archivo son las adecuadas if (!((strpos($tipo_archivo.". "jpeg")) && ($tamano_archivo < 100000))) { echo "La extensión o el tamaño del archivo no es correcta. $tamano_archivo = $_FILES['nombre_archivo']['size'].$nombre_archivo. se aborda desde el punto de la programación.

?> </body> </html> La página que recibe el nombre de usuario. muestra un mensaje de bienvenida con el nombre completo del usuario. //Busca el cliente en la tabla de clientes $sql="select * from clientes where id_clie='$us' and clave='$clave'". $clave= $_POST[clave].php --> <html> <head> <title>Autenticación</title> </head> <body> <?php $us= $_POST[usuario].autenticacion.php --> <html> <head> <title>Autenticación</title> </head> <body > <?php echo"<table align='center' width='40%' border='1'> <tr> <td><div align='center'>Datos de tu cuenta</div></td> </tr> <tr> <td><form name='form1' method='post' action='Autenticacion2. donde el usuario introduce su nombre de usuario y contraseña. $reg = mysql_query($sql.A</td> <td><input name='clave' type='password' id='clave' value='iti'></td> </tr> <tr> <td colspan='2'><p align='center'><input type='submit' name='Submit' value='Aceptar'></p></td> </tr> </table> </form></td> </tr> </table>". $conexion=conectar(). en otro caso. include "conexion.Este ejemplo consta de dos páginas.php'> <table width='90%' border='0' align='center'> <tr> <td>USUARIO</td> <td><input name='usuario' type='text' id='usuario' value='MLF'></td> </tr> <tr> <td>CONTRASE&Ntilde. estos están inicializados con ‚MLF‛ e ‚iti‛ respectivamente ya que en la tabla de clientes existe un registro con estos datos.php". muestra un mensaje indicando que el usuario no está registrado. contraseña y que realiza la autenticación: <!-.autenticacion2. $conexion). Este es la primera página: <!-. si es así. recibe con el método POST el nombre de usuario y contraseña y busca en la tabla de clientes si este usuario existe. 144 . la primera consiste en una tabla HTML que contiene un formulario. La segunda página.

ESPINAL. //Número de registros de la consulta if ($n==1) //Se encontró al cliente echo"<h2 align='center'>BIENVENIDO $r->nom</h2>". entre los que se pueden mencionar el MD5() y el sha1(). y compararla con la encriptada que puede estar almacenado en un campo de una tabla de una base de datos.$r= mysql_fetch_object($reg). estos son:    insert clientes values('GDV'. tienen la función sha1() aplicado al campo clave ó contraseña. La función sha1().'9717131056'). ?> </body> </html> En algunas aplicaciones Web.sql. se manejan diferentes tipos de usuarios. es mediante la aplicación nuevamente de la función. $n=mysql_num_rows($reg). cuenta con diferentes funciones de encriptación. es por ello que el mecanismo utilizado para probar la autenticidad de la cadena original.'iti'. por lo que se requiere que el proceso de autenticación busque al usuario en varias tablas en lugar de solo buscar en una sola como en el caso anterior. sha1() producen una salida resumen de 160 bits (40 caracteres hexadecimales) de un mensaje que puede tener un tamaño máximo de 264 bits. insert clientes values('JTL'. se puede aplicar para encriptar la contraseña del usuario. ambos son algoritmos no reversibles.sha1('iti'). sino una secuencia de 40 caracteres en hexadecimal producidos pos la función de encripatación. En el archivo ventas.'MARIA LOPEZ FUENTES'. VICTORIA'. insert clientes values('MLF'. OAX. ENCRIPTACIÓN PHP.'9717114526').sha1('iti').'9717113210').'GASTON DEHESA VALENCIA'. aunque en el 2005. 145 . durante la autenticación.'JORGE TOLEDO MATUS'.'AV.'C. 5 DE MAYO JUCHITAN'. El nivel de seguridad del algoritmo sha1 es bueno. y obtener su correspondiente resultado.'.'GPE. se insertaron tres registros en la tabla clientes. JUAREZ. En general la idea es la misma. un equipo de investigadores chinos demostraron que son capaces de romperlo a los 269 operaciones.siendo este último el más seguro. es decir encriptan una cadena de caracteres pero no pueden reconstruir la cadena original. de tal manera que un usuario que se encuentre monitoreando la red no pueda interpretar la contraseña del algún usuario y poderla usar para autenticarse posteriormente. else //No se encontró al cliente echo"<h2 align='center'>USUARIO NO REGISTRADO</h2>". lo cual significa que aún en estas circunstancias no está nada mal. esto significa que la cadena que se almacena en el campo clave de la tabla de clientes no es “iti‛. se puede realizar la siguiente consulta en el servidor MySQL. Se puede observar como los registros que tienen asignados a su campo id_clie “DGV‛ y “JTL‛ respectivamente. Para probar lo anterior.

Cuando el usuario se autentica. de ser así significa que el usuario es un cliente registrado y se le puede dar acceso al sistema.mysql> select id_clie. es que se utilice además como el inicio de sesión del usuario que se está autenticando.php y autenticacion_encriptacion_sesion2. es una modificación de las paginas autenticación.php.php y cerrar sesion2. El siguiente ejemplo implementa la autenticación con encriptación de la contraseña del usuario.php".php y autenticacion2. SESIONES Un complemento perfecto para mejorar la seguridad en un sitio Web en el proceso de autenticación con contraseña. //termina la página } 146 .php con otras dos páginas para cerrar la sesión que se inicie. implementadas en las páginas: cerrar sesion. mientras que una está en texto normal. dando lugar a las paginas: autenticacion_encriptacion_sesion. Las paginas autenticacion.clave.php --> <html> <head> <title>Autenticación. mismo que se busca si existe una correspondencia en la base de datos.autenticacion_encriptacion_sesion2.php pueden ser utilizados para proveer de autenticación con encriptación en la contraseña a un usuario.php. Encriptación y Sesión</title> </head> <body> <?php include "cerrar session. por obviedad solo se muestra la página más importante.nom from clientes.php y autenticacion2. sustituyendo solamente la línea de la consulta realizada en la página autenticacion2. luego se le aplica la función sha1().php. para ello es necesario una vez que se compruebe que el usuario es una usuario registrado se registre su nombre de usuario en la variable de sesión y este se mantenga mientras navega en el sitio Web hasta que decida cerrar la sesión. //Si la sesión esta iniciada se llama a la función cerrar() exit(). así como el manejo de sesiones. id_clie GDV JTL MLF Clave 70b5992d48a5ccb513904387832b6dec99c32e4f 70b5992d48a5ccb513904387832b6dec99c32e4f Iti Nom GASTON DEHESA VALENCIA JORGE TOLEDO MATUS MARIA LOPEZ FUENTES Así se puede observar que dos registros tienen una cadena encriptado.php para verificar la funcionalidad en conjunto <!-. //Contiene la función cerrar() if (isset($_SESSION['usuario'])) //Comprueba si la sesión esta iniciada { cerrar(). registra una contraseña en texto normal. generando la secuencia de 40 caracteres en hexadecimal encriptado. por el siguiente: $sql="select * from clientes where id_clie='$us' and clave=sha1('$clave')". sin embargo se puede cargar en el navegador la página autenticacion_encriptacion_sesion.

} Este código puede insertarse al inicio de cada página. de ser así se muestra el mensaje de bienvenida. USUARIOS DEL SITIO WEB Aplicar las tres medidas de seguridad durante el inicio de sesión aporta un buen nivel de seguridad al sitio Web. para cuidar que otros usuarios no puedan accederla sin haber antes iniciado una sesión. en caso contrario.htm'>Entrar sistema</a></p>". $reg = mysql_query($sql.$us= $_POST[usuario]. si se trata 147 . para cerrarla. con lo cual se da por iniciado la sesión./2/plantilla1. Otro aspecto de la seguridad es clasificar a los diferentes tipos de usuarios según la función que van a realizar. //Busca el cliente en la tabla de clientes $sql="select * from clientes where id_clie='$us' and clave=sha1('$clave')". Se recomienda como medida de seguridad que en todas las páginas accesibles para el usuario una vez autenticado. Ejemplo: if (!isset($_SESSION['usuario'])) { echo "Debe iniciar sesión". esto trae como resultado que una vez que se verifique el tipo de usuario que inicie sesión. se comprueba si la sesión esta iniciada. impedirlo indicándole con el mensaje apropiado. $conexion). $conexion=conectar(). mientras que a los administradores. con la contraseña correspondiente exista en la tabla de clientes. para no mostrar las mismas opciones a todos los tipos de usuarios. por ejemplo a los clientes. en caso contrario se realiza la consulta SQL para verificar que el usuario.php". si es así se llama a la función cerrar(). include "conexion. se muestra el vinculo para acceder a otra página que representaría las opciones accesibles para este usuario y finalmente registra en la variable de sesión el usuario autenticado. pues es el punto de entrada al sistema. $_SESSION['usuario'] = $us. así como permitirle las modificaciones pertinentes. $clave= $_POST[clave]. se verifique si ya inicio sesión. $n=mysql_num_rows($reg). ?> </body> </html> al Al inicio del código de php. $r= mysql_fetch_object($reg). //Número de registros de la consulta if ($n==1) //Se encontro al cliente { echo"<h2 align='center'>BIENVENIDO $r->nom</h2>".. echo"<p align='center'><a href='. //Registra la variable de sesión } else //No se encontro al cliente echo"<h2 align='center'>USUARIO NO REGISTRADO</h2>". exit(). mostrarles todas las facturas emitidas a los clientes. permitirles realizar compras y ver el catalogo de productos y precios. para mostrársela.

htm'>Entrar sistema</a></p>". en este caso la autenticación y el manejo de sesiones se complica un poco. //Si la sesión esta iniciada se llama a la función cerrar() exit().. $_SESSION['usuario'] = $us. $reg = mysql_query($sql./2/plantilla1. //Número de registros de la consulta if ($n==1) //Se encontro al usuario en la tabla de clientes { echo"<h2 align='center'>BIENVENIDO CLIENTE: $r->nom</h2>". } ?> al and al 148 .de un cliente mostrarle la pagina que contenga las opciones que pueda realizar y si se trata de una administrador una página distinta que a su vez le permita otro nivel de privilegio. como es el caso de clientes y administradores en la base de datos de ventas. $conexion=conectar(). $clave= $_POST[clave]./2/plantilla2. echo"<p align='center'><a href='. Un forma de poder clasificar a los usuarios es ubicandolos en tablas distintas en la base de datos.php". //Registra la variable de sesión } else //No se encontro al usuario en la tabla de clientes { //Busca al usuario en la tabla de administrador $sql="select * from administradores where id_ad='$us' clave=sha1('$clave')".htm'>Entrar sistema</a></p>". echo"<p align='center'><a href='. $r= mysql_fetch_object($reg).autenticacion_tipos_usuarios. ahora al usuario no solo se debe buscar en una sola tabla. $reg = mysql_query($sql. //termina la página } $us= $_POST[usuario]. //Contiene la función cerrar() if (isset($_SESSION['usuario'])) //Comprueba si la sesión esta iniciada { cerrar(). //Número de registros de la consulta if ($n==1) //Se encontro al usuario en la tabla de administradores { echo"<h2 align='center'>BIENVENIDO ADMINISTRADOR: $r->nom</h2>". $conexion). //Busca al usuario en la tabla de clientes $sql="select * from clientes where id_clie='$us' and clave=sha1('$clave')".php --> <html> <head> <title>Autenticación diferentes tipos de usuarios</title> </head> <body> <?php include "cerrar session. $_SESSION['usuario'] = $us.php". sino en dos. $n=mysql_num_rows($reg). //Registra la variable de sesión } else //No se encontro al usuario echo"<h2 align='center'>USUARIO NO REGISTRADO</h2>". $n=mysql_num_rows($reg). Ejemplo: <!-.. include "conexion. $conexion). $r= mysql_fetch_object($reg).

149 . El algoritmo puede funcionar para más tipos de usuario.</body> </html> Este ejemplo se puede autenticacion_encriptacion_sesion.php. basta con ampliar y adecuar el código ligeramente. Se puede apreciar como si se encuentra a un cliente se llama a una página y si se encuentra un administrador a una página distinta.php’. probar modificando la página asignando a la propiedad del formulario el nombre de la página: action= ‘autenticacion_tipos_usuarios.

¿Qué es la precedencia de operadores? 15.NET?. ¿Cuáles son los pasos para el manejo de sesiones? 29. ¿Qué es una sesión? 28. ¿Cuáles son las sentencias que se pueden utilizar para efectuar ciclos? 16. ¿Cuándo se recomienda el uso del método GET 26. ¿Explique cómo se prueba le servidor de base de datos MySQL? 30. Muestre la función con los modificadores adecuados para abrir el archivo ”nuevo.bin” de tipo binario para lectura y escritura 150 . Mencione por lo menos tres parámetros de configuración de php y para qué sirven 8. ¿Qué son las funciones de librerías? 23. ¿Qué es un arreglo? 18. ¿Qué son las variables estáticas? 22. Como se prueban los servicios Web para verificar si están funcionando correctamente 9. Muestre una tabla de los operadores aritméticos 10. ¿Qué métodos se pueden usar para procesar formularios? 25. Mencione los programas que se pueden utilizar como plataforma de trabajo Web 5. ¿Cómo se llaman los archivos de configuración de: apache. ¿Cuáles son las operaciones que se realizan en un archivo? 32. ¿Qué es una función definida por el usuario? 19.PREGUNTAS 1. ¿Existe la posibilidad de que en una petición de un cliente Web reciba código PHP. Muestre una tabla de los operadores de comparación 11. si.JSP ó ASP. 31. ¿Cuál es el alcance de una variable global? 21. ¿Qué son las librerías externas? de un ejemplo 24. no. ¿Cuándo se recomienda el uso del método POST 27. Muestre una tabla de los operadores de incremento/decremento 14. Muestre una tabla de los operadores bit a bit 13. ¿Cuáles son los pasos que sigue el navegador cuando realiza una petición? 3. Explique cómo se prueba una página que contiene código de php 4. Mencione por lo menos tres parámetros de configuración de apache y para qué sirven 7. ¿Cuáles son las operaciones más frecuentes en una tabla de una base de datos? Especifique las sentencias SQL que se utilizan para cada caso. Indique las diferencias entre un argumento por valor y por referencia 20. por que 2. Muestre una tabla de los operadores lógicos 12. php y MySQL? 6. ¿Cuáles son las sentencias de control? 17.

¿En qué consiste el manejo de sesiones? 39. ¿Porque se requiere copiar el archivo cargado en el directorio temporal del servidor a otro directorio? 36. ¿Cómo se define el directorio donde se guardan los archivos que se cargan temporalmente en el servidor? 34.33. ¿En qué consiste la autenticación? 37. ¿Cómo se determina el tamaño de un archivo cargado en el servidor? 35. ¿En qué consiste el manejo de usuarios de un sitio Web? 151 . ¿En qué consiste la Encriptación? 38.

Seleccionar 2 de las tablas que contenga la base de datos e implementar los formularios correspondientes para los procesos de Inserción. Identificar en que tabla es conveniente la utilización de carga de archivos. Utilizando la librería TCPDF. 2. Eliminación y Actualización. crear un archivo “PDF” que contenga la lista de todos los registros de una de las consultadas efectuadas. 3. Identificar los posibles usuarios del sistema e implementar la autenticación para los usuarios del sitio Web.EJERCICIOS PROPUESTOS Según el ejercicio del caso de estudio presentado por él alumno en el capítulo 2: 1. e implementarla. Consulta. para cada una. 152 . 4. considerando las medidas de seguridad como el manejo de sesiones y la encriptación.

4 Procesamiento del lado del cliente.

153

4.1. LENGUAJE SCRIPT DEL CLIENTE.
En el capitulo anterior se abordo un lenguaje que permite darle dinamismo a una pagina web por el lado del servidor, en este capitulo se abordará un lenguaje que le dará dinamismo a una pagina Web por el lado del cliente, ambos lenguajes, además del HTML, permiten construir paginas más interesantes. Un lenguaje de script es un pequeño lenguaje de programación cuyo código se inserta dentro del documento HTML. El programa se ejecuta en la máquina del cliente cuando se carga la página, o cuando sucede algo especial como puede ser el pulsar sobre un enlace. El soporte de scripts de HTML es independiente del lenguaje de scripts. Los scripts ofrecen la posibilidad de extender los documentos HTML de maneras activas e interactivas. Por ejemplo:  Pueden evaluarse los scripts a medida que se carga el documento para modificar los contenidos del documento dinámicamente.  Los scripts pueden acompañar a un formulario para procesar los datos a medida que éstos se introducen. Los diseñadores pueden rellenar dinámicamente partes de un formulario según los valores de los otros campos. También pueden asegurarse de que los datos introducidos concuerden con rangos de valores predeterminados, de que los campos sean consistentes entre sí, etc.  Los scripts pueden ser llamados por eventos que afecten al documento, como la carga, la descarga, el movimiento del foco sobre los elementos, los movimientos del ratón, etc.  Los scripts pueden ser vinculados a controles de formulario (p.ej., botones) para producir elementos gráficos para la interfaz del usuario. Sin embargo, conviene recordar que se ejecutan en el navegador del usuario y no en la máquina donde estén alojadas, por lo que no podrán realizar cosas como manejar bases de datos. Esto se hace con un lenguaje del lado del servidor El primer lenguaje de script que vió la luz fue el JavaScript de Netscape. Nacido con la versión 2.0 de este navegador y basado en la sintaxis de Java, su utilidad y el casi absoluto monopolio que entonces ejercía Netscape en el mercado de navegadores permitieron que se popularizara y extendiera su uso. El máximo rival del Netscape Navigator, el Internet Explorer de Microsoft, comenzó a soportar este lenguaje en su versión 3.0. Fue también entonces cuando introdujo el único rival serio que el JavaScript ha tenido en el mercado de los lenguajes de script: el VBScript. Basado en el lenguaje BASIC, no ha tenido excesiva difusión en Internet debido a la previa implantación del JavaScript, es por ello que en lo sucecivo se aborda este lenguaje. Para introducir un script JavaScript se hace dentro de las etiquetas:
154

<SCRIPT LANGUAGE=‚JavaScript‛> Código del script </SCRIPT>

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

El resultado es:

Esto es HTML Esto es JavaScript Esto vuelve a ser HTML

La funcionalidad anterior es muy básico, el script solo muestra un mensaje de texto, sin emabargo ilustra como se puede cambiar entre HTML y Javascript, La verdadera utilidad de JavaScript es el que los scripts se ejecuten cuando ocurra algún evento, como sea un click de ratón, que éste pase por encima de un enlace, que se envíen los datos de un formulario. En el siguiente ejemplo se utiliza el evento onclick() de un botón para validar que la clave y el nombre del cliente sean introducidos por el usuario en el formulario antes de llamar a la pagina clientes_alta.php.
!-- clientes_alta_valida.htm --> <html> <head> <title>Alta de Clientes</title> <script language="JavaScript" type="text/JavaScript"> function validar() { if (document.form1.clv.value!="" &&document.form1.nom.value!="") document.form1.submit(); else { if(document.form1.clv.value=="") window.alert("FALTA LA CLAVE"); else window.alert("FALTA EL NOMBRE"); } } </script> </head> <body> <form name="form1" method="post" action="clientes_alta.php"> <table border="1" align="center">

155

El código de esta función. igual que la de C). En este ejemplo se aprecia una de las funciones importantes de los lenguajes de script. verifica si el valor de los cuadros de texto “clv” y “nom” no están vacíos para llamar a la pagina clientes_alta.A</td> <td><input name="contrasena" type="password" id="contrasena" size="30" maxlength="30"></td> </tr> <tr> <td>DIRECCION</td> <td><input name="direccion" type="text" id="precioc2"></td> </tr> <tr> <td>TELEFONO</td> <td><input name="tel" type="text" id="tel"></td> </tr> <tr> <td colspan='2'><p align='center'><input name='Aceptar' ' type='button' id='Aceptar' value='Aceptar'> </p></td> </tr> </table> </form> </body> </html> onClick="validar(). A este evento se le asigna la función validar(). no tiene caso enviar los datos del formulario por la red hasta el servidor.<tr> <td colspan='2'><p align='center'>REGISTRO DE CLIENTES</p> </td> </tr> <tr> <td>CLAVE</td> <td width="49%"><input name="clv" type="text" id="clv" size="10" maxlength="10"></td> </tr> <tr> <td>NOMBRE</td> <td><input name="nom" type="text" id="nom" size="30" maxlength="30"></td> </tr> <tr> <td>CONTRASE&Ntilde. La función validar() se encuentra implementado en la parte superior del código entre las etiquetas <script> y </script>. Permite desde la pagina del cliente validar la información que los usuarios introducen en los formularios. Así." En este ejemplo cada vez que el usuario pulsa sobre el botón Aceptar se ejecuta su evento onClick(). tanto los operadores como las estructuras de control son exactamente iguales a C. 156 . Si el usuario no introduce la clave en el formulario y se pulsa sobre el botón Aceptar se muestra el mensaje: “FALTA LA CLAVE”. La sintaxis del lenguaje JavaScript es prácticamente igual que la de Java (es decir. de manera similar ocurre si se introduce una clave pero no el nombre.php invocando a la función sumit(). cuando estos no están bien rellenados por los usuarios.

Antes de comenzar a desarrollar programas y utilidades con JavaScript, es necesario conocer los elementos básicos con los que se construyen las aplicaciones. VARIABLES Las variables en JavaScript se crean mediante la palabra reservada var, una de las características de JavaSript al igual que PHP es que tampoco es necesario declarar las variables mediante la palabra reservada var
var x = 20; var y = 25; z = x+y;

La variable z no está declarada, por lo que JavaScript crea una variable y le asigna el valor correspondiente, El nombre de una variable debe cumplir las siguientes reglas:  Sólo puede estar formado por letras, números y los símbolos $ y _ .  El primer carácter no puede ser un número. Por tanto, las siguientes variables tienen nombres correctos:
var var var var $Edat; _$Nombre; $$$Area; $_a__$8;

Sin embargo, las siguientes variables tienen identificadores incorrectos:
var 1x; // Empieza por un número var numero;1_123; // Contiene un carácter ";"

En JavaScript un comentario en línea se realiza con // y un comentario de bloque con /* ---*/ Tipos de variables En JavaScript el tipo de variable se define dependiendo del valor que se le asigne, ejemplos:
var var var var var Edad = 20; // variable tipo entero PI = 3.1416; // variable tipo real Nombre = "JUAN PEREZ"; // Variable de tipo texto Calif = [100, 80, 100, 80]; //Variable de tipo arreglo de enteros Promocion = true; //Variable de tipo booleano

OPERADORES Los operadores se utilizan para manipular variables: ejecutan cálculos, buscan igualdades, realizan asignaciones. En la siguiente tabla se presentan los de uso más común.
Operador

Descripción Ejemplo OPERADORES ARITMÉTICOS + Suma x=x+z; Resta x=x-z; * Multiplicación x=x*z / División x=x/z; % Modulo o resto x=x%z; OPERADORES LÓGICOS && AND Lógico if (x&&0xFF)

Operador

Descripción Ejemplo OPERADORES DE ASIGNACIÓN = Asignación x=10; += Asignar y sumar x+=10; -= Asignar y restar x-=10; *= Asignar y multiplicar x*=10; /= Asignar y dividir x/=10; &= Asig. operador AND x&=0x02; |= Asignar operador OR x|=0x02;

157

OR Lógico if (x||0xFF) NOT Lógico If (Soltero) OPERADORES RELACIONALES == Igual que if (x==y) Diferente que = < Menor que > Mayor que <= Menor o igual que >= Mayor o igual que OTROS ++ Incremento x++; -Decremento x--;

|| 

OPERADORES A NIVEL DE BITS & AND a nivel de bits C=A&B; | OR a nivel de bits XOR a nivel de bits C=AB;  << Desp. a la izquierda B=A<<3; >> Desp. a la derecha C=A>>2; ~ NOT a nivel de bits A=~D; OPERADORES DE APUNTADORES * Indirección Int *Ap; & Dirección x=&Ap;

Tabla 4.1.- Operadores de JavaScript SENTENCIAS. Las sentencias de control de flujo tales como: if ,else, elseif, switch; así como las sentencias de de iteración: while, do..while, for, soportadas por JavaScript, tienen las mismas reglas de sintaxis las soportadas por PHP, planteados en el tema 3.4, esto se debe a que ambos lenguajes están derivados del lenguaje C.

4.2. MODELO DE OBJETOS CON LENGUAJE SCRIPT.
JavaScript es un lenguaje de objetos. Un objeto es un ente abstracto que agrupa por un lado a un conjunto de propiedades que definen al propio objeto y por otro, una serie de métodos que interactúan sobre él (funciones o procedimientos). Aunque JavaScript no permite dos de las características clásicas de los lenguajes orientados a objetos (ni la herencia ni el polimorfismo), sí permite la creación y manipulación de objetos sencillos, y la definición de métodos y propiedades para dichos objetos Lo que verdaderamente interesa conocer de un lenguaje de scripts como JavaScript, es el Modelo de Objetos de Documento (DOM, Document Object Model). El DOM es el conjunto de objetos predefinidos que nos permite acceder a todos los elementos de una página y a ciertas características específicas del navegador El DOM es una jerarquía de objetos predefinidos que describen los elementos de la página Web que está mostrando el navegador, así como otras características del proceso de navegación (como son el historial, el tamaño de la ventana de navegación o el contenido de la barra de estado del navegador). Un ejemplo sencillo. En JavaScript, para escribir un mensaje en un cuadro de diálogo es:
window.alert("FALTA LA CLAVE");

158

Si bien no se conoce como funciona internamente la función alert(), se sabe que se trata de una función del objeto window. A estas funciones se las llama métodos, y a las variables propiedades. Tanto los métodos como las propiedades siempre se representan de la siguiente manera:  nombre_objeto.nombre_método(argumentos)  nombre_objeto.nombre_propiedad Actualmente no existe una gran diferencia entre el soporte de JavaScript que ofrecen los diferentes fabricantes de navegadores, sin embargo se debe tomar en consideración que si lo existe aunque sea minima. En la figura 4.1 se muestra la jerarquía de objetos de JavaScript

Fig. 4.1.- Jerarquía de objetos de JavaScript

159

Es una referencia al objeto window que lo abrió. Cancela el intervalo referenciado por 'nombre' (ver el método setTimeout(). . Se trata de un array que representa las URLS visitadas por la ventana (están almacenadas en su historial).  location.. uno de aceptar y otro de cancelar. Es un array: cada elemento de este array (frames[0]. Contiene el nombre de la ventana. Elimina el intervalo referenciado por 'id' (ver el método setInterval().  name. El objeto window hace referencia a la ventana actual. Mueve el objeto window actual a las coordenadas (x.  window. Propiedades  closed. Devuelve true si se pulsa aceptar y devuelve false si se pulsa cancelar.  self. Es un nombre alternativo del window actual. frames[1].  top. Cadena que contiene el texto por defecto que aparece en la barra de estado (status bar) del navegador. pues todos los componentes de una página Web están situados dentro de una ventana.  focus(). Su orden se asigna según se definen en el documento HTML. Muestra un cuadro de diálogo con el mensaje 'mensaje' y dos botones. Referencia al objeto window que contiene el frameset. también del objeto window).  open(URL.  defaultStatus.A continuación se describen las propiedades y métodos de algunos de los objetos más importantes de la jerarquía de objetos de JavScript Objeto windows Se trata del objeto más alto en la jerarquía del navegador (navigator es un objeto independiente de todos en la jerarquía).y).  close(). Elimina el foco del objeto window actual.  moveTo(x. Cierra el objeto window actual. Si esta ventana no 160 . Igual que self: nombre alternativo del objeto window actual. A continuación se presentan sus propiedades y métodos.  status. si la ventana fue abierta usando el método open()  parent. Cadena con la URL de la barra de dirección.caracteristicas). Mueve el objeto window actual el número de pixels especificados por (x. Variable que nos indica cuántos frames tiene la ventana actual. Nombre alternativo de la ventana del nivel superior. o del frame actual..  length.y).nombre. Captura el foco del ratón sobre el objeto window actual.  opener.  confirm(mensaje).  clearTimeout(nombre).  history.  moveBy(x.) es uno de los frames que contiene la ventana.  clearInterval(id). Muestra el mensaje 'mensaje' en un cuadro de diálogo  blur(). Es un booleano que indica si la ventana está cerrada ( closed = true ) o no ( closed = false ). Métodos  alert(mensaje). String con el mensaje que tiene la barra de estado. también del objeto window).y). Abre la URL que le pasemos como primer parámetro en una ventana de nombre 'nombre'.  frames.y).

El parámetro 'respuesta_por_defecto' es opcional. Desplaza el objeto window actual el número de pixels especificado por (x. Las características que se pueden elegir para la ventana que se desea abrir son las siguientes:  toolbar = [yes|no|1|0]. y mostrará la respuesta por defecto indicada al abrirse el cuadro de diálogo. Muestra un cuadro de diálogo que contiene una caja de texto en la cual se puede escribir una respuesta a lo que se pregunte en 'mensaje'.  scrollbars = [yes|no|1|0]. Indica si la nueva ventana tendrá barra de menús o no. Indica si la nueva ventana tendrá botones de dirección o no. outerHeight = px. Indica el ancho *total* de la ventana en pixels. Indica el alto *total* de la ventana el pixels  left = px. setInterval(expresion.0).  width = px. Devuelve un valor que puede ser usado como identificado por clearInterval(). scrollBy(x. Desplaza el objeto window actual a las coordenadas especificadas por (x.  Evalúa la expresión especificada después de que hayan pasado el número de milisegundos especificados en tiempo.1) o no la tendrá (no.  status = [yes|no|1|0].  outerWidth = px. abrirá una ventana nueva en la que mostrará el contenido con las características especificadas.y).     existe. Indica si la ventana tendrá barra de herramientas (yes. Desplaza el objeto window actual a las coordenadas especificadas por (x.tiempo). Evalua la expresión especificada después de que hayan pasado el número de milisegundos especificados en tiempo.y). Indica si la nueva ventana tendrá barra de estado o no.tiempo).y). scroll(x.  resizable = [yes|no|1|0].  menubar = [yes|no|1|0].y). setTimeout(expresion.respuesta_por_defecto).  top = px. El método retorna una cadena de caracteres con la respuesta introducida. Indica la distancia en pixels desde el lado izquierdo de la pantalla a la que se debe colocar la ventana. prompt(mensaje. 161 . Indica si la ventana tendrá campo de localización o no. Devuelve un valor que puede ser usado como identificador por clearTimeout(). Indica si la nueva ventana tendrá barras de desplazamiento o no.y). Indica la distancia en pixels desde el lado superior de la pantalla a la que se debe colocar la ventana. Indica si la nueva ventana podrá ser cambiada de tamaño (con el ratón) o no. Indica el alto de la ventana en pixels. scrollTo(x. Indica el ancho de la ventana en pixels.y).  location = [yes|no|1|0].  height = px.  directories = [yes|no|1|0].

Propiedades  alinkColor. //Abre la ventana mi_ventana. Gracias a este objeto se puede añadir dinámicamente contenido a la página. //Cierra la ventana después de los desplazamientos } //--> </script> </HEAD> <BODY> <script LANGUAGE="JavaScript"> <!-var opciones="left=100.open("".document.close().5 pixeles más i++. etc. Se trata de un array con los enlaces internos existentes en el documento  applets.moveBy(10. mi_ventana. <!-. Esto incluye el texto. enlaces.top=100. Guarda el nombre del servidor que ha servido el documento  embeds. Propiedad que almacena el color de fondo del documento  cookie. if (i<20) //Se repite mientras i<20 setTimeout('moverVentana()'.100)."". Es una cadena con los valores de las cookies del documento actual  domain. En esta propiedad se tiene el color del primer plano 162 . formularios. o hacer cambios.opciones).El siguiente ejemplo mueve 20 veces una ventana en la pantalla cada cierto intervalo de tiempo al final se cierra.htm --> <HTML> <HEAD> <title>Uso del objeto windows con JavaScript</title> <script LANGUAGE="JavaScript"> <!-function moverVentana() { mi_ventana. imágenes.moveTo(100.width=400. mi_ventana = window. según convenga. //Mueve la ventana de su posición actual 10. //Se llama a la misma función else mi_ventana. i= 0. //--> </script> </BODY> </HTML> Objeto document El objeto document es el que tiene el contenido de toda la página que se está visualizando. Esta propiedad tiene almacenado el color de los enlaces activos  anchors. Es un array con los applets existentes en el documento  bgColor.5). //Mueve la ventana en las coordenas indicadas moverVentana().windows.write("Una prueba de abrir ventanas").100).height=150". Es un array con todos los EMBED del documento  fgColor.

 writeln(). //Reinicia la impression de la cadena setTimeout('cambiarTitulo()'.  close(). Array con todas las imágenes del documento  lastModified.write("Documento <b>referrer</b>: " + document. etc) que tienen sus propias propiedades y métodos. } cambiarTitulo(). Es una cadena con la fecha de la última modificación del documento  linkColor. botones. Cadena con el título del documento actual  vlinkColor. Escribe texto en el documento. document. var titulooriginal = document.  title. Los formularios tienen a su vez elementos (cajas de texto.Se trata de un array con todos los formularios del documento.  El siguiente ejemplo muestra algunas propiedades del documento.substring(0.length) i=0.write("Navegador <b>lastModified</b>: " +document. Es un array con los enlaces externos  location. Propiedad en la que se guarda el color de los enlaces visitados Métodos  clear(). 163 .  images. Escribe texto en el documento. Limpia la ventana del documento  open().bgColor + "<br>").fgColor + "<br>").write("Documento <b>bgColor</b>: " + document. document. document.i). y además lo finaliza con un salto de línea forms. Cadena con la URL del documento que llamó al actual. Propiedad que almacena el color de los enlaces  links.referrer + "<br>"). function cambiarTitulo() //Cambia el Titulo del documento { document.title. document.write("Navegador <b>alinkColor </b>: " + document.title = titulooriginal. además de que cambia el titulo del documento letra por letra cada cierto tiempo: <!--document. Cierra la escritura sobre el documento actual  write(). i++.100). if (i>titulooriginal. //Se llama a la función //--> </script> </HEAD> <BODY> <script LANGUAGE="JavaScript"> <!-. Cadena con la URL del documento actual  referrer. Abre la escritura sobre un documento.alinkColor + "<br>").htm --> <HTML> <HEAD> <title>Objeto document</title> <script LANGUAGE="JavaScript"> <!-var i=1.//Muestra algunas propiedades del documento document. en caso de usar un enlace.write("Documento <b>fgColor</b>: " + document.lastModified + "<br>").

Cadena que contiene el número de puerto del servidor.  replace(cadenaURL). dentro de la URL. <!—location. Cadena que contiene el nombre del servidor y el número del puerto. Reemplaza el historial actual mientras carga la URL especificada en cadena URL. dentro de la URL.write("Location <b>href</b>: " + location.  protocol.write("Location <b>host</b>: " + location. document.  hostname. Su finalidad principal es. document.//--> </script> </BODY> </HTML> Objeto location Este objeto contiene la URL actual así como algunos datos de interés respecto a esta URL. Cadena que contiene el nombre del enlace. La sintaxis es: Protocolo://maquina_host[:puerto]/ruta_al_recurso Propiedades  hash. document.  pathname. document.protocol + "<br>"). por una parte. dentro de la URL.write("Location <b>protocol</b>: " + location.  host. Cadena que contiene el protocolo utilizado (incluyendo los dos puntos). modificar el objeto location para cambiar a una nueva URL. Cadena que contiene el nombre de dominio del servidor (o la dirección IP). Vuelve a cargar la URL especificada en la propiedad href del objeto location. //--> </script> </BODY> </HTML> 164 .//Muestra algunas propiedades del objeto location document.port + "<br>"). document.  href.  port. dentro de la URL.write("Location <b>port</b>: " + location. Cadena que contiene el camino al recurso.  search.pathname + "<br>").hostname + "<br>").htm--> <HTML> <HEAD> <title>Objeto location</title> </HEAD> <BODY> <script LANGUAGE="JavaScript"> <!-. Métodos  reload(). y extraer los componentes de dicha URL de forma separada para poder trabajar con ellos de forma individual si es el caso.href + "<br>"). dentro de la URL.write("Location <b>hostname</b>: " + location.write("Location <b>pathname</b>: " + location. Cadena que contiene la información pasada en una llamada a un script. dentro de la URL. dentro de la URL. Cadena que contiene la URL completa.host + "<br>").

posicion puede ser un entero.  next. Cadena que contiene la URL completa de la anterior entrada en el historial. Propiedades  action. Propiedades  current. una casilla de verificación y una lista de selección. Cada elemento de este array es un objeto de tipo form.e. Objeto form Este objeto es el contenedor de todos los elementos del formulario. Métodos  reset(). en cuyo caso indica la posición relativa del documento dentro del historial. la caja de texto será elements[0]. 165 . Entero que contiene el número de entradas del historial (i.  elements. es decir. si en el formulario se ha puesto. Es una cadena que contiene la URL del parámetro ACTION del form.  forward().. sobre todo. Se utiliza. la dirección en la que los datos del formulario serán procesados. Métodos  back(). Cadena que contiene la URL completa de la siguiente entrada en el historial. Es un array que contiene todos los elementos del formulario. Vuelve a cargar la URL del documento anterior dentro del historial. Vuelve a cargar la URL del documento especificado por posicion dentro del historial. una caja de texto.  submit(). Es una cadena que tiene el la codificación mime especificada en el nombre del método con el que se va a recibir/procesar la información del formulario (GET/POST). Es una cadena que tiene parámetro ENCTYPE del form. cuántas direcciones han sido visitadas). en cuyo caso representa toda o parte de una URL que esté en el historial. la casilla de verificación será elements[1] y la lista de selección será   elements[2]. encoding.  go(posicion). Los formularios se agrupan en un array dentro de document.  length. Por ejemplo. en este orden. Resetea el formulario: tiene el mismo efecto que si se pulsa un botón de tipo RESET dispuesto en el form.  previous. guarda las referencias de los lugares visitados.Objeto history Este objeto se encarga de almacenar una lista con los sitios por los que se ha estado navegando. Vuelve a cargar la URL del documento siguiente dentro del historial. es decir. en el mismo orden en el que se definen en el documento HTML. o puede ser una cadena de caracteres. Cadena que contiene la URL completa de la entrada actual en el historial. para moverse hacia delante o hacia atrás en dicha lista. Envía el formulario: tiene el mismo efecto que si pulsáramos un botón de tipo SUBMIT dispuesto en el form. method.

form1. 4.4. EVENTOS CON LENGUAJE SCRIPT.value=="") window.value!="" &&document.clv.value!="") document.form1. else window. OBJETOS LENGUAJE SCRIPT ÍNTER CONSTRUIDOS.nom.form1. 166 . 4.submit().form1. La importancia de los eventos radica en que posibilita modificar el contenido de un documento HTML sin intercambio de datos a través de la red.clv.form1.submit(). } } </script> La línea de código if (document. Cuando el método sumit() se ejecuta se llama a la pagina definida en la propiedad action del formulario. hacer clic sobre un botón o seleccionar un campo de un formulario.nom.2.form1.alert("FALTA EL NOMBRE").htm presentado en un ejercicio anterior donde se acceden a propiedades y metodos del objeto document y un metodo del objeto windows <script language="JavaScript" type="text/JavaScript"> function validar() { if (document.Uan vez que se conocen las propiedades y métodos de los objetos de JavaScrit. cuando se producen y sobre qué etiquetas pueden actuar se presenta en la tabla 4.value!="") comprueba si la propiedad value de los elementos clv y nom hallados en el formulario que es parte del documento no estan vacíos para así ejecutar la línea: document.3.clv. else { if(document. es momento de analizar un poco la función validar() de la pagina clientes_alta_valida. Los eventos son el resultado de una acción del usuario.alert("FALTA LA CLAVE"). este ejecuta el método sumit() del formulario. Una lista de los eventos más comunes. Por ejemplo.value!="" &&document.form1.

.Eventos definidos por JavaScript Los eventos más utilizados en las aplicaciones Web tradicionales son onload para esperar a que se cargue la página por completo. los eventos onclick. 167 . onmouseout para controlar el ratón y onsubmit para controlar el envío de los formularios. onmouseover.2.Tabla 4.

htm presentado anteriormente. onclick. Al pulsar por ejemplo sobre un botón de tipo <input type=‛submit‛> se desencadenan los eventos onmousedown. este muestra un cuadro donde se puede pulsar el botón Aceptar o Cancelar. onChange y onKeyUp de JavaScript.htm --> <html> <head> <title> Evento onClick </title> <script language="JavaScript"> function mensaje(elemento) { alert("Ha hecho click en el "+elemento+"!"). De esta forma. se deben asociar funciones o código JavaScript a cada evento. onmouseup y onsubmit de forma consecutiva. solo que cambia el mensaje que se envía como argumento. todos ejecutan la misma función de javaScricpt. Para que los eventos resulten útiles.n CONFIRM </body> </html> En el siguiente ejemplo se utiliza el evento onClick en diferentes componentes. cuando se produce un evento se ejecuta el código indicado. tales como: dos botones de opción.Las acciones típicas que realiza un usuario en una página Web pueden dar lugar a una sucesión de eventos. <!-.htm --> <html> <head> <title>Evento Onload</title> <script language="javascript"> function confirma() { var respuesta=confirm("Pulsa un botón"). else alert("Has pulsado CANCELAR"). A continuación se presentan algunos ejemplos donde se utilizarán los eventos onLoad. estos deben escribirse entre las etiquetas <head> </head> de cada pagina Web. 168 .onclick. if (respuesta==true) alert("Has pulsado ACEPTAR"). } </script> </head> <body onLoad="confirma()."> Ejemplo del evento OnLoad y funci&oacute. por lo que la aplicación puede responder ante cualquier evento que se produzca durante su ejecución Se recomienda que el código de JavaScrip para cada evento sea implementado utilizando funciones.onLoad. En este ejemplo se utiliza el evento onLoad que ejecuta la función confirma(). onClick. una casilla de verificación y 2 botones. <!-. como es el caso del ejemplo clientes_alta_valida.

2. <!-.onchange y onKeyUp. } </script> </head> <body> Eventos: OnChange en selector y OnKeyUp en caja de texto <form> <select name="selector1" onChange="cambio().cajatexto1.title=document. document. según la tabla 4.value.htm --> <html> <head> <script language="JavaScript"> function cambio(){ alert("Se cambio el valor").status=document. cuando cambia el valor del menú de opciones se ejecuta la función cambio() este muestra un mensaje del cambio ocurrido. cuando se suelta una tecla pulsada sobre el cuadro de texto se ejecuta la función mod_propiedades().cajatexto1."> </form> </body> </html> Así como en los ejemplos anteriores se utilizaron los eventos onLoad. } function mod_propiedades(){ window.forms[0]. onClick.value. este cambia las propiedades status del objeto Windows y title del objeto document.} </script> </head> <body> Evento: OnClick <form> <input type="radio" name="radio" onClick="mensaje('botón de opción 1')">Opcion 1<br> <input type="radio" name="radio" onClick="mensaje('botón de opción 2')">Opcion 2<br> <input type="checkbox" onClick="mensaje('Casilla de verificicación')">CheckButton<br> <input type="submit" value="Enviar" onClick="mensaje('botón de envío')"> <input type="reset" value="Restablecer" onClick="mensaje('botón restablecer')"> </form> </body> </html> El siguiente ejemplo utiliza el evento onClange en un menú de opciones y el evento onKeyUp en un cuadro de texto.forms[0]."> <option selected value='1'>Opc1</option> <option value='2'>Opc2</option> </select> <input type="text" name="cajatexto1" onKeyUp="mod_propiedades(). 169 . onChange y onKeyUp se pueden también aplicar de forma creativa los demás eventos a los componentes HTML que los soporten.

VALIDACIÓN DE ENTRADA DE DATOS DEL LADO DEL CLIENTE.valida cadena. en la aplicación del servidor que recibe la información. llamado submit.length. número de líneas o tamaño de la entrada Evento onSubmit La validación de campos de formulario se basa en interceptar el momento en que el usuario realiza el envío de los datos del formulario (es decir. teléfonos. lo que nos permite ejecutar un script justo antes de que se realice el envío de los datos. Cuando el usuario pulsa sobre el botón de enviar. la experiencia del usuario mejora notablemente. i++ ) { if ( q. JavaScript proporciona un mecanismo para capturar este evento. i < q. Como es sabido. al no ser necesario enviar los datos al servidor y esperar su respuesta para obtener sólo un mensaje informando de la incorrección de la información suministrada. en última instancia. el botón de envío de datos se codifica con HTML mediante un tipo especial de objeto de formulario.5. modificarlos y. Estas son algunas de las validaciones típicas:  Comprobar que se han suministrado todos los campos obligatorios  Comprobar que el formato de un campo es el esperado (fechas. Este ejemplo valida que no este vacío el cuadro de texto de un formulario y no tenga solo espacios en blanco <!-.charAt(i) != " " ) { return true } } return false } //valida que el campo no este vacio y no tenga solo espacios en blanco 170 . se genera el evento submit. asociado al envío de datos de un formulario. etc. A continuación mostramos referencias a múltiples ejemplos prácticos de validación de formularios con JavaScript. al añadir una validación local con JavaScript.)  Comprobar la validez (sintáctica) de las direcciones de correo y URLs  Comprobar que no se sobrepasa la longitud.4.htm --> <html> <head> <title>Valida una cadena de un formulario</title> <script language="javascript" type="text⁄javascript"> function vacio(q) { for ( i = 0. Una de las grandes aportaciones de JavaScript a la creación de interfaces Web es la posibilidad de acceder al contenido de los campos de los formularios para realizar acciones sobre los valores introducidos por el usuario. por motivos de seguridad. La validación de los datos de un formulario mediante scripts JavaScript no sustituye a la validación que debe realizarse. al pulsar sobre el botón de enviar). Sin embargo. validarlos.

length<4 || parseFloat(Ano)<1900){ alert('Año inválido') return false } // Valida el Mes if (isNaN(Mes) || parseFloat(Mes)<1 || parseFloat(Mes)>12){ alert('Mes inválido') return false } // Valida el Dia if (isNaN(Dia) || parseInt(Dia.lastIndexOf("-"))) // Cadena Día var Dia= new String(Fecha.lastIndexOf("-")+1.htm --> <html> <head> <title>Valida una Fecha</title> <script language="javascript" type="text/javascript"> function validaF() { Cadena=document.length)) // Cadena Mes var Mes= new String(Fecha.substring(Fecha.substring(0. } </script> </head> <body> <form action="xxx. 10)>31){ alert('Día inválido') return false } if (Mes==4 || Mes==6 || Mes==9 || Mes==11 || Mes==2) { if (Mes==2 && Dia > 28 || Dia>30) { alert('Día inválido') return false } } 171 .Fecha.Fecha.substring(Fecha. var Fecha= new String(Cadena) // Crea una cadena var RealFecha= new Date() // Para sacar la fecha de hoy // Cadena Año var Ano= new String(Fecha. 10)<1 || parseInt(Dia."> </form> </body> </html> El siguiente ejemplo valida el siguiente formato de fecha dd-mm-aaaa en un solo cuadro de texto.value) == false ) alert("Introduzca un cadena de texto.fecha.function valida(Obj) { if( vacio(Obj.form1.value.php" method="post" name="nomgre" id="nomgre"> Nombre <input name="nombre" type="text" id="nombre"> <input type="button" name="Submit" value="Enviar" onClick="valida(this.indexOf("")+1.submit().valida fecha.Fecha. <!-.nombre.indexOf("-"))) // Valida el año if (isNaN(Ano) || Ano.form).") else Obj.

htm --> function validaCampos(form) { //expresiones regulares var er_tel = /^\d{10}$/ //Acepta 10 dígitos consec. function validaF2() { ano = document. Los días del mes siguen una numeración diferente.+\@. valor = new Date(ano. Si los datos del usuario no son correctos. dia) es una función interna de JavaScript que permite construir fechas a partir del año. //La fecha es correcta } La función Date(ano. mes. form1.ano.mes. sin espacios ni guiones var er_correo = /^(. form1. //Fecha correcta."> </form> </body> </html> La fecha también se podría validar cuando el día.value)) { 172 .form1. if( !isNaN(valor) ) { return false.test(form.document.5})|^)$/ //5 numeros o cadena vacia //Se usa el metodo test de expresion regular if(!er_tel. siendo 0 el mes de Enero y 11 el mes de Diciembre. Es muy importante tener en cuenta que el número de mes se indica de 0 a 11.value.tel.submit().value. Ejemplo: document.value. La siguiente función regulares: valida tres campos de un formulario usando expresiones <!-.') return false //no submit } if(!er_correo.+\.dia.+)$/ //expresion regular para emails var er_cp = /(^([0-9]{5.form1.form1.. ya que el mínimo permitido es 1 y el máximo 31.correo. el mes y el día de la fecha. mes. mes y año se encuentran en diferentes cuadros de texto. } return true.test(form.value. dia). dia = document.value)) { alert('Campo TELEFONO no válido. se llama a la página } </script> </head> <body> <form action="xxx.valida campos. La validación consiste en intentar construir una fecha con los datos proporcionados por el usuario.php" method="post" name="form1" id="form1"> Fecha dd-mm-aaaa <input name="fecha" type="text" id="fecha"> <input type="button" name="Submit" value="Enviar" onClick="validaF(). mes = document. la fecha no se puede construir correctamente y por tanto la validación del formulario no será correcta.fecha.

boletin[0].length.intereses.value)) { alert('Campo CODIGO POSTAL no válido.test(form. } function validaCB(form) { ban=false.3}\s\d{9}$/ Formato 9 cifras seguidas 9 cifras agrupadas de 3 en 3 y separadas por guiones 9 cifras.alert('Campo CORREO no válido.intereses.disabled = false.length.i++) form. <!-.checked){ // Si esta marcado la suscripción 173 .') return false //no submit } if(!er_cp. } function deshabilita(form) { for (i=0.i++) form.intereses[i].htm --> <html> <head> <title>Valida Casillas de verificación</title> <script language="JavaScript" type="text/JavaScript"> function habilita(form) { //itera mientras exista elementos del objeto intereses for (i=0. las 3 primeras separadas por un espacio 9 cifras las 3 primeras separadas por un espacio las siguientes agrupadas de 2 en 2 9 cifras las 3 primeras encerradas por paréntesis y un espacio de separación respecto del resto Prefijo internacional (+ seguido de 2 o 3 cifras) espacio en blanco y 9 cifras consecutivas El siguiente ejemplo valida si un botón de opción esta marcado y almenos una casilla de verificación. if (form.disabled = true.cp.') return false } alert('Todo bien').i<form. //Todos los campos estan validados } A continuación se muestran otras expresiones regulares que se pueden utilizar para otros formatos de número de teléfono: Número 900900900 900-900-900 900 900900 900 90 09 00 Expresión regular /^\d{9}$/ /^\d{3}-\d{3}-\d{3}$/ /^\d{3}\s\d{6}$/ /^\d{3}\s\d{2}\s\d{2}\s\d{2}$/ (900) 900900 /^\(\d{3}\)\s\d{6}$/ +34 900900900 /^\+\d{2.intereses[i].valida casilla de verificacion.i<form.

asi que cada pagina que se realice debe considerar este aspecto. con las diferentes versiones de cada uno de los navegadores y además con las diferentes versiones de las tecnologías que usa. como Javascript Todos los navegadores modernos interpretan el código JavaScript integrado dentro de las páginas Web.intereses. 174 . lo importante es tener presente que esta tarea de validación de los formularios se puede realizar con la programación por el lado del cliente usando JavaScript. aunque existen algunas diferencias entre ellas. <br><br> Seleccione los temas de su interés:<br> <input type="checkbox" name="intereses" value="Arte y Cultura"> Arte y Cultura<br> <input type="checkbox" name="intereses" value="Ciencia">Ciencia<br> <input type="checkbox" name="intereses" value="Música">Música<br> <input type="button" name="Submit" value="Bot&oacute. } } form.n" onClick="validaCB(this.length. 4.form)"> SI. return(0).intereses[i]. <input type="radio" name="boletin" value="no" onClick="deshabilita(this.checked) ban=true.for (i=0. } </script> </head> <body> <form action="xxx. con los diferentes navegadores que hay actualmente en Internet.i<form.form).6. Un desarrollador Web cada día debe lidiar.0 y soportaba gran cantidad de instrucciones y funciones. gracias. casi todas las que existen ahora ya se introdujeron en el primer estándar.submit(). CONSIDERACIONES DEL SOPORTE DEL NAVEGADOR. quiero suscribirme.i++) if(form."> </form> </body> </html> //Todo bien Los ejemplos anteriores se pueden adaptar para muchas aplicaciones. //La bandera se activa si almenos se marca una casilla if (!ban){ alert('Marque almenos una casilla').php" method="post" name="form1" id="form1"> ¿Desea suscribirse a nuestro boletín de novedades? <br> <input type="radio" name="boletin" value="si" checked onClick="habilita(this. para hacer compatibles sus aplicaciones.form)"> No. He aquí las versiones: Javascript 1: nació con el Netscape 2.

3: introducida en la versión 4. Microsoft versión 5.0. Esta tiene como desventaja que es un poco distinta en plataformas Microsoft y Netscape.0. Javascript 1. Esta versión es una pequeña revisión de la 1. como por ejemplo el tratamiento de imágenes dinámicamente y la creación de arrays.07 del Netscape Navigator.Javascript 1. Por su parte. Javascript 1.1" 175 .5 de JScript navegadores de Microsoft). Javascript 1.2 creada para ajustarse al estándar internacional “European Computer Manufacturers' Association” (ECMA) que regula el lenguaje JavaScript.2: Se diseñó con la llegada de Netscape 4. Por ejemplo para la versión: LANGUAGE="JavaScript1. también ha (así llaman evolucionado hasta presentar su al javascript utilizado por los Para tener en cuenta la versiones se debe colocar en el atributo LANGUAGE de la marca SCRIPT la versión con la que se pienza trabajar. Implementaba poco más que su anterior versión.5: Implementada con Netscape 6.1: Es la versión de JavaScript que se diseñó con la llegada de Netscape 3. ya que ambos navegadores crecieron de distinto modo y estaban en plena lucha por el mercado.

Muestre una figura de la jerarquía de objetos de JavaScript 9. De al menos tres casos de aplicación de la programación por el lado del cliente 3. ¿Que es DOM? 8. Describa por lo menos 3 propiedades del objeto form 18. ¿Qué navegadores soportan JavaScript? 23. Describa por lo menos 5 métodos del objeto document 13. Describa por lo menos 2 métodos del objeto form 19. ¿De que lenguaje esta derivado JavaScript? 7. ¿Qué es un evento? 20. Describa por lo menos 5 propiedades del objeto document 12. Describa por lo menos 3 propiedades del objeto history 16. ¿En que secciones de una pagina WEB se puede incrustar código de JavaScript? 4. ¿Se necesita de un servidor WEB para ejecutar código por el lado del cliente?. Describa por lo menos 2 métodos del objeto location 15. De una reseña de las versiones de JavaScript 176 . porque 2. no. si. Describa por lo menos 6 eventos de JavaScript 21. Describa por lo menos 5 métodos del objeto windows 11. ¿Como se define una variable en JavaScript? 5. Describa por lo menos 5 propiedades del objeto location 14. Describa por lo menos 3 métodos del objeto history 17. ¿Como se define el tipo de una variable en JavaScript? 6.PREGUNTAS 1. Explique como se lleva a cabo el proceso de validación de un formulario con JavaScript 22. Describa por lo menos 5 propiedades del objeto Windows 10.

Consulta.EJERCICIOS PROPUESTOS 1. para cada uno de los formularios de los procesos de Inserción. Eliminación y Actualización de al menos dos tablas del caso de estudio presentado en el capitulo 2 y 3 177 . Implementar las validaciones necesarias utilizando JavaScript.

5 Servicios Web XML. 178 .

eXtensible Markup Language Es un subconjunto simplificado del SGML el cual fue diseñado principalmente para documentos Web. El HTML tiene por objeto mostrar información. tales como:       XML (Extensible Markup Language SOAP (Simple Object Access Protocol) XML-RPC (XML Remote Procedure Call): WSDL (Web Services Description Language): UDDI (Universal Description. Este concepto es importante tenerlo en cuenta. Los sitios Web creados en diferentes lenguajes de programación operando sobre diferentes sistemas operativos pueden utilizar los servicios Web para intercambiar datos en redes de computadoras como Internet. y la interpretación de datos entre aplicaciones y entre organizaciones. habilitando la definición. transmisión.5.0" encoding="UTF-8"?> <productos> <producto> <id_pro>DD40G</id_pro> <nombre>DISCO DURO</nombre> <precio>500</precio> </producto> <producto> <id_pro>MOOP</id_pro> <nombre>MOUSE</nombre> <precio>70</precio> </producto> </productos> 179 . Discovery and Integration): WS-Security (Web Service Security): XML . ya que muchos piensan que es el sucesor de HTML. validación. Ejemplo de un documento XML sobre información de autos: <?xml version="1.1 VISIÓN GENERAL DE SERVICIOS WEB XML. Para mejorar la interoperabilidad entre distintas implementaciones de servicios Web se ha creado el organismo WS-I (Web Services Interoperability). Permite a los diseñadores crear sus propias “etiquetas” (Ej: <productos>). Las organizaciones OASIS (Organization for the Advancement of Structured Information Standards) y W3C son los comités responsables de la arquitectura y reglamentación de los servicios Web. La interoperabilidad se consigue mediante la adopción de estándares abiertos. encargado de desarrollar diversos perfiles para definir de manera más exhaustiva estos estándares. Un servicio Web es un conjunto de protocolos y estándares que sirven para intercambiar datos entre aplicaciones. mientras que el XML se ocupa de la información propiamente dicha (el contenido). Un aspecto importante es que el HTML y el XML tienen funciones diferentes.

han sido CORBA (Common Object Request Broker Architecture) de OMG. sin embargo. Es como en HTML la etiqueta <HTML> . Estas tecnologías han probado ser efectivas para el establecimiento de sitios Web corporativos. así como el lenguaje de programación.0" encoding="UTF8"?> <productos> <producto> <id_pro>DD40G</id_pro> <nombre>DISCO DURO </nombre> <precio>500</precio> <productos> <producto> <id_pro>DD40G</id_pro> <nombre>DISCO</nombre> <precio>500</precio> </producto> </productos> Todo documento XML debe comenzar indicando que es un documento XML. la versión del mismo y su codificación. </producto> ). COM (Component Object Model) de Microsoft y EJB (Enterprise JavaBeans). la dependencia a la arquitectura de trabajo. 180 .. los cuales contienen los datos para un producto en particular. nombre. Todos los elementos a partir de aquí son definidos por el usuario. y <precio>). Cada una de estas tecnologías proporciona un marco de trabajo para la activación de objetos remotos.<?xml version="1. Hoy en día existe una tendencia muy marcada en las empresas por el desarrollo de aplicaciones que trabajen sobre Internet. Esto es una exigencia del XML. <nombre>. Luego se define una etiqueta <producto> el cual contendrá un producto en particular (en este caso solo incorpore 3 características de un producto: id_producto. mediante la solicitud a un servidor de aplicaciones o mediante un servidor Web para la ejecución de servicios de aplicación. 5. Se lo conoce generalmente como raiz del documento. y precio). El XML provee muchas otras posibilidades como puede ser que las etiquetas tengan atributos <producto color=‛azul‛> . que dentro de el se encuentran las demás etiquetas. En el documento se puede apreciar que todas las etiquetas que son abiertos <id_pro>deben ser cerrados </id_pro>. Se definen 3 etiquetas (<id_pro>.2 TECNOLOGÍAS SUBYACENTES. Es por eso que se utiliza la etiqueta <?xml . principalmente por la ventaja de la distribución global de la información. </HTML>.. Luego se indica una etiqueta raiz <productos>) el cual contendrá a los demás elementos. ?> . Las tecnologías más usadas para el desarrollo de estas aplicaciones... pero no nos detendremos en ellas ya que la idea es simplemente ofrecer los conceptos básicos para conocer de que se trata el mundo de los Web. presentan algunas desventajas como la falta de interoperabilidad..

2. hace uso del servicio de búsqueda provisto por Google a través de sus APIs SOAP. en una estructura que contiene el resultado del método invocado La ventaja de SOAP frente a las tecnologías subyacentes es que es más sencillo de implementar y dado que es XML vía HTTP el vocabulario y el método de transporte son comunes en la actualidad Para poder utilizar SOAP en un lenguaje de programación por el lado del servidor se debe usar alguna librería disponible que implemente el estándar. WSDL 1.1 y HTTP 1. IBM y otros al Consorcio WWW (W3C) que permite la comunicación y la interoperabilidad entre diversas aplicaciones Web desarrolladas bajo tecnologías diferentes. como HTML y XML.net/projects/nusoap/). SOAP en PHP Para usar el estándar SOAP en php se puede realizar de dos formas:  Utilizando la librería NuSOAP  Utilizando las funciones nativas de PHP5 Utilizando la librería NuSOAP NuSOAP es un kit de herramientas para desarrollar Servicios Web bajo el lenguaje PHP. 181 . Son muy básicos justamente para mostrar lo sencillo que es empezar a usar esta tecnología. La respuesta a este requerimiento se empaqueta de la misma forma. el nombre del método que se invoca y opcionalmente una serie de parámetros con tipos definidos. La elección de HTTP como transporte se debe a que es el transporte más usado. NuSOAP está basado en SOAP 1.1 SOAP Se conoce como Protocolo Simple de Acceso a Objetos. licenciada bajo LGPL y disponible en sourceforge ( http://sourceforge. y si una organización de cualquier tipo provee una sola salida o conexión con el mundo exterior (Internet) lo más probable es que sea HTTP El protocolo define una estructura en el que se empaqueta el requerimiento donde se especifica el destinatario de la llamada.1. Está compuesto por una serie de clases que permiten fácilmente el desarrollo de Servicios Web.1 El siguiente ejemplo usa la librería NuSOAP.0/1. aunque actualmente el transporte usado es HTTP. Provee soporte para el desarrollo de clientes (aquellos que consumen los Servicios Web) y de servidores (aquellos que los proveen). para implementar un cliente SOAP para Google. es un protocolo estándar propuesto por Microsoft. se pueden crear programas que realicen las búsquedas periódicamente en lugar de hacerlas de forma manual.5. El protocolo SOAP esta construido sobre XML y solo describe el formato de los mensajes dejando abierta la posibilidad de usar varios transportes. desarrollada por la empresa NuSphere.

"</strong><br>". $PaginaInicio = 0. $buscar=$_POST[buscar]. $PaginaInicio. //Muestra descripción list($k.php'). } } ?> </body> </html> Para poder probar este ejemplo se requiere haber descargado la librería NuSOAP y ubicarla en la carpeta “nusoap/” como lo indica la línea de código require_once('nusoap/nusoap. ''. //Muestra URL echo "<strong>". false.$el['URL']. 5. //Procesa y muestra los resultados $lst2 = $Resultado['resultElements']. // Licencia de Google para poder tener acceso $key = 'iwnUXUtHj3bteg5FWfBJDwui3SPeB+iy'. y esta limitada a 1000 consultas por día. => => => => => => => => => => $key. //Variable de formulario //$buscar= "Servicios Web". 182 .php--> <html> <head> <title>Cliente SOAP para Google</title> </head> <body> <?php require_once('nusoap/nusoap. $el) = each($lst2).google.$parametros. $buscar. //Asigna a $e1 el siguiente valor del arreglo $i++. //Se puede descomentar para no requerir formulario echo "Resultados de la cadena de busqueda: <h2>$buscar</h2>". esta cuenta tiene una clave como la que se muestra en la línea de código $key = 'iwnUXUtHj3bteg5FWfBJDwui3SPeB+iy'. $el) = each($lst2). por lo que el acceso puede no ser permitido si se rebasa el limite. Google requiere que cada usuario de su servicio Web tenga una cuenta en su sitio para tal fin. '' $ClienteSOAP = new soapclient('http://api."<br>". while($el) { echo "$i <a href=". ''. $Resultado = $ClienteSOAP->call('doGoogleSearch'.<!--buscar.php'). $parametros = array( 'key' 'q' 'start' 'maxResults' 'filter' 'restrict' 'safeSearch' 'lr' 'ie' 'oe' ).com/search/beta2'). //Muestra Titutlo echo $el['snippet']."</a><br>".">". ''. if(is_array($lst2)) { list($k.$el['title'].$el['title']. $i = 1. 'urn:GoogleSearch'). false.

guardando el resultado en la variable $Resultado. maps. la enciclopedia libre Servicio web ..ini.Wikipedia. Utilizando las funciones nativas de PHP5 Para poder utilizar las funciones SOAP nativas de PHP se debe habilitar la extensión extension=php_soap. the free encyclopedia Web service .NOTICIAS SERVICIOWEB . Es decir si se va a utilizar nuSOAP se debe verificar que la extensión SOAP de PHP 5 este deshabilitada en el archivo php. 183 ..NOTICIAS portal de noticias. 2 Web service . turismo Mapas de las Regiones de Chile. .. 3 SERVICIOWEB . . Web service) es un conjunto de protocolos y estándares que sirven para intercambiar datos entre aplicaciones. the free encyclopedia A Web Service (also Webservice) is defined by the W3C as "a software system designed to support interoperable machine-to-machine interaction over a network... revista entretenida con Cocina Chilena.dll en el archivo php. Se debe tener en cuenta que la librería nuSOAP no funciona correctamente si se tiene habilitada la extensión SOAP nativa de PHP 5. inicializa los parámetros del servicio ofrecido por Google y realiza la búsqueda. se recomienda al estudiante explorar cada uno de ellos para poder implementar sus propios servicios y clientes SOAP con nuSOAP. .ini. Con el uso de las funciones SOAP nativas de PHP se consigue máxima transparencia para el programador en el momento de crear los servicios y clientes Web. solo verificar que no tenga el punto y coma al inicio de la línea.Wikipedia. En la carpeta “/ejemplos nusoap” de este capitulo se encuentran 30 ejemplos de aplicación de SOAP que vienen con la librería nuSOAP durante su descarga. la enciclopedia libre Un servicio web (en inglés.. Efemérides.Wikipedia.Canciones. En la siguiente tabla se muestran las funciones de la extensión SOAP de php.Wikipedia. posteriormente este es procesado para mostrar los resultados retornados por Google tal y como se muestra si la variable $buscar = "Servicios Web": Resultados de la cadena de búsqueda: Servicios Web 1 Servicio web .El cliente Web del código anterior recibe una variable de un formulario que contendrá la cadena de búsqueda. juegos online.

1.wsdl"). //se implementa la función function hola($nombre) { return 'Hola. <!-..Funciones SOAP de PHP 5 El siguiente ejemplo utiliza las funciones SOAP nativas de php para implementar un servicio SOAP mediante el uso de la función hola($nombre) para mostrar un saludo a un nombre que reciba como parámetro.. $servidor->handle(). ?> </body> </html> //Agrega la función //Activa el servicio 184 . ' .SoapClient Constructor SoapClient->__construct() Construye un nuevo objeto SoapClient Llama una función SOAP (obsoleto) Realiza una petición SOAP Devuelve una lista de funciones SOAP Devuelve la última petición SOAP Devuelve las cabeceras de la última petición SOAP Devuelve la última respuesta SOAP Devuelve las cabeceras de la última respuesta SOAP Devuelve la lista de tipos SOAP Define la cookie que será enviada con la petición SOAP Llama una función SOAP Construir un nuevo objeto SoapFault Construir un nuevo objeto SoapHeader Construir un nuevo objeto SoapServer Agrega una o varias funciones para manejar peticiones SOAP Devuelve la lista de funciones definidas Maneja una petición SOAP Define una clase que manejará peticiones SOAP Define el modo de persistencia de SoapServer Métodos SoapClient->__call() SoapClient->__doRequest() SoapClient->__getFunctions() SoapClient->__getLastRequest() SoapClient->__getLastRequestHeaders() SoapClient->__getLastResponse() SoapClient->__getLastResponseHeaders() SoapClient->__getTypes() SoapClient->__setCookie() SoapClient->__soapCall() SoapFault Constructor SoapFault->__construct() SoapHeader SoapHeader->__construct() SoapServer Constructor SoapServer->__construct() Métodos SoapServer->addFunction() SoapServer->getFunctions() SoapServer->handle() SoapServer->setClass() SoapServer->setPersistence() Tabla 5.Server PHP.php --> <html> <head> <title>Servicio SOAP con funciones Nativas de PHP</title> </head> <body> <?php $servidor=new SoapServer("iti. } // Se añade la función $servidor->addFunction("hola"). $nombre.

En un caso práctico la función debería ser más compleja como buscar información de una base de datos y retornarla al cliente que la solicite. UDDI utiliza WSDL para describir las interfaces de los Web Services. 185 . Es un protocolo basado en XML que describe los accesos al Servicio Web. al cual se le pasa como parámetro el archivo WSDL que el proveedor del servicio Web tiene disponible para los clientes. y requerimientos en un formato reconocido universalmente. Es decir. este archivo. se crea el objeto $servidor utilizando el constructor de la librería SOAP de PHP. es el manual de operación del Servicio Web. indica a la computadora que lo consulta.3 UDDI Es un modelo de directorios para Servicios Web. print_r($resultado). ?> En primer lugar se requiere de la instancia de un objeto de la clase SoapClient. ubicación. El servidor que pretenda ofrecer servicios Web requiere de un archivo WSDL. se visualizará la cadena “Hola María”.2.Iniciando el código de PHP. Así de fácil es ofrecer un servicio Web. porque indica cuales son las interfaces que provee el Servicio Web y los tipos de datos necesarios para la utilización del mismo. No sólo indica cuales dispone.2. El cliente Web que use el servicio Web anterior podría usar un código parecido al siguiente: <?php $cliente = new new SoapClient("iti. posteriormente se llama a la función hola con el método __soapCall() pasándole el par: índice valor. Así mismo el servicio Web en lugar de contar con solamente una función podría contar con varias. recibe como parámetro la variable $nombre y retorna la cadena “Hola” concatenado con la variable que recibió como parámetro. se debe considerar que el constructor cuenta con otras formas de instanciarse. array('nombre' => 'Maria')). sus capacidades. La estructura y demás detalles del estándar WSDL se encuentran en http://www. finalmente se pone en funcionamiento el servicio con el método handle(). pero ilustrativa. Es una especificación para mantener directorios estandarizados de información acerca de los Servicios Web. 5. para poder invocarlos usando los parámetros adecuados. como resultado final. Así de fácil es implementar clientes Web con funciones nativas de PHP 5. qué servicios dispone en su sitio.w3. pasándole como parámetro el nombre del archivo WSDL.2 WSDL Es el lenguaje de definición de servicios Web. la función hola() es muy simple. sino que además da una referencia precisa sobre ellos. $resultado=$cliente->__soapCall("hola".org/TR/wsdl 5.wsdl"). en formato XML.

también es importante crear un archivo WSDL que contenga la descripción de las funciones disponibles.org/ Pila de Interoperabilidad de Servicio Web 5. UDDI es un Servicio Web en línea que se puede utilizar desde las aplicaciones para descubrir de forma dinámica otros servicios en línea. que es UDDI (Universal Description Discovery Integration) cerca de 7000 empresas se han registrado en el directorio UDDI. UDDI (Universal Description. en primer lugar se debe tener un fin o razón para consumirlos. Discovery and Integration) SOAP (Simple Objet Access Protocol) XML (eXtensible Markup Language) Protocolos Comunes de Internet (HTTP. La publicación de un servicio Web requiere en primer lugar la creación del servicio por medio de una o más funciones.En la siguiente figura se muestra su relación con SOAP y WSDL. Para consumir servicios Web.3 Publicación de un servicio WEB. existe el concepto equivalente a nivel de Servicios Web. TCP/IP) Tabla 5. Fig. el UDDI es una especificación para un registro distribuido de información sobre servicios Web. como puede ser las funciones disponibles por nuSOAP o usando las funciones nativas de PHP.. 5. 5. todos ellos perfectamente integrados en una interfaz XML simple.4 Consumo de un servicio WEB.2.xml. En pocas palabras.Pila de protocolos de servicios Web Al igual que en la Web se tienen buscadores como Google. que nos llevan a las páginas que nos interesan. así como los parámetros para su invocación y el tipo de dato que retornará.1 Relación entre los servicios Web En la siguiente tabla se muestra la ubicación del UDDI en el contexto del resto de protocolos en la pila de interoperabilidad de servicios Web. dentro de las razones se podrían listar los siguientes: 186 . usando una librería especifica. el sitio oficial de UDDI es http://uddi.

    Búsqueda de temas nuevos en portales conocidos como buscadores Conocer en tiempo real el estado del tiempo de nuestra cuidad Conocer en tiempo real algunas variables económicas.2. Cuando existe la razón para consumir servicios Web. extrayendo del sitio el archivo WSDL que permita conocer en detalle la interfaz del servicio.1. como tipo de cambio Obtener regalías por concepto de venta de productos o artículos cuando el usuario los adquiera desde nuestro portal  Extraer datos de una base de datos de un sitio externo. 187 . finalmente se procede a la programación del cliente Web utilizando la librería que se tenga disponible o que más convenga. el siguiente paso es investigar quien lo ofrece para poder utilizarlo. tal y como se mostró en el tema 5.

¿Dónde se encuentra WSDL en la pila de protocolos de servicios Web 17. ¿Cuál es la ventaja de los servicios Web sobre las tecnologías subyacentes? 7. Según el caso de estudio en desarrollo. porque 12. ¿Qué es un servicio Web? 2. además escribir el archivo WSDL. Mencione por lo menos tres razones para consumir servicios Web EJERCICIOS PROPUESTOS 1. no. programar con SOAP un servicio Web Servidor que retorne una porción de datos de su base de datos para los clientes Web que lo requieran. Mencione por lo menos cinco estándares para los servicios Web 3. ¿Qué es WSDL? 14. Muestre la relación entre SOAP.PREGUNTAS 1. ¿SOAP solamente se puede implementar en PHP?. Según el caso de estudio en desarrollo. Explique de manera general como se programa un servicio Web SOAP servidor 13. si. Implementar el cliente Web SOAP que demuestre la funcionalidad del servicio Web servidor implementado en la pregunta anterior. ¿Cómo se puede implementar SOAP en PHP? 10. ¿Qué es SOAP? 8. ¿Qué es UDDI? 15. buscar que servicio Web cliente podría consumir de algún otro sitio externo y programarlo utilizando SOAP 2. ¿Es posible utilizar simultáneamente diferentes librerías SOAP en PHP? Si. ¿Cuál es la diferencia fundamental entre XML y HTML? 4. porque 9. ¿Cuáles son las tecnologías que se consideran como subyacentes? 6. UDDI y WSDL 16. no. 188 . Explique de manera general como se programa un servicio Web SOAP cliente 11. 3. Proporcione un ejemplo de código XML 5.

También es importante construir la base de datos hallado en la carpeta Caso de estudio/bd/ en el archivo ventas.sql en el directorio donde se encuentra el cliente MySQL.Anexo A. ejecutar la interfaz de comando y ubicarse en la misma carpeta para procesar el archivo de la siguiente forma: mysql -uroot <ventas. Consta de una página de bienvenida accesible por cualquier usuario. una plantilla para los usuarios no registrados. 189 . y una vez que se hallan autenticado podrán modificar sus datos personales. etc. entre los que se pueden mencionar.exe que se encuentra en la carpeta /utililerias del disco anexo. Para crear la base de datos se deberá copiar el archivo ventas. otra para los clientes y una más para los administradores.51b\bin). su contraseña. o filtrarlos en función de la categoría a la cual pertenecen Ventas en línea maneja como medidas de seguridad. PHP y MySQL. reportes con PDF. envío de datos a formularios con los métodos POST y GET. validación de los datos del formulario usando eventos de Java Script.0.  Administradores: Podrán cambiar sus datos personales.sql Después de unos segundos la base de datos se creará y podrá ser utilizada..0c. modificar. programación con HTML.Programación de un caso de estudio VENTAS EN LINEA Es una pequeña aplicación Web dinámica de venta de productos de computación en línea creado para ilustrar los conocimientos que se adquieren durante un curso de Programación Web. Cuenta con dos tipos de usuarios:  Clientes: Los clientes pueden registrarse si no se encuentran registrados. (por defecto en c:\wamp\bin\mysql\mysql5. En su implementación se usan tres plantillas. ver. programación en PHP con acceso a base de datos. la autenticación. estos se pueden encontrar en la carpeta /Templates del disco anexo. manejo de formularios y objetos de formulario. su contraseña. el manejo de sesiones y la encriptación de la contraseña de los usuarios en el momento de su autenticación. Este archivo es el escript MySQL de todas las tablas que conforman la base de datos. comprar los productos en existencia y ver las facturas que se le hallan emitido. como son: Apache. así como un conjunto de registros que permitirán su utilización inmediata. agregar.sql . este instalará los servicios requeridos. donde se pueden conocer los productos que se encuentran en promoción. Para ponerlo en funcionamiento basta con instalar el programa WampServer2. eliminar a los clientes y productos registrados y ver e imprimir todas las facturas que se hayan emitido con sus respectivos detalles en formato PDF.

pu) administradores (id_ad.auto_start = 1 hallado en el archivo php. Los detalles de la base de datos son los siguientes:  Modelo Entidad – Relación        Conjunto de tablas de la base de datos: categoria(id_cat. nombre. dir. tel) factura (id_fac. id_pro.Para poder utilizar el manejo de sesiones se deberá fijar la variable session.ini Con lo anterior ventas en línea esta listo para probarse. clave. tel)  Diccionario de datos: categoria CAMPO TIPO LONGITUD DESCRIPCION LLAVE Id_cat V 10 Clave de la categoría * Descripcion V 30 Descripcion de la categoría producto CAMPO TIPO LONGITUD DESCRIPCION LLAVE 190 . Descripcion) producto (id_pro. preciov. fecha) ventas (id_clie. dir. id_fac. precio. cantc. clave. id_cat) clientes (id_clie. nom. existencia. nom.

ventas CAMPO TIPO LONGITUD DESCRIPCION LLAVE id_clie V 13 Clave del cliente * id_pro V 10 Clave del producto * Id_fac I Numero de factura * cantc S Cantidad de compras pu F Precio unitario administradores CAMPO TIPO LONGITUD DESCRIPCION LLAVE id_ad V 13 Clave del cliente * clave V 40 Contraseña de acceso nom V 40 Nombre del proveedor dir V 30 Dirección del proveedor tel V 15 Teléfono del proveedor Donde: V=varchar I=int S=smallint T=tinyint F=float D=date 191 .de comp. de la fact. * id_fac I fecha D Fecha expedicion de fac.Id_pro nombre precio existencia preciov Id_cat Jpg promocion clientes V V F S F V V T 10 30 10 30 Clave del producto Descripcion del producto Precio de compra Existencia Precio de venta Clave de la categoría Archivo JPG Indica si esta en promosión * CAMPO TIPO LONGITUD DESCRIPCION LLAVE id_clie V 13 Clave del cliente * clave V 40 Contraseña de acceso nom V 40 Nombre del proveedor dir V 30 Dirección del proveedor tel V 15 Teléfono del proveedor factura Llave campo Tipo Longitud Descripcion Num.

create table categoria (id_cat varchar(10). nombre varchar(40). primary key (id_pro). use ventas. dir varchar(30). Descripcion varchar(49). foreign key (id_cat) references categoria(id_cat) ). CREATE DATABASE ventas. create table administradores ( id_ad varchar(13). preciov float. id_fac int. foreign key (id_fac) references factura(id_fac) ). nom varchar(40). primary key (id_clie) ).id_pro. promocion tinyint. Script MySQL: DROP DATABASE IF EXISTS ventas. jpg varchar(30). id_cat varchar(10). create table factura ( id_fac int not null. id_pro varchar(10).id_fac). cantc smallint. fecha DATE NULL. pu float. clave varchar(40). existencia smallint. create table producto ( id_pro varchar(10) not null. foreign key (id_pro) references producto(id_pro). nom varchar(40). primary key(id_cat) ). primary key(id_fac) ). tel varchar(15). primary key (id_clie. foreign key (id_clie) references clientes(id_clie). precio float. create table clientes ( id_clie varchar(13). 192 . create table ventas ( id_clie varchar(13). clave varchar(40). dir varchar(30).

'tarmadre.'270'.sha1('iti').'830'.jpg'.'1'.'SOF'. insert clientes values('MLF'.'810').'VIDEO').jpg'.jpg'.'11'. 193 .'0').'9717114526').'55').'ruteador. values('ALM'.'GASTON DEHESA VALENCIA'.sha1('iti').'04/05/08'). insert insert insert insert insert insert insert categoria categoria categoria categoria categoria categoria categoria values('HAR'.'VID'. insert clientes values('JTL'.'switch. insert ventas values('GDV'. insert producto values('RUTE'.'HAR'. insert producto values('CAWEB'.'PEDRO TOLEDO GARCIA'.'1450'. insert administradores VICTORIA'.'ALM'.'870'.'7'.'9500'.'5950'.'PIPIV'.'0'). insert producto values('TMAD'.jpg'.'ACC'.'SOFTWARE').'dd80g.'TECLADO USB NEGRO'.'1'.'10'. insert producto values('LTOP2'.'11700'. insert producto values('PROY'.'iti'. insert ventas values('GDV'.'1').'ALM'.'PROCESADOR INTEL PENTIUM IV 3 GHZ'.'5400'. values('SOF'.'1600'.'QUEMADOR DE DVD 16X'.'1').'POR'.'9717114526').'200'. insert producto values('LTOP'. values('AD1'. primary key (id_ad) ).'1'.'DISCO DURO MAXTOR DE 250 GBYTES IDE A 7200RPM'. insert producto values('QUEDVD'.'1').'fpoder. JUAREZ.'1'). insert factura values('1'.'moop.'15'.'12340'.jpg'.'1').'laptop2.'TARJETA MADRE DUALCORE/2DUO'.'HAR'.'MOUSE OPTICO.'ALMACENAMIENTO').'2'.'CAMARA WEB INALAMBRICA'.'0').'573'.'DISCO DURO SEAGATE DE 80 GBYTES IDE A 7200RPM'.'1').'10430'.'0'). values('VID'.'510'.'pipiv.'1').11G'.'quedvd.'950'. insert producto values('WVIS'.'4'.'190'.'MOOP'.'615'.jpg'.jpg'.'13'.'PORTATILES').'3'.'5000'. values('ACC'. insert ventas values('JTL'. insert clientes values('GDV'.'HARDWARE').'04/05/08').jpg'.'5'.'proyector.'HAR'.'camweb.'759'. ESPINAL.'1').'DD40G'. insert producto values('FPOD'.sha1('iti').'1').'687'.'705'.'0').'ACC'. OAX.'20'.'2'.jpg'.jpg'.'5'.jpg'.'55'.'RED'.'0').'RUTEADOR INALAMBRICO 802. values('POR'.'C. VICTORIA'.tel varchar(15).'dd250g.jpg'.'500'.'wvista.'WINDOWS VISTA EN ESPAÑOL'. values('RED'.'40'.'ACCESORIOS').'PORTATIL CORE 2 DUO'. insert factura values('2'.'7'.'.jpg'.'AV.'20'.'FUENTE DE PODER 450 WATS'.'SWITCH DE 24 PUERTOS 10/100'.'5450'.'RED'. insert producto values('DD40G'.jpg'. USB. insert producto values('MOOP'.'VID'.'9717113210').'REDES').1 PULG'.'9717131056').'PROYECTOR DE 2200 LUMENES'. insert producto values('DD80G'.'laptop1.'GPE.'POR'.'700'.'teclado.'ALM'.'GPE.'30'.'14'.'1300'.jpg'.'15'. insert producto values('PIPIV'.'MINI PORTATIL 10.'810'.'1740'. insert producto values('TECl'. 5 DE MAYO JUCHITAN'. PLATEADO '.'759').'140'.'JORGE TOLEDO MATUS'. insert producto values('SWIT'.'MARIA LOPEZ FUENTES'.'16'.

 Pantallas principales para cada tipo de usuario Para tener una idea de la distribución del diseño del sitio Web se muestran solamente las siguientes tres pantallas principalas: 194 .* TO alumnos@localhost IDENTIFIED BY 'iti'. values('AD2'.'JOSE TOLEDO FUENTES'.  Estructura de directorios La aplicación Web esta programado y organizando de tal forma que las paginas Web sean facilmentelas localizados y analizados según la siguiente estructura de directorios. etc.  En la raíz se encuentran las paginas Web genericas y las del usuario no registrado  En /administradores se encuentran todas las paginas Web que corresponden al ususarrio administrador  En /bd se encuentra la descripción de la base de datos y el script MySQL para su construcción con el cliente MySQL. botones.'9717114526'). imagenes de productos.'GPE.exe  En /clientes se encuentran todas las paginas Web que corresponden al ususarrio cliente  En /fondos algunas imagenes que se pueden utilizar como fondos de las páginas  En /imageness se encuentran todas las imagenes utilizados por el sitio como logotipo.insert administradores VICTORIA'. GRANT ALL PRIVILEGES ON ventas.sha1('iti').

Para usuarios no registrados Para usuarios Clientes Para usuario Administradoras Se recomienda instalar y revisar el cógido fuente hallado en las carpetas indicadas para comprender con mayor detalles sobre la funcionalidad del sitio. 195 .