Modulo 1.

1. Tecnologa y conceptos web

1.1 Sitios web
De manera concreta, un sitio web es aquel que presenta la informacin de manera estructurada
por medio de un cdigo de marcas y etiquetas conocido como lenguaje de marcado de
hipertexto: HTML. Este cdigo a su vez es interpretado y ejecutado por un navegador (Firefox,
Google, Chrome, Safari, Opera, Internet Explorer, etctera). Un documento HTML puede contener
texto y elementos multimedia, por ejemplo: imgenes, videos y sonidos.
Los sitios tienen la posibilidad de ser estticos o dinmicos. Los primeros son aquellos que no
permiten una interactividad con el usuario, su contenido permanecer siempre igual. En cambio,
los dinmicos cuentan con un contenido que se puede modificar en tiempo real a medida que el
usuario interacta.1

1. 1. 1 Bases esenciales para un sitio web

Si tenemos como primera consideracin que el usuario tiene 3,8 segundos para ver una
publicacin, que es el tiempo que tenemos para llamar su atencin o ser descartados, el primer
filtro. Solo para que despus, el usuario analice el sitio en 13,2 segundos y decida si es apropiado
o no para su bsqueda. Comprenderemos la relevancia de un mensaje claro, esto es, que el
usuario pueda ver lo que se le ofrece sin distraerse, recordando, que si le hacemos esperar
abandonar el sitio. As mismo la informacin deber ser la adecuada al servicio, haciendo
especial hincapi en no ofrecer miles de posibilidades, no abusar de links o publicidad excesiva,
no hacer uso de submens animados con sonido y/o exceso de animaciones.
El buen manejo de la informacin, nos dar la capacidad de jerarquizarla. Resaltar lo de mayor
importancia, dividir entre prioridades, mediante recursos grficos, siempre teniendo un balance
entre imagen-texto, ya que el uso inadecuado podra desencadenar en fatiga visual y con llevar
al abandono. No se deber pasar por alto el principio leer-mirar-aprender.
En lo referente a los formularios, a mayor cantidad de campos por completar menor cantidad de
actividad del usuario. Deber ser concreto, no pedir datos privados; por ejemplo nmeros de
cuentas bancarias, ya que esto solo significara la perdida de la confiabilidad. Esta ltima solo la
ganaremos por medio de uso de marcas, logotipos y patrocinadores de confianza, que sean
reconocidos y que transmitan confianza al cliente.

1. 1. 2 Definiciones
Algunas de las definiciones que se abordan a continuacin, son de gran relevancia para
comprender el funcionamiento de los sitios web dinmicos, en este apartado. Estas aclaraciones
y ms podrn ser encontradas al final de esta Memoria grfica en el apartado: Glosario.

1. 1. 2. 1 HTTP
Siglas Hypertext Transfer Protocol, es el protocolo empleado para la transferencia de datos en
la World Wide Web.2
Es el protocolo que esta dirigido a transacciones. Se gua por el esquema peticin-respuesta
entre un cliente y el servidor. HTTP define la sintaxis y semntica utilizadas por los elementos de
software de una arquitectura web, conformada por clientes, servidores y proxies, para
comunicarse.

1 RUBIALES, Mario, HTML5, CSS3 y Javascript, Madrid, Espaa, Editorial Anaya Multimedia, 2014, p. 362
2 Ibid, p. 361

1. 1. 2. 2 User agent
User agent que en espaol se traduce como agente de usuario. Es una aplicacin informtica
que funciona como cliente en un protocolo de red. El trmino se utiliza para hacer referencia a
las aplicaciones que acceden a WWW.
El user agent puede ser todo aquel que efecta una peticin, ya sea un navegador web o spider
(web crawler) 3.
Cuando un usuario accede a un sitio web, se enva una cadena de texto que identifica al agente
de usuario ante el servidor, el texto forma parte del pedido a travs de HTTP.

1. 1. 2. 3 URL
Es el acrnimo de Uniform Resource Locator, localizador uniforme de recursos. Se entiende como
la cadena o secuencia de caracteres con formato modlico y estndar, que hace referencia de
forma nica a un recurso, en otras palabras, que se usa para nombrar recursos en internet para
identificarlos y/o localizarlos.

1. 1. 2. 4 WWW
Son las siglas de World Wibe Web, conocida comnmente como la red de redes. Es un
mecanismo de transferencia de documentos HTML, eso significa que distribuye informacin
basada en hipertexto o hipermedios enlazados.4
El usuario a travs de un navegador web y haciendo uso de hiperenlaces, visualiza: sitios,
portales, aplicaciones y ambientes virtuales, que estn compuestos por elementos web. Estos
ltimos pueden llegar a contener textos y multimedia (videos, imgenes, sonidos, etctera).

1. 1. 2. 5 W3C
World Wibe Web Consortium, es el consorcio internacional que promueve y especifica el
cumplimiento de los estndares de web, con el fin que haya un punto de unin entre las
diferentes tecnologas y de esa forma se logre una compatibilidad entre las diversas mquinas y
softwares.5
Sus objetivos son regidos por cuatro principios bsicos. El primero, es que la web este disponible
para todos. El segundo, cualquier dispositivo (mvil, tabletas, etc.) debe poder acceder al
contenido de la web. La web colaborativa es el tercero, se promueven las wikis, blogs y redes
sociales, todo esto en pos de que el usuario pueda intercambiar informacin. Por ltimo el
cuarto: web segura, considerar dentro de los aspectos comerciales y sociales la legalidad.

1. 1. 2. 6 HTML5
Como ya ha sido mencionado el HTML5 es el lenguaje de marcado de hipertexto, por sus siglas
en ingls Hyper Text Markup Language. Predomina en la elaboracin de servicios web, describe y
traduce la informacin, incluso puede llegar incluir un script (Javascript, Ajax, Java) que afecta el
comportamiento de navegadores web y otros procesadores HTML.
HTML5 es la ltima versin de este lenguaje. Puede contener texto y elementos multimedia:
imgenes, video y sonidos.

3 Una araa web es un programa que inspecciona las pginas del WWW de forma automatizada. Es
empleada para crear copia de las pginas web, para luego indexarlas a un sistema de bsqueda rpido.

4 RUBIALES, op. cit. p. 364

5 Ibid, p. 42

1. 1. 3 Diseo
Es necesario que el diseador sea consciente de la estructura y diagramacin, dicho de otra
forma que conozca las conexiones y relaciones entre secciones, la topologa de la red, adems
de la granularidad de los elementos de informacin contenidos entre s.
Adems, deber conocer la navegacin, entenderla como el desplazamiento hacia otras
secciones o servicios de la aplicacin web, sabiendo que son entornos hipermedia formados por
conjuntos de servicios interrelacionados por enlaces unidireccionales, que pueden contener
subelementos con contenidos propios.

1.2 Aplicaciones web

Actualmente, desplegar informacin no es suficiente, es necesario que el sitio contenga
elementos que permiten una comunicacin activa entre el usuario y la web, esto se conoce como
interactividad, dicho de otra manera, la pgina deber responder a las acciones del usuario de
manera fluida. Esto ltimo desemboca en lo que se conocen como aplicaciones web.
Durante aos, las aplicaciones web han sido usados por millones de empresas con fines de
comunicacin y de intercambio de informacin para realizar transacciones con los clientes. Las
empresas utilizan las aplicaciones web para recopilar , procesar y almacenar, transmitir datos
tiles de los clientes, tales como datos personales, informacin de tarjetas de crdito, etc. 6
Pero no slo han sido una efectiva y eficiente ruta de llegada a los clientes potenciales, gracias a
la velocidad para recibir y transmitir informacin, tambin sirven para un gran rango de
propsitos; educacin y expansin del conocimiento, cultura, por solo mencionar algunos de los
campos. Han venido a revolucionar la forma de concebir el mundo virtual y nos han dejado un
nuevo mercado; el mercado virtual.
Pero qu es una aplicacin web? En palabras tcnicas, es el trmino que se le designa a las
herramientas que son ejecutadas en el entorno del navegador, es decir, que se accede a ellas a
travs del internet. Tambin se le define como el documento codificado en un lenguaje (HTML5,
Javascript, CSS, etc.) soportado por el navegador, capaz de desplegar imgenes, sonidos, videos
y links.7
Destaca por ser dinmica, gracias a una de sus principales caractersticas, que es hacer uso de
la interactividad entre la pgina y el usuario.

1. 2. 1 Ventajas y desventajas de una aplicacin web

La disponibilidad de una aplicacin web suele ser alta, esto gracias a ser multiplataforma, en
otros trminos, puede utilizarse en diversos entorno o sistemas operativos 8, esto facilita que
sea compatible y portable ya que puede ser desplegada desde en una desktop hasta en un
dispositivo mvil.
Al ser dinmica permite una retroalimentacin y colaboracin, este dinamismo posibilita las
actualizaciones inmediatas.
Sin embargo, depende de un tercero, por ejemplo del servidor, si ste no se encontrar
disponible la aplicacin no podra ser desplegada, as como tambin podra suscitarse que el
navegador llegase a fallar.

6 http://es.slideshare.net/Divyawebservice/importance-of-web-application-development-for-the-enterprises
11:59 am 19 marzo/15

7 http://www.alegsa.com.ar/Dic/aplicacion%20web.php 10:25 am 19 marzo/15

8 https://www.google.com.mx/webhp?sourceid=chrome-instant&ion=1&espv=2&es_th=1&ie=UTF8#q=significado+de+multiplataforma 14:40 pm 21 marzo/15

Adems, hay que considerar que al tener la facultad de tener accesos pblicos y privados puede
llegar a impedir el acceso a todos.
Por todo lo anterior podemos darnos cuenta que las aplicaciones tienen muchas ventajas, y
aunque sus funciones puedan ser limitadas, son una excelente herramienta.

1.3 Conversin web

Qu resultados buscamos obtener con el usuario?
El primero es captar su atencin. Deberemos saber que es lo que busca en nuestra pgina
para drselo, por ejemplo si entro a una pgina en busca de informacin y encuentra todo menos
esa informacin abandonar el sitio, peor an si la pgina no solo no le muestra lo que busca
sino que adems lo satura con anuncios o popups.
Despertar el inters, sera el segundo punto. Es en este rubro, donde deberemos ofrecer
nuestro producto como el mejor del mercado, haciendo uso de recursos grficos (logotipo,
colores) y mercadotcnicos (slogan, promesa de compra).
Seducir al usuario: generar deseo, con la finalidad de recaudar la mayor cantidad de visitas al
sitio web. Este deseo lo podemos dirigir, segn sea el caso, hacia un producto, un objeto o un
bien, . Deberemos apelar lo prohibido, a la envidia (deseo por lo que es de alguien ms), a algo
extraviado, a algo nico para el usuario y que no pueda ser de nadie ms (al menos en
apariencia).
Y la ms importante, que realice una accin. Dependiendo del objetivo del sitio ser esta, puede
ser llenar un formulario, compartir en redes sociales (difusin) o compra.

1.4 Usabilidad
Se define como la cualidad que tiene un servicio de ser usados fcilmente. En este caso se habla
de que tan fciles de usar resultan los dispositivos, aplicaciones o sistemas. La Organizacin
Internacional para la Estandarizacin la especifica como la capacidad de un software de ser
comprendido, aprendido, usado y ser atractivo para el usuario en condiciones especficas de
uso.9
Esta cualidad depende de diversos factores: usuario, interfaz de usuario, necesidades especficas
de uso y el contexto.
La manera en la que se mide por tanto es subjetiva y relativa, cada medida corresponde a una
meta, la cual puede ser que sea sencillo, rpido o satisfactorio.
La importancia que tiene dentro de los sitios web, intranets, servicios en lnea y aplicaciones
para dispositivos mviles es mayor, ya que permea en la memoria de los usuarios la rapidez con
que se aprende a usar algo, que tan eficaz es y que tan agradable les parece.

1.5 Accesibilidad
Si retomamos lo que dice la 3WC acerca de que los sitios web deben ser aptos para todos, en
cualquier parte del mundo, podremos entender la relevancia de la accesibilidad.
Qu es la accesibilidad? Es el acceso a la informacin, ya sea que se encuentre en forma de
texto, imgenes, sonidos o videos. Esta posibilidad de acceso considera que a personas con
diversas lenguas y con capacidades diferentes, por ejemplo alguien con debilidad visual, o
cualquier otra situacin que sea considerada una discapacidad.

1. 5. 1 Pautas: mobile best practice working group o pautas para

accesibilidad mvil
9 De acuerdo al ISO/IEC 9126.

Mensajes directos que usen lenguaje simple y claro, donde la forma de texto para cada elemento
no textual facilite el entendimiento. Adems, proporcionar ttulos cortos y descriptivos.
En lo relacionado a navegacin, deber ser consistente, los destinos de cada enlace deben ser
claros y bien definidos, reduciendo al mximo la cantidad de enlaces externo. El scroll deber de
ser mnimo, comprendiendo que la navegacin bsica se encuentre en la parte superior,
procurando que sea el scroll en una sola direccin.
El color es importante, por ello busca que la combinacin de los colores de fondo y el primer
plano tengan suficiente contraste, as como que se permita temas con un alto contraste.
Asegurndote que la informacin transmitida a travs de color este disponible sin este, as
mismo, el color no debe ser el nico modo de transmitir informacin, incluye otras indicaciones
visuales.
El diseo debe adaptarse al dispositivo. El tamao global debe adecuarse a las limitaciones de la
memoria del mismo. Usar demasiados scripts consumir mucha energa del aparato.
Recordando que la confiabilidad es una base en los sitios, informa acerca del acceso y uso de su
informacin personal, sus datos debern estar protegidos del spam. Y sirve solo los contenidos
que haya solicitado.

1.6 Motores de bsqueda

Un sistema informtico encargado de buscar archivos almacenados en los servidores web, la
bsqueda la hacen por medio de las spiders o web crawler y a travs de las palabras clave. El
resultado son las pginas de resultados del buscador, que contiene un listado de direcciones web
en dnde se mencionan temas relacionados con las palabras clave buscadas por el usuarios.
Hay dos tipos de motores de bsqueda. Las que estn elaboradas manualmente y que nosotros
podemos incluir (ver ms en Posicionamiento). Y las que son buscadas por las spiders, palabras
clave o keywords (ver en Metadatos)

1. 6. 1 Posicionamiento
El posicionamiento en los buscadores en la actualidad es una de las herramientas ms tiles y
cotizadas. La razn es que aparecer en las primeras posiciones en Google es indispensable si
quieres que visiten tu sitio web, esto se debe a que Google es uno de los buscadores ms
cotizados y ocupado en bsquedas de internet.
Las claves para lograr el tan anhelado posicionamiento, son las siguientes, hay que recordar que
muchas de estas estn determinada por el gusto de las spiders a la hora de seleccionar
pginas e indexarlas. Slo recuerda jugar limpio, Google sanciona a aquellos que por medio de
prcticas poco ticas consiguen posicin.
Contenidos de buena calidad, este punto es importante, porque con l no solo conseguirs
aparecer en las primeras posiciones sino ser visitado.
Tecnologa web y sencillez, son dos cualidades por las cuales puede ser elegida tu pgina. As
que es necesario tener contenido legible y estar al tanto de las novedades en cuanto servidores
y lenguajes. Tambin mantente actualizado en las palabras y trminos necesarios para entender
documentacin.
Debes darte de alta en el buscador http://www.google.com/intl/es/addurl.html.
Conseguir enlaces es igual de importante, te ayudar a conseguir una buena posicin.

1.7 Tipos de navegadores web

Un navegador web tambin conocido como browser o explorador, es el software que permite el
acceso a las WWW por medio de enlaces, interpretando informacin de distintos tipos: texto y
elementos multimedia. Cuando accede a sitios web dinmicos, llega a interactuar con la
informacin.
fig.1
Como lo menciona 3WC, un sitio (en este caso un navegador) deber ser multiplataforma y
deber adecuarse a todos los sistemas. As que de inicio, Internet explorer no cumple con dicho
requisito, lo cual lo debilita dentro del mercado.
Si el usuario no puede acceder y hacer uso de l, buscar otro. Puede ser una situacin
frustrante para el usuario, no encuentra lo que estaba buscando y adems en lugar de eso es
invadido por un anuncio.

1. 7. 2 Mozilla Firefox
Es un navegador opensource, que fue diseado para varios sistemas operativos: Windows, OS X
y GNU/Linux. Se caracteriza por implementar estndares web, as como por los pluggin
(complementos y extensions) que se desarrollan para l y que mejoran la experiencia del
usuario.
Es compatible con varios lenguajes web: HTML, HTML5, XML, XTML, CSS1, CCS2, CSS3, SVG y
JavaScript.

fig.2
El navegador pudo ser instalado, an con sistema operativo OS X, eso le da mayor apertura,
facilita la llegada de usuarios.
La rapidez de descarga fue normal, las imgenes se desplegaron por completo.
fig.3
El nico inconveniente es que no se visualizo un video, para poder verlo se requera de un
pluggin con el que no e contaba. En mi experiencia personal, esto puede ser bastante frustrante,
es un motivo para dejar de usar un navegador y optar por otro.

1. 7. 3 Opera
Es un navegador opensource, que fue diseado para varios sistemas operativos: Windows, OS X
y GNU/Linux. Se caracteriza por sus versiones multiplataforma para desktop, dispositivos mviles
y tabletas, opera en los siguientes sistemas operativos mviles: iOS, Android, Windows Phone,
BlackBerry, Windows Mobile, Maemo y Symbian.

fig.4
La rapidez de descarga fue menor que con Firefox, desplego todas las imgenes.
fig.5

Al igual que con Firefox, me fue imposible visualizar el video, haba la necesidad de actualizar
flash.

1. 7. 4 Chrome
Actualmente es el navegador opensource ms popular. Tambin es considerado uno de los ms
seguro y con interfaz ms amable.
Diseado para varios sistemas operativos: Windows, OS X, GNU/Linux, Debian y Fedora. Adems
de haber sido diseado para sistemas operativos mviles Android e iOS.
Hace uso de las pestaas. Tiene varias prestaciones como: navegar de incognito, traductor y
corrector ortogrfico.

fig.6
La velocidad de descarga fue rpida, las imgenes se descargaron por completo.
fig.7
A diferencia de con su competencia, el video pudo visualizarse sin el requerimiento de un
pluggin o de actualizar flash.

1. 7. 4 Safari
Como Windows tiene Internet Explorer, Apple tiene Safari, a pesar de que en un determinado
momento hubo una versin de Safari para Windows en la actualidad ha sido dejada de lado. Esto
sin duda, al igual que con Windows es un problema para los usuarios, ya que aquellos que no
cuenten con una computadora de sistema OS X o un dispositivos mvil con sistema operativos
iOS no podrn acceder a este navegador.
Es un navegador actualizado, que permite desplegar gran parte del lenguaje web. Pero sin duda,
la falta de accesibilidad para todos se convierte en una traba para su crecimiento.

fig.8
La descarga fue rpida, ms aun que con Chrome, se desplegaron correctamente las imgenes.
fig.9
De la misma manera que con Firefox y Opera, fue imposible visualizar el video.

1. 7. 4 Netscape
Es considerado un navegador descontinuado, de hecho, la compaa que lo cre, AOL, considero
que llego a su fin desde el 2003. A pesar de los intentos por hacer una nueva versin reloaded,
no se ha visto nada nuevo an.
De cualquier manera, es importante considerarlo, ya que hay algunos usuarios que an hacen
uso del l.
Tiene los inconvenientes de un producto que no ha sido actualizado y que depende en gran
medida de otros navegadores.

fig.10

La descarga del navegador fue imposible, se hizo la bsqueda a travs de su pgina de inicio.
Esto es un problema, ya que el usuario al no encontrar la informacin que requiere abandonar
el sitio. As mismo el buscador esta enlazado a Google Chrome como se puede uno percatar.
fig.11
Debido a este enlace con Chrome, fue posible visualizar la pgina y desplegar el video.
Conclusiones de la prueba.
Como usuario es importante siempre contar con todos los complementos y extensiones
necesarios.
Como diseador es necesario considerar a los diversos navegadores, as como los sistemas y las
plataformas

2. Interface: what you see is what you get

2.1 WYSIWYG
Siglas de What You See Is What You Get, tipo de software que permite ver el resultado final de
la pgina Web a medida que vamos insertando elementos en la vista diseo y se va generando
el cdigo de forma automtica.10
Lo que ves es lo que t obtienes, es la promesa tras esta frase. La manera de trabajar de estos
editores es muy similar a la que se utiliza cuando se trabaja en un procesador de textos.

2. 1. 1 Dreamworks CS6
Es una aplicacin que esta destinada a la construccin, diseo y edicin de sitios, vdeos y
aplicaciones web. Es uno de los programas ms utilizados en el sector del diseo y de la
programacin web por sus funcionalidades, tambin porque recientemente sus soporte entra en
los estndares de la 3WC.
Ofrece una gran flexibilidad, as como facilidad de uso, a pesar de que en sus inicios era
considerada una simple WYSIWYG, ahora soporta tecnologas web como CSS, Javascript, entre
otras. Entre sus prestaciones esta la de previsualizar lo que se esta trabajando, adems de
permitirte trabajar con puro cdigo, cdigo y diseo, o solo diseo.

2. 1. 2 Brackets editor
Es un editor de cdigo orientado a los desarrolladores web, es multiplataforma as que lo
podemos usar en cualquier sistema operativo. Comparte muchas caractersticas con el resto de
los editores ms avanzados, por ejemplo: complementos, extensiones o plugins, autocompletado
de texto y resaltado de llaves y parntesis.
Cuenta con una vista previa en vivo, as que se podr ver lo que se esta programando mientras
se esta programando.
El motor de edicin de texto se basa en Codemirror (editor de cdigo fuente para integrar en
pginas web). As pues, cuenta con las mismas caractersticas como editor que Codemirror y al
utilizar tecnologa javascript para su funcionamiento resulta fcil personalizar y extender
funciones mediante complementos, esto es un punto a su favor. Por contra, de momento se
ejecuta ligeramente ms lento que otros editores.11

10 RUBIALES, Op. Cit, p 364

2. 1. 3 NetBeans
sta plataforma, opensource o software libre, que permite que las aplicaciones se desarrollen a
partir de mdulos, lo cul facilita que las aplicaciones puedan ser extendidas fcilmente por
otros desarrolladores de software. As mismo es un programa multiplataforma que es aceptado
en los estndares de la 3WC.
Ofrece servicios, que permiten que los desarrolladores se centren en la lgica de sus
aplicaciones, los servicios son los siguientes.
Gestin de interfaz de usuario, gestin de configuracin de usuario, gestin de almacenamiento
y de ventanas. Tambin tiene herramientas de desarrollo integrado.

2. 1. 4 Sublime text
Es un editor de cdigo fuente, que se distribuye de manera gratuita aunque no es un
opensource. Soporta varios lenguajes web como HTML, CSS (1,2 y 3), XTML, entre otros
Permite las previsualizaciones de la estructura del cdigo, cuenta con diferentes plantillas que
podemos editar. Cuenta con autocompletado y marcado de llaves.

2. 1. 5 Eclipse
Es un programa WYSIWYG que facilita enormemente el trabajo de escribir cdigo. Al ser
obtienes lo que ves, permite la generacin de ventanas complejas sin la necesidad de escribir
uno mismo el cdigo. De acuerdo a lo que garantizan lo creadores del programa, el cdigo
generado por Eclipse no requiere bibliotecas personalizadas adicionales para compilar y ejecutar.
Es compatible con la edicin de cdigos de forma libre, cambios en cualquier lugar y no solo en
zonas elegidas.

2. 1. 6 Adobe muse
Es un WYSIWYG, que se enfoca en trasladar un interfaz grfica a cdigo HTML y CSS, toma las
decisiones de cmo ajustar la propuesta a cdigo. Entre los pros de este programa estn que
permite agregar diseo sin la necesidad de poner cdigo, de hecho fue pensado para
diseadores que no deseaban tener contacto alguno con cdigo. Los contras es que al no
vigilarse el cdigo, este puede estar sucio, lleno de divs vacos o id que no tienen una
funcin clara.
De todos los anteriores es el ms apegado al what you see is what you get sin la necesidad de
saber nada de cdigo.

2. 1. 7 Notepad ++
Programa editor de texto, opensource que soporta varios lenguajes web. Parecido al bloc de
notas y al igual que este es nativo de Windows, con la diferencia que tiene opciones ms
avanzadas para desarrolladores y programadores.
Resalta parntesis, as como corchetes y llaves, y genera indentacin.

2.2 Arquitectura de la informacin

11 http://geekdrops.com/es/content/programando-la-web-editor-adobe-brackets Consultda el 22 de marzo
19:42

Una interfaz no solo depende de los elementos visibles, por ejemplo del diseo, sino de los
elementos invisibles al ojo, como, la estructura y la organizacin.
Se define a la arquitectura de la informacin como la ciencia de organizar espacios informticos
con el fin optimizar y satisfacer las necesidades del usuario.
Una aplicacin web puede crearse siguiendo dos modelos. El primero, mediante el uso de
tecnologas incrustadas, que son unas marcas determinadas que permiten ejecutar la aplicacin
externa en el agente usuario, hacen uso de este recurso tecnologas como Flash y Microsoft
Silverlight. El segundo modelo es mediante tecnologas estandarizadas como XTML, HTML5,
HTML, CSS1, CSS2, CSS3 o JavaScript.
Es importante saber que el primer modelo va de salida del mercado, no es compatible con todos
los sistemas operativos en especial con los sistemas operativos mviles. Por tanto, es lo ptimo
implementar una aplicacin web mediante estndares, para ello se pueden distinguir 3 fases
dentro del proceso.
Estructura y contenido, HTML5 es generalmente la tecnologa utilizada en esta fase, es el primer
rubro, es donde se definirn los diferentes bloques que componen al sitio; cabecera, contenido,
pie, navegacin, etctera, as como, el contenido que se presenta.
La segunda fase es la presentacin, como tecnologa a ocupar se encuentra el CSS. Donde se
disea la apariencia visual y la distribucin de layouts y contenidos.
Por ltimo, la fase de comportamiento, aqu se programa a travs de JavaScript cmo debe
reaccionar la pgina ante las acciones del usuario. Se interacta con el DOM, que significa
document objetc model, es decir, documento modelo del user agent, este DOM le da al agente
usuario los detalles de la interaccin, adems, de un acceso directo a todos los contenidos que
se presentan en la pgina.
Una manera de ordenar las fases del proceso para el desarrollo de una aplicacin, es la
siguiente.
Se planifica el proyecto, se considera el target o usuario meta, el servicio que se ofrece, la
informacin con la que se cuenta y el objetivo al que se espera llegar, la accin que debe
ejecutar el usuario.
El diseo, las tres fase que se mencionaron: estructura-contenido, presentacin y
comportamiento.
Crear un prototipo de la aplicacin web y evaluarlo. De ser correcto, implementarlo y lanzarlo al
mercado.
Durante el tiempo hacer un seguimiento de la aplicacin, as como darle mantenimiento. Hacer
encuestas que arrojen la opinin del usuario, el impacto y las mtricas para llegar a una
conclusin acerca del funcionamiento de la aplicacin.

2. 2. 1 Estructura lgica
Define la navegacin del usuario, esto es, como se va a mover de una zona a otra dentro de la
aplicacin web. Esta se debe planear cuidadosamente y antes de empezar a desarrollar el sitio
web, con el fin de asegurar la accesibilidad y la buena navegacin
Una navegacin puede dar la impresin de libertad (navegacin controlada) o de mucha
libertada (navegacin libre).
Para definir que navegacin deberemos tener, habr que respondernos las siguientes preguntas.
Cul es el propsito del sitio web?
Qu contendr?

Cul es su audiencia?
Qu esperamos obtener?
Qu esperamos los visitantes obtengan?
Las estructuras lgicas se dividen en: secuencial, en rejilla, de rbol, de red y mixta.
fig.16
En la estructura secuencial el movimiento de los usuarios siempre es igual.
fig.17
En la estructura en rejilla se confunden los usuarios, esto puede ser razn suficiente para
abandonar la aplicacin.
fig.18
En la estructura de rbol es la ideal, se maneja por la regla de los tres clicks, esta regla dice que
todo usuario deber poder acceder a todo el contenido del sitio con tan solo tres clicks de la
pgina de inicio.
fig.19
En la estructura de red, permite que haya varios index dependiendo del usuario, por ejemplo
cuando hay varios idiomas, o hay contenido para los usuarios registrados diferente de aquellos
que no estn registrados
fig.20
En la estructura mixta, se combinan las cualidades, son usadas para sistemas complejos. Su
funcionalidad es ms clara.

