DESARROLLO WEB ENTORNO CLIENTE

Desarrollo de Aplicaciones Web

Jos Luis Comesaa

12

NDICE
1.- Desarrollo web. .................................................................................................................. - 1 1.1.- reas ....................................................................................................................................... - 2 -

2.- Lenguajes de programacin en clientes web. .................................................................... - 4 2.1.- Caractersticas. ........................................................................................................................ - 5 2.2.- Compatibilidades. .................................................................................................................... - 6 2.3.- Seguridad. ............................................................................................................................... - 8 -

3.- Herramientas y utilidades de programacin (I). ............................................................... - 10 3.1.- Herramientas y utilidades de programacin (II). .....................................................................- 11 -

4.- Integracin de cdigo Javascript con HTML (I). ................................................................ - 13 -

Desarrollo de Aplicaciones Web

Tema 1

Jos Luis Comesaa

Arquitecturas y lenguajes de programacin en clientes web.

La empresa "BK Programacin", ha sido informada a travs de uno de sus asesores, de que se ha abierto el plazo, para concursar a la adjudicacin de un proyecto de modernizacin de la web de una importante empresa dedicada a la moda. Ada, la directora de "BK Programacin", decide que es una buena oportunidad para conseguir trabajo para su empresa, por lo que consultan el pliego de requisitos exigidos y ve que su empresa tiene personal suficiente para dar solucin a dicho proyecto. Se enva la solicitud y dos meses ms tarde, la empresa de Ada sale adjudicataria del contrato de modernizacin. El objetivo principal del proyecto es el de dar un mayor dinamismo a las pginas y actualizar la web a lo que se conoce como Web 2.0 (mayor interaccin, interoperabilidad, aplicaciones ms ricas y no intrusivas, etc.) Ada considera que Antonio (estudiante de ciclo y trabajador de su empresa), con conocimientos de lenguaje HTML, podra formarse en las tcnicas necesarias para realizar dicho trabajo de actualizacin y como adems el proyecto tendr un plazo mximo de entrega de 1 ao, dispondr de tiempo ms que suficiente para ello. Ada, informa a sus trabajadores de la adjudicacin de dicho contrato, y Antonio (bajo la tutora de Juan), decide comenzar a investigar en las diferentes opciones disponibles para llevar a cabo su trabajo.

1.- Desarrollo web.

Caso Prctico Juan (tcnico en Desarrollo de Aplicaciones Informticas), ser el tutor de Antonio en la empresa BK Programacin y le ir guiando durante todo el proceso de formacin y en la realizacin del proyecto de modernizacin de la web de la compaa de moda. Para comenzar, Juan le recomienda a Antonio una pequea introduccin sobre lo que es el Desarrollo Web y las diferentes reas que abarca el Diseo Web.

La web fue inicialmente concebida y creada por Tim Berners-Lee, un especialista del laboratorio europeo de partculas (CERN) en 1989. En sus mismas palabras, haba una "necesidad de una herramienta colaborativa que soportara el conocimiento cientfico" en un contexto internacional. l y su compaero Robert Cailliau crearon un prototipo web para el CERN y lo mostraron a la comunidad para sus pruebas y comentarios. Dicho prototipo estaba basado en el concepto de hipertexto (Texto que cuando pulsamos en l nos conduce a otro texto, objeto, sonido, video, seccin o documento relacionado). Como resultado se crearon unos protocolos (cuando pulsamos en l nos conduce a otro texto, objeto, sonido, video, seccin o documento relacionado) y especificaciones que han sido adoptados universalmente e incorporados a Internet, gracias a aportaciones posteriores como el desarrollo por la NCSA de la popular interfaz MOSAIC. Todos los prototipos y desarrollos posteriores crecieron bajo la gua del consorcio W3C, que es una organizacin con base en el MIT de Massachusetts y que se responsabiliza de desarrollar y mantener los estndares web. Por Web se pueden entender tres cosas distintas: el proyecto inicial del CERN, el conjunto de protocolos desarrollados en dicho proyecto o bien el espacio de informacin formado por todos los servidores interconectados. Cuando se habla de la Web generalmente se hace referencia a esto ltimo. Muchas de las discusiones sobre Diseo Web o Desarrollo Web son confusas, ya que la expresin vara considerablemente. Mientras que la mayora de la gente tiene algn tipo de nocin sobre lo

-1-

Arquitecturas y lenguajes de programacin en clientes web

DAW

que significa Diseo Web, solamente unos pocos son capaces de definirlo con exactitud, y t vas a estar dentro de ese grupo. Algunos componentes como diseo grfico o programacin, forman parte de esa discusin, pero su importancia en la construccin de webs vara de persona a persona y de web a web. Algunos consideran la creacin y organizacin de contenido - o ms formalmente, la arquitectura de la informacin - como el aspecto ms importante del Diseo Web. Otros factores como - la facilidad de uso, el valor y funcionalidad del sitio web en la organizacin, su funcionalidad, accesibilidad, publicidad, etc. tambin forman una parte muy activa hoy en da sobre lo que se considera Diseo Web. El Desarrollo Web ha sido y sigue estando muy influenciado por mltiples campos como el de las nuevas tecnologas, los avances cientficos, el diseo grfico, la programacin, las redes, el diseo de interfaces (Medio o forma a travs de la cul un usuario se comunica con el ordenador) de usuario, la usabilidad y una variedad de mltiples recursos. Por lo tanto el Desarrollo Web es realmente un campo multidisciplinar.

