Antologia de Programacionweb

Instituto Tecnolgico Superior de Coatzacoalcos
Ingeniera en Sistemas Computacionales
ANTOLOGA
Programacin Web
Elaborado por:
Apellido Paterno Apellido Materno Nombre(s)
Ing. Jos Roberto Ramrez Guerrero
Coatzacoalcos, Ver. 2010
Unidad:
Instituto Tecnolgico superior de Coatzacoalcos.
Edicin No. 1
Fecha de Edicin: 2010
Departamento: Materia:
Ingeniera Sistemas Computacionales. Programacin Web
Introduccin
Con la creacin de Internet, se ha creado un medio para el desarrollo de aplicaciones en ese medio, hoy en da la buena parte de la poblacin, hace uso de las pginas Web y de sus aplicaciones, de ah nace tambin la necesidad de poder tener una pgina, y brindar servicios a travs de la Web. La tecnologa con el pasar del tiempo ha sufrido transformaciones que muchas veces son de gran ayuda para el mundo ciberntico; un ejemplo claro son los lenguajes de programacin, los cuales han ido evolucionando, y en el desarrollo Web no es la excepcin. En esta antologa veremos los elementos necesarios para que el alumno pueda desarrollar aplicaciones Web de una manera fcil y rpida.
II
Unidad:
Edicin No. 1
INTRODUCCIN INDICE JUSTIFICACIN OBJETIVO GENERAL
II III V VI
UNIDAD I. Introduccin a las tecnologas Web.. 1.1 Perspectiva histrica del Internet . .... 1 1.2. Protocolo http (protocolo de transferencia de hipertexto)... 13 1.2.1 Arquitectura del WWW.. 22 1.2.2 URLs.... 23 1.2.3 Mtodos http. .. 25 Persistencia en http Cookies. 1.3 Introduccin al HTML. .. 29 Lenguaje de despliegue del web 1.3.1 HTML como un tipo SGML... 33 1.3.2 Elementos del lenguaje HTML......35 1.3.3 Tablas en HTML...... 58 1.3.4 Formularios62 1.4 Evolucin del desarrollo de aplicaciones Web69 1.5 Hojas de estilo en cascada e introduccin al XML.76
UNIDAD II. Desarrollo de aplicaciones Web. 2.1 2.2 2.3 2.4 2.5 2.6 Arquitectura de las aplicaciones Web80 Lenguajes de programacin del lado del cliente. 82 Lenguajes de programacin del lado del servidor.. 85 Ambientes para el desarrollo de aplicaciones Web 87 Metodologas para el desarrollo de aplicaciones Web.. .88 Aspectos de seguridad.90
UNIDAD III. Programacin del lado del servidor. 3.1Procesamiento del lado del servidor.94
III
Unidad:
Edicin No. 1
3.2 Conceptos bsicos de la herramienta de desarrollo.94 3.3 Operadores..97 3.4 Sentencias...98 3.5 Arreglos100 3.6 Funciones y libreras 104 3.7 Ejemplos prcticos.109 3.8 Procesado de formularios.112 3.9 Sesiones..116 3.10 Conectividad entre el servidor Web y el servidor de base de datos117 3.11 Manejo de archivos.119 3.12 Seguridad..121 UNIDAD IV. Procesamiento del lado del cliente 4.1 4.2 4.3 4.4 4.5 4.6 Lenguaje Script del cliente.123 Modelo de objetos con lenguaje Script124 Objetos lenguaje Script nter construidos125 Eventos con lenguaje Script..133 Validacin de entrada de datos del lado del cliente.. 136 Consideraciones del soporte del navegador...138
UNIDAD V. Servicios Web XML 5.1 Visin general de servicios Web XML. 140 5.2 Tecnologas subyacentes.141 5.2.1 SOAP142 5.2.2 WSDL143 5.2.3 UDDI..144 5.3 Publicacin de un servicio WEB145 5.4 Consumo de un servicio WEB146 Conclusin .149 Fuentes Consultadas 151
IV
Unidad:
Edicin No. 1
Justificacin
La presente antologa pretende ser una herramienta para facilitar al estudiante, el acceso al conocimiento y estudio del manejo de los lenguajes de programacin web, pretende ser de apoyo en la formacin e investigacin de las unidades temticas, beneficiando al alumno que la utilice, porque ya no se atendrn a las explicaciones en clase, sino que con esta herramienta podrn repasar y adelantar los temas de acuerdo a sus aptitudes y capacidades.
Esta antologa ha sido desarrollada basndonos en informacin actual, adems de que ha sido construida de manera accesible, de tal forma que nuestros, puedan utilizarla de manera fluida. Ser tambin esta antologa, un instrumento de referencia para el alumno, al abordar los temas de cada unidad.
Unidad:
Edicin No. 1
Objetivo general
El estudiante conocer los conceptos de comunicacin de Internet, y desarrollar aplicaciones de base de datos basadas en Web desde el lado del servidor y del cliente
VI
Unidad:
Edicin No. 1
Ingeniera Sistemas Computacionales.
Programacin Web
UNIDAD I. Introduccin a las tecnologas Web. Objetivo: El estudiante comprender las caractersticas de una aplicacin Web y conocer los elementos que interactan con ella. 1.1 Perspectiva histrica del Internet.
Internet surgi de un proyecto desarrollado en Estados Unidos para apoyar a sus fuerzas militares. Luego de su creacin fue utilizado por el gobierno, universidades y otros centros acadmicos. Internet ha supuesto una revolucin sin precedentes en el mundo de la informtica y de las comunicaciones. Los inventos del telgrafo, telfono, radio y ordenador sentaron las bases para esta integracin de capacidades nunca antes vivida. Internet es a la vez una oportunidad de difusin mundial, un mecanismo de propagacin de la informacin y un medio de colaboracin e interaccin entre los individuos y sus ordenadores independientemente de su localizacin geogrfica. Orgenes de Internet La primera descripcin documentada acerca de las interacciones sociales que podran ser propiciadas a travs del networking (trabajo en red) est contenida en una serie de memorndums escritos por J.C.R. Licklider, del Massachusetts Institute of Technology, en Agosto de 1962, en los cuales Licklider discute sobre su concepto de Galactic Network (Red Galctica). El concibi una red interconectada globalmente a travs de la que cada uno pudiera acceder desde cualquier lugar a datos y programas. En esencia, el concepto era muy parecido a la Internet actual. Licklider fue el principal responsable del programa de investigacin en ordenadores de la DARPA desde Octubre de 1962. Mientras trabaj en DARPA convenci a sus sucesores Ivan Sutherland, Bob Taylor, y el investigador del MIT Lawrence G. Roberts de la importancia del concepto de trabajo en red. En Julio de 1961 Leonard Kleinrock public desde el MIT el primer documento sobre la teora de conmutacin de paquetes. Kleinrock convenci a Roberts de la factibilidad terica de las comunicaciones va paquetes en lugar de circuitos, lo cual result ser un gran avance en el camino hacia el trabajo informtico en red. El otro paso fundamental fue hacer dialogar a los ordenadores entre s.
Unidad:
Edicin No. 1
Programacin Web
Para explorar este terreno, en 1965, Roberts conect un ordenador TX2 en Massachusetts con un Q-32 en California a travs de una lnea telefnica conmutada de baja velocidad, creando as la primera (aunque reducida) red de ordenadores de rea amplia jams construida. El resultado del experimento fue la constatacin de que los ordenadores de tiempo compartido podan trabajar juntos correctamente, ejecutando programas y recuperando datos a discrecin en la mquina remota, pero que el sistema telefnico de conmutacin de circuitos era totalmente inadecuado para esta labor. La conviccin de Kleinrock acerca de la necesidad de la conmutacin de paquetes qued pues confirmada. A finales de 1966 Roberts se traslad a la DARPA a desarrollar el concepto de red de ordenadores y rpidamente confeccion su plan para ARPANET, publicndolo en 1967. En la conferencia en la que present el documento se expona tambin un trabajo sobre el concepto de red de paquetes a cargo de Donald Davies y Roger Scantlebury del NPL. Scantlebury le habl a Roberts sobre su trabajo en el NPL as como sobre el de Paul Baran y otros en RAND. El grupo RAND haba escrito un documento sobre redes de conmutacin de paquetes para comunicacin vocal segura en el mbito militar, en 1964. Ocurri que los trabajos del MIT (1961-67), RAND (1962-65) y NPL (1964-67) haban discurrido en paralelo sin que los investigadores hubieran conocido el trabajo de los dems. La palabra packet (paquete) fue adoptada a partir del trabajo del NPL y la velocidad de la lnea propuesta para ser usada en el diseo de ARPANET fue aumentada desde 2,4 Kbps hasta 50 Kbps (5). En Agosto de 1968, despus de que Roberts y la comunidad de la DARPA hubieran refinado la estructura global y las especificaciones de ARPANET, DARPA lanz un RFQ para el desarrollo de uno de sus componentes clave: los conmutadores de paquetes llamados interface message processors (IMPs, procesadores de mensajes de interfaz). El RFQ fue ganado en Diciembre de 1968 por un grupo encabezado por Frank Heart, de Bolt Beranek y Newman (BBN). As como el equipo de BBN trabaj en IMPs con Bob Kahn tomando un papel principal en el diseo de la arquitectura de la ARPANET global, la topologa de red y el aspecto econmico fueron diseados y optimizados por Roberts trabajando con Howard Frank y su equipo en la Network Analysis Corporation, y el sistema de medida de la red fue preparado por el equipo de Kleinrock de la Universidad de California, en Los Angeles (6).
Unidad:
Edicin No. 1
Programacin Web
A causa del temprano desarrollo de la teora de conmutacin de paquetes de Kleinrock y su nfasis en el anlisis, diseo y medicin, su Network Measurement Center (Centro de Medidas de Red) en la UCLA fue seleccionado para ser el primer nodo de ARPANET. Todo ello ocurri en Septiembre de 1969, cuando BBN instal el primer IMP en la UCLA y qued conectado el primer ordenador host . El proyecto de Doug Engelbart denominado Augmentation of Human Intelect (Aumento del Intelecto Humano) que inclua NLS, un primitivo sistema hipertexto en el Instituto de Investigacin de Standford (SRI) proporcion un segundo nodo. El SRI patrocin el Network Information Center , liderado por Elizabeth (Jake) Feinler, que desarroll funciones tales como mantener tablas de nombres de host para la traduccin de direcciones as como un directorio de RFCs ( Request For Comments ). Un mes ms tarde, cuando el SRI fue conectado a ARPANET, el primer mensaje de host a host fue enviado desde el laboratorio de Leinrock al SRI. Se aadieron dos nodos en la Universidad de California, Santa Brbara, y en la Universidad de Utah. Estos dos ltimos nodos incorporaron proyectos de visualizacin de aplicaciones, con Glen Culler y Burton Fried en la UCSB investigando mtodos para mostrar funciones matemticas mediante el uso de "storage displays" ( N. del T. : mecanismos que incorporan buffers de monitorizacin distribuidos en red para facilitar el refresco de la visualizacin) para tratar con el problema de refrescar sobre la red, y Robert Taylor y Ivan Sutherland en Utah investigando mtodos de representacin en 3-D a travs de la red. As, a finales de 1969, cuatro ordenadores host fueron conectados conjuntamente a la ARPANET inicial y se hizo realidad una embrionaria Internet. Incluso en esta primitiva etapa, hay que resear que la investigacin incorpor tanto el trabajo mediante la red ya existente como la mejora de la utilizacin de dicha red. Esta tradicin contina hasta el da de hoy. Se siguieron conectando ordenadores rpidamente a la ARPANET durante los aos siguientes y el trabajo continu para completar un protocolo host a host funcionalmente completo, as como software adicional de red. En Diciembre de 1970, el Network Working Group (NWG) liderado por S.Crocker acab el protocolo host a host inicial para ARPANET, llamado Network Control Protocol (NCP, protocolo de control de red). Cuando en los nodos de ARPANET se complet la implementacin del NCP durante el periodo 1971-72, los usuarios de la red pudieron finalmente comenzar a desarrollar aplicaciones.
Unidad:
Edicin No. 1
Programacin Web
En Octubre de 1972, Kahn organiz una gran y muy exitosa demostracin de ARPANET en la International Computer Communication Conference . Esta fue la primera demostracin pblica de la nueva tecnologa de red. Fue tambin en 1972 cuando se introdujo la primera aplicacin "estrella": el correo electrnico. En Marzo, Ray Tomlinson, de BBN, escribi el software bsico de envo-recepcin de mensajes de correo electrnico, impulsado por la necesidad que tenan los desarrolladores de ARPANET de un mecanismo sencillo de coordinacin. En Julio, Roberts expandi su valor aadido escribiendo el primer programa de utilidad de correo electrnico para relacionar, leer selectivamente, almacenar, reenviar y responder a mensajes. Desde entonces, la aplicacin de correo electrnico se convirti en la mayor de la red durante ms de una dcada. Fue precursora del tipo de actividad que observamos hoy da en la World Wide Web , es decir, del enorme crecimiento de todas las formas de trfico persona a persona. Conceptos iniciales sobre Internetting La ARPANET original evolucion hacia Internet. Internet se bas en la idea de que habra mltiples redes independientes, de diseo casi arbitrario, empezando por ARPANET como la red pionera de conmutacin de paquetes, pero que pronto incluira redes de paquetes por satlite, redes de paquetes por radio y otros tipos de red. Internet como ahora la conocemos encierra una idea tcnica clave, la de arquitectura abierta de trabajo en red. Bajo este enfoque, la eleccin de cualquier tecnologa de red individual no respondera a una arquitectura especfica de red sino que podra ser seleccionada libremente por un proveedor e interactuar con las otras redes a travs del meta nivel de la arquitectura de Internetworking (trabajo entre redes). Hasta ese momento, haba un slo mtodo para "federar" redes. Era el tradicional mtodo de conmutacin de circuitos, por el cual las redes se interconectaban a nivel de circuito pasndose bits individuales sncronamente a lo largo de una porcin de circuito que una un par de sedes finales. Cabe recordar que Kleinrock haba mostrado en 1961 que la conmutacin de paquetes era el mtodo de conmutacin ms eficiente. Juntamente con la conmutacin de paquetes, las interconexiones de propsito especial entre redes constituan otra posibilidad. Y aunque haba otros mtodos limitados de interconexin de redes distintas, stos requeran que una de ellas fuera usada como componente de la otra en lugar de actuar simplemente como un extremo de la comunicacin para ofrecer servicio end-to-end (extremo a extremo).
Unidad:
Edicin No. 1
Programacin Web
En una red de arquitectura abierta, las redes individuales pueden ser diseadas y desarrolladas separadamente y cada una puede tener su propia y nica interfaz, que puede ofrecer a los usuarios y/u otros proveedores, incluyendo otros proveedores de Internet. Cada red puede ser diseada de acuerdo con su entorno especfico y los requerimientos de los usuarios de aquella red. No existen generalmente restricciones en los tipos de red que pueden ser incorporadas ni tampoco en su mbito geogrfico, aunque ciertas consideraciones pragmticas determinan qu posibilidades tienen sentido. La idea de arquitectura de red abierta fue introducida primeramente por Kahn un poco antes de su llegada a la DARPA en 1972. Este trabajo fue originalmente parte de su programa de paquetera por radio, pero ms tarde se convirti por derecho propio en un programa separado. Entonces, el programa fue llamado Internetting . La clave para realizar el trabajo del sistema de paquetera por radio fue un protocolo extremo a extremo seguro que pudiera mantener la comunicacin efectiva frente a los cortes e interferencias de radio y que pudiera manejar las prdidas intermitentes como las causadas por el paso a travs de un tnel o el bloqueo a nivel local. Kahn pens primero en desarrollar un protocolo local slo para la red de paquetera por radio porque ello le hubiera evitado tratar con la multitud de sistemas operativos distintos y continuar usando NCP. Sin embargo, NCP no tena capacidad para direccionar redes y mquinas ms all de un destino IMP en ARPANET y de esta manera se requeran ciertos cambios en el NCP. La premisa era que ARPANET no poda ser cambiado en este aspecto. El NCP se basaba en ARPANET para proporcionar seguridad extremo a extremo. Si alguno de los paquetes se perda, el protocolo y presumiblemente cualquier aplicacin soportada sufrira una grave interrupcin. En este modelo, el NCP no tena control de errores en el host porque ARPANET haba de ser la nica red existente y era tan fiable que no requera ningn control de errores en la parte de los host s. As, Kahn decidi desarrollar una nueva versin del protocolo que pudiera satisfacer las necesidades de un entorno de red de arquitectura abierta. El protocolo podra eventualmente ser denominado "Transmisson-Control Protocol/Internet Protocol" (TCP/IP, protocolo de control de transmisin /protocolo de Internet). As como el NCP tenda a actuar como un driver (manejador) de dispositivo, el nuevo protocolo sera ms bien un protocolo de comunicaciones.
Unidad:
Edicin No. 1
Programacin Web
Ideas a prueba DARPA formaliz tres contratos con Stanford (Cerf), BBN (Ray Tomlinson) y UCLA (Peter Kirstein) para implementar TCP/IP (en el documento original de Cerf y Kahn se llamaba simplemente TCP pero contena ambos componentes). El equipo de Stanford, dirigido por Cerf, produjo las especificaciones detalladas y al cabo de un ao hubo tres implementaciones independientes de TCP que podan interoperar. Este fue el principio de un largo periodo de experimentacin y desarrollo para evolucionar y madurar el concepto y tecnologa de Internet. Partiendo de las tres primeras redes ARPANET, radio y satlite y de sus comunidades de investigacin iniciales, el entorno experimental creci hasta incorporar esencialmente cualquier forma de red y una amplia comunidad de investigacin y desarrollo [REK78]. Cada expansin afront nuevos desafos. Las primeras implementaciones de TCP se hicieron para grandes sistemas en tiempo compartido como Tenex y TOPS 20. Cuando aparecieron los ordenadores de sobremesa ( desktop ), TCP era demasiado grande y complejo como para funcionar en ordenadores personales. David Clark y su equipo de investigacin del MIT empezaron a buscar la implementacin de TCP ms sencilla y compacta posible. La desarrollaron, primero para el Alto de Xerox (la primera estacin de trabajo personal desarrollada en el PARC de Xerox), y luego para el PC de IBM. Esta implementacin operaba con otras de TCP, pero estaba adaptada al conjunto de aplicaciones y a las prestaciones de un ordenador personal, y demostraba que las estaciones de trabajo, al igual que los grandes sistemas, podan ser parte de Internet. En los aos 80, el desarrollo de LAN, PC y estaciones de trabajo permiti que la naciente Internet floreciera. La tecnologa Ethernet, desarrollada por Bob Metcalfe en el PARC de Xerox en 1973, es la dominante en Internet, y los PCs y las estaciones de trabajo los modelos de ordenador dominantes. El cambio que supone pasar de una pocas redes con un modesto nmero de hosts (el modelo original de ARPANET) a tener muchas redes dio lugar a nuevos conceptos y a cambios en la tecnologa. En primer lugar, hubo que definir tres clases de redes (A, B y C) para acomodar todas las existentes. La clase A representa a las redes grandes, a escala nacional (pocas redes con muchos ordenadores); la clase B representa redes regionales;
Unidad:
Edicin No. 1
Programacin Web
por ltimo, la clase C representa redes de rea local (muchas redes con relativamente pocos ordenadores). Como resultado del crecimiento de Internet, se produjo un cambio de gran importancia para la red y su gestin. Para facilitar el uso de Internet por sus usuarios se asignaron nombres a los host s de forma que resultara innecesario recordar sus direcciones numricas. Originalmente haba un nmero muy limitado de mquinas, por lo que bastaba con una simple tabla con todos los ordenadores y sus direcciones asociadas. El cambio hacia un gran nmero de redes gestionadas independientemente (por ejemplo, las LAN) signific que no resultara ya fiable tener una pequea tabla con todos los host s. Esto llev a la invencin del DNS ( Domain Name System , sistema de nombres de dominio) por Paul Mockapetris de USC/ISI. El DNS permita un mecanismo escalable y distribuido para resolver jerrquicamente los nombres de los host s (por ejemplo, www.acm.org o www.ati.es ) en direcciones de Internet. El incremento del tamao de Internet result tambin un desafo para los routers . Originalmente haba un sencillo algoritmo de enrutamiento que estaba implementado uniformemente en todos los routers de Internet. A medida que el nmero de redes en Internet se multiplicaba, el diseo inicial no era ya capaz de expandirse, por lo que fue sustituido por un modelo jerrquico de enrutamiento con un protocolo IGP ( Interior Gateway Protocol , protocolo interno de pasarela) usado dentro de cada regin de Internet y un protocolo EGP ( Exterior Gateway Protocol , protocolo externo de pasarela) usado para mantener unidas las regiones. El diseo permita que distintas regiones utilizaran IGP distintos, por lo que los requisitos de coste, velocidad de configuracin, robustez y escalabilidad, podan ajustarse a cada situacin. Los algoritmos de enrutamiento no eran los nicos en poner en dificultades la capacidad de los routers , tambin lo haca el tamao de la tablas de direccionamiento. Se presentaron nuevas aproximaciones a la agregacin de direcciones (en particular CIDR, Classless Interdomain Routing , enrutamiento entre dominios sin clase) para controlar el tamao de las tablas de enrutamiento. A medida que evolucionaba Internet, la propagacin de los cambios en el software, especialmente el de los host s, se fue convirtiendo en uno de sus mayores desafos. DARPA financi a la Universidad de California en Berkeley en una investigacin sobre modificaciones en el sistema operativo Unix, incorporando el TCP/IP desarrollado en BBN. Aunque posteriormente Berkeley modific esta im-
Unidad:
Edicin No. 1
Programacin Web
plementacin del BBN para que operara de forma ms eficiente con el sistema y el kernel de Unix, la incorporacin de TCP/IP en el sistema Unix BSD demostr ser un elemento crtico en la difusin de los protocolos entre la comunidad investigadora. BSD empez a ser utilizado en sus operaciones diarias por buena parte de la comunidad investigadora en temas relacionados con informtica. Visto en perspectiva, la estrategia de incorporar los protocolos de Internet en un sistema operativo utilizado por la comunidad investigadora fue uno de los elementos clave en la exitosa y amplia aceptacin de Internet. Uno de los desafos ms interesantes fue la transicin del protocolo para host s de ARPANET desde NCP a TCP/IP el 1 de enero de 1983. Se trataba de una ocasin muy importante que exiga que todos los host s se convirtieran simultneamente o que permanecieran comunicados mediante mecanismos desarrollados para la ocasin. La transicin fue cuidadosamente planificada dentro de la comunidad con varios aos de antelacin a la fecha, pero fue sorprendentemente sobre ruedas (a pesar de dar al lugar a la distribucin de insignias con la inscripcin "Yo sobreviv a la transicin a TCP/IP"). TCP/IP haba sido adoptado como un estndar por el ejrcito norteamericano tres aos antes, en 1980. Esto permiti al ejrcito empezar a compartir la tecnologa DARPA basada en Internet y llev a la separacin final entre las comunidades militares y no militares. En 1983 ARPANET estaba siendo usada por un nmero significativo de organizaciones operativas y de investigacin y desarrollo en el rea de la defensa. La transicin desde NCP a TCP/IP en ARPANET permiti la divisin en una MILNET para dar soporte a requisitos operativos y una ARPANET para las necesidades de investigacin. As, en 1985, Internet estaba firmemente establecida como una tecnologa que ayudaba a una amplia comunidad de investigadores y desarrolladores, y empezaba a ser empleada por otros grupos en sus comunicaciones diarias entre ordenadores. El correo electrnico se empleaba ampliamente entre varias comunidades, a menudo entre distintos sistemas. La interconexin entre los diversos sistemas de correo demostraba la utilidad de las comunicaciones electrnicas entre personas. La transici1n hacia una infraestructura global
Unidad:
Edicin No. 1
Programacin Web
Al mismo tiempo que la tecnologa Internet estaba siendo validada experimentalmente y usada ampliamente entre un grupo de investigadores de informtica se estaban desarrollando otras redes y tecnologas. La utilidad de las redes de ordenadores (especialmente el correo electrnico utilizado por los contratistas de DARPA y el Departamento de Defensa en ARPANET) sigui siendo evidente para otras comunidades y disciplinas de forma que a mediados de los aos 70 las redes de ordenadores comenzaron a difundirse all donde se poda encontrar financiacin para las mismas. El Departamento norteamericano de Energa (DoE, Deparment of Energy ) estableci MFENet para sus investigadores que trabajaban sobre energa de fusin, mientras que los fsicos de altas energas fueron los encargados de construir HEPNet. Los fsicos de la NASA continuaron con SPAN y Rick Adrion, David Farber y Larry Landweber fundaron CSNET para la comunidad informtica acadmica y de la industria con la financiacin inicial de la NFS ( National Science Foundation , Fundacin Nacional de la Ciencia) de Estados Unidos. La libre diseminacin del sistema operativo Unix de ATT dio lugar a USENET, basada en los protocolos de comunicacin UUCP de Unix, y en 1981 Greydon Freeman e Ira Fuchs disearon BITNET, que una los ordenadores centrales del mundo acadmico siguiendo el paradigma de correo electrnico como "postales". Con la excepcin de BITNET y USENET, todas las primeras redes (como ARPANET) se construyeron para un propsito determinado. Es decir, estaban dedicadas (y restringidas) a comunidades cerradas de estudiosos; de ah las escasas presiones por hacer estas redes compatibles y, en consecuencia, el hecho de que durante mucho tiempo no lo fueran. Adems, estaban empezando a proponerse tecnologas alternativas en el sector comercial, como XNS de Xerox, DECNet, y la SNA de IBM (8). Slo restaba que los programas ingleses JANET (1984) y norteamericano NSFNET (1985) anunciaran explcitamente que su propsito era servir a toda la comunidad de la enseanza superior sin importar su disciplina. De hecho, una de las condiciones para que una universidad norteamericana recibiera financiacin de la NSF para conectarse a Internet era que "la conexin estuviera disponible para todos los usuarios cualificados del campus". En 1985 Dennins Jenning acudi desde Irlanda para pasar un ao en NFS dirigiendo el programa NSFNET. Trabaj con el resto de la comunidad para ayudar a la NSF a tomar una decisin crtica: si TCP/IP debera ser obligatorio en el pro-
Unidad:
Edicin No. 1
Programacin Web
grama NSFNET. Cuando Steve Wolff lleg al programa NFSNET en 1986 reconoci la necesidad de una infraestructura de red amplia que pudiera ser de ayuda a la comunidad investigadora y a la acadmica en general, junto a la necesidad de desarrollar una estrategia para establecer esta infraestructura sobre bases independientes de la financiacin pblica directa. Se adoptaron varias polticas y estrategias para alcanzar estos fines. La NSF opt tambin por mantener la infraestructura organizativa de Internet existente (DARPA) dispuesta jerrquicamente bajo el IAB ( Internet Activities Board , Comit de Actividades de Internet). La declaracin pblica de esta decisin firmada por todos sus autores (por los grupos de Arquitectura e Ingeniera de la IAB, y por el NTAG de la NSF) apareci como la RFC 985 ("Requisitos para pasarelas de Internet") que formalmente aseguraba la interoperabilidad entre las partes de Internet dependientes de DARPA y de NSF. El backbone haba hecho la transicin desde una red construida con routers de la comunidad investigadora (los routers Fuzzball de David Mills) a equipos comerciales. En su vida de ocho aos y medio, el backbone haba crecido desde seis nodos con enlaces de 56Kb a 21 nodos con enlaces mltiples de 45Mb.Haba visto crecer Internet hasta alcanzar ms de 50.000 redes en los cinco continentes y en el espacio exterior, con aproximadamente 29.000 redes en los Estados Unidos. El efecto del ecumenismo del programa NSFNET y su financiacin (200 millones de dlares entre 1986 y 1995) y de la calidad de los protocolos fue tal que en 1990, cuando la propia ARPANET se disolvi, TCP/IP haba sustituido o marginado a la mayor parte de los restantes protocolos de grandes redes de ordenadores e IP estaba en camino de convertirse en el servicio portador de la llamada Infraestructura Global de Informacin. El papel de la documentacin Un aspecto clave del rpido crecimiento de Internet ha sido el acceso libre y abierto a los documentos bsicos, especialmente a las especificaciones de los protocolos. Los comienzos de Arpanet y de Internet en la comunidad de investigacin universitaria estimularon la tradicin acadmica de la publicacin abierta de ideas y resultados. Sin embargo, el ciclo normal de la publicacin acadmica tradicional era demasiado formal y lento para el intercambio dinmico de ideas, esencial para crear redes.
10
Unidad:
Edicin No. 1
Programacin Web
En 1969 S.Crocker, entonces en UCLA, dio un paso clave al establecer la serie de notas RFC ( Request For Comments , peticin de comentarios). Estos memorndums pretendieron ser una va informal y de distribucin rpida para compartir ideas con otros investigadores en redes. Al principio, las RFC fueron impresas en papel y distribuidas va correo "lento". Pero cuando el FTP ( File Transfer Protocol , protocolo de transferencia de ficheros) empez a usarse, las RFC se convirtieron en ficheros difundidos online a los que se acceda va FTP. Hoy en da, desde luego, estn disponibles en el World Wide Web en decenas de emplazamientos en todo el mundo. SRI, en su papel como Centro de Informacin en la Red, mantena los directorios online . Jon Postel actuaba como editor de RFC y como gestor de la administracin centralizada de la asignacin de los nmeros de protocolo requeridos, tareas en las que contina hoy en da. El efecto de las RFC era crear un bucle positivo de realimentacin, con ideas o propuestas presentadas a base de que una RFC impulsara otra RFC con ideas adicionales y as sucesivamente. Una vez se hubiera obtenido un consenso se preparara un documento de especificacin. Tal especificacin seria entonces usada como la base para las implementaciones por parte de los equipos de investigacin. Con el paso del tiempo, las RFC se han enfocado a estndares de protocolo las especificaciones oficiales- aunque hay todava RFC informativas que describen enfoques alternativos o proporcionan informacin de soporte en temas de protocolos e ingeniera. Las RFC son vistas ahora como los documentos de registro dentro de la comunidad de estndares y de ingeniera en Internet. El acceso abierto a las RFC libre si se dispone de cualquier clase de conexin a Internet- promueve el crecimiento de Internet porque permite que las especificaciones sean usadas a modo de ejemplo en las aulas universitarias o por emprendedores al desarrollar nuevos sistemas. El e-mail o correo electrnico ha supuesto un factor determinante en todas las reas de Internet, lo que es particularmente cierto en el desarrollo de las especificaciones de protocolos, estndares tcnicos e ingeniera en Internet. Las primitivas RFC a menudo presentaban al resto de la comunidad un conjunto de ideas desarrolladas por investigadores de un solo lugar. Despus de empezar a usarse el correo electrnico, el modelo de autora cambi: las RFC pasaron a ser presentadas por coautores con visiones en comn, independientemente de su localizacin.
11
Unidad:
Edicin No. 1
Programacin Web
Las listas de correo especializadas ha sido usadas ampliamente en el desarrollo de la especificacin de protocolos, y continan siendo una herramienta importante. El IETF tiene ahora ms de 75 grupos de trabajo, cada uno dedicado a un aspecto distinto de la ingeniera en Internet. Cada uno de estos grupos de trabajo dispone de una lista de correo para discutir uno o ms borradores bajo desarrollo. Cuando se alcanza el consenso en el documento, ste puede ser distribuido como una RFC. Debido a que la rpida expansin actual de Internet se alimenta por el aprovechamiento de su capacidad de promover la comparticin de informacin, deberamos entender que el primer papel en esta tarea consisti en compartir la informacin acerca de su propio diseo y operacin a travs de los documentos RFC. Este mtodo nico de producir nuevas capacidades en la red continuar siendo crtico para la futura evolucin de Internet. El futuro: Internet 2 Internet2 es el futuro de la red de redes y est formado actualmente por un consorcio dirigido por 206 universidades que junto a la industria de comunicaciones y el gobierno estn desarrollando nuevas tcnicas de conexin que acelerarn la capacidad de transferencia entre servidores. Sus objetivos estn enfocados a la educacin y la investigacin acadmica. Adems buscan aprovechar aplicaciones de audio y video que demandan ms capacidad de transferencia de ancho de banda. Es una red de cmputo sustentada en tecnologas de vanguardia que permiten una alta velocidad en la transmisin de contenidos y que funciona independientemente de la Internet comercial actual. Su origen se basa en el espritu de colaboracin entre las universidades del mundo y su objetivo principal es desarrollar la prxima generacin de aplicaciones telemticas para facilitar las misiones de investigacin y educacin de las universidades, adems de ayudar en la formacin de personal capacitado en el uso y manejo de redes avanzadas de cmputo. A qu se refiere con aplicaciones telemticas?
12
Unidad:
Edicin No. 1
Programacin Web
Son aplicaciones que utilizan las facilidades de telecomunicaciones e informtica. Internet es una red Telemtica. Qu son las redes de avanzadas? Es sinnimo de redes de banda ancha o de alto rendimiento? Son redes que junto con la posibilidad de manejar mayores velocidades de transmisin, cuentan con otros atributos, como son: Multicast Calidad de Servicio (QoS) Protocolos especializados (Vgr. H.323) IPv6 Topologas dedicadas, seguras y flexibles Por qu otra Internet? La Internet de hoy en da ya no es una red acadmica, como en sus comienzos, sino que se ha convertido en una red que involucra, en gran parte, intereses comerciales y particulares. Esto la hace inapropiada para la experimentacin y el estudio de nuevas herramientas en gran escala. Adicionalmente, los proveedores de servicios sobre Internet "sobrevenden" el ancho de banda que disponen, haciendo imposible garantizar un servicio mnimo en horas pico de uso de la red. Esto es crtico cuando se piensa en aplicaciones propias de Internet 2, que requieren calidad de servicio garantizada. Por otro lado, los enlaces de alta velocidad son an demasiado costosos para poder realizar su comercializacin masiva. Todo esto, nos lleva a la conclusin que Internet no es un medio apto para dar el salto tecnolgico que se necesita para compartir grandes volmenes de informacin, videos, transmisin de conferencias en tiempo real o garantizar comunicacin sincrnica permanente.
1.2. Protocolo http (protocolo de transferencia de hipertexto).