2. 2. 2 Estructura fsica
Es la forma en la que se almacena los distintos recursos, o ficheros, que forman una aplicacin
web en el sistema de archivos del servidor web. una estructura fsica eficiente reduce los costos
de mantenimiento, el tiempo para localizar un recurso se minimizar. De la misma forma que con
la estructura lgica, la estructura fsica debe ser planeada antes de la construccin de la
aplicacin web. Deber ser organizada de manera legible, para que si en determinado momento
una persona, ajena a la construccin, debe actualizarla, el proceso sea rpido.
Todos los ficheros se almacenan en un nico directorio, o carpeta, tambin pueden estar
almacenados segn el tipo de fichero en distintos directorios. Sin abusar de los directorios, ya
que cada vez que se aumenta uno la URL crece.
Existen diversas alternativas de organizacin, algunos a continuacin se enlistan.
Por el tipo de fichero, por ejemplo: ficheros de grficos, ficheros de videos, ficheros HTML,
ficheros CSS, etc.
Por el contenido, esto funciona para una empresa que maneja varias lneas de productos, cada
lnea puede tener un directorio.
Por nivel de acceso que tengan los usuarios, por ejemplo: los que estn registrados de los que
no, las partes pblicas y las privadas de la aplicacin.
Por fecha, como es el caso de las estructuras peridicas (revistas, peridicos, fanzines).
Por propietario, en caso de empresas donde se divide por departamento o rea.
Por la estructura lgica, se copia la estructura lgica y se aplica a la fsica.

2.3 Nombres de directorios y ficheros

Este sin duda es un punto a cuidar debido a su relevancia no solo para el desarrollador sino para
los usuarios que llegasen a visitar el sitio. Se debern elegir nombres intuitivos que expresen el
contenido o su funcin. Esto facilitar la labor.
Adems se debe tener cuidado con no colocar caracteres especiales. El uso del punto es
exclusivo para la extensin del fichero.

2.4 Guas de estilo web

El objetivo es obtener una estructura lgica correcta, para ello haremos caso de los siguientes
puntos que a continuacin se enlistan.
Primero que nada se debe hacer caso de la regla de los tres clicks, que como ya se ha
mencionado con anterioridad es aquella que rige la cantidad de pulsaciones que un usuario debe
hacer para poder acceder a todo el contenido de una pgina.
Y hablando de enlaces, es importante cuidar que no sean callejones sin salida, que no nos
permitan ni regresar ni avanzar. Por eso se sugiere el uso de una barra de navegacin o men
del sitio con las categoras principales, entre ellas ha de estar el enlace a la pgina principal y la
pgina anterior. Recordemos entonces, que la funcin de la seccin principal es guiar a travs
del contenido al usuario.
No olvidando que la estructura no puede ser demasiado profunda ya que puede perder al
usuario. Y contemplando una identidad de colores que haga saber al usuario cuando ha
abandonado la pgina.

2.5 Usuario, cliente y servidor

La arquitectura cliente servidor facilita la separacin de las funciones de acuerdo a su servicio,
permitiendo situar cada funcin en la plataforma ms adecuada para su ejecucin.
El usuario interacta con un programa conocido como el cliente (programado en HTML), para
solicitar a un servidor web el envo de los recursos que desea obtener.
La misin del cliente web es interpretar las pginas HTML as como los diferentes recursos que
contenga (textos y elementos multimedia. La parte cliente de las aplicaciones web suele estar
integrada por lenguaje de etiquetado HTML, as como por otros lenguajes web como CSS y
DHTML, por cdigos ejecutables realizados en lenguaje script como Javascript y ActiveX, adems,
de estar conformado por pequeo programas o applets realizados en Java.
El servidores espera las solicitudes de conexin mediante protocolo HTTP, por parte de los
clientes web.
Un servidor esta conformado por entidades estticas (HTML), se les llama estticas porque
siempre muestran el mismo contenido, y recursos adicionales como (multimedia, documentos,
etctera).
Durante la transferencia el usuario especifica en el cliente la direccin de la aplicacin, el cliente
establece una conexin con el servidor. Despus, el cliente solicita la pgina o el objeto deseado,
por tanto, el servidor enva dicho objeto o sino lo contiene un cdigo de error. El cliente
interpreta los cdigos. Se cierra la conexin entre el cliente y el servidor. Finalmente se muestra
la aplicacin al usuario. Y se libera la conexin, esta solo dura mientras se transmite la
informacin y se vuelve a activar cuando el usuario le pide al cliente ms.

3. Manejo de textos, links y propiedades

3. 1 HTML5: estructura de lenguaje de etiquetado

Nota para comenzar:

HTML5 es un sistema para incluir informacin acerca del contenido de un documento, no define
como el contenido aparecer en el browser, ese es el rol del CSS, de sus siglas cascading style
sheets sea hoja de estilo en cascada. En pocas palabras se enfoca a la semntica y deja el
estilo visual al CSS.
La importancia de esta semntica recae en que permite ser accedida por diversos sistemas
operativos, incluidos los mviles, mejora la bsqueda de los web crawlers mediante SEO, como
se menciono anteriormente en el posicionamiento, y facilita el mantenimiento.
La estructura de un documento HTML5 esta compuesta por dos partes: cabecera y cuerpo.
Un documento HTML5 esta constituido en base a etiquetas o elementos. Es importante agregar
que no deben contener espacios en blanco, ni caracteres especiales.
Fig.12 Esquema bsico de un elemento HTML5 y las partes que lo componen.
Por otra parte, hay diferentes etiquetas, las que necesitan otra etiqueta de cierra y las que se
cierran en si mismas. Las que se cierran en si mismas llevan un slash antes de este smbolo >.
Las etiquetas ms comunes son las siguientes.
<html>: Esta etiqueta engloba el inicio y el fin de un documento HTML. Salvo algunas
excepciones, cualquier etiqueta del documento debe estar definida dentro de esta etiqueta.
<body>: Etiqueta que engloba el cuerpo del documento, los contenidos e informacin que
vayamos a mostrar deben de estar codificados dentro de esta etiqueta.
<head> Es la etiqueta que define el inicio y el fin de la cabecera del comuento HTML.
<title> Esta etiqueta define el nombre o titulo de nuestra pgina.

3. 2 Integracin de metadatos
Los metadatos en el contexto de la Web, son datos que se pueden guardar, intercambiar y
procesar [] estn estructurados de tal forma que permiten ayudar a la
identificacin, descripcin clasificacin y localizacin del contenido de un documento [] web
[] es un trmino que se utiliza para describir datos que ofrecen el tipo y la clase de la
informacin [] emplean, fundamentalmente, reglas de catalogacin y formatos para transmitir
la informacin12
Los metadatos se encuentran inmersos en el cuerpo del de un documento de HTML5, justo
dentro de la cabeza del archivo <head>, ofrecen informacin adicional que no ser visible en el
diseo pero que lo ser para otro programado y paras las spiders o web crawlers. Esta
informacin puede tratarse del copyright, del autor, la fecha, el idioma, con que se gener el
archivo y de las keywords.
Qu es una keyword? Textualmente es una palabra clave. Las palabras clave son halladas por
los motores de busqueda de los navegadores para indexar a las pginas en las listas. Son la
manera por la cual los usuarios potenciales pueden acceder a nuestra pgina. Proporcionan
trfico a nuestra pgina y eso nos permite estar en las listas, de esa forma tendremos ms
visitas.
As conseguir posicionamiento SEO o SEM, para generar un ROI.
SEO, de sus siglas en ingls search engine optimization, es un servicio que permite posicionarnos
gracias a las palabras clave reservadas y relacionadas con el tema y servicios del sitio.

12 LAMARCA, Mara Jess, Hipertexto: El nuevo concepto de documento en la cultura de la imagen, Tesis
doctoral. Universidad Complutense de Madrid, Espaa, 2013, 184 pp.

SEM, de sus siglas en ingls search engine marketing, es una forma de marketing, busca
promover los servicios web mediante un pago, en otras palabras, pagas por aparecer en el top
de la lista.
ROI, significa return on investment, el retorno sobre la inversin. Es comparar la utilidad
obtenida en relacin con la inversin realizada.
<!doctype html>
<html>
<head>
<meta charset=uff-8>
<meta name= Author content=Margen rojo>
<meta name= Copyright content=Margen rojo>
<meta name=keywords content=museografa, museografa en Mxico, exposiciones en
Mxico, animacin, diseo industrial, paperghost, investigacin, arte, ciencias>
<meta name= description content=Somos una empresa que se dedica a realizar museografa
en Mxico, somos pioneros en nuestro pas.>
<meta name= robots content=index, follow, all>
<title>Margen Rojo</title>
<body>
</body>
</html>
Digamos que este es mi documento, mis palabras clave seran: museografa, museografa en
Mxico, exposiciones en Mxico, animacin, diseo industrial, paperghost, investigacin, arte,
ciencias.
Ahora, si alguien en su buscador Chrome escribiera las siguientes palabras: museografa en
Mxico, aparecera en las listas del buscador el nombre de mi pgina.
Justo esa es la funcin de las keywords con los buscadores y el posicionamiento. Mi pgina esta
posicionada en el tercer lugar.

3. 3 Cdigo ASCII
La codificacin de caracteres es el mtodo que posibilita la conversin de un carcter o letra de
nuestro alfabeto en un cdigo entendible por un sistema informtico. Por ejemplo el sistema
ASCII y el sistema UNICODE, siendo este ltimo en su formato UTF-8 el sistema de codificacin
ms extendido y recomendado.
ASCII, es el acrnimo ingles de American Standard Code for Information Interchange, sea,
Cdigo Estndar Estadounidense para el Intercambio de Informacin. Se utiliza para representar
caracteres que no se encuentran en la lengua inglesa.

3. 4 Ttulos h1-h6 (hgroup)

Etiquetas utilizadas para generar ttulos o bien encabezados de ciertas partes de nuestra pgina
web que necesitan ser resaltados de alguna forma. Hay seis niveles de encabezado, siendo
<h1> el ms importante y <h6> el de menor importancia. Este elemento nicamente soporta el
atributo align que determina la alineacin del encabezado, sus posibles valores son left, cente,
right y justify, que representan izquierda, centro, derecha y justificado, respectivamente.
Las etiquetas <h1> hasta las <h6> tambin son buscadas por spiders y utilizadas para indexar
pginas a sus motores de bsqueda.

3. 5 Textos y propiedades de texto

Actualmente, los bloques de texto constituyen la mayor parte de la informacin de una
aplicacin web.
La etiqueta para presentar textos o prrafos en un documento HTML es la etiqueta <p>. Todo
prrafo que se encuentre definido dentro de esta etiqueta ser tratado como un bloque de texto
que ocupar el ancho de la pgina. Esta etiqueta dispone del atributo align para alinear texto as
como los sytles, aunque veremos ms adelante los atributos se le pueden otorgar desde un CSS.
El texto encerrado en <p> siempre se mostrar tal y como es sin espacios, sin interlineado
especial, la forma adecuada un cambio de lnea es con la etiqueta <br/> en lugar deseado
dentro del cdigo.
La etiqueta <br/> es la que inserta un salto de lnea dentro de un prrafo. Es una etiqueta vaca
que se cierra en s misma.
Para enfatizar ciertas palabras o frases, podemos usar etiquetas de marcado tales como
<strong></strong para las negritas y <em></em> para las cursivas.
Otras etiquetas como <dfn></dfn> que es empleada para proporciona al usuario informacin
acerca del significado de alguna frase o palabra (disponde de un atributo title donde se define el
texto en cuestin). Las etiquetas <cite> y <blockquote>que se usan de forma conjunta, su
principal uso es el de mostrar una cita junto con su autor de esa cita, <cite> es la encargada de
recoger el autor y <blockquoute> es la encargada de mostrar el contenido de la cita.
HTML nos permite mostrar la informacin organizada en listas o vietas, estas las podemos
catalogar en tres tipos.
Ordenadas, la informacin se presenta en lista ordenadas, este orden puede mostrarse de
diferentes maneras: decimal, alfabtico, nmeros romanos, etc.
Para las listas ordenadas necesitamos de dos etiquetas: <ol> y <li>. La etiqueta <ol> es la
etiqueta principal y engloba al resto de los elementos. La etiqueta <li> encierra a cada uno de
los elementos que pertenece a la lista.
No ordenadas, los datos se presentan sin ningn orden. Son tiles, adems de para enlistar
contenido, para generar mens de opciones.
En el caso de las listas no ordenadas la etiqueta principal es <ul>, al igual que con las ordenadas
la <li> encierra a cada uno de los elementos.
De definicin, estn pensadas para generar definiciones asociadas a trminos o palabras.
En el caso de las listas de definicin son necesarios tres elementos o etiquetas: <dl>, <dt> y
<dd>. La etiqueta principal es la <dl> engloba todos los elementos. La etiqueta <dt> se utiliza

para representar el termino que se definirn. Y la etiqueta <dd> es la que englobar el

significado del termino.
HTML da la opcin de anidar una lista dentro de otra, se crea una lista principal y se agrega un
encabezado a acada elemento de la lista principal y despus se agrega una lista dentro de cada
elemento de lista principal.

3. 6 Texto simulado: lorem ispum

Se le conoce comnmente como texto en latn o texto simulado y es una herramienta necesaria
siempre que se vaya a trabajar con informacin escrita.
El texto simulado se usa en infinidad de proyectos que vayan a contener textos, desde los
proyectos editoriales, hasta como en este caso, los proyectos web. Sirven para tener una
consciencia del espacio ocupado por texto, as como una visualizacin de fuentes tipogrficas,
colores y tamaos.
Entre lo ms relevante del texto simulado, es que en muchas ocasiones maneja espacios y
cantidad de caracteres por lnea, lo cual permite tener un acercamiento ms real.
Hay infinidad de aplicaciones web que ofrecen este servicio, donde se pide una cierta cantidad
de prrafos, caracteres o pixeles.

3. 7 Uso y propiedades de links

Utilizaremos la etiqueta <link> para definir las rutas donde el documento HTML debe buscar las
hojas de estilo externas (css) o iconos. Si declaramos esta etiqueta, debe ser siempre dentro de
la cabecera en el caso de un CSS.
Los principales atributos de esta etiqueta son: href, rel y type.
Href: Ruta donde se encuentra el recurso en cuestin.
Rel: Relacin entre el documento y el objeto o recurso que estamos vinculando.
Type: Tipo de MIME del objeto enlazado. MIME, es el acrnimo de Multipurpose Internet Mail
Extensions, especificaciones orientadas a controlar la seguridad y la transparencia de la
transferencia de datos por internet.
Utilizaremos la etiqueta <a> para generar un enlace a otra pgina o recurso. Sus atributos ms
importantes son: href y name.
Href: Especifica la URL o ruta a la que hace referencia el enlace.
Name: Nombre o bien identificador del enlace, es un atributo muy til cuando queremos hacer
enlaces a otros elementos del mismo documento.
La etiqueta <scripit> esta pensada en incluir cdigo JavaScript en la pgina web. Esta etiqueta y
su contenido pude ser declarada tanto en la cabecera como en el cuerpo del documento. Sus
atributos son: src y type.
Src: Especifica la ruta del fichero externo.
Type: Tipo MIME del fichero que estamos haciendo referencia o bien del cdigo incluido en la
etiqueta.

4. Color: estructura y componentes

4. 1 Psicologa del color

La psicologa del color es un campo de estudio que est dirigido a analizar el efecto del color en
la percepcin y la conducta humana.13
Estudia la relacin de los colores con emociones y con bagaje sociocultural al que asociamos los
colores. La psicologa cree que el color hace ms que solamente impactar nuestro sistema visual.
Por ejemplo, los mismos mecanismos que reciben el color, son los que a travs del hipotlamo,
permiten a los pulsos llegar a la pituitaria y la glndula pineal. Se cree que algunas reacciones
temporarias que afectan el estado de nimo ocurren como resultado de la exposicin a ciertos
colores
El color rojo abarca los siguientes significados: amor y sexualidad, violencia y agresividad.
El color anaranjado remite a los siguientes: alegra, diversin, energa e infancia, es el color de
los nios, tambin se asocia al apetito.
El amarillo es asociado tambin al apetito, pero tambin suele saturar y agotar visualmente, es
usado para alertar.
El marrn despierta lstima y empata, es asociado a la humildad.
El verde es el color de la riqueza, se asocia a los dlares, as como tambin a las plantas y la
vida.
El morado es el color de la realeza y el que ms se asocia a la creatividad.
El azul, el color de la tranquilidad y la serenidad, que remite a la honestidad y confianza, en
grandes dosis puede llegar a deprimir.
El negro es el color asociado a la muerte, pero tambin, al poder y la elegancia.
Finalmente, el blanco la suma de todos los colores se asocia a la pureza, la inocencia y amplia
los espacios.

4. 2 Manejo y uso del color

Cuando hablamos de aplicaciones, podemos controlar o guiar al usuario sobre qu camino seguir.
En los sitios web, necesitamos brindar el contenido necesario para promover estadas
prolongadas. Si bien no podemos controlar el foco del usuario, podemos utilizar mtodos
subliminales y el color es una de las formas de hacerlo.
El ms utilizado en estos casos es la aplicacin de colores neutros y colores vivos en aquellas
zonas en las que deseemos que nuestros visitantes se enfoquen.
Para ello, es necesario contar con armonas de color, que aseguran la correcta utilizacin de las
paetas de colores. As como existe una relacin entre los colores y la reaccin humana a ellos.
Tambin existe una reaccin hacia las combinaciones de colores que se encuentran en armona. 14

4. 3 Paleta segura de color

RGB, sigla en ingls de red, green, blue, que significa en espaol rojo, verde y azul. Es un modelo
de color basado en la sntesis aditiva, con el que es posible representar un color mediante la
mezcla por adicin de los tres colores de luz primarios.
En la web la gama de colores consiste en 216 combinaciones de RGB, donde cada color toma un
valor entre seis diferentes, en numeracin hexadecimal.
Utilizando la notacin hexadecimal hay una combinacin de tres cdigos de dos dgitos para
expresar diferentes intensidades, lo cual deja un sistema dodecadecimal que permite expresar

13 http://es.scribd.com/doc/101883150/Eva-Heller-Psicologia-del-color-como-actuan-los-colores-en-lossentimientos-y-razon#scribd 22 de marzo 2015 20:23

14 http://es.slideshare.net/Mariomuz1/uso-del-color-en-el-diseo-web Consultado 25 marzo 2015 21:28

un color en concreto de la escala RGB. En el sistema de numeracin hexadecimal, adems de los

nmeros del 0 al 9 se utilizan seis letras con un valor numrico equivalente. 15
Las pantallas no son iguales, eso sin considerar que pueden ser configuradas por los usuarios, lo
cual deja las codificaciones de colores como relativas y dependientes de las pantallas.

4. 3. 1 Paletton. Color scheme designer

Es un programa que facilita la generacin de triadas de color, con colores seguros, adems de
que provee los cdigos de color para los archivos HTML y CSS, adems, da la posibilidad de
descargar .aco que son archivos que se pueden desplegar en photoshop y usar las paletas. Como
prestacin tiene hacer una pgina muestra con los colores que se han seleccionado.

4. 3. 3 Adobe kuler
Al igual que Paletton, maneja colores seguras para web y da la posibilidad de tradas, tiene
muchas similitudes con el anterior pero contiene menos prestaciones. An as, es una gran
herramienta para trabajar con paletas de color adecuadas.

5. Optimizacin de imgenes y objetos media

5. 1 Formatos de imagen
Los formatos tienen gran importancia, ya que en muchos casos definirn el tamao/resolucin,
peso y color que una imagen tendr. Debemos elegir el formato de acuerdo a nuestras
necesidades.

5. 1. 1 JPG
JPEG, suele ser confundido con JPG. El primero de las siglas en ingles Joint Photographic Experts
Group, Grupo Conjunto de Expertos en Fotografa, es un mtodo de compresin, considerado
como formato de archivo. Es el formato ms comn, utilizado por cmaras fotogrficas digitales
y otro dispositivos.
Junto con JPG, que es otro formato para almacenamiento y para la transmisin de imgenes
fotogrficas en la WWW.
Estas variaciones de formatos a menudo no se distinguen, y se llaman JPEG. Los archivos de
este tipo se suelen nombrar con la extensin .jpg.
El JPG es un buen formato para fotografas a color porque maneja una buena compresin de
color, as que los pesos de la imagen son menores, por lo mismo es posible perder parte de
informacin del archivo original. Pero an as vale la pena porque la aplicacin web se cargar
rpidamente.

5. 1. 2 PNG y GIF
PNG, de sus siglas en ingls de Grficos de Red Porttiles, es un formato grfico, fue desarrollado
para solventar las deficiencias del formato GIF.
El GIF es un formato de Intercambio de Grficos, utilizado en WWW, es decir es un formato para
salida a web. Que se usa para animaciones e imgenes fijas.

15 http://es.wikipedia.org/wiki/RGB Consultado 25 marzo 2015 21:28

El PNG y el GIF son formatos que se usan generalmente para salvar logos con grandes reas de
color slido o cuando requieres transparencia, estos formatos comprimen reas de color continuo
o patrones repetitivos mejor que lo que lo hace el JPG.
Generalmente el PNG es una mejor opcin ya que tiene un mejor algoritmo de comprensin para
archivos pequeos y la transparencia es mejor (maneja un canal alfa). Permite almacenar
imgenes con una mayor profundidad de contraste y otros importantes datos.

5. 1. 3 SVG
De sus siglas en ingls Scalable Vector Graphics que significan Grficos Vectoriales
Redimensionables, son una especificacin para describir grficos vectoriales, dinmicos o
estticos. Pueden ser comprimidos para tener un menor peso.
Es un formato recomendado por la 3WC, por lo que puede ser desplegado en todos los
navegadores actualizados, incluidoInternet Explorer.
El SVG permite tres tipos de objetos grficos; elementos grficos vectoriales, imgenes de mapa
de bits y texto.

5. 2 Manipulacin y optimizacin de imgenes

Crear imgenes para la web requiere de seis factores de suma importancia que son: formato,
color, resolucin, transparencia y animacin.
En lo referente a color.
La mayora de los monitores pueden mostrar miles de colores, pero en algunos casos tienen una
paleta de color limitada.
Como se menciono en Formatos de imagen, lo mejor es usar GIF y PNG-8 en conos y logos.
Fotografas e ilustraciones complejas debern ser salvadas en JPEG o PNHG-24, ya que estos
tienen un mejor manejo de color.
Cuando hablamos de tamao y de resolucin. El tamao de la imagen depender de la
resolucin del monitor del usuario, lo comn es una resolucin del lado ancho de 960 pixeles, de
esta forma no habr necesidad de hacer scroll para ver la imagen.
Ahora, al elegir un programa de edicin, y a pesar de que hay muchos muy buenos en la web, los
mejores son Photoshop y Fireworks, gracias a su capacidad de multiplataforma, es con estos dos
programas con los que a continuacin ilustraremos.

5. 2. 1 Optimizacin para web

Para salvar en Photoshop, imgenes para web y dispositivo:
1. Tras haber creado tu imagen. Entra en Choose a file > Save For Web & Devices.
Aparecer la ventana de dialogo.
2. Elige ver en 2 tablas para ver una optimizada, o en 4 tablas para ver 3 optimizadas.
3. Elige las versin optimizada.
4. Elige el formato a desear.
Debemos recodar que las imgenes deben estar en modo RGB y no en CMYK, que es el cdigo
de color para impresos. A menos que la imagen optimizada la guardes con el mismo nombre de
la original no se perder tu primer imagen.

Solo las capas visibles sern salvadas en la versin optimizada.

Para salvar en Ilustrator, SVG para web.
1. Realizamos nuestra imagen en Ilustrator, puede ser un logo o algn grfico.
2. Save as > SVG.
Aparecer la ventana de dialogo.
3. Podemos previsualizarla, dando un click en el cono de mundo, para cerciorarnos que la imagen
este bien.
4. Le damos OK y tenemos nuestro SVG.
Al igual que en el caso de Photoshop, las imgenes deben estar en modo RGB o hechas con una
paleta segura, para no tener ningn problema a la hora de desplegarlas en pantallas.

5. 3 Integracin de las imgenes al archivo

Puedes integrar cualquiera de las anteriores en tu archivo HTML. Para ello sigue los siguientes
pasos.
1. Coloca tu cursor en el archivo HTML, en la parte donde deseas que aparezca.
2. Escribe <img src=imag.url/> donde imag.url indica el nombre y la localizacin de la imagen.
3. Puedes agregar atributos a la imagen a partir de styles, como por ejemplo quitar o poner
bordes, entre otros.
En caso de que por alguna razn tu imagen no pueda ser desplegada, puedes ofrecer un texto
alternativo que la describir. Eso se realiza de la siguiente manera.
En la etiqueta que describimos anteriormente img, despus de el src escribe alt= y teclea el
texto que deber aparecer en caso de que la imagen no lo haga.
Este atributo es necesario que aparezca en todos los elementos de HTML5. As los usuarios se
pueden dar una idea de lo que trata la imagen. Si la imagen no es relevante para los usuarios
que no ven la W3C sugiere que el contenido de alt= se encuentre el blanco.
El tamao de la imagen lo podemos obtener de tres formas, la primera y menos ptima es
acomodndolo desde el archivo de origen en photoshop. La segunda es indicarle a HTML5 de que
tamao lo deseas. La tercera y ltima, es combinar ambas.
Para especificar el tamao de la imagen a HTML, deberemos determinar que tamao queremos.
Despus en la etiqueta img y despus del atributo src, escribimos width=x height=x usamos
los valores que ya tenamos definidos y agregamos que sean en pixeles. Estos atributos no
necesariamente presentan o reflejan el tamao actual de la imagen.

6. Navegacin
6. 1 Seccin urea
La seccin urea es una proporcin entre medidas, establece la relacin de tamaos con la
misma proporcionalidad entre todo lo dividido (divisin armnica) en segmento mayor y
segmento menor.16

16 http://www.fotonostra.com/grafico/reglaaurea.htm Consultada 28
marzo 6:30 am

Si aplicamos la seccin urea para la distribucin de los elementos de nuestra pgina, podemos
conseguir mayor armona y hacerla ms atractiva. Podemos obtener una cuadrcula con las
divisiones que se quieren siguiendo la seccin urea
Los usuarios perciben las aplicaciones web de acuerdo al rectngulo ureo, que es leerlas de
arriba a la izquierda en diagonal, hacia abajo a la derecha.

6. 2 CMS: plantillas digitales

Content Managment System, es el sistema de gestin de contenidos. Son aplicaciones que
permiten publicar, editar, modificar, organizar o borrar el contenido de un sitio web (como un
blog, sitio web de noticias, sitio web de compras, etc.), as como ser el manager del sitio de
manera automatizada. Todo esto sin la necesidad de codificacin manual.
A continuacin algunos sistemas de gestin de contenidos que tambin ofrecen plantillas
digitales.

Joomla
Es un sistema de gestin que permite desarrollar sitios web dinmicos e interactivos. Es un
software de cdigo abierto. Desarrollado en PHP.
Como todo CMS, permite modificar el contenido sin la necesidad de manejar cdigo de etiquetas,
todo se maneja a travs de un panel de administracin. La administracin de contenido es por
medio de un localhost, intranet o internet, adems requiere de una base de datos. Ofrecer una
gran cantidad de plantillas. Sin embargo, es poco flexible y muy lento.

Wordpress
Es un CMS que se ha enfocado sobretodo a la creacin de blogs, ya que permite una
actualizacin continua, sencilla y sin necesidad de un con. Al igual que Joomla, fue desarrollado
en PHP.
Es un software libre, esto quiere decir que respeta la voluntad del usuario de ejecutar, modificar,
copiar y distribuir el cdigo de la aplicacin de forma libre y sin nimo de lucro. Su panel de
control es bastante intuitivo y funciona a base de pestaas. Esto ha sido un determinante para
ser considerado uno de los sistemas de gestin de contenidos ms popular. Tiene en su contra
las dificultades de ser subido al servidor.

Drupal
Es un CMS modular flexible y configurable, se caracteriza por su dinamismo, este ltimo consiste
en que en lugar de que sus contenidos permanezcan estticos en ficheros de forma fija son
almacenados en una base de datos y se editan en un entorno web, entorno web es una forma
de interfaz de usuario grfico17.
Es un software libre, sta escrito en PHP. Destaca por la calidad de pginas generadas que se
apegan al 3WC. Es por ello que llega ser considerado de difcil manejo, ya que a diferencia de
los anteriores si requiere un conocimiento previo.

Magneto
Magneto es un sistema de gestin opensource o software libre, es flexible y ofrece muchas
prestaciones en cuanto a la funcionalidad gracias a su panel de control. Debido a que fue
adquirida por Ebay, tiene como fuerte las tiendas en lnea.

17 http://www.alegsa.com.ar/Dic/entorno%20web.php Consultado 21 marzo/2015 17:47

OpenCMS
Sistema de gestin de contenido opensource que a diferencia de su competencia fue basado en
Java y XML. Se le considera WYSIWYG (what you see is what you get o lo que ves es lo que
obtienes) ya que mientras se disea se va generando un cdigo, hablaremos de los WYSIWYG
ms adelante.
Lo atractivo de este sistema es que permite sitios web tanto estticos como dinmicos, tambin
tiene la posibilidad de multi-idiomas.

Moodle
Este sistema funciona como un ambiente educativo virtual ya que permite a educadores crear
comunidades de aprendizaje, adems de la gestin de cursos virtuales para los alumnos. Se le
conoce a este sistema como LCMS, de sus siglas en ingls learning content management system
que significan sistema de gestin de contenido de aprendizaje.

Wix
Es un CMS que funciona de manera distinta al resto, tiene los componentes y aplicaciones de un
CMS comn pero al estar enfocado hacia el diseo cuida ms del WYSIWYG.
Tiene la posibilidad de agregar archivos flash, pero no hay que olvidar que estos archivos no son
desplegados por dispositivos mviles.

Jimdo
Un sistema de gestin de contenido gratuito, opensource, que no requiere conocimientos previos
en HTML y que se caracteriza por su velocidad y facilidad de uso. Hace uso de modlos, permite
aadirlos, moverlos y eliminarlos. Se enfoca en WYSIWYG, tambin cuenta con plantillas propias.

6. 3 Uso y propiedades de tablas

Las tablas con la mejor manera de representar datos tabulados, entendiendo por datos tabulados
aquellos que deben de llevar una estructura clara y rgida. Hace aos las tablas se usaban para
construir o maquetar la estructura delas pginas web. Toda la pgina era una gran tabla,
compuesta a su vez por multitud de filas y columnas, donde se iban representando los diferentes
elementos que construan el sitio.
Las etiquetas HTML que intervienen en la construccin de una tabla son las siguientes.
<table>: Es la etiqueta que define la estructura principal de una tabla, engloba a cada una de
las filas y columnas. Sus principales atributos son; border, cellpadding, cellspacing y width.
Border: Se trata de un nmero entero que define el grosor del borde de la pgina, mientras ms
grande sea el nmero mayor ser el grosor.
Cellpadding: Define en pixeles la separacin interna entre cada celda.
Cellspacing: Define en pixeles el espacio entre celdas.
Widt: Especifica en porcentaje o en pxeles el ancho de la tabla.
<tr>: Etiqueta definida dentro de <table> y que representa una fila de la tabla.
<td>: Es una etiqueta que se declara dentro de <tr> y representa las columnas de la fila que lo
contiene. Los tributos ms importantes de esta etiqueta son: colspan y rowspan.
Colspan: Nmero entero que determina el nmero de columnas que ocupan nuestra celda.

Rowspan: Nmero entero que representa el nmero de filas que ocupan nuestra celda.
Cada fila viene representada por <tr> que a su vez, engloba a las tres columnas <td>. Todo el
conjunto queda encerrado por la etiqueta principal <table>.
Existen un par de etiquetas que facilitan el trabajo a la hora de representar la informacin son:
<th> y <caption>.
<th> Sustituye la etiqueta <td> en el momento de representar las cabeceras de una fila o de
una columna. Las celdas creadas con esta etiqueta mostrarn el texto centrado y en negrita.
<caption> El contenido de esta etiqueta representa el titulo o encabezado de la tabla, debe
insertarse despus de la etiqueta de apertura <table>.
En muchas ocasiones necesitaremos combinar celdas, ya sean filas o bien, columnas. Para
conseguir esta combinacin de celdas habr que crearse una nica columna y hacer que sta
ocupe tres celdas. Esta accin la podemos completar directamente desde el Dreamweaber Cs6
desde su pestaa Diseo o Design, donde haciendo uso del WYSIWYG, podemos unir columnas y
filas mientras el programa nos genera el cdigo necesario.

6. 4 Anlisis de sitios web

Una forma de analizar una pgina web desde el usuario es por medio del eye tracking. Este
anlisis permite conocer hacia dnde dirigen su mirada los usuarios mientras realizan la
actividad objeto de estudio. Se utiliza para investigar en distintos mbitos, como, psicologa,
percepcin visual, lingstica, diseo de productos o servicios web.
Para llevar a acabo este anlisis se hace uso de trackers (seguidores de ojos) para deducir la
posicin del ojo
En su aplicacin para sitios web, se utiliza, sobretodo, para investigar patrones de lectura, as
como averiguar en qu zonas u objetos se fijan de una web, durante cunto tiempo y qu se
retiene en su memoria. El objetivo mercadolgico de estas pruebas es aumentar la capacidad de
influir en los usuarios e incrementar los beneficios econmicos.

7. Bases de CSS3
7. 1 Documento CSS3
De su acrnimo en ingls Cascading Style Sheets, es un mecanismo que describe cmo se va a
mostrar un documento en la pantalla, sirve para dar estilo a documentos HTML y XML.
Las hojas de estilo son un conjunto de instrucciones, que se asocian a los servicios de textos y se
ocupan para definir el formato de las diferentes etiquetas que forman una pgina web. Sirven
para definir la forma en que se presentarn las pginas en la pantalla.
Las hojas de estilo facilitan muchsimo el trabajo y otorgan un rango mayor de posibilidades para
mejorar la apariencia de las aplicaciones web. En pocas palabras, los atributos ya no se definen
uno por uno en las etiquetas del documento HTML sino que se anexa un documento CSS3 que
contiene las hojas de estilo.

7. 2 Propiedades CSS3
Los datos de estilo se componen de dos cosas: selector y declaracin. Los selectores son
etiquetas que se usan en HTML que se encierran entre < >. Las declaraciones de los selectores
estn conformadas por propiedad y valor.

Las propiedades son, por ejemplo: font-size, text-align, Font-family. Los valores son, por ejemplo:
11px, center, arial.
A diferencia de las etiquetas que se usan en HTML, en CSS3 se usan {} en lugar de <>. Cada
selector puede contener varias declaraciones, cada declaracin se separa ; (punto y coma).

7. 2 CSS internos
Las hojas de estilos internas se deben definir entre las etiquetas <style> </style>, las cuales
van antes de la etiqueta de cierre </head> y antes de la etiqueta de <body>.
Dentro de la etiqueta <style> es necesario introducir el atributo type=text/css.
El problema de las hojas de estilo internas es que si se quiere que varias pginas tengan el
mismo formato, se tendrn que definir los datos de estilo pgina por pgina.

7. 3 CSS externos
Las hojas de estilo externas (.css) son documentos de estilos, que se le pueden aplicar a varias
pginas. Para poder vincular la hoja de estilo externa con el documento HTML, se utiliza la
etiqueta <link> la cual se utiliza para definir la relacin entre un documento y un recurso
externo. Esta debe ir ubicada dentro de la etiqueta <head>.
<link rel=stylesheet type= text/css href=ruta_documento_estilos.css />
Este mtodo nos permite cambiar los estilos por completo, tambin nos permite modificar o
adaptar nuestro documento.
Una hoja de estilo importada dentro de un CSS externo es muy sencilla de elaborar, actualmente
se ocupan con interfaz de desarrollo ms avanzada, pero el funcionamiento sirve en algunos
casos para enmascarar CSS y dar un poco ms de seguridad al cdigo.
@import url (ubicacin_archivo.css);

7. 4 Herramientas para CSS: web developers toolbox

Es un browser, a amanera de toolbar o barra de herramientas que provee ayuda para la tarea
de continuar probando un producto, sitio, pgina o aplicacin web. Ayuda en la
retroalimentacin, feedback, acerca de lo que se construy. Tambin permite analizar otras
pginas para ver la manera en la que fueron construidas, esto tambin como parte del feedback.
Tiene herramientas que permiten conocer la estructura de la pgina, desde las medidas, dnde
fueron colocados los links, las imgenes, archivos CSS y diversa informacin de la pgina.

7. 5 Divisiones
Las maquetacin por medio te tablas ya no se aplica, ahora en su lugar se hace la maquetacin
por medio de divisiones. Las principales divisiones son: cabecera, barra de navegacin,
informacin principal, barra lateral y footer o pie.

7. 5. 1 div
La etiqueta <div>, ms usada dentro de la maquetacin web. Su funcionalidad principal es la de
agrupar o dividir en secciones los principales elementos que forman parte del documento HTML
y as aplicar estilos del CSS.
Desde imgenes, texto, enlaces, cdigo o cualquier elemento puede estar entre las etiquetas de
apertura y cierre de un elemento. Por ejemplo, si en un archivo CSS tuvisemos primero como
selector a div, significara que todas las declaraciones o estilos definidos en esta regla se
aplicaran a todas las etiquetas <div>.

7. 5. 2 header
La etiqueta <header> representa el comienzo del cuerpo y de la parte visible del documento.
Provee de informacin introductoria, pueden ser de ttulos, subttulos, es usado para el cuerpo o
secciones dentro del cuerpo.
Maneja la seccin de la cabecera.

7. 5. 3 nav
La etiqueta <nav> forma parte de otra seccin aparte de la cabecera, se encuentra dentro del
<body> pero aparte de <header>. Es un elemento creado para la navegacin y debe ser
utilizado de dicha forma. En otras palabras, genera en archivos HTML5 la barra de navegacin.

7. 5. 4 article
La etiqueta <article> se le considera la estructura principal de los sitios web. Se encuentran
ubicadas dentro del elemento <section>. Fue creado con la intencin de contener unidades
independientes de contenido, por tanto cada una tendr su propia estructura.

7. 5. 5 aside
La etiqueta <aside> se utiliza para la barra lateral, la que se encuentra a lado de la informacin
principal. La barra lateral puede contener: enlaces, entradas de blog, informacin adicional del
autor, etc. Esta etiqueta no tiene una posicin definida, solo describe la informacin que
contiene, puede estar en cualquier parte del diseo.

7. 5. 6 section
La etiqueta <section> se utiliza para la informacin principal, esta etiqueta va debajo de la
etiqueta de cierre de </nav>.

7. 5. 7 footer
La etiqueta <footer> representa el pie o barra final de la pgina web, generalmente es usada
con informacin del autor u otra informacin que deba ir al pie. Se le conoce como institucional.
Puede ser repetida varias veces dentro del cuerpo para representar el final de diferentes
secciones. Su lugar establecido es al final, ya sea del cuerpo o como en el caso de las secciones,
al final de la seccin.

7. 6 Selector de clases
Las clases sirven para poder identificar a un grupo de elementos. El atributo es class el cual
asigna uno o ms nombres de clases a un elemento, en este caso a diferencia de id, varios
elementos pueden compartir el mismo nombre de clase. Sirve como selector de hojas de estilo
para un conjunto de elementos. Al igual que id, se deben definir dentro de la etiqueta <style> y
va en el encabezado <head>.
Para definir una clase la sintaxis es:
nombreEtiqueta.nombre{propiedad;valor;}

Para usar dentro de la etiqueta la sintaxis es:

<nombreEtiqueta class=nombre></nombreEtiqueta>

7. 7 Selector de id
Este tipo de selector nos permite aplicar una regla del CSS al elemento HTML que tenga definido
el mismo atributo id que el declarado en el selector de la regla.
En un documento HTML no pueden existir dos elementos con el mismo atributo.
Este selector se establece mediante el carcter # (almohadilla) seguido del valor del atributo id,
por ejemplo:
#titulo{
color:green;
}
Esta regla define un color para el elemento del documento HTML, que tiene como atributo
id=titulo