Cuando nos referimos a la Web estamos hablando de?

Proyecto del CERN. Protocolos utilizados en el proyecto del CERN. Espacio de informacin que nos proporcionan los servidores a travs de Internet.
Efectivamente es correcta, ya que hoy en da cuando hablamos de Web estamos hablando de todo ese entramado de informacin proporcionado por los servidores de informacin interconectados.

1.1.- reas
Hay cinco reas que cubren la mayor parte de las facetas del Diseo Web: Contenido: incluye la forma y organizacin del contenido del sitio. Esto puede abarcar desde cmo se escribe el texto hasta cmo est organizado, presentado y estructurado usando tecnologas de marcas como HTML. Visual: hace referencia a la plantilla empleada en un sitio web. Esta plantilla generalmente se genera usando HTML, CSS o incluso Flash y puede incluir elementos grficos para decoracin o para navegacin. El aspecto visual es el aspecto ms obvio del Diseo Web, pero no es la nica disciplina o la ms importante. Tecnologa: aunque muchas de las tecnologas web como HTML o CSS entran dentro de esta categora, la tecnologa en este contexto generalmente hace referencia a los diferentes tipos de elementos interactivos de un sitio web, generalmente aquellos construidos empleando tcnicas de programacin. Distribucin: la velocidad y fiabilidad con la que un sitio web se distribuye en Internet o en una red interna corporativa est relacionado con el hardware/software utilizado y el tipo de arquitectura de red utilizada en la conexin. Propsito: la razn por la que un sitio web existe, generalmente est relacionada con algn aspecto de tipo econmico. Por lo tanto este elemento debera considerarse en todas las decisiones que tomemos en las diferentes reas. El porcentaje de influencia de cada una de estas reas en un sitio web, puede variar dependiendo del tipo de sitio que se est construyendo. Una pgina personal generalmente no tiene las consideraciones econmicas que tendra unaweb que va a vender productos en Internet. Una forma de pensar en los componentes del Diseo Web es a travs de la metfora de la pirmide mostrada en la figura de la derecha. El contenido proporciona los ladrillos que formarn la pirmide, pero la base de la pirmide se fundamenta tanto en la parte visual como en la parte tecnolgica y con el punto de vista econmico puesto como

-2-

Desarrollo de Aplicaciones Web

Tema 1

Jos Luis Comesaa

objetivo o propsito final en la mayora de los casos. Aunque la analoga de la pirmide es una forma un poco abstracta de describir el Diseo Web, es una herramienta que nos permite visualizar la interrelacin de los diferentes componentes de la construccin Web. Hoy en da los sitios web siguen un modelo basado en la programacin cliente-servidor con tres elementos comunes: El lado del servidor(server-side): incluye el hardware y software del servidor Web as como diferentes elementos de programacin y tecnologas incrustadas. Las tecnologas pueden abarcar un rango amplio desde programasCGI escritos en PERL hasta aplicaciones multihilo (Tambin denominado multiproceso hace referencia a la posibilidad de ejecutar diferentes trozos de cdigo de una misma aplicacin de forma simultnea) basadas en Java, incluyendo tecnologas de servidor de bases de datos que soporten mltiples sitios web. El lado del cliente(client-side): este elemento hace referencia a los navegadores web y est soportado por tecnologas como HTML, CSS y lenguajes como JavaScript y controles ActiveX, los cuales se utilizan para crear la presentacin de la pgina o proporcionar caractersticas interactivas. Es justamente aqu dnde nos vamos a centrar a lo largo de todo el mdulo. La red: describe los diferentes elementos de conectividad (Capacidad que tiene un dispositivo para poder conectarse a otros. Aqu se detallan los diferentes protocolos y material utilizado para poder realizar dicha conexin) utilizados para mostrar el sitio web al usuario. El entendimiento completo de todos los aspectos tcnicos del medio Web, incluyendo la componente de red, es de vital importancia para llegar a ser un buen Diseador Web.

-3-

Arquitecturas y lenguajes de programacin en clientes web

DAW

2.- Lenguajes de programacin en clientes web.

Caso prctico El proyecto de modernizacin de la empresa de moda va a consistir, principalmente, en aadir mayor funcionalidad a las pginas ya existentes, ms control en los formularios, dinamismo, modernizacin de la mecnica de varios procesos, etc. Antonio tendr que centrarse en los lenguajes de programacin en el lado del cliente, ya que stos son los que le ayudarn a aportar las capacidades solicitadas en el proyecto. Antonio se pone manos a la obra y consulta bajo la tutora de Juan, qu opciones tienen para llevar a cabo esa programacin y analizan las caractersticas, compatibilidades y seguridad aportada por los lenguajes de programacin en el lado del cliente.