El Protocolo de Transferencia de HiperTexto (Hypertext Transfer Protocol) es un sencillo protocolo cliente-servidor que articula los intercambios de informacin entre los clientes Web y los servidores HTTP. La especificacin completa del proto-
13
Unidad:
Edicin No. 1
Programacin Web
colo HTTP 1/0 est recogida en el RFC 1945. Fue propuesto por Tim Berners-Lee, atendiendo a las necesidades de un sistema global de distribucin de informacin como el World Wide Web. Desde el punto de vista de las comunicaciones, est soportado sobre los servicios de conexin TCP/IP, y funciona de la misma forma que el resto de los servicios comunes de los entornos UNIX: un proceso servidor escucha en un puerto de comunicaciones TCP (por defecto, el 80), y espera las solicitudes de conexin de los clientes Web. Una vez que se establece la conexin, el protocolo TCP se encarga de mantener la comunicacin y garantizar un intercambio de datos libre de errores. HTTP se basa en sencillas operaciones de solicitud/respuesta. Un cliente establece una conexin con un servidor y enva un mensaje con los datos de la solicitud. El servidor responde con un mensaje similar, que contiene el estado de la operacin y su posible resultado. Todas las operaciones pueden adjuntar un objeto o recurso sobre el que actan; cada objeto Web (documento HTML, fichero multimedia o aplicacin CGI) es conocido por su URL. Etapas de una transaccin HTTP. Para profundizar ms en el funcionamiento de HTTP, veremos primero un caso particular de una transaccin HTTP; en los siguientes apartados se analizarn las diferentes partes de este proceso. Cada vez que un cliente realiza una peticin a un servidor, se ejecutan los siguientes pasos: Un usuario accede a una URL, seleccionando un enlace de un documento HTML o introducindola directamente en el campo Location del cliente Web. El cliente Web descodifica la URL, separando sus diferentes partes. As identifica el protocolo de acceso, la direccin DNS o IP del servidor, el posible puerto opcional (el valor por defecto es 80) y el objeto requerido del servidor. Se abre una conexin TCP/IP con el servidor, llamando al puerto TCP correspondiente.
14
Unidad:
Edicin No. 1
Programacin Web
Se realiza la peticin. Para ello, se enva el comando necesario (GET, POST, HEAD,), la direccin del objeto requerido (el contenido de la URL que sigue a la direccin del servidor), la versin del protocolo HTTP empleada (casi siempre HTTP/1.0) y un conjunto variable de informacin, que incluye datos sobre las capacidades del browser, datos opcionales para el servidor, El servidor devuelve la respuesta al cliente. Consiste en un cdigo de estado y el tipo de dato MIME de la informacin de retorno, seguido de la propia informacin. Se cierra la conexin TCP.
Este proceso se repite en cada acceso al servidor HTTP. Por ejemplo, si se recoge un documento HTML en cuyo interior estn insertadas cuatro imgenes, el proceso anterior se repite cinco veces, una para el documento HTML y cuatro para las imgenes. Desde 1990, el protocolo HTTP (Protocolo de transferencia de hipertexto) es el protocolo ms utilizado en Internet. La versin 0.9 slo tena la finalidad de transferir los datos a travs de Internet (en particular pginas Web escritas en HTML). La versin 1.0 del protocolo (la ms utilizada) permite la transferencia de mensajes con encabezados que describen el contenido de los mensajes mediante la codificacin MIME. El propsito del protocolo HTTP es permitir la transferencia de archivos (principalmente, en formato HTML). entre un navegador (el cliente) y un servidor web (denominado, entre otros, httpd en equipos UNIX) localizado mediante una cadena de caracteres denominada direccin URL. Comunicacin entre el navegador y el servidor La comunicacin entre el navegador y el servidor se lleva a cabo en dos etapas:
15
Unidad:
Edicin No. 1
Programacin Web
El navegador realiza una solicitud HTTP El servidor procesa la solicitud y despus enva una respuesta HTTP
En realidad, la comunicacin se realiza en ms etapas si se considera el procesamiento de la solicitud en el servidor. Dado que slo nos ocupamos del protocolo HTTP, no se explicar la parte del procesamiento en el servidor en esta seccin del artculo. Si este tema les interesa, puede consultar el artculo sobre el tratamiento de CGI.
Comandos
Comando GET HEAD POST PUT DELETE
Descripcin Solicita el recurso ubicado en la URL especificada Solicita el encabezado del recurso ubicado en la URL especificada Enva datos al programa ubicado en la URL especificada Enva datos a la URL especificada Borra el recurso ubicado en la URL especificada
16
Unidad:
Edicin No. 1
Programacin Web
Encabezados
Nombre del encabezado Descripcin Accept Accept-Charset Accept-Encoding Accept-Language Authorization Content-Encoding Content-Language Content-Length Content-Type Date Forwarded From From Tipo de contenido aceptado por el navegador (por ejemplo, texto/html). Consulte Tipos de MIME Juego de caracteres que el navegador espera Codificacin de datos que el navegador acepta Idioma que el navegador espera (de forma predeterminada, ingls) Identificacin del navegador en el servidor Tipo de codificacin para el cuerpo de la solicitud Tipo de idioma en el cuerpo de la solicitud Extensin del cuerpo de la solicitud Tipo de contenido del cuerpo de la solicitud (por ejemplo, texto/html). Consulte Tipos de MIME Fecha en que comienza la transferencia de datos Utilizado por equipos intermediarios entre el navegador y el servidor Permite especificar la direccin de correo electrnico del cliente Permite especificar que debe enviarse el documento si ha sido modificado desde una fecha en particular
17
Unidad:
Edicin No. 1
Programacin Web
Link Orig-URL Referer User-Agent
Vnculo entre dos direcciones URL Direccin URL donde se origin la solicitud Direccin URL desde la cual se realiz la solicitud Cadena con informacin sobre el cliente, por ejemplo, el nombre y la versin del navegador y el sistema operativo
Respuesta HTTP Una respuesta HTTP es un conjunto de lneas que el servidor enva al navegador. Est constituida por: Incluye: Una lnea de estado: es una lnea que especifica la versin del protocolo utilizada y el estado de la solicitud en proceso mediante un texto explicativo y un cdigo. La lnea est compuesta por tres elementos que deben estar separados por un espacio: La lnea est formada por tres elementos que deben estar separados por un espacio: o la versin del protocolo utilizada o el cdigo de estado o el significado del cdigo Los campos del encabezado de respuesta: es un conjunto de lneas opcionales que permiten aportar informacin adicional sobre la respuesta y/o el servidor. Cada una de estas lneas est compuesta por un nombre que califica el tipo de encabezado, seguido por dos puntos (:) y por el valor del encabezado Cada una de estas lneas est formada por un nombre que describe el tipo de encabezado, seguido de dos puntos (:) y el valor del encabezado. El cuerpo de la respuesta: contiene el documento solicitado.
Por lo tanto, una respuesta HTTP posee la siguiente sintaxis (<crlf> significa retorno de carro y avance de lnea):
VERSIN-HTTP CDIGO EXPLICACIN <crlf> ENCABEZADO: Valor<crlf> . . . ENCABEZADO: Valor<crlf> Lnea en blanco <crlf>
18
Unidad:
Edicin No. 1
Programacin Web
CUERPO DE LA RESPUESTA
A continuacin se encuentra un ejemplo de una respuesta HTTP:

HTTP/1.0 200 OK Date: Sat, 15 Jan 2000 14:37:12 GMT Server : MicrosoftIIS/2.0 Content-Type : text/HTML Content-Length : 1245 Last-Modified : Fri, 14 Jan 2000 08:25:13 GMT
Encabezados de respuesta
Nombre del encabezado Content-Encoding Content-Language Content-Length Content-Type Date Expires Forwarded
Descripcin Tipo de codificacin para el cuerpo de la respuesta Tipo de idioma en el cuerpo de la respuesta Extensin del cuerpo de la respuesta Tipo de contenido del cuerpo de la respuesta (por ejemplo, texto/html). Consulte Tipos de MIME Fecha en que comienza la transferencia de datos Fecha lmite de uso de los datos Utilizado por equipos intermediarios entre el navegador y el servidor Redireccionamiento a una nueva direccin URL asociada con el documento Caractersticas del servidor que envi la respuesta
Location Server
19
Unidad:
Edicin No. 1
Programacin Web
Los cdigos de respuesta Son los cdigos que se ven cuando el navegador no puede mostrar la pgina solicitada. El cdigo de respuesta est formado por tres dgitos: el primero indica el estado y los dos siguientes explican la naturaleza exacta del error.
Cdigo Mensaje 10x 20x 200
Descripcin
Mensaje de inEstos cdigos no se utilizan en la versin 1.0 del protocolo formacin xito OK Estos cdigos indican la correcta ejecucin de la transaccin La solicitud se llev a cabo de manera correcta Sigue a un comando POST e indica el xito, la parte restante del cuerpo indica la direccin URL donde se ubicar el documento creado recientemente. La solicitud ha sido aceptada, pero el procedimiento que sigue no se ha llevado a cabo INFOR- Cuando se recibe este cdigo en respuesta a un comando de GET indica que la respuesta no est completa. El servidor ha recibido la solicitud, pero no hay informacin de respuesta El servidor le indica al navegador que borre el contenido en los campos de un formulario
201
CREATED
202
ACCEPTED PARTIAL MATION
203
204
NO RESPONSE
205
RESET CONTENT PARTIAL TENT Redireccin
206
CON- Es una respuesta a una solicitud que consiste en el encabezado range. El servidor debe indicar el encabezado content-Range Estos cdigos indican que el recurso ya no se encuentra en la ubicacin especificada
30x
20
Unidad:
Edicin No. 1
Programacin Web
301
MOVED
Los datos solicitados han sido transferidos a una nueva direccin Los datos solicitados se encuentran en una nueva direccin URL, pero, no obstante, pueden haber sido trasladados Significa que el cliente debe intentarlo con una nueva direccin; es preferible que intente con otro mtodo en vez de GET Si el cliente llev a cabo un comando GET condicional (con la solicitud relativa a si el documento ha sido modificado desde la ltima vez) y el documento no ha sido modificado, este cdigo se enva como respuesta.
302
FOUND
303
METHOD
304
NOT MODIFIED
40x
Error debido al Estos cdigos indican que la solicitud es incorrecta cliente BAD REQUEST La sintaxis de la solicitud se encuentra formulada de manera errnea o es imposible de responder Los parmetros del mensaje aportan las especificaciones de formularios de autorizacin que se admiten. El cliente debe reformular la solicitud con los datos de autorizacin correctos
400
401
UNAUTHORIZED
402 403 404
PAYMENT REQUI- El cliente debe reformular la solicitud con los datos de pago RED correctos FORBIDDEN NOT FOUND El acceso al recurso simplemente se deniega Un clsico. El servidor no hall nada en la direccin especificada. Se ha abandonado sin dejar una direccin para redireccionar... :)
50x
Error debido al Estos cdigos indican que existe un error interno en el servidor servidor INTERNAL ERROR El servidor encontr una condicin inesperada que le impide seguir con la solicitud (una de esas cosas que les suceden a los
500
21
Unidad:
Edicin No. 1
Programacin Web
servidores...) 501 NOT IMPLEMEN- El servidor no admite el servicio solicitado (no puede saberlo TED todo...) El servidor que acta como una puerta de enlace o proxy ha recibido una respuesta no vlida del servidor al que intenta acceder
502
BAD GATEWAY
503
El servidor no puede responder en ese momento debido a que SERVICE UNAVAI- se encuentra congestionado (todas las lneas de comunicacin se encuentran congestionadas, intntelo de nuevo ms adelanLABLE te) GATEWAY MEOUT TILa respuesta del servidor ha llevado demasiado tiempo en relacin al tiempo de espera que la puerta de enlace poda admitir (excedi el tiempo asignado...)
504
1.2.1 Arquitectura del WWW. La world wide web es la telaraa mundial, es un servicio de internet ms utilizado funciona de la siguiente manera: la computadora cliente utiliza un browser o programa navegador para interactuar con el servidor de pginas web El Web mundial del Internet (WWW) proporciona un modelo lgico muy flexible y de gran alcance. Todo el uso presenta el contenido a un cliente en un grupo de formatos de datos normales que son hojeados por el conocimiento de las aplicaciones del lado del usuario conocido como buscadores de la Web. Tpicamente, un cliente enva los pedidos de uno o ms objetos de datos nombrados (o el contenido) a un servidor de origen. El servidor de origen responde con los datos solicitados expresados en uno de los formatos normales conocidos por el cliente (ejemplo: HTML). Los estndares de WWW incluyen todos los mecanismos necesarios para construir un ambiente de uso general:
22
Unidad:
Edicin No. 1
Programacin Web
Modelo de nombramiento estndar - Todos los recursos en el WWW se nombran con un Recurso Uniforme de Internet-estndar (URL). Formatos de contenido estndar - Todos los buscadores de la web apoyan un grupo de formatos de contenido estndar. stos incluyen el lenguaje del margen de beneficio del Hypertext Markup Languaje (HTML), el lenguaje escrito en la lengua Java Script?, y una gran cantidad de otros formatos. Protocolos estndares - los protocolos estndares de la conexin de redes permite a cualquier buscador se comunique con cualquier servidor de origen. El protocolo ms comnmente usado en el WWW es el Hypertext Transport Protocol (HTTP).
Esta infraestructura permite que los usuarios alcancen fcilmente una gran cantidad de aplicaciones tripartitas y servicios de contenido. Tambin permite que los desarrolladores de aplicaciones creen fcilmente usos y los servicios de contenido para una comunidad grande de clientes. 1.2.2 URLs. Un localizador uniforme de recursos, ms comnmente denominado URL (sigla en ingls de uniform resource locator), es una secuencia de caracteres, de acuerdo a un formato modlico y estndar, que se usa para nombrar recursos en Internet para su localizacin o identificacin, como por ejemplo documentos textuales, imgenes, videos, presentaciones digitales, etc. Los localizadores uniformes de recursos fueron una innovacin fundamental en la historia de la Internet. Fueron usadas por primera vez por Tim Berners-Lee en 1991, para permitir a los autores de documentos establecer hiperenlaces en la World Wide Web. Desde 1994, en los estndares de la Internet, el concepto de URL ha sido incorporado dentro del ms general de URI (uniform resource identifier, en espaol identificador uniforme de recurso), pero el trmino URL an se utiliza ampliamente. Aunque nunca fueron mencionadas como tal en ningn estndar, mucha gente cree que las iniciales URL significan universal resource locator (localizador universal de recursos). Esta interpretacin puede ser debida al hecho de que, aunque la U en URL siempre ha significado "uniforme", la U de URI signific en un principio "universal", antes de la publicacin del RFC 2396. El URL es la cadena de caracteres con la cual se asigna una direccin nica a cada uno de los recursos de informacin disponibles en la Internet. Existe un URL
23
Unidad:
Edicin No. 1
Programacin Web
nico para cada pgina de cada uno de los documentos de la World Wide Web, para todos los elementos de Gopher y todos los grupos de debate USENET, y as sucesivamente. El URL de un recurso de informacin es su direccin en Internet, la cual permite que el navegador la encuentre y la muestre de forma adecuada. Por ello el URL combina el nombre del ordenador que proporciona la informacin, el directorio donde se encuentra, el nombre del archivo, y el protocolo a usar para recuperar los datos. Esquema URL Un URL se clasifica por su esquema, que generalmente indica el protocolo de red que se usa para recuperar, a travs de la red, la informacin del recurso identificado. Un URL comienza con el nombre de su esquema, seguida por dos puntos, seguido por una parte especfica del esquema'. Algunos ejemplos de esquemas URL: * http - recursos HTTP * https - HTTP sobre SSL * ftp - File Transfer Protocol * mailto - direcciones de correo electrnico * ldap - bsquedas LDAP Lightweight Directory Access Protocol * file - recursos disponibles en el sistema local, o en una red local * news - grupos de noticias Usenet (newsgroup) * gopher - el protocolo Gopher (ya en desuso) * telnet - el protocolo telnet * data - el esquema para insertar pequeos trozos de contenido en los documentos Data: URL Algunos de los esquemas URL, como los populares "mailto", "http", "ftp", y "file", junto a los de sintaxis general URL, se detallaron por primera vez en 1994, en el Request for Comments RFC 1630, sustituido un ao despus por los ms especficos RFC 1738 y RFC 1808. Algunos de los esquemas definidos en el primer RFC an son vlidos, mientras que otros son debatidos o han sido refinados por estndares posteriores. Mientras tanto, la definicin de la sintaxis general de los URL se ha escindido en dos lneas separadas de especificacin de URI: RFC 2396 (1998) y RFC 2732 (1999), ambos
24
Unidad:
Edicin No. 1
Programacin Web
ya obsoletos pero todava ampliamente referidos en las definiciones de esquemas URL. 1.2.3 Mtodos http. Estos Mtodos HTTP son como tipos de solicitudes que hacen en el comunicacin del protocolo HTTP, estas peticiones son acciones a realizar, cada peticin tiene ya definido su accin a hacer. Como sabemos la comunicacin del HTTP se da en Request/Response se podra decir que en estos dos pasos, estos pasos son el de peticin y respuesta en la comunicacin. Mtodos [-] GET "Devuelve el recurso identificado en la URL pedida." Sera una peticin de lectura hacia un recurso del host definido. Apolo:/# nc -vv 127.0.0.1 80 localhost [127.0.0.1] 80 (www) open GET / <html><body><h1>It works!</h1> <p>This is the default web page for this server.</p> <p>The web server software is running but no content has been added, yet.</p> </body></html> sent 6, rcvd 177 Hacemos una peticin GET al localhost, entonces como definimos en el path / se re direccionar al index.html que en este caso sera el ndex que trae por defecto Apache2, HEAD "Funciona como el GET, pero sin que el servidor devuelva el cuerpo del mensaje. Es decir, slo se devuelve la informacin de cabecera." Aqu en esta parte ya es mas a nivel de cliente(navegador no como netcat aunque tambin se utilizar) entonces este mtodo lo que hace es mostrar o prcticamente aplicar un filtro y que solo muestre la informacin de los Headers no del cuerpo del recurso como tal. Apolo:/# nc -vv 127.0.0.1 80 localhost [127.0.0.1] 80 (www) open
25
Unidad:
Edicin No. 1
Programacin Web
HEAD / HTTP/1.1 Host:127.0.0.1 HTTP/1.1 200 OK Date: Fri, 28 May 2010 07:19:28 GMT Server: Apache/2.2.15 (Debian) Last-Modified: Wed, 26 May 2010 06:02:11 GMT ETag: "4400ff-b1-4877903c6dec0" Accept-Ranges: bytes Content-Length: 177 Vary: Accept-Encoding Content-Type: text/html X-Pad: avoid browser bug POST "Indica al servidor que se prepare para recibir informacin del cliente suele usarse para enviar informacin desde formularios." este tipo de mtodo lo que hace es hacer remitir informacin del cliente al servidor, aparte de hacer trabajar esta funcin en formularios tambin se podra adecuar a un login o a otra informacin a enviar al servidor, bueno esta informacin cuando llega al servidor termina haciendo muchas veces valor de variables para procesar informacin. PUT "Enva el recurso identificado en la URL desde el cliente hacia el servidor."Este mtodo sirve para crear o registrar cierta informacin que envi al servidor. PUT /index.html HTTP/1.1 Host:127.0.0.1 Content-Lengt:19 <h1>Progresive</h1> OPTIONS este mtodo permite ver que mtodos estn habilitados y cules no. Apolo:/# nc -vv 127.0.0.1 80 localhost [127.0.0.1] 80 (www) open OPTIONS / HTTP/1.1 Host:127.0.0.1 HTTP/1.1 200 OK Date: Fri, 28 May 2010 07:18:04 GMT
26
Unidad:
Edicin No. 1
Programacin Web
Server: Apache/2.2.15 (Debian) Allow: GET,HEAD,POST,OPTIONS Vary: Accept-Encoding Content-Length: 0 Content-Type: text/html TRACE "Inicia un ciclo de mensajes de peticin. Se usa para depuracin y permite al cliente ver lo que el servidor recibe en el otro lado." Apolo:/# nc -vv 127.0.0.1 80 localhost [127.0.0.1] 80 (www) open TRACE /busqueda_resultado.php HTTP/1.1 Host:127.0.0.1 XSS:<script>alert('UxMal Was Here')</script> HTTP/1.1 200 OK Date: Fri, 28 May 2010 07:37:22 GMT Server: Apache/2.2.14 (Unix) mod_ssl/2.2.14 OpenSSL/0.9.8efips-rhel5 mod_auth_pas sthrough/2.1 mod_bwlimited/1.4 FrontPage/5.0.2.2635 Transfer-Encoding: chunked Content-Type: message/http 7c TRACE /busqueda_resultado.php HTTP/1.1 Host:www.desarrollocristiano.com XSS:<script>alert('UxMal Was Here')</script> DELETE "Solicita al servidor que borre el recurso identificado con el URL.", este mtodo como el mismo nombre lo dice hace la ejecucin de borrar un recurso en el host. DELETE /borrar.htm HTTP/1.1 Host:127.0.0.1 CONNECT "Este mtodo se reserva para uso con proxys. Permitir que un proxy pueda dinmicamente convertirse en un tnel. Por ejemplo para comunicaciones con SSL."
27
Unidad:
Edicin No. 1
Programacin Web
CONNECT 192.168.1.1 HTTP/1.1 Host:victic.com GET / HTTP/1.0 Persistencia en http Cookies. Las conexiones persistentes del HTTP, tambin llamadas HTTP guardar-vivo, o reutilizacin de la conexin del HTTP, son la idea de usar la misma conexin del TCP para enviar y para recibir mltiplo Peticiones del HTTP/responses, en comparacin con abrir una nueva conexin para cada solo par de la peticin/de la respuesta. Ventajas menos CPU y uso de la memoria (porque pocas conexiones estn abiertas simultneamente) permite Can#era del HTTP de peticiones y de respuestas reducido congestin de red (menos Conexiones del TCP) reducido estado latente en las peticiones subsecuentes (no apretn de manos) los errores se pueden divulgar sin la pena de cerrar la conexin del TCP
Segn RFC 2616 (pgina 47), un cliente single-user no debe mantener ms de 2 conexiones con ningn servidor o poder. A poder debe utilizar hasta las conexiones 2*N a otro servidor o poder, donde est el nmero N de usuarios simultneamente activos. Estas pautas se piensan para mejorar tiempos de reaccin del HTTP y para evitar la congestin. Persistencia. Uno de los problemas clsicos en el desarrollo de web sites y aplicaciones web es la perdida de persistencia cuando el usuario pasa de una pgina a otra. Debido a las caractersticas de diseo del protocolo HTTP que fuerza una nueva conexin y desconexin por cada request no es posible saber quien est accediendo a que pgina o en qu lugar esta cada usuario del site. Mantener persistencia a lo largo de la navegacin del sitio ha sido uno de los temas ms complejos e importantes en el desarrollo de aplicaciones web, en este captulo ilustraremos distintos mtodos que pueden usarse en PHP para mantener persistencia.
28
Unidad:
Edicin No. 1
Programacin Web
Sesiones: Se suele definir como una sesin al tiempo en el que un usuario determinado se encuentra navegando en el site, dependiendo de la definicin podemos decir que si el usuario no navega por el site durante una cierta cantidad de minutos ha terminado su sesin en el sitio y a partir de all cuando vuelve a ingresar lo hace en una nueva sesin. El concepto de sesin es til porque es posible asociar a cada sesin un identificador nico de forma tal de registrar la actividad del usuario en el site y mantener persistencia utilizando nicamente este identificador, el problema pasa a ser como mantener la persistencia del identificador de sesin (SID) de ahora en adelante, y las posibilidades son las que detallamos a continuacin: 1. Cookies Uno de los mecanismos ms usados para mantener persistencia es el mecanismo de cookies, inventado por Netscape y hoy en da aceptado por casi todos los browsers, en especial los ms populares. El concepto es que mediante un header del protocolo HTTP el server pueda almacenar informacin en el cliente. A esta informacin que el server guarda en el cliente se la denomina cookie. Las c ookies pueden habilitarse o deshabilitarse desde el browser por lo que algunos usuarios no lo soportan, son de uso bastante general en muchos web sites a punto tal que en sites de la importancia de yahoo si el usuario no tiene habilitadas las cookies prcticamente no puede utilizar la mayora de los servicios del site. Cuando el server enva un header con un cookie el browser, si acepta cookies, guarda la informacin enviada en un archivo de texto con un formato especial. Cada vez que el browser solicita una pgina del dominio que envi la cookie re-enva la cookie al site, de esta forma es posible mantener persistencia. La informacin que puede guardarse en una cookie est limitada por lo que habitualmente se utiliza la misma para mantener el identificador de sesin del usuario almacenndose el resto de los datos necesarios en el servidor usando el session-id de la cookie como clave. 1.3 Introduccin al HTML.
HTML (HyperText Mark-Up Language) es lo que se conoce como "lenguaje de marcado", cuya funcin es preparar documentos escritos aplicando etiquetas de formato. Las etiquetas indican cmo se presenta el documento y cmo se vincula a otros documentos.
29
Unidad:
Edicin No. 1
Programacin Web
HTML se usa tambin para la lectura de documentos en Internet desde diferentes equipos gracias al protocolo HTTP, que permite a los usuarios acceder, de forma remota, a documentos almacenados en una direccin especfica de la red, denominada direccin URL. La World Wide Web (WWW), o simplemente la Web, es la red mundial formada por todos los documentos (llamados "pginas Web") conectados entre s por hipervnculos. A menudo, las pginas web se organizan alrededor de una pgina principal que acta como eje central para buscar otras pginas con hipervnculos. Este grupo de pginas Web unidas por hipervnculos y centradas alrededor de una pgina principal se llama sitio Web. La Web es un amplio archivo dinmico compuesto de una gran variedad de sitios Web y que permite el acceso a pginas Web que contienen texto formateado, imgenes, sonidos, videos, etc. El concepto de la Web La Web est compuesta por pginas Web almacenadas en servidores Web, equipos que estn constantemente conectados a Internet y que proveen las pginas que los usuarios solicitan. Cada pgina Web y, en general, cualquier fuente en lnea (como imgenes, videos, msica y animaciones) se asocia con una direccin nica llamada URL. El elemento clave para navegar a travs de pginas Web es el navegador, un programa que enva solicitudes a los servidores Web, procesa los datos resultantes y muestra la informacin como se requiere, en base a las instrucciones de la pgina HTML. Los navegadores ms usados en Internet son: * Mozilla Firefox, * Microsoft Internet Explorer, * Netscape Navigator, * Safari. HTML es un estndar
30
Unidad:
Edicin No. 1
Programacin Web
Es importante comprender que el lenguaje HTML es un estndar, compuesto por recomendaciones publicadas por un consorcio internacional: el World Wide Web Consortium (W3C). Las especificaciones oficiales de HTML describen las "instrucciones" del lenguaje, pero no cmo seguirlas, es decir, cmo las interpretan los programas informticos. Esto permite visualizar pginas Web independientemente del sistema operativo o la arquitectura del equipo del usuario. Sin embargo, aunque las especificaciones son muy detalladas, hay cierto margen para la interpretacin por parte del navegador y esta es la razn por la cual la misma pgina puede aparecer de modo diferente en un navegador u otro. Es ms, algunos editores de software agregan instrucciones HTML exclusivas que no se hallan en las especificaciones de W3C. Por este motivo, las pginas Web que contienen dichas instrucciones pueden ser vistas en un navegador, y ser completa o parcialmente ilegibles en otros. Por esto, las pginas Web deben seguir las recomendaciones de W3C, de forma que lleguen al pblico ms amplio posible. Versiones de HTML HTML fue diseado por Tim Berners-Lee, quien trabajaba entonces como investigador de CERN, en 1989. Anunci oficialmente la creacin de la Web en Usenet en agosto de 1991. Sin embargo, no fue hasta 1993 que HTML se consider suficientemente avanzado para ser llamado lenguaje (HTML fue simblicamente bautizado HTML 1.0). El navegador Web usado adopt el nombre de NCSA Mosac. RFC 1866, de noviembre de 1995, represent la primera versin oficial de HTML, denominada HTML 2.0. Luego de la breve aparicin de HTML 3.0, que nunca se lanz oficialmente, HTML 3.2 se convirti en el estndar oficial el 14 de enero del 1997. Los cambios ms significativos de HTML 3.2 fueron la estandarizacin de las tablas, as como muchos aspectos relacionados con la presentacin de las pginas Web. El 18 de diciembre de 1997 se lanz HTML 4.0. Las versin 4.0 de HTML fue importante para la estandarizacin de las hojas de estilo y los marcos. La versin HTML 4.01, que apareci el 24 de diciembre de 1999, introdujo modificaciones menores en HTML 4.0.
31
Unidad:
Edicin No. 1
Programacin Web
Perspectiva de HTML HTML es el lenguaje con el que se escriben las pginas web. Las pginas web pueden ser vistas por el usuario mediante un tipo de aplicacin llamada navegador. Podemos decir por lo tanto que el HTML es el lenguaje usado por los navegadores para mostrar las pginas webs al usuario, siendo hoy en da la interface ms extendida en la red. Este lenguaje nos permite aglutinar textos, sonidos e imgenes y combinarlos a nuestro gusto. Adems, y es aqu donde reside su ventaja con respecto a libros o revistas, el HTML nos permite la introduccin de referencias a otras pginas por medio de los enlaces hipertexto. El HTML se cre en un principio con objetivos divulgativos. No se pens que la web llegara a ser un rea de ocio con carcter multimedia, de modo que, el HTML se cre sin dar respuesta a todos los posibles usos que se le iba a dar y a todos los colectivos de gente que lo utilizaran en un futuro. Sin embargo, pese a esta deficiente planificacin, si que se han ido incorporando modificaciones con el tiempo, estos son los estndares del HTML. Numerosos estndares se han presentado ya. El HTML 4.01 es el ltimo estndar a septiembre de 2001. Esta evolucin tan anrquica del HTML ha supuesto toda una seria de inconvenientes y deficiencias que han debido ser superados con la introduccin de otras tecnologas accesorias capaces de organizar, optimizar y automatizar el funcionamiento de las webs. Ejemplos que pueden sonaros son las CSS, JavaScript u otros. Veremos ms adelante en qu consisten algunas de ellas. Otros de los problemas que han acompaado al HTML es la diversidad de navegadores presentes en el mercado los cuales no son capaces de interpretar un mismo cdigo de una manera unificada. Esto obliga al web mster a, una vez creada su pgina, comprobar que esta puede ser leda satisfactoriamente por todos los navegadores, o al menos, los ms utilizados. Adems del navegador necesario para ver los resultados de nuestro trabajo, necesitamos evidentemente otra herramienta capaz de crear la pgina en si. Un archivo HTML (una pgina) no es ms que un texto. Es por ello que para programar en HTML necesitamos un editor de textos. Es recomendable usar el Bloc de notas que viene con Windows, u otro editor de textos sencillo. Hay que tener cuidado con algunos editores ms complejos como
32
Unidad:
Edicin No. 1
Programacin Web
Wordpad o Microsoft Word, pues colocan su propio cdigo especial al guardar las pginas y HTML es nicamente texto plano, con lo que podremos tener problemas. Existen otro tipo de editores especficos para la creacin de pginas web los cuales ofrecen muchas facilidades que nos permiten aumentar nuestra productividad. No obstante, es aconsejable en un principio utilizar una herramienta lo ms sencilla posible para poder prestar la mxima atencin a nuestro cdigo y familiarizarnos lo antes posible con l. Siempre tendremos tiempo ms delante de pasarnos a editores ms verstiles con la consiguiente ganancia de tiempo. Para tener ms claro todo el tema de editores y los tipos que existen, visita los artculos: * Editores de HTML. * Bloc de notas. * Tambin puedes acceder a descripciones editores ms complejos que el Block de Notas, pero ms potentes como Homesite o UltraEdit. Es importante tener claro todo ello puesto que en funcin de vuestros objetivos puede que, ms que aprender HTML, resulte ms interesante aprender el uso de una aplicacin para la creacin de pginas. As pues, una pgina es un archivo donde est contenido el cdigo HTML en forma de texto. Estos archivos tienen extensin .html o .htm (es indiferente cul utilizar). De modo que cuando programemos en HTML lo haremos con un editor de textos y guardaremos nuestros trabajos con extensin .html, por ejemplo mipgina.html Lenguaje de despliegue del web 1.3.1 HTML como un tipo SGML. SGML son las siglas de Standard Generalized Markup Language o "Lenguaje de Marcado Generalizado". Consiste en un sistema para la organizacin y etiquetado de documentos. La Organizacin Internacional de Estndares (ISO) normaliz este lenguaje en 1986. El lenguaje SGML sirve para especificar las reglas de etiquetado de documentos y no impone en s ningn conjunto de etiquetas en especial.
33
Unidad:
Edicin No. 1
Programacin Web
El lenguaje HTML est definido en trminos del SGML. XML es un estndar de creacin posterior, que incorpora un subconjunto de la funcionalidad del SGML (suficiente para las necesidades comunes), y resulta ms sencillo de implementar pues evita algunas caractersticas avanzadas de SGML. La industria de la publicacin de documentos constituye uno de los principales usuarios del lenguaje SGML. Empleando este lenguaje, se crean y mantienen documentos que luego son llevados a otros formatos finales como HTML, Postscript, RTF, etc. El SGML es un sistema para definir lenguajes para dar formato a documentos (markup languages). Los autores utilizan un cdigo de formato (en ingls markup) en sus documentos para representar informacin estructural, presentacional y semntica junto con el contenido. El HTML es un ejemplo de lenguaje de formato de documentos. Aqu tenemos un ejemplo de un documento HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>Mi primer documento HTML</TITLE> </HEAD> <BODY> <P>Hola mundo! </BODY> </HTML> Un documento HTML se divide en una seccin de cabecera (aqu, entre <HEAD> y </HEAD>) y un cuerpo (aqu, entre <BODY> y </BODY>). El ttulo del documento aparece en la cabecera (junto con otras informaciones sobre el documento), y el contenido del documento aparece en el cuerpo. El cuerpo de este ejemplo contiene nicamente un prrafo, codificado o marcado como <P>. Cada lenguaje de formato de documentos definido con SGML se llama aplicacin SGML. Una aplicacin SGML se caracteriza generalmente por: 1. Una declaracin SGML. La declaracin SGML especifica qu caracteres y delimitadores pueden aparecer en la aplicacin.
34
Unidad:
Edicin No. 1
Programacin Web
2. Una definicin del tipo de documento (document type definition, DTD). El DTD define la sintaxis de las estructuras de formato. El DTD puede incluir definiciones adicionales, tales como referencias a entidades de caracteres. 3. Una especificacin que describe la semntica que se debe conferir al cdigo de formato. Esta especificacin tambin impone restricciones de sintaxis que no pueden expresarse dentro del DTD. 4. Documentos que contienen datos (contenido) y cdigo (markup). Cada documento contiene una referencia al DTD que debe usarse para interpretarlo. Esta especificacin incluye una declaracin SGML, tres definiciones del tipo de documento (ver la seccin sobre informacin sobre la versin de HTML para una descripcin de las tres), y una lista de referencias de caracteres. 1.3.2 Elementos del lenguaje HTML. Sintaxis del HTML Descripcin de la sintaxis con la que se trabaja en el lenguaje HTML.
El HTML es un lenguaje que basa su sintaxis en un elemento de base al que llamamos etiqueta. La etiqueta presenta frecuentemente dos partes: Una apertura de forma general <etiqueta> Un cierre de tipo </ etiqueta> Todo lo incluido en el interior de esa etiqueta sufrir las modificaciones que caracterizan a esta etiqueta. As por ejemplo: Las etiquetas <b> y </b> definen un texto en negrita. Si en nuestro documento HTML escribimos una frase con el siguiente cdigo: <b>Esto esta en negrita</b> El resultado Ser: Esto esta en negrita Las etiquetas <p> y </p> definen un prrafo. Si en nuestro documento HTML escribiramos:
35
Unidad:
Edicin No. 1
Programacin Web
<p>Hola, estamos en el prrafo 1</p> <p>Ahora hemos cambiado de prrafo</p> El resultado sera: Hola, estamos en el prrafo 1 Ahora hemos cambiado de prrafo Partes de un documento HTML Adems de todo esto, un documento HTML ha de estar delimitado por la etiqueta <html> y </html>. Dentro de este documento, podemos asimismo distinguir dos partes principales: El encabezado, delimitado por <head> y </head> donde colocaremos etiquetas de ndole informativo como por ejemplo el titulo de nuestra pgina. El cuerpo, flanqueado por las etiquetas <body> y </body>, que ser donde colocaremos nuestro texto e imgenes delimitados a su vez por otras etiquetas como las que hemos visto. El resultado es un documento con la siguiente estructura: <html> <head> Etiquetas y contenidos del encabezado Datos que no aparecen en nuestra pgina pero que son importantes para catalogarla: Titulo, palabras clave,... </head> <body> Etiquetas y contenidos del cuerpo Parte del documento que ser mostrada por el navegador: Texto e imgenes </body>
36
Unidad:
Edicin No. 1
Programacin Web
</html> Las maysculas o minsculas son indiferentes al escribir etiquetas A notar que las etiquetas pueden ser escritas con cualquier tipo de combinacin de maysculas y minsculas. <html>, <HTML> o <HtMl> son la misma etiqueta. Resulta sin embargo aconsejable acostumbrarse a escribirlas en minscula ya que otras tecnologas que pueden convivir con nuestro HTML (XML por ejemplo) no son tan permisivas y nunca viene mal coger buenas costumbres desde el principio para evitar fallos triviales en un futuro. Vamos a ver cmo se hace una pgina muy sencilla en HTML, que sirva de prctica a los debutantes.
Podemos ya con estos conocimientos, y alguno que otro ms, crear nuestra primera pgina. Para ello, abre tu editor de textos y copia y pega el siguiente texto en un nuevo documento. <html> <head> <title>Cocina Para Todos</title> </head> <body> <p><b>Bienvenido,</b></p> <p>Ests en la pgina <b>Comida para Todos</b>.</p> <p>Aqu aprenders recetas fciles y deliciosas.</p> </body> </html> Ahora guarda ese archivo con extensin .html o .htm en tu disco duro. Para ello accedemos al men Archivo y seleccionamos la opcin Guardar como. En la ventana elegimos el directorio donde deseamos guardarlo y colocaremos su nombre, por ejemplo mi_pagina.html
37
Unidad:
Edicin No. 1
Programacin Web
Consejo: Utiliza nombres en tus archivos que tengan algunas normas bsicas para ahorrarte disgustos y lios. Nuestro consejo es que no utilices acentos ni espacios ni otros caracteres raros. Tambin te ayudar escribir siempre las letras en minsculas. Esto no quiere decir que debes hacer nombres de archivos cortos, es mejor hacerlos descriptivos para que te aclaren lo que hay dentro. Algn caracter como el guin "-" o el guin bajo "_" te puede ayudar a separar las palabras. Por ejemplo quienes_somos.html Con el documento HTML creado, podemos ver el resultado obtenido a partir de un navegador. Es conveniente, llegado a este punto, hacer hincapi en el hecho de que no todos los navegadores son idnticos. Desgraciadamente, los resultados de nuestro cdigo pueden cambiar de uno a otro por lo que resulta aconsejable visualizar la pgina en varios. Generalmente se usan Internet Explorer y Netscape como referencias ya que son los ms extendidos. A decir verdad, en el momento que estas lneas son escritas, Internet Explorer acapara la inmensa mayora de usuarios (90% ms o menos) y Netscape esta relegado a un segundo plano. Esto no quiere decir que lo debemos dejar totalmente de lado ya que el 10% de visitas que puede proporcionarnos puede resultar muy importante para nosotros. Por otra parte, parece que se ha hecho publica la intencin de Netscape de desviar un poco su temtica de negocios hacia otros derroteros y abandonar esta llamada "lucha de navegadores" en la cual estaba recibiendo la peor parte. Pues bien, volviendo al tema, una vez creado el archivo .html o .htm, podemos visualizar el resultado de nuestra labor abriendo dicha pgina con un navegador. Para hacerlo, la forma resulta diferente dependiendo del navegador:
38
Unidad:
Edicin No. 1
Programacin Web
Si estamos empleando el Explorer, hemos de ir al barra de men, elegir Archivo y seleccionar Abrir. Una ventana se abrir. Pulsamos sobre el botn Examinar y accederemos a una ventana a partir de la cual podremos movernos por el interior de nuestro disco duro hasta dar con el archivo que deseamos abrir. La cosa no resulta ms difcil para Netscape. En este caso, nos dirigimos tambin a la barra de men principal y elegimos File y a continuacin Open File. La misma ventana de bsqueda nos permitir escudriar el contenido de nuestro PC hasta dar con el archivo buscado. Nota: Tambin puedes abrir el archivo si accedes al directorio donde lo guardaste. En l podrs encontrar tu archivo HTML y vers que tiene como icono el logotipo de Netscape o el de Internet Explorer. Para abrirlo simplemente hacemos un doble click sobre l. Una vez abierto el archivo podris ver vuestra primera pgina web. Algo sencillita pero por algo se empieza. Ya veris como en poco tiempo seremos capaces de mejorar sensiblemente. Fijaos en la parte superior izquierda de la ventana del navegador. Podris comprobar la presencia del texto delimitado por la etiqueta <title>. Esta es una de las funciones de esta etiqueta, cuyo principal cometido es el de servir de referencia en los motores de bsqueda como Altavista o Yahoo.
39
Unidad:
Edicin No. 1
Programacin Web
Por otro lado, los elementos que colocamos entre la etiqueta <body> y </body> se pueden ver en el espacio reservado para el cuerpo de la pgina. Se puede ver la pgina del ejemplo en funcionamiento aqu. Si ahora hacis click con el botn derecho sobre la pgina y elegs Ver cdigo fuente (o View page source) veris como en una ventana accesoria aparece el cdigo de nuestra pgina. Este recurso es de extremada importancia ya que nos permite ver el tipo de tcnicas empleadas por otros para la confeccin de sus pginas. Con todo esto asimilado ya estamos en condiciones de adentrarnos un poco ms en la descripcin de algunas de las etiquetas ms empleadas del HTML. Formato de prrafos en HTML Cmo colocar prrafos y saltos de lnea en pginas web. Tambin vemos los encabezados como prrafos que sirven de titulo. En los captulos anteriores hemos presentado a titulo de ejemplo algunas etiquetas que permiten dar formato a nuestro texto. En este capitulo veremos con ms detalle las ms ampliamente utilizadas y ejemplificaremos algunas de ellas posteriormente. Formatear un texto pasa por tareas tan evidentes como definir los prrafos, justificarlos, introducir vietas, numeraciones o bien poner en negrita, itlica... Hemos visto que para definir los prrafos nos servimos de la etiqueta <p> que introduce un salto y deja una lnea en blanco antes de continuar con el resto del documento. Podemos tambin usar la etiqueta <br>, de la cual no existe su cierre correspondiente (</br>), para realizar un simple retorno de carro con lo que no dejamos una lnea en blanco sino que solo cambiamos de lnea. Nota: Existen otras etiquetas que no tienen su correspondiente de cierre, como <img> para las imgenes, las veremos ms adelante. Esto ocurre porque un salto de lnea o una imagen no empiezan y acaban ms adelante sino que slo tienen presencia en un lugar puntual. Podis comprobar que cambiar de lnea en nuestro documento HTML sin introducir alguna de estas u otras etiquetas no implica en absoluto un cambio de lnea en la pgina visualizada. En realidad el navegador introducir el texto y no cambiara de lnea a no ser que esta llegue a su fin o bien lo especifiquemos con la etiqueta correspondiente.
40
Unidad:
Edicin No. 1
Programacin Web
Los prrafos delimitados por etiquetas <p> pueden ser fcilmente justificados a la izquierda, centro o derecha especificando dicha justificacin en el interior de la etiqueta por medio de un atributo align. Un atributo no es ms que un parmetro incluido en el interior de la etiqueta que ayuda a definir el funcionamiento de la etiqueta de una forma ms personal. Veremos a lo largo de este manual cantidad de atributos muy tiles para todo tipo de etiquetas. As, si desesemos introducir un texto alineado a la izquierda escribiramos: <p align="left">Texto alineado a la izquierda</p> El resultado seria: Texto alineado a la izquierda Para una justificacin al centro: <p align="center">Texto alineado al centro</p> quedara: Texto alineado al centro Para justificar a la derecha: <p align="right">Texto alineado a la derecha</p> cuyo efecto seria: Texto alineado a la derecha Como veis, en cada caso el atributo align toma determinados valores que son escritos entre comillas. En algunas ocasiones necesitamos especificar algunos atributos para el correcto funcionamiento de la etiqueta. En otros casos, el propio navegador toma un valor definido por defecto. Para el caso de align, el valor por defecto es left. Nota: Los atributos tienen sus valores indicados entre comillas ("), pero si no los indicamos entre comillas tambin funcionar en la mayora de los casos. Sin em-
41
Unidad:
Edicin No. 1
Programacin Web
bargo, es aconsejable que pongamos siempre las comillas para acostumbrarnos a utilizarlas, por dar homogeneidad a nuestros cdigos y para evitar errores futuros en sistemas ms quisquillosos. El atributo align no es exclusivo de la etiqueta <p>. Otras etiquetas muy comunes, que veremos ms adelante, entre las cuales se introducen texto o imgenes, suelen hacer uso de este atributo de una forma habitual. Imaginemos un texto relativamente largo donde todos los prrafos estn alineados a la izquierda (por ejemplo). Una forma de simplificar nuestro cdigo y de evitar introducir continuamente el atributo align sobre cada una de nuestras etiquetas es utilizando la etiqueta <div>. Esta etiqueta por si sola no sirve para nada. Tiene que estar acompaada del atributo align y lo que nos permite es alinear cualquier elemento (prrafo o imagen) de la manera que nosotros deseemos. As, el cdigo: <p align="left">Parrafo1</p> <p align="left"> Parrafo3</p> <p align="left"> Parrafo2</p> es equivalente a: <div align="left"> <p>Parrafo1</p> <p>Parrafo2</p> <p>Parrafo3</p> </div> Como hemos visto, la etiqueta <div> marca divisiones en las que definimos un mismo tipo de alineado. Ejemplo prctico: Para practicar un poco lo que acabamos de ver vamos a proponer un ejercicio que podis resolver en vuestros ordenadores. Simplemente queremos construir una pgina que tenga, por este orden:
42
Unidad:
Edicin No. 1
Programacin Web
2 Prrafos centrados 3 Prrafos alineados a la derecha Un salto de lnea triple 1 prrafo alineado a la izquierda No vamos a escribir en esta ocasin el cdigo fuente del ejercicio. Podemos verlo en funcionamiento en nuestro navegador y en la ventana podemos obtener el cdigo fuente seleccionando en el men Ver la opcin Cdigo fuente. Ver el ejercicio en marcha. Encabezados Existen otras etiquetas para definir prrafos especiales, formateados como ttulos. Son los encabezados o Header en ingls. Como decimos, son etiquetas que formatean el texto como un titular, para lo cual asignan un tamao mayor de letra y colocan el texto en negrita. Hay varios tipos de encabezados, que se diferencian en el tamao de la letra que utilizan. La etiqueta en concreto es la <h1>, para los encabezados ms grandes, <h2> para los de segundo nivel y as hasta <h6> que es el encabezado ms pequeo. Los encabezados implican tambin una separacin en prrafos, as que todo lo que escribamos dentro de <h1> y </h1> (o cualquier otro encabezado) se colocar en un prrafo independiente. Podemos ver cmo se presentan algunos encabezados a continuacin. <h1>Encabezado de nivel 1</h1> Se ver de esta manera en la pgina: Encabezado de nivel 1 Los encabezados, como otras etiquetas de HTML, soportan el atributo align. Vemos un ejemplo de encabezado de nivel 2 alineado al centro. <h2 align="center">Encabezado de nivel 2</h2> Se ver de esta manera en la pgina: Encabezado de nivel 2
43
Unidad:
Edicin No. 1
Programacin Web
Otro ejercicio interesante es construir una pgina web que contenga todos los encabezados posibles. Se puede ver a continuacin. <html> <head> <title>Todos los encabezados</title> </head> <body> <h1>Encabezado de nivel 1</h1> <h2>Encabezado de nivel 2</h2> <h3>Encabezado de nivel 3</h3> <h4>Encabezado de nivel 4</h4> <h5>Encabezado de nivel 5</h5> <h6>Encabezado de nivel 6</h6> </body> </html> Formateando el texto Vemos como colocar negritas, itlicas, subrayados, subndices y superndices. Adems de todo lo relativo a la organizacin de los prrafos, uno de los aspectos primordiales del formateo de un texto es el de la propia letra. Resulta muy comn y prctico presentar texto resaltado en negrita, itlica y otros. Paralelamente el uso de ndices, subndices resulta vital para la publicacin de textos cientficos. Todo esto y mucho ms es posible por medio del HTML a partir de multitud de etiquetas entre las cuales vamos a destacar algunas. Negrita Podemos escribir texto en negrita incluyndolo dentro de las etiquetas <b> y </b> (bold). Esta misma tarea es desempeada por <strong> y </strong> siendo ambas equivalentes. Nosotros nos inclinamos por la primeras por simple razon de esfuerzo. Escribiendo un cdigo de este tipo: <b>Texto en negrita</b> Obtenemos este resultado:
44
Unidad:
Edicin No. 1
Programacin Web
Texto en negrita Nota: Qu diferencia hay entre <b> y <strong>? Aunque las dos etiquetas hacen el mismo efecto, tienen una peculiaridad que las hace distintas. La etiqueta <b> indica negrita, mientras que la etiqueta <strong> indica que se debe escribir resaltado. El HTML lo interpretan los navegadores segn su criterio, es por eso que las pginas se pueden ver de distinta manera en unos browsers y en otros. La etiqueta <H1> quiere decir "encabezado de nivel 1", es el navegador el responsable de formatear el texto de manera que parezca un encabezado de primer nivel. En la prctica los encabezados de Internet Explorer y Netscape son muy parecidos (tamao de letra grande y en negrita), pero otro navegador podra colocar los encabezados con subrayado si le pareciese oportuno. La diferencia entre <b> y <strong> se podr entender ahora. Mientras que <b> significa simplemente negrita y todos los navegadores la interpretarn como negrita, <strong> es una etiqueta que significa que se tiene que resaltar fuertemente el texto y cada navegador es el responsable de resaltarlo como desee. En la prctica <strong> coloca el texto en negrita, pero podra ser que un navegador decidiese resaltar colocando negrilla, subrayado y color rojo en el texto. Itlica Tambin en este caso existen dos posibilidades, una corta: <i> e </i> (italic) y otra un poco ms larga: <em> y </em>. En este manual, y en la mayora de las pginas que veris por ah, os encontraris con la primera forma sin duda ms sencilla a escribir y a acordarse. He aqu un ejemplo de texto en itlica: <i>Texto en itlica</i> Que da el siguiente efecto: Texto en itlica Subrayado El HTML nos propone tambin para el subrayado el par de etiquetas: <u> y </u> (underlined). Sin embargo, el uso de subrayados ha de ser aplicado con mucha
45
Unidad:
Edicin No. 1
Programacin Web
precaucin dado que los enlaces hipertexto van, a no ser que se indique lo contrario, subrayados con lo que podemos confundir al lector y apartarlo del verdadero inters de nuestro texto. Subndices y suprandices Este tipo de formato resulta de extremada utilidad para textos cientficos. Las etiquetas empleadas son: <sup> y </sup> para los suprandices <sub> y </sub> para los subndices Aqu tenis un ejemplo: La <sup>13</sup>CC<sub>3</sub>H<sub>4</sub>ClNOS es un heterociclo alergeno enriquecido El resultado: La 13CC3H4ClNOS es un heterociclo alergeno enriquecido Anidar etiquetas Todas estas etiquetas y por supuesto el resto de las vistas y que veremos ms adelante pueden ser anidadas unas dentro de otras de manera a conseguir resultados diferentes. As, podemos sin ningn problema crear texto en negrita e itlica embebiendo una etiqueta dentro de la otra: <b>Esto slo est en negrita <i>y esto en negrita e itlica</i></b> Esto nos dara: Esto slo est en negrita y esto en negrita e itlica Color, tamao y tipo de letra Seguimos aprendiendo etiquetas que nos sirven para formatear el texto.
46
Unidad:
Edicin No. 1
Programacin Web
A pesar de que por razones de homogeneidad y sencillez de cdigo este tipo de formatos son controlados actualmente por hojas de estilo en cascada (de las cuales ya tendremos tiempo de hablar), existe una forma clsica y directa de definir color tamao y tipo de letra de un texto determinado. Esto se hace a partir de la etiqueta <font> y su cierre correspondiente. Dentro de esta etiqueta deberemos especificar los atributos correspondientes a cada uno de estos parmetros que deseamos definir. A continuacin os comentamos los atributos principales de esta etiqueta: Atributo face Define el tipo de letra. Este atributo es interpretado por versiones de Netscape a partir de la 3 y de MSIE 3 o superiores. Otros navegadores las ignoran completamente y muestran el texto con la fuente que utilizan. Hay que tener cuidado con este atributo ya que cada usuario, dependiendo de la plataforma que utilice, puede no disponer de los mismos tipos de letra que nosotros con lo que, si nosotros elegimos un tipo del que no dispone, el navegador se ver forzado a mostrar el texto con la fuente que utiliza por defecto (suele ser Times New Roman). Para evitar esto, dentro del atributo suelen seleccionarse varios tipos de letra separados por comas. En este caso el navegador comprobar que dispone del primer tipo enumerado y si no es as, pasar al segundo y as sucesivamente hasta encontrar un tipo que posea o bien acabar la lista y poner la fuente por defecto. Veamos un ejemplo. <font face="Comic Sans otra tipografa</font> MS,arial,verdana">Este texto tiene
Que se visualizara as en una pgina web. Este texto tiene otra tipografa Color, tamao y tipo de letra Seguimos aprendiendo etiquetas que nos sirven para formatear el texto. A pesar de que por razones de homogeneidad y sencillez de codigo este tipo de formatos son controlados actualmente por hojas de estilo en cascada (de las cuales ya tendremos tiempo de hablar), existe una forma clsica y directa de definir color tamao y tipo de letra de un texto determinado.
47
Unidad:
Edicin No. 1
Programacin Web
Esto se hace a partir de la etiqueta <font> y su cierre correspondiente. Dentro de esta etiqueta deberemos especificar los atributos correspondientes a cada uno de estos parmetros que deseamos definir. A continuacin os comentamos los atributos principales de esta etiqueta: Atributo face Define el tipo de letra. Este atributo es interpretado por versiones de Netscape a partir de la 3 y de MSIE 3 o superiores. Otros navegadores las ignoran completamente y muestran el texto con la fuente que utilizan. Hay que tener cuidado con este atributo ya que cada usuario, dependiendo de la plataforma que utilice, puede no disponer de los mismos tipos de letra que nosotros con lo que, si nosotros elegimos un tipo del que no dispone, el navegador se ver forzado a mostrar el texto con la fuente que utiliza por defecto (suele ser Times New Roman). Para evitar esto, dentro del atributo suelen seleccionarse varios tipos de letra separados por comas. En este caso el navegador comprobar que dispone del primer tipo enumerado y si no es as, pasar al segundo y as sucesivamente hasta encontrar un tipo que posea o bien acabar la lista y poner la fuente por defecto. Veamos un ejemplo. <font face="Comic Sans otra tipografa</font> MS,arial,verdana">Este texto tiene
Que se visualizara as en una pgina web. Este texto tiene otra tipografa Nota: Aqu tenemos un ejemplo de atributo cuyo valor debe estar limitado por comillas ("). Habamos dicho que las comillas eran opcionales en los atributos, sin embargo esto no es as siempre. Si el valor del atributo contiene espacios, como es el caso de: face="Comic Sans MS,arial,verdana" debemos colocar las comillas para limitarlo. En caso de no tener comillas face=Comic Sans MS,arial,verdana
48
Unidad:
Edicin No. 1
Programacin Web
se entendera que face=Comic, pero no se tendra en cuenta todo lo que sigue, porque HTML no lo asociara al valor del atributo. En este caso HTML pensara que las siguientes palabras (despus del espacio) son otros atributos, pero como no los conoce como atributos simplemente los desestimar. Atributo size Define el tamao de la letra. Este tamao puede ser absoluto o relativo. Si hablamos en trminos absolutos, existen 7 niveles de tamao distintos numerados de 1 a 7 por orden creciente. Elegiremos por tanto un valor size="1" para la letra ms pequea o size="7" para la ms grande. <font size=4>Este texto es ms grande</font> Que se visualizara as en una pgina web.
Este texto es ms grande

Podemos asimismo modificar el tamao de nuestra letra con respecto al del texto mostrado precedentemente definiendo el nmero de niveles que queremos subir o bajar en esta escala de tamaos por medio de un signo + o -. De este modo, si definimos nuestro atributo como size="+1" lo que queremos decir es que aumentamos de un nivel el tamao de la letra. Si estabamos escribiendo previamente en 3, pasaremos automticamente a 4. Los tamaos reales que veremos en pantalla dependern de la definicin y del tamao de fuente elegido por el usuario en el navegador. Este tamao de fuente puede ser definido en el Explorer yendo al menu superior, Ver/Tamao de la fuente. En Netscape elegiremos View/Text Size. Esta flexibilidad puede en ms de una ocasin resultarnos embarazosa ya que en muchos casos desearemos que el tamao del texto permanezca constante para que ste quepa en un determinado espacio. Veremos en su momento que esta prefijacin del tamao puede ser llevada a cabo por las hojas de estilo en cascada. Atributo color El color del texto puede ser definido mediante el atributo color. Cada color es a su vez definido por un nmero hexadecimal que esta compuesto a su vez de tres par-
49
Unidad:
Edicin No. 1
Programacin Web
tes. Cada una de estas partes representa la contribucin del rojo, verde y azul al color en cuestin. Podis entender cmo funciona esta numeracin y cules son los colores que resultan ms compatibles a partir de este artculo. Por otra parte, es posible definir de una manera inmediata algunos de los colores ms frecuentemente usados para los que se ha creado un nombre ms nemotcnico:
<font color="red">Este texto est en rojo</font> Que se visualizara as en una pgina web. Este texto est en rojo Con todo esto estamos ya en disposicin de crear un texto formateado de una forma realmente elaborada. Pongamos pues en prctica todo lo que hemos aprendido en estos capitulos haciendo un ejercicio consistente en una pgina que tenga las siguientes caractersticas:
50
Unidad:
Edicin No. 1
Programacin Web
Un titular con encabezado de nivel 1, en itlica y color verde oliva. Un segundo titular con encabezado de nivel 2, tambin de color verde oliva. Todo el texto de la pgina deber presentarse con una fuente distinta de la fuente por defecto. Por ejemplo "Comic Sans MS" y en caso de que sta no est en el sistema que se coloque la fuente "Arial".
Los colores y HTML En la composicin de webs juegan un papel muy importante los colores. Se indican en valores RGB, es decir, que para conseguir un color cualquiera mezclaremos cantidades de Rojo, Verde y Azul. Los valores RBG se indican en numeracin hexadecimal, en base 16. (Los dgito pueden crecer hasta 16. Como no hay tantos dgitos numricos se utilizan las letras de la A a la F.
0=0 1=1 2=2 3=3
4=4 5=5 6=6 7=7
8=8 9=9 A=10 B=11
C=12 D=13 E=14 F=15
Tabla color
de
Para conseguir un color, mezclaremos valores de esta manera:
51
Unidad:
Edicin No. 1
Programacin Web
RRGGBB
Donde cada valor puede crecer desde 00 hasta FF.
Ejemplo: Cmo se cambiara la fuente para escribir en rojo: <font color="#FF0000">Rojo</font>
Al Atributo color le damos un valor RGB en formato hexadecimal. El caracter # se coloca al principio de la cadena. Otros colores:
Naranja Verde turquesa Azul oscuro #FF8000 #339966 #000080
Colores compatibles en todos los sistemas
Como las pginas web las tienen que ver todos los usuarios, y los sistemas que utilizan para entrar son distintos, hay que utilizar colores compatibles con la paleta de todos ellos. La forma de conseguir esto es limitando nuestros colores a los que se pueden conseguir utilizando la siguiente norma:
Utilizaremos estos valores: siempre
00 33 66 99
52
Unidad:
Edicin No. 1
Programacin Web
CC FF
Ejemplos:
#3366FF
#FF9900
#666666
Se consiguen los colores siguientes:

#000000 #003300 #006600 #009900 #00CC00 #00FF00 #330000 #333300 #336600 #339900 #33CC00 #33FF00 #660000 #663300 #666600 #669900 #66CC00 #66FF00 #000033 #003333 #006633 #009933 #00CC33 #00FF33 #330033 #333333 #336633 #339933 #33CC33 #33FF33 #660033 #663333 #666633 #669933 #66CC33 #66FF33 #000066 #003366 #006666 #009966 #00CC66 #00FF66 #330066 #333366 #336666 #339966 #33CC66 #33FF66 #660066 #663366 #666666 #669966 #66CC66 #66FF66 #000099 #003399 #006699 #009999 #00CC99 #00FF99 #330099 #333399 #336699 #339999 #33CC99 #33FF99 #660099 #663399 #666699 #669999 #66CC99 #66FF99 #0000CC #0033CC #0066CC #0099CC #00CCCC #00FFCC #3300CC #3333CC #3366CC #3399CC #33CCCC #33FFCC #6600CC #6633CC #6666CC #6699CC #66CCCC #66FFCC #0000FF #0033FF #0066FF #0099FF #00CCFF #00FFFF #3300FF #3333FF #3366FF #3399FF #33CCFF #33FFFF #6600FF #6633FF #6666FF #6699FF #66CCFF #66FFFF
53
Unidad:
Edicin No. 1
Programacin Web
#990000 #993300 #996600 #999900 #99CC00 #99FF00 #CC0000 #CC3300 #CC6600 #CC9900 #CCCC00 #CCFF00 #FF0000 #FF3300 #FF6600 #FF9900 #FFCC00 #FFFF00
#9900CC #9933CC #9966CC #9999CC #99CCCC #99FFCC #CC00CC #CC33CC #CC66CC #CC99CC #CCCCCC #CCFFCC #FF00CC #FF33CC #FF66CC #FF99CC #FFCCCC #FFFFCC
#9900FF #9933FF #9966FF #9999FF #99CCFF #99FFFF #CC00FF #CC33FF #CC66FF #CC99FF #CCCCFF #CCFFFF #FF00FF #FF33FF #FF66FF #FF99FF #FFCCFF #FFFFFF
TABLA DE INSTRUCCIONES HTML Nombre A ABBR ACRONYM Descripcin origen o destino de vnculo abreviatura (p.ej., WWW, HTTP, etc.)
54
Unidad:
Edicin No. 1
Programacin Web
ADDRESS APPLET AREA B BASE BASEFONT BDO BIG BODY BR BUTTON CAPTION CENTER CITE CODE COL COLGROUP DD DEL DFN DIR DIV DL DT EM FIELDSET FONT FORM FRAME
informacin sobre el autor applet Java rea de un mapa de imgenes en el lado del cliente estilo de texto en negrita URI base del documento tamao base de fuente anular algoritmo BiDi I18N estilo de texto grande cuerpo del documento salto de lnea forzado botn ttulo de tabla forma abreviada de DIV align=center cita fragmento de cdigo de computadora columna de una tabla grupo de columnas de una tabla descripcin de una definicin texto borrado definicin lista tipo directorio contenedor genrico de idioma/estilo lista de definiciones trmino definido nfasis grupo de controles de un formulario cambio local de la fuente formulario interactivo subventana
BLOCKQUOTE cita larga
55
Unidad:
Edicin No. 1
Programacin Web
FRAMESET H1 H2 H3 H4 H5 H6 HEAD HR HTML I IFRAME IMG INPUT INS ISINDEX KBD LABEL LEGEND LI LINK MAP MENU META NOFRAMES NOSCRIPT OBJECT OL
subdivisin en ventanas encabezado encabezado encabezado encabezado encabezado encabezado cabecera del documento separador horizontal elemento raz del documento estilo de texto en itlica subventana en lnea imagen incluida control de formulario texto insertado entrada de texto en una sola lnea con indicador texto que debe introducir el usuario texto del rtulo de un campo de formulario leyenda de un grupo de campos objeto de lista un vnculo independiente del medio mapa de imgenes en el lado del cliente lista tipo men metainformacin genrica contenedor de contenido alternativo para la representacin no basada en marcos contenedor de contenido alternativo para la representacin no basada en scripts objeto incluido genrico lista ordenada
56
Unidad:
Edicin No. 1
Programacin Web
OPTGROUP OPTION P PARAM PRE Q S SAMP SCRIPT SELECT SMALL SPAN STRIKE STRONG STYLE SUB SUP TABLE TBODY TD TEXTAREA TFOOT TH THEAD TITLE TR TT U UL VAR
grupo de opciones opcin seleccionable prrafo valor de propiedad con nombre texto preformateado cita corta en lnea estilo de texto tachado ejemplo de salida de programas, scripts, etc. sentencias de script selector de opciones estilo de texto pequeo contenedor genrico de idioma/estilo estilo de texto tachado nfasis fuerte informacin de estilo subndice superndice cuerpo de tabla celda de datos de una tabla campo de texto multilnea pie de tabla celda de encabezado de tabla cabecera de tabla ttulo del documento fila de una tabla estilo de texto de teletipo o monoespacio estilo de texto subrayado lista no ordenada variable o argumento de un programa
57
Unidad:
Edicin No. 1
Programacin Web
1.3.3 Tablas en HTML.
Tablas en HTML Vemos lo que son las tablas, para que sirven y en qu casos podemos utilizarlas. Vemos la tabla ms simple posible. Una tabla en un conjunto de celdas organizadas dentro de las cuales podemos alojar distintos contenidos. En un principio nos podra parecer que las tablas son raramente tiles y que pueden ser utilizadas principalmente para listar datos como agendas, resultados y otros datos de una forma organizada. Nada ms lejos de la realidad. Hoy, gran parte de los diseadores de pginas basan su maquetacin en este tipo de artilugios. En efecto, una tabla nos permite organizar y distribuir los espacios de la manera ms optima. Nos puede ayudar a generar texto en columnas como los peridicos, prefijar los tamaos ocupados por distintas secciones de la pgina o poner de una manera sencilla un pie de foto a una imagen. Puede que en un principio nos resulte un poco complicado trabajar con estas estructuras pero, si deseamos crear una pgina de calidad, tarde o temprano tendremos que vrnoslas con ellas y nos daremos cuenta de las posibilidades nos ofrecen. Para empezar, nada ms sencillo que por el principio: las tablas son definidas por las etiquetas <table> y </table>. Dentro de estas dos etiquetas colocaremos todas las otras etiquetas, textos e imgenes que darn forma y contenido a la tabla. Las tablas son descritas por lneas de izquierda a derecha. Cada una de estas lneas es definida por otra etiqueta y su cierre: <tr> y </tr>. Asimismo, dentro de cada lnea, habr diferentes celdas. Cada una de estas celdas ser definida por otro par de etiquetas: <td> y </td>. Dentro de estas etiquetas ser donde coloquemos nuestro contenido. Aqu tenis un ejemplo de estructura de tabla: <table> <tr> <td>Celda 1, linea 1</td> <td> Celda 2, linea 1</td> </tr> <tr>
58
Unidad:
Edicin No. 1
Programacin Web
<td> Celda 1, linea 2</td> <td> Celda 2, linea 2</td> </tr> </table> El resultado: Celda 1, linea 1 Celda 1, linea 2 Celda 2, linea 1 Celda 2, linea 2
Tablas en HTML. Atributos para filas y celdas. Continuamos con las tablas. Vemos los atributos que podemos colocar en las filas y las celdas. Hemos visto en el capitulo anterior que las tablas estn compuestas de lneas que, a su vez, contienen celdas. Las celdas son delimitadas por las etiquetas <td> o por las etiquetas <th> (si queremos texto en negrita y centrado) y constituyen un entorno independiente del resto del documento. Esto quiere decir que:

Podemos usar prcticamente cualquier tipo de etiqueta dentro de la etiqueta <td> para, de esta forma, dar forma a su contenido. Las etiquetas situadas en el interior de la celda no modifican el resto del documento. Las etiquetas de fuera de la celda no son tenidas en cuenta por sta.
As pues, podemos especificar el formato de nuestras celdas a partir de etiquetas introducidas en su interior o mediante atributos colocados dentro de la etiqueta de celda <td> o bien, en algunos casos, dentro de la etiqueta <tr>, si deseamos que el atributo sea vlido para toda la lnea. La forma ms til y actual de dar forma a las celdas es a partir de las hojas de estilo en cascada que ya tendris la oportunidad de abordar ms adelante. Veamos a continuacin algunos atributos tiles para la construccin de nuestras tablas. Empecemos viendo atributos que nos permiten modificar una celda en concreto o toda una lnea:
59
Unidad:
Edicin No. 1
Programacin Web
align
Justifica el texto de la celda del mismo modo que si fuese el de un prrafo. Podemos elegir si queremos que el texto aparezca arriba (top), en el centro (middle) o abajo (bottom) de la celda. Da color a la celda o lnea elegida.
valign
bgcolor
bordercolor Define el color del borde.
Otros atributos que pueden ser nicamente asignados a una celda y no al conjunto de celdas de una lnea son: background Nos permite colocar un fondo para la celda a partir de un enlace a una imagen. height width colspan rowspan Define la altura de la celda en pixels o porcentaje. Define la anchura de la celda en pixels o porcentaje. Expande una celda horizontalmente. Expande una celda verticalmente.
Estos ltimos cuatro atributos descritos son de gran utilidad. Concretamente, height y width nos ayudan a definir las dimensiones de nuestras celdas de una forma absoluta (en pixels o puntos de pantalla) o de una forma relativa, es decir por porcentajes referidos al tamao total de la tabla.
A titulo de ejemplo:
<td width="80">
60
Unidad:
Edicin No. 1
Programacin Web
Dar una anchura de 80 pixels a la celda. Sin embargo:

<td width="80%">
Dar una anchura a la celda del 80% de la anchura de la tabla. Hay que tener en cuenta que, definidas las dimensiones de las celdas, el navegador va a hacer lo que buenamente pueda para satisfacer al programador. Esto quiere decir que puede que en algunas ocasiones el resultado que obtengamos no sea el esperado. Concretamente, si el texto presenta una palabra excesivamente larga, puede que la anchura de la celda se vea aumentada para mantener la palabra en la misma lnea. Por otra parte, si el texto resulta muy largo, la celda aumentara su altura para poder mostrar todo su contenido. Anlogamente, si por ejemplo definimos dos anchuras distintas a celdas de una misma columna, el navegador no sabr a cual hacer caso. Es por ello que resulta conveniente tener bien claro desde un principio como es la tabla que queremos disear. No esta de ms si la prediseamos en papel si la complejidad es importante. El HTML resulta en general fcil pero las tablas pueden convertirse en un verdadero quebradero de cabeza si no llegamos a comprenderlas debidamente. Los atributos rowspan y colspan son tambin utilizados frecuentemente. Gracias a ellos es posible expandir celdas fusionando stas con sus vecinas. El valor que pueden tomar estas etiquetas es numrico. El nmero representa la cantidad de celdas fusionadas.
<td colspan="2">
Fusionara la celda en cuestin con su vecina derecha. Esta celda tiene un colspan="2"
61
Unidad:
Edicin No. 1
Programacin Web
Celda normal
Otra celda
Del mismo modo,
<td rowspan="2"> Celda Esta celda tiene rowspan="2", por Normal eso tiene fusionada la celda de abajo. Otra celda normal
Expandir la celda hacia abajo fusionndose con la celda inferior.
1.3.4 Formularios. Hasta ahora hemos visto la forma en la que el HTML gestiona y muestra la informacin, esencialmente mediante texto, imgenes y enlaces. Nos queda por ver de qu forma podemos intercambiar informacin con nuestro visitante. Desde luego, este nuevo aspecto resulta primordial para gran cantidad de acciones que se pueden llevar a cabo mediante el Web: Comprar un articulo, rellenar una encuesta, enviar un comentario al autor... Hemos visto anteriormente que podamos, mediante los enlaces, contactar directamente con un correo electrnico. Sin embargo, esta opcin puede resultar en algunos casos poco verstiles si lo que deseamos es que el navegante nos enve una informacin bien precisa. Es por ello que el HTML propone otra solucin mucho ms amplia: Los formularios. Los formularios son esas famosas cajas de texto y botones que podemos encontrar en muchas pginas web. Son muy utilizados para realizar bsquedas o bien para introducir datos personales por ejemplo en sitios de comercio electrnico. Los datos que el usuario introduce en estos campos son enviados al correo electrnico
62
Unidad:
Edicin No. 1
Programacin Web
del administrador del formulario o bien a un programa que se encarga de procesarlo automticamente. Usando HTML podemos nicamente enviar el formulario a un correo electrnico. Si queremos procesar el formulario mediante un programa la cosa puede resultar un poco ms compleja ya que tendremos que emplear otros lenguajes ms sofisticados. En este caso, la solucin ms sencilla es utilizar los programas prediseados que nos proponen un gran nmero de servidores de alojamiento y que nos permiten almacenar y procesar los datos en forma de archivos u otros formatos. Si vuestras pginas estn alojadas en un servidor que no os propone este tipo de ventajas, siempre podis recurrir a servidores de terceros que ofrecen este u otro tipo de servicios gratuitos para webs. Por supuesto, existe otra alternativa que es la de aprender lenguajes como ASP o PHP que nos permitirn, entre otras cosas, el tratamiento de formularios. Los formularios son definidos por medio de las etiquetas <form> y </form>. Entre estas dos etiquetas colocaremos todos los campos y botones que componen el formulario. Dentro de esta etiqueta <form> debemos especificar algunos atributos: action Define el tipo de accin a llevar a cabo con el formulario. Como ya hemos dicho, existen dos posibilidades: El formulario es enviado a una direccin de correo electrnico El formulario es enviado a un programa o script que procesa su contenido
En el primer caso, el contenido del formulario es enviado a la direccin de correo electrnico especificada por medio de una sintaxis de este tipo: <form action="mailto:direccion@correo.com" ...> Si lo que queremos es que el formulario sea procesado por un programa, hemos de especificar la direccin del archivo que contiene dicho programa. La etiqueta quedara en este caso de la siguiente forma: <form action="direccin del archivo" ...> La forma en la que se expresa la localizacin del archivo que contiene el programa es la misma que la vista para los enlaces.
63
Unidad:
Edicin No. 1
Programacin Web
method Este atributo se encarga de especificar la forma en la que el formulario es enviado. Los dos valores posibles que puede tomar esta atributo son post y get. A efectos prcticos y, salvo que se os diga lo contrario, daremos siempre el valor post. enctype Se utiliza para indicar la forma en la que viajar la informacin que se mande por el formulario. En el caso ms corriente, enviar el formulario por correo electrnico, el valor de este atributo debe de ser "text/plain". As conseguimos que se enve el contenido del formulario como texto plano dentro del email. Si queremos que el formulario se procese automticamente por un programa, generalmente no utilizaremos este atributo, de modo que tome su valor por defecto, es decir, no incluiremos enctype dentro de la etiqueta <form> Ejemplo de etiqueta <form> completa As, para el caso ms habitual -el envo del formulario por correo- la etiqueta de creacin del formulario tendr el siguiente aspecto: <form action="mailto:direccion@correo.com (o nombre del archivo de proceso)" method="post" enctype="text/plain"> Entre esta etiqueta y su cierre colocaremos el resto de etiquetas que darn forma a nuestro formulario, las cuales sern vistas en captulos siguientes. Referencia: Mandar formulario por correo electrnico Los formularios se utilizan habitualmente para implementar un tipo de contacto con el navegante, que consiste en que ste pueda mandarnos sus comentarios por correo electrnico a nuestro buzn. Elementos de Formularios. Campos de texto El HTML nos propone una gran diversidad de alternativas a la hora de crear nuestros formularios. Estas van desde la clsica caja de texto hasta la lista de opciones
64
Unidad:
Edicin No. 1
Programacin Web
pasando por las cajas de validacin. Veamos en qu consiste cada una de estas modalidades y cmo podemos implementarlas en nuestro formulario. Texto corto Las cajas de texto son colocadas por medio de la etiqueta <input>. Dentro de esta etiqueta hemos de especificar el valor de dos atributos: type y name. La etiqueta es de la siguiente forma: <input type="text" name="nombre">
De este modo expresamos nuestro deseo de crear una caja de texto cuyo contenido ser llamado nombre (por ejemplo). El aspecto de este tipo de cajas es de sobra conocido, aqu lo podis ver:
El nombre del elemento del formulario es de gran importancia para poder identificarlo en nuestro programa de procesamiento o en el mail recibido. Por otra parte, es importante indicar el atributo type, ya que, como veremos, existen otras modalidades de formulario que usan esta misma etiqueta. El empleo de estas cajas esta fundamentalmente destinado a la toma de datos breves: palabras o conjuntos de palabras de longitud relativamente corta. Veremos ms adelante que existe otra forma de tomar textos ms largos a partir de otra etiqueta. Adems de estos dos atributos, esenciales para el correcto funcionamiento de nuestra etiqueta, existen otra serie de atributos que pueden resultarnos de utilidad pero que no son imprescindibles: size Define el tamao de la caja en nmero de caracteres. Si al escribir el usuario llega
65
Unidad:
Edicin No. 1
Programacin Web
al final de la caja, el texto ira desfilando a medida que se escribe haciendo desaparecer la parte de texto que queda a la izquierda.
maxlength Indica el tamao mximo del texto que puede ser tomado por el formulario. Es importante no confundirlo con el atributo size. Mientras el primero define el tamao aparente de la caja de texto, maxlength indica el tamao mximo real del texto que se puede escribir. Podemos tener una caja de texto con un tamao aparente (size) que es menor que el tamao mximo (maxlength). Lo que ocurrir en este caso es que, al escribir, el texto ira desfilando dentro de la caja hasta que lleguemos a su tamao mximo definido por maxlength, momento en el cual nos ser imposible continuar escribiendo.
value En algunos casos puede resultarnos interesante asignar un valor definido al campo en cuestin. Esto puede ayudar al usuario a rellenar ms rpidamente el formulario o darle alguna idea sobre la naturaleza de datos que se requieren. Este valor inicial del campo puede ser expresado mediante el atributo value. Veamos su efecto con un ejemplo sencillo: <input type="text" name="nombre" value="Perico Palotes">
Genera un campo de este tipo:

Perico Palote
Veremos posteriormente que este atributo puede resultar relevante en determinadas situaciones.
66
Unidad:
Edicin No. 1
Programacin Web
Texto oculto Podemos esconder el texto escrito por medio asteriscos de manera a aportar una cierta confidencialidad. Este tipo de campos son anlogos a los de texto con una sola diferencia: remplazamos el atributo type="text" por type="password":
<input type="password" name="nombre">
En este caso, podis comprobar que al escribir dentro del campo en lugar de texto veris asteriscos. Estos campos son ideales para la introduccin de datos confidenciales, principalmente cdigos de acceso. Se ve en funcionamiento a continuacin.
Texto largo Si deseamos poner a la disposicin de usuario un campo de texto donde pueda escribir cmodamente sobre un espacio compuesto de varias lneas, hemos de invocar una nueva etiqueta: <textarea> y su cierre correspondiente. Este tipo de campos son prcticos cuando el contenido a enviar no es un nombre telfono o cualquier otro dato breve, sino ms bien, un comentario, opinin, etc.
Dentro de la etiqueta textarea deberemos indicar, como para el caso visto anteriormente, el atributo name para asociar el contenido a un nombre que ser asemejado a una variable en los programas de proceso. Adems, podemos definir las dimensiones del campo a partir de los atributos siguientes:
67
Unidad:
Edicin No. 1
Programacin Web
rows Define el nmero de lneas del campo de texto.
cols Define el nmero de columnas del campo de texto.
La etiqueta queda por tanto de esta forma: <textarea name="comentario" rows="10" cols="40"></textarea>
El resultado es el siguiente:
Asimismo, es posible predefinir el contenido del campo. Para ello, no usaremos el atributo value sino que escribiremos dentro de la etiqueta el contenido que deseamos atribuirle. Vemoslo:
<textarea name="comentario" comentario....</textarea>
rows="10"
cols="40">Escribe
tu
68
Unidad:
Edicin No. 1
Programacin Web
Dar como resultado:

Escribe tu comentario....
1.4
Evolucin del desarrollo de aplicaciones Web.
Cuando Tim Berners-Lee invent la Web moderna en CERN, se pretenda que sta sirviera como un sistema que hiciera posible que los documentos estticos se almacenaran en un sistema basado en la red con vnculos al mismo. Con el paso de los aos, se fueron incorporando innovaciones y el siguiente paso lgico fueron los documentos activos que se generan en el momento en que se solicitan, con informacin especfica del momento o del usuario. Tecnologas como CGI activaron este aspecto. Ms adelante, la capacidad para generar documentos en la Web se convirti en algo primordial y la tecnologa evolucion de CGI, a Java, ASP y, posteriormente, a ASP.NET. ASP.NET supuso un hito en la capacidad de los desarrolladores para desarrollar aplicaciones web de calidad con un paradigma de desarrollo de servidores y con las mejores herramientas de la lnea de productos Visual Studio. La experiencia del usuario result ser una gran barrera en las aplicaciones web, donde las restricciones tcnicas evitaban que stas pudieran ofrecer la misma variedad de uso que una aplicacin cliente con datos locales. El objeto XMLHttpRequest, que Microsoft lanz como parte de Internet Explorer en 2000, se convirti en la base de la tecnologa asncrona de JavaScript y XML (AJAX) que hizo posible que las aplicaciones web pudieran proporcionar una respuesta ms dinmica a las entradas de los usuarios, mediante la actualizacin de pequeas porciones de una pgina web sin necesidad de volver a cargar totalmente los contenidos. Las soluciones innovadores que se generaron con AJAX, como los mapas regionales de Windows Live, llevaron a las aplicaciones web a
69
Unidad:
Edicin No. 1
Programacin Web
dar un paso adelante en su capacidad para lograr un uso similar a las aplicaciones cliente. Silverlight representa el paso siguiente en el desarrollo del potencial de riqueza en utilizacin que los desarrolladores y diseadores de aplicaciones pueden presentar a sus clientes. Esto se consigue permitiendo a los diseadores expresar su creatividad y guardar su trabajo en un formato que funcione directamente en la Web. En el pasado, los diseadores creaban un sitio web y ofrecan una utilizacin a los usuarios a travs de herramientas que proporcionaban resultados variados, pero el desarrollador tena que solventar las restricciones de la plataforma web siendo capaz de ofrecer tales resultados. En el modelo de Silverlight, los diseadores pueden generar el tipo de utilizacin para el usuario que desean y expresarlo como XAML. Un desarrollador puede incorporar este XAML directamente en una pgina web mediante el tiempo de ejecucin de Silverlight. De esta forma, ambos pueden trabajar ms estrechamente que antes con el fin de proporcionar una utilizacin completa y variada al usuario. Como XAML es XML, est basado en texto, lo cual proporciona una descripcin de sus ricos contenidos fcil de inspeccionar y totalmente compatible con los firewall. Aunque se pueden usar otras tecnologas como subprogramas en Java, ActiveX y Flash para implementar contenidos ms ricos que DHTML, CSS y JavaScript, todas ellas envan contenidos binarios al explorador. Esto resulta difcil de auditar, sin mencionar la dificultad de actualizacin, ya que para cualquier cambio es necesario que la aplicacin se vuelva a instalar, lo que no es tan fcil para el usuario y podra provocar estancamientos en las pginas. Cuando se usa Silverlight y es necesario realizar un cambio en el contenido enriquecido, se genera un nuevo archivo XAML en el servidor. La prxima vez que el usuario vaya a la pgina, se descargar este XAML y se actualizar la experiencia sin ninguna reinstalacin. En el ncleo de Silverlight est el mdulo de mejora del explorador que genera XAML y ofrece los grficos resultantes en la superficie del explorador. Se trata de una descarga pequea (menos de 2 MB), que se puede instalar cuando el usuario se encuentra con un sitio con contenido de Silverlight. Este mdulo expone el marco de trabajo subyacente de la pgina XAML a los desarrolladores de JavaScript, de forma que se hace posible la interaccin con el contenido en la pgina y, por tanto, el desarrollador puede, por ejemplo, escribir controladores de eventos o manipular los contenidos de la pgina XAML mediante el cdigo de JavaScript.
70
Unidad:
Edicin No. 1
Programacin Web
Desarrollo de Aplicaciones Web Con la introduccin de Internet y del Web en concreto, se han abierto infinidad de posibilidades en cuanto al acceso a la informacin desde casi cualquier sitio. Esto representa un desafo a los desarrolladores de aplicaciones, ya que los avances en tecnologa demandan cada vez aplicaciones ms rpidas, ligeras y robustas que permitan utilizar el Web. Afortunadamente, tenemos herramientas potentes para realizar esto, ya que han surgido nuevas tecnologas que permiten que el acceso a una base de datos desde el Web, por ejemplo, sea un mero trmite. El nico problema es decidir entre el conjunto de posibilidades la correcta para cada situacin. El viejo CGI ha cumplido con el propsito de aadir interactividad a las pginas Web pero sus deficiencias en el desarrollo de aplicaciones y en la escalabilidad de las mismas ha conducido al desarrollo de APIs especficos de servidor como Active Server Pages, ASP, y PHP, que son ms eficientes que su predecesor CGI. Para aprovechar el potencial de estas tecnologas y ofertar una solucin de servidor ms extensible y portable, Sun ha desarrollado la tecnologa llamada servlet. Los servlets Java son muy eficientes, debido al esquema de threads en el que se basan y al uso de una arquitectura estndar como la JVM, Java Virtual Machine. Otra nueva tecnologa viene a sumarse a las que extienden la funcionalidad de los servidores Web, llamada Java Server? Pages, JSP. Los JSP permiten juntar HTML, aplicaciones Java, y componentes como las Java Beans? creando una pgina Web especial que el servidor Web compila dinmicamente en un servlet la primera vez que es llamada. Qu es la Web 2.0? La Web 2.0 es la representacin de la evolucin de las aplicaciones tradicionales hacia aplicaciones web enfocadas al usuario final. El Web 2.0 es una actitud y no precisamente una tecnologa. Cuando el web inici, nos encontrbamos en un entorno esttico, con pginas en HTML que sufran pocas actualizaciones y no tenan interaccin con el usuario.
71
Unidad:
Edicin No. 1
Programacin Web
La Web 2.0 es la transicin que se ha dado de aplicaciones tradicionales hacia aplicaciones que funcionan a travs del web enfocadas al usuario final. Se trata de aplicaciones que generen colaboracin y de servicios que reemplacen las aplicaciones de escritorio. Todo inici cuando Dale Dougherty de OReilly Media utiliz este trmino en una conferencia en la que comparti una lluvia de ideas junto a Craig Cline de Media Live? en la que hablaba del renacimiento y evolucin de la web. Constantemente estaban surgiendo nuevas aplicaciones y sitios con sorprendentes funcionalidades. Y as se dio la pauta para la Web 2.0 conference de 2004. Esta conferencia no solo fue exitosa sino que ya tuvo seguimiento en la Web 2.0 Conference del 2005 celebrada en Octubre. En la charla inicial del Web Conference se habl de los principios que tenan las aplicaciones Web 2.0: La web es la plataforma La informacin es el procesador Efectos de la red movidos por una arquitectura de participacin. La innovacin surge de caractersticas distribuidas por desarrolladores independientes. El fin del crculo de adopcin de software (Servicios en beta perpetuo) La Web 2.0 con ejemplos La forma ms fcil de comprender lo que significa la Web 2.0 es a travs de ejemplos. Podemos comparar servicios web que marcan claramente la evolucin hacia el Web 2.0: Web 1.0 > Web 2.0 Doubleclick Google Ad Sense? (Servicios Publicidad) Ofoto Flickr (Comunidades fotogrficas) Akamai Bit Torrent? (Distribucin de contenidos)
72
Unidad:
Edicin No. 1
Programacin Web
mp3.com Napster (Descargas de msica) Britannica Online Wikipedia (Enciclopedias) Sitios personales Blogs (Pginas personales) Especulacin con dominios Optimizacin en motores de bsqueda Page views Cost per click CMSs Wikis (Manejo de contenidos) Categoras/Directorios Tagging Qu tecnologas apoyan a la Web 2.0? El Web 2.0 no significa precisamente que existe una receta para que todas nuestras aplicaciones web entren en este esquema. Sin embargo, existen varias tecnologas que estn utilizndose actualmente y que deberamos de examinar con ms cuidado en busca de seguir evolucionando junto al web. Algunas tecnologas que dan vida a un proyecto Web 2.0: Transformar software de escritorio hacia la plataforma del web. Respeto a los estndares del XHTML. Separacin de contenido del diseo con uso de hojas de estilo. Sindicacin de contenidos. Ajax (Asincronical javascript and xml). Uso de Flash, Flex o Lazlo. Uso de Ruby on Rails para programar pginas dinmicas. Utilizacin de redes sociales al manejar usuarios y comunidades.
73
Unidad:
Edicin No. 1
Programacin Web
Dar control total a los usuarios en el manejo de su informacin. Proveer A Pis? o XML para que las aplicaciones puedan ser manipuladas por otros. Facilitar el posicionamiento con URL sencillos. En qu nos sirve la Web 2.0? El uso de el trmino de Web 2.0 est de moda, dndole mucho peso a una tendencia que ha estado presente desde hace algn tiempo. En Internet las especulaciones han sido causantes de grandes burbujas tecnolgicas y han hecho fracasar a muchos proyectos. Adems, nuestros proyectos tienen que renovarse y evolucionar. El Web 2.0 no es precisamente una tecnologa, sino es la actitud con la que debemos trabajar para desarrollar en Internet. Tal vez all est la reflexin ms importante del Web 2.0 y como los webmasters deberan de prepararse. Yo ya estoy trabajando en renovar y mejorar algunos proyectos, no por que busque etiquetarlos con nuevas versiones, sino por que creo firmemente que la nica constante debe ser el cambio, y en Internet, el cambio debe de estar presente ms frecuentemente. Cuando Tim Berners-Lee invent la Web moderna en CERN, se pretenda que sta sirviera como un sistema que hiciera posible que los documentos estticos se almacenaran en un sistema basado en la red con vnculos al mismo. Con el paso de los aos, se fueron incorporando innovaciones y el siguiente paso lgico fueron los documentos activos que se generan en el momento en que se solicitan, con informacin especfica del momento o del usuario. Tecnologas como CGI activaron este aspecto. Ms adelante, la capacidad para generar documentos en la Web se convirti en algo primordial y la tecnologa evolucion de CGI, a Java, ASP y, posteriormente, a ASP.NET. ASP.NET supuso un hito en la capacidad de los desarrolladores para desarrollar aplicaciones web de calidad con un paradigma de desarrollo de servidores y con las mejores herramientas de la lnea de productos Visual Studio.
74
Unidad:
Edicin No. 1
Programacin Web
La experiencia del usuario result ser una gran barrera en las aplicaciones web, donde las restricciones tcnicas evitaban que stas pudieran ofrecer la misma variedad de uso que una aplicacin cliente con datos locales. El objeto XML Http Request?, que Microsoft lanz como parte de Internet Explorer en 2000, se convirti en la base de la tecnologa asncrona de Java Script? y XML (AJAX) que hizo posible que las aplicaciones web pudieran proporcionar una respuesta ms dinmica a las entradas de los usuarios, mediante la actualizacin de pequeas porciones de una pgina web sin necesidad de volver a cargar totalmente los contenidos. Las soluciones innovadores que se generaron con AJAX, como los mapas regionales de Windows Live, llevaron a las aplicaciones web a dar un paso adelante en su capacidad para lograr un uso similar a las aplicaciones cliente. Silverlight representa el paso siguiente en el desarrollo del potencial de riqueza en utilizacin que los desarrolladores y diseadores de aplicaciones pueden presentar a sus clientes. Esto se consigue permitiendo a los diseadores expresar su creatividad y guardar su trabajo en un formato que funcione directamente en la Web. En el pasado, los diseadores creaban un sitio web y ofrecan una utilizacin a los usuarios a travs de herramientas que proporcionaban resultados variados, pero el desarrollador tena que solventar las restricciones de la plataforma web siendo capaz de ofrecer tales resultados. En el modelo de Silverlight, los diseadores pueden generar el tipo de utilizacin para el usuario que desean y expresarlo como XAML. Un desarrollador puede incorporar este XAML directamente en una pgina web mediante el tiempo de ejecucin de Silverlight. De esta forma, ambos pueden trabajar ms estrechamente que antes con el fin de proporcionar una utilizacin completa y variada al usuario. Como XAML es XML, est basado en texto, lo cual proporciona una descripcin de sus ricos contenidos fcil de inspeccionar y totalmente compatible con los firewall. Aunque se pueden usar otras tecnologas como subprogramas en Java, Active X y Flash para implementar contenidos ms ricos que DHTML, CSS y Java Script, todas ellas envan contenidos binarios al explorador. Esto resulta difcil de auditar, sin mencionar la dificultad de actualizacin, ya que para cualquier cambio es necesario que la aplicacin se vuelva a instalar, lo que no es tan fcil para el usuario y podra provocar estancamientos en las pginas. Cuando se usa Silverlight y es necesario realizar un cambio en el contenido enriquecido, se genera un nuevo archivo XAML en el servidor. La prxima vez que el usuario vaya a la pgina, se descargar este XAML y se actualizar la experiencia sin ninguna reinstalacin.
75
Unidad:
Edicin No. 1
Programacin Web
En el ncleo de Silverlight est el mdulo de mejora del explorador que genera XAML y ofrece los grficos resultantes en la superficie del explorador. Se trata de una descarga pequea (menos de 2 MB), que se puede instalar cuando el usuario se encuentra con un sitio con contenido de Silverlight. Este mdulo expone el marco de trabajo subyacente de la pgina XAML a los desarrolladores de Java Script, de forma que se hace posible la interaccin con el contenido en la pgina y, por tanto, el desarrollador puede, por ejemplo, escribir controladores de eventos o manipular los contenidos de la pgina XAML mediante el cdigo de Java Script.
1.5
Hojas de estilo en cascada e introduccin al XML.
Las hojas de estilo en cascada (en ingls Cascading Style Sheets), CSS es un lenguaje usado para definir la presentacin de un documento estructurado escrito en HTML o XML (y por extensin en XHTML). El W3C (World Wide Web Consortium) es el encargado de formular la especificacin de las hojas de estilo que servirn de estndar para los agentes de usuario o navegadores. La idea que se encuentra detrs del desarrollo de CSS es separar la estructura de un documento de su presentacin. Por ejemplo, el elemento de HTML <h1> indica que un bloque de texto es un encabezamiento y que es ms importante que un bloque etiquetado como <H2>. Versiones ms antiguas de HTML permitan atributos extra dentro de la etiqueta abierta para darle formato (como el color o el tamao de fuente). No obstante, cada etiqueta <H1> deba disponer de la informacin si se deseaba un diseo consistente para una pgina y, adems, una persona que lea esa pgina con un navegador pierde totalmente el control sobre la visualizacin del texto. Cuando se utiliza CSS, la etiqueta <H1> no debera proporcionar informacin sobre cmo va a ser visualizado, solamente marca la estructura del documento. La informacin de estilo separada en una hoja de estilo, especifica cmo se ha de mostrar <H1>: color, fuente, alineacin del texto, tamao y otras caractersticas no visuales como definir el volumen de un sintetizador de voz (vase Sintetizacin del habla), por ejemplo. La informacin de estilo puede ser adjuntada tanto como un documento separado o en el mismo documento HTML. En este ltimo caso podran definirse estilos generales en la cabecera del documento o en cada etiqueta particular mediante el atributo "style".
76
Unidad:
Edicin No. 1
Programacin Web
Los tres tipos de estilos CSS proporciona tres caminos diferentes para aplicar las reglas de estilo a una pgina Web: 1. Una hoja de estilo externa, que es una hoja de estilo que est almacenada en un archivo diferente al archivo donde se almacena el cdigo HTML de la pgina Web. Esta es la manera de programar ms potente, porque separa completamente las reglas de formateo para la pgina HTML de la estructura bsica de la pgina. 2. Una hoja de estilo interna, que es una hoja de estilo que est incrustada dentro de un documento HTML. (Va a la derecha dentro del elemento <head>). De esta manera se obtiene el beneficio de separar la informacin del estilo, del cdigo HTML propiamente dicho. Se puede optar por copiar la hoja de estilo incrustada de una pgina a otra, (esta posibilidad es difcil de ejecutar si se desea para guardar las copias sincronizadas). En general, la nica vez que se usa una hoja de estilo interna, es cuando se quiere proporcionar alguna caracterstica a una pgina Web en un simple fichero, por ejemplo, si se est enviando algo a la pgina web. 3. Un estilo en lnea (inline), que es un mtodo para insertar el lenguaje de estilo de pgina, directamente, dentro de una etiqueta HTML. Esta manera de proceder no es totalmente adecuada. El incrustar la descripcin del formateo dentro del documento de la pgina Web, a nivel de cdigo se convierte en una tarea larga, tediosa y poco elegante de resolver el problema de la programacin de la pgina. Este modo de trabajo se podra usar de manera ocasional si se pretende aplicar un formateo con prisa, al vuelo. No es todo lo claro, o estructurado, que debera ser, pero funciona. Este es el mtodo recomendado para maquetar correos electrnicos en HTML. Introduccin a XML XML es un lenguaje de metamarcado que ofrece un formato para la descripcin de datos estructurados. Esto facilita unas declaraciones de contenido ms precisas y unos resultados de bsquedas ms significativos en varias plataformas. Adems, XML habilitar una nueva generacin de aplicaciones para ver y manipular datos basadas en el Web. Representacin estructural de los datos: XML ofrece una representacin estructural de los datos que se puede implementar ampliamente y es fcil de distribuir. XML es un subconjunto de SGML optimizado
77
Unidad:
Edicin No. 1
Programacin Web
para el Web. Definido por el World Wide Web Consortium (W3C) (en ingls), XML garantiza que los datos estructurados sean uniformes e independientes de aplicaciones o fabricantes. La interoperabilidad resultante est creando rpidamente una nueva generacin de aplicaciones de comercio electrnico en la Web. XML, que proporciona un estndar de datos que puede codificar el contenido, la semntica y los esquemas de una gran variedad de casos, desde los ms simples a los ms complejos, sirve para marcar lo siguiente: Un documento normal. Un registro estructurado, como un registro de citas o un pedido de compra. Un objeto con datos y mtodos, como el formulario permanente de un objeto Java o de un control ActiveX. Un registro de datos, como el conjunto de resultados de una consulta. Metacontenido sobre un sitio Web, como el formato de definicin de canal (CDF). Representaciones grficas, como la interfaz de usuario de una aplicacin. Entidades y tipos de esquema estndar. Todos los vnculos entre datos y personas que hay en el Web.
Cuando los datos llegan al escritorio del cliente, se pueden manipular, editar y presentar en varias vistas, sin tener que regresar al servidor. Ahora los servidores pueden ser ms escalables, gracias a la reduccin de las cargas de ancho de banda y computacin. Adems, dado que los datos se intercambian en el formato XML, se pueden combinar fcilmente desde distintas fuentes. XML es muy valioso para Internet, as como para los entornos de intranets corporativas de gran tamao, pues proporciona interoperabilidad mediante un formato basado en estndares flexible y abierto, con formas nuevas de acceso a las bases de datos existentes y de entregar datos a clientes de Web. Las aplicaciones se pueden generar ms rpidamente, su mantenimiento es ms sencillo y pueden ofrecer fcilmente varias vistas de los datos estructurados. En un principio, no rivalizarn HTML y XML, estos se complementarn el uno al otro, anudndose ambas gramticas. Este Lenguaje de marcas extensible (XML) es una versin abreviada del SGML (Standard Generalized Markup Language). Algunos de los objetivos planteados por el Grupo de Trabajo XML y el W3C son: XML debe ser directamente utilizable sobre Internet. XML debe soportar una amplia variedad de aplicaciones. XML debe ser compatible con SGML. Debe ser fcil la escritura de programas que procesen documentos XML.
78
Unidad:
Edicin No. 1
Programacin Web
El nmero de caractersticas opcionales en XML debe ser absolutamente mnimo, idealmente cero. Los documentos XML deben ser legibles por los usuarios de este lenguaje y razonablemente claros. El diseo de XML debe ser formal, conciso y preparado rpidamente. Los documentos XML deben ser fcilmente creables. La brevedad en las marcas XML es de mnima importancia.
A estos fines se le une unos estndares como el Unicode e ISO/IEC 10646 para caracteres, el Internet RCF 1766 para identificacin de lenguajes, ISO 639 para cdigos de nombres de lenguajes y tambin el ISO 3166 para cdigos de nombres de pases, para la normal comprensin de esta versin de XML. Tampoco tenemos que equivocarnos y pensar que el XML es un HTML++. Tanto el XML como el HTML tienen su base en el SGML. Es decir, es un metalenguaje que nos permite definir lenguajes para definir la estructura y el contenido de nuestros documentos. La definicin de la estructura y el contenido de un tipo de documento se realiza en una DTD. En ella definimos los elementos que conformarn ese tipo de documentos y como tienen que estar organizados para que sea correcto. Un ejemplo de DTD es por ejemplo la que define cmo tendrn que ser los documentos HTML. Por tanto, el HTML no es ms que un tipo de documento SGML que se utiliza en la Web, y esto es importante, ya que aqu radica su principal diferencia con el XML. El XML no es ningn tipo de documento SGML, sino que es una versin abreviada de SGML optimizada para su utilizacin en Internet. Esto significa que con l vamos a poder definir nuestros propios tipos de documentos (podremos definir nuestras propias etiquetas) y, por tanto, ya no dependeremos de un nico e inflexible tipo de documento HTML.
79
Unidad:
Edicin No. 1
Programacin Web
UNIDAD II. Desarrollo de aplicaciones Web. Objetivo: Comprender los conceptos y elementos bsicos que involucra el desarrollo de aplicaciones Web 2.1 Arquitectura de las aplicaciones Web.
En la ingeniera de software se denomina aplicacin web a aquellas aplicaciones que los usuarios pueden utilizar accediendo a un servidor web a travs de Internet o de una intranet mediante un navegador. En otras palabras, es una aplicacin software que se codifica en un lenguaje soportado por los navegadores web en la que se confa la ejecucin al navegador. Las aplicaciones web son populares debido a lo prctico del navegador web como cliente ligero, as como a la facilidad para actualizar y mantener aplicaciones web sin distribuir e instalar software a miles de usuarios potenciales. Existen aplicaciones como los webmails, wikis, weblogs, tiendas en lnea y la propia Wikipedia que son ejemplos bien conocidos de aplicaciones web. Es importante mencionar que una pgina Web puede contener elementos que permiten una comunicacin activa entre el usuario y la informacin. Esto permite que el usuario acceda a los datos de modo interactivo, gracias a que la pgina responder a cada una de sus acciones, como por ejemplo rellenar y enviar formularios, participar en juegos diversos y acceder a gestores de base de datos de todo tipo. ARQUITECTURA DE DOS CAPAS La arquitectura tradicional de cliente/servidor tambin es conocida como arquitectura de dos capas. Requiere una interfaz de usuario que se instala y corre en una PC o estacin de trabajo y enva solicitudes a un servidor para ejecutar operaciones complejas. Por ejemplo, una estacin de trabajo utilizada como cliente puede correr una aplicacin de interfaz de usuario que interroga a un servidor central de bases de datos. Ventajas del Sistema de Dos Capas: El desarrollo de aplicaciones en un ambie nte de dos capas es mucho mas rpido que en ambientes anteriores, pero no es necesariamente mas rpido que con el nuevo ambiente de tres capas. Las h erramientas para el desarrollo con dos capas son robustas y evaluadas. Las tcnicas de prototipo se emplean fcilmente. Las soluciones de dos capas trabajan
80
Unidad:
Edicin No. 1
Programacin Web
bien en ambientes no dinmicos estables, pero no se ejecutan bien en organizaciones rpidamente cambiantes. Desventajas del Sistema de Dos Capas: Los ambientes de dos capas requieren control excesivo de las versiones y demandan esfuerzo de distribucin de la aplicacin cuando se les hacen cambios. Esto se debe al hecho de que la mayora de la aplicacin lgica existe en la estacin de trabajo del cliente. La seguridad del sistema en un diseo de dos capas es compleja y a menudo requiere administracin de las bases de datos; esto es debido al nmero de dispositivos con acceso directo al ambiente de esas bases de datos. Las herramientas del cliente y de la base de datos, utilizadas en diseos de dos capas, constantemente estn cambiando. La dependencia a largo plazo de cualquier herramienta, puede complicar el escalamiento futuro o las implementaciones. ARQUITECTURA DE TRES CAPAS La arquitectura de tres capas es un diseo reciente que introduce una capa intermedia en el proceso. Cada capa es un proceso separado y bien definido corriendo en plataformas separadas. En la arquitectura tradicional de tres capas se instala una interfaz de usuario en la computadora del usuario final (el cliente). La arquitectura basada en Web transforma la interfaz de bsqueda existente (el explorador de Web), en la interfaz del usuario final. Ventajas de la Arquitectura de Tres Capas: Las llamas de la interfaz del usuario en la estacin de trabajo, al servidor de capa intermedia, son ms flexibles que en el diseo de dos capas, ya que la estacin solo necesita transferir parmetros a la capa intermedia. Con la arquitectura de tres capas, la interfaz del cliente no es requerida para comprender o comunicarse con el receptor de los datos. Por lo tanto, esa estructura de los datos puede ser modificada sin cambiar la interfaz del usuario en la PC. El cdigo de la capa intermedia puede ser reutilizado por mltiples aplicaciones si esta diseado en formato modular. La separacin de roles en tres capas, hace ms fcil reemplazar o modificar una capa sin afectar a los mdulos restantes. Desventajas de las Arquitecturas de Tres Capas y basadas en Web: Los ambientes de tres capas pueden incrementar el trfico en la red y requiere ms balance de carga u tolerancia a las fallas. Los exploradores actuales no son todos igu ales. La estandarizacin entre diferentes proveedores ha sido lenta en desarrollarse. Muchas organizaciones son forzadas a escoger uno en lugar de otro, mientras que cada uno ofrece sus propias y distintas ventajas.
81
Unidad:
Edicin No. 1
Programacin Web
2.2 Lenguajes de programacin del lado del cliente. El navegador es una especie de aplicacin capaz de interpretar las rdenes recibidas en forma de cdigo HTML fundamentalmente y convertirlas en las pginas que son el resultado de dicha orden. Cuando nosotros pinchamos sobre un enlace hipertexto, en realidad lo que pasa es que establecemos una peticin de un archivo HTML residente en el servidor (un ordenador que se encuentra continuamente conectado a la red) el cual es enviado e interpretado por nuestro navegador (el cliente). As pues, podemos hablar de lenguajes de lado servidor que son aquellos lenguajes que son reconocidos, ejecutados e interpretados por el propio servidor y que se envan al cliente en un formato comprensible para l. Por otro lado, los lenguajes de lado cliente (entre los cuales no slo se encuentra el HTML sino tambin el Java y el JavaScript los cuales son simplemente incluidos en el cdigo HTML) son aquellos que pueden ser directamente "digeridos" por el navegador y no necesitan un pre tratamiento. Cada uno de estos tipos tiene por supuesto sus ventajas y sus inconvenientes. As, por ejemplo, un lenguaje de lado cliente es totalmente independiente del servidor, lo cual permite que la pgina pueda ser albergada en cualquier sitio sin necesidad de pagar ms ya que, por regla general, los servidores que aceptan pginas con scripts de lado servidor son en su mayora de pago o sus prestaciones son muy limitadas. Inversamente, un lenguaje de lado servidor es independiente del cliente por lo que es mucho menos rgido respecto al cambio de un navegador a otro o respecto a las versiones del mismo.
Lenguajes del lado cliente HTML
El lenguaje llamado HTML indica al navegador donde colocar cada texto, cada imagen o cada video y la forma que tendrn estos al ser colocados en la pgina. Elel lenguaje consta de etiquetas que tienen esta forma <B> o <P>. Cada etiqueta significa una cosa, por ejemplo <B> significa que se escriba en negrita (bold) o <P> significa un prrafo, <A> es un enlace, etc. Casi todas las etiquetas tienen su correspondiente etiqueta de cierre, que indica
82
Unidad:
Edicin No. 1
Programacin Web
que a partir de ese punto no debe de afectar la etiqueta. Por ejemplo </B> se utiliza para indicar que se deje de escribir en negrita. As que el HTML no es ms que una serie de etiquetas que se utilizan para definir la forma o estilo que queremos aplicar a nuestro documento. <B>Esto est en negrita</B>. Esta pgina es un claro ejemplo de uso del HTML. JAVASCRIPT
Javascript es un lenguaje de programacin utilizado para crear pequeos programitas encargados de realizar acciones dentro del mbito de una pgina web. Se trata de un lenguaje de programacin del lado del cliente, porque es el navegador el que soporta la carga de procesamiento. Su uso se basa fundamentalmente en la creacin de efectos especiales en las pginas y la definicin de interactividades con el usuario. Las sentencias escritas en javascript se encapsulan entre las etiquetas <script> y </script>. por ejemplo, si en el cdigo de una pgina Web incluimos la sentencia <script> window.alert("Bienvenido a mi sitio web. Gracias...") </script>
al abrir la pgina con el navegador se nos mostrar una ventana de bienvenida APPLETS DE JAVA
Es otra manera de incluir cdigo a ejecutar en los clientes que visualizan una pgina web. Se trata de pequeos programas hechos en Java, que se transfieren con las pginas web y que el navegador ejecuta en el espacio de la pgina. Los applets de Java estn programados en Java y precompilados, es por ello que la manera de trabajar de stos vara un poco con respecto a los lenguajes de script como Javascript. Los applets son ms difciles de programar que los scripts en Javascript
83
Unidad:
Edicin No. 1
Programacin Web
y requerirn unos conocimientos bsicos o medios del lenguaje Java. La principal ventaja de utilizar applets consiste en que son mucho menos dependientes del navegador que los scripts en Javascript, incluso independientes del sistema operativo del ordenador donde se ejecutan. Adems, Java es ms potente que Javascript, por lo que el nmero de aplicaciones de los applets podr ser mayor. Como desventajas en relacin con Javascript cabe sealar que los applets son ms lentos de procesar y que tienen espacio muy delimitado en la pgina donde se ejecutan, es decir, no se mezclan con todos los componentes de la pgina ni tienen acceso a ellos. Es por ello que con los applets de Java no podremos hacer directamente cosas como abrir ventanas secundarias, controlar
Frames, formularios, capas, etc. VISUAL BASIC SCRIPT
Es un lenguaje de programacin de scripts del lado del cliente, pero slo compatible con Internet Explorer. Es por ello que su utilizacin est desaconsejada a favor de Javascript. Est basado en Visual Basic, un popular lenguaje para crear aplicaciones Windows. Tanto su sintaxis como la manera de trabajar estn muy inspirados en l. Sin embargo, no todo lo que se puede hacer en Visual Basic lo podremos hacer en Visual Basic Script, pues este ltimo es una versin reducida del primero. El modo de funcionamiento de Visual Basic Script para construir efectos especiales en pginas web es muy similar al utilizado en Javascript y los recursos a los que se puede acceder tambin son los mismos: el navegador. FLASH
Flash es una tecnologa, y un programa, para crear efectos especiales en pginas web. Con Flash tambin conseguimos hacer pginas dinmicas del lado del cliente. Flash en realidad no es un lenguaje; Sin embargo, si tuvieramos que catalogarlo en algn sitio quedara dentro del mbito de las pginas dinmicas de cliente. Para visualizar las "pelculas" Flash, nuestro navegador debe tener instalado un programita (plugin) que le permita visualizarlas.
84
Unidad:
Edicin No. 1
Programacin Web
CSS
CSS, es una tecnologa que nos permite crear pginas web de una manera ms exacta. Gracias a las CSS somos mucho ms dueos de los resultados finales de la pgina, pudiendo hacer muchas cosas que no se poda hacer utilizando solamente HTML, como incluir mrgenes, tipos de letra, fondos, colores... Incluso podemos definir nuestros propios estilos en un archivo externo a nuestras pginas; as, si en algn momento queremos cambiar alguno de ellos, automticamente se nos actualizarn todas las pginas vinculadas de nuestro sitio. CSS son las siglas de Cascading Style Sheets, en espaol Hojas de estilo en Cascada.
2.3 Lenguajes de programacin del lado del servidor.

Lenguajes del lado servidor CGI
Es el sistema ms antiguo que existe para la programacin de las pginas dinmicas de servidor. Actualmente se encuentra un poco desfasado por diversas razones entre las que destaca la dificultad con la que se desarrollan los programas y la pesada carga que supone para el servidor que los ejecuta. Los CGI se escriben habitualmente en el lenguaje Perl, sin embargo, otros lenguajes como C, C++ o Visual Basic pueden ser tambin empleados para construirlos. PERL
Perl es un lenguaje de programacin interpretado, al igual que muchos otros lenguajes de Internet como Javascript o ASP. Esto quiere decir que el cdigo de los scripts en Perl no se compila sino que cada vez que se quiere ejecutar se lee el cdigo y se pone en marcha interpretando lo que hay escrito. Adems es extensible a partir de otros lenguajes, ya que desde Perl podremos hacer llamadas a subprogramas escritos en otros lenguajes. Tambin desde otros lenguajes podremos ejecutar cdigo Perl. ASP
85
Unidad:
Edicin No. 1
Programacin Web
ASP (Active Server Pages) es la tecnologa desarrollada por Microsoft para la creacin de pginas dinmicas del servidor. ASP se escribe en la misma pgina web, utilizando el lenguaje Visual Basic Script o Jscript (Javascript de Microsoft). PHP
PHP es el acrnimo de Hipertext Preprocesor. Es un lenguaje de programacin del lado del servidor gratuito e independiente de plataforma, rpido, con una gran librera de funciones y mucha documentacin. JSP
JSP es un acrnimo de Java Server Pages, que en castellano vendra a decir algo como Pginas de Servidor Java. Es, pues, una tecnologa orientada a crear pginas web con programacin en Java. Con JSP podemos crear aplicaciones web que se ejecuten en variados servidores web, de mltiples plataformas, ya que Java es en esencia un lenguaje multiplataforma. Por tanto, las JSP podremos escribirlas con nuestro editor HTML/XML habitual.
Lenguajes del lado cliente-servidor DHTML
DHTML no es precisamente un lenguaje de programacin. Ms bien se trata de una nueva capacidad de la que disponen los navegadores modernos, por la cual se puede tener un mayor control sobre la pgina que antes.
86
Unidad:
Edicin No. 1
Programacin Web
Cualquier pgina que responde a las actividades del usuario y realiza efectos y funcionalidades se puede englobar dentro del DHTML, pero en este caso nos referimos ms a efectos en el navegador por los cuales se pueden mostrar y ocultar elementos de la pgina, se puede modificar su posicin, dimensiones, color, etc. DHTML nos da ms control sobre la pgina, gracias a que los navegadores modernos incluyen una nueva estructura para visualizar en pginas web denominada capa. Las capas se pueden ocultar, mostrar, desplazar, etc. Para realizar las acciones sobre la pgina, como modificar la apariencia de una capa, seguimos necesitando un lenguaje de programacin del lado del cliente como Javascript o VBScript. En la actualidad, DHTML tambin puede englobar la programacin en el servidor. Dentro del concepto de DHTML se engloban tambin las Hojas de Estilo en Cascada o CSS (Cascade Style Sheets), que veremos a continuacin. XML
XML es una tecnologa en realidad muy sencilla que tiene a su alrededor otras tecnologas que la complementan y la hacen mucho ms grande y con unas posibilidades mucho mayores. XML, con todas las tecnologas relacionadas, representa una manera distinta de hacer las cosas, ms avanzada, cuya principal novedad consiste en permitir compartir los datos con los que se trabaja a todos los niveles, por todas las aplicaciones y soportes.
2.4 Ambientes para el desarrollo de aplicaciones Web. Es un programa compuesto por un conjunto de herramientas para un programador. Puede dedicarse en exclusiva a un slo lenguaje de programacin o bien, poder utilizarse para varios. Consiste en un editor de cdigo, un compilador, un depurador y un constructor de interfaz grfica. Su meta es proveer un marco de trabajo amigable para los programadores de algn lenguaje de programacin. Los IDE (ambientes integrados de desarrollo) para aplicaciones Web son muy numerosos. Considerar los que permitan trabajar con los diferentes lenguajes para
87
Unidad:
Edicin No. 1
Programacin Web
Web. Algunos son especficos para lenguajes del lado del servidor. Por ejemplo, Visual Studio solo soporta ASP.NET del lado del servidor. Existen IDEs de buena cantidad, libres y gratuitos de buena calidad. Algunos ejemplos de IDE para Web: Microsoft Visual Studio. Microsoft Web Developer Express. Mono (para ASP.NET). Net Beans. Jbuilder. Eclipse.
2.5 Metodologas para el desarrollo de aplicaciones Web. Es una Metodologa de Relacin entre Objeto (Enhanced Object Relationship Methodology), es definido por un proceso iterativo que se concentra en el modelado orientado a objetos por la representacin de relaciones entre los objetos (acoplamientos) como objetos, es por ello que fue una de las primeras propuestas para Web centrada en el paradigma de la orientacin a objetos. Se basa en muchas de las ideas que se definen en HDM, pero las traslada a la orientacin a objetos. La adopcin del enfoque orientado a objetos garantiza todas las ventajas reconocidas para esta tcnica de modelado, como la flexibilidad (posible existencia de mltiples formas de relaciones entre nodos) y la reutilizacin, por la existencia de una librera de clases de enlaces que pueden ser reutilizados en diferentes proyectos de desarrollo hipermedial. Para automatizar la aplicacin de la metodologa EORM, su autor ha desarrollado, en los laboratorios de investigacin de IBM, una herramienta denominada ODMTool que, junto a un generador comercial de Interfaces Grficas de Usuario denominado ONTOS Studio y un Sistema de Gestin de Base de Datos Orientado a Objetos (SGBDOO), permite el diseo interactivo de esquemas EORM y la generacin de cdigo fuente, inicialmente en C++, de las clases incluidas en estos esquemas. El SGBDOO ofrece un repositorio de objetos que permite la comparticin
88
Unidad:
Edicin No. 1
Programacin Web
de la informacin de los esquemas entre las herramientas (ODMTool, ONTOS Studio) y las aplicaciones hipermediales desarrolladas. Esta metodologa tiene las siguientes ventajas: Encajamiento de relaciones semnticas en construcciones extensibles, pudiendo participar en otras relaciones pudiendo ser parte de bibliotecas reutilizables [Ref. 30]. EORM distingue dos tipos de relaciones orientadas a objetos: Relaciones de generalizacin y relaciones definidas por el usuario. Mientras que los primeros se concentran como en la semntica asociada entre ellas, los segundos confan totalmente en la especificacin del usuario La semntica de vnculos bsicos de clases que se manejan, son las siguientes de manera resumida: SimpleLink: Es la raz vnculo bsica de clase que proporciona capacidad de interconexin, incluido funciones para la creacin, supresin y recorrido NavigationalLink: Proporciona mecanismos para enlaces hipermedia que incluye el almacenamiento de creacin de tiempo e informacin histrica. Se hereda de simpleLink NodeToNode: Es un vnculo que hereda de NavigationalLink y proporcionar un objeto a un objeto Hipermedia de vnculo de funcionalidad SpanToNode: Se hereda de NavigationalLink. Vincula el contenido de un objeto a otro objeto . StructureLink: Se hereda de SimpleLink y la raz de los vnculos estructurales. Se inserta despus creacin en el contexto estructural. SetLink: Es una structureLink que proporciona acceso a un objeto en una desordenada coleccin de objetos ListLink: Es un structureLink que proporciona acceso a un objeto en una coleccin ordenada de objetos.
Podemos mencionar que esta metodologa consta de las siguientes fases segn el siguiente diagrama de flujo:
89
Unidad:
Edicin No. 1
Programacin Web
Fase de Anlisis, se trata de orientar a objetos al sistema, sin considerar los aspectos hipermediales del mismo, obtenindose para ello un Modelo de Objetos con la misma notacin utilizada en OMT, que refleje la estructura de la informacin (mediante clases de objetos con atributos y relaciones entre las clases) y el comportamiento del sistema (a travs de los mtodos asociados a las clases de objetos) Fase de Diseo, procede a modificar el modelo de objetos obtenido durante el anlisis aadiendo la semntica apropiada a las relaciones entre clases de objetos para convertirlas en enlaces hipermedia, obteniendo finalmente un modelo enriquecido, que su autor denomina EORM (Enhanced Object-Relationship Model), en el que se refleje tanto la estructura de la informacin (modelo abstracto hipermedial compuesto de nodos y enlaces) como las posibilidades de navegacin ofrecidas por el sistema. sobre dicha estructura, para lo cual existir un repositorio o librera de clases de enlaces, donde se especifican las posibles operaciones asociadas a cada enlace de un hiperdocumento, que sern de tipo crear, eliminar, atravesar, siguiente, previo etc.,as como sus posibles atributos (fecha de creacin del enlace, estilo de presentacin en pantalla, restricciones de acceso, etc.) Fase de Construccin, se transformar los esquemas en cdigo y guardados en una Base de Datos Orientada a Objetos, y en elaborar formularios de consulta de las clases con la ayuda de un editor grfico de interfaces. Se genera el cdigo fuente (por ejemplo en C#) correspondiente a cada clase y se prepara la Interfase Grfica de Usuario. Las relaciones definidas en un modelo orientado a objetos pueden ser representadas por clases de enlaces hipermedia. Estas clases aaden a las relaciones del modelo objeto la semntica navegacional de la aplicacin. Estn organizadas en una jerarqua de herencia propuesta por el mtodo bajo la forma de una biblioteca de clases. La semntica relativa a las propiedades hipermedia de las relaciones encuentra, por tanto, una representacin en EORM bajo la forma de clases. Toda la semntica de relaciones de aplicacin se expresa por medio de enlaces hipermedia reagrupados en una jerarqua de clases y as, el comportamiento definido sobre los enlaces permite tener en cuenta una parte de la semntica de la navegacin de la aplicacin. Tambin se permite alterar la propia estructura navegacional de la aplicacin mediante operaciones de creacin, destruccin o de modificacin de elementos hipermedia. El modelo EORM se ha centrado, principalmente, en el enriquecimiento de los elementos hipermedia.
90
Unidad:
Edicin No. 1
Programacin Web
2.6 Aspectos de seguridad. Es importantsimo crear aplicaciones web con, por lo menos, un nivel mnimo de seguridad. En este sentido Hispasec.com nos ofrece muchas ayudas, como es el caso de esta noticia. Se publica una gua de referencia para facilitar el desarrollo de aplicaciones web teniendo en cuenta, desde el mismo momento en que se realiza el diseo de las mismas. En los ltimos meses estamos asistiendo a un considerable movimiento alrededor de las aplicaciones y los servicios web. Casi todos los fabricantes de software estn orientando sus plataformas de desarrollo de aplicaciones para que se integren y utilicen las posibilidades de la web. Entendemos por aplicaciones web a todo aqul software que interacciona con el usuario utilizando el protocolo HTTP. Por su parte, los servicios web son un conjunto de funciones empaquetadas dentro de una entidad nica y publicadas dentro de la red para que puedan ser utilizadas por las aplicaciones web. Normas bsicas de seguridad El proyecto OWASP (Open Web Application Security Project) tiene como objetivo ofrecer una metodologa, de libre acceso y utilizacin, que pueda ser utilizada como material de referencia por parte de los arquitectos de software, desarrolladores, fabricantes y profesionales de la seguridad involucrados en el diseo, desarrollo, despliegue y verificacin de la seguridad de las aplicaciones y servicios web. La gua empieza estableciendo los principios bsicos de seguridad que cualquier aplicacin o servicio web debe cumplir: Validacin de la entrada y salida de informacin La entrada y salida de informacin es el principal mecanismo que dispone un atacante para enviar o recibir cdigo malicioso contra el sistema. Por tanto, siempre debe verificarse que cualquier dato entrante o saliente es apropiado y en el formato que se espera. Las caractersticas de estos datos deben estar predefinidas y debe verificarse en todas las ocasiones. Diseos simples Los mecanismos de seguridad deben disearse para que sean los ms sencillos posibles, huyendo de sofisticaciones que compliquen excesivamente la vida a los usuarios. Si los pasos necesarios para proteger de forma adecuada una funcin o modulo son muy complejos, la
91
Unidad:
Edicin No. 1
Programacin Web
probabilidad de que estos pasos no se ejecuten de forma adecuada es muy elevada. Utilizacin y reutilizacin de componentes de confianza Debe evitarse reinventar la rueda constantemente. Por tanto, cuando exista un componente que resuelva un problema de forma correcta, lo ms inteligente es utilizarlo. Defensa en profundidad Nunca confiar en que un componente realizar su funcin de forma permanente y ante cualquier situacin. Hemos de disponer de los mecanismos de seguridad suficientes para que cuando un componente del sistema fallen ante un determinado evento, otros sean capaces de detectarlo. Tan seguros como en eslabn ms dbil La frase "garantizamos la seguridad, ya que se utiliza SSL" es realmente muy popular, pero tambin es muy inexacta. La utilizacin de SSL garantiza que el trfico en trnsito entre el servidor y el cliente se encuentra cifrado, pero no garantiza nada acerca de los mecanismos de seguridad existentes. Por tanto, no debemos fiarnos nicamente de los mecanismos de seguridad "exteriores", sino que es preciso identificar cuales son los puntos precisos en los que deben establecerse las medidas de seguridad. Si nosotros no hacemos este trabajo, seguro que los atacantes si lo harn. La "seguridad gracias al desconocimiento" no funciona El simple hecho de ocultar algo no impide que, a medio o largo plazo, llegue a ser descubierto. Tampoco es ninguna garanta de que tampoco ser descubierto a corto plazo. Verificacin de privilegios. Los sistemas deben disearse para que funcionen con los menos privilegios posibles. Igualmente, es importante que los procesos nicamente dispongan de los privilegios necesarios para desarrollar su funcin, de forma que queden compartimentados. Ofrecer la mnima informacin Ante una situacin de error o una validacin negativa, los mecanismos de seguridad deben disearse para que faciliten la mnima informacin posible. De la misma forma, estos mecanismos deben estar diseados para que una vez denegada una operacin, cualquier operacin posterior sea igualmente denegada.
92
Unidad:
Edicin No. 1
Programacin Web
Otros aspectos tratados en la gua son: consideraciones de arquitectura, mecanismos de autenticacin, gestin de sesiones de usuario, control de acceso, registro de actividad, prevencin de problemas comunes, consideraciones de privacidad y criptografa.
93
Unidad:
Edicin No. 1
Programacin Web
UNIDAD III. Programacin del lado del servidor. Objetivo: Desarrollar aplicaciones Web del lado del servidor con acceso a base de datos. 3.1Procesamiento del lado del servidor. Funciona del lado del servidor, es decir que con cualquier navegador de Internet podremos acceder a toda la potencia de PHP, pues ste arroja el resultado al cliente sin necesidad de que ste interprete algo ms que simple y comn HTML. Cdigo abierto (Open source), libertad de distribucin y permiso para uso comercial sin costo, aplastando de esta manera al ASP de Microsoft, de licenciamiento comercial. Adems, (esto podra generarme una pelea con habbi ;-)) apostara por la velocidad de PHP por sobre la de ASP para los mismos procesos. Genera pginas dinmicas. Esto significa que cada pgina solicitada al servidor es procesada en el momento como un requerimiento individual, y actualizado al milisegundo. Intil para pginas estticas, genial para pginas en donde los datos se actualizan constantemente (que tengan acceso a base de datos o ejecuten procesos de clculo). Simplicidad de programacin. Un lenguaje de script realmente cmodo de usar por su sencillez y claridad. 3.2 Conceptos bsicos de la herramienta de desarrollo. Un entorno de desarrollo integrado o IDE (acrnimo en ingls de integrated development environment), es un programa informtico compuesto por un conjunto de herramientas de programacin. Puede dedicarse en exclusiva a un slo lenguaje de programacin o bien, poder utilizarse para varios.
94
Unidad:
Edicin No. 1
Programacin Web
Dev C++, un IDE para el lenguaje de programacin C++ .
WebDevStudio, un IDE en lnea para el lenguaje de programacin C/C++.
95
Unidad:
Edicin No. 1
Programacin Web
Un IDE es un entorno de programacin que ha sido empaquetado como un programa de aplicacin, es decir, consiste en un editor de cdigo, un compilador, un depurador y un constructor de interfaz grfica (GUI). Los IDEs pueden ser aplicaciones por s solas o pueden ser parte de aplicaciones existentes. El lenguaje Visual Basic, por ejemplo, puede ser usado dentro de las aplicaciones de Microsoft Office, lo que hace posible escribir sentencias Visual Basic en forma de macros para Microsoft Word. Los IDE proveen un marco de trabajo amigable para la mayora de los lenguajes de programacin tales como C++, Python, Java, C#, Delphi, Visual Basic, etc. En algunos lenguajes, un IDE puede funcionar como un sistema en tiempo de ejecucin, en donde se permite utilizar el lenguaje de programacin en forma interactiva, sin necesidad de trabajo orientado a archivos de texto, como es el caso de Smalltalk u Objective-C. Es posible que un mismo IDE pueda funcionar con varios lenguajes de programacin. Este es el caso de Eclipse, al que mediante plugins se le puede aadir soporte de lenguajes adicionales. Entornos de Desarrollo Integrado para Java Los IDEs (Integrated Development Environment) son un conjunto de herramientas para el programador, que sulen incluir en una misma suite, un buen editor de cdigo, administrador de proyectos y archivos, enlace transparente a compiladores y debuggers e integracin con sistemas controladores de versiones o repositorios. Cuando de Java se trata, son varias las opciones de IDEs, para utilizar. Gracias a El CoDiGo K mencionamos algunos de los principales y ms populares: BlueJ: desarrollado como un proyecto de investigacin universitaria, es libre. Eclipse: desarrollado por la Fundacin Eclipse, es libre y de cdigo abierto, IntelliJ IDEA: desarrollado por JetBrains, es comercial. Jbuilder: desarrollado por Borland, es comercial pero tambin existe la versin gratuita. JCreator: desarrollado por Xinox, , es comercial pero tambin existe la versin gratuita. JDeveloper: desarrollado por Oracle Corporation, es gratuito. NetBeans gratuito y de cdigo abierto.
96
Unidad:
Edicin No. 1
Programacin Web
Sun Java Studio Enterprise: desarrollado por Sun, es comercial.
Adems, muchos de estos IDEs, han servido de base para otras plataformas de desarrollo o se pueden utilizar para el desarrollo en otros lenguajes (ya sea en distribuciones especficas o bien a travs de la instalacin de plugins): QNX Momentics Development Suite NetBeans Early Access for PHP Eclipse C/C++ Development Tooling
3.3 Operadores. Operadores Mtematicos en PHP Los operadores son smbolos especiales que se utilizan para realizar tanto operaciones matemticas, como de comparacin. Veamos un listado de los ms utilizados en PHP y un ejemplo general. + Suma varios nmeros 5 + 4 = 9 - Resta varios nmeros 5 - 4 = 1 * Realiza una multiplicacin 3 * 3 = 9 / Realiza una divisin 10/2 = 5 % Devuelve el residuo de una divisin 10 % 3 = 1 ++ Suma 1 $v++ (Agrega 1 a $v) -- Resta 1 $v-- (Resta 1 a $v) == Devuelve true si la condicin de igualdad se cumple 2 == 2 (Verdadero) != Devuelve true sin la condicin de igualdad no se cumple 2 !== 2 (Falso) < Devuelve true si un nmero es menor que el otro 2 < 5 (Verdadero) > Devuelve true si un nmero es mayor que el otro 6 > 4 (Verdadero) <= Devuelve true si un nmero es menor o igual que otro 2 <= 5 (Verdadero) >= Devuelve true si un nmero es mayor o igual que otro 6 >= 4 (Verdader o) Por ahora veremos un ejemplo prctico de los operadores matemticos, ms adelante, en las estructuras de control, se aplicarn los operadores lgicos. <?php $a = 5; $b = 10; $suma = ($a + $b); //$suma vale 15
97
Unidad:
Edicin No. 1
Programacin Web
$resta = ($b - $a); //$resta vale 5 $multiplicacion = ($a * $b); //$multiplicacion vale 50 $division = ($b / $a); //$division vale 2 $residuo = ($b % $a); //$residuo vale 0 ?> 3.4 Sentencias. PHP se escribe dentro de la propia pgina web, junto con el cdigo HTML y, como para cualquier otro tipo de lenguaje incluido en un cdigo HTML, en PHP necesitamos especificar cules son las partes constitutivas del cdigo escritas en este lenguaje. Esto se hace, como en otros casos, delimitando nuestro cdigo por etiquetas. Podemos utilizar distintos modelos de etiquetas en funcin de nuestras preferencias y costumbres. Hay que tener sin embargo en cuenta que no necesariamente todas estn configuradas inicialmente y que otras, como es el caso de <% y %> slo estn disponibles a partir de una determinada versin (3.0.4.). Estos modos de abrir y cerrar las etiquetas son:
<? y ?> <% y %> <?php y ?> <script language="php">
Este ultimo modo est principalmente aconsejado a aquellos que tengan el valor de trabajar con Front Page ya que, usando cualquier otro tipo de etiqueta, corremos el riesgo de que la aplicacin nos la borre sin ms debido a que se trata de un cdigo incomprensible para ella. El modo de funcionamiento de una pgina PHP, a grandes rasgos, no difiere del clsico para una pgina dinmica de lado servidor: El servidor va a reconocer la extensin correspondiente a la pgina PHP (phtml, php, php4,...) y antes de en-
98
Unidad:
Edicin No. 1
Programacin Web
viarla al navegador va a encargarse de interpretar y ejecutar todo aquello que se encuentre entre las etiquetas correspondientes al lenguaje PHP. El resto, lo enviara sin ms ya que, asumir que se trata de cdigo HTML absolutamente comprensible por el navegador. Otra caracterstica general de los scripts en PHP es la forma de separar las distintas instrucciones. Para hacerlo, hay que acabar cada instruccin con un punto y coma ";". Para la ultima expresin, la que va antes del cierre de etiqueta, este formalismo no es necesario. Incluimos tambin en este capitulo la sintaxis de comentarios. Un comentario, para aquellos que no lo sepan, es una frase o palabra que nosotros incluimos en el cdigo para comprenderlo ms fcilmente al volverlo a leer un tiempo despus y que, por supuesto, el ordenador tiene que ignorar ya que no va dirigido a l sino a nosotros mismos. Los comentarios tienen una gran utilidad ya que es muy fcil olvidarse del funcionamiento de un script programado un tiempo atrs y resulta muy til si queremos hacer rpidamente comprensible nuestro cdigo a otra persona. Pues bien, la forma de incluir estos comentarios es variable dependiendo si queremos escribir una lnea o ms. Veamos esto con un primer ejemplo de script:
<? $mensaje="Tengo hambre!!"; //Comentario de una linea echo $mensaje; #Este comentario tambin es de una linea /*En este caso mi comentario ocupa varias lineas, lo ves? */ ?>
Si usamos doble barra (//) o el smbolo # podemos introducir comentarios de una
99
Unidad:
Edicin No. 1
Programacin Web
lnea. Mediante /* y */ creamos comentarios multilnea. Por supuesto, nada nos impide de usar estos ltimos en una sola lnea. No os preocupis si no comprendis el texto entre las etiquetas, todo llegar. Os adelantamos que las variables en PHP se definen anteponiendo un smbolo de dlar ($) y que la instruccin echo sirve para sacar en pantalla lo que hay escrito a continuacin. Recordamos que todo el texto insertado en forma de comentario es completamente ignorado por el servidor. Resulta importante acostumbrarse a dejar comentarios, es algo que se agradece con el tiempo. 3.5 Arreglos. Un tipo de variable que ya hemos descrito pero puede ser relativamente complicado a asimilar con respecto a la mayora son los arrays. Un array es una variable que est compuesta de varios elementos cada uno de ellos catalogado dentro de ella misma por medio de una clave. En el captulos anteriores ponamos el ejemplo de un array llamado sentido que contena los distintos sentidos del ser humano:
$sentido[1]="ver"; $sentido[2]="tocar"; $sentido[3]="oir"; $sentido[4]="gustar"; $sentido[5]="oler";
En este caso este array cataloga sus elementos, comunmente llamados valores, por nmeros. Los nmeros del 1 al 5 son por lo tanto las claves y los sentidos son los valores asociados. Nada nos impide emplear nombres (cadenas) para clasificarlos. Lo nico que deberemos hacer es entrecomillarlos:
100
Unidad:
Edicin No. 1
Programacin Web
<? $moneda["espana"]="Peseta"; $moneda["francia"]="Franco"; $moneda["usa"]="Dolar"; ?>
Otra forma de definir idnticamente este mismo array y que nos puede ayudar para la creacin de arrays ms complejos es la siguiente sintaxis:
<? $moneda=array("espana"=> "Peseta","francia" => "Franco","usa" => "Dolar"); ?>
Una forma muy practica de almacenar datos es mediante la creacin de arrays multidimensionales (tablas). Pongamos el ejemplo siguiente: Queremos almacenar dentro de una misma tabla el nombre, moneda y lengua hablada en cada pas. Para hacerlo podemos emplear un array llamado pas que vendr definido por estas tres caractersticas (claves). Para crearlo, deberamos escribir una expresin del mismo tipo que la vista anteriormente en la que meteremos una array dentro del otro. Este proceso de incluir una instruccion dentro de otra se llama anidar y es muy corriente en programacin:
<? $pais=array ( "espana" ( "nombre"=>"Espaa",
=>array
101
Unidad:
Edicin No. 1
Programacin Web
"lengua"=>"Castellano", "moneda"=>"Peseta" ), "francia" =>array ( "nombre"=>"Francia", "lengua"=>"Francs", "moneda"=>"Franco" ) ); echo $pais["espana"]["moneda"] //Saca en pantalla: "Peseta" ?>
Antes de entrar en el detalle de este pequeo script, comentemos algunos puntos referentes a la sintaxis. Como puede verse, en esta secuencia de script, no hemos introducido punto y coma ";" al final de cada lnea. Esto es simplemente debido a que lo que hemos escrito puede ser considerado como una sola instruccin. En realidad, somos nosotros quienes decidimos cortarla en varias lneas para, as, facilitar su lectura. La verdadera instruccin acabara una vez definido completamente el array y es precisamente ah donde hemos colocado el nico punto y coma. Por otra parte, podis observar cmo hemos jugado con el tabulador para separar unas lneas ms que otras del principio. Esto tambin lo hacemos por cuestiones de claridad, ya que nos permite ver qu partes del cdigo estn incluidas dentro de otras. Es importante acostumbrarse a escribir de esta forma del mismo modo que a introducir los comentarios ya que la claridad de los scripts es fundamental a la hora de depurarlos. Un poco de esfuerzo a la hora de crearlos puede ahorrarnos muchas horas a la hora de corregirlos o modificarlos meses ms tarde. Pasando ya al comentario del programa, como podis ver, ste nos permite almacenar tablas y, a partir de una simple peticin, visualizarlas un determinado valor en pantalla. Lo que es interesante es que la utilidad de los arrays no acaba aqu, sino que tambin podemos utilizar toda una serie de funciones creadas para ordenarlos por
102
Unidad:
Edicin No. 1
Programacin Web
orden alfabtico directo o inverso, por claves, contar el numero de elementos que componen el array adems de poder movernos por dentro de l hacia delante o atrs. Muchas son las funciones propuestas por PHP para el tratamiento de arrays, no vamos a entrar aqu en una descripcin de las mismas. Slo incluiremos esta pequea tabla que puede ser complementada, si necesario, con la documentacin que ya hemos mencionado.
Funcin array_values (mi_array)
Descripcin Lista los valores contenidos en mi_array Ordena por orden alfabtico directo o inverso en funcin de los valores Nos da el numero de elementos de nuestro array Ordena por orden alfabtico directo o inverso en funcin de las claves Asigna cada una variable a cada uno de los valores del array
asort(mi_array) y arsort(mi_array)
count(mi_array)
ksort(mi_array) y krsort(mi_array)
list ($variable1, $variable2...)=mi_array
next(mi_array), prev(mi_array), set(mi_array) y end(mi_array)
re- Nos permiten movernos por dentro del array con un puntero hacia delante, atras y al principio y al final. Nos da el valor y la clave del elemento en el que nos encontramos y mueve al puntero al siguiente elemento.
each(mi_array)
3.6 Funciones y libreras.
103
Unidad:
Edicin No. 1
Programacin Web
En nuestro manual de pginas dinmicas vimos el concepto de funcin. Vimos que la funcin podra ser definida como un conjunto de instrucciones que explotan ciertas variables para realizar una tarea ms o menos elemental.
PHP basa su eficacia principalmente en este tipo de elemento. Una gran librera que crece constantemente, a medida que nuevas versiones van surgiendo, es complementada con las funciones de propia cosecha dando como resultado un sinfn de recursos que son aplicados por una simple llamada. Las funciones integradas en PHP son muy fciles de utilizar. Tan slo hemos de realizar la llamada de la forma apropiada y especificar los parmetros y/o variables necesarios para que la funcin realice su tarea. Lo que puede parecer ligeramente ms complicado, pero que resulta sin lugar a dudas muy prctico, es crear nuestras propias funciones. De una forma general, podramos crear nuestras propias funciones para conectarnos a una base de datos o crear los encabezados o etiquetas meta de un documento HTML. Para una aplicacin de comercio electrnico podramos crear por ejemplo funciones de cambio de una moneda a otra o de clculo de los impuestos a aadir al precio de artculo. En definitiva, es interesante crear funciones para la mayora de acciones ms o menos sistemticas que realizamos en nuestros programas.
Aqu daremos el ejemplo de creacin de una funcin que, llamada al comienzo de nuestro script, nos crea el encabezado de nuestro documento HTML y coloca el titulo que queremos a la pgina:
<?
104
Unidad:
Edicin No. 1
Programacin Web
function hacer_encabezado($titulo) { $encabezado="<html>\n<head>\n\t<title>$titulo</title>\n</head>\n"; echo $encabezado; } ?>
Esta funcin podra ser llamada al principio de todas nuestras pginas de la siguiente forma:
$titulo="Mi web"; hacer_encabezado($titulo);
De esta forma automatizamos el proceso de creacin de nuestro documento. Podramos por ejemplo incluir en la funcin otras variables que nos ayudasen a construir la etiquetas meta y de esta forma, con un esfuerzo mnimo, crearamos los encabezados personalizados para cada una de nuestras pginas. De este mismo modo nos es posible crear cierres de documento o formatos diversos para nuestros textos como si se tratase de hojas de estilo que tendran la ventaja de ser reconocidas por todos los navegadores. Por supuesto, la funcin ha de ser definida dentro del script ya que no se encuentra integrada en PHP sino que la hemos creado nosotros. Esto en realidad no pone ninguna pega ya que puede ser incluida desde un archivo en el que iremos almacenando las definiciones de las funciones que vayamos creando o recopilando. Estos archivos en los que se guardan las funciones se llaman libreras. La forma de incluirlos en nuestro script es a partir de la instruccin require o include:
require("libreria.php") o include("libreria.php")
105
Unidad:
Edicin No. 1
Programacin Web
En resumen, la cosa quedara as: Tendramos un archivo libreria.php como sigue
<? //funcin de encabezado y colocacin del titulo Function hacer_encabezado($titulo) { $encabezado="<html>\n<head>\n\t<title>$titulo</title>\n</head>\n"; echo $encabezado; } ?>
Por otra parte tendramos nuestro script principal pgina.php (por ejemplo):
<? include("libreria.php"); $titulo="Mi Web"; hacer_encabezado($titulo); ?> <body> El cuerpo de la pgina </body> </html>
Podemos meter todas las funciones que vayamos encontrando dentro de un mismo archivo pero resulta muchsimo ms ventajoso ir clasificndolas en distintos archivos por temtica: Funciones de conexin a bases de datos, funciones comerciales, funciones generales, etc. Esto nos ayudara a poder localizarlas antes para
106
Unidad:
Edicin No. 1
Programacin Web
corregirlas o modificarlas, nos permite tambin cargar nicamente el tipo de funcin que necesitamos para el script sin recargar ste en exceso adems de permitirnos utilizar un determinado tipo de librera para varios sitios webs distintos. Tambin puede resultar muy prctico el utilizar una nomenclatura sistemtica a la hora de nombrarlas: Las funciones comerciales podran ser llamadas com_loquesea, las de bases de datos bd_loquesea, las de tratamiento de archivos file_loquesea. Esto nos permitir reconocerlas enseguida cuando leamos el script sin tener que recurrir a nuestra oxidada memoria para descubrir su utilidad. No obstante, antes de lanzarnos a crear nuestra propia funcin, merece la pena echar un vistazo a la documentacin para ver si dicha funcin ya existe o podemos aprovecharnos de alguna de las existentes para aligerar nuestro trabajo. As, por ejemplo, existe una funcin llamada header que crea un encabezado HTML configurable lo cual nos evita tener que crearla nosotros mismos. Como puede verse, la tarea del programador puede en algunos casos parecerse a la de un coleccionista. Hay que ser paciente y metdico y al final, a base de trabajo propio, intercambio y tiempo podemos llegar poseer nuestro pequeo tesoro. Ejemplo de funcin Vamos a ver un ejemplo de creacin de funciones en PHP. Se trata de hacer una funcin que recibe un texto y lo escribe en la pgina con cada carcter separado por "-". Es decir, si recibe "hola" debe escribir "h-o-l-a" en la pgina web. La manera de realizar esta funcin ser recorrer el string, caracter a caracter, para imprimir cada uno de los caracteres, seguido de el signo "-". Recorreremos el string con un bucle for, desde el carater 0 hasta el nmero de caracteres total de la cadena. El nmero de caracteres de una cadena se obtiene con la funcin predefinida en PHP strlen(), que recibe el string entre parntesis y devuelve el nmero de los caracteres que tenga.
107
Unidad:
Edicin No. 1
Programacin Web
<html> <head> <title>funcion 1</title> </head> <body> <? function escribe_separa($cadena){ for ($i=0;$i<strlen($cadena);$i++){ echo $cadena[$i]; if ($i<strlen($cadena)-1) echo "-"; } } escribe_separa ("hola"); echo "<p>"; escribe_separa ("Texto ms largo, a ver lo que hace"); ?> </body> </html>
La funcin que hemos creado se llama escribe_separa y recibe como parmetro la cadena que hay que escribir con el separador "-". El bucle for nos sirve para recorrer la cadena, desde el primer al ltimo caracter. Luego, dentro del bucle, se imprime cada caracter separado del signo "-". El if que hay dentro del bucle for comprueba que el actual no sea el ltimo caracter, porque en ese caso no habra que escribir el signo "-" (queremos conseguir "h-o-l-a" y si no estuviera el if obtendramos "h-o-l-a-"). En el cdigo mostrado se hacen un par de llamadas a la funcin para ver el resultado obtenido con diferentes cadenas como parmetro. 3.7 Ejemplos prcticos.
108
Unidad:
Edicin No. 1
Programacin Web
Una de las variables ms corrientes a las que tendremos que hacer frente en la mayora de nuestros scripts son las cadenas, que no son ms que informacin de carcter no numrico (textos, por ejemplo). Para asignar a una variable un contenido de este tipo, lo escribiremos entre comillas dando lugar a declaraciones de este tipo:
$cadena="Esta es la informacin de mi variable"
Si queremos ver en pantalla el valor de una variable o bien un mensaje cualquiera usaremos la instruccin echo como ya lo hemos visto anteriormente:
echo $cadena //sacara "Esta es la informacin de mi variable"
echo "Esta es la informacin de mi variable" //dara el mismo resultado
Podemos yuxtaponer o concatenar varias cadenas poniendo para ello un punto entre ellas:
<? $cadena1="Perro"; $cadena2=" muerde"; $cadena3=$cadena1.$cadena2; echo $cadena3 //El resultado es: "Perro muerde"
109
Unidad:
Edicin No. 1
Programacin Web
?>
Tambin podemos introducir variables dentro de nuestra cadena lo cual nos puede ayudar mucho en el desarrollo de nuestros scripts. Lo que veremos no es el nombre, sino el valor de la variable:
<? $a=55; $mensaje="Tengo $a aos"; echo $mensaje //El resultado es: "Tengo 55 aos" ?>
La pregunta que nos podemos plantear ahora es...Cmo hago entonces para que en vez del valor "55" me salga el texto "$a"? En otras palabras, cmo se hace para que el smbolo $ no defina una variable sino que sea tomado tal cual. Esta pregunta es tanto ms interesante cuanto que en algunos de scripts este smbolo debe ser utilizado por una simple razn comercial (pago en dlares por ejemplo) y si lo escribimos tal cual, el ordenador va a pensar que lo que viene detrs es una variable siendo que no lo es. Pues bien, para meter ste y otros caracteres utilizados por el lenguaje dentro de las cadenas y no confundirlos, lo que hay que hacer es escribir una contrabarra delante:
Carcter Efecto en la cadena \$ \" Escribe dlar en la cadena Escribe comillas en la cadena
110
Unidad:
Edicin No. 1
Programacin Web
\\ \8/2
Escribe contrabarra en la cadena Escribe 8/2 y no 4 en la cadena
Adems, existen otras utilidades de esta contrabarra que nos permiten introducir en nuestro documento HTML determinados eventos:
Carcter Efecto en la cadena \t \n \r Introduce una tabulacin en nuestro texto Cambiamos de lnea Retorno de carro
Estos cambios de lnea y tabulaciones tienen nicamente efecto en el cdigo y no en el texto ejecutado por el navegador. En otras palabras, si queremos que nuestro texto ejecutado cambie de lnea hemos de introducir un echo "<br>" y no echo "\n" ya que este ultimo slo cambia de lnea en el archivo HTML creado y enviado al navegador cuando la pgina es ejecutada en el servidor. La diferencia entre estos dos elementos puede ser fcilmente comprendida mirando el cdigo fuente producido al ejecutar este script:
<HTML> <HEAD> <TITLE>cambiolinea.php</TITLE> </HEAD>
111
Unidad:
Edicin No. 1
Programacin Web
<BODY> <? echo "Hola, \n sigo en la misma lnea ejecutada pero no en cdigo fuente.<br>Ahora cambio de lnea ejecutada pero continuo en la misma en el cdigo fuente." ?> </BODY> </HTML>
El cdigo fuente que observaramos seria el siguiente:
<HTML> <HEAD> <TITLE>cambiolinea.php</TITLE> </HEAD> <BODY> Hola, sigo en la misma lnea ejecutada pero no en cdigo fuente.<br>Ahora cambio de lnea ejecutada pero continuo en la misma en el cdigo fuente.</BODY> </HTML>
Las cadenas pueden asimismo ser tratadas por medio de funciones de todo tipo. Veremos estas funciones ms adelante con ms detalle. Tan slo debemos retener que existen muchas posibles acciones que podemos realizar sobre ellas: Dividirlas en palabras, eliminar espacios sobrantes, localizar secuencias, remplazar caracteres especiales por su correspondiente en HTML o incluso extraer las etiquetas META de una pgina web. 3.8 Procesado de formularios. Este tipo de transferencia es de gran utilidad ya que nos permite interaccionar directamente con el usuario. El proceso es similar al explicado para las URLs. Pri-
112
Unidad:
Edicin No. 1
Programacin Web
meramente, presentamos una primera pgina con el formulario clsico a rellenar y las variables son recogidas en una segunda pgina que las procesa:
<HTML> <HEAD> <TITLE>formulario.html</TITLE> </HEAD> <BODY> <FORM METHOD="POST" ACTION="destino2.php"> Nombre<br> <INPUT TYPE="TEXT" NAME="nombre"><br> Apellidos<br> <INPUT TYPE="TEXT" NAME="apellidos"><br> <INPUT TYPE="SUBMIT"> </FORM> </BODY> </HTML>
<HTML> <HEAD> <TITLE>destino2.php</TITLE> </HEAD> <BODY> <? echo "Variable \$nombre: $nombre <br>\n"; echo "Variable \$apellidos: $apellidos <br>\n" ?> </BODY> </HTML>
113
Unidad:
Edicin No. 1
Programacin Web
$HTTP_POST_VARS Recordamos que es posible recopilar en una variable tipo array el conjunto de variables que han sido enviadas al script por este mtodo a partir de la variable de sistema $HTTP_POST_VARS. echo "Variable \$nombre: " . $HTTP_POST_VARS["nombre"] . "<br>\n";
Nota: Aunque podamos recoger variables con este array asociativo o utilizar directamente las variables que se definen en nuestra pgina, resulta ms seguro utilizar $HTTP_POST_VARS por dos razones, la primera que as nos aseguramos que esa varible viene realmente de un formulario y la segunda, que as nuestro cdigo ser ms claro cuando lo volvamos a leer, porque quedar especificado que esa variable estamos recibindola por un formulario.
$_POST A partir de PHP 4.1.0 se pueden recoger las variables de formulario utilizando tambin el array asociativo $_POST, que es el mismo que $HTTP_POST_VARS, pero ms corto de escribir. Ejemplo de restriccin de acceso por edad Para continuar aportando ejemplos al uso de formularios vamos a realizar una pgina que muestra solicita la edad del visitante y, dependiendo de dicha edad, permita o no visualizar el contenido de la web. A los mayores de 18 aos se les permite ver la pgina y a los menores no. El ejemplo es muy sencillo y no valdra tal cual est para utilizarlo a modo de una verdadera restriccin de acceso. nicamente nos sirve para saber cmo obtener datos de un formulario y como tratarlos para realizar una u otra accin, dependiendo de su valor.
114
Unidad:
Edicin No. 1
Programacin Web
La pgina del formulario, que hemos llamado edad.php tendra esta forma: <html> <head> <title>Restringir por edad</title> </head> <body> <form action="edad2.php" method="post"> Escribe tu edad: <input type="text" name="edad" size="2"> <input type="submit" value="Entrar"> </form> </body> </html> Esta es una pgina sin ningn cdigo PHP, simplemente tiene un formulario. Fijmonos en el action del formulario, que est dirigido hacia una pgina llamada edad2.php, que es la que recibir el dato de la edad y mostrar un contenido u otro dependiendo de ese valor. Su cdigo es el siguiente: <html> <head> <title>Restringir por edad</title> </head> <body> <? $edad = $_POST["edad"]; echo "Tu edad: $edad<p>"; if ($edad < 18) {
115
Unidad:
Edicin No. 1
Programacin Web
echo "No puedes entrar"; }else{ echo "Bienvenido"; } ?> </body> </html>
Esperamos que este otro cdigo tampoco resulte extrao. Simplemente se recibe la edad, utilizando el array $_POST. Luego se muestra la edad y se ejecuta una expresin condicional en funcin de que la edad sea menor que 18. En caso positivo (edad menor que 18), se muestra un mensaje que informa de que no se deja acceder al pgina. En caso negativo (mayor o igual a 18) se muestra un mensaje de bienvenida. 3.9 Sesiones. En los programas que hemos visto hasta ahora, hemos utilizado variables que slo existan en el archivo que era ejecutado. Cuando cargbamos otra pgina distinta, los valores de estas variables se perdan a menos que nos tomsemos la molestia de pasarlos por la URL o inscribirlos en las cookies o en un formulario para su posterior explotacin. Estos mtodos, aunque tiles, no son todo lo prcticos que podran en determinados casos en los que la variable que queremos conservar ha de ser utilizada en varios scripts diferentes y distantes los unos de los otros. Podramos pensar que ese problema puede quedar resuelto con las cookies ya que se trata de variables que pueden ser invocadas en cualquier momento. El problema, ya lo hemos dicho, es que las cookies no son aceptadas ni por la totalidad de los usuarios ni por la totalidad de los navegadores lo cual implica que una aplicacin que se sirviera de las cookies para pasar variables de un archivo a otro no sera 100% infalible. Es importante a veces pensar en "la inmensa minora", sobre todo en aplicaciones de comercio electrnico donde debemos captar la mayor cantidad de clientes posibles y nuestros scripts deben estar preparados ante cualquier eventual deficiencia del navegador del cliente.
116
Unidad:
Edicin No. 1
Programacin Web
No resulta pues necesario el poder declarar ciertas variables que puedan ser reutilizadas tantas veces como queramos dentro de una misma sesin. Imaginemos un sitio multilinge en el que cada vez que queremos imprimir un mensaje en cualquier pgina necesitamos saber en qu idioma debe hacerse. Podramos introducir un script identificador de la lengua del navegador en cada uno de los archivos o bien declarar una variable que fuese valida para toda la sesin y que tuviese como valor el idioma reconocido en un primer momento. Pensemos tambin en un carrito de la compra de una tienda virtual donde el cliente va navegando por las pginas del sitio y aadiendo los artculos que quiere comprar a un carrito. Este carrito podra ser perfectamente una variable de tipo array (tabla) que almacena para cada referencia la cantidad de artculos contenidos en el carrito. Esta variable debera ser obviamente conservada continuamente a lo largo de todos los scripts. Este tipo de situaciones son solventadas a partir de las variables de sesin. Una sesin es considerada como el intervalo de tiempo empleado por un usuario en recorrer nuestras pginas hasta que abandona nuestro sitio o deja de actuar sobre l durante un tiempo prolongado o bien, sencillamente, cierra el navegador. PHP nos permite almacenar variables llamadas de sesin que, una vez definidas, podrn ser utilizadas durante este lapso de tiempo por cualquiera de los scripts de nuestro sitio. Estas variables sern especificas del usuario de modo que varias variables sesin del mismo tipo con distintos valores pueden estar coexistiendo para cada una de las sesiones que estn teniendo lugar simultneamente. Estas sesiones tienen adems su propio identificador de sesin que ser nico y especfico. Algunas mejoras referentes al empleo de sesiones han sido introducidas con PHP4. Es a esta nueva versin a la que haremos referencia a la hora de explicar las funciones disponibles y la forma de operar. Para los programadores de PHP3 la diferencia mayor es que estn obligados a gestionar ellos mismos las sesiones definir sus propios identificadores de sesin. Veamos en el siguiente captulo la forma de plasmar esta necesidad tcnica en nuestros scripts a partir de las funciones que gestionan las sesiones en PHP. 3.10 Conectividad entre el servidor Web y el servidor de base de datos. Trabajar con bases de datos en PHP
117
Unidad:
Edicin No. 1
Programacin Web
Inters del empleo de bases de datos con pginas dinmicas. Presentacin del lenguaje SQL y de la base MySQL. Pasos previos a los ejemplos.
Una de las principales ventajas que presenta el trabajar con pginas dinmicas es el poder almacenar los contenidos en bases de datos. De esta forma, podemos organizarlos, actualizarlos y buscarlos de una manera mucho ms simple. El lenguaje PHP, ya hemos dicho, ofrece interfaces para el acceso a la mayora de las bases de datos comerciales y por ODBC a todas las bases de datos posibles en sistemas Microsoft, a partir de las cuales podremos editar el contenido de nuestro sitio con absoluta sencillez. Esta interaccin se realiza, por un lado, a partir de las funciones que PHP nos propone para cada tipo de base de datos y, por otro estableciendo un dilogo a partir de un idioma universal: SQL (Structured Query Language) el cual es comn a todas las bases de datos. Este lenguaje resulta, como veremos en el tutorial de SQL, muy potente y fcil de aprender. En este manual de PHP nos limitaremos pues a la utilizacin las instrucciones SQL bsicas que sern aprendidas a medida que explicamos las diferentes formas de actuar sobre una base de datos dejando para el tutorial de SQL los aspectos ms avanzados. Como base ejemplo de estos captulos hemos elegido MySQL, sin duda la base de datos ms extendida en combinacin con PHP. Su gratuidad, eficiencia y simplicidad la han hecho una buena candidata. Ya hemos explicado en captulos anteriores su instalacin a la vez que hemos presentado los comandos de base que nos pueden permitir abordarla con una relativa facilidad. En caso de utilizar cualquier otra base compatible, las correcciones a llevar a cabo con respecto a nuestros ejemplos no son excesivamente grandes y la lectura de esos captulos sigue siendo de gran utilidad. Una vez instalado MySQL y antes de poder comenzar con nuestros ejemplos, ser necesario llevar a cabo las siguientes operaciones:
118
Unidad:
Edicin No. 1
Programacin Web
-Introducidos dentro de MySQL, crearemos la base de datos ejemplo con la siguiente sentencia: create database ejemplo; -Seleccionaremos la base ejemplo como la base a utilizar:
use ejemplo -Crearemos a continuacin la tabla clientes a partir de la siguiente sentencia:
create table clientes ( nombre varchar(100), telefono varchar(100) ); Ahora ya disponemos de nuestra tabla vaca. Slo queda comenzar a llenarla con los datos que iremos insertando.
3.11 Manejo de archivos. Dentro de una base de datos, organizada por tablas, la seleccin de una tabla entera o de un cierto numero de registros resulta una operacin rutinaria. Aqu os mostramos una forma bastante clsica de mostrar en pantalla a partir de un bucle los registros seleccionados por una sentencia SQL:
<HTML> <HEAD> <TITLE>lectura.php</TITLE> </HEAD>
119
Unidad:
Edicin No. 1
Programacin Web
<BODY> <h1><div align="center">Lectura de la tabla</div></h1> <br> <br> <? //Conexion con la base mysql_connect("localhost","tu_user","tu_password"); //seleccin de la base de datos con la que vamos a trabajar mysql_select_db("mi_base_datos"); //Ejecutamos la sentencia SQL $result=mysql_query("select * from clientes"); ?> <table align="center"> <tr> <th>Nombre</th> <th>Telfono</th> </tr> <? //Mostramos los registros while ($row=mysql_fetch_array($result)) { echo '<tr><td>'.$row["nombre"].'</td>'; echo '<td>'.$row["telefono"].'</td></tr>'; } mysql_free_result($result) ?> </table> <div align="center"> <a href="insertar.html">Aadir un nuevo registro</a><br> <a href="actualizar1.php">Actualizar un registro existente</a><br> <a href="borrar1.php">Borrar un registro</a><br> </div>
120
Unidad:
Edicin No. 1
Programacin Web
</BODY> </HTML>
Los pasos a realizar son, en un principio, los vistos para la insercin de un registro: Conexin a la base y ejecucin de la sentencia. Esta vez, la informacin de dicha ejecucin ser almacenada en una variable ($result). El siguiente paso ser plasmar en pantalla la informacin recogida en $result. Esto lo haremos mediante la funcin mysql_fetch_array que devuelve una variable array con los contenidos de un registro a la vez que se posiciona sobre el siguiente. El bucle while nos permite leer e imprimir secuencialmente cada uno de los registros. La funcin mysql_free_result se encarga de liberar la memoria utilizada para llevar a cabo la consulta. Aunque no es necesaria su utilizacin, resulta altamente aconsejable. 3.12 Seguridad. Sin duda este trmino resultara familiar para muchos. Algunos lo habrn ledo u odo pero no saben de qu se trata. Otros sin embargo sabrn que las cookies son unas informaciones almacenadas por un sitio web en el disco duro del usuario. Esta informacin es almacenada en un archivo tipo texto que se guarda cuando el navegador accede al sitio web. La utilidad principal de las cookies es la de poder identificar al navegador una vez ste visita el sitio por segunda vez y as, en funcin del perfil del cliente dado en su primera visita, el sitio puede adaptarse dinmicamente a sus preferencias (lengua utilizada, colores de pantalla, formularios rellenados total o parcialmente, redireccin a determinadas pginas...). Para crear un archivo cookies, modificar o generar una nueva cookie lo podemos hacer a partir de la funcin SetCookie: setcookie("nombre_de_la_cookie",valor,expiracion);
121
Unidad:
Edicin No. 1
Programacin Web
Pongamos un ejemplo sencillo. Imaginemos que queremos introducir en una variable cookie el nombre del visitante. El nombre ha podido ser previamente recogido por un formulario tal y como hemos visto: setcookie("persona",$nombre,time()+86400*365); De este modo hemos creado una cookie llamada persona que tiene como valor el contenido de la variable $nombre y tendr una duracin de 1 ao a partir de su creacin (el tiempo time() actual en segundos sumado a un ao en segundos). Es importante que la creacin de la cookie sea previa a la apertura del documento HTML. En otras palabras, las llamadas a la funcin setcookie() deben ser colocadas antes de la etiqueta HTML. Por otra parte, es interesante sealar que el hecho de que definir una cookie ya existente implica el borrado de la antigua. Del mismo modo, el crear una primera cookie conlleva la generacin automtica del archivo texto. Hay que tener cuidado sin embargo de no definir variables en nuestro script con el mismo nombre que las cookies puesto que PHP privilegiar el contenido de la variable local con respecto a la cookie y no dar un mensaje de error. Esto nos puede conducir a errores realmente difciles de detectar. Recordamos que es posible recopilar en una variable tipo array el conjunto de cookies almacenadas en el disco duro del internauta mediante la variable de servidor $HTTP_COOKIE_VARS Las cookies son una herramienta fantstica para personalizar nuestra pgina pero hay que ser cautos ya que, por una parte, no todos los navegadores las aceptan y por otra, se puede deliberadamente impedir al navegador la creacin de cookies. Es por ello que resultan un complemento y no una fuente de variables infalible para nuestro sitio.
122
Unidad:
Edicin No. 1
Programacin Web
UNIDAD IV. Procesamiento del lado del cliente Objetivo: Desarrollar los mdulos del lado de cliente. 4.1 Lenguaje Script del cliente.
Un script en el lado del cliente es un programa que puede acompaar a un documento HTML o que puede estar incluido en l. El programa se ejecuta en la mquina del cliente cuando se carga el documento, o en algn otro instante, como por ejemplo cuando se activa un vnculo. El soporte de scripts de HTML es independiente del lenguaje de scripts. Los scripts ofrecen a los autores la posibilidad de extender los documentos HTML de maneras activas e interactivas. Por ejemplo: Pueden evaluarse los scripts a medida que se carga el documento para modificar los contenidos del documento dinmicamente. Los scripts pueden acompaar a un formulario para procesar los datos a medida que stos se introducen. Los diseadores pueden rellenar dinmicamente partes de un formulario segn los valores de los otros campos. Tambin pueden asegurarse de que los datos introducidos concuerden con rangos de valores predeterminados, de que los campos sean consistentes entre s, etc. Los scripts pueden ser llamados por eventos que afecten al documento, como la carga, la descarga, el movimiento del foco sobre los elementos, los movimientos del ratn, etc. Los scripts pueden ser vinculados a controles de formulario (p.ej., botones) para producir elementos grficos para la interfaz del usuario.
Hay dos tipos de scripts que los autores pueden asociar a un documento HTML: Aquellos que se ejecutan una sola vez cuando el agente de usuario carga el documento. Los scripts que aparecen dentro de un elemento SCRIPT se ejecutan cuando el elemento es cargado. Para los agentes de usuario que no puedan o que no vayan a ejecutar scripts, los autores pueden incluir contenido alternativo por medio del elemento NOSCRIPT. Aquellos que son ejecutados cada vez que ocurre un determinado evento. Estos scripts pueden ser asignados a varios elementos por medio de los atributos de eventos intrnsecos.
123
Unidad:
Edicin No. 1
Programacin Web
4.2
Modelo de objetos con lenguaje Script.
La programacin orientada a objetos se ha popularizado enormemente en los ltimos das, y ya resulta difcil encontrar lenguajes de programacin que no tengan una versin o que no estn basados en esta filosofa. JavaScript no se queda al margen de esta tendencia, y aunque no permite dos de las caractersticas clsicas de los lenguajes orientados a objetos (ni la herencia ni el polimorfismo), s permite la creacin y manipulacin de objetos sencillos, y la definicin de mtodos y propiedades para dichos objetos. Sin embargo, lo que verdaderamente nos interesa conocer de un lenguaje de scripts como JavaScript, es el Modelo de Objetos de Documento (DOM, Document Object Model). El DOM es el conjunto de objetos predefinidos que nos permite acceder a todos los elementos de una pgina y a ciertas caractersticas especficas del navegador. Vamos a intentar arrojar luz sobre el oscuro DOM. El DOM es una jerarqua de objetos predefinidos que describen los elementos de la pgina web que est mostrando el navegador, as como otras caractersticas del proceso de navegacin (como son el historial, el tamao de la ventana de navegacin o el contenido de la barra de estado del navegador). Si no se est familiarizado con la programacin orientada a objetos, el concepto de objeto puede resultar algo difuso. Un objeto es, en el fondo, un conjunto de variables y funciones que acta sobre dichas variables, encapsuladas en un mismo paquete. El acceso a las funciones y a las variables se realiza mediante una interfaz bien definida que aisla al programador de la necesidad de conocer cmo estn implementadas internamente dichas funciones. De este modo, la programacin orientada a objetos resulta muy intuitiva, y ms prxima al conocimiento humano. Veamos un ejemplo sencillo. En JavaScript, para escribir un mensaje en un cuadro de dilogo utilizamos: window.alert("Hola mundo!") Si bien no conocemos como funciona internamente la funcin alert(), sabemos cmo invocarla. La abstraccin es tal que nos basta con saber que se trata de una funcin del objeto window. A estas funciones se las llama mtodos, y a las variables propiedades.
124
Unidad:
Edicin No. 1
Programacin Web
Compatibilidad entre los DOMs Aunque puede parecer paradigmtico, actualmente no existe una gran diferencia entre el soporte de JavaScript que ofrecen los fabricantes de los dos navegadores dominantes, Netscape Navigator y Microsoft Internet Explorer. Lo que verdaderamente les diferencia es el Modelo e Objetos de Documento que incorporan. De hecho, el DOM podra considerarse algo independiente del propio lenguaje de scripts. Esta es la idea recogida en el esfuerzo del W3C (World Wide Web Consortium) por obtener un estndar par el Modelo de Objetos de Documento. El estndar, que est an en desarrollo, se divide en 3 partes: DOM Nivel 1 Core (definiciones fundamentales) DOM Nivel 1 HTML DOM Nivel 1 XML
Si este estndar triunfa y tanto Netscape como Microsoft se adhieren a l, el futuro de los scripts para la red ser mucho ms difano, al desaparecer las incompatibilidades entre los diferentes navegadores (pensemos, por ejemplo, en lo costoso que resulta realizar diferentes versiones de un mismo cdigo para que sea ejecutable por todos los navegadores). 4.3 Objetos lenguaje Script nter construidos.
Son los objetos ya definidos previamente en el lenguaje de Javascript y los objetos ya definidos en el navegador Objetos nativos e incorporados Un objeto es una coleccin de propiedades una serie de valores y de mtodos una serie de funciones. Para acceder a una propiedad o un mtodo de un objeto hay que concatenar sta con el nombre del objeto por medio de un punto (.): Objeto.propiedad; Objeto.metodo(argumentos_si_se_necesitan); Con unos ejemplos concretos resultar ms claro.
125
Unidad:
Edicin No. 1
Programacin Web
Primero, voy a emplear directamente un objeto. Supongamos que necesito el valor de . Como s que existe un objeto que consiste en una serie de valores y oper aciones matemticas llamado Math, pido la propiedad PI: var numero_pi = Math.PI; Desde este momento numero_pi tienen un valor de 3.141592653589793. Ahora supongamos que quiero obtener en un script el ao actual. Empleo para ello un objeto, Date, que almacena propiedades y mtodos relativos a la fecha y hora del sistema. As que creo una instancia del objeto y uso un mtodo que me devuelve el ao: var fecha = new Date; alert(fecha.getFullYear()); La alerta mostrar el ao actual. Segn ECMA-262 los objetos se clasifican en:
Nativos: Son objetos proporcionados por una implementacin de este estndar que son independientes del entorno. Eso quiere decir que cualquier lenguaje basado en ECMAScript y conforme a l debe implementarlos. Son:
o o o o o o o o o o o o o o
Array Boolean Date Error EvalError Function Number Object RangeError ReferenceError RegExp String SyntaxError TypeError
126
Unidad:
Edicin No. 1
Programacin Web
URIError
Cada vez que se quiere emplear uno de ellos hay que crear una instancia del objeto por medio de la palabra clave new, como he mostrado en el ejemplo de la fecha.
Incorporados (en ingls built-in): Son, como los anteriores, objetos que tiene que proporcionar una implementacin de ECMA-262 y que tambin son independientes del entorno, pero que deben estar presentes al iniciarse la ejecucin de un programa de ECMAScript. Por ello, como en el ejemplo que he puesto del nmero , no hace falta crear una instancia para acceder a ellos. Son: o Global o Math
Anfitriones: Es todo objeto definido por una implementacin concreta de ECMAScript, y que s depende del entorno, por ejemplo objetos especficos definidos en ActionScript o en JavaScript. De estos ltimos veremos algunos cuando trataemos el BOM.
Tratar todo estos objetos en detalle sera una labor que excede el objetivo de este curso y posiblemente de mis capacidades, as que voy a tratar slo unos pocos objetos que considero que son los ms comnmente empleados. En realidad, lo que me interesa no es tanto los objetos concretos, como explicar el cmo emplear cualquiera de ellos. Array En la seccin dedicada a las variables ya vimos lo que era una matriz, pero como tambin indiqu all, verla como un tipo de variable no es ms que una forma intuitiva de comprenderla. En realidad una matriz es una instancia del objeto Array, y por ello en los ejemplos de las secciones anteriores la declarbamos por medio de la palabra clave new. Como todos los objetos, Array tiene una serie de propiedades y de mtodos. Voy a recoger aqu los ms importantes. De las propiedades, el
127
Unidad:
Edicin No. 1
Programacin Web
que casi en un 90% de las ocasiones se va a emplear en exclusiva es length. Esta propiedad contiene el nmero de valores almacenados en la matriz:
var matriz = new Array(); matriz[0] = 'El primer elemento'; matriz[1] = 'El segundo elemento'; matriz[2] = 'El tercer elemento'; alert(matriz.length);
La alerta de este ejemplo nos mostrara el valor 3. Hay que tener en cuenta que la longitud de una matriz es independiente de la cantidad de valores almacenados, sino que depende de aquel que tenga un ndice mayor. Por ejemplo, si declaramos una matriz especificando inicialmente el nmero de tems:
var matriz = new Array(100);
o asignamos un valor de esta manera:

var matriz = new Array(); matriz[99] = 'El nonagsimo noveno elemento';
La misma alerta de antes nos dira que la longitud de la matriz es 100 en ambos casos.
Dicho esto, recojo ahora los mtodos ms comunes de Array:
Mtodo
Descripcin
Modifica matriz?
la
pop
Devuelve el ltimo elemento de la matriz, y lo elimina de la misS ma.
128
Unidad:
Edicin No. 1
Programacin Web
push
Aade un elemento al final de la matriz, y devuelve la nueva lonS gitud. Invierte el orden de los elementos de la matriz. S
reverse
shift
Devuelve el primer elemento de la matriz, y lo elimina de la misS ma. Ordena los elementos de una matriz. Aade o elimina elementos de una matriz. S S
sort splice
unshift
Aade un elemento al principio de la matriz y devuelve la nueva S longitud. Devuelve una matriz con todos los elementos de las matrices y/o No valores concatenados. Une todos los elementos de una matriz en una nica cadena No literal. Extrae una seccin de una matriz y la devuelve como una nueva No matriz. Devuelve una cadena que representa a la matriz y a sus elemenNo tos. Devuelve el primer ndice del elemento que concuerda con el No valor a comparar, o -1 si no existe. Devuelve el ltimo ndice del elemento que concuerda con el No valor a comparar, o -1 si no existe.
concat
join
slice
toString
indexOf
lastIndexOf
Como se ve en la tabla, algunos de los mtodos modifican la matriz, mientras que otros slo representan la matriz de una forma determinada u ofrecen informacin sobre ella.
129
Unidad:
Edicin No. 1
Programacin Web
Describo todos estos con ms detalle en la pgina de muestra de los mtodos de Array en funcionamiento. Date El objeto Date contiene informacin sobre la fecha y la hora del sistema. Sus mtodos son:
Mtodo
Descripcin Convierte una cadena que representauna fecha en el nmero de milisegundos transcurridos desde las 12 en punto de la noche del 1 de enero de 1970. Devuelve el da del mes de acuerdo con la hora local. Devuelve el da de la semana de acuerdo con la hora local. Devuelve el ao de acuerdo con la hora local. Devuelve la hora de acuerdo con la hora local. Devuelve el milisegundo de acuerdo con la hora local. Devuelve el minuto de acuerdo con la hora local. Devuelve el mes de acuerdo con la hora local. Devuelve el nmero de milisegundos transcurridos desde las 12 en punto de la noche del 1 de enero de 1970. Devuelve el segundo de acuerdo con la hora local. Devuelve los minutos de diferencia entre la hora local y el UTC2.
parse
getDate getDay getFullYear getHours getMilliseconds getMinutes getMonth
getTime
getSeconds getTimezoneOffset
130
Unidad:
Edicin No. 1
Programacin Web
getUTCDate getUTCDay getUTCFullYear getUTCHours
Devuelve el da del mes de acuerdo con la hora universal. Devuelve el da de la semana de acuerdo con la hora universal. Devuelve el ao de acuerdo con la hora universal. Devuelve la hora de acuerdo con la hora universal.
getUTCMilliseconds Devuelve el milisegundo de acuerdo con la hora universal. getUTCMinutes getUTCMonth getUTCSeconds toString toDateString
Devuelve el minuto de acuerdo con la hora universal. Devuelve el mes de acuerdo con la hora universal. Devuelve el segundo de acuerdo con la hora universal. Convierte la fecha en una cadena literal que la representa. Convierte una fecha en una cadena legible para seres humanos. Convierte una fecha en una cadena acorde con la convencin UTC de Internet. Convierte una fecha en una cadena acorde con la convencin de la hora local.
toUTCString
toLocaleString
toLocaleDateString Como el anterior, pero slo para la porcin de da/mes/ao. toLocaleTimeString Como el anterior, pero slo para la porcin de hora/minuto/segundo.
valueOf
Devuelve el nmero de milisegundos transcurridos desde las 12 en punto de la noche del 1 de enero de 1970.
Para cada mtodo que comienza con get hay un equivalente con set, que sirve para establecer los valores de la fecha en lugar de para obtenerlos. Personalmen-
131
Unidad:
Edicin No. 1
Programacin Web
te nunca les he encontrado aplicacin, as que los menciono, pero no los incluyo en el ejemplo. String
Como vimos al tratar las variables, se puede declarar cualquier tipo de escalar por medio de la palabra clave var. No obstante, existe un objeto con sus propiedades y mtodos para cada tipo de variable. As, existen los objetos Boolean, Number y String. Ahora vamos a tratar este ltimo. Como en el caso de Array, la propiedad ms importante de String es length, que es el nmero de caracteres de una cadena:
var cadena_literal = "I have become comfortably brilliant"; var longitud = cadena_literal.length; // Ahora la variable longitud es igual a 35 // (los espacios en blanco tambin son caracteres)
Sus mtodos destacados son:

Mtodo
charAt charCodeAt
Descripcin Devuelve el caracter en determinado ndice de la cadena. Devuelve el valor Unicode del caracter en determinado ndice de la cadena.
fromCharCode El inverso del anterior, convierte una cadena de valores Unicode en una literal. concat
Combina el texto de dos cadenas para crear una nueva. Devuelve el ndice de la primera coincidencia de un caracter dentro de una cadena, o -1 si no existe. Devuelve el ndice de la ltima coincidencia de un caracter dentro de una cadena, o -1 si no existe.
indexOf
lastIndexOf
132
Unidad:
Edicin No. 1
Programacin Web
match
Busca las coincidencias de una expresin en una cadena literal. Devuelve las coincidencias, si se producen. Sustituye una expresin por una cadena dentro de otra cadena. Igual que match, pero devuelve los ndices de las coincidencias, o -1 si no se da ninguna. Extrae una seccin de una cadena. Devuelve la subcadena. Devuelve una matriz poblada con subcadenas de una cadena. Devuelve los caracteres solicitados a partir de un ndice. Devuelve los caracteres dentro de los ndices especificados. Devuelve la cadena en minsculas. Devuelve la cadena en maysculas.
replace
search
slice split substr substr toLowerCase toUpperCase
4.4
Eventos con lenguaje Script.
onload = script [CT] El evento onload ocurre cuando el agente de usuario finaliza la carga de una ventana o de todos los marcos de un FRAMESET. Este atributo puede utilizarse con los elementos BODY y FRAMESET. onunload = script [CT] El evento onunload ocurre cuando el agente de usuario elimina un documento de una ventana o marco. Este atributo puede utilizarse con los elementos BODY y FRAMESET. onclick = script [CT]
133
Unidad:
Edicin No. 1
Programacin Web
El evento onclick ocurre cuando se hace clic con el dispositivo apuntador sobre un elemento. Este atributo puede utilizarse con la mayora de los elementos. ondblclick = script [CT] El evento ondblclick ocurre cuando se hace doble clic con el dispositivo apuntador sobre un elemento. Este atributo puede utilizarse con la mayora de los elementos. onmousedown = script [CT] El evento onmousedown ocurre cuando el botn del dispositivo apuntador se pulsa cuando est encima de un elemento. Este atributo puede utilizarse con la mayora de los elementos. onmouseup = script [CT] El evento onmouseup ocurre cuando el botn del dispositivo apuntador se suelta cuando est encima de un elemento. Este atributo puede utilizarse con la mayora de los elementos. onmouseover = script [CT] El evento onmouseover ocurre cuando el dispositivo apuntador se sita sobre un elemento. Este atributo puede utilizarse con la mayora de los elementos. onmousemove = script [CT] El evento onmousemove ocurre cuando el dispositivo apuntador se mueve mientras est sobre un elemento. Este atributo puede utilizarse con la mayora de los elementos. onmouseout = script [CT] El evento onmouseout ocurre cuando el dispositivo apuntador se aparta de un elemento. Este atributo puede utilizarse con la mayora de los elementos.
134
Unidad:
Edicin No. 1
Programacin Web
onfocus = script [CT] El evento onfocus ocurre cuando el foco se dirige hacia un elemento, ya sea con el dispositivo apuntador o por navegacin con tabulador. Este atributo puede utilizarse con los siguientes elementos: A, AREA, LABEL, INPUT, SELECT, TEXTAREA y BUTTON. onblur = script [CT] El evento onblur ocurre cuando el elemento pierde el foco ya sea con el dispositivo apuntador o por navegacin con tabulador. Puede utilizarse con los mismos elementos que onfocus. onkeypress = script [CT] El evento onkeypress ocurre cuando se pulsa y se suelta una tecla encima de un elemento. Este atributo puede utilizarse con la mayora de los elementos. onkeydown = script [CT] El evento onkeydown ocurre cuando se pulsa una tecla encima de un elemento. Este atributo puede utilizarse con la mayora de los elementos. onkeyup = script [CT] El evento onkeyup ocurre cuando una tecla se suelta encima de un elemento. Este atributo puede utilizarse con la mayora de los elementos. onsubmit = script [CT] El evento onsubmit ocurre cuando se enva un formulario. Slo se aplica al elemento FORM. onreset = script [CT] El evento onreset ocurre cuando se reinicializa un formulario. Slo se aplica al elemento FORM. onselect = script [CT]
135
Unidad:
Edicin No. 1
Programacin Web
El evento onselect ocurre cuando un usuario selecciona texto de un campo de texto. Este atributo puede utilizarse con los elementos INPUT y TEXTAREA. onchange = script [CT] El evento onchange ocurre cuando un control pierde el foco de entrada y su valor ha sido modificado despus de que el foco se dirigi hacia l. Este atributo se aplica a los siguientes elementos: INPUT, SELECT y TEXTAREA. Es posible asociar una accin con un cierto nmero de eventos que ocurren cuando un usuario interacciona con un agente de usuario. Cada uno de los "eventos intrnsecos" recin enumerados toma como valor un script. El script se ejecuta cada vez que el evento ocurre para ese elemento. La sintaxis de los datos del script depende del lenguaje de scripts. Los elementos de control tales como INPUT, SELECT, BUTTON, TEXTAREA y LABEL responden todos a ciertos eventos intrnsecos. Cuando estos elementos no aparecen dentro de un formulario, se pueden emplear para enriquecer la interfaz grfica del usuario del documento. Por ejemplo, los autores pueden querer incluir botones en sus documentos que no enven un formulario pero que puedan comunicarse con un servidor cuando son activados.
Los siguientes ejemplos muestran posibles comportamientos de controles e interfaces de usuario basados en eventos intrnsecos. En el siguiente ejemplo, nombreUsuario es un campo de texto obligatorio. Cuando un usuario intenta abandonar el campo, el evento onblur llama a una funcin JavaScript para confirmar que nombreUsuario tiene un valor aceptable. 4.5 Validacin de entrada de datos del lado del cliente.
En seguridad informtica, la validacin de datos es una de las reas ms importantes a tener en cuenta, especialmente en el desarrollo de sistemas conectados a
136
Unidad:
Edicin No. 1
Programacin Web
redes como internet. Validar datos hace referencia a verificar, controlar o filtrar cada una de las entradas de datos que provienen desde el exterior del sistema. Especialmente en sitios web o sistemas online, es fundamental poner algn sistema para validar datos en formularios online y en los parmetros en las direcciones URL. Por ejemplo, una direccin de una pgina web como la siguiente: "nota.php?id=20", recibe el parmetro "id" con valor "20", eso mostrara la nota identificada con ese valor. El cdigo de la pgina "nota.php", debera validar el dato de entrada, verificando que siempre entre un nmero entero. De lo contrario, cualquier atacante podra cambiar ese nmero por un cdigo SQL maligno y, por ejemplo, eliminar toda la base de datos del servidor web. Esta tcnica maligna es llamada inyeccin SQL. La validacin de datos tambin puede hacerse en los formularios web, tanto del lado del cliente (con JavaScript por ejemplo), como del lado del servidor. La validacin por el lado del cliente permite, por ejemplo, avisarle al usuario que el campo de email que acaba de llenar no contiene una direccin de email vlida. Tambin permite avisar si faltan rellenar campos o que se estn utilizando caracteres no vlidos, etc. En en tanto, del lado del servidor, se deben volver a verificar todos esos datos, adems de otras verificaciones. Esto es as porque la validacin por JavaScript puede evitarse si el usuario tiene alguna malintencin. En definitiva, se debe identificar cada uno de los flujos de entrada, verificar que el tipo de dato sea el esperado y no otro, verificar que no haya cdigos ocultos, etc. Vamos realizar un ejemplo de un formulario completo para validar. Las validaciones se hacen en el propio navegador antes de enviarlo. Si hubo algn campo no relleno o con informacin errnea, el formulario muestra el campo que est incorrecto y solicita al usuario que lo cambie. Si todos los datos del formulario son correctos se enva el formulario. Hemos querido hacer un formulario sencillo, para que el ejercicio no se haga demasiado complicado. No obstante, se realizan validaciones en campos con distintos valores, para hacerlo ms variado. Se comprueba un campo donde debe figurar un texto, otro donde debe introducirse un nmero mayor que 18 y un ltimo con un campo select donde deben haber seleccionado un valor. El formulario con el que vamos a trabajar es el siguiente: <form name="fvalida">
137
Unidad:
Edicin No. 1
Programacin Web
<table> <tr> <td>Nombre: </td> <td><input type="text" name="nombre" size="30" maxlength="100"></td> </tr> <tr> <td>Edad: </td> <td><input type="text" name="edad" size="3" maxlength="2"></td> </tr> <tr> <td>Inters:</td> <td> <select name=interes> <option value="Elegir">Elegir <option value="Comercial">Contacto comercial <option value="Clientes">Atencin al cliente <option value="Proveedores">Contacto de proveedores </select> </td> </tr> <tr> <td colspan="2" align="center"><input type="button" value="Enviar" onclick="valida_envia()"></td> </tr> </table> </form> Es un formulario cualquiera. Los nicos puntos donde debemos prestar atencin son:

El nombre del formulario, "fvalida", que utilizaremos para referirnos al l mediante Javascript. El botn de enviar, que en lugar de ser un submit corriente, es un botn que llama a una funcin, que se encarga de validar el formulario y enviarlo si todo fue correcto.
4.6
Consideraciones del soporte del navegador.
1) Puede que su navegador no soporte JavaScript
138
Unidad:
Edicin No. 1
Programacin Web
Si su navegador no soporta JavaScript, deber pasar a una versin ms moderna. Le recomendamos que utilice Internet Explorer 5 o una versin superior, o bien Netscape 6 o superior. 2) Puede que JavaScript est desactivado Si JavaScript est desactivado en su navegador, deber activarlo para poder continuar. Para activar JavaScript, siga las instrucciones de ms abajo segn sea su navegador
139
Unidad:
Edicin No. 1
Programacin Web
UNIDAD V. Servicios Web XML Objetivo: Integrara los Servicios Web XML al desarrollo de aplicaciones. 5.1 Visin general de servicios Web XML.
Web Services y la evolucin hacia la Economa Global Las aplicaciones web actuales ya no son suficientes. El modelo actual de negocio electrnico no facilita la integracin de las aplicaciones de Internet con el resto de software de las empresas. Si las compaas quieren extraer el mximo beneficio de Internet, los sitios web deben evolucionar. Este es el contexto en el que surgen los web services. Los web services son componentes software que permiten a los usuarios usar aplicaciones de negocio que comparten datos con otros programas modulares, va Internet. Son aplicaciones independientes de la plataforma que pueden ser fcilmente publicadas, localizadas e invocadas mediante protocolos web estndar, como XML, SOAP, UDDI o WSDL. El objetivo final es la creacin de un directorio online de web services, que pueda ser localizado de un modo sencillo y que tenga una alta fiabilidad. La funcionalidad de los protocolos empleados es la siguiente:

XML( eXtensible Markup Language): Un servicio web es una aplicacin web creada en XML. WSDL (Web Services Definition Service): Este protocolo se encarga de describir el web service cuando es publicado. Es el lenguaje XML que los proveedores emplean para describir sus web services. SOAP (Simple Object Access Protocol): Permite que programas que corren en diferentes sistemas operativos se comuniquen. La comunicacin entre las diferentes entidades se realiza mediante mensajes que son rutados en un sobre SOAP. UDDI (Universal Description Discovery and Integration): Este protocolo permite la publicacin y localizacin de los servicios. Los directorios UDDI actan como una gua telefnica de web services.
Aunque la idea de la programacin modular no es nueva, el xito de esta tecnologa reside en que se basa en estndares conocidos en los que ya se tiene una gran confianza, como el XML. Adems, el uso de los web services aporta ventajas significativas a las empresas. El principal objetivo que se logra, es la interoperabilidad y la integracin. Mediante los web services, las empresas pueden compartir
140
Unidad:
Edicin No. 1
Programacin Web
servicios software con sus clientes y sus socios de negocio. Esto ayudar a las compaas a escalar sus negocios, reduciendo el coste en desarrollo y mantenimiento de software, y sacando los productos al mercado con mayor rapidez. La integracin de aplicaciones har posible obtener la informacin demandada en tiempo real, acelerando el proceso de toma de decisiones. La evolucin de Internet hacia los web services, mejorar los resultados globales de las empresas, reduciendo sus gastos y guindolas hacia una mejora progresiva de la calidad. La adopcin de la tecnologa de servicios web por la industria es el primer paso hacia una economa global. Posibles riesgos Las expectaciones alrededor de esta tecnologa son grandes, porque el mercado de aplicacin es muy amplio. Pero tambin tiene sus puntos oscuros:
Los web services hacen uso de las mismas tecnologas que han sido atacadas en tantas ocasiones. Usando web services, la seguridad de una empresa puede verse comprometida. La ausencia de tcnicas de seguridad estndar es un obstculo para la adopcin de la tecnologa. La calidad de un web service es un parmetro que no queda demasiado claro, pero cuya medida es fundamental a la hora de desarrollar un servicio maduro.
5.2 Tecnologas subyacentes. Debido a la gran masificacin de Internet a niveles insospechables y al gran impacto causado por las tecnologas de la informacin en las ultimas dos dcadas del siglo pasado, la manera de hacer negocios y la comunicacin entre las personas y las empresas cambi de una manera rotunda. Bajo este contexto se haca cada vez mayor la necesidad de integrar y compartir informacin entre distintas plataformas de software y hardware. Las empresas se percataron que era imposible crear una plataforma integrado de forma individual, as que decidieron atacar el problema de raz. Para esto decidieron que en vez de crear la mejor plataforma integradora, era mejor buscar un leguaje comn de intercambio de informacin aprovechando los estndares existentes en el mercado. Bajo este contexto nacen los Servicios Web basados en XML
141
Unidad:
Edicin No. 1
Programacin Web
5.2.1 SOAP SOAP (Simple Object Access Protocol) SOAP es un protocolo que proporciona un mecanismo estndar de empaquetar mensajes. Este protocolo est pensado para el intercambio de informacin en entornos descentralizados y distribuidos. Usa las tecnologas relacionadas con XML a fin de definir un marco de trabajo extensible para los mensajes. Provee una estructura de mensajes capaz de ser intercambiada sobre una gran cantidad de protocolos de soporte. Este marco ha sido diseado con el fin de que fuera independiente del cualquier modelo de programacin y otras implementaciones de semnticas. Los dos objetivos de diseo principales de SOAP son la simplicidad y la extensibilidad. Para alcanzar estos objetivos, SOAP simplemente elimina de su arquitectura aquellos aspectos que con ms frecuencia se encuentra en los sistemas distribuidos. Podemos agregar las caractersticas que nosotros queramos simplemente extendiendo la especificacin. Ventajas No esta asociado con ningn lenguaje: los desarrolladores involucrados en nuevos proyectos pueden elegir desarrollar con el ltimo y mejor lenguaje de programacin que exista pero los desarrolladores responsables de mantener antiguas aflicciones heredadas podran no poder hacer esta eleccin sobre el lenguaje de programacin que utilizan. No se encuentra fuertemente asociado a ningn protocolo de transporte: La especificacin de SOAP no describe como se deberan asociar los mensajes de SOAP con HTTP. Un mensaje de SOAP no es ms que un documento XML, por lo que puede transportarse utilizando cualquier protocolo capaz de transmitir texto. No est atado a ninguna infraestructura de objeto distribuido. La mayora de los sistemas de objetos distribuidos se pueden extender, y ya lo estn alguno de ellos para que admitan SOAP. Aprovecha los estndares existentes en la industria: Los principales contribuyentes a la especificacin SOAP evitaron, intencionadamente, reinventar
142
Unidad:
Edicin No. 1
Programacin Web
las cosas. Optaron por extender los estndares existentes para que coincidieran con sus necesidades. Por ejemplo, SOAP aprovecha XML para la codificacin de los mensajes, en lugar de utilizar su propio sistema de tipo que ya estn definidas en la especificacin esquema de XML. Y como ya se ha mencionado SOAP no define un medio de trasporte de los mensajes; los mensajes de SOAP se pueden asociar a los protocolos de transporte existentes como HTTP y SMTP. Permite la interoperabilidad entre mltiples entornos: SOAP se desarrollo sobre los estndares existentes de la industria, por lo que las aplicaciones que se ejecuten en plataformas con dicho estndares pueden comunicarse mediante mensaje SOAP con aplicaciones que se ejecuten en otras plataformas.
5.2.2 WSDL WSDL (Web Service Description Language) WSDL son las siglas de Web Services Description Language, un formato XML que se utiliza para describir servicios Web (algunas personas lo leen como wisdel). La versin 1.0 fue la primera recomendacin por parte del W3C y la versin 1.1 no alcanz nunca tal estatus. La versin 2.0 se convirti en la recomendacin actual por parte de dicha entidad. WSDL describe la interfaz pblica a los servicios Web. Est basado en XML y describe la forma de comunicacin, es decir, los requisitos del protocolo y los formatos de los mensajes necesarios para interactuar con los servicios listados en su catlogo. Las operaciones y mensajes que soporta se describen en abstracto y se ligan despus al protocolo concreto de red y al formato del mensaje. As, WSDL se usa a menudo en combinacin con SOAP y XML Schema. Un programa cliente que se conecta a un servicio web puede leer el WSDL para determinar que funciones estn disponibles en el servidor. Los tipos de datos especiales se incluyen en el archivo WSDL en forma de XML Schema. El cliente puede usar SOAP para hacer la llamada a una de las funciones listadas en el WSDL. Estructura de un documento WSDL Un documento WSDL est divido en dos partes claramente diferenciadas:
143
Unidad:
Edicin No. 1
Programacin Web
1.Parte concreta: Es la parte que define el como y donde. 2.Parte abstracta: Es la parte que define qu hace el servicio a travs de los mensajes que enva y recibe Estructura: types: Esta etiqueta define las estructuras de datos que se utilizarn para construir los mensajes de peticin como de respuesta. Estas estructuras de datos pueden construirse con cualquier lenguaje, pero lo ms normal es hacerlo con XML Schema. Este apartado es el ms complicado sobre todo cuando tengamos que construir estructuras de datos muy complejas. message: Describe los mensajes que se van a intercambiar entre el cliente y el Servicio Web. Un mensaje puede estar dividido en varias partes, por ejemplo, si en un mensaje queremos enviar datos y una imagen. portType: Define el conjunto de operaciones que soporta el Servicio Web. Una operacin no es ms que un grupo de mensajes que sern intercambiados. Cada operacin puede enviar o recibir al menos un mensaje cada vez.
En la parte concreta tenemos: binding: Describe como formatear los mensajes para interactuar con unservicio determinado. WSDL no define un estndar para formatear mensajes. Para ello utilizar la extensibilidad para definir como intercambiar los mensajes usando SOAP, HTTP, MIME, etc services: Este elemento indica donde se encuentra el Servicio usando la etiqueta. Cada etiqueta define el formato de los mensajes, y la direccin donde se encuentra el servicio que acepta mensajes en ese formato
5.2.3 UDDI UDDI (Universal Description, Discovery and Integration) UDDI son las siglas del catlogo de negocios de Internet denominadoUniversal Description, Discovery and Integration. Esta solucin basada en estndares permite a las empresas disponer de su propio directorio UDDI(Universal Description, Discovery, and Integration) para uso sobre la intranet o extranet, facilitando el des-
144
Unidad:
Edicin No. 1
Programacin Web
cubrimiento de servicios Web y otros recursos de programacin. Los Servicios corporativos UDDI adems facilitan a las empresas la creacin y puesta en marcha de aplicaciones ms fiables e inteligentes. El registro en el catlogo se hace en XML. UDDI es una iniciativa industrial abierta (sufragada por la OASIS) entroncada en el contexto de los servicios Web. El registro de un negocio en UDDI tiene tres partes: 1) Pginas blancas - direccin, contacto y otros identificadores conocidos. 2) Pginas amarillas - categorizacin industrial basada en taxonomas. 3) Pginas verdes - informacin tcnica sobre los servicios que aportan las propias empresas. UDDI es uno de los estndares bsicos de los servicios Web cuyo objetivo es ser accedido por los mensajes SOAP y dar paso a documentos WSDL, en lo que se describen los requisitos del protocolo y los formatos del mensaje solicitado para interactuar con los servicios Web del catlogo de registros 5.3 Publicacin de un servicio WEB.
l descubrimiento de servicios Web es un proceso que consiste en buscar y consultar descripciones de servicio Web como paso previo para tener acceso a un servicio Web. Mediante el proceso de descubrimiento, los clientes de servicios Web pueden tener conocimiento, en la etapa de diseo, de la existencia de un servicio Web, sus capacidades y la forma correcta de interactuar con l. Los servicios Web se ponen a disposicin de los usuarios mediante un mecanismo de descubrimiento que suele adoptar la forma de archivo de descubrimiento, un documento XML que contiene vnculos a otros documentos de descubrimiento, esquemas XSD y descripciones de servicios en el Lenguaje de descripcin de servicios Web (WSDL). En estos documentos, los usuarios pueden determinar qu servicios estn disponibles. Un cliente de servicios Web potencial dispone de tres maneras de obtener acceso a un documento de descubrimiento: Archivo de descubrimiento esttico: se publica un archivo de descubrimiento, normalmente con la extensin .disco. Los usuarios pueden dirigirse a un archivo de descubrimiento especfico o a la raz de la aplicacin Web si la
145
Unidad:
Edicin No. 1
Programacin Web
pgina Web predeterminada cuenta con un vnculo a ese archivo. Un archivo .disco puede incluir referencias a diversos servicios Web.
Cadena de consulta ?disco: es posible generar de manera dinmica un documento de descubrimiento para cualquier servicio Web que se ejecute en ASP.NET. Se genera un documento de descubrimiento automticamente para un servicio Web cuando se tiene acceso a l mediante una direccin URL con una cadena de consulta que incluye ?DISCO. Por ejemplo, si la direccin URL de un servicio Web es www.contoso.com/getquote.asmx, se genera automticamente un documento de descubrimiento con la direccin URL www.contoso.com/getquote.asmx?DISCO. El documento de descubrimiento slo se aplica a ese servicio Web.
Solicitud de .vsdisco: puede activar el descubrimiento dinmico para permitir a las aplicaciones cliente del servicio Web descubrir todos los servicios Web en la carpeta y subcarpetas correspondientes a una direccin URL solicitada. En este caso no es necesario crear un documento de descubrimiento esttico. Cuando se activa el descubrimiento dinmico para un servidor Web, un programador de Visual Studio .NET que desee generar un proxy de cliente puede especificar una direccin URL que haga referencia a un archivo con una extensin .vsdisco, por ejemplo, www.contoso.com/default.vsdisco, en el cuadro de dilogo Agregar referencia Web.
5.4
Consumo de un servicio WEB.
Existen mltiples definiciones sobre lo que son los Servicios Web, lo que muestra su complejidad a la hora de dar una adecuada definicin que englobe todo lo que son e implican. Una posible sera hablar de ellos como un conjunto de aplicaciones o de tecnologas con capacidad para interoperar en la Web. Estas aplicaciones o tecnologas intercambian datos entre s con el objetivo de ofrecer unos servicios. Los proveedores ofrecen sus servicios como procedimientos remotos y los usuarios solicitan un servicio llamando a estos procedimientos a travs de la Web. Estos servicios proporcionan mecanismos de comunicacin estndares entre diferentes aplicaciones, que interactan entre s para presentar informacin dinmica al usuario. Para proporcionar interoperabilidad y extensibilidad entre estas aplica-
146
Unidad:
Edicin No. 1
Programacin Web
ciones, y que al mismo tiempo sea posible su combinacin para realizar operaciones complejas, es necesaria una arquitectura de referencia estndar. El siguiente grfico muestra cmo interacta un conjunto de Servicios Web:
Segn el ejemplo del grfico, un usuario (que juega el papel de cliente dentro de los Servicios Web), a travs de una aplicacin, solicita informacin sobre un viaje que desea realizar haciendo una peticin a una agencia de viajes que ofrece sus servicios a travs de Internet. La agencia de viajes ofrecer a su cliente (usuario) la informacin requerida. Para proporcionar al cliente la informacin que necesita, esta agencia de viajes solicita a su vez informacin a otros recursos (otros Servicios Web) en relacin con el hotel y la compaa area. La agencia de viajes obtendr informacin de estos recursos, lo que la convierte a su vez en cliente de esos otros Servicios Web que le van a proporcionar la informacin solicitada sobre el hotel y la lnea area. Por ltimo, el usuario realizar el pago del viaje a travs de la agencia de viajes que servir de intermediario entre el usuario y el servicio Web que gestionar el pago. En todo este proceso intervienen una serie de tecnologas que hacen posible esta circulacin de informacin. Por un lado, estara SOAP (Protocolo Simple de Acceso a Objetos). Se trata de un protocolo basado en XML, que permite la interaccin entre varios dispositivos y que tiene la capacidad de transmitir informacin compleja. Los datos pueden ser transmitidos a travs de HTTP , SMTP , etc. SOAP espe-
147
Unidad:
Edicin No. 1
Programacin Web
cifica el formato de los mensajes. El mensaje SOAP est compuesto por un envelope (sobre), cuya estructura est formada por los siguientes elementos: header (cabecera) y body (cuerpo).
Para optimizar el rendimiento de las aplicaciones basadas en Servicios Web, se han desarrollado tecnologas complementarias a SOAP, que agilizan el envo de los mensajes (MTOM) y los recursos que se transmiten en esos mensajes (SOAPRRSHB). Por otro lado, WSDL (Lenguaje de Descripcin de Servicios Web), permite que un servicio y un cliente establezcan un acuerdo en lo que se refiere a los detalles de transporte de mensajes y su contenido, a travs de un documento procesable por dispositivos. WSDL representa una especie de contrato entre el proveedor y el que solicita. WSDL especifica la sintaxis y los mecanismos de intercambio de mensajes. Durante la evolucin de las necesidades de las aplicaciones basadas en Servicios Web de las grandes organizaciones, se han desarrollado mecanismos que permiten enriquecer las descripciones de las operaciones que realizan sus servicios mediante anotaciones semnticas y con directivas que definen el comportamiento. Esto permitira encontrar los Servicios Web que mejor se adapten a los objetivos
148
Unidad:
Edicin No. 1
Programacin Web
deseados. Adems, ante la complejidad de los procesos de las grandes aplicaciones empresariales, existe una tecnologa que permite una definicin de estos procesos mediante la composicin de varios Servicios Web individuales, lo que se conoce como coreografa.
Conclusin
El desarrollo de Internet ha permitido, que hoy ms que nunca estemos comunicados unos con otros, que las brechas entre dos personas se acorten, y el aprender algo nuevo o conocer algn lugar en especial es posible gracias a esta poderosa herramienta. En Internet puede encontrarse prcticamente toda la informacin que pueda imaginarse: texto, fotografas, audio, vdeo, programas, datos, enciclopedias, novelas, investigaciones, y cada da hay ms.
Para que todos esos datos puedan ser consultados, deben estar ordenados de alguna manera. El desarrollo actual del World Wide Web ha proporcionado herramientas de bsqueda, como "motores" o "ndices". En general, el WWW tiene una interfaz de usuario muy amigable, que tiene como nombre Navegador o "Browser", capaz de interpretar "pginas Web" e "hipervnculos" y mostrar esta informacin al usuario.
Una pgina Web es una va de comunicacin entre una empresa y el pblico: clientes y proveedores, por lo tanto es una herramienta que hay que saber usar y explotar para sacarle el mejor provecho en funcin de las necesidades comunicacionales de la empresa. Las posibilidades que ofrece una publicacin en la Web son infinitas, tomando en cuenta su flexibilidad para adaptarse a los cambios de una empresa. Esto permite dar difusin inmediata a promociones y comunicados especiales.
El desarrollo de las aplicaciones Web hoy en dia, permiten que podamos generar medios para dar a conocer una empresa, hacer operaciones a distancia, sin tener que ir al sitio fsi-
149
Unidad:
Edicin No. 1
Programacin Web
camente, potencializar los servicios que una compaa puede ofrecer, muchos de estos servicios no ofrecen algunas de las caractersticas que son deseables en pginas Web con un enfoque comercial. Esto incluye soporte de CGI Script, aplicaciones JAVA, JAVASCRIPT y ActiveX, formas y contadores.
La programacin ha permitido el desarrollo de muchas tecnologas, muchas de las cuales disfrutamos todos los das.
150
Unidad:
Edicin No. 1
Programacin Web
Fuentes consultadas
Estructura de datos en java: compatible con java 2 MARC ALLEN Ed. PRENTICE HALL
ESTRUCTURA DE DATOS EN JAVA Luis Joyanes Aguilar Ed. Mc Graw Hill
Manual imprescindible de html 4.1 German Galeano Gil Ed. Anaya Multimedia
HTML, XHTML Y CSS Elizabeth Castro Ed. Anaya Multimedia
Diseo de paginas web con xhtml, javascript y css Juan Calos Oros Ed. ALFAOMEGA GRUPO EDITOR
JAVASCRIPT David Sawyer Mcfarland Ed. Anaya Multimedia
151
Unidad:
Edicin No. 1
Programacin Web
AJAX JAVASCRIPT Y PHP Phil ballard Ed. Anaya Multimedia
152