7. 8 Elementos flotantes
La mayora de estructuras de las pginas web complejas estn diseadas con el posicionamiento
flotante. Cuando una caja se posiciona con el modelo de posicionamiento flotante,
automticamente se convierte en una caja flotante, lo que significa que se desplaza hasta la
zona ms a la izquierda o ms a la derecha de la posicin en la que originalmente se encontraba.
La caja deja de pertenecer al flujo normal de la pgina, lo que significa que el resto de cajas
ocupan el lugar dejado por la caja flotante.18
Las cajas flotantes influyen en la disposicin de todas las dems cajas. Los elementos en
lnea hacen sitio a las cajas flotantes adaptando su anchura al espacio libre dejado por la caja
desplazada.

7. 9 Teora de fluidos para dispositivos mviles

Cuando se disean aplicaciones web dinmicas, debemos considerar los dispositivos en los
cuales se podrn desplegar dichas aplicaciones. Es en esta consideracin donde entra la teora
de fluidos para dispositivos mviles.
La teora de fluidos para dispositivos mviles, contempla la informacin como un lquido, este
lquido lo tenemos almacenado dentro de la aplicacin web para el desktop y lo debemos vaciar
en las tabletas y los dispositivos mviles (como Iphones, Celulares android, etctera).
La capacidad de una tableta es menor a la de la desktop, y la del dispositivo mvil es menor a la
de la tableta y la desktop. Entonces, cuando vaciamos la informacin de la desktop a la tableta
entra menos lquido, lo mismo sucede cuando se la vaciamos a los dispositivos mviles, entra
una menor cantidad de informacin que en la desktop y la tableta.
Ahora, la informacin que le metamos a las tabletas y los dispositivos mviles debe ser
sabiamente elegida, de acuerdo a las necesidades del usuario y el objetivo de la pgina.

7. 10 Nociones bsicas de Layout fluido con HTML5 y CSS3

Con el layout fluido el diseador es capaz de ver con mayor precisin comos e ver como en
diferentes resoluciones su aplicacin web. Sin importar la plataforma el diseo se ver en las
resoluciones ms pequeas y ms grandes a la perfeccin. Se crear un esquema de fluido con
contenido de adaptacin.

18 http://librosweb.es/libro/css/capitulo_5/posicionamiento_flotante.html Consultado 31 de marzo 2015

11:00 am

El primer paso es la creacin de una maqueta de ancho fijo, ah se pueden visualizar an las
proporciones y se le puede aplicar la proporcin urea. El tamao de esta primer maqueta debe
estar al 100% en lugar de estar dada la medida en pixelaje. Regularmente se empieza con la
desktop y se procede con las dems resoluciones de tabletas y dispositivos mviles, manejando
por porcentaje las resoluciones, donde nuestro 100% es la resolucin de la desktop. De este
modo los mrgenes tambin se manejan por porcentajes.
El siguiente paso ser crear un conjunto de archivos CCS, y nombrarlos de acuerdo al dispositivo
en el que funcionarn (resoluciones pequeas, medianas y grandes), para ello necesitamos de
las hojas de estilo, separadas por cada gama de resoluciones de pantalla, y determinar la
resolucin de pantalla del usuario.
De esta forma tendremos una aplicacin web responsiva.
En el programa Dreamweaber CS6, podemos encontrar herramientas que nos ahorrarn un par
de pasos, pero que igual, nos ayudarn a completar el objetivo.

8. Integracin de elementos
8. 1 Favicon
Qu es un favicon? Es un pequeo icono asociado a una aplicacin web, que se puede ver las
barras y pestaas como distintivo.
Para agregar un favicon a tu sitio web. Primero que nada, habra que crear uno de 16 px por 16
px. Salvalo en formato ICO, aunque tambin lo puedes salvar en formato GIF o PNG. En la
cabecera de tu HTML5 escribe
<link rel=shortcut icon href= favicon.ico/> donde favicon.ico es el nombre y localizacin de
tu icono.

Modulo 2.
1. Javascript
1.1 Conceptos bsicos de programacin
1. 1. 1 Qu es programacin?
La Real Academia Espaola dicta que la programacin es elaborar programas para la resolucin
de problemas mediante ordenadores.19
Tambin podemos entenderla como el proceso de escribir el cdigo fuente de un software en un
lenguaje de programacin, a travs de un sistema de smbolos y reglas (con los que la

19 Consultado el 8 de mayo 09:25 am http://lema.rae.es/drae/?val=programaci%C3%B3n

computadora opera) que permiten la construccin de programas. En un trmino ms amplio se

puede incluir no slo escribir, sino analizar, probar, depurar y mantener un cdigo.
Es un proceso mediante el cual se codifican una serie de instrucciones en un lenguaje
determinado para ser decodificados (interpretados) y ejecutados por un sistema
computacional, todo ello con el fin de resolver un problema o llevar a cabo una funcin
especifica.
Estos programas (que han sido, valga la redundancia, programados) sern ejecutados por otro
programa o directamente por el hardware de la computadora.

1. 1. 2 Qu es un programa?
Un programa de computadora es un conjunto de instrucciones en forma secuencial, llamado
cdigo, que a travs de su interpretacin por el sistema operativo o hardware, permiten realizar
una tarea especfica en una computadora.20 El programa tiene un formato ejecutable que la
computadora puede utilizar directamente para ejecutar las instrucciones.
En pocas palabras, un programa es el conjunto de instrucciones (siempre escritas en un
lenguaje de programacin), que deber cumplir un objetivo al ser interpretado por un algn
hardware. A todo el conjunto de comandos que conforman al programa, representados por
declaraciones, se les denomina cdigo fuente del programa.

1. 1. 3 Qu es un algoritmo?
De manera simplificada, se comprende al algoritmo como una secuencia de pasos que se siguen
para llegar a un fin, podemos asociarlo con algo de la vida cotidiana, por ejemplo, una receta de
cocina. Al final de cuentas, un algoritmo es una sucesin finita de pasos no ambiguos que se
pueden ejecutar en un tiempo finito21.
Deberemos tomar en cuenta el concepto anterior: el programa, y tras haberlo entendido,
podremos llegar a comprender el papel de los algoritmos.
Ahora bien, el objetivo de un programa es que se lleve a acabo una accin o tarea cualquiera,
para esto se tiene que contar con un algoritmo que es el que indica, con la mayor precisin
posible, que deber hacer.

1. 1. 4 Programacin de algoritmos
Esta fase la podemos dividir en tres sub-fases: codificacin del algoritmo en un programa,
ejecucin del programa y comprobacin del programa.
En la fase de conversin de un algoritmo en instrucciones de un lenguaje de programacin,
denominado codificacin. Se deber usar sintaxis de lenguaje de programacin (ms adelante
me enfocar a la sintaxis), ya que solo las instrucciones sintcticamente correctas pueden ser
interpretadas por el hardware.
Despus de esta fase, se deber ejecutar lo programado, con la intencin de comprobar el
correcto funcionamientos del programa.

20 Stair, Ralph M., et al. (2003). Principles of Information Systems, Sixth Edition (en ingls). Thomson
Learning, Inc. p. 132.

21 Apuntes realizados por Ricardo Ferrs Departamento de Informtica. Universidad de Valencia p.1

1. 1. 5 Desarrollo de algoritmos con pseudocdigo y diagrama de flujo de

datos
1. 1. 5. 1 Pseudocdigo
De acuerdo a Anala Lanzillotta, el pseudocdigo es "considerado como un lenguaje falsoes un
lenguaje intermedio entre nuestro lenguaje y el de programacin, debido a que quien lo utiliza se
gua por una serie de normas pero sin llegar a usar una estructura tan rgida como la del
lenguaje de programacin.
Es un lenguaje de especificacin de algoritmo, no lo confundamos con uno de programacin,
basado en un sistema notacional, con estructuras sintcticas similares a lenguajes de
programacin pero sin poder ser ejecutado directamente en un hardware.
Se utiliza para representar las sucesivas acciones, palabras reservadas similares a sus
homnimas en los lenguajes de programacin, por ejemplo: start, end, stop, if-then-else, whiledo, repeat-until, etc.
Las ventajas de este tipo de lenguaje residen en que: facilitan el diseo de la lgica y estructuras
de control sin una preocupacin acerca de reglas sintcticas y semnticas, adems, de que los
algoritmos expresados en pseudocdigo puede ser traducido ms fcilmente.

1. 1. 5. 3 Diagramas de flujo
Conocidos como diagramas de flujo u organigramas son herramientas grficas utilizadas para
representar algoritmos, como en la ayuda en el diseo de programas.
Generalmente estn compuestas por una serie de smbolos, unidos con flechas, donde cada
smbolo representa una accin distinta y las flechas el orden de realizacin de las acciones, cada
smbolo tendr una flecha que lo apunta y otra que apunte, esto con la excepcin del principio y
del fin del algoritmo.

1. 1. 6 Fases del proceso unificado de desarrollo de software (RUP)

En este rubro podemos llegar a entender el modelo que trata de explicar el proceso de desarrollo
de programacin. Se constituye como un marco metodolgico requerido en cada fase de
desarrollo.
El Proceso Unificado fue propuesto por IBM, incluye prcticas claves y aspectos relacionados a la
planeacin estratgica y administracin de riesgos; es una gua en el proceso, a parte de ser
considerado un estndar en el desarrollo de software.
El proceso unificado conocido como RUP, es un modelo de software que permite el desarrollo de
software a gran escala, mediante un proceso continuo de pruebas y retroalimentacin, que logra
garantizar el cumplimiento de determinados estndares de calidad. 22

22 Desarrollando aplicaciones informticas con el Proceso de Desarrollo Unificado (RUP) Artculo por Mtra.
Mara de Lourdes Santiago Zaragoza, Profesora del Programa Educativo de Tecnologas de la Informacin y

Proceso de desarrollo unificado:

Fase de concepcin. En est fase se define y acuerda el alcance del proyecto, se identifican los
riesgos potenciales, se propone una visin general de la arquitectura de software. As mismo, se
planean las siguientes fases.
Fase de elaboracin. Se seleccionan los casos de uso que permiten definir a arquitectura base,
adems, se realiza el primer anlisis del dominio del problema.
Fase de construccin. El propsito de la fase es completar la funcionalidad del sistema, se
administran los cambios de acuerdo a las evaluaciones realizados por los usuarios.
Fase de transicin. Su objetivo es asegurarse que el software este disponible para los usuarios
finales, ajustar errores y defectos.

1.2 Introduccin a Javascript

1. 2. 1 Qu es Javascript?
Javascript es lo que se conoce como lenguaje script, en otras palabras, es un cdigo de
programacin que se inserta dentro de un documento.
Se creo con la intencin de realizar pginas web dinmicas, mejor dicho, potenciar su creacin.
As como, ampliar las posibilidades de HTML.
A diferencia de lo que podramos creer, es totalmente distinto a Java. Este ltimo es un lenguaje
completo de programacin (como C y C++). Java crea programas totalmente independientes y
operativos, mientras que Javascript inserta cdigo especial dentro de HTML y no crea programas
independientes, depende totalmente del cdigo HTML
La ventaja fundamental de Javascript es que su aprendizaje y uso son muy sencillos y que
permite realizar labores complejas en una pgina sin necesidad de aprender CGI, el CGI por sus
siglas en ingls Common Gateway Interface de las primeras formas de programacin dinmica. 23

1. 2. 2 Historia del Javascript

A mediados de los 90s se empezaban a desarrollarse las primeras aplicaciones web, entre los
elementos con los que empezaban a contar estaban los formularios complejos, es por eso que
surgi la necesidad de un lenguaje de programacin que se ejecutara en el navegador del
usuario. De esta forma, si el usuario no rellenaba correctamente un formulario, no se le haca
esperar mucho tiempo hasta que el servidor volviera a mostrar el formulario indicando los
errores existentes.
Brendan Eich, un programador que trabajaba en Netscape, pens que podra solucionar este
problema adaptando otras tecnologas existentes (como ScriptEase) al navegador Netscape
Navigator 2.0, que iba a lanzarse en 1995. Inicialmente, Eich denomin a su lenguaje LiveScript.
Posteriormente, Netscape firm una alianza con Sun Microsystems para el desarrollo del nuevo
lenguaje de programacin. Adems, justo antes del lanzamiento Netscape decidi cambiar el
nombre por el de JavaScript. La razn del cambio de nombre fue exclusivamente por marketing,
ya que Java era la palabra de moda en el mundo informtico y de Internet de la poca.
La primera versin de JavaScript fue un completo xito y Netscape Navigator 3.0 ya incorporaba
la siguiente versin del lenguaje, la versin 1.1. Al mismo tiempo, Microsoft lanz JScript con su

comunicacin, pg 1

23 http://www.maestrosdelweb.com/cgiintro/

navegador Internet Explorer 3. JScript era una copia de JavaScript al que le cambiaron el nombre
para evitar problemas legales.
Para evitar una guerra de tecnologas, Netscape decidi que lo mejor sera estandarizar el
lenguaje JavaScript. De esta forma, en 1997 se envi la especificacin JavaScript 1.1 al
organismo ECMA European Computer Manufacturers Association).
ECMA cre el comit TC39 con el objetivo de "estandarizar de un lenguaje de script
multiplataforma e independiente de cualquier empresa". El primer estndar que cre el comit
TC39 se denomin ECMA-262, en el que se defini por primera vez el lenguaje ECMAScript.
Por este motivo, algunos programadores prefieren la denominacin ECMAScript para referirse al
lenguaje JavaScript. De hecho, JavaScript no es ms que la implementacin que realiz la
empresa Netscape del estndar ECMAScript.
La organizacin internacional para la estandarizacin (ISO) adopt el estndar ECMA-262 a
travs de su comisin IEC, dando lugar al estndar ISO/IEC-16262. 24

1. 2. 3 Sintaxis
Cuando hablamos de sintaxis dentro de la programacin se hace referencia a la sintaxis de un
lenguaje de programacin, valga la redundancia. Y se le entienede como el conjunto de reglas
que debern seguir al escribir el cdigo. Esto es de vital importancia, porque al no presentarse
de la manera correcta no podr ser identificado y, menos an, llevada a acabo la instruccin.
Entre las cuestiones que debemos tener en cuenta son las siguientes:
Javascripy distingue entre maysculas y mnusculas, por ejemplo, si la orden es if al escribirla en
maysculas como IF ser incorrecta.
Javascript ignora espacios en blanco, tabuladores y saltos de lnea entre token (palabra
reservada). Habr que se hacer uso de sangrado para que le script sea ms legible.
El uso de ; al final de cada instruccin es opcional pero altamente recomendable.
Dentro de Javascript se pueden hacer dos tipos de comentarios, los que abarquen varias lneas,
por ejemplo /*comentario en varias lneas*/.Adems de los que se hacen al final de la lnea
con //al final de la lnea.
Similar a Java los identificadores debern comenzar por una letra o un guin bajo _. As mismo
pueden contener letras, dgitos y guin bajo _. Estos no pueden coincidir con palabras
reservadas.
Las palabras reservadas en JavaScript son las siguientes: break, case, catch, continue, default,
delate, do, else, finally, for, function, if, in, instanceof, new, return, switch, this, throw, try, typeof,
var, void, while, with.
Las operaciones con nmeros, de manera interna, se realizan en punto flotante. Los enteros:
0,127. Los decimales: 0.23, 3.14163.23. Los hexadecimales empiezan por ox: oxFF, 0x1A.
Los strings, su secuencia de caracteres entre comillas dobles o simples dobles y simples. Por
ejemplo: <a onclick= alert(Has pulsado esto)><</a>
En secuencias de escape, para representar caracteres especiales:
\' Comilla simple
\" Comilla doble
\b Retroceso
\f Salto de pgina
\n Salto de lnea

24 http://librosweb.es/libro/javascript/capitulo_1/breve_historia.html

\t Tabulacin
\\ Barra inclinada \
Las llaves ({ y }) permiten agrupar cdigo.

1. 2. 4 Formas de Incluir Lenguaje JavaScript, en la pgina web

1. 2. 4. 1 Inclusin de Javascript en las pginas
Para hacer que un documento HTML incluya instrucciones en Javascript se debe hacer uso de la
etiqueta <SCRIPT> de esta forma:

<script language=JavaScript>cdigo JavaScript</script>

Si se quiere especificar qu versin de Javascript se utiliza, para evitar que navegadores que no
soportan la versin decodifiquen el Javascript, entonces se usa, por ejemplo:

<script language=JavaScript1.3>

1. 2. 4. 2 Navegadores no compatibles
Los navegadores que no soportan Javascript, no interpretaran las instrucciones Javascript sino
que mostraran el texto de las instrucciones en la pgina. Para evitar que estos navegadores lean
el cdigo en Javascript se hace:

<script language=Javascript> <!-cdigo JavaScript//--> </script>

El signo <!- indica principio de comentario en HTML y el signo --> indica fin de comentario. A
su vez el signo // indica comentario en Javascript (el intrprete de Javascript no tendrn en
cuenta esa lnea).

1. 2. 4. 3 Uso de un archivo externo

Tambin se puede utilizar el cdigo JavaScript escrito en un archivo separado. Este archivo debe
tener la extensin js. En el archivo se coloca slo cdigo en JavaScript. Despus ese cdigo se
puede invocar desde la pgina web con el cdigo:

<script language=Javascript src=archivo.js>

1. 2. 5 Dilogos para envi de mensaje y propiedades del objeto