Cuando hablamos de tecnologas empleadas en lenguajes de programacin web podemos citar dos grupos bsicos: client-side y server-side. Las tecnologas client-side son aquellas que son ejecutadas en el cliente, generalmente en el contexto del navegador web. Cuando los programas o tecnologas son ejecutadas o interpretadas por el servidor estamos hablando de programacin server-side. Uno de los objetivos en la programacin web es saber escoger la tecnologa correcta para tu trabajo. Muchas veces los desarrolladores escogen rpidamente una tecnologa favorita, que puede ser JavaScript, ColdFusion o PHP y la usan en todas las situaciones. La realidad es que cada tecnologa tiene sus pros y sus contras. En general las tecnologas client-side y server-side poseen caractersticas que las hacen complementarias ms que adversarias. Por ejemplo, cuando aadimos un formulario para recoger informacin y grabarla en una base de datos, es obvio que tendra ms sentido chequear el formulario en el lado del cliente para asegurarnos que la informacin introducida es correcta, justo antes de enviar la informacin a la base de datos del servidor. La programacin en el lado del cliente consigue que la validacin del formulario sea mucho ms efectiva y que el usuario se sienta menos frustrado al cubrir los datos en el formulario. Por otro lado el almacenar los datos en el servidor estara mucho mejor gestionado por una tecnologa del lado del servidor (server-side), dando por supuesto que la base de datos estar en el lado del servidor. Cada tipo general de programacin tiene su propio lugar y la mezcla es generalmente la mejor solucin. Cuando hablamos de lenguajes de programacin en clientes web, podemos distinguir dos variantes: Lenguajes que nos permiten dar formato y estilo a una pgina web (HTML, CSS, etc.). Lenguajes que nos permite aportar dinamismo a pginas web (lenguajes de scripting). En este mdulo nos vamos a centrar principalmente en estos ltimos, los lenguajes de scripting, y en particular en el lenguaje JavaScript que ser el lenguaje que utilizaremos a lo largo de todo este mdulo formativo. Tabla comparativa de lenguajes de programacin web cliente servidor. Lado del Cliente (client-side) Lado del servidor (server-side) Scripts y programas CGI. Aplicaciones de Ayuda. Programas API del servidor. Programas del API del navegador. Mdulos de Apache. Plug-ins de Netscape. Extensiones ISAPI y filtros. Controles ActiveX. Servlets de Java. Applets de Java. Lenguajes de scripting. Lenguajes de scripting. PHP. JavaScript. Active Server Pages (ASP/ASP.NET). VBScript. ColdFusion. ...

-4-

Desarrollo de Aplicaciones Web

Tema 1

Jos Luis Comesaa

Hemos escogido JavaScript porque es el lenguaje de script (Lenguaje de guiones o lenguaje de rdenes que se almacena por lo general en archivos de texto plano y que ser ejecutado por un programa intrprete) ms utilizado en la programacin en el lado del cliente, y est soportado mayoritariamente por todas las plataformas (Sistema operativo utilizado por un determinado dispositivo). Por lo tanto a partir de ahora todas las referencias que hagamos estarn enfocadas hacia JavaScript. A continuacin te mostramos un esquema de las 4 capas del desarrollo web en el lado del cliente, en la que se puede ver que JavaScript se sita en la capa superior gestionando el comportamiento de la pgina web. Tabla de las 4 capas del desarrollo web en el lado del cliente. Comportamiento (JavaScript) Presentacin (CSS) Estructura (DOM / estructura HTML) Contenido Estructurado (documento HTML) Contenido (texto, imgenes, vdeos, etc.)