Antologia de Programacionweb

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Antologia de Programacionweb

Enviado por

Direitos autorais:

Formatos disponíveis

Instituto Tecnolgico Superior de Coatzacoalcos

Ingeniera en Sistemas Computacionales

Ing. Jos Roberto Ramrez Guerrero

Coatzacoalcos, Ver. 2010

Instituto Tecnolgico superior de Coatzacoalcos.

Fecha de Edicin: 2010

Ingeniera Sistemas Computacionales. Programacin Web

Instituto Tecnolgico superior de Coatzacoalcos.

Fecha de Edicin: 2010

Ingeniera Sistemas Computacionales. Programacin Web

INTRODUCCIN INDICE JUSTIFICACIN OBJETIVO GENERAL

Instituto Tecnolgico superior de Coatzacoalcos.

Fecha de Edicin: 2010

Ingeniera Sistemas Computacionales. Programacin Web

Instituto Tecnolgico superior de Coatzacoalcos.

Fecha de Edicin: 2010

Ingeniera Sistemas Computacionales. Programacin Web

Instituto Tecnolgico superior de Coatzacoalcos.

Fecha de Edicin: 2010

Ingeniera Sistemas Computacionales. Programacin Web

Instituto Tecnolgico superior de Coatzacoalcos.

Fecha de Edicin: 2010