windows
Las propiedades del objeto window, que a su vez se constituyen en objetos que disponen de sus
propias propiedades y mtodos.
Un objeto window representa una ventana cuya organizacin interna es conforme al DOM
(document object model). En un navegador donde tengamos abiertas varias pestaas, cada
pestaa equivale a un objeto window que tiene su propia propiedad document y con el que
podemos trabajar por separado. Desde esta perspectiva, cada pestaa es un objeto window. No
obstante, hay algunos mtodos que slo se pueden aplicar sobre ventanas abiertas mediante
JavaScript y no a la ventana principal de navegacin del usuario.
Vamos a citar aqu algunos de los mtodos de los objetos window: alert, confirm, clearInterval,
clearTimeout, open, close, moveBy, focus, moveTo, print, prompt, resizeBy, resizeTo, scrollBy,
scrollTo, scrollByLines, setInterval, setTimeout y stop.

Profundizaremos en las siguientes: alert, confirm y prompt.

1. 2. 5. 1 Alert (mensaje)
Muestra una ventana de dilogo con la cadena especificada o con la conversin a string del
objeto pasado como parmetro y un botn Aceptar.
Ejemplo:
alert('hola usuario');

1. 2. 5. 2 Confirm (mensaje)
Abre un cuadro de dilogo con un mensaje y dos botones, Aceptar y Cancelar. Devuelve un valor
booleano: true si se pulsa aceptar o false si se pulsa cancelar.
Ejemplo:
if (window.confirm("Va a salir de la aplicacin Desea salir realmente?")) { window.alert('Gracias
por visitarnos'); }
// Si usuario pulsa aceptar se cumple la condicin

1. 2. 5. 3 Prompt (mensaje, opValorDefecto)

Muestra un cuadro de dilogo pidiendo una entrada al usuario y, opcionalmente, un valor de
defecto. Devuelve un objeto String con el contenido introducido por el usuario, o null si se pulsa
la tecla cancelar. Si se pulsa aceptar sin introducir nada retorna una cadena vaca.
Ejemplo:
var persona = prompt("Cul es tu nombre?", "Barack Obama");
if (persona != null) {alert("Hola " + persona);}
//Por ejemplo <<Hola Pedro>>
En este caso se trata de una ventana que pide entrar datos al usuario. De modo que esta funcin
devuelve un valor que se puede usar en el cdigo si es asignado a una variable. Su sintaxis es:
prompt(texto_del_mensaje,valor_por_defecto);
El segundo parmetro (valor por defecto) no es obligatorio incluirle y permite asignar un valor al
cuadro de texto en el que el usuario tendr que introducir informacin.
Ejemplo de uso de prompt:
respuesta=prompt(Qu quieres hacer?,comer);
En el ejemplo, el resultado de lo que el usuario responde se almacena en la variable resultado y
al principio la ventana contendr el valor comer en el cuadro de texto destinado al usuario.
Naturalmente, el usuario podr variar este valor si lo desea.

1. 2. 6 Expresiones
Una expresin es un conjunto de literales, variables, operadores y/o expresiones que describen
un solo nmero, cadena (string) o valor lgico.
En el siguiente ejemplo la lnea entera es una expresin:
NuevoNumero = AlPrimerNumero 10

En este ejemplo, el NuevoNumero y AlPrimerNumero son variables. El nmero 10 es un literal. El

signo de igual (=) y el signo de menos (-) son operadores.

1. 2. 7 Funciones
Como en otros muchos lenguajes, en Javascript se pueden utilizar funciones. Las funciones son
una serie de instrucciones que realizan una determinada tarea. A las funciones se las pone un
nombre que luego puede ser utilizado en el cdigo de la pgina.

1. 2. 7. 1 Funciones (function)
Las funciones son declaraciones (statements) especiales que contienen otras declaraciones de
ejecucin, se ejecutan a travs de un controlador de eventos. 25
Antes de poder usar una funcin en el cdigo de la pgina, se la debe definir; es decir, se debe
indicar qu operaciones son las que debe hacer la funcin. Por ejemplo:

function nombredelafuncin(argumento1, argumento2,...)

{instrucciones que debe realizar la funcin}
El cdigo que est encerrado entre llaves indica lo que realiza la funcin, cada vez que desde el
cdigo se llame a la funcin, sta realizar sus instrucciones. Los argumentos son variables que
algunas funciones necesitan para realizar su tarea.

1. 2. 7. 2 Llamar una funcin

Para llamar una funcin dentro de javascript, bastar con poner el nombre de la funcin seguida
de los parntesis. Ejemplo:
function error() {
document.write(3Ocurri un error);
}
En este caso se define una funcin que muestra texto en la posicin actual del cursor. Para
utilizar esta funcin desde el cdigo sera:
error();
Lo cual mostrara el mensaje de error.

1. 2. 7. 3 Funciones predefinidas
Javascript cuenta con funciones predefinidas, aqu enlistamos algunos de los ms importantes:
eval(textoCdigo) La funcin eval tiene un nico parmetro que es una cadena de texto. Esta
funcin hace que el texto sea interpretado como si fuera cdigo normal de JavaScript. Ejemplo:
eval(alert(Hola));
parseInt(textoNmero, base) Convierte el texto (que debe tener cifras numricas) a formato
de nmero. El segundo parmetro es opcional y representa la base del nmero, ejemplo:
alert(parseInt(110011,2));//Sale 51
Si la conversin no es posible, devuelve el valor NaN (Not a Number) que indica que la variable
numrica posee un valor invlido

25 libro de java en ingles

parseFloat(textoNmero) Convierte el texto (que debe tener cifras numricas) a formato de

nmero con decimales.
escape(texto) Muestra el cdigo ASCII de los smbolos del texto. Cada nmero en el resultado
va precedido del smbolo % y el cdigo ASCII sale en forma Hexadecimal.
unescape(texto) Hace justo lo inverso del anterior. Devuelve los cdigos que representan los
cdigos ASCII en forma de texto que se le pasa como parmetro. Ejemplo:
document.write(unescape(%21%B1));
// Escribe:
isNaN(expresin) Devuelve true si la expresin tiene un contenido no numrico.

1. 2. 8 Objetos y propiedades
1. 2. 8. 1 Objetos
Los objetos con elementos principales, y una de las bases fundamentales de Javasrcipt. Un
objeto es una agrupacin de variables, que en ese caso se llaman propiedades, y de funciones,
las cuales se llaman mtodos. Un ejemplo de un objeto es la ubicacin (URL) de la pgina actual
o una checkbox en un formulario.

1. 2. 8. 2 Propiedades
Las propiedades pueden ser consideradas como adjetivos que describen al objeto. En muchos
casos, estas pueden funcionar como objetos mismos. Las propiedades definen las caractersticas
de los objetos y los mtodos las operaciones que podemos hacer con l.
JavaScript posee muchos objetos predefinidos y tambin permite crear nuestros propios objetos.
Como ya se coment anteriormente, los objetos poseen propiedades asociadas, para acceder a
ellas se utiliza el punto, en esta forma:
objeto.propiedad
Ejemplo, un objeto llamado miordenador que representa a un ordenador:
miordenador.marca=HP; miordenador.procesador=pentium III 900 Mhz
miordenador.ram=64;
Las propiedades pueden ser de distintos tipos de datos; en el ejemplo la propiedad ram es
numrica, mientras que marca es de tipo texto.

1. 2. 8. 3 Mtodos
Los mtodos son funciones asociadas a los objetos. Donde el mtodo adems puede poseer
parmetros.
Su uso es:
objeto.metodo()

1. 2. 8. 4 Operacin new
La instruccin new sirve para crear nuevos objetos en el tiempo de ejecucin del cdigo
JavaScript. Ejemplo:

miordenador = new ordenador(HP, Pentium III, 64);

En este caso mi ordenador es un nuevo objeto de tipo ordenador, al indicar el tipo de objeto que
es, se le pueden pasar parmetros para rellenar sus propiedades.

1. 2. 8. 4 Objetos predefinidos
STRING
El objeto string (cadena) sirve para manejar cadenas de texto. Cada vez que creamos una
variable de cadena, en realidad estamos creando una variable de tipo string. Por lo tanto no ser
necesaria su declaracin.
MTODOS DE STRING
anchor(nombre) Crea un marcador en el texto.
big() Muestra la cadena de caracteres con una fuente grande.
blink() Muestra el texto de modo intermitente.
bold() Muestra el texto en negrita.
charAt(n) Muestra el carcter situado en la posicin n de la cadena.
fixed() Muestra la cadena en fuente no proporcional.
fontcolor(color) Determina el color del texto.
fontsize(n) Muestra el texto en el tamao n, donde n es un nmero del 1 al 7 (los 7 tamaos
estndar).
indexOf(cadenaInterna,inicio) Devuelve la posicin de la cadena interna en el texto, teniendo
en cuenta que el primer carcter es el nmero 0.
italics() Muestra el texto en cursiva.
lastIndexOf(cadenaInterna,inicio) Idntico a indexOf slo que en este caso cuenta la ltima
vez que aparece la cadena (en lugar de la primera vez como hace indexOf).
link(URL) Crea un hipervnculo en la cadena de texto, el parmetro URL
indica el destino del vnculo.
small() El texto se muestra con fuente pequea.
strike() Subraya el texto.
sub() El texto va en subndice.
substring(x,y) Muestra el fragmento de texto que va desde la posicin x a la posicin y.
sup() Superndice.
toLowerCase() Convierte la cadena a minsculas.
toUpperCase() Convierte la cadena a maysculas.
PROPIEDADES DE STRING
length Almacena el tamao de la cadena de texto.

MATH
El objeto Math tiene propiedades y mtodos que representan valores matemticos.
MTODOS DE MATH
abs(n) Calcula el valor absoluto de n.
acos(n) Calcula el arco coseno de n.
asin(n) Calcula el arco seno de n.
atan(n) Calcula el arco tangente de n.
ceil(n) Redondea n a su valor superior.
cos(n) Calcula el coseno de n.
exp(n) Calcula en.
floor(n) Redondea n a su valor inferior.
log(n) Calcula el logaritmo de n.
max(x,y) Devuelve el mayor valor de x o y.
min(x,y) Devuelve el menor valor de x o y.
pow(x,y) Devuelve el xy.
random() Genera un nmero aleatorio entre 0 y 1.
round(n) Redondea n a el nmero ms prximo.
sin(n) Calcula el seno de n.
sqrt(n) Calcula la raz cuadrada de n.
tan(n) Calcula la tangente de n.
PROPIEDADES DE MATH
E. Devuelve la constante de Euler o nmero e.
LN2. Devuelve el logaritmo neperiano de 2.
LN10. Devuelve el logaritmo neperiano de 10.
LOG2E. Logaritmo en base 2 de e.
LOG10E. Logaritmo en base 10 de e.
PI. Devuelve el nmero PI.
SQRT1_2. Raz cuadrada de 0,5.
SQRT2. Raz cuadrada de 2.
OBJETO DATE()

Este objeto se utiliza para las fechas y horas. Entre las consideraciones que debemos tener es
que Javascript no trabaja con fechas anteriores a 1970. En lo relacionado a los meses, hay 11
meses (del 0 al 11), el mes 0 es enero y mes 11 es diciembre, a diferencia de los das que se
cuentan a partir del 1.
Un ejemplo de cmo crear una variable de fecha:
fecha=new Date();
//crea un nuevo objeto de fecha cuyo valor inicial sern
//la fecha y hora actuales
Si se desea iniciar una variable de fecha con valores distintos a la fecha actual, se debe:
fecha=new Date(ao, mes, da, hora, minutos, segundos);
Todos los parmetros se pasan en forma de nmeros. Tambin se puede crear un objeto de tipo
fecha asignando el nmero de milisegundos desde 1970.
MTODOS DE LOS OBJETOS DATE()
getDate(). Devuelve el da del mes.
getDay(). Devuelve el da de la semana en forma de nmero.
getFullYear(). Devuelve el ao, pero en forma de 4 nmeros. Con esto se asegura la
compatibilidad con el ao 2000. Est funcin se aadi al JavaScript 1.3, por lo que ciertos
navegadores no podrn usarla.
getHours(). Devuelve la hora.
getMinutes(). Devuelve los minutos.
getMonth(). Devuelve el mes (con nmeros del 0 al 11).
getSeconds(). Devuelve los segundos.
getTime(). Devuelve el nmero de milisegundos de la fecha, empezando a contar desde
1970.
getTimezoneOffset(). Devuelve la diferencia en minutos entre la zona horaria actual y la hora
solar (GMT).
getYear(). Devuelve el ao.
setDate(valor). Establece el da del mes.
setFullYear(valor). Establece el ao (con cuatro cifras).
setHours(valor). Establece la hora.
setMinutes(valor). Establece los minutos.
setMonth(valor). Establece el mes (con un nmero del 1 al 11).
setSeconds(valor). Establece los segundos.
setTime(valor). Establece la fecha con el nmero de milisegundos desde el 1 de Enero de 1970.
setYear(valor). Establece el ao.

toLocaleString(). Devuelve la fecha en formato de texto, segn las especificaciones

de la zona horaria del ordenador.
OBJETO ARRAY
Las matrices del ingls arrays son elementos indispensables en la programacin. Una matriz es
un conjunto de datos agrupados. Para acceder a cada elemento se usa un nmero de ndice, el
primer elemento tendr el ndice 0.
Para crear un array se hace:
nombrearray = new Array()
Esto crea un array de tamao indeterminado.
Para rellenar los valores del array:
nombrearray[0] = valor; nombrearray[1] = valor;
nombrearray[n] = valor;
Tras asignar valores el array se hace ms grande. Tambin se puede especificar su tamao al
crearle:
nombreArray= new Array(tamao)
O incluso asignar valores en la propia creacin del array. Ejemplo:
equipos= new Array(Real Madrid, F. C. Barcelona);
Adems un array puede tener distintos tipos de datos:
miOrdenador = new Array(HP, Pentium III, 64);
Y cada elemento de un array puede ser otro array:
elemento = new Array(8); elemento[3] = new Array(5);
MTODOS DEL OBJETO ARRAY
concat(array). Agrupa dos arrays. Disponible desde la versin 1.2.
join(). Saca una cadena de texto que contiene todos los elementos del array.
reverse(). Invierte el orden del los elementos de un array. El primero pasa a ser el ltimo y
viceversa.
Sort(). Obtiene la matriz de manera ordenada.
PROPIEDADES DEL OBJETO ARRAY
length. Cuenta el nmero de elementos del array.

1. 2. 8. 5 Objetos del navegador

Los objetos del navegador son todos aquellos objetos que el navegador pone a nuestra
disposicin para poder modificar los elementos de las pginas. Slo se enlistarn los objetos y
propiedades comunes. Los objetos son:
NAVIGATOR

Objeto que representa al navegador con el que el usuario est mostrando la pgina. Gracias a
este objeto se puede averiguar la marca y versin del navegador y utilizar esta informacin en el
cdigo.
PROPIEDADES DE NAVIGATOR
appCodeName. Nombre del cdigo del navegador. Todos los navegadores devuelven la
cadena Mozilla. Por lo que esta propiedad no es interesante.
appName. Nombre del navegador. Podr ser: Microsoft Internet Explorer
o Netscape.
appVersion. Versin del navegador. La cadena que devuelve esta propiedad indica la versin
completa.
language o browserLanguage. language es una propiedad que slo funciona con Netscape,
mientras que browserLanguage slo funciona con Explorer. Pero ambas devuelven el lenguaje del
navegador. En ambos casos las dos primeras letras que devuelven son el lenguaje del navegador
(es=Espaol; en=Ingls, por ejemplo).
platform. Contiene el tipo de sistema operativo del ordenador del usuario.
Win32 indicara un sistema Windows 95/98/Me/NT/2000. Otros valores son:
Win16 (Windows 3.1 y anteriores) Mac68x (McIntosh clsico) MacPPC
(McIntosh Power PC) y varios resultados que empiezan por Unix (sistemas Unix).
userAgent. Devuelve informacin sobre la versin, cdigo y nombre del navegador. Su salida no
aporta nada nuevo respecto a las anteriores propiedades.
SCREEN
Objeto disponible desde la versin 1.2 de JavaScript (navegadores 4 o superiores). Permite
acceder a las propiedades de la pantalla del usuario.
PROPIEDADES DE SCREEN
width y height. Respectivamente, anchura y altura total de la pantalla.
availWidth y availHeight. Respectivamente, anchura y altura disponible en la pantalla tras restar
la barra de tareas del sistema operativo. Esta medida no es muy exacta ya que no tiene en
cuenta la personalizacin del usuario.
colorDepth. Nmero de bits por pxel que utiliza la pantalla.
WINDOW
Este objeto, representa a la ventana en la cual se ve la pgina web. En el caso de que la pgina
tenga marcos, se generan tantos objetos window como marcos haya.
PROPIEDADES DE WINDOW
closed. Valor booleano que indica si una ventana ha sido cerrada.
defaultStatus. Texto que la barra de estado mostrar cuando se cargue la pgina web (texto por
defecto de la barra de estado).
frames. Array que representa a todos los marcos de la ventana.
history. Es un objeto (se ver ms adelante) que representa las enlaces a las pginas a las que el
visitante haba accedido antes de llegar a la ventana actual.

location. Objeto que almacena informacin sobre el URL de la pgina actual.

name. El nombre de la ventana.
parent. Ventana padre de la actual. Si la actual es un marco, parent ser la pgina con etiqueta
<FRAMESET>.
self. Se refiere a la propia ventana activa.
top. Ventana superior del navegador.
status. Mensaje de la barra de estado.
window. Igual que self.
MTODOS
open(URL,nombreVentana,opcionesVentana). Abre una nueva ventana cuyo contenido se
especifica por la URL a una pgina (este parmetro puede quedar vaco ), se indica un nombre
y, opcionalmente, una serie de opciones entre comillas y separadas por comas. Estas opciones
son (Netscape tiene algunas opciones ms que aqu no hemos listado):
toolbar. Indica con yes o no si se muestra la barra de herramientas.
location. Muestra o no la barra de direccin.
directories. Muestra o no los botones de directorio.
status. Permite mostrar u ocultar la barra de estado.
menubar. Mostrar o no la barra de mens.
scrollbars. Indica si se muestran las barras de desplazamiento.
resizable. Permite ajustar el tamao de la ventana.
width. Ancho de la ventana en pxeles.
height. Altura de la ventana en pxeles.
copyHistory. Permite copiar el historial de pginas recorridas a la nueva ventana.
close(). Cierra la ventana.
blur(). Hace la ventana deje de estar activa (a esta accin se la llama perder el foco).
focus(). Hace que la ventana sea la ventana activa (la que tiene el foco).
setInterval(expresinjavascript,milisegundos).Crea un temporizador. El temporizador es un reloj
que cada ciertos milisegundos (los que se indiquen como segundo parmetro, realiza la tarea
indicada en el argumento expresin. La expresin es cdigo JavaScript el cual se coloca entre
comillas, normalmente este cdigo es simplemente la invocacin a una funcin. este funcin
devuelve un nmero de temporizador (ya que se pueden crear varios) el cual deber
almacenarse en una variable para posteriores manipulaciones.
clearInterval(idTemporizador). Cancela el tiempo de espera establecido mediante setInterval.. Al
llamar a este mtodo hay que indicar como parmetro el nmero de temporizador que se desea
detener.
setTimeout(expresinjavascript,milisegundos). Muy similar a setInterval. Cuando pasan los
milisegundos invocados, se ejecuta el cdigo del parmetro expresinJavascript (el cual va entre

comillas). La diferencia con setInterval es que en este caso slo se usa el cdigo una vez, no
continuamente como ocurre con setInterval. El mtodo devuelve un nmero que debe
almacenarse en una variable.
clearTimeout(idTimeOut). Anula el temporizador establecido anteriormente con setTimeOut.
alert(), confirm(), prompt(). Mtodos de mensajes (vistos en tema anterior).
LOCATION
Objeto incluido dentro del objeto window. Almacena informacin sobre la localizacin de la
pgina de la ventana y por tanto permite cambiar dinmicamente la pgina web que se est
mostrando.
PROPIEDADES DE LOCATION
href. Especifica la direccin URL de la ventana
hostname. Especifica la parte del URL en la que va el nombre del host.
host. Idntico al anterior, slo que al final se indica el nmero de puerto utilizado
pathname. Especifica la parte del URL en la que va la ruta al recurso (en el ejemplo:
/problemas/ex1,htm)
port. Puerto utilizado para mostrar la pgina.
hash. Indica qu marcador de la pgina se utiliz al abrir la misma, si no se us ninguno aparece
vaco.
protocol. Parte referida al protocolo de la URL.
search. La parte de una URL que va detrs del signo ?. Slo ciertas pginas llevan este signo.
MTODOS
replace(URL). Carga una nueva pgina en la ventana actual indicando su URL entre comillas y
adems tambin reemplaza a la pgina anterior en la lista del historial. Esto ltimo es la nica
diferencia entre usar este mtodo y cambiar la direccin directamente en la propiedad href del
objeto location.
reload(). Hace que se vuelva a recargar la pgina.
DOCUMENT
Este objeto representa al contenido de una pgina web. Est incluido dentro del objeto window.
PROPIEDADES DE DOCUMENT
bgColor. Color del fondo
fgColor. Color del texto.
linkColor. Color de los enlaces normales.
vlinkColor. Color de los enlaces visitados
alinkColor. Color de los enlaces activos.
images. Array que contiene todas las imgenes del documento. El ndice del array empieza por 0,
la imagen document.images[0] ser la primera que se utiliz en el cdigo.

links. Array que contiene todos los enlaces que usan el atributo HREF. El orden de los enlaces en
la matriz es el orden de uso en el cdigo (el primer enlace en el cdigo ser document.links[0]).
lasModified. Fecha de ltima actualizacin del documento en forma de cadena de texto. Algunos
servidores no proporcionan este dato.
URL. URL del documento. Es idntico a utilizar location.href.
cookie. Escribe o lee el archivo de cookies de la pgina web. Un archivo de cookies sirve para
guardar informacin sobre el usuario en su propia mquina, con esta propiedad se permite
hacerlo
MTODOS
clear(). Borra el documento.
write(textoHTML). Escribe el texto indicado en el documento. Ese texto puede contener si se
desea etiquetas HTML
writeln(textoHTML). Lo mismo que la anterior, slo que esta aade un salto de lnez tras escribir
el texto.
close(). Cierra el documento.
HISTORY
Objeto que representa a las direcciones de las pginas que se almacenan en el historial
del navegador. Este objeto est dentro del objeto window.
PROPIEDADES DE HISTORY
length. Nmero de pginas almacenadas actualmente en el historial.
MTODOS
back(). Hace que la ventana muestre la pgina visitada anteriormente.
forward(). Hace que la ventana muestre la pgina siguiente.
go(n). Hace que se muestre la pgina del historial indicada con un nmero. De modo que
history.go(-1) muestra la pgina anterior y history.go(-3) hace que se muestre la pgina
antepenltima.

IMAGE
Objeto que representa una imagen en el documento definida con la etiqueta HTML <IMG> o con
el cdigo JavaScript new Image. Todas las imgenes del documento estn contenidas en la matriz
de imgenes document.images (ver anteriormente).
PROPIEDADES DE IMAGE
Son las mismas que los atributos de la etiqueta IMG del HTML, por eso slo se comentan: border,
height, hspace, lowsrc, name, src, vspace y width.
Ejemplo:
var imagenAtras = new image(120,87);

//nueva imagen con ancho=120 y altura=87 imagenAtras.src=dibujogris.gif;

//la imagen muestra el archivo dibujogris.gif
LINK
Representa cada enlace de la pgina creado con la etiqueta A. El array document.links contiene
todos los enlaces del documento, de forma que document.links[0] ser el primer enlace escrito
en el cdigo.
PROPIEDADES DE LINK
href. Especifica la direccin URL de Internet del enlace.
hostname. Especifica la parte del URL en la que va el nombre del host.
host. Idntico al anterior, slo que al final se indica el nmero de puerto utilizado.
pathname. Especifica la parte del URL en la que va la ruta al recurso.
port. Puerto utilizado para mostrar la pgina.
hash. Indica qu marcador de la pgina se utiliz al abrir la misma, si no se us ninguno aparece
vaco.
protocol. Parte referida al protocolo de la URL.
search. La parte de una URL que va detrs del signo ?. Slo ciertas pginas llevan este signo.
target. Indica el destino del enlace.

1. 2. 9 Operadores
Hay dos tipos de operadores en Javascript. Los operadores de asignacin, que como su nombre
lo dice asignan valores al operando del lado izquierdo del operador. El otro tipo de operadores
son los aritmticos, de cadena y los operadores lgicos. En general, los operadores afectan o
reinterpretan los valores de uno o ms operandos.
Ejemplo de operadores incluyen el signo de igual (=), el signo de suma (+) y el signo de menos
(-).
Un operando es un valor simple siendo usado en una ecuacin. En la ecuacin a+b=c, los
operandos a, b y c y los operadores son + y =.

1. 2. 8. 5 Objetos predefinidos
1. 2. 10 Operadores aritmticos, lgicos y de asignacin
1. 2. 10. 1 Operadores aritmticos
Los siguientes son algunos operadores, cada uno con su respectivo significado.
+
*
/
%
++

Suma
Resta
Multiplicacin
Dividir
Resto de la divisin
Incremento

--

Decremento

Ejemplo:
var valor1=50; var valor2=10; var valor3=20;
var suma, resta, producto, division, resto; var incremento, decremento;
suma=valor1+valor2; //suma vale 60 resta=valor1-valor2;
//resta vale 40
producto=valor1*valor2;
//producto vale 5000 division=valor1/valor3; //division vale 2,5
resto=valor1%valor3; //resto vale 10
valor1++; //valor1 vale 51 valor1--; //valor1 vale 50
incremento=valor1++; //incremento vale 50 y valor1 vale 51 decremento=valor1--;
//decremento vale 51, valor1 vale 50
incremento=++valor1; //incremento vale 51 y valor1 tambin decremento=--valor1;
//decremento y valor1 valen 50

1. 2. 10. 2 Operadores lgicos

Trabajan con proposiciones matemticas (valores bolanos) son:
&&
||
!

and (y lgico).
or (o lgico).
not (no lgico).

OPERADORES DE COMPARACIN
Estos son algunos operadores de comparacin cada uno con su respectivo significado.
==
!=
>=
<=
>
<

Igual
Distinto
Mayor o igual
Menor o igual
Mayor
Menor

1. 2. 10. 3 Operadores de asignacin

Estos son algunos operadores de asignacin cada uno con su respectivo significado.
+=
-=
*=
/=
%=

Suma y asignacin
Resta y asignacin
Producto y asignacin
Divisin y asignacin
Resto y asignacin

1. 2. 11 Declaraciones (statements)
Las declaraciones, del ingls statements, son las responsables de dirigir el flujo del cdigo. El
clsico ejemplo, con una contraparte hablada, es el ifdespus la declaracin. El if es un
condicionante de X, si es true se ejecutar la declaracin. En Javascript, existe el else, que es
decir si la primera declaracin if no es true entonces (else) ejecuta la siguiente declaracin.
Ejemplo:
<script>
function ejemplostatemnts()
{
if(x>y)

{
alert(x es mayor que y)
}
else
{
alert(y es mayor o igual que x)
}
}
</script>

1. 2. 12 Valores
Javascript reconoce cuatro tipos de valores (values), tambin conocidos como tipos data, los
cuales son, a grandes rasgos, los siguientes: nmeros, nmeros booleanos, cadenas (strings) y
nulos o sin valor (null).
De manera ms amplia:
Cadenas de texto (strings): esto es una prueba, prueba o esto es una prueba de cdigo.
Siempre se encierran entre comillas dobles o simples.
Variable de texto que no tiene contenido, se dice que tiene valor null. La palabra null es un
trmino reconocido por Javascript.
Valores numricos: 1, -100, 1.6, 2.0E2.
Valores booleanos: true o false.
Cada tipo de valor ser tratado de manera diferente por Javascript. Es importante que solo los
valores legtimos sean usados, si uno intenta agregar un nmero en letras, Javascript no podr
calcular.
CARACTERES ESPECIALES
Los valores de tipo texto van entre comillas y dentro de ellos se pueden colocar caracteres
especiales (caracteres que no se pueden ver, como el cambio de lnea) los cuales son:
\a: Alarma
\b: Retroceso (cursor una posicin hacia atrs).
\f: Nueva pgina de impresora
\n: Nueva lnea
\r: Retorno de carro
\t: Tabulador
\\: Signo

1. 2. 13 Literales
Los literales, del ingls literals, son representaciones de los valores. Pueden ser enteros o valores
con punto flotante. A diferencia de las variables, los literales son inferidos y no declarados. Por
ejemplo est implcito que el nmero 45 es un valor numrico y no requiere una expresin que
declare su valor. Cualquier nmero real puede ser considerado literal.
En el caso de un valor booleano o es true o false, esto es, 0 o 1, se encadena el valor al texto.

1. 2. 14 Variables
Las variables son representaciones explcitas de valores, se utilizan a travs de una
expresin26. En pocas palabras, una variable es un elemento que tiene un determinado nombre
y que permite almacenar valores.
La variable es colocada a la izquierda del operador, se le asigna un valor (el cual ir a la derecha
del operador). Las variables pueden ser globales o locales, eso lo veremos ms adelante.
Los nombres de las variables deben empezar con una letra la cual puede ir seguida de nmeros,
el signo _ o ms letras. El primer carcter no puede ser un nmero.

1. 2. 14. 1 Declaracin de variables

Para declarar una variable se usa la palabra reservada var seguida por una lista de nombres de
variables a declarar separadas por ,. Ejemplo:
var variable = valor;
Tambin puede ser de la siguiente manera:
variable = valor;
De tal modo, que realmente en Javascript no hace falta declarar una variable antes de su uso.
Ejemplos:
var ejemplo = 0; ejemploTexto = Mi casa; SeleccionarColor = true;
JavaScript permite que una variable pueda almacenar distintos tipos de datos en cada trozo de
cdigo. Es decir, una variable que ahora almacena texto, despus puede almacenar nmeros.
Tras declarar la variable, su valor puede cambiar mediante la asignacin de un valor:
Ejemplo = 12.3;
O mediante la asignacin del resultado de una operacin:
Ejemplo = 12 * 3 + varX;

1. 2. 14. 2 mbito de variables global y local

Las variables pueden ser globales o locales. Global significa que todas las funciones entre las
etiquetas <script> </script> pueden usar variables. Local significa que la variable fue declarada
en una funcin y solo esta disponible para esa funcin en especfico. Hacer una variable global
requiere declarar la variable antes de la primera funcin entre las etiquetas <script> </script>.
En el siguiente ejemplo, una variable local y global son declaradas.
<script>
var globalvar1=5
function cincovecesdos()
{
var localvar1 = 2 * globalvar1
alert (Cinco veces dos es + localvar1)
}
</script>
La variable global llamada globalvar1, es declarada antes de la funcin cincovecesdos(), as es
definida. La variable local desplegar una alerta con el texto Cinco veces dos es 10. Si una

26 libro en ingls

segunda funcin es seguida de cincovecesdos(), podr usar la variable globalvar1, pero la

variable local localvar1 no podr ser reconocida.

1. 2. 14. 3 Conversin de datos

En muchas lenguajes si una variable toma valores de texto y luego se quiere hacer que tome
nmeros, resulta imposible hacerlo. No es el caso de JavaScript ya que realiza conversiones
implcitas. Ejemplo:
var x=50//x es una variable de texto
var y=30//y es una variable numrica
z1=x+y
//z1 es variable de texto y vale 5010
z2=y+x
//z2 es numrica y vale 60
/*dependiendo de cul sea el primer operando, se determina el tipo del resultado*/
Naturalmente ocurrir un error si pretende convertir a un nmero, un texto normal como Hola
por ejemplo. En cualquier caso no conviene hacer conversiones de tipo en ningn caso.

1. 2. 15 Caracteres de Escape
Cuando estemos utilizando cadenas de caracteres es bueno que intentemos escapar los
caracteres. Para ello nos podemos apoyar en las funciones escape() y unescape(). Para poder
utilizarlas lo realizaremos de la siguiente forma:

var cadena1 = escape("'Hola Mundo'"); // El resultado es %27Hola%20Mundo%27

var cadena2 = escape("20%5=0"); // El resultado es 20%255%3D0
En este ejemplo vamos a coger un texto libre que nos introduzca el usuario y se lo vamos a
escapar. Lo primero crear dos reas de texto mediante textarea:

<form id="myform">
<label for="texto">Escribe un texto:</label><br/>
<textarea id="texto" rows="10" cols="30"></textarea>
<br/>
<label for="textoescapado">El texto escapado es:</label><br/>
<textarea id="textoescapado" rows="10" cols="30"></textarea>
<br/>
<button onClick="escapar();return false;">Escapar el texto</button>
</form>
La funcin escapar, obtiene el texto de un rea de texto, mediante getElementById() y lo vuelca
en otra. Aplicando en medio el mtodo escape().

function escapar(){
document.getElementById("textoescapado").value =
escape(document.getElementById('texto').value);
}

1. 2. 16 Estructuras de control de flujo (if, for, while, switch)

Los programas que se pueden realizar utilizando solamente variables y operadores son una
simple sucesin lineal de instrucciones bsicas.

Sin embargo, no se pueden realizar programas que muestren un mensaje si el valor de una
variable es igual a un valor determinado y no muestren el mensaje en el resto de casos. Tampoco
se puede repetir de forma eficiente una misma instruccin, como por ejemplo sumar un
determinado valor a todos los elementos de un array.
Para realizar este tipo de programas son necesarias las estructuras de control de flujo, que son
instrucciones del tipo "si se cumple esta condicin, hazlo; si no se cumple, haz esto otro".
Tambin existen instrucciones del tipo "repite esto mientras se cumpla esta condicin".
Si se utilizan estructuras de control de flujo, los programas dejan de ser una sucesin lineal de
instrucciones para convertirse en programas inteligentes que pueden tomar decisiones en
funcin del valor de las variables.
cdigo a fin de devolver un resultado u otro dependiendo de una determinada circunstancia que
es la que se evala.

1. 2. 16. 1 Estructura if
La estructura ms utilizada en JavaScript y en la mayora de lenguajes de programacin es la
estructura if. Se emplea para tomar decisiones en funcin de una condicin. Su definicin formal
es:
if(condicion) {
...
}
Si la condicin se cumple (es decir, si su valor es true) se ejecutan todas las instrucciones que se
encuentran dentro de {...}. Si la condicin no se cumple (es decir, si su valor es false) no se
ejecuta ninguna instruccin contenida en {...} y el programa contina ejecutando el resto de
instrucciones del script.
Ejemplo:
var mostrarMensaje = true;
if(mostrarMensaje) {
alert("Hola Mundo");
}
En el ejemplo anterior, el mensaje s que se muestra al usuario ya que la variable
mostrarMensaje tiene un valor de true y por tanto, el programa entra dentro del bloque de
instrucciones del if.
El ejemplo se podra reescribir tambin como:
var mostrarMensaje = true;
if(mostrarMensaje == true) {
alert("Hola Mundo");
}
En este caso, la condicin es una comparacin entre el valor de la variable mostrarMensaje y el
valor true. Como los dos valores coinciden, la igualdad se cumple y por tanto la condicin es
cierta, su valor es true y se ejecutan las instrucciones contenidas en ese bloque del if.
La comparacin del ejemplo anterior suele ser el origen de muchos errores de programacin, al
confundir los operadores == y =. Las comparaciones siempre se realizan con el operador ==, ya
que el operador = solamente asigna valores:
var mostrarMensaje = true;
// Se comparan los dos valores

if(mostrarMensaje == false) {
...
}
// Error - Se asigna el valor "false" a la variable
if(mostrarMensaje = false) {
...
}
La condicin que controla el if() puede combinar los diferentes operadores lgicos y relacionales
mostrados anteriormente:
var mostrado = false;
if(!mostrado) {
alert("Es la primera vez que se muestra el mensaje");
}
Los operadores AND y OR permiten encadenar varias condiciones simples para construir
condiciones complejas:
var mostrado = false;
var usuarioPermiteMensajes = true;
if(!mostrado && usuarioPermiteMensajes) {
alert("Es la primera vez que se muestra el mensaje");
}
La condicin anterior est formada por una operacin AND sobre dos variables. A su vez, a la
primera variable se le aplica el operador de negacin antes de realizar la operacin AND. De esta
forma, como el valor de mostrado es false, el valor !mostrado sera true. Como la variable
usuarioPermiteMensajes vale true, el resultado de !mostrado && usuarioPermiteMensajes sera
igual a true && true, por lo que el resultado final de la condicin del if() sera true y por tanto, se
ejecutan las instrucciones que se encuentran dentro del bloque del if().

1. 2. 16. 2 Estructura ifelse

En ocasiones, las decisiones que se deben realizar no son del tipo "si se cumple la condicin,
hazlo; si no se cumple, no hagas nada". Normalmente las condiciones suelen ser del tipo "si se
cumple esta condicin, hazlo; si no se cumple, haz esto otro".
Para este segundo tipo de decisiones, existe una variante de la estructura if llamada if...else. Su
definicin formal es la siguiente:
if(condicion) {
...
}
else {
...
}
Si la condicin se cumple (es decir, si su valor es true) se ejecutan todas las instrucciones que se
encuentran dentro del if(). Si la condicin no se cumple (es decir, si su valor es false) se ejecutan
todas las instrucciones contenidas en else { }. Ejemplo:
var edad = 18;
if(edad >= 18) {
alert("Eres mayor de edad");
}
else {
alert("Todava eres menor de edad");

}
Si el valor de la variable edad es mayor o igual que el valor numrico 18, la condicin del if() se
cumple y por tanto, se ejecutan sus instrucciones y se muestra el mensaje "Eres mayor de
edad". Sin embargo, cuando el valor de la variable edad no es igual o mayor que 18, la condicin
del if() no se cumple, por lo que automticamente se ejecutan todas las instrucciones del bloque
else { }. En este caso, se mostrara el mensaje "Todava eres menor de edad".
El siguiente ejemplo compara variables de tipo cadena de texto:
var nombre = "";
if(nombre == "") {
alert("An no nos has dicho tu nombre");
}
else {
alert("Hemos guardado tu nombre");
}
La condicin del if() anterior se construye mediante el operador ==, que es el que se emplea
para comparar dos valores (no confundir con el operador = que se utiliza para asignar valores).
En el ejemplo anterior, si la cadena de texto almacenada en la variable nombre es vaca (es
decir, es igual a "") se muestra el mensaje definido en el if(). En otro caso, se muestra el mensaje
definido en el bloque else { }.
La estructura if...else se puede encadenar para realizar varias comprobaciones seguidas:
if(edad < 12) {
alert("Todava eres muy pequeo");
}
else if(edad < 19) {
alert("Eres un adolescente");
}
else if(edad < 35) {
alert("Aun sigues siendo joven");
}
else {
alert("Piensa en cuidarte un poco ms");
}
No es obligatorio que la combinacin de estructuras if...else acabe con la instruccin else, ya que
puede terminar con una instruccin de tipo else if().

1. 2. 16. 3 Estructura for

Las estructuras if y if...else no son muy eficientes cuando se desea ejecutar de forma repetitiva
una instruccin. Por ejemplo, si se quiere mostrar un mensaje cinco veces, se podra pensar en
utilizar el siguiente if:
var veces = 0;
if(veces < 4) {
alert("Mensaje");
veces++;
}
Se comprueba si la variable veces es menor que 4. Si se cumple, se entra dentro del if(), se
muestra el mensaje y se incrementa el valor de la variable veces. As se debera seguir
ejecutando hasta mostrar el mensaje las cinco veces deseadas.

Sin embargo, el funcionamiento real del script anterior es muy diferente al deseado, ya que
solamente se muestra una vez el mensaje por pantalla. La razn es que la ejecucin de la
estructura if() no se repite y la comprobacin de la condicin slo se realiza una vez,
independientemente de que dentro del if() se modifique el valor de la variable utilizada en la
condicin.
La estructura for permite realizar este tipo de repeticiones (tambin llamadas bucles) de una
forma muy sencilla. No obstante, su definicin formal no es tan sencilla como la de if():
for(inicializacion; condicion; actualizacion) {
...
}
La idea del funcionamiento de un bucle for es la siguiente: "mientras la condicin indicada se
siga cumpliendo, repite la ejecucin de las instrucciones definidas dentro del for. Adems,
despus de cada repeticin, actualiza el valor de las variables que se utilizan en la condicin".
La "inicializacin" es la zona en la que se establece los valores iniciales de las variables que
controlan la repeticin.
La "condicin" es el nico elemento que decide si continua o se detiene la repeticin.
La "actualizacin" es el nuevo valor que se asigna despus de cada repeticin a las variables que
controlan la repeticin.
var mensaje = "Hola, estoy dentro de un bucle";
for(var i = 0; i < 5; i++) {
alert(mensaje);
}
La parte de la inicializacin del bucle consiste en:
var i = 0;
Por tanto, en primer lugar se crea la variable i y se le asigna el valor de 0. Esta zona de
inicializacin solamente se tiene en consideracin justo antes de comenzar a ejecutar el bucle.
Las siguientes repeticiones no tienen en cuenta esta parte de inicializacin.
La zona de condicin del bucle es:
i<5
Los bucles se siguen ejecutando mientras se cumplan las condiciones y se dejan de ejecutar
justo despus de comprobar que la condicin no se cumple. En este caso, mientras la variable i
valga menos de 5 el bucle se ejecuta indefinidamente.
Como la variable i se ha inicializado a un valor de 0 y la condicin para salir del bucle es que i
sea menor que 5, si no se modifica el valor de i de alguna forma, el bucle se repetira
indefinidamente.
Por ese motivo, es imprescindible indicar la zona de actualizacin, en la que se modifica el valor
de las variables que controlan el bucle:
i++
En este caso, el valor de la variable i se incrementa en una unidad despus de cada repeticin.
La zona de actualizacin se ejecuta despus de la ejecucin de las instrucciones que incluye el
for.
As, durante la ejecucin de la quinta repeticin el valor de i ser 4. Despus de la quinta
ejecucin, se actualiza el valor de i, que ahora valdr 5. Como la condicin es que i sea menor
que 5, la condicin ya no se cumple y las instrucciones del for no se ejecutan una sexta vez.
Normalmente, la variable que controla los bucles for se llama i, ya que recuerda a la palabra
ndice y su nombre tan corto ahorra mucho tiempo y espacio.
El ejemplo anterior que mostraba los das de la semana contenidos en un array se puede rehacer
de forma ms sencilla utilizando la estructura for:

var dias = ["Lunes", "Martes", "Mircoles", "Jueves", "Viernes", "Sbado", "Domingo"];

for(var i=0; i<7; i++) {
alert(dias[i]);
}

1. 2. 16. 4 Estructura for in

Una estructura de control derivada de for es la estructura for...in. Su definicin exacta implica el
uso de objetos, que es un elemento de programacin avanzada que no se va a estudiar. Por
tanto, solamente se va a presentar la estructura for...in adaptada a su uso en arrays. Su
definicin formal adaptada a los arrays es:
for(indice in array) {
...
}
Si se quieren recorrer todos los elementos que forman un array, la estructura for...in es la forma
ms eficiente de hacerlo, como se muestra en el siguiente ejemplo:
var dias = ["Lunes", "Martes", "Mircoles", "Jueves", "Viernes", "Sbado", "Domingo"];
for(i in dias) {
alert(dias[i]);
}
La variable que se indica como indice es la que se puede utilizar dentro del bucle for...in para
acceder a los elementos del array. De esta forma, en la primera repeticin del bucle la variable i
vale 0 y en la ltima vale 6.
Esta estructura de control es la ms adecuada para recorrer arrays (y objetos), ya que evita
tener que indicar la inicializacin y las condiciones del bucle for simple y funciona correctamente
cualquiera que sea la longitud del array. De hecho, sigue funcionando igual aunque vare el
nmero de elementos del array.

1. 2. 16. 5 Estructura while

La estructura while permite crear bucles que se ejecutan ninguna o ms veces, dependiendo de
la condicin indicada. Su definicin formal es:
while(condicion) {
...
}
El funcionamiento del bucle while se resume en: "mientras se cumpla la condicin indicada,
repite indefinidamente las instrucciones incluidas dentro del bucle".
Si la condicin no se cumple ni siquiera la primera vez, el bucle no se ejecuta. Si la condicin se
cumple, se ejecutan las instrucciones una vez y se vuelve a comprobar la condicin. Si se sigue
cumpliendo la condicin, se vuelve a ejecutar el bucle y as se contina hasta que la condicin no
se cumpla.
Evidentemente, las variables que controlan la condicin deben modificarse dentro del propio
bucle, ya que de otra forma, la condicin se cumplira siempre y el bucle while se repetira
indefinidamente.
El siguiente ejemplo utiliza el bucle while para sumar todos los nmeros menores o iguales que
otro nmero:
var resultado = 0;

var numero = 100;

var i = 0;
while(i <= numero) {
resultado += i;
i++;
}
alert(resultado);
El programa debe sumar todos los nmeros menores o igual que otro dado. Por ejemplo si el
nmero es 5, se debe calcular: 1 + 2 + 3 + 4 + 5 = 15
Este tipo de condiciones "suma nmeros mientras sean menores o iguales que otro nmero
dado") se resuelven muy fcilmente con los bucles tipo while, aunque tambin se podan resolver
con bucles de tipo for.
En el ejemplo anterior, mientras se cumpla la condicin, es decir, mientras que la variable i sea
menor o igual que la variable numero, se ejecutan las instrucciones del bucle.
Dentro del bucle se suma el valor de la variable i al resultado total (variable resultado) y se
actualiza el valor de la variable i, que es la que controla la condicin del bucle. Si no se actualiza
el valor de la variable i, la ejecucin del bucle continua infinitamente o hasta que el navegador
permita al usuario detener el script.

1. 2. 16. 6 Estructura switch

La estructura if...else se puede utilizar para realizar comprobaciones mltiples y tomar decisiones
complejas. Sin embargo, si todas las condiciones dependen siempre de la misma variable, el
cdigo JavaScript resultante es demasiado redundante:
if(numero == 5) {
...
}
else if(numero == 8) {
...
}
else if(numero == 20) {
...
}
else {
...
}
En estos casos, la estructura switch es la ms eficiente, ya que est especialmente diseada
para manejar de forma sencilla mltiples condiciones sobre la misma variable. Su definicin
formal puede parecer compleja, aunque su uso es muy sencillo:
switch(variable) {
case valor_1:
...
break;
case valor_2:
...
break;
...
case valor_n:
...
break;
default:
...
break;

}
El anterior ejemplo realizado con if...else se puede rehacer mediante switch:
switch(numero) {
case 5:
...
break;
case 8:
...
break;
case 20:
...
break;
default:
...
break;
}
La estructura switch se define mediante la palabra reservada switch seguida, entre parntesis,
del nombre de la variable que se va a utilizar en las comparaciones. Como es habitual, las
instrucciones que forman parte del switch se encierran entre las llaves { y }.
Dentro del switch se definen todas las comparaciones que se quieren realizar sobre el valor de la
variable. Cada comparacin se indica mediante la palabra reservada case seguida del valor con
el que se realiza la comparacin. Si el valor de la variable utilizada por switch coincide con el
valor indicado por case, se ejecutan las instrucciones definidas dentro de ese case.
Normalmente, despus de las instrucciones de cada case se incluye la sentencia break para
terminar la ejecucin del switch, aunque no es obligatorio. Las comparaciones se realizan por
orden, desde el primer case hasta el ltimo, por lo que es muy importante el orden en el que se
definen los case.
Qu sucede si ningn valor de la variable del switch coincide con los valores definidos en los
case? En este caso, se utiliza el valor default para indicar las instrucciones que se ejecutan en el
caso en el que ningn case se cumpla para la variable indicada.
Aunque default es opcional, las estructuras switch suelen incluirlo para definir al menos un valor
por defecto para alguna variable o para mostrar algn mensaje por pantalla.

1.3 Programacin avanzada

1. 3. 1 DOM
La creacin del Document Object Model o DOM es una de las innovaciones que ms ha influido
en el desarrollo de las pginas web dinmicas y de las aplicaciones web ms complejas.
DOM permite a los programadores web acceder y manipular las pginas XHTML como si fueran
documentos XML. De hecho, DOM se dise originalmente para manipular de forma sencilla los
documentos XML.
A pesar de sus orgenes, DOM se ha convertido en una utilidad disponible para la mayora de
lenguajes de programacin (Java, PHP, JavaScript) y cuyas nicas diferencias se encuentran en la
forma de implementarlo.
Con DOM los elementos de un documento se organizan en una jerarqua (rbol): jerarqua DOM.
Y los elementos del documento son los nodos del rbol, las relaciones entre los nodos
representan las interconexiones de los elementos.
El API DOM proporciona operaciones para poder acceder a estos objetos y manipularlos.

1. 3. 1. 1 Tipos de nodos
En este apartado hablaremos de los nodos bsicos de un documento de HTML, los enlistaremos y
vendr una breve explicacin. De la misma manera se enlistarn los menos utilizados, pero an
as, bastante tiles.
NODOS BSICOS
Document nodo raz del que derivan todos los dems nodos del rbol
Element representa cada una de las etiquetas. Es el nico nodo que puede contener atributos
Attr representa cada uno de los atributos de las etiquetas. Hay uno por cada par atributo=valor.
Text contiene el texto encerrado por una etiqueta XHTML.
Comment representa los comentarios incluidos en la pgina.
OTROS NODOS
DocumentType interfaz a las entidades definidas para el documento
CDataSection una seccin CDATA (que no analiza el parser)
DocumentFragment un documento "ligero" (una parte)
Entity una entidad
EntityReference una referencia a una entidad
ProcessingInstruction una instruccin de procesado
Notation una notacin declarada en la DTD

1. 3. 1. 2 Acceso a nodos
El cmo acceder a los nodos se divide en tres formas: el acceso por medio del ID, el acceso por
etiqueta y desde el nodo padre.
Por medio del acceso directo, devuelve el objeto correspondiente al elemento que tenga el id
especificado (solo puede haber uno) o null si no lo hubiera.
Este es un mtodo del objeto document

var x=document.getElementById("principal");
Devuelve el elemento con id="principal" dentro del documento
Acceso por etiqueta, devuelveun array de nodos que tienen la etiqueta especificada. Este
mtodo se puede aplicar a cualquier nodo:
var enlaces=x.getElementsByTagName("a");
Devuelve todos los enlaces <a> dentro del elemento x (id="principal")
Desde el nodo padre, acceder al nodo raz (document), y navegar por los hijos hasta el nodo
deseado. Seutilizan propiedades y mtodos de los nodos.
Algunas propiedades de los nodos padre son:
childNodes NodeList (array) que contiene todos los hijos del nodo.
firstChild y lastChild primer y ltimo hijo de un nodo.
parentNode el padre del nodo.
nextSibling y previousSibling nodos siguiente y anterior en el mismo nivel.
Algunos mtodos de los nodos padre son: hasChildNodes().

1. 3. 1. 3 Mtodos de los nodos

Todos los nodos cuentan con un conjunto de mtodos para manipular a los hijos, estos son
algunos: appendChild(), insertBefore(), isSameNode(), removeChild() y replaceChild().
Hay otros mtodos para acceder a los atributos del nodo:
getAttribute("atributo") devuelve el valor del atributo
setAttribute("atributo", "valor") permite modificar el valor del atributo, o aadir un nuevo
atributo

1. 3. 1. 4 Creacin y eliminacin de nodos

Acceder a los nodos y a sus propiedades (que se ver ms adelante) es slo una parte de las
manipulaciones habituales en las pginas. Las otras operaciones habituales son las de crear y
eliminar nodos del rbol DOM, es decir, crear y eliminar "trozos" de la pgina web.
Como se ha visto, un elemento XHTML sencillo, como por ejemplo un prrafo, genera dos nodos:
el primer nodo es de tipo Element y representa la etiqueta <p> y el segundo nodo es de tipo
Text y representa el contenido textual de la etiqueta <p>.
Por este motivo, crear y aadir a la pgina un nuevo elemento XHTML sencillo consta de cuatro
pasos diferentes:
Creacin de un nodo de tipo Element que represente al elemento.
Creacin de un nodo de tipo Text que represente el contenido del elemento.
Aadir el nodo Text como nodo hijo del nodo Element.
Aadir el nodo Element a la pgina, en forma de nodo hijo del nodo correspondiente al lugar en
el que se quiere insertar el elemento.

De este modo, si se quiere aadir un prrafo simple al final de una pgina XHTML, es necesario
incluir el siguiente cdigo JavaScript:
// Crear nodo de tipo Element
var parrafo = document.createElement("p");
// Crear nodo de tipo Text
var contenido = document.createTextNode("Hola Mundo!");
// Aadir el nodo Text como hijo del nodo Element
parrafo.appendChild(contenido);
// Aadir el nodo Element como hijo de la pagina
document.body.appendChild(parrafo);
El proceso de creacin de nuevos nodos puede llegar a ser tedioso, ya que implica la utilizacin
de tres funciones DOM:
createElement(etiqueta): crea un nodo de tipo Element que representa al elemento XHTML cuya
etiqueta se pasa como parmetro.
createTextNode(contenido): crea un nodo de tipo Text que almacena el contenido textual de los
elementos XHTML.
nodoPadre.appendChild(nodoHijo): aade un nodo como hijo de otro nodo. Se debe utilizar al
menos dos veces con los nodos habituales: en primer lugar se aade el nodo Text como hijo del
nodo Element y a continuacin se aade el nodo Element como hijo de algn nodo de la pgina.
Afortunadamente, eliminar un nodo del rbol DOM de la pgina es mucho ms sencillo que
aadirlo. En este caso, solamente es necesario utilizar la funcin removeChild():
var parrafo = document.getElementById("provisional");
parrafo.parentNode.removeChild(parrafo);
<p id="provisional">...</p>
La funcin removeChild() requiere como parmetro el nodo que se va a eliminar. Adems, esta
funcin debe ser invocada desde el elemento padre de ese nodo que se quiere eliminar. La forma
ms segura y rpida de acceder al nodo padre de un elemento es mediante la propiedad
nodoHijo.parentNode.
As, para eliminar un nodo de una pgina XHTML se invoca a la funcin removeChild() desde el
valor parentNode del nodo que se quiere eliminar. Cuando se elimina un nodo, tambin se
eliminan automticamente todos los nodos hijos que tenga, por lo que no es necesario borrar
manualmente cada nodo hijo.

1. 3. 2 Eventos
Las aplicaciones y scripts se ejecutan desde la primera instruccin hasta la ltima, de manera
secuencial, adems, gracias a las estructuras de control de flujo se pueden modificar los
comportamientos y repetir algunas partes de los scripts, siempre en funcin de algunas
condiciones.
Las aplicaciones web creadas con el lenguaje JavaScript pueden utilizar el modelo de
programacin basada en eventos.
En la programacin Javascript, los scripts se dedican a esperar que el usuario realice una accin,
y el script le responde a su accin, tras haber procesado la informacin y haber generado un
resultado.

Los eventos hacen posible que los usuarios transmitan informacin. Javascript cuenta con
numerosos eventos que permiten la interaccin entre el usuario y la aplicacin web, ya que cada
vez que se pulsa un tecla se constituye un evento, por ejemplo hacer click o mover el raton fuera
o dentro de un elemento, etc.
A cada evento se le asigna una funcin, de esa manera, cuando se produce cualquier evento
Javascript ejecuta una funcin asociada, a esas funciones se les denomina event handlers que se
traduce del ingls como manejadores de evento.

1. 3. 3 Modelo de eventos
Debido a las concurrentes incompatibilidades que se producen en el lenguaje XHTML, en el
soporte de hojas de estilos CSS y sobre todo, en la implementacin de JavaScript.
Existen hasta tres modelos diferentes para manejar los eventos dependiendo del navegador en
el que se ejecute la aplicacin. Los modelos son los siguientes: el modelo bsico de eventos, el
modelo estndar de eventos y el modelo de eventos para Internet Explorer.

1. 3. 3. 1 Modelo bsico de eventos

En este modelo, cada elemento o etiqueta XHTML define su propia lista de posibles eventos que
se le pueden asignar. Un mismo tipo de evento puede estar definido para varios elementos
XHTML diferentes y un mismo elemento XHTML puede tener asociados varios eventos diferentes.
El nombre de cada evento se construye mediante el prefijo on, seguido del nombre en ingls de
la accin asociada al evento.
Este modelo simple de eventos se introdujo para la versin 4 del estndar HTML y se considera
parte del nivel ms bsico de DOM. Aunque sus caractersticas son limitadas, es el nico modelo
que es compatible en todos los navegadores y por tanto, el nico que permite crear aplicaciones
que funcionan de la misma manera en todos los navegadores.

1. 3. 3. 2 Modelo estndar de eventos

Las versiones ms avanzadas del estndar DOM (DOM nivel 2) definen un modelo de eventos
completamente nuevo y mucho ms poderoso que el original. Todos los navegadores modernos
lo incluyen, salvo Internet Explorer.

1. 3. 3. 3 Modelo de eventos para Internet Explorer

Internet Explorer utiliza su propio modelo de eventos, que es similar pero incompatible con el
modelo estndar. Se utiliz por primera vez en Internet Explorer 4 y Microsoft decidi seguir
utilizndolo en el resto de versiones, a pesar de que la empresa haba participado en la creacin
del estndar de DOM que define el modelo de eventos estndar.

1. 3. 4 Tipos de eventos de acuerdo al modelo bsico de eventos

El nombre de cada evento se construye mediante el prefijo on, seguido del nombre en ingls de
la accin asociada al evento
Los siguientes eventos ms importantes definidos por JavaScript:
onblur Deseleccionar el elemento, esta definido para <button>, <input>, <label>, <select>,
<textarea>, <body>
onchange Deseleccionar un elemento que se ha modificado, esta definido para <input>,
<select>, <textarea>

onclick Pinchar y soltar el ratn, esta definido para todos los elementos
ondblclick Pinchar dos veces seguidas con el ratn, esta definido para todos los elementos
onfocus Seleccionar un elemento, esta definido para <button>, <input>, <label>, <select>,
<textarea>, <body>
onkeydown Pulsar una tecla (sin soltar) , esta definido para elementos de formulario y <body>
onkeypress Pulsar una tecla, esta definido para

elementos de formulario y <body>

onkeyup Soltar una tecla pulsada, esta definido para elementos de formulario y <body>
onload La pgina se ha cargado completamente, esta definido para

<body>

onmousedown Pulsar (sin soltar) un botn del ratn, esta definido para todos los elementos
onmousemove Mover el ratn, esta definido para todos los elementos
onmouseout El ratn "sale" del elemento (pasa por encima de otro elemento) , esta definido para
todos los elementos
onmouseover El ratn "entra" en el elemento (pasa por encima del elemento) , esta definido
para todos los elementos
onmouseup Soltar el botn que estaba pulsado en el ratn, esta definido para todos los
elementos
onreset Inicializar el formulario (borrar todos sus datos), esta definido para
onresize
<body>

<form>

Se ha modificado el tamao de la ventana del navegador, esta definido para

onselect Seleccionar un texto, esta definido para <input>, <textarea>

onsubmit Enviar el formulario, esta definido para <form>
onunload Se abandona la pgina (por ejemplo al cerrar el navegador), esta definido para
<body>

1. 3. 5 Manejadores de eventos
Un evento de JavaScript por s mismo carece de utilidad. Para que los eventos resulten tiles, se
deben asociar funciones o cdigo JavaScript a cada evento. De esta forma, cuando se produce un
evento se ejecuta el cdigo indicado, por lo que la aplicacin puede responder ante cualquier
evento que se produzca durante su ejecucin.
Las funciones o cdigo JavaScript que se definen para cada evento se denominan "manejador de
eventos" y como JavaScript es un lenguaje muy flexible, existen varias formas diferentes de
indicar los manejadores: manejadores como atributos de los elementos XHTML, manejadores
como funciones JavaScript externas, manejador de eventos y variable this y manejadores
"semnticos".

1. 3. 5. 1 Manejador con atributos de los elementos XHTML

Se trata del mtodo ms sencillo y a la vez menos profesional de indicar el cdigo JavaScript que
se debe ejecutar cuando se produzca un evento. En este caso, el cdigo se incluye en un atributo
del propio elemento XHTML. En el siguiente ejemplo, se quiere mostrar un mensaje cuando el
usuario pinche con el ratn sobre un botn:

<input type="button" value="Pinchame y vers" onclick="alert('Gracias por pinchar');" />

En este mtodo, se definen atributos XHTML con el mismo nombre que los eventos que se
quieren manejar. El ejemplo anterior slo quiere controlar el evento de pinchar con el ratn, cuyo
nombre es onclick. As, el elemento XHTML para el que se quiere definir este evento, debe incluir
un atributo llamado onclick.
El contenido del atributo es una cadena de texto que contiene todas las instrucciones JavaScript
que se ejecutan cuando se produce el evento. En este caso, el cdigo JavaScript es muy sencillo
(alert('Gracias por pinchar');), ya que solamente se trata de mostrar un mensaje.
En este otro ejemplo, cuando el usuario pincha sobre el elemento <div> se muestra un mensaje
y cuando el usuario pasa el ratn por encima del elemento, se muestra otro mensaje:
<div onclick="alert('Has pinchado con el ratn');" onmouseover="alert('Acabas de pasar el ratn
por encima');">
Puedes pinchar sobre este elemento o simplemente pasar el ratn por encima
</div>
Este otro ejemplo incluye una de las instrucciones ms utilizadas en las aplicaciones JavaScript
ms antiguas:
<body onload="alert('La pgina se ha cargado completamente');">
...
</body>
El mensaje anterior se muestra despus de que la pgina se haya cargado completamente, es
decir, despus de que se haya descargado su cdigo HTML, sus imgenes y cualquier otro objeto
incluido en la pgina.
El evento onload es uno de los ms utilizados ya que, como se vio en el captulo de DOM, las
funciones que permiten acceder y manipular los nodos del rbol DOM solamente estn
disponibles cuando la pgina se ha cargado completamente.

1. 3. 5. 2 Manejador de eventos y variable this

JavaScript define una variable especial llamada this que se crea automticamente y que se
emplea en algunas tcnicas avanzadas de programacin. En los eventos, se puede utilizar la
variable this para referirse al elemento XHTML que ha provocado el evento. Esta variable es muy
til para ejemplos como el siguiente:
Cuando el usuario pasa el ratn por encima del <div>, el color del borde se muestra de color
negro. Cuando el ratn sale del <div>, se vuelve a mostrar el borde con el color gris claro
original.
Elemento <div> original:
<div id="contenidos" style="width:150px; height:60px; border:thin solid silver">
Seccin de contenidos...
</div>
Si no se utiliza la variable this, el cdigo necesario para modificar el color de los bordes, sera el
siguiente:
<div id="contenidos" style="width:150px; height:60px; border:thin solid silver"
onmouseover="document.getElementById('contenidos').style.borderColor='black';"
onmouseout="document.getElementById('contenidos').style.borderColor='silver';">
Seccin de contenidos...
</div>
El cdigo anterior es demasiado largo y demasiado propenso a cometer errores. Dentro del
cdigo de un evento, JavaScript crea automticamente la variable this, que hace referencia al
elemento XHTML que ha provocado el evento. As, el ejemplo anterior se puede reescribir de la
siguiente manera:

<div id="contenidos" style="width:150px; height:60px; border:thin solid silver"

onmouseover="this.style.borderColor='black';" onmouseout="this.style.borderColor='silver';">
Seccin de contenidos...
</div>
El cdigo anterior es mucho ms compacto, ms fcil de leer y de escribir y sigue funcionando
correctamente aunque se modifique el valor del atributo id del <div>.

1. 3. 5. 3 Manejador con funciones externas

La definicin de los manejadores de eventos en los atributos XHTML es el mtodo ms sencillo
pero menos aconsejable de tratar con los eventos en JavaScript. El principal inconveniente es
que se complica en exceso en cuanto se aaden algunas pocas instrucciones, por lo que
solamente es recomendable para los casos ms sencillos.
Si se realizan aplicaciones complejas, como por ejemplo la validacin de un formulario, es
aconsejable agrupar todo el cdigo JavaScript en una funcin externa y llamar a esta funcin
desde el elemento XHTML.
Siguiendo con el ejemplo anterior que muestra un mensaje al pinchar sobre un botn:
<input type="button" value="Pinchame y vers" onclick="alert('Gracias por pinchar');" />
Utilizando funciones externas se puede transformar en:
function muestraMensaje() {
alert('Gracias por pinchar');
}
<input type="button" value="Pinchame y vers" onclick="muestraMensaje()" />
Esta tcnica consiste en extraer todas las instrucciones de JavaScript y agruparlas en una funcin
externa. Una vez definida la funcin, en el atributo del elemento XHTML se incluye el nombre de
la funcin, para indicar que es la funcin que se ejecuta cuando se produce el evento.
La llamada a la funcin se realiza de la forma habitual, indicando su nombre seguido de los
parntesis y de forma opcional, incluyendo todos los argumentos y parmetros que se necesiten.
El principal inconveniente de este mtodo es que en las funciones externas no se puede seguir
utilizando la variable this y por tanto, es necesario pasar esta variable como parmetro a la
funcin:
function resalta(elemento) {
switch(elemento.style.borderColor) {
case 'silver':
case 'silver silver silver silver':
case '#c0c0c0':
elemento.style.borderColor = 'black';
break;
case 'black':
case 'black black black black':
case '#000000':
elemento.style.borderColor = 'silver';
break;
}
}
<div style="width:150px; height:60px; border:thin solid silver" onmouseover="resalta(this)"
onmouseout="resalta(this)">
Seccin de contenidos...
</div>

En el ejemplo anterior, la funcin externa es llamada con el parmetro this, que dentro de la
funcin se denomina elemento. La complejidad del ejemplo se produce sobre todo por la forma
en la que los distintos navegadores almacenan el valor de la propiedad borderColor.
Mientras que Firefox almacena (en caso de que los cuatro bordes coincidan en color) el valor
black, Internet Explorer lo almacena como black black black black y Opera almacena su
representacin hexadecimal #000000.

1. 3. 5. 4 Manejador semntico
Los mtodos que se han visto para aadir manejadores de eventos (como atributos XHTML y
como funciones externas) tienen un grave inconveniente: "ensucian" el cdigo XHTML de la
pgina.
Como es conocido, una de las buenas prcticas bsicas en el diseo de pginas y aplicaciones
web es la separacin de los contenidos (XHTML) y su aspecto o presentacin (CSS). Siempre que
sea posible, tambin se recomienda separar los contenidos (XHTML) y su comportamiento o
programacin (JavaScript).
Mezclar el cdigo JavaScript con los elementos XHTML solamente contribuye a complicar el
cdigo fuente de la pgina, a dificultar la modificacin y mantenimiento de la pgina y a reducir
la semntica del documento final producido.
Afortunadamente, existe un mtodo alternativo para definir los manejadores de eventos de
JavaScript. Esta tcnica es una evolucin del mtodo de las funciones externas, ya que se basa
en utilizar las propiedades DOM de los elementos XHTML para asignar todas las funciones
externas que actan de manejadores de eventos. As, el siguiente ejemplo:
<input id="pinchable" type="button" value="Pinchame y vers" onclick="alert('Gracias por
pinchar');" />
Se puede transformar en:
// Funcin externa
function muestraMensaje() {
alert('Gracias por pinchar');
}
// Asignar la funcin externa al elemento
document.getElementById("pinchable").onclick = muestraMensaje;
// Elemento XHTML
<input id="pinchable" type="button" value="Pinchame y vers" />
La tcnica de los manejadores semnticos consiste en:
Asignar un identificador nico al elemento XHTML mediante el atributo id.
Crear una funcin de JavaScript encargada de manejar el evento.
Asignar la funcin externa al evento correspondiente en el elemento deseado.
El ltimo paso es la clave de esta tcnica. En primer lugar, se obtiene el elemento al que se
desea asociar la funcin externa:
document.getElementById("pinchable");
A continuacin, se utiliza una propiedad del elemento con el mismo nombre que el evento que se
quiere manejar. En este caso, la propiedad es onclick:
document.getElementById("pinchable").onclick = ...
Por ltimo, se asigna la funcin externa mediante su nombre sin parntesis. Lo ms importante
(y la causa ms comn de errores) es indicar solamente el nombre de la funcin, es decir,
prescindir de los parntesis al asignar la funcin:

document.getElementById("pinchable").onclick = muestraMensaje;
Si se aaden los parntesis despus del nombre de la funcin, en realidad se est ejecutando la
funcin y guardando el valor devuelto por la funcin en la propiedad onclick de elemento.
// Asignar una funcin externa a un evento de un elemento
document.getElementById("pinchable").onclick = muestraMensaje;
// Ejecutar una funcin y guardar su resultado en una propiedad de un elemento
document.getElementById("pinchable").onclick = muestraMensaje();
La gran ventaja de este mtodo es que el cdigo XHTML resultante es muy "limpio", ya que no se
mezcla con el cdigo JavaScript. Adems, dentro de las funciones externas asignadas s que se
puede utilizar la variable this para referirse al elemento que provoca el evento.
El nico inconveniente de este mtodo es que la pgina se debe cargar completamente antes de
que se puedan utilizar las funciones DOM que asignan los manejadores a los elementos XHTML.
Una de las formas ms sencillas de asegurar que cierto cdigo se va a ejecutar despus de que
la pgina se cargue por completo es utilizar el evento onload:
window.onload = function() {
document.getElementById("pinchable").onclick = muestraMensaje;
}
La tcnica anterior utiliza el concepto de funciones annimas, que no se va a estudiar, pero que
permite crear un cdigo compacto y muy sencillo. Para asegurarse que un cdigo JavaScript va a
ejecutarse despus de que la pgina se haya cargado completamente, slo es necesario incluir
esas instrucciones entre los smbolos { y }:

1. 3. 6 Objeto evento
Los manejadores de eventos requieren informacin adicional para procesar sus tareas. Si una
funcin por ejemplo se encarga de procesar el evento onclick, quizs necesite saber en que
posicin estaba el ratn en el momento de pinchar el botn.
JavaScript permite obtener informacin sobre el ratn y el teclado mediante un objeto especial
llamado event. Desafortunadamente, los diferentes navegadores presentan diferencias muy
notables en el tratamiento de la informacin sobre los eventos.
La principal diferencia reside en la forma en la que se obtiene el objeto event. Internet Explorer
considera que este objeto forma parte del objeto window y el resto de navegadores lo consideran
como el nico argumento que tienen las funciones manejadoras de eventos.
En resumen, en los navegadores tipo Internet Explorer, el objeto event se obtiene directamente
mediante:
var evento = window.event;
Por otra parte, en el resto de navegadores, el objeto event se obtiene mgicamente a partir del
argumento que el navegador crea automticamente:
function manejadorEventos(elEvento) {
var evento = elEvento;
}
Si se quiere programar una aplicacin que funcione correctamente en todos los navegadores, es
necesario obtener el objeto event de forma correcta segn cada navegador. El siguiente cdigo
muestra la forma correcta de obtener el objeto event en cualquier navegador:
function manejadorEventos(elEvento) {
var evento = elEvento || window.event;
}
Una vez obtenido el objeto event, ya se puede acceder a toda la informacin relacionada con el
evento, que depende del tipo de evento producido.

1. 3. 7 Formularios
Una de las principales razones por las cuales se creo el lenguaje de programacin Javascript fue
la necesidad de validar los datos de los formularios directamente en el navegador del usuario, de
ese manera se evitaba sobrecargar la pgina cuando el usuario cometa errores al rellenar los
formularios.

1. 3. 7. 1 Propiedades bsicas de los formularios

JavaScript dispone de numerosas propiedades y funciones que facilitan la programacin de
aplicaciones que manejan formularios. En primer lugar, cuando se carga una pgina web, el
navegador crea automticamente un array llamado forms y que contiene la referencia a todos
los formularios de la pgina.
Para acceder al array forms, se utiliza el objeto document, por lo que document.forms es el array
que contiene todos los formularios de la pgina. Como se trata de un array, el acceso a cada
formulario se realiza con la misma sintaxis de los arrays. La siguiente instruccin accede al
primer formulario de la pgina:
document.forms[0];
Adems del array de formularios, el navegador crea automticamente un array llamado elements
por cada uno de los formularios de la pgina. Cada array elements contiene la referencia a todos
los elementos (cuadros de texto, botones, listas desplegables, etc.) de ese formulario. Utilizando
la sintaxis de los arrays, la siguiente instruccin obtiene el primer elemento del primer formulario
de la pgina:
document.forms[0].elements[0];
La sintaxis de los arrays no siempre es tan concisa. El siguiente ejemplo muestra cmo obtener
directamente el ltimo elemento del primer formulario de la pgina:
document.forms[0].elements[document.forms[0].elements.length-1];
Aunque esta forma de acceder a los formularios es rpida y sencilla, tiene un inconveniente muy
grave. Qu sucede si cambia el diseo de la pgina y en el cdigo HTML se cambia el orden de
los formularios originales o se aaden nuevos formularios? El problema es que "el primer
formulario de la pgina" ahora podra ser otro formulario diferente al que espera la aplicacin.
Una forma de evitar los problemas del mtodo anterior consiste en acceder a los formularios de
una pgina a travs de su nombre (atributo name) o a travs de su atributo id. El objeto
document permite acceder directamente a cualquier formulario mediante su atributo name:
var formularioPrincipal = document.formulario;
var formularioSecundario = document.otro_formulario;
<form name="formulario" >
...
</form>
<form name="otro_formulario" >
...
</form>
Accediendo de esta forma a los formularios de la pgina, el script funciona correctamente
aunque se reordenen los formularios o se aadan nuevos formularios a la pgina. Los elementos
de los formularios tambin se pueden acceder directamente mediante su atributo name:
var formularioPrincipal = document.formulario;

var primerElemento = document.formulario.elemento;

<form name="formulario">
<input type="text" name="elemento" />
</form>
Obviamente, tambin se puede acceder a los formularios y a sus elementos utilizando las
funciones DOM de acceso directo a los nodos. El siguiente ejemplo utiliza la habitual funcin
document.getElementById() para acceder de forma directa a un formulario y a uno de sus
elementos:
var formularioPrincipal = document.getElementById("formulario");
var primerElemento = document.getElementById("elemento");
<form name="formulario" id="formulario" >
<input type="text" name="elemento" id="elemento" />
</form>
Independientemente del mtodo utilizado para obtener la referencia a un elemento de
formulario, cada elemento dispone de las siguientes propiedades tiles para el desarrollo de las
aplicaciones:
type: indica el tipo de elemento que se trata. Para los elementos de tipo <input> (text, button,
checkbox, etc.) coincide con el valor de su atributo type. Para las listas desplegables normales
(elemento <select>) su valor es select-one, lo que permite diferenciarlas de las listas que
permiten seleccionar varios elementos a la vez y cuyo tipo es select-multiple. Por ltimo, en los
elementos de tipo <textarea>, el valor de type es textarea.
form: es una referencia directa al formulario al que pertenece el elemento. As, para acceder al
formulario de un elemento, se puede utilizar document.getElementById("id_del_elemento").form
name: obtiene el valor del atributo name de XHTML. Solamente se puede leer su valor, por lo que
no se puede modificar.
value: permite leer y modificar el valor del atributo value de XHTML. Para los campos de texto
(<input type="text"> y <textarea>) obtiene el texto que ha escrito el usuario. Para los botones
obtiene el texto que se muestra en el botn. Para los elementos checkbox y radiobutton no es
muy til, como se ver ms adelante
Por ltimo, los eventos ms utilizados en el manejo de los formularios son los siguientes:
onclick: evento que se produce cuando se pincha con el ratn sobre un elemento. Normalmente
se utiliza con cualquiera de los tipos de botones que permite definir XHTML (<input
type="button">, <input type="submit">, <input type="image">).
onchange: evento que se produce cuando el usuario cambia el valor de un elemento de texto
(<input type="text"> o <textarea>). Tambin se produce cuando el usuario selecciona una
opcin en una lista desplegable (<select>). Sin embargo, el evento slo se produce si despus
de realizar el cambio, el usuario pasa al siguiente campo del formulario, lo que tcnicamente se
conoce como que "el otro campo de formulario ha perdido el foco".
onfocus: evento que se produce cuando el usuario selecciona un elemento del formulario.
onblur: evento complementario de onfocus, ya que se produce cuando el usuario ha
deseleccionado un elemento por haber seleccionado otro elemento del formulario. Tcnicamente,
se dice que el elemento anterior "ha perdido el foco".

1. 3. 7. 2 Utilidades bsicas
A continuacin se muestra cmo obtener el valor de los campos de formulario ms utilizados.
CUADRO DE TEXTO Y TEXTAREA
El valor del texto mostrado por estos elementos se obtiene y se establece directamente
mediante la propiedad value.
<input type="text" id="texto" />
var valor = document.getElementById("texto").value;

<textarea id="parrafo"></textarea>
var valor = document.getElementById("parrafo").value;
7.2.1.2. Radiobutton
Cuando se dispone de un grupo de radiobuttons, generalmente no se quiere obtener el valor del
atributo value de alguno de ellos, sino que lo importante es conocer cul de todos los
radiobuttons se ha seleccionado. La propiedad checked devuelve true para el radiobutton
seleccionado y false en cualquier otro caso. Si por ejemplo se dispone del siguiente grupo de
radiobuttons:
<input type="radio" value="si" name="pregunta" id="pregunta_si"/> SI
<input type="radio" value="no" name="pregunta" id="pregunta_no"/> NO
<input type="radio" value="nsnc" name="pregunta" id="pregunta_nsnc"/> NS/NC
El siguiente cdigo permite determinar si cada radiobutton ha sido seleccionado o no:
var elementos = document.getElementsByName("pregunta");
for(var i=0; i<elementos.length; i++) {
alert(" Elemento: " + elementos[i].value + "\n Seleccionado: " + elementos[i].checked);
}
CHECKBOX
Los elementos de tipo checkbox son muy similares a los radiobutton, salvo que en este caso se
debe comprobar cada checkbox de forma independiente del resto. El motivo es que los grupos
de radiobutton son mutuamente excluyentes y slo se puede seleccionar uno de ellos cada vez.
Por su parte, los checkbox se pueden seleccionar de forma independiente respecto de los dems.
Si se dispone de los siguientes checkbox:
<input type="checkbox" value="condiciones" name="condiciones" id="condiciones"/> He ledo
y acepto las condiciones
<input type="checkbox" value="privacidad" name="privacidad" id="privacidad"/> He ledo la
poltica de privacidad
Utilizando la propiedad checked, es posible comprobar si cada checkbox ha sido seleccionado:
var elemento = document.getElementById("condiciones");
alert(" Elemento: " + elemento.value + "\n Seleccionado: " + elemento.checked);
elemento = document.getElementById("privacidad");
alert(" Elemento: " + elemento.value + "\n Seleccionado: " + elemento.checked);
7.2.1.4. Select
Las listas desplegables (<select>) son los elementos en los que es ms difcil obtener su valor. Si
se dispone de una lista desplegable como la siguiente:
<select id="opciones" name="opciones">
<option value="1">Primer valor</option>
<option value="2">Segundo valor</option>
<option value="3">Tercer valor</option>
<option value="4">Cuarto valor</option>
</select>
En general, lo que se requiere es obtener el valor del atributo value de la opcin (<option>)
seleccionada por el usuario. Obtener este valor no es sencillo, ya que se deben realizar una serie
de pasos. Adems, para obtener el valor seleccionado, deben utilizarse las siguientes
propiedades:
options, es un array creado automticamente por el navegador para cada lista desplegable y que
contiene la referencia a todas las opciones de esa lista. De esta forma, la primera opcin de una
lista se puede obtener mediante document.getElementById("id_de_la_lista").options[0].

selectedIndex, cuando el usuario selecciona una opcin, el navegador actualiza

automticamente el valor de esta propiedad, que guarda el ndice de la opcin seleccionada. El
ndice hace referencia al array options creado automticamente por el navegador para cada lista.
// Obtener la referencia a la lista
var lista = document.getElementById("opciones");
// Obtener el ndice de la opcin que se ha seleccionado
var indiceSeleccionado = lista.selectedIndex;
// Con el ndice y el array "options", obtener la opcin seleccionada
var opcionSeleccionada = lista.options[indiceSeleccionado];
// Obtener el valor y el texto de la opcin seleccionada
var textoSeleccionado = opcionSeleccionada.text;
var valorSeleccionado = opcionSeleccionada.value;
alert("Opcin seleccionada: " + textoSeleccionado + "\n Valor de la opcin: " +
valorSeleccionado);
Como se ha visto, para obtener el valor del atributo value correspondiente a la opcin
seleccionada por el usuario, es necesario realizar varios pasos. No obstante, normalmente se
abrevian todos los pasos necesarios en una nica instruccin:
var lista = document.getElementById("opciones");
// Obtener el valor de la opcin seleccionada
var valorSeleccionado = lista.options[lista.selectedIndex].value;
// Obtener el texto que muestra la opcin seleccionada
var valorSeleccionado = lista.options[lista.selectedIndex].text;
Lo ms importante es no confundir el valor de la propiedad selectedIndex con el valor
correspondiente a la propiedad value de la opcin seleccionada. En el ejemplo anterior, la
primera opcin tiene un value igual a 1. Sin embargo, si se selecciona esta opcin, el valor de
selectedIndex ser 0, ya que es la primera opcin del array options (y los arrays empiezan a
contar los elementos en el nmero 0).
FOCUS
En programacin, cuando un elemento est seleccionado y se puede escribir directamente en el
o se puede modificar alguna de sus propiedades, se dice que tiene el foco del programa.
Si un cuadro de texto de un formulario tiene el foco, el usuario puede escribir directamente en el
sin necesidad de pinchar previamente con el ratn en el interior del cuadro. Igualmente, si una
lista desplegable tiene el foco, el usuario puede seleccionar una opcin directamente subiendo y
bajando con las flechas del teclado.
Al pulsar repetidamente la tecla TABULADOR sobre una pgina web, los diferentes elementos
(enlaces, imgenes, campos de formulario, etc.) van obteniendo el foco del navegador (el
elemento seleccionado cada vez suele mostrar un pequeo borde punteado).
Si en una pgina web el formulario es el elemento ms importante, como por ejemplo en una
pgina de bsqueda o en una pgina con un formulario para registrarse, se considera una buena
prctica de usabilidad el asignar automticamente el foco al primer elemento del formulario
cuando se carga la pgina.
Para asignar el foco a un elemento de XHTML, se utiliza la funcin focus(). El siguiente ejemplo
asigna el foco a un elemento de formulario cuyo atributo id es igual a primero:
document.getElementById("primero").focus();
<form id="formulario" action="#">

<input type="text" id="primero" />

</form>
Ampliando el ejemplo anterior, se puede asignar automticamente el foco del programa al
primer elemento del primer formulario de la pgina, independientemente del id del formulario y
de los elementos:
if(document.forms.length > 0) {
if(document.forms[0].elements.length > 0) {
document.forms[0].elements[0].focus();
}
}
El cdigo anterior comprueba que existe al menos un formulario en la pgina mediante el
tamao del array forms. Si su tamao es mayor que 0, se utiliza este primer formulario.
Empleando la misma tcnica, se comprueba que el formulario tenga al menos un elemento
(if(document.forms[0].elements.length > 0)). En caso afirmativo, se establece el foco del
navegador en el primer elemento del primer formulario
(document.forms[0].elements[0].focus();).
Para que el ejemplo anterior sea completamente correcto, se debe aadir una comprobacin
adicional. El campo de formulario que se selecciona no debera ser de tipo hidden:
if(document.forms.length > 0) {
for(var i=0; i < document.forms[0].elements.length; i++) {
var campo = document.forms[0].elements[i];
if(campo.type != "hidden") {
campo.focus();
break;
}
}
}
RESTRINGIR LOS CARACTERES PERMITIDOS EN UN CUADRO DE TEXTO
En ocasiones, puede ser til bloquear algunos caracteres determinados en un cuadro de texto. Si
por ejemplo un cuadro de texto espera que se introduzca un nmero, puede ser interesante no
permitir al usuario introducir ningn carcter que no sea numrico.
Igualmente, en algunos casos puede ser til impedir que el usuario introduzca nmeros en un
cuadro de texto. Utilizando el evento onkeypress y unas cuantas sentencias JavaScript, el
problema se resuelve fcilmente:
function permite(elEvento, permitidos) {
// Variables que definen los caracteres permitidos
var numeros = "0123456789";
var caracteres = " abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
var numeros_caracteres = numeros + caracteres;
var teclas_especiales = [8, 37, 39, 46];
// 8 = BackSpace, 46 = Supr, 37 = flecha izquierda, 39 = flecha derecha

// Seleccionar los caracteres a partir del parmetro de la funcin

switch(permitidos) {
case 'num':
permitidos = numeros;
break;
case 'car':
permitidos = caracteres;
break;
case 'num_car':
permitidos = numeros_caracteres;
break;

}
// Obtener la tecla pulsada
var evento = elEvento || window.event;
var codigoCaracter = evento.charCode || evento.keyCode;
var caracter = String.fromCharCode(codigoCaracter);
// Comprobar si la tecla pulsada es alguna de las teclas especiales
// (teclas de borrado y flechas horizontales)
var tecla_especial = false;
for(var i in teclas_especiales) {
if(codigoCaracter == teclas_especiales[i]) {
tecla_especial = true;
break;
}
}
// Comprobar si la tecla pulsada se encuentra en los caracteres permitidos
// o si es una tecla especial
return permitidos.indexOf(caracter) != -1 || tecla_especial;
}
// Slo nmeros
<input type="text" id="texto" onkeypress="return permite(event, 'num')" />
// Slo letras
<input type="text" id="texto" onkeypress="return permite(event, 'car')" />
// Slo letras o nmeros
<input type="text" id="texto" onkeypress="return permite(event, 'num_car')" />

1. 3. 8 Validacin de formularios
Como ya se haba mencionado con anterioridad una de sus principales utilidades (y razones por
las cuales se creo) Javascript es el manejo de formularios y la validacin de los datos
introducidos por los usuarios.
La validacin es til sobretodo si el usuario ha cometido algn error al rellenar el formulario, as
se le puede notificar de forma instantnea, sin necesidad de esperar la respuesta del servidor.
Notificar los errores de forma inmediata mediante JavaScript mejora la satisfaccin del usuario
con la aplicacin (lo que tcnicamente se conoce como "mejorar la experiencia de usuario") y
ayuda a reducir la carga de procesamiento en el servidor.
Ahora, la validacin de un formulario consiste en llamar a una funcin de validacin cuando el
usuario pulsa sobre el botn de envo del formulario. En esta funcin, se comprueban si los
valores que ha introducido el usuario cumplen las restricciones impuestas por la aplicacin.
A continuacin se muestra el cdigo JavaScript bsico necesario para incorporar la validacin a
un formulario:
<form action="" method="" id="" name="" onsubmit="return validacion()">
...
</form>
Y el esquema de la funcin validacion() es el siguiente:
function validacion() {
if (condicion que debe cumplir el primer campo del formulario) {
// Si no se cumple la condicion...

alert('[ERROR] El campo debe tener un valor de...');

return false;
}
else if (condicion que debe cumplir el segundo campo del formulario) {
// Si no se cumple la condicion...
alert('[ERROR] El campo debe tener un valor de...');
return false;
}
...
else if (condicion que debe cumplir el ltimo campo del formulario) {
// Si no se cumple la condicion...
alert('[ERROR] El campo debe tener un valor de...');
return false;
}
// Si el script ha llegado a este punto, todas las condiciones
// se han cumplido, por lo que se devuelve el valor true
return true;
}
El funcionamiento de esta tcnica de validacin se basa en el comportamiento del evento
onsubmit de JavaScript. Al igual que otros eventos como onclick y onkeypress, el evento
onsubmit vara su comportamiento en funcin del valor que se devuelve.
As, si el evento onsubmit devuelve el valor true, el formulario se enva como lo hara
normalmente. Sin embargo, si el evento onsubmit devuelve el valor false, el formulario no se
enva. La clave de esta tcnica consiste en comprobar todos y cada uno de los elementos del
formulario. En cuando se encuentra un elemento incorrecto, se devuelve el valor false. Si no se
encuentra ningn error, se devuelve el valor true.
Por lo tanto, en primer lugar se define el evento onsubmit del formulario como:
onsubmit="return validacion()"
Como el cdigo JavaScript devuelve el valor resultante de la funcin validacion(), el formulario
solamente se enviar al servidor si esa funcin devuelve true. En el caso de que la funcin
validacion() devuelva false, el formulario permanecer sin enviarse.
Dentro de la funcin validacion() se comprueban todas las condiciones impuestas por la
aplicacin. Cuando no se cumple una condicin, se devuelve false y por tanto el formulario no se
enva. Si se llega al final de la funcin, todas las condiciones se han cumplido correctamente, por
lo que se devuelve true y el formulario se enva.

1. 3. 8. 1 Validar campo de texto obligatorio

Se trata de forzar al usuario a introducir un valor en un cuadro de texto o textarea en los que sea
obligatorio. La condicin en JavaScript se puede indicar como:
valor = document.getElementById("campo").value;
if( valor == null || valor.length == 0 || /^\s+$/.test(valor) ) {
return false;
}
Para que se de por completado un campo de texto obligatorio, se comprueba que el valor
introducido sea vlido, que el nmero de caracteres introducido sea mayor que cero y que no se
hayan introducido slo espacios en blanco.
La palabra reservada null es un valor especial que se utiliza para indicar "ningn valor". Si el
valor de una variable es null, la variable no contiene ningn valor de tipo objeto, array, numrico,
cadena de texto o booleano.

La segunda parte de la condicin obliga a que el texto introducido tenga una longitud superior a
cero caracteres, esto es, que no sea un texto vaco.
Por ltimo, la tercera parte de la condicin (/^\s+$/.test(valor)) obliga a que el valor introducido
por el usuario no slo est formado por espacios en blanco. Esta comprobacin se basa en el uso
de "expresiones regulares", un recurso habitual en cualquier lenguaje de programacin pero que
por su gran complejidad no se van a estudiar. Por lo tanto, slo es necesario copiar literalmente
esta condicin, poniendo especial cuidado en no modificar ningn carcter de la expresin.

1. 3. 8. 2 Validar campo de texto con valores numricos

Se trata de obligar al usuario a introducir un valor numrico en un cuadro de texto. La condicin
JavaScript consiste en:
valor = document.getElementById("campo").value;
if( isNaN(valor) ) {
return false;
}
Si el contenido de la variable valor no es un nmero vlido, no se cumple la condicin. La ventaja
de utilizar la funcin interna isNaN() es que simplifica las comprobaciones, ya que JavaScript se
encarga de tener en cuenta los decimales, signos, etc.
A continuacin se muestran algunos resultados de la funcin isNaN():
isNaN(3);
// false
isNaN("3");
// false
isNaN(3.3545);
// false
isNaN(32323.345); // false
isNaN(+23.2);
// false
isNaN("-23.2"); // false
isNaN("23a");
// true
isNaN("23.43.54"); // true

1. 3. 8. 3 Validar opcin de una lista

Se trata de obligar al usuario a seleccionar un elemento de una lista desplegable. El siguiente
cdigo JavaScript permite conseguirlo:
indice = document.getElementById("opciones").selectedIndex;
if( indice == null || indice == 0 ) {
return false;
}
<select id="opciones" name="opciones">
<option value="">- Selecciona un valor -</option>
<option value="1">Primer valor</option>
<option value="2">Segundo valor</option>
<option value="3">Tercer valor</option>
</select>
A partir de la propiedad selectedIndex, se comprueba si el ndice de la opcin seleccionada es
vlido y adems es distinto de cero. La primera opcin de la lista (- Selecciona un valor ) no es
vlida, por lo que no se permite el valor 0 para esta propiedad selectedIndex.

1. 3. 8. 4 Validar email
Se trata de obligar al usuario a introducir una direccin de email con un formato vlido. Por
tanto, lo que se comprueba es que la direccin parezca vlida, ya que no se comprueba si se
trata de una cuenta de correo electrnico real y operativa. La condicin JavaScript consiste en:

valor = document.getElementById("campo").value;
if( !(/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)/.test(valor)) ) {
return false;
}
La comprobacin se realiza nuevamente mediante las expresiones regulares, ya que las
direcciones de correo electrnico vlidas pueden ser muy diferentes. Por otra parte, como el
estndar que define el formato de las direcciones de correo electrnico es muy complejo, la
expresin regular anterior es una simplificacin. Aunque esta regla valida la mayora de
direcciones de correo electrnico utilizadas por los usuarios, no soporta todos los diferentes
formatos vlidos de email.

1. 3. 8. 5 Validar fecha
Las fechas suelen ser los campos de formulario ms complicados de validar por la multitud de
formas diferentes en las que se pueden introducir. El siguiente cdigo asume que de alguna
forma se ha obtenido el ao, el mes y el da introducidos por el usuario:
var ano = document.getElementById("ano").value;
var mes = document.getElementById("mes").value;
var dia = document.getElementById("dia").value;
valor = new Date(ano, mes, dia);
if( !isNaN(valor) ) {
return false;
}
La funcin Date(ano, mes, dia) es una funcin interna de JavaScript que permite construir fechas
a partir del ao, el mes y el da de la fecha. Es muy importante tener en cuenta que el nmero
de mes se indica de 0 a 11, siendo 0 el mes de Enero y 11 el mes de Diciembre. Los das del mes
siguen una numeracin diferente, ya que el mnimo permitido es 1 y el mximo 31.
La validacin consiste en intentar construir una fecha con los datos proporcionados por el
usuario. Si los datos del usuario no son correctos, la fecha no se puede construir correctamente y
por tanto la validacin del formulario no ser correcta.

1. 3. 8. 6 Validar DNI
Se trata de comprobar que el nmero proporcionado por el usuario se corresponde con un
nmero vlido de Documento Nacional de Identidad o DNI. Aunque para cada pas o regin los
requisitos del documento de identidad de las personas pueden variar, a continuacin se muestra
un ejemplo genrico fcilmente adaptable. La validacin no slo debe comprobar que el nmero
est formado por ocho cifras y una letra, sino que tambin es necesario comprobar que la letra
indicada es correcta para el nmero introducido:
valor = document.getElementById("campo").value;
var letras = ['T', 'R', 'W', 'A', 'G', 'M', 'Y', 'F', 'P', 'D', 'X', 'B', 'N', 'J', 'Z', 'S', 'Q', 'V', 'H', 'L', 'C', 'K',
'E', 'T'];
if( !(/^\d{8}[A-Z]$/.test(valor)) ) {
return false;
}
if(valor.charAt(8) != letras[(valor.substring(0, 8))%23]) {
return false;
}
La primera comprobacin asegura que el formato del nmero introducido es el correcto, es decir,
que est formado por 8 nmeros seguidos y una letra. Si la letra est al principio de los nmeros,

la comprobacin sera /^[A-Z]\d{8}$/. Si en vez de ocho nmeros y una letra, se requieren diez
nmeros y dos letras, la comprobacin sera /^\d{10}[A-Z]{2}$/ y as sucesivamente.
La segunda comprobacin aplica el algoritmo de clculo de la letra del DNI y la compara con la
letra proporcionada por el usuario. El algoritmo de cada documento de identificacin es
diferente, por lo que esta parte de la validacin se debe adaptar convenientemente.

1. 3. 8. 7 Validar campo de texto con valores numricos

Los nmeros de telfono pueden ser indicados de formas muy diferentes: con prefijo nacional,
con prefijo internacional, agrupado por pares, separando los nmeros con guiones, etc.
El siguiente script considera que un nmero de telfono est formado por nueve dgitos
consecutivos y sin espacios ni guiones entre las cifras:
valor = document.getElementById("campo").value;
if( !(/^\d{9}$/.test(valor)) ) {
return false;
}

1. 3. 8. 8 Validar checkbox
Si un elemento de tipo checkbox se debe seleccionar de forma obligatoria, JavaScript permite
comprobarlo de forma muy sencilla:
elemento = document.getElementById("campo");
if( !elemento.checked ) {
return false;
}
Si se trata de comprobar que todos los checkbox del formulario han sido seleccionados, es ms
fcil utilizar un bucle:
formulario = document.getElementById("formulario");
for(var i=0; i<formulario.elements.length; i++) {
var elemento = formulario.elements[i];
if(elemento.type == "checkbox") {
if(!elemento.checked) {
return false;
}
}
}

1. 3. 8. 9 Validar radiobotn
Aunque se trata de un caso similar al de los checkbox, la validacin de los radiobutton presenta
una diferencia importante: en general, la comprobacin que se realiza es que el usuario haya
seleccionado algn radiobutton de los que forman un determinado grupo. Mediante JavaScript, es
sencillo determinar si se ha seleccionado algn radiobutton de un grupo:
opciones = document.getElementsByName("opciones");
var seleccionado = false;
for(var i=0; i<opciones.length; i++) {
if(opciones[i].checked) {
seleccionado = true;
break;
}
}

if(!seleccionado) {
return false;
}
El anterior ejemplo recorre todos los radiobutton que forman un grupo y comprueba elemento
por elemento si ha sido seleccionado. Cuando se encuentra el primer radiobutton seleccionado,
se sale del bucle y se indica que al menos uno ha sido seleccionado.

1. 3. 9 Intervalos de tiempo, calculadora, calendario de fechas, etc.

1. 3. 9. 1 Intervalos de tiempo
Para crear y mostrar un reloj con JavaScript, se debe utilizar el objeto interno Date() para crear
fechas/horas y las utilidades que permiten definir contadores, para actualizar el reloj cada
segundo.
El objeto Date() es una utilidad que proporciona JavaScript para crear fechas y horas. Una vez
creado un objeto de tipo fecha, es posible manipularlo para obtener informacin o realizar
clculos con las fechas. Para obtener la fecha y hora actuales, solamente es necesario crear un
objeto Date() sin pasar ningn parmetro:
var fechaHora = new Date();
Utilizando el cdigo anterior, se puede construir un reloj muy bsico que no actualiza su
contenido:
var fechaHora = new Date();
document.getElementById("reloj").innerHTML = fechaHora;
<div id="reloj" />
Cuando se carga la pgina, el ejemplo anterior mostrara un texto parecido al siguiente en el
<div> reservado para el reloj:
Mon May 04 2009 13:36:10 GMT+0200 (Hora de verano romance)
Este primer reloj construido presenta muchas diferencias respecto al reloj que se quiere
construir. En primer lugar, muestra ms informacin de la necesaria. Adems, su valor no se
actualiza cada segundo, por lo que no es un reloj muy prctico.
El objeto Date() proporciona unas funciones muy tiles para obtener informacin sobre la fecha y
la hora. Concretamente, existen funciones que devuelven la hora, los minutos y los segundos:
var
var
var
var

fechaHora = new Date();

horas = fechaHora.getHours();
minutos = fechaHora.getMinutes();
segundos = fechaHora.getSeconds();

document.getElementById("reloj").innerHTML = horas+':'+minutos+':'+segundos;
<div id="reloj" />
Utilizando las funciones getHours(), getMinutes() y getSeconds() del objeto Date, el reloj
solamente muestra la informacin de la hora. El resultado del ejemplo anterior sera un reloj
como el siguiente:
20:9:21
Si la hora, minuto o segundo son menores que 10, JavaScript no aade el 0 por delante, por lo
que el resultado no es del todo satisfactorio. El siguiente cdigo soluciona este problema
aadiendo un 0 cuando sea necesario:
var fechaHora = new Date();
var horas = fechaHora.getHours();
var minutos = fechaHora.getMinutes();

var segundos = fechaHora.getSeconds();

if(horas < 10) { horas = '0' + horas; }
if(minutos < 10) { minutos = '0' + minutos; }
if(segundos < 10) { segundos = '0' + segundos; }
document.getElementById("reloj").innerHTML = horas+':'+minutos+':'+segundos;
<div id="reloj" />
Ahora el reloj muestra correctamente la hora:
20:14:03
Si se quiere mostrar el reloj con un formato de 12 horas en vez de 24, se puede utilizar el
siguiente cdigo:
var
var
var
var

fechaHora = new Date();

horas = fechaHora.getHours();
minutos = fechaHora.getMinutes();
segundos = fechaHora.getSeconds();

var sufijo = ' am';

if(horas > 12) {
horas = horas - 12;
sufijo = ' pm';
}
if(horas < 10) { horas = '0' + horas; }
if(minutos < 10) { minutos = '0' + minutos; }
if(segundos < 10) { segundos = '0' + segundos; }
document.getElementById("reloj").innerHTML = horas+':'+minutos+':'+segundos+sufijo;
<div id="reloj" />
Utilizando el cdigo anterior, el reloj ya no muestra la hora como 20:14:03, sino que la muestra
en formato de 12 horas y con el sufijo adecuado:
08:14:03 pm
Para completar el reloj, slo falta que se actualice su valor cada segundo. Para conseguirlo, se
deben utilizar unas funciones especiales de JavaScript que permiten ejecutar determinadas
instrucciones cuando ha transcurrido un determinado espacio de tiempo.
La funcin setTimeout() permite ejecutar una funcin una vez que haya transcurrido un periodo
de tiempo indicado. La definicin de la funcin es:
setTimeout(nombreFuncion, milisegundos);
La funcin que se va a ejecutar se debe indicar mediante su nombre sin parntesis y el tiempo
que debe transcurrir hasta que se ejecute se indica en milisegundos. De esta forma, si se crea
una funcin encargada de mostrar la hora del reloj y se denomina muestraReloj(), se puede
indicar que se ejecute dentro de 1 segundo mediante el siguiente cdigo:
function muestraReloj() {
var fechaHora = new Date();
var horas = fechaHora.getHours();
var minutos = fechaHora.getMinutes();
var segundos = fechaHora.getSeconds();
if(horas < 10) { horas = '0' + horas; }
if(minutos < 10) { minutos = '0' + minutos; }
if(segundos < 10) { segundos = '0' + segundos; }

document.getElementById("reloj").innerHTML = horas+':'+minutos+':'+segundos;
}
setTimeout(muestraReloj, 1000);
<div id="reloj" />
No obstante, el cdigo anterior simplemente muestra el contenido del reloj 1 segundo despus
de que se cargue la pgina, por lo que no es muy til. Para ejecutar una funcin de forma
peridica, se utiliza una funcin de JavaScript muy similar a setTimeout() que se denomina
setInterval(). Su definicin es:
setInterval(nombreFuncion, milisegundos);
La definicin de esta funcin es idntica a la funcin setTimeout(), salvo que en este caso, la
funcin programada se ejecuta infinitas veces de forma peridica con un lapso de tiempo entre
ejecuciones de tantos milisegundos como se hayan establecido.
As, para construir el reloj completo, se establece una ejecucin peridica de la funcin
muestraReloj() cada segundo:
function muestraReloj() {
var fechaHora = new Date();
var horas = fechaHora.getHours();
var minutos = fechaHora.getMinutes();
var segundos = fechaHora.getSeconds();
if(horas < 10) { horas = '0' + horas; }
if(minutos < 10) { minutos = '0' + minutos; }
if(segundos < 10) { segundos = '0' + segundos; }
document.getElementById("reloj").innerHTML = horas+':'+minutos+':'+segundos;
}
window.onload = function() {
setInterval(muestraReloj, 1000);
}
<div id="reloj" />
Empleando el objeto Date y sus funciones, es posible construir "cuentras atrs", es decir, relojes
que muestran el tiempo que falta hasta que se produzca un evento. Adems, las funciones
setTimeout() y setInterval() pueden resultar muy tiles en otras tcnicas de programacin.

1. 3. 9. 2 Calendario
De entre todos los calendarios disponibles, uno de los ms completos es el desarrollado por la
empresa DynArch, que se puede acceder desde su pgina web oficial:
http://www.dynarch.com/projects/calendar/ y que se puede descargar gratuitamente desde
http://sourceforge.net/projects/jscalendar/ El archivo descargado incluye todos los scripts
necesarios, su documentacin, ejemplos de uso, diferentes estilos CSS para el calendario, etc.
A continuacin se indican los pasos necesarios para incluir un calendario bsico en cualquier
pgina web:
1) Enlazar los archivos JavaScript y CSS requeridos:
Se descomprime el archivo descargado, se guardan los archivos JavaScript y CSS en el sitio
adecuado (en este ejemplo se supone que los archivos JavaScript se guardan en el directorio js/ y

los archivos CSS en el directorio css/) y se enlazan directamente desde la cabecera de la pgina
HTML.
<head>
...
<style type="text/css">@import url("css/calendar-estilo.css");</style>
<script type="text/javascript" src="js/calendar.js" />
<script type="text/javascript" src="js/calendar-es.js" />
<script type="text/javascript" src="js/calendar-setup.js" />
...
</head>
El calendario incluye traducciones a ms de 40 idiomas, entre los que se encuentra el espaol.
Para mostrar el calendario en un determinado idioma, tan solo es necesario enlazar el archivo del
idioma correspondiente. Las traducciones se encuentran en el directorio lang y su formato es
calendar-XX.js, donde XX es el cdigo del idioma.
2) Aadir el cdigo XHTML necesario para el elemento que va a mostrar el calendario:
<p>Introduce la fecha pulsando sobre la imagen del calendario</p>
<input type="text" name="date" id="fecha" readonly="readonly" />
<img src="calendario.png" id="selector" />
En este caso, el calendario est formado por dos elementos:
Un cuadro de texto llamado fecha y que almacena el valor introducido por el usuario. Como se le
ha asignado un atributo readonly="readonly", el usuario no puede modificar su valor.
Una pequea imagen o icono que se utiliza para activar el calendario. Cuando el usuario pincha
con el ratn sobre la imagen, se muestra el calendario de JavaScript.
3) Configurar el calendario:
<script type="text/javascript">
window.onload = function() {
Calendar.setup({
inputField: "fecha",
ifFormat: "%d / %m / %Y",
button:
"selector"
});
}
</script>
Una vez enlazados los archivos del calendario y preparado el cdigo XHTML, es necesario
inicializar y configurar el calendario. La configuracin del calendario consiste en establecer el
valor de alguna de sus propiedades. Las propiedades bsicas imprescindibles son:
inputField: se trata del atributo id del elemento en el que se mostrar la fecha seleccionada, en
este ejemplo sera fecha.
ifFormat: formato en el que se mostrar la fecha una vez seleccionada (en este caso se ha
optado por el formato dd / mm / aaaa).
button: atributo id del elemento que se pulsa (botn, imagen, enlace) para mostrar el calendario
de seleccin de fecha. En este ejemplo, el id de la imagen es selector.