2.1.- Caractersticas.
Como vimos anteriormente, los lenguajes de programacin para clientes web no son un reemplazo de la programacin en el lado del servidor. Cualquier web que Icono indicador de reaccione dinmicamente a interacciones del usuario o que almacene datos, estar actividad AJAX. gestionada por lenguajes de script en el lado del servidor, incluso aunque usemos JavaScript en el cliente para mejorar la experiencia de usuario. Las razones son simples: Primero: JavaScript por s mismo no puede escribir ficheros en el servidor. Puede ayudar al usuario a elegir opciones o preparar datos para su envo, pero despus de eso solamente podr ceder los datos al lenguaje de servidor encargado de la actualizacin de datos. Segundo: no todos los clientes web ejecutan JavaScript. Algunos lectores, dispositivos mviles, buscadores, o navegadores instalados en ciertos contextos estn entre aquellos que no pueden realizar llamadas a JavaScript, o que simplemente son incompatibles con el cdigo de JavaScript que reciben. Aunque sto ocurra, nuestra pgina web debera ser completamente funcional con JavaScript desactivado. Utilizaremos JavaScript para conseguir que la experiencia de navegacin web sea lo ms rpida, moderna o divertida posible, pero no dejaremos que nuestra web deje de funcionar si JavaScript no est funcionando. Tercero: uno de los caminos que ms ha integrado la programacin cliente con la programacin servidor ha surgido gracias a AJAX. El proceso "asncrono" de AJAX se ejecuta en el navegador del cliente y emplea JavaScript. Este proceso se encarga de solicitar datos XML, o enviar datos al lenguaje de servidor y todo ello de forma transparente en background. Los datos devueltos por el servidor pueden ser examinados por JavaScript en el lado del cliente, para actualizar secciones o partes de la pgina web. Es as como funciona una de las webs ms populares en Internet, el servicio de Google Maps ( http://maps.gogle.com ). JavaScript est orientado a dar soluciones a: Conseguir que nuestra pgina web responda o reaccione directamente a la interaccin del usuario con elementos de formulario y enlaces hipertexto. La distribucin de pequeos grupos de datos y proporcionar una interfaz amigable para esos datos. Controlar mltiples ventanas o marcos de navegacin, plug-ins, o applets Java basados en las elecciones que ha hecho el usuario en el documento HTML. Pre-procesar datos en el cliente antes de enviarlos al servidor. Modificar estilos y contenido en los navegadores de forma dinmica e instantneamente, en respuesta a interacciones del usuario. Solicitar ficheros del servidor, y enviar solicitudes de lectura y escritura a los lenguajes de servidor.

-5-

Arquitecturas y lenguajes de programacin en clientes web

DAW

Los lenguajes de script como JavaScript no se usan solamente en las pginas web. Los intrpretes (Programa informtico capaz de analizar y ejecutar cdigo escrito en un lenguaje de programacin de alto nivel (aquel que se acerca ms a la capacidad cognitiva de las personas en lugar de a la capacidad ejecutora de la mquina)) de JavaScript estn integrados en mltiples aplicaciones de uso cotidiano. Estas aplicaciones proporcionan su propio modelo de acceso y gestin de los mdulos que componen la aplicacin y para ello comparten el lenguaje JavaScript en cada aplicacin. Podramos citar varios ejemplos como: Google Desktop Gadgets, Adobe Acrobat, Dreamweaver, OpenOffice.org, Google Docs, etc.

Podramos escribir con JavaScript un fichero de texto directamente en el servidor?

S, pero slo si se trata de una cookie. De ninguna manera. S, empleando AJAX.
JavaScript es un lenguaje que interpreta el navegador web y no es un lenguaje de servidor, por lo que no tendr acceso a los recursos para poder escribir en l.

2.2.- Compatibilidades.
A diferencia de otros tipos de scripts como los CGI, JavaScript es interpretado por el cliente. Actualmente existen mltiples clientes o navegadores que soportan JavaScript, incluyendo Firefox, Google Chrome, Safari, Opera, Internet Explorer, etc. Por lo tanto, cuando escribimos un script en nuestra pgina web, tenemos que estar seguros de que ser interpretado por diferentes navegadores y que aporte la misma funcionalidad y caractersticas en cada uno de ellos. sta es otra de las diferencias con los scripts de servidor en los que nosotros dispondremos del control total sobre su interpretacin. Cada tipo de navegador da soporte a diferentes caractersticas del JavaScript y adems tambin aaden sus propios bugs o fallos. Algunos de estos fallos son especficos de la plataforma sobre la que se ejecuta ese navegador, mientras que otros son especficos del propio navegador en s.
Navegadores actuales y su soporte para distintas tecnologas Browser Amaya AOL Explorer Avant Camino Dillo DocZilla ELinks Web Flock Galeon Google Chrome iCab Internet Explorer Internet Explorer Mac K-Meleon Konqueror Links Lynx Maxthon Midori Mosaic Mozilla Mozilla Firefox JavaScript No Yes Yes Yes No Yes Partial Yes Yes Yes Yes Yes Yes for Yes Yes Yes No [note 4] No Yes Yes No Yes Yes
[note 1]

ECMAScript 3 DOM 1 No Yes Yes Yes No No Partial Yes Yes Yes Yes Yes Yes Yes Yes Yes No No Yes Yes No Yes Yes
[note 1]

DOM 2 No Yes No Yes No Yes No Yes Yes Yes Yes Partial Yes [note 3] No Yes Yes No No No Yes No Yes Yes

DOM 3 No No No No [note 2] No Partial No No [note 2] No [note 2] No [note 2] Partial No Partial No No Partial No No No Partial
[note 5] [note 2]

XPath No No No Yes No Yes No Yes Yes Yes Yes No Yes No Yes No No No Yes Yes [note 5] No Yes Yes

DHTML No Yes Yes Yes No Yes No Yes Yes Yes Yes Yes Yes Yes Yes Yes No No Yes Yes No Yes Yes

No Partial Partial Yes No Yes No Yes Yes Yes Yes Partial Yes Partial Yes Yes No No Partial Yes No Yes Yes

[note 1]

XMLHttpRe quest No Yes Yes Yes No Yes No Yes Yes Yes Yes Yes Yes No Yes Yes No No Yes Yes No Yes Yes

Rich editing No Yes Yes Yes No No No Yes Yes Yes Yes No Yes No Yes No No No Yes Yes No Yes Yes

No No [note 2] Partial

-6-

Desarrollo de Aplicaciones Web

Tema 1

Jos Luis Comesaa

Navegadores actuales y su soporte para distintas tecnologas Browser Netscape Netscape Browser Netscape Navigator Netscape Navigator 9 NetSurf OmniWeb Opera Safari SeaMonkey Shiira Sleipnir WorldWideWeb w3m Browser JavaScript Yes Yes Yes Yes No Yes Yes Yes Yes Yes Yes No No JavaScript ECMAScript 3 DOM 1 Yes Yes Partial Yes No Yes Yes Yes Yes Yes Yes No No Yes Depends
[18]

DOM 2 Yes Depends No Yes No Yes Yes Yes Yes Yes No [note 3] No No DOM 2
[18]

DOM 3
[note 2]

XPath Yes Depends

[18]

DHTML Yes Yes Yes Yes No Yes Yes Yes Yes Yes Yes No No DHTML

XMLHttpRe quest Yes Yes No Yes No Yes Yes Yes Yes Yes Yes No No XMLHttpReque st

Rich editing Yes Yes No Yes No No Yes Yes Yes Yes Yes No No Rich ting

No [note 2] No
[note 2]

No Yes No Yes Yes Yes Yes Yes Partial No No

No No [note 2] No No Partial Partial

[note 5]

No Yes No No Yes Yes Yes No Yes No No XPath

No No No No No

[note 2]

ECMAScript 3 DOM 1

DOM 3

edi-

A veces las incompatibilidades entre navegadores al interpretar el cdigo de JavaScript no vienen dadas por el propio cdigo en si, sino que su origen proviene del cdigo fuente HTML. Por lo tanto es muy importante que tu cdigo HTML siga las especificaciones del estndar W3C y para ello dispones de herramientas como el validador HTML W3C: http://validator.w3.org/ Tambin tienes que tener precaucin con las limitaciones en el uso de JavaScript: No todos los navegadores soportan lenguajes de script (en especial JavaScript) en el lado del cliente. Algunos dispositivos mviles tampoco podrn ejecutar JavaScript. Incluso las implementaciones ms importantes de JavaScript en los diferentes navegadores no son totalmente compatibles entre ellas: por ejemplo diferentes incompatibilidades entre Firefox e Internet Explorer. La ejecucin de cdigo JavaScript en el cliente podra ser desactivada por el usuario de forma manual, con lo que no podremos tener una confianza ciega en que se vaya a ejecutar siempre tu cdigo de JavaScript. Algunos navegadores de voz, no interpretan el cdigo de JavaScript. Si te apetece puedes realizar el siguiente TEST INTERACTIVO en el que podrs comprobar tus conocimientos sobre las reas de desarrollo del Diseo Web y los tipos de lenguajes client-side y serverside:

Escribe el nombre de cada rea del Diseo Web identificada en los enunciados.
Incluye la forma y organizacin del contenido del sitio. Referencia a los diferentes tipos de elementos interactivos de un sitio web. Hace referencia a las plantillas usadas en el sitio web. La principal razn por la que un sitio web existe. Hace referencia a la velocidad y fiabilidad de una pgina web. contenido tecnologa visual propsito distribucin

Agrupa los siguientes lenguajes en el grupo que corresponda

HTML client-side JavaScript CSS server-side PHP ASP Perl CGI

-7-

Arquitecturas y lenguajes de programacin en clientes web

DAW

2.3.- Seguridad.
JavaScript proporciona un gran potencial para diseadores maliciosos que quieran distribuir sus scripts a travs de la web. Para evitar esto, los navegadores web en el cliente aplican dos tipos de restricciones: Por razones de seguridad cuando se ejecuta cdigo de JavaScript ste lo hace en un "espacio seguro de ejecucin" en el cul solamente podr realizar tareas relacionadas con la web, nada de tareas genricas de programacin como creacin de ficheros, etc. Adems los scripts estn restringidos por la poltica de "mismo origen": la cual quiere decir que los scripts de una web no tendrn acceso a informacin tal como usuarios, contraseas, o cookies enviadas desde otra web. La mayor parte de los agujeros de seguridad son infracciones tanto de la poltica de "mismo origen" como de la poltica de "espacio seguro de ejecucin". Al mismo tiempo es importante entender las limitaciones que tiene JavaScript y que, en parte, refuerzan sus capacidades de seguridad. JavaScript no podr realizar ninguna de las siguientes tareas: Modificar o acceder a las preferencias del navegador del cliente, las caractersticas de apariencia de la ventana principal de navegacin, las capacidades de impresin, o a los botones de acciones del navegador. Lanzar la ejecucin de una aplicacin en el ordenador del cliente. Leer o escribir ficheros o directorios en el ordenador del cliente (con la excepcin de las cookies). Escribir directamente ficheros en el servidor. Capturar los datos procedentes de una transmisin en streaming de un servidor, para su retransmisin. Enviar e-mails a nosotros mismos de forma invisible sobre los visitantes a nuestra pgina web (aunque s que podra enviar datos a una aplicacin en el lado del servidor capaz de enviar correos). Interactuar directamente con los lenguajes de servidor. Las pginas web almacenadas en diferentes dominios no pueden ser accesibles por JavaScript. JavaScript es incapaz de proteger el origen de las imgenes de nuestra pgina. Implementar multiprocesamiento o multitarea. Otro tipo de vulnerabilidades que podemos encontrar estn relacionadas con el XSS. Este tipo de vulnerabilidad viola la poltica de "mismo origen" y ocurre cuando un atacante es capaz de inyectar cdigo malicioso en la pgina web presentada a su vctima. Este cdigo malicioso puede provenir de la base de datos a la cual est accediendo esa vctima. Generalmente este tipo de errores se deben a fallos de implementacin de los programadores de navegadores web. Otro aspecto muy relacionado con la seguridad son los defectos o imperfecciones de los navegadores web o plugins utilizados. Estas imperfecciones pueden ser empleadas por los atacantes para escribir scripts maliciosos que se puedan ejecutar en el sistema operativo del usuario. El motor de ejecucin de JavaScript es el encargado de ejecutar el cdigo de JavaScript en el navegador y por lo tanto es en l dnde recaer el peso fuerte de la implementacin de la seguridad. Podramos citar varios ejemplos de motores de JavaScript: Active Script de Microsoft: tecnologa que soporta JScript como lenguaje de scripting. A menudo se considera compatible con JavaScript, pero Microsoft emplea mltiples caractersticas que no siguen los estndares ECMA. El kit de herramientas Qt C++ tambin incluye un mdulo intrprete de JavaScript. El lenguaje de programacin Java en su versin JDK 1.6 introduce un paquete denominada javax.script que permite la ejecucin de JavaScript. Y por supuesto todos los motores implementados por los navegadores web como Mozilla, Google, Opera, Safari, etc. Cada uno de ellos da soporte a alguna de las diferentes versiones de JavaScript.

-8-

Desarrollo de Aplicaciones Web

Tema 1

Jos Luis Comesaa

Hoy en da una de las caractersticas que ms se resalta y que permite diferenciar a unos navegadores de otros, es la rapidez con la que sus motores de JavaScript pueden ejecutar las aplicaciones, y la seguridad y aislamiento que ofrecen en la ejecucin de las aplicaciones en diferentes ventanas o pestaas de navegacin.

-9-

Arquitecturas y lenguajes de programacin en clientes web

DAW

3.- Herramientas y utilidades de programacin (I).

Caso prctico En BK Programacin Juan y Antonio han decidido, despus de analizar los requisitos del proyecto y de consultarlo con su directora Ada, que utilizarn el lenguaje JavaScript para la realizacin del proyecto de modernizacin de la empresa de moda. Lo primero que tienen que hacer es decidir qu tipo de herramientas y utilidades adicionales van a usar para realizar la programacin con el lenguaje JavaScript. Buscan alguna herramienta que les permita introducir el cdigo de JavaScript fcilmente y les aporte ayudas adicionales detectando errores sintcticos, partes incompletas, etc. Tambin tienen qu decidir qu navegador o navegadores van a usar para comprobar la ejecucin y compatibilidad de su cdigo de JavaScript.

La mejor forma de aprender JavaScript es tecleando el cdigo HTML y JavaScript en un simple documento de texto. La eleccin del editor depende de ti, pero aqu te voy a dar algunas pistas para realizar una buena eleccin. Para aprender JavaScript no se recomiendan editores del estilo WYSIWYG (What You See is What You Get) como Dreamweaver o FrontPage, ya que estas herramientas estn ms orientadas a la modificacin de contenido y presentacin, y nosotros nos vamos a centrar ms en el cdigo fuente de la pgina. Uno de los factores importantes que tienes que tener en cuenta a la hora de elegir un editor, es ver la facilidad con la que se pueden grabar los ficheros con extensin .html. Independientemente del sistema operativo que ests utilizando cualquier programa que te permita grabar ficheros directamente con la extensin .htm o .html te evitara un gran nmero de problemas. Tambin hay que tener en cuenta la codificacin que emplea ese programa para grabar los ficheros. Por ejemplo en Microsoft Word cuando intentamos guardar archivos ste intenta almacenarlos en un formato binario de Word - algo que los navegadores web no pueden cargar. Para grabar ese archivo con extensin .txt o .html requiere moverse un poco ms por el men de dilogo "Guardar como", lo cul es realmente una clara desventaja. La idea es decantarse por editores que posean caractersticas que te faciliten la programacin web, como por ejemplo: Sintaxis con codificacin de colores. Que resalte automticamente en diferente color o tipos de letra los elementos del lenguaje tales como objetos, comentarios, funciones, variables, etc. Verificacin de sintaxis. Que te marque los errores en la sintaxis del cdigo que ests escribiendo. Que te permita diferenciar los comentarios del resto del cdigo. Que genere automticamente partes del cdigo tales como bloques, estructuras, etc. Que disponga de utilidades adicionales, tales como cliente FTP para enviar tus ficheros automticamente al servidor, etc. Dependiendo del sistema operativo que utilices en tu ordenador dispones de mltiples opciones de editores. Cada una es perfectamente vlida para poder programar en JavaScript. Algunos ejemplos de editores web gratuitos son: Para Windows tienes: Notepad++, Aptana Studio, Bluefish, Eclipse, NetBeans, etc. Para Macintosh tienes: Aptana Studio, Bluefish, Eclipse, KompoZer, Nvu, etc. Para Linux tienes: KompoZer, Amaya, Quanta Plus, Bluefish, codetch, etc. Otro de los componentes obligatorio para aprender JavaScript es el navegador web. No es necesario que te conectes a Internet para comprobar tus scripts realizados con JavaScript. Puedes realizar dicha tarea sin conexin. sto quiere decir que puedes aprender JavaScript y crear aplicaciones con un ordenador porttil y desde cualquier lugar sin necesitar Internet para ello.

- 10 -

Desarrollo de Aplicaciones Web

Tema 1

Jos Luis Comesaa

Si te apetece puedes realizar el siguiente TEST en el que podrs comprobar tus conocimientos sobre las reas de desarrollo del Diseo Web y los tipos de lenguajes client-side y server-side:

Busca 6 Editores que te permitan programar en JavaScript

Z G J M Q T B Z A M I V F H K B S U Y Q C L N H V B K M P E C L I P S E A P T U E Y I Q D I S B P X H U P W M X F B C A T J T I N O T E P A D E A E R T Y E U C S Z X G N C V B N L T I A R K J A Z F G B K H B N T T O F T Y U I J K P E S R W K O M P O Z E R J A H B W S X C V G H R U B N Y F G H J K L R T F I V S

Busca el nombre de 5 navegadores web

Z F V A P T A N A F R W F G S B P X J E C Z T E S G J A K T H T R V F Y X X H M F M E U I T B G U P C J Q A P E M N Y N F I L V K T R E Y W O E I K J O G L B I C I M P R T H K R H R Z Q L Q X E C H B P E R T A C I D F R S A C E R U F M L P O B A Z R T S A B I I N X S C D X K T R H N V V H E B A E G J O W B Y S

3.1.- Herramientas y utilidades de programacin (II).

El tipo de navegador web que utilices es eleccin tuya. Eso s, te recomiendo que uses las ltimas versiones disponibles para evitar problemas de seguridad e incompatibilidades. Algunos ejemplos de navegadores gratuitos son: Para Windows tienes: Mozilla Firefox, Google Chrome, Safari, Opera, Internet Explorer, etc. Para Macintosh tienes: Mozilla Firefox, Safari, Google Chrome, Internet Explorer, etc. Para Linux tienes: Mozilla Firefox, Konqueror, Opera, etc. Una recomendacin muy interesante es el disponer de 2 o 3 tipos de navegadores diferentes, ya que as podrs comprobar la compatibilidad de tu pgina web y ver si tu cdigo fuente deJavaScript se ejecuta correctamente en todos ellos. Para ajustar un poco ms tu entorno de trabajo, lo ltimo que necesitas es el poder ejecutar tu editor web y tu navegador de forma simultnea, ya que el flujo tpico de trabajo en JavaScript va a ser: 1. Introducir HTML, JavaScript y CSS en el documento original en el editor web.

- 11 -

Arquitecturas y lenguajes de programacin en clientes web

DAW

2. Guardarlo en disco. 3. Cambiarte al navegador web. 4. Realizar una de las siguiente tareas: Si es un nuevo documento, abrirlo a travs de la opcin Abrir del men Archivo > Abrir Archivo. Si el documento ya est cargado en el navegador pues simplemente recargar la pgina. Los pasos 2 al 4 son acciones que se van a ejecutar muy frecuentemente. Esa secuencia grabarcambiar-recargar la realizars tantas veces cuando ests escribiendo y depurando tu script, que llegar a ser prcticamente un acto reflejo. Algunos editores ya disponen de teclas rpidas para realizar esta tarea. Todo ello depender del tipo de editor, navegador y sistema operativo que utilices. Otro aspecto muy importante es la validacin. Puedes ahorrarte muchas horas de comprobaciones simplemente asegurndote de que tu cdigo HTML es vlido. Si tu cdigo HTML contiene imperfecciones, tienes muchas posibilidades de que tu JavaScript o CSS no funcionen de la manera esperada, ya que ambos dependen de los elementos HTML y sus atributos. Cuanto ms te ajustes a las especificaciones del estndar, mejor resultado obtendrs entre los diferentes tipos de navegadores. El consorcio W3C, el cul diseo el lenguaje HTML, desarroll un validador que te permitir chequear si tu pgina web cumple las especificaciones indicadas por el elemento DOCTYPE que se incluye al principio de cada pginaweb que realices. El Validador ser tu amigo y te permitir realizar unas pginas ms consistentes. La direccin del Validador W3C es: http://validator.w3.org/ Ofrece tres formas de introduccin de tu cdigo para la validacin - copiando y pegando tu cdigo en un formulario, enviando el fichero .html o bien indicando la direccin URL dnde se encuentra nuestra pgina web. A continuacin se pulsa el botn de chequear y el validador nos devolver los errores encontrados. Realizaremos los cambios necesarios y procederemos a validar de nuevo hasta que no tengamos ms errores.

Seguramente te interesar tener mayor informacin sobre las diferentes especificaciones HTML y CSS. http://www.w3.org/TR/html4/ http://www.w3.org/TR/html5/ http://www.w3.org/TR/xhtml1/ Especificacin sobre: http://www.w3.org/TR/CSS21/ http://jigsaw.w3.org/css-validator/

- 12 -

Desarrollo de Aplicaciones Web

Tema 1

Jos Luis Comesaa

4.- Integracin de cdigo Javascript con HTML (I).

Caso prctico Antonio ha decidido ya el editor y los navegadores web que va a utilizar para programar con JavaScript, as que se pone manos a la obra y mira cuales son los primeros pasos para integrar el nuevo cdigo de JavaScript en el HTML. Como Antonio ya conoce el lenguaje HTML, puesto que lo estudi en uno de los mdulos que est cursando en su ciclo formativo, se centra en la parte especfica de HTML que le permitir integrar el nuevo lenguaje de programacin JavaScript con el lenguaje HTML que ya conoce.

Ahora que ya conoces las herramientas que puedes utilizar para comenzar a programar en JavaScript, vamos a ver la forma de integrar el cdigo de JavaScript en tu cdigo HTML. Los navegadores web te permiten varias opciones de insercin de cdigo de JavaScript. Podremos insertar cdigo usando las etiquetas <script> </script> y empleando un atributo type indicaremos qu tipo de lenguaje de script estamos utilizando: Por ejemplo:
<script type="text/javascript"> // El cdigo de JavaScript vendr aqu. </script>

Otra forma de integrar el cdigo de JavaScript es incrustar un fichero externo que contenga el cdigo de JavaScript. sta sera la forma ms recomendable, ya que as se consigue una separacin entre el cdigo y la estructura de la pgina web y como ventajas adicionales podrs compartir cdigo entre diferentes pginas, centralizar el cdigo para la depuracin de errores, tendrs mayor claridad en tus desarrollos, ms modularidad, seguridad del cdigo y conseguirs que las pginas carguen ms rpido. La rapidez de carga de las pginas se consigue al tener el cdigo de JavaScript en un fichero independiente, ya que si ms de una pgina tiene que acceder a ese fichero lo coger automticamente de la cach del navegador con lo que se acelerar la carga de la pgina. Para ello tendremos que aadir a la etiqueta script el atributo src , con el nombre del fichero que contiene el cdigo de JavaScript. Generalmente los ficheros que contienen texto de JavaScript tendrn la extensin .js . Por ejemplo:
<script type="text/javascript" src="tucodigo.js"></script>

Si necesitas cargar ms de un fichero .js repite la misma instruccin cambiando el nombre del fichero. Las etiquetas de <script> y </script> son obligatorias a la hora de incluir el fichero .js . Atencin : no escribas ningn cdigo deJavaScript entre esas etiquetas cuando uses el atributo src . Para referenciar el fichero origen .js de JavaScript depender de la localizacin fsica de ese fichero. Por ejemplo en la lnea anterior el fichero tucodigo.js deber estar en el mismo directorio que el fichero .html . Podrs enlazar fcilmente a otros ficheros de JavaScript localizados en directorios diferentes de tu servidor o de tu dominio. Si quieres hacer una referencia absoluta al fichero, la ruta tendr que comenzar por http:// , en otro caso tendrs que poner la ruta relativa dnde se encuentra tu fichero .js Ejemplos:
<script <script type="text/javascript" type="text/javascript" src="http://www.tudominio.com/ejemplo.js"></script> src="../js/ejemplo.js"></script>

(el fichero ejemplo.js se encuentra en el directorio anterior ( ../ ) al actual, dentro de la carpeta js/ )

- 13 -

Arquitecturas y lenguajes de programacin en clientes web

DAW

Cuando alguien examine el cdigo fuente de tu pgina web ver el enlace a tu fichero .js , en lugar de ver el cdigo de JavaScript directamente. Esto no quiere decir que tu cdigo no sea inaccesible, ya que simplemente copiando la ruta de tu fichero .js y teclendola en el navegador podremos descargar el fichero .js y ver todo el cdigo de JavaScript. En otras palabras, nada de lo que tu navegador descargue para mostrar la pgina web podr estar oculto de la vista de cualquier programador. A veces te puedes encontrar que tu script se va a ejecutar en un navegador que no soporta JavaScript. Para ello dispones de una etiqueta <noscript> Texto informativo </noscript> que te permitir indicar un texto adicional que se mostrar indicando que ese navegador no soporta JavaScript. Si estamos trabajando con XHTML, la sintaxis para insertar un cdigo de JavaScript directamente en el XHTML es un poco diferente:
<script type="text/javascript"> <!--//--><![CDATA[//><!-// cdigo de JavaScript a continuacin //--><!]]> </script>

Los analizadores de XHTML son intolerantes a los elementos que no comienzan por < y a las entidades HTML que no comienzan por & , y estos caracteres como vers ms adelante son ampliamente utilizados en JavaScript. La solucin es encapsular las instrucciones de JavaScript en lo que se conoce como seccin CDATA :
<![CDATA[ XHTML ]]> permite cualquier tipo de carcter aqu incluyendo < y el smbolo &

Como puedes observar el cdigo es un poco complejo en este caso, razn de ms para integrar el cdigo de JavaScript en un fichero externo. Seguramente estars pensando en cmo puedes proteger el cdigo de JavaScript que vas a programar, del uso fraudulento por otros programadores o visitantes a tu pgina: la respuesta rpida a esa pregunta es que es imposible hacerlo. Para que el cdigo de JavaScript pueda ejecutarse correctamente deber ser cargado por el navegador web y por lo tanto su cdigo fuente deber estar visible al navegador. Si realmente te preocupa que otras personas usen o roben tus scripts, deberas incluir un mensaje de copyright en tu cdigo fuente. Piensa que no solamente tus scripts son visibles al mundo, sino que los scripts del resto de programadores tambin lo son. De esta forma puedes ver fcilmente cuando alguien est utilizando al pie de la letra tus scripts, aunque esto no evita que alguien copie tu cdigo y elimine tu mensaje de copyright. Lo ms que se puede hacer es ofuscar el cdigo, o hacerlo ms difcil de entender. Las tcnicas de ofuscacin incluyen la eliminacin de saltos de lnea, espacios en blanco innecesarios, tabuladores, utilizacin de nombres ininteligibles en las funciones y variables, utilizacin de variables para almacenar trozos de cdigo, uso de recursividad, etc. La forma ms rpida de hacer todas esas tareas de ofuscacin es utilizar un software que producir una copia "comprimida" (Reducir el espacio fsico que ocupa el cdigo fuente de nuestra aplicacin, sin que se produzca prdida de informacin) del script que has programado para facilitar su carga rpida. Para que veas un ejemplo de ofuscador de JavaScript visita: http://www.javascriptobfuscator.com/ Lo mejor es que cambies ese paradigma y pienses de una manera diferente. En lugar de proteger tu cdigo, lo mejor es promocionarlo y hacer ostentacin de l, aadiendo comentarios tiles en el cdigo fuente, publicndolo en tu blog o en webs de programacin, etc. Incluso podrs aadir una

- 14 -

Desarrollo de Aplicaciones Web

Tema 1

Jos Luis Comesaa

licencia Creative Commons para animar a la gente a que lo utilice, lo copie y lo mantenga pblico al resto del mundo. As conseguirs mayor reputacin como buen programador y la gente contactar contigo para ms informacin, posibles trabajos, etc.

Te gustara saber qu tipos de licencias tienes bajo Creative Commons? http://es.creativecommons.org/licencia/

- 15 -