Ingeniera Sistemas Computacionales.

Instituto Tecnolgico superior de Coatzacoalcos.

Fecha de Edicin: 2010

Ingeniera Sistemas Computacionales.

Instituto Tecnolgico superior de Coatzacoalcos.

Fecha de Edicin: 2010

Ingeniera Sistemas Computacionales.

Instituto Tecnolgico superior de Coatzacoalcos.

Fecha de Edicin: 2010

Ingeniera Sistemas Computacionales.

Instituto Tecnolgico superior de Coatzacoalcos.

Fecha de Edicin: 2010

Ingeniera Sistemas Computacionales.

Instituto Tecnolgico superior de Coatzacoalcos.

Fecha de Edicin: 2010

Ingeniera Sistemas Computacionales.

Instituto Tecnolgico superior de Coatzacoalcos.

Fecha de Edicin: 2010

Ingeniera Sistemas Computacionales.

Instituto Tecnolgico superior de Coatzacoalcos.

Fecha de Edicin: 2010

Ingeniera Sistemas Computacionales.

Instituto Tecnolgico superior de Coatzacoalcos.

Fecha de Edicin: 2010

Ingeniera Sistemas Computacionales.

Instituto Tecnolgico superior de Coatzacoalcos.

Fecha de Edicin: 2010

Ingeniera Sistemas Computacionales.

Instituto Tecnolgico superior de Coatzacoalcos.

Fecha de Edicin: 2010

Ingeniera Sistemas Computacionales.

Instituto Tecnolgico superior de Coatzacoalcos.

Fecha de Edicin: 2010

Ingeniera Sistemas Computacionales.

Instituto Tecnolgico superior de Coatzacoalcos.

Fecha de Edicin: 2010

Ingeniera Sistemas Computacionales.

1.2. Protocolo http (protocolo de transferencia de hipertexto).

Instituto Tecnolgico superior de Coatzacoalcos.

Fecha de Edicin: 2010

Ingeniera Sistemas Computacionales.

Instituto Tecnolgico superior de Coatzacoalcos.