1. 3. 10 Depuracin de cdigo
La utilizacin de una herramienta de depuracin es esencial para trabajar con JavaScript. Firefox
provee un depurador a travs de la extensin Firebug; mientras que Safari y Chrome ya traen
uno integrado.
Cada depurador ofrece:
Un editor multi-linea para experimentar con JavaScript;
Un inspector para revisar el cdigo generado en la pgina;
Un visualizador de red o recursos, para examinar las peticiones que se realizan.

Cuando usted este escribiendo cdigo JavaScript, podr utilizar alguno de los siguientes mtodos
para enviar mensajes a la consola del depurador:
console.log() para enviar y registrar mensajes generales.
console.dir() para registrar un objeto y visualizar sus propiedades.
console.warn() para registrar mensajes de alerta.
console.error() para registrar mensajes de error.
Existen otros mtodos para utilizar desde la consola, pero estos pueden variar segn el
navegador. La consola adems provee la posibilidad de establecer puntos de interrupcin y
observar expresiones en el cdigo con el fin de facilitar su depuracin.

1.4 JQuery
1. 4. 1 Qu es JQuery?
jQuery es una biblioteca JavaScript rpida, pequea y rica en funciones. Hace las cosas como
HTML recorrido y manipulacin de documentos, manejo de eventos, animacin, y Ajax mucho
ms simple con una API fcil de usar que funciona a travs de una multitud de navegadores. 27
jQuery es una biblioteca de JavaScript, es decir un conjunto de funciones que ya fueron
desarrolladas y probadas, estando listas para utilizarlas de una manera simplificada, permite
agregar efectos y funcionalidades complejas a nuestra aplicacin web, como galeras de fotos
dinmicas y visuales para los usuarios, validacin de formularios, calendarios, programacin
asncrona, etc.
La principal caracterstica de jQuery es la sencillez combinada con el gran potencial que ofrece.
Unas pocas lneas de cdigo haciendo uso de la librera puede modificar por completo el
funcionamiento de una pgina. Adems, jQuery aprovecha la sintxis utilizada en los selectores
de CSS, lo que hace que los desarrolladores y diseadores que estn familiarizados con stos
puedan reutilizar stos conocimientos.
jQuery es software libre y de cdigo abierto (Licencia MIT y la Licencia Pblica General de GNU
v2) lo cual hace que sea una librera que podremos utilizar tanto en proyectos libres como
privativos.
Con jQuery dispondremos de una amplia variedad de funcionalidades basadas en JavaScript que
de otra manera requeriran de mucho ms cdigo, es decir, con las funciones propias de esta
biblioteca se logran grandes resultados en menos tiempo y espacio.

1. 4. 2 Breve historia de JQuery

En Febrero de 2006, John Resig present la primera versin de jQuery. Esta librera sorprendi
gratamente a la comunidad de desarrolladores web puesto que simplificaba en gran medida la
programacin de cdigo JavaScript para interactuar, tanto con los elementos del DOM como para
gestionar los diferentes eventos que se producen en la visita de una pgina web. Desde su
publicacin, la librera ha evolucionado solucionando bugs, optimizando su cdigo y ampliando
las funcionalidades ofrecidas.

1. 4. 3 Sintaxis
Comprensin de declaraciones, nombres de variables, espacios en blanco, y otras sintaxis
bsicas de JavaScript.
Declaracin simple de variable

27 Consultada 9 de mayo 2015 16:02 hrs http://api.jquery.com/

var foo = 'hello world';

Los espacios en blanco no tienen valor fuera de las comillas
var foo =

'hello world';

Los parntesis indican prioridad

2 * 3 + 5; // es igual a 11; la multiplicacin ocurre primero
2 * (3 + 5); // es igual a 16; por lo parntesis, la suma ocurre primero
La tabulacin mejora la lectura del cdigo, pero no posee ningn significado especial
var foo = function() {
console.log('hello');
};

1. 4. 4 Formas de incluir JQuery en mi pgina web

Para poder incluir jQuery en nuestro sitio, guardaremos una copia de la librera (el archivo .js)
dentro de la carpeta donde vayamos a guardar los archivos html sobre los que vayamos a
operar.
Es importante mantener una estructura de contenidos bien organizada. Distribuir los diferentes
tipos de archivos (css, js y imgenes) en subcarpetas, es una prctica, adems de habitual, muy
recomendable.
Escribimos el siguiente cdigo en nuestra pgina HTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin ttulo</title>
</head>
<body>
</body>
</html>
Para incluir jQuery en esta pgina, escribiremos el cdigo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin ttulo</title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
</head>
<body>
</body>
</html>
Con ello, la pgina incluir el archivo "jquery-1.8.2.min.js" disponible dentro de la carpeta "js".
Hecho esto, ya dispondremos de la base para todas las pginas que vayamos a crear con jQuery.
Otra alternativa es incluir la librera por medio de un enlace a una copia de la misma que se
encuentre disponible en un servidor externo. Este sistema de funcionamiento es posible gracias

a los CDN. Uno de los CDN ms utilizados es el ofrecido por Google, que entre otras ventajas,
aporta la seguridad de que el recurso se encontrar siempre disponible.
Se conoce como CDN (Content Delivery Network) a una red de ordenadores cuya funcionalidad
es servir contenidos de forma escalable y rpida. Estos servidores pueden encontrarse
distribuidos geogrficamente, siendo el servidor ms prximo al cliente el encargado de dar
respuesta a las peticiones de un recurso.
Para incluir la librera desde el alojamiento de Google deberemos indicar en la ruta (atributo src)
del script la URL correspondiente a la librera, de la siguiente forma:
http://ajax.googleapis.com/ajax/libs/jquery/1.8.2 jquery.min.js
As, una pgina bsica que haga uso de la librera desde el repositorio de Google tendr este
aspecto:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin ttulo</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
</body>
</html>

1. 4. 5 Acceso a los elementos HTML

Existen tres formas de acceder a una etiqueta, mediante su nombre, su id o su class.
La forma de acceder a los elementos con jquery es similar a css. Para seleccionar un id
utilizamos numeral + el nombre del id:
$("#parrafo")
Tanto como los nombre como las clases funciona igual:
Con los nombres de etiqueta:
$("p")
Y con las clases punto + nombre de la class:
$(".parrafo")
El nombre para levanta los elementos y el punto para hacerlo por class.
Por lo tanto siguiendo nuestro anterior ejemplo con la etiqueta prrafo:
<p id="parrafo" class="parrafo"> Lorem ipsum ad his scripta blandit partiendo</p>
Ejemplo muy bsico. Hay una lista de categoras con un checkbox cada una, y uno ms para
seleccionar y quitar seleccin a todos:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#seleccionar_todo").change(function(){
//Guarda el estado checked del elemento.
var checkeado = $(this).is(':checked');
$(".producto").attr('checked', checkeado);
});
});
</script>

</head>
<body>
<form action="" method="post">
<fieldset>
<legend> Seleccione sus productos </legend>
<ul id="lista_productos">
<li> <input type="checkbox" class="producto" value="1" /> XBox 360 </li>
<li> <input type="checkbox" class="producto" value="2" /> Wii </li>
<li> <input type="checkbox" class="producto" value="3" /> Ps3 </li>
<li> <input type="checkbox" class="producto" value="4" /> Ps Vita </li>
<li> <input type="checkbox" class="producto" value="5" /> Atari </li>
</ul>
<input type="checkbox" id="seleccionar_todo" /> Seleccionar todo
</fieldset>
</form>
</body>
</html>
Como vemos en Jquery la forma de seleccionar los elementos es igual a css, lo que lo hace ms
fcil y rpido.
Cambio de propiedades a los elementos HTML
Una de las principales funciones de Javascript es la de manipular el contenido de la pgina.
Cuando el desarrollador crea su pgina utiliza cdigo HTML para definir los elementos y CSS para
darles el aspecto visual, JavaScript en el encargado de modificar todo esto dinmicamente.
Existe un mtodo llamado .css() que nos permite recuperar y modificar los estilos, como por
ejemplo el color de la letra. Supongamos tenemos un elemento como ste:
<p id="parrafo"> Lorem ipsum ad his scripta blandit partiendo, eum fastidi accumsan euripidis
in, eum liber hendrerit an. </p>
Podemos recuperar, por ejemplo, el valor de la propiedad de css text-decoration, de esta forma:
var text_decoration = $("#parrafo").css('text-decoration');
alert(text_decoration);
Como la etiqueta no tiene definido ningn valor para la propiedad text-decoration entonces
debera devolvernos none.
Adems as como podemos recuperar el valor de sus propiedades tambin podramos
modificarlas:
$("#parrafo").css('text-decoration', 'underline');
Como vemos, si el mtodo .css() recibe un parmetro nos devolver el valor del mismo, pero si
recibe dos modifcar el valor del primer parmetro (propiedad) con el segundo parmetro (valor)
Adems al igual que el mtodo .attr() si queremos modificar de a varias propiedades podemos
usar un json como parmetro.
Con Json:
$("#parrafo").css({
'text-decoration': 'underline',
'color': '#f00',
'font-weight': 'bold'
});
Sin Json:
$("#parrafo").css('text-decoration', 'underline');
$("#parrafo").css('color', '#f00');
$("#parrafo").css('font-weight', 'bold');
De ambas maneras es vlida

1. 4. 6 Cambio de propiedades a los elementos HTML

Para cambiar el HTML interno o algn atributo del mismo, jQuery ofrece mtodos simples,
funcionales en todos los navegadores modernos. Incluso es posible obtener informacin sobre los
elementos utilizando los mismos mtodos pero en su forma de mtodo obtenedor.
$.fn.html Obtiene o establece el contenido HTML de un elemento.
$.fn.text Obtiene o establece el contenido en texto del elemento; en caso se pasarle como
argumento cdigo HTML, este es despojado.
$.fn.attr Obtiene o establece el valor de un determinado atributo.
$.fn.width Obtiene o establece el ancho en pixeles del primer elemento de la seleccin como un
entero.
$.fn.height Obtiene o establece el alto en pixeles del primer elemento de la seleccin como un
entero.
$.fn.position Obtiene un objeto con informacin sobre la posicin del primer elemento de la
seleccin, relativo al primer elemento padre posicionado. Este mtodo es solo obtenedor.
$.fn.val Obtiene o establece el valor (value) en elementos de formularios.
CAMBIAR EL HTML DE UN ELEMENTO
$('#myDiv p:first')
.html('Nuevo <strong>primer</strong> prrafo');
MOVER, COPIAR Y ELIMINAR ELEMENTOS
Existen varias maneras para mover elementos a travs del DOM; las cuales se pueden separar
en dos enfoques:
Querer colocar el/los elementos seleccionados de forma relativa a otro elemento. Querer colocar
un elemento relativo a el/los elementos seleccionados.
Por ejemplo, jQuery provee los mtodos $.fn.insertAfter y $.fn.after. El mtodo $.fn.insertAfter
coloca a el/los elementos seleccionados despus del elemento que se haya pasado como
argumento; mientras que el mtodo $.fn.after coloca al elemento pasado como argumento
despus del elemento seleccionado. Otros mtodos tambin siguen este patrn: $.fn.insertBefore
y $.fn.before; $.fn.appendTo y $.fn.append; y $.fn.prependTo y $.fn.prepend.
La utilizacin de uno u otro mtodo depender de los elementos que tenga seleccionados y el
tipo de referencia que se quiera guardar con respecto al elemento que se esta moviendo.
MOVER ELEMENTOS UTILIZANDO DIFERENTES ENFOQUES
// hacer que el primer item de la lista sea el ltimo
var $li = $('#myList li:first').appendTo('#myList');
// otro enfoque para el mismo problema
$('#myList').append($('#myList li:first'));
// debe tener en cuenta que no hay forma de acceder a la
// lista de items que se ha movido, ya que devuelve la lista en s
Clonar elementos
Cuando se utiliza un mtodo como $.fn.appendTo, lo que se est haciendo es mover al elemento;
pero a veces en lugar de eso, se necesita mover un duplicado del mismo elemento. En este caso,
es posible utilizar el mtodo $.fn.clone.
OBTENER UNA COPIA DEL ELEMENTO

// copiar el primer elemento de la lista y moverlo al final de la misma

$('#myList li:first').clone().appendTo('#myList');
NOTA Si se necesita copiar informacin y eventos relacionados al elemento, se debe pasar true
como argumento de $.fn.clone.
ELIMINAR ELEMENTOS
Existen dos formas de eliminar elementos de una pgina: Utilizando $.fn.remove o $.fn.detach.
Cuando desee eliminar de forma permanente al elemento, utilize el mtodo $.fn.remove. Por otro
lado, el mtodo $.fn.detach tambin elimina el elemento, pero mantiene la informacin y
eventos asociados al mismo, siendo til en el caso que necesite reinsertar el elemento en el
documento.
CREAR NUEVOS ELEMENTOS
jQuery provee una forma fcil y elegante para crear nuevos elementos a travs del mismo
mtodo $() que se utiliza para realizar selecciones.
$('<p>Un nuevo prrafo</p>');
$('<li class="new">nuevo item de la lista</li>');
Crear un nuevo elemento con atributos utilizando un objeto
$('<a/>', {
html : 'Un <strong>nuevo</strong> enlace',
'class' : 'new',
href : 'foo.html'
});
Note que en el objeto que se pasa como argumento, la propiedad class est entre comillas,
mientras que la propiedad href y html no lo estn. Por lo general, los nombres de propiedades no
deben estar entre comillas, excepto en el caso que se utilice como nombre una palabra
reservada (como es el caso de class).
Cuando se crea un elemento, ste no es aadido inmediatamente a la pgina, sino que se debe
hacerlo en conjunto con un mtodo.
CREAR UN NUEVO ELEMENTO EN LA PGINA
var $myNewElement = $('<p>Nuevo elemento</p>');
$myNewElement.appendTo('#content');
// eliminar al elemento <p> existente en #content
$myNewElement.insertAfter('ul:last');
// clonar al elemento <p> para tener las dos versiones
$('ul').last().after($myNewElement.clone());
Estrictamente hablando, no es necesario guardar al elemento creado en una variable es
posible llamar al mtodo para aadir el elemento directamente despus de $(). Sin embargo, la
mayora de las veces se desear hacer referencia al elemento aadido, por lo cual, si se guarda
en una variable no es necesario seleccionarlo despus.
CREAR Y AADIR AL MISMO TIEMPO UN ELEMENTO A LA PGINA
$('ul').append('<li>item de la lista</li>');
for (var i=0; i<100; i++) {
myItems.push('<li>item ' + i + '</li>');
}
$myList.append(myItems.join(''));
MANIPULACIN DE ATRIBUTOS

Las capacidades para la manipulacin de atributos que ofrece la biblioteca son extensos. La
realizacin de cambios bsicos son simples, sin embargo el mtodo $.fn.attr permite
manipulaciones ms complejas.
MANIPULAR UN SIMPLE ATRIBUTO
$('#myDiv a:first').attr('href', 'newDestination.html');
Manipular mltiples atributos
$('#myDiv a:first').attr({
href : 'newDestination.html',
rel : 'super-special'
});
Utilizar una funcin para determinar el valor del nuevo atributo
$('#myDiv a:first').attr({
rel : 'super-special',
href : function(idx, href) {
return '/new/' + href;
}
});
$('#myDiv a:first').attr('href', function(idx, href) {
return '/new/' + href;
});

1. 4. 7 Programacin de eventos
Los eventos son uno de los elementos ms importantes en el desarrollo de aplicaciones web. Son
la base para crear la interaccin con el usuario, algo tan importante en las pginas que usan
jQuery.
El evento se define sobre todos los elementos de un objeto jQuery. En este ejemplo se define
sobre el objeto
jQuery obtenido al invocar el selector ".mienlace"), que devolvera todos los elementos que
tienen el atributo class
como "mienlace". Por tanto definir un evento sobre un nmero variable de elementos de la
pgina que
concuerden con ese selector.
El tipo de evento se define a partir de una funcin click() o similares. Existen diferentes tipos de
funciones que
implementan cada uno de los eventos normales, como dblclick(), focus(), keydown(), etc.
Como parmetro en la funcin click() o similares tenemos que enviar una funcin, con el cdigo
que pretendemos
ejecutar cuando se produzca el evento en cuestin.
La funcin que enviamos por parmetro con el cdigo del evento, en este caso la funcin a
ejecutar al hacer clic,
tiene a su vez otro parmetro que es el propio evento que estamos manejando. En el cdigo
anterior tenemos la
variable "mievento", que es el evento que se est ejecutando y a travs de esa variable tenemos
acceso a varias
propiedades y mtodos para personalizar aun ms nuestros eventos.
Existen diversos tipos de propiedades y mtodos sobre el evento que recibo por parmetro.

Aqu es importante resaltar que this contendra la instancia del elemento que disparo el evento,
por ejemplos si a los enlaces(a) le agregamos el evento click, this contendra la instancia del
enlace especifo sobre del cual hallamos hecho click, analice el siguiente codigo.
jQuery define varios eventos para agregar un manejador de dicho evento basta con agregar una
funcin en la llamada de dicho evento esta funcin puede recibir un argumento event el cual es
util para obtener informacin de dicho evento para cambiar el comportamiento del mismo.

1. 4. 7. 1 Evento click
El evento click es disparado cuando con el mouse le hacemos le damos click sobre un elemento
seleccionado, la forma que tiene este evento es la siguiente:
$("a.button").click(
function(event) {
console.log('Manejador para el evento click del enlace(a) con clase(.) button');
event.preventDefault();
});

1. 4. 7. 2 Evento hover
El evento hand over o hover es disparado cuando pasamos el cursor por encima de algn
elemento, la sintaxis basica es la siguiente:
$("a").hover(function() {
console.log('Ejecucin del manejador para el evento hover del enlace');
});

1. 4. 7. 2 Evento del teclado

jQuery define un conjunto de eventos para el teclado los eventos que definen son los siguientes.
focusout Vincula a los inputs sobre el evento out Focus.
keypress El evento es disparado cuando una tecla es presionada.
keyup El evento es disparado cuando una tecla deja de estar presionada.
keydown El evento es disparado cuando se encuentra una tecla presionada.
Ejemplo:
$('#target').keyup(function(event) {
var msg = 'El evento keyup() fue llamado para la tecla ' + event.which;
console.log(msg);
}).keydown(function(event) {
if (event.which == 13) {
event.preventDefault();
}
});

1. 4. 8 Uso de Expresiones Regulares (RegExp)

Algunas expresiones regulares, que se pueden utilizar en jQuery.
//para nmeros, til para filtrar los famosos ids.
numeros = /^[0-9]+$/;
//slo letras, pero esto no incluye los acentos, as que si introduces no es correcto.

letras = /^[a-zA-Z]+$/;
//para caracteres latinos(acentos), espacios y guiones bajos. el espacio se indica con \s.
letras_latinas = /^[0-9a-zA-Z_\s]+$/;
//para emails, vlidos pueden ser: miemail@gmail.com, mi.email@gmail.es, ...
email = /^[a-zA-Z0-9\._-]+@[a-zA-Z0-9-]{2,}[.][a-zA-Z]{2,4}$/;
//passwords que tienen que contener tanto nmeros como letras
password = /^([a-z]+[0-9]+)|([0-9]+[a-z]+)/i;
//Para urls
url = /^(ht|f)tps?:\/\/\w+([\.\-\w]+)?\.([a-z]{2,6})?([\.\-\w\/_]+)$/i;
//para localhost
localhost = /^http:\/\/(localhost|127\.0\.0\.1)/;
//Para cdigos postales
codigo_postal = /^([1-9]{2}|[0-9][1-9]|[1-9][0-9])[0-9]{3}$/;
//Para el Documento NIF
NIF = /^\d{8}[a-zA-Z]{1}$/;
//Para el Documento CIF
CIF = /^[a-zA-Z]{1}\d{7}[a-zA-Z0-9]{1}$/;
//Para el documento NIE
NIE = /^[XxTtYyZz]{1}[0-9]{7}[a-zA-Z]{1}$/;
//Tarjetas de crdito VISA
VISA = /^4[0-9]{3}-?[0-9]{4}-?[0-9]{4}-?[0-9]{4}$/;
//Tarjetas de crdito MASTERCARD
MASTERCARD = /^5[1-5][0-9]{2}-?[0-9]{4}-?[0-9]{4}-?[0-9]{4}$/;
//Fecha formato: 12/12/2014
fecha = /^([0-9]{2}\/[0-9]{2}\/[0-9]{4})$/;
//Nmeros enteros y decimales
floatRegex = /[-+]?([0-9]*\.[0-9]+|[0-9]+)/;
//1 nmero entre el 1 el 50
number1to50Regex = /(^[1-9]{1}$|^[1-4]{1}[0-9]{1}$|^50$)/gm;
//Validar tarjetas de crdito
creditCardRegex = /^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|
3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11})$/;
//Validar nombre
usernameRegex = /^[a-z0-9_-]{3,16}$/;
//Validar password
passwordRegex = /^[a-z0-9_-]{6,18}$/;
//Validar nmeros de telfono
phoneNumber = /^[0-9-()+]{3,20}/;
//Buscar Fecha (e.g. 21/3/2006)
dateRegex = /(\d{1,2}\/\d{1,2}\/\d{4})/gm;
//Buscar Fecha en formato MM/DD/YYYY

dateMMDDYYYRegex = /^(0[1-9]|1[012])[- \/.](0[1-9]|[12][0-9]|3[01])[- \/.](19|20)\d\d$/;

//Buscar fecha en formato DD/MM/YYYY
dateDDMMYYYRegex = /^(0[1-9]|[12][0-9]|3[01])[- \/.](0[1-9]|1[012])[- \/.](19|20)\d\d$/;
//Buscar una url
urlRegex = /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;
//Buscar nombre de dominio (con HTTP)
domainRegex = /(.*?)[^w{3}\.]([a-zA-Z0-9]([a-zA-Z0-9\-]{0,65}[a-zA-Z0-9])?\.)+[a-zA-Z]
{2,6}/igm;
//Buscar nombre de dominio (slo con www.)
domainRegex = /[^w{3}\.]([a-zA-Z0-9]([a-zA-Z0-9\-]{0,65}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,6}/igm;
//Buscar nombre de dominio alternativo
domainRegex = /(.*?)\.(com|net|org|info|coop|int|com\.au|co\.uk|org\.uk|ac\.uk|)/igm;
//Buscar subdominios: www, dev, int, stage, int.travel, stage.travel
subDomainRegex = /(http:\/\/|https:\/\/)?(www\.|dev\.)?(int\.|stage\.)?(travel\.)?(.*)+?/igm;
//Buscar jpg, gif o png imagen
imageRegex = /([^\s]+(?=\.(jpg|gif|png))\.\2)/gm;
//Buscar todas las imagenes
imgTagsRegex = /<img.+?src=\"(.*?)\".+?>/ig;
//Buscar imagenes slo con formato .png
imgPNG = /<img.+?src=\"(.*?.png)\".+?>/ig;
//Buscar cadena RGB (color)
rgbRegex = /^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/;
//buscar cadena hex (color)
hexRegex = /^#?([a-f0-9]{6}|[a-f0-9]{3})$/;
//Buscar tags html (v1)
htmlTagRegex = /^<([a-z]+)([^<]+)*(?:>(.*)<\/\1>|\s+\/>)$/;
//Buscar todos los .js incluidos
jsTagsRegex = /<script.+?src=\"(.+?\.js(?:\?v=\d)*).+?script>/ig;
//Buscar todos los .css incluidos
cssTagsRegex = /<link.+?href=\"(.+?\.css(?:\?v=\d)*).+?>/ig;

1. 4. 9 Mtodos jQuery
1. 4. 9. 1 Mtodo .attr()
El mtodo .attr() nos permite recuperar el valor de un atributo o bien de modificarlo.
Podramos tener una etiqueta como sta:
<p id="parrafo" title="Soy el titulo del parrafo"> Yo amo a Javascript </p>
Y recuperar su valor de esta forma:
var titulo = $("#parrafo").attr('title');
alert(titulo);

O bien modificarlo y mostrar su nuevo valor:

<!doctype html>
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var titulo = $("#parrafo").attr('title');
alert(titulo);
$("#parrafo").attr('title', 'Soy un nuevo titulo del parrafo');
titulo = $("#parrafo").attr('title');
alert(titulo);
});
</script>
</head>
<body>
<p id="parrafo" title="Soy el titulo del parrafo"> Yo amo a Javascript </p>
</body>
</html>
Para recuperar el valor de un atributo debe usarse:
$(elemento).attr(atributo);
Y para modificar el valor de un atributo:
$(elemento).attr(atributo, valor);
Otra posibilidad que nos da jquery a travs de sus mtodos es la de eliminar un atributo
mediante el mtodo removeAttr():
Por ejemplo si tuviramos esto:
<p id="parrafo" title="Saludo: 'Hola mundo'"> Hola mundo </p>
Y quisiramos quitarle el atributo title, deberamos hacerlo de esta manera:
$("#parrafo").removeAttr('title');
Este mtodo al igual que .attr() se aplica para todo tipo de atributos.

1. 4. 9. 2 Mtodo .css()
El mtodo llamado .css() que nos permite recuperar y modificar los estilos, como por ejemplo el
color de la letra.
Supongamos que nosotros tenemos un elemento como ste:
<p id="parrafo"> Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis
in, eum liber hendrerit an. </p>
Podemos recuperar, por ejemplo, el valor de la propiedad de css text-decoration, de esta forma:
var text_decoration = $("#parrafo").css('text-decoration');
alert(text_decoration);
Como la etiqueta no tiene definido ningn valor para la propiedad text-decoration entonces
debera devolvernos none.
Adems as como podemos recuperar el valor de sus propiedades tambin podramos
modificarlas:
$("#parrafo").css('text-decoration', 'underline');

Como vemos, si el mtodo .css() recibe un parmetro nos devolver el valor del mismo, pero si
recibe dos modifcar el valor del primer parmetro (propiedad) con el segundo parmetro (valor)
Adems al igual que el mtodo .attr() si queremos modificar de a varias propiedades podemos
usar un json como parmetro.
Con Json:
$("#parrafo").css({
'text-decoration': 'underline',
'color': '#f00',
'font-weight': 'bold'
});
Sin Json:
$("#parrafo").css('text-decoration', 'underline');
$("#parrafo").css('color', '#f00');
$("#parrafo").css('font-weight', 'bold');
De ambas maneras es vlida.

1. 4. 9. 3 Mtodo .val() y mtodo .html()

El mtodo .val() que nos devolver el value del campo de entrada. Mientras que para el div
utilizamos .html() lo que nos permitir insertar una cadena dentro del mismo.
Tanto .html() como .val() cumplen una funcin de mtodos getters y setters.
Si usamos el mtodo .html() sin un parmetro nos devolver el valor de la cadena que se
encuentra dentro, pero en caso de usarlo con un parmetro cambiar el valor actual por el de
ese parmetro. Para ello veremos un ejemplo, copiaremos el contenido de un prrafo dentro de
otro con el mismo mtodo:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#copiar").click(function(){
var parrafo = $("#parrafo1").html();
$("#parrafo2").html(parrafo);
});
});
</script>
</head>
<body>
<p id="parrafo1"> Soy un <strong> parrafo </strong> </p>
<a id="copiar" href="#"> Copiar </a>
<p id="parrafo2"> ... </p>
</body>
</html>
Como ven usamos el mtodo .html() tanto para recuperar la cadena que est dentro de un
elemento como tambin para setear el valor de otro, eso obviamente dependiendo de si tiene o
no un parmetro.
Sin embargo, por si no notaron el prrafo 1 dentro suyo tiene una etiqueta strong que tambin
fue copiada, esto tiene sentido teniendo en cuenta el nombre del mtodo: html, esto significa

que este mtodo copiar toda la cadena, incluso el cdigo. Si nosotros quisiramos recuperar
solamente la cadena, deberamos usar el mtodo .text() de la siguiente forma:
var parrafo = $("#parrafo1").text();
$("#parrafo2").html(parrafo);
Vale aclarar que el mtodo .html() como .text() se aplican a etiquetas de apertura y cierre como
h1, p, ul, li, strong, div, span, etc.
En el caso del mtodo .val() funciona muy parecido si no recibe parmetros nos devolver el
value de la etiqueta y si recibe un parmetro lo cambiar. Adems este mtodo slo se aplica
para elementos de formulario, input, textarea, select.

1. 4. 10 Envo de parmetros por POST y GET

Dos mtodos comnmente utilizados para una peticin-respuesta entre un cliente y el servidor
son: GET y POST.
GET - Pide a los datos de un recurso especificado, se utiliza bsicamente para conseguir justo
(recuperar) algunos datos del servidor. El mtodo GET puede devolver datos en cach.
POST - datos somete a procesar a un recurso especificado, tambin se puede utilizar para
obtener algunos datos del servidor. Sin embargo, el mtodo POST nunca almacena en cach de
datos, ya menudo se utiliza para enviar datos, junto con la solicitud.

1. 4. 10. 1 GET
El siguiente ejemplo utiliza el mtodo $ .get () para recuperar datos de un archivo en el servidor:
$("button").click(function(){
$.get("demo_test.asp", function(data, status){
alert("Data: " + data + "\nStatus: " + status);
});
});

1. 4. 10. 2 POST
El siguiente ejemplo utiliza el mtodo $.post() para enviar datos:
$("button").click(function(){
$.post("demo_test_post.asp",
{
name: "Donald Duck",
city: "Duckburg"
},
function(data, status){
alert("Data: " + data + "\nStatus: " + status);
});
});

1. 4. 11 Componentes o Plugins ms utilizados en una pagina WEB

Un plugin jQuery es simplemente un nuevo mtodo que utilizamos para extender objeto
prototipo de jQuery. Al ampliar el objeto prototipo de habilitar todos los objetos jQuery para
heredar cualquiera de los mtodos que se agregan. Segn lo establecido, cada vez que se llama
a jQuery () va a crear un nuevo objeto jQuery, con todos los mtodos de jQuery heredadas.

La idea de un plugin es hacer algo con una coleccin de elementos. Usted podra considerar
cada mtodo que viene con el ncleo de un plugin de jQuery, como .fadeOut () o .addClass (). 28
Podemos encontrar infinidad de plugins ya realizados, adems de poder hacer uno nosotros
mismos. A continuacin se presentan algunos de los que existen: paginador, slider de imgenes,
para audio y video, validacin de formularios, carrito de compras, grid, progressBar, datepicker,
autocomplete, accordion, tabs, dialog, tooltip y men.
Profundizaremos en el algunos, solo para ejemplificar su funcionamiento.

1. 4. 11. 1 Paginador
jPaginate es un plugin de jQuery para paginacin que viene con una peculiaridad: nmeros de
pgina animados. El usuario puede deslizarse a travs de los nmeros de las pginas disponibles
haciendo clic o simplemente flotando sobre las flechas de avanzar. Los links a la pgina inicial y
final tambin estn disponibles.
Puedes configurar las siguientes propiedades del plugin:
count: el nmero total de pginas
start: En qu nmero de las pginas visibles deben comenzar la navegacin?
display: Cuntos nmeros de pgina van a verse en la navegacin?
border: Si debe haber un borde (true / false)
border_color: El color del borde
text_color: Color del texto y los nmeros
background_color: Color de fondo
border_hover_color: Color del contorno, cuando pasa por encima el mouse.
text_hover_color: El color del texto cuando pasa por encima el mouse
background_hover_color: Color de fondo cuando pasa por encima el mouse
images: Si las flechas deben ser imgenes o no (true / false)
mouse: esta propiedad puede tener dos valores.
press con este valor cuando el usuario mantiene pulsado el ratn, los nmeros de
pgina seguir deslizndose.
"slide" los nmeros de pgina se deslice una vez con cada clic.
onChange: Es el evento que se dispara cuando se hace clic en una pgina. Si llamamos una
funcin podemos pasar como argumento el nmero de la pgina se hace clic.
Ejemplo:
<head>
<script src="javascript/jquery-1.3.2.js"></script>
<script src="javascript/jquery.paginate.js"></script>
</head>
view plaincopy to clipboardprint?
<div class="content">
<div id="paginationdemo" class="demo">
<h1>Demo Paginacin</h1>
<div id="p1" class="pagedemo _current" style="">Page 1</div>
<div id="p2" class="pagedemo" style="display: none;">Page 2</div>
<div id="p3" class="pagedemo" style="display: none;">Page 3</div>
<div id="p4" class="pagedemo" style="display: none;">Page 4</div>
<div id="p5" class="pagedemo" style="display: none;">Page 5</div>
<div id="p6" class="pagedemo" style="display: none;">Page 6</div>
<div id="p7" class="pagedemo" style="display: none;">Page 7</div>
<div id="p8" class="pagedemo" style="display: none;">Page 8</div>
<div id="p9" class="pagedemo" style="display: none;">Page 9</div>
<div id="p10" class="pagedemo" style="display: none;">Page 10</div>
<div id="demo5">
</div>

28 Consultado 11 de mayo 2015 http://learn.jquery.com/plugins/

</div>
</div>

1. 4. 11. 2 Sliders de Imagenes

Para desplegar las imgenes de maneras dinmicas. Un slider jQuery que se adapta al tamao
del contenedor que lo integra, con lo que junto con un layout responsive conseguiremos una
gran flexibilidad.
Antes de cargar el cdigo del plugin, el html es necesario para que el slider funcione:
<div class="flex-container">
<div class="flexslider">
<ul class="slides">
<li><img src="img/img1.jpg"/></li>
<li><img src="img/img2.jpg"/></li>
<li><img src="img/img3.jpg"/></li>
<li><img src="img/img4.jpg"/></li>
<li><img src="img/img5.jpg"/></li>
</ul>
</div>
</div>
El css necesario para que el slider se vea con el estilo por defecto se carga con la siguiente lnea:
<link rel="stylesheet" href="css/flexslider.css">
Como para cualquier plugin jQuery que queramos usar en nuestra web, primero tenemos que
asegurarnos de que tenemos cargado jQuery antes:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
Debajo de este cdigo que obtiene el cdigo de los servidores de Google, ya podemos incluir el
script del plugin y el cdigo javascript que har que para el objeto html con clase .flexslider se
cargue el plugin correspondiente:
<script type="text/javascript" src="js/jquery.flexslider-min.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({
controlsContainer: '.flex-container'
});
});
</script>

1. 4. 11. 3 Validacin de formularios

Tenemos la opcin si utilizamos jQuery de validar campos de formulario, por ejemplo, utilizando
expresiones regulares jQuery. Se realiza llamando a la funcin match() de jQuery, que funciona
de forma similar a la funcin preg_match de javascript.
Con la siguiente instruccin accederemos al valor de un campo de texto, por ejemplo:
var campo = $('#name').val();
Para comprobar y aplicar una expresin regular a un campo de texto, con esta instruccin:
var campo = $('#name').val().match('Aqui la expresin regular');

A continuacin las expresiones regulares mas utilizadas a la hora, por ejemplo, de validar
campos:
//para nmeros, til para filtrar los famosos ids.
numeros = /^[0-9]+$/;
//slo letras, pero esto no incluye los acentos, as que si introduces no es correcto.
letras = /^[a-zA-Z]+$/;
//para emails, vlidos pueden ser: miemail@example.com, my.email@example.es,
email = /^[a-zA-Z0-9\._-]+@[a-zA-Z0-9-]{2,}[.][a-zA-Z]{2,4}$/;
//passwords o contraseas que tienen que contener tanto nmeros como letras
password = /^([a-z]+[0-9]+)|([0-9]+[a-z]+)/i;
//Para cdigos postales
codigo_postal = /^([1-9]{2}|[0-9][1-9]|[1-9][0-9])[0-9]{3}$/;
//Para el Documento NIF
NIF = /^\d{8}[a-zA-Z]{1}$/;
/
/Para el CIF
CIF = /^[a-zA-Z]{1}\d{7}[a-zA-Z0-9]{1}$/;
//Fecha formato tipo 24/12/2014
fecha = /^([0-9]{2}\/[0-9]{2}\/[0-9]{4})$/;
//1 nmero entre el 1 el 50
number1to50 = /(^[1-9]{1}$|^[1-4]{1}[0-9]{1}$|^50$)/gm;
//Buscar imagenes slo con formato .png
imgPNG = /<img.+?src=\"(.*?.png)\".+?>/ig;
Aqu un ejemplo completo, de como validar si lo que nos introducen en el campo son slo
nmeros:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#boton").click(function() {
if ($("#texto").attr("value").match(/^[0-9]+$/)) {
alert("Correcto");
}
else {alert("Incorrecto");}
});
});
</script>

</head>
<body>
<input type="text" id="texto">
<input type="button" id="boton" value="Comprobar">
</body>
</html>