Tecnologas Web Ajax

1
Tecnologías Web Ajax

• M.C. Juan Carlos Olivares Rojas

2
Proyecto

• Desarrollar un sitio Web de publicidad de un
  producto cualquiera utilizando los estándares Web
  que se verán en este documento.
• Básicamente se tendrá una página de inicio, una
  con información de la empresa, página de contacto
  y la página de descripción del producto.
• Se tendrá un buen diseño.

3
Introducción

• La World Wide Web o simplemente Web es un
  servicio de hipertexto que se ejecuta sobre
  Internet.
• Actualmente es el servicio de Internet más
  extendido en la actualidad.
• Un servidor Web no es otra cosa que un servidor
  de archivos aunque en la actualidad a pasado a
  ser toda una plataforma de servicios de
  aplicación.

4
Introducción

• La Web basa su funcionamiento principalmente en
  el formato HTML.
• La Web más que hipertexto recibe el nombre de
  hipermedia dado que además del texto y los
  enlaces (característica fundamental del
  hipertexto) puede representar la información en
  diferentes formatos imágenes, sonidos,
  animaciones, video.

5
Introducción

• Los primeros sitios Web estaban enfocados en la
  investigación y la docencia, posteriormente se le
  vio el éxito comercial.
• La Web es el medio para realizar comercio mas no
  es el fin.
• A continuación se muestra la historia que ha
  tenido la Web.

6
Historia de la Web

• En marzo de 1989, estando en el CERN , Tim
  Berrners publica el artículoInformation
  Management A Proposal, el cual muestra la
  propuesta original de la WWW.
• En octubre de 1990, Tim Berners inicia su trabajo
  sobre un programa que maneja y edita hipertexto
  usando una computadora NeXTStep y nombrando a
  este programa "WorldWideWeb.

7
Primer Navegador Web
8
Primer sitio Web

• El sitio Info.cern.ch fué la dirección del
  primer sitio web y del primer servidor web,
  corriendo en una computadora NeXT en el CERN.
• La primera página web fué
• http//info.cern.ch/hypertext/WWW/TheProject.html
  la cual informaba acerca del proyecto WWW e
  incluía detalles para que los visitantes pudieran
  crear su propia página Web.

9
Primera página Web
10
Primer Navegador Web Mosaic
11
Netscape

• En marzo de 1994, Marc Andreessen y algunos
  compañeros que trabajaban en el desarrollo de
  Mosaic en el NCSA, abandonan su trabajo para en
  abril de 1994 fundar Netscape junto con Jim
  Clark.
• El 13 de octubre de 1994 sale al mercado el
  navegador de Netscape, denominado inicialmente
  Mosaic Netscape 0.9 y posteriormente renombrado
  Netscape Navigator.

12
Netscape

• En 3 años la compañía Netscape creció de 3
  empleados a 2600 y tener un valor de 765 millones
  de dólares.
• El navegador Navigator llegó a ser utilizado por
  el 80 de los usuarios de internet hasta que
  surgió el Explorer de Microsoft.
• Posteriormente la compañía fué comprada por AOL y
  el 1º de marzo del 2008 se terminó el soporte
  oficial del navegador.

13
Web 2.0

• El término Web 2.0 fue acuñado por Tim O'Reilly
  en 2004 para referirse a una segunda generación
  de Web basada en comunidades de usuarios y una
  gama especial de servicios, como las redes
  sociales, los blogs, y los wikis que fomentan la
  colaboración y el intercambio ágil de información
  entre los usuarios

14
Web 2.0
15
Web 2.0

• La Web 2.0 no es Internet 2. La Web 2.0 funciona
  sobre la misma red de Internet que todos
  conocemos.
• La Web 2.0 no es un nuevo lenguaje de
  programación.
• La Web 2.0 no es un cambio radical de tecnología,
  se sigue utilizando HTTP, HTML, JavaScript y
  muchas de las tecnologías que han surgido, aunque
  se usan de otro modo

16
Web 1.0 vs Web 2.0
Concepto Web 1.0 Web 2.0 Quiénes
publican Los productores de los
sitios productores y usuarios Información Centr
alizada Dispersa en miles de
sitios Publicidad Sólo grandes
presupuestos Cualquier persona Dueño de la
inform. El sitio web Los usuarios Tecnología
HTML 4.0 XHTML y CSS Disponibilidad Al
final de cada proyecto Beta perpetuo Posibilidad
de usar Ninguna Sitios con APIs servicios
de otros
17
Web 1.0 vs Web 2.0
Concepto Web 1.0 Web 2.0 E-mail Hotmail
Gmail Publicidad DoubleClick Google
AdWords Mapas MapQuest Google
Maps Fotografías Ofoto Yahoo! Flick Sitios
de usuarios Geocities Blogger Buscador Altavis
ta Google Enciclopedia Encarta Wikipedia Inf
ormación Slashdot Digg Oficina --- Goog
le Docs Compras Amazon GAP
18
RIA

• Las RIA (Rich Internet Applications -
  Aplicaciones Ricas de Internet) son un nuevo tipo
  de aplicaciones con más ventajas que las
  tradicionales aplicaciones Web. Esta surge como
  una combinación de las ventajas que ofrecen las
  aplicaciones Web y las aplicaciones tradicionales.

19
RIA

• Las aplicaciones web tradicionales tienen poca
  capacidad multimedia (para ver un vídeo es
  necesario usar un programa externo para su
  reproducción.)

20
RIA
21
RIA

• Las principales características de este tipo de
  aplicaciones son
• Experiencia rica del usuario
• Capacidad Offline
• Productvidad alta del desarrollador
• Flexibilidad
• Fáciles de administrar, distribuir y actualizar

22
RIA

• Las principales desventajas que representa esta
  tecnología son dos
• Forma de navegar (navegación por hipervínculos
  con retardo entre páginas)
• Botón atrás las aplicaciones RIA tienen sólo una
  forma de interacción por lo que al aplicar dicho
  botón se sale de la aplicación.

23
Navegación en RIA
24
Segunda guerra de navegadores

• Con la aparición de la Web los navegadores
  Netscape e Internet Explorer se enfrascaron en
  una guerra resultado vencedor este último a
  principios de la década del 2000.
• En estos momentos se está librando otra batalla
  donde los competidores son

25
Adoble Flex

• Flex es ahora un producto de Adobe y es una
  plataforma que permite generar aplicaciones RIA
  basadas en la plataforma Flash, pero con un
  entorno de trabajo y un modelo pensados de manera
  específica para este tema y no para el mundo de
  la animación.
• Flex es el nombre de la plataforma que incluye

26
Adobe Flex

• Flex Builder Entorno de desarrollo comercial
  basado en Eclipse.
• Flex SDK Compilador gratuito que toma el código
  fuente y loconvierte a SWF.
• Flex Data Services Servidor de aplicaciones
  basado en Java que provee servicios a las
  aplicaciones RIA desarrolladas en Flex.
• Flex Chart Components Componentes adicionales
  que generan gráficos estadísticos.

27
Otras Tecnologías RIAs

• OpenLaszlo es una plataforma Open Source
  mantenida por la empresa Laszlo Systems, que
  genera aplicaciones RIA a partir de un lenguaje
  de marcado XML conocido como LZX y código
  ECMAScript.
• Microsoft Silverligth Cuando Microsoft lanza
  Windows Vista, también lanzó un subsistema
  (compatible con XP y 2003) llamado Windows
  Presentation Foundation (WPF) que posteriormente
  se relanzaría para la web como Silverlight.

28
Otras Tecnologías RIAs

• Para su funcionamiento, los navegadores requieren
  un plugin.
• Java WebStart Esta tecnología permite generar
  aplicaciones de internet del mismo modo que si
  fueran de escritorio, para ello se requiere tener
  instalada la Java Virtual Machine en el equipo
  del cliente y pueden ser invocadas desde un
  vínculo en una página Web.

29
Estándares Web

• XHTML 1.0 or superior
• CSS Level 2
• DOM Level 2
• ECMAScript 262 (current JavaScript)
• http//www.webstandards.org/about/

30
Estándares Web

• XHTML (estructura y semántica del contenidos)
• Cascading Style Sheets (presentación del
  contenido)
• Javascript (comportamiento e interacción del
  sitio Web)

31
AJAX

• Acrónimo de Asynchronous Javascript And XML.
  Viene a sustituir el término DHTML
• Estas tecnologías junto con XHTMLCSS forman el
  fundamento en que se basa la Web 2.0
• El asincronismo viene a cambiar el viejo
  paradigma de click-and-wait de las aplicaciones
  Web tradicionales haciéndolas más dinámicas.

32
Introducción

• AJAX no es nada nuevo bajo el sol, simplemente es
  una idea nueva y brillante de utilizar
  tecnologías existentes.
• AJAX no es un estándar por lo que se llega a
  implementar de diversas formas.
• Existen varios frameworks como atlas (.NET)
  Script.aculo.us, Prototype, Dojo, etc que ayudan
  a simplificar la programación.

33
Introducción

• AJAX no es un estándar y esto ha sido una de sus
  principales problemáticas.
• AJAX trae de vuelta el énfasis en el
  procesamiento del lado cliente, después de
  haberse centrado muchos años en las tecnologías
  del lado del servidor.
• Una de las problemáticas que presenta es que
  existen diversos caminos de interacción.

34
Introducción

• Generalmente la asincronía se ve reflejado en el
  refresco de las páginas pero no es la única
  forma.
• El asincronismo se logra a través del objeto
  XMLHTTPREQUEST.
• Antes de entrar a detalle se verán las distintas
  tecnologías Web que conforman AJAX.

35
Aplicacion Web Tradicional
1- La aplicacion muestra una lista de empleados a
seleccionar.
2- Cuando el usuario selecciona un empleado se
muestra los datos (primer refresco)
3- El usuario modifica los datos y los guarda
(segundo refresco)
4- Se vuelve al inicio de la aplicación (tercer
refresco)
36
Aplicación Web con AJAX
No existe el refresco de la aplicación.
37
Ejemplos de utilización de AJAX

• Google Suggest
• Google Earth
• Facebook

38
Aplicaciones Síncronas
39
Aplicaciones Asíncronas
40
Programación Web del lado del Cliente

• La programación de Aplicaciones Web (Webapps)
  tiene dos vertientes de acuerdo a donde se
  desarrolle en el lado del cliente y en el lado
  del servidor.
• Antes de ver los estándares para la programación
  de aplicaciones Web en el lado cliente
  (XHTML/CSS/DOM/Javascript) se describirá
  básicamente lo que son las tecnologías XML.

41
Tecnologías XML

• M.C. Juan Carlos Olivares Rojas

42
XML

• eXtensible Markup Language (Lenguaje de Marcado
  eXtensible)
• Es un metalenguaje
• Lenguaje que describe a otros lenguajes
• XML sólo define el lenguaje, lo que se realice
  con él depende de la aplicación.

43
XML

• Es de un lenguaje de marcado por que utiliza
  etiquetas.
• Las etiquetas se representan con paréntesis
  angulares ltgt y dentro un identificador.
• El lenguaje de marcado mejor conocido es el HTML
  (HyperText Markup Language), el cual es la base
  de los documentos Web

44
XML

• El problema con HTML es que es un lenguaje que
  presenta muchas irregularidades en su
  construcción, como etiquetas agregadas al
  lenguaje, etiquetas que no cierran
• Los documentos de XML tienen dos características
  principales están bien estructurados y son
  válidos

45
XML

• Se dice que un documento está bien formado si
  para cada etiqueta del lenguaje no tiene errores
  léxicos.
• Se dice que un documento es válido cuando se
  representan los elementos del lenguaje con un
  orden y significado adecuados, a esto se le
  denomina no tener errores sintácticos y semánticos

46
XML

• Determinar si un documento está bien formado
  consiste en verificar que cumpla la sintaxis
  correcta de html
• ltimg srcimagen.jpggt Válido en HTML Pero no
  válido en HTML
• XHTML es la versión de HTML con la sintaxis
  estricta de XML

47
XML

• ltimg srcimagen.jpggt
• lt/imggt
• ltimg srcimagen.jpg/gt
• ltIMG srcimagen1.jpg/gt no es válido
• ltimagen/gt Es correcta (podría ser valida)

48
Estructura de un documento en XML

• lt? xml gt?
• ltraízgt
• ltetiqueta1gt
• ltotragtValorlt/otragt
• lt/etiqueta1gt
• ltetiqueta 2 atributo1valor/gt
• ltetiqueta3gtvalorlt/etiqueta2gt
• lt/raízgt

49
Algunas herramientas para utilizar XML

• XRAY
• XMETAL
• XML Spy
• XML Notepad
• Visual .NET
• Otros entornos de programación

50
XML

• Otros lenguajes que utilizan XML son
• WML Lenguaje para páginas Web en dispositivos
  móviles
• XHTML-MP La nueva versión para páginas Web en
  dispositivos móviles siguiendo la sintaxis de
  XHTML.

51
Lenguajes basados en XML

• MathML Lenguaje para crear ecuaciones
• XML es un lenguaje en texto plano por lo que la
  seguridad es mínima.
• VoiceXML es un lenguaje para representar voz.
• La versión más actual de XML es la uno. Está por
  aparecer la segunda versión

52
Otros lenguajes basados en XML

• VRML Realidad Virtual
• RDF Descripción de Recursos
• OWL Ontologías
• SOAP Transporte de servicios Web
• WSDL Descripción de servicios Web
• UDDI Encontrar servicios Web
• XUL/XAML Interfaces de usuario
• SVG Imágenes virtuales

53
Arquitectura de XML
HTML
TEI
. . .
. . .
XML
SGML
54
Islas XML.

• XML dentro de una página HTML.
• Invoca una instancia del procesador XML del
  cliente.
• Puede ser identificada por un ID.
• Puede controlarse y modificarse con scripts en el
  cliente.

55
Ejemplos de islas XML.

• lthtmlgt
• ltheadgt
• lttitlegtIslas XMLlt/titlegt
• ltXML idinfo-climagt
• ltclimagtltciudadgt
• ltnombregtMexico DFlt/nombregt
• ltreportegt
• ltaltagt27lt/altagtltbajagt18lt/bajagt
• ltprecip total_dia0 tipolluvia
  fuerza"ligera"/gt
• lt/reportegt
• lt/ciudadgtlt/climagt
• lt/XMLgt
• lt/headgt
• ltbodygt
• ...

56
Dónde coinciden el XML y las BD?
Capturar
Base de datos
Consultar
Mantener
BD
BD
57
XML y las BDs.

• Capturar en XML.
• Publicar de una fuente XML hacia la BD.
• Consultar en XML.
• Crear salidas desde la BD a un formato de
  presentación (como el HTML).
• Exportar en XML.
• Crear vistas lógicas de la base de datos.
• XML como protocolo entre BDs.
• Operaciones entre bases de datos usando XML.

58
XML y el modelo de 3 niveles.
Nivel de datos
Nivel de lógica de negocios
Nivel de presentación
XML
XML
BDs
Aplicaciones
Navegador
59
Ejemplos de XML

• A continuación se muestran algunos ejemplos de lo
  que se puede hacer con XML.

60
SVG

• Scalable Vector Graphic
• Es un formato basado en XML cuya finalidad es
  mostrar gráficos en formato vectorial utilizando
  la sintaxis de XML.
• SVG está tomando mucho auge debido a que puede
  ahorrar espacio en imágenes que son del tipo
  vectorial

61
SVG

• El documento en SVG es interpretado por un parser
  o visor. Los más famosos son batik y el visor de
  ADOBE.
• SVG es un lenguaje de propósito específico ya que
  sólo sirve para una opción en particular.

62
Ejemplo SVG

• lt?xml version"1.0" standalone"no"?gt lt!DOCTYPE
  svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"
  gt
• ltsvg xmlns"http//www.w3.org/2000/svg"
  width"300" height"300"gt
• ltcircle cx"100" cy"100" r"50"
  style"fillred"/gt
• lt/svggt

63
MathML

• x2 4x 4 0
• ltmrowgt
• ltmrowgt
• ltmsupgt ltmigtxlt/migt ltmngt2lt/mngt lt/msupgt
  ltmogtlt/mogt
• ltmrowgt
• ltmngt4lt/mngt
• ltmogtinvisibletimeslt/mogt
• ltmigtxlt/migt
• lt/mrowgt
• ltmogtlt/mogt
• ltmngt4lt/mngt
• lt/mrowgt
• ltmogtlt/mogt
• ltmngt0lt/mngt
• lt/mrowgt

64
SMIL

• Synchronised Multimedia Integration Language
• Integración de contenidos multimedia con texto,
  audio y video.
• Soporte en la mayoría del sotware de reproducción
  de medios y en navegadores Web con Plug-in

65
Ejemplo SMIL
ltsmilgt ltheadgt ltmeta name"title"
content"Online Teaching Services promo" /gt
ltmeta name"author" content"Jay Moonah, CAT" /gt
ltlayout type"text/smil-basic-layout"gt
ltroot-layout width"280" height"316"
background-color"white"/gt ltregion
id"AnimChannel1" title"AnimChannel1"
left"0" top"0" height"265" width"280"
fit"hidden"/gt lt/layoutgt lt/headgt ltbodygt ltpar
title"Online Teaching Services promo"
author"Jay Moonah, CAT" gt ltaudio
src"final.rm" id"Soundtrack"
title"Soundtrack"/gt ltanimation
src"otscompfin.swf" id"Animation"
region"AnimChannel1" title"Animation"
fill"freeze"/gt lttext src"cc.rt"
id"caption" region"cc" title"cc"
fill"freeze"/gt lt/pargt lt/bodygtlt/smilgt
66
Validación de documentos en XML

• Para validar documentos XML existen dos
  variantes
• DTD (Document Type Definition) basado en
  gramáticas BNF
• XMLSchema basado en XML

67
Reglas La DTD del XML.

• Una Definición de Tipo de Documento (Document
  Type Definition, DTD) permite
• Definir un conjunto específico de etiquetas con
  relaciones específicas.
• Definir valores predeterminados para los
  atributos.
• Definir entidades de texto y binarias adicionales
  junto con sus notaciones.
• Indicar el elemento raíz.

68
El control de la DTD.

• La DTD proporciona
• Una sintaxis formal que sirva de guía a un
  intérprete/analizador (parser).
• La habilidad de definir valores predeterminados
  para los atributos.
• Especificaciones para la estructura.
• Una DTD es una buena manera (pero no la única) de
  controlar la creación de datos.

69
Declaración de elementos

• lt!ELEMENT Apertura y palabra clave.
• Nombre_elemento Nombre del elemento.
• ( . . . ) Modelo de contenido o
• PALABRACLAVE contenido declarado.
• gt Cierre.
• Palabras clave para el contenido declarado
• EMPTY Sin elemento o contenido.
• ANY Cualquier combinación de elementos
• descendientes y datos caracter.

70
Modelo de contenido.

• Elementos o PCDATA.
• Conectores.
• , seguido de (a,b)
• uno u otro (ab)
• Indicadores de ocurrencia.
• Uno y solo uno configuracion
• ? Cero o uno Nombre?
• Uno o más Controlador
• Cero o más Opciones

71
Comentarios XML

• Los comentarios pueden aparecer en cualquier
  parte del documento fuera de otros marcajes.
• Pueden aparecer dentro de la declaración de tipo
  de documento.
• Un procesador XML puede, pero no requiere, ser
  capaz de leer y recuperar los comentarios.
• lt!-- Articulos secundarios para BD,
• revisado el 2000/I/29 --gt

72
Declaración de atributos

• lt!ATTLIST Apertura y palabra clave.
• Nombre_elemento Nombre del elemento.
• Nombre_atributo Nombre del atributo.
• ( . . . ) Lista de valores o
• PALABRACLAVE valor declarado.
• . . . Valor predeterminado o
• PALABRACLAVE palabra clave de valor
  predeterminado.
• gt Cierre.

73
Declaracion de documento

• lt!DOCTYPE Apertura y palabra clave.
• Elemento_raiz Nombre del elemento raíz.
• PALABRACLAVE SYSTEM o PUBLIC y
• dtd.dtd una DTD XML externa o
• . . . declaraciones internas.
• gt Cierre.

74
Ejemplo completo (XMLDTD).

• ...
• lt!DOCTYPE clima
• lt!-- Nombre Modelo contenido --gt
• lt!ELEMENT clima (ciudad) gt
• lt!ELEMENT ciudad (nombre, reporte) gt
• lt!ELEMENT nombre (PCDATA) gt
• lt!ELEMENT reporte (alta, baja, precip?) gt
• lt!ELEMENT alta (PCDATA) gt
• lt!ELEMENT baja (PCDATA) gt
• lt!ELEMENT precip EMPTY gt
• lt!ATTLIST precip total_dia CDATA
  REQUIRED
• tipo (lluvia nieve) "lluvia"
• fuerza (ligera fuerte) IMPLIED gt
• gt
• ...

75
Ejemplo

• lt?xml version1.0?gt
• lt!DOCTYPE audiocollection SYSTEM
  AudioCollection.dtdgt
• ltaudiocollectiongt
• lt! Esta es la sección de Rock de la colección
  --gt
• ltaudio typerock review5 year1995gt

76
Ejemplo

• lttitlegtLa carretera lt/titlegt
• ltartistgtJulio Iglesiaslt/artistgt
• lttrackgtLa carreteralt/trackgt
• ltcommentsgtGran álbum lt/commentsgt
• lt/audiogt
• lt/audiocollectiongt

77
DTD

• lt!ELEMENT audiocollection (audio)gt
• lt!ELEMENT audio (title, artist, track,
  comments?)gt
• lt!ATTLIST audio
• type (rock pop jazz classical country
  soul hiphop comedy other) rock
• review (1 2 3 4 5) 3
• Year CDATA IMPLIEDgt

78
DTD

• lt!ELEMENT title (PCDATA)gt
• lt!ELEMENT artist (PCDATA)gt
• lt!ELEMENT track (PCDATA)gt
• lt!ELEMENT comments (PCDATA)gt

79
XMLSchema

• lt?xml version1.0?gt
• ltSchema nameAudioCollectionSchema xmlns
  urnschemas-microsoft-comxml-data
  xmlnsdturnshecmas-microsoft-comdatatypesgt
• ltElementType nametitle contenttextOnly/gt
• ltElementType nameartist contenttextOnly/gt
• ltElementType nametrack contenttextOnly/gt

80
XMLSchema

• ltElementType namecomments contenttextOnly/gt
• ltAttributeType nametype dttypeenumeration
  dtvaluesrock pop jazz classical country soul
  hiphop comedy other default3/gt
• ltAttributeType namereview dttypeenumeration
  dtvalues1 2 3 4 5 default3/gt
• ltAttributeType nameyear dttypeint/gt

81
XMLSchema

• ltElementType nameaudio contenteltonlygt
• ltelement typetitle minOccurs1
  maxOccurs1/gt
• ltelement typeartist minOccurs1
  maxOccurs/gt
• ltelement typetrack minOccurs1
  maxOccurs/gt
• ltelement typecomments minOccurs0
  maxOccurs1/gt
• ltattribute typetype/gt
• ltattribute typereview/gt
• ltattribute typeyear/gt
• lt/ElementTypegt

82
XMLSchema

• ltElementType nameaudiocollection
  contenteltOnlygt
• ltelement typeaudio minOccurs1
  maxOccurs/gt
• lt/ElementTypegt
• lt/Schemagt

83
XPath

• Es una tecnología XML que sirve para recorrer un
  documento XML (es una estructura tipo árbol)
• Sirve de base para otras tecnologías como XSL y
  Xpointer
• / indica la raíz
• /pantalla hace referencia a una etiqueta
  ltpantallagt de nivel principal

84
XPath

• /compra/cesta2 Segundo elemento cesta
• //cesta todos los elementos sin importar donde se
  encuentren
• /compra/cesta3/
• /compra/cesta_at_usuarioPedro
• /compra/cesta_at_precio lt 15000
• //count(cesta)3

85
XSL

• eXtensible Stylesheet Language.
• Permite transformar documentos XML en otros
  documentos dándole otros formatos.
• Agrega estilos a documentos XML mediante reglas
  especiales de formatos.
• Esto se realiza por medio de dos tecnlogías XSLT
  y XSL-FO

86
Cómo funciona el XSL
Arbol fuente (XML)
XSL
Intérprete
Arbol resultado (xmlsnfo)
Intérprete
Transform. XSL
Intérprete
?
87
Ejemplo de plantillas XSL

• ltxsltemplate match"/"gt
• ltHTMLgt
• ltHEADgt
• ltTITLEgtEl clima.lt/TITLEgt
• lt/HEADgt
• ltBODY BGCOLOR"White"gt
• lth1gtEl clima.lt/h1gt
• ltTABLE width"60" border"1"
  cellspacing"0" cellpadding"5"gt
• ltxslapply-templates select"clima/ciudad"
  order-by"nombre"/gt
• lt/TABLEgt
• lt/BODYgt
• lt/HTMLgt
• lt/xsltemplategt

88
Ejemplo de plantillas XSL

• ltxsltemplate match"clima/ciudad"gt
• ltTRgt
• ltTD style"font-weight bold color Black
  font-family sans-serif"gt
• ltxslapply-templates select"nombre"/gt
• lt/TDgt
• ltTD style"font-weight bold color Red
  font-family sans-serif"gt
• ltxslapply-templates select"reporte"/gt
• lt/TDgt
• ltTD style"font-weight bold color Blue
  font-family sans-serif"gt
• ltxslapply-templates select"reporte/precip"
  /gt
• lt/TDgt
• lt/TRgt
• lt/xsltemplategt

89
Plantillas XSL

• ltxsltemplate matchetiquetagt
• Define el código HTML asociado con una etiqueta
  XML dada.
• ltxslvalue-of selectnombre_nodogt
• ltxslvalue-of select_at_nombre_atributogt
• Regresa el texto asociado con el atributo o nodo.
• ltxslfor-each selectnombre_nodogt
• . . .
• lt/xslfor-eachgt
• Repite un proceso para cada elemento con la
  etiqueta especificada.

90
XSL if

• ltxslif testcondiciongt
• . . .
• lt/xslevalgt
• Evalua una condición, si el nodo actual retorna
  un valor, entonces se considera verdadera la
  condición.
• Ejemplo
• ltxsltemplate match"precip"gt
• ltxslif test"._at_total_dia gt 0"gt
• ltxslvalue-of select"_at_total_dia"/gt mm
• lt/xslifgt
• lt/xsltemplategt

91
XSLT

• XSL Transformation
• Lenguaje fuente (XML) (plantilla de
  transformación procesador XSL) ? Lenguaje
  destino (XML)
• ltxsltemplate match/gt
• ltxsltemplate matchaudiocollection/audio/artist
  gt
• lt/xsltemplategt

92
XSLT

• ltxsltemplate matchaudiocollection/audio/artist
  gt
• ltbgtArtista lt/bgtltxslvalue-of/gt
• lt/xsltemplategt
• ltxslif match_at_typejazzgt
• ltxslapply-templates selectaudiogt
• lt/xslifgt

93
XSLT

• lttablegt
• ltxslfor-each order-by review
  selectaudiocollection/audiogt
• lttrgt
• lttdgtltxslvalue-of selectartist /gtlt/tdgt
• lttdgtltxslvalue-of selecttitle /gtlt/tdgt
• lttdgtltxslvalue-of select_at_review /gtlt/tdgt
• lt/trgt
• lt/tablegt

94
XSLT

• ltxsltemplate matchcommentsgt
• ltbgtComentarioslt/bgtltbr/gtltxslvalue-of/gtltbr/gt
• lt/xsltemplategt
• lt?xml-stylesheet hrefAudioCollection.xsl
  typetext/xsl?gt

95
XSLT

• lt?xml version1.0?gt
• ltxslstylesheet xmlnsxslhttp//www.w3.org/TR/WD-
  xslgt
• ltxsltemplate march/gt
• lthtmlgtltheadgtlttitlegtEjemplo XMLlt/titlegtlt/headgt
• ltbody bgcolorFFFFFFgt
• lth2gtColección de discoslt/h2gt
• ltxslfor-each selectaudiocollection/audiogt
• ltxslapply-templates selecttitle/gt

96
XSLT

• ltxslapply-templates select_at_year/gt
• ltxslapply-templates selectartist/gt
• ltxslapply-templates selecttrack/gt
• ltxslapply-templates selectcomments/gt
• lt/xslfor-eachgt
• lt/bodygtlt/htmlgt
• lt/xsltemplategt
• ltxsltemplate matchtitlegt
• ltbgtTítulo lt/bgtltigtltxslvalue-of/gtlt/igt
• lt/xsltemplategt

97
XSLT

• ltxsltemplate match_at_yeargt
• (ltxslvalue-of/gt)lt/brgt
• lt/xsltemplategt
• ltxsltemplate matchartistgt
• ltbgtArtista lt/bgtltxslvalue-ofgtltbr/gt
• lt/xsltemplategt
• lt/xslstylesheetgt

98
XML 2.0

• Qué hay de nuevo en XML 2.0?
• Nuevas tecnologias
• XFORMS
• XSLT 2.0
• XPath
• XPointer
• XQuery
• XLink

99
XLink/XPointer

• Hacen que los enlaces y la navegación de los
  documentos sean más interactivos
• XLink hace referencias a documentos XML mientras
  que XPointer hace referencia a otros tipos de
  recursos
• http//patito.com/doc.xmlid(c)
• http//patito.com/pagina.htmlobservaciones

100
Entidades

• lt?xml version1.0?gt
• lt!DOCTYPE estrenos estrenos.dtd
• lt!ENTITY titulo Programacion XMLgt
• lt!ENTITY pie -2007-gt
• gt
• lttitulogttitulolt/titulogt
• ltpie_de_paginagtpielt/pie_de_paginagt

101
Ubicación DTD

• lt!DOCTYPE nombre SYSTEM URLgt
• Forma FPI (Formal Public Identifier)
• //reconocido//dueño//descripción//idioma
• lt!DOCTYPE nombre PUBLIC -//MPE//DTD Ejemplo
  version 1.0//es URLgt
• Reconocido o -

102
Espacios de nombres

• Varios lenguajes pueden utilizar las mismas
  etiquetas y si se llegan a combinar podrían
  resultar problemas.
• ltpelículagt lttítulogt, ltdirectorgt, ltañogt
• ltpostulantegt lttítulogt, ltexperienciagt, ltidiomagt,
  ltresidenciagt
• ltpelículatítulogtltpostulantetítulogt

103
Espacios de nombres

• lt?xml version1.0?gt
• ltpospostulante xmlnsposURLgt
• ltpostítulogttec morelialt/postitulogt
• ltpfpelícula xmlnspfURL2gt
• ltpftítulogtCasa embrujadalt/pftítulogt
• lt/pfpelículagt
• lt/pospostulantegt

104
XHTML
105
Introducción

• XHTML
• Reformulación de HTML 4.0 en XML
• HTML
• El HyperText Markup Language es el lenguaje de
  publicación usado por la World Wide Web.
• Es una aplicación SGML (Standard Generalized
  Markup Language), un sistema para definir
  lenguajes para dar formatos a documentos.

106
Estructura XHTML

• Organización de elementos
• Elementos de nivel superior
• html, head, body
• Elementos de cabecera
• link, meta, script, style, title
• Elementos en bloque
• div, h1 a h6, hr, noscript, p, pre
• Elementos en línea
• br, a, img, map, area, script, span

107
Estructura XHTML (5)

• Listas
• dl, dt, dd, ul, ol, li
• Tablas
• table, caption, tr, th, td
• Elementos de frase
• abbr, acronym, code, em, strong, var
• Formularios
• form, button, fieldset, legend, input, label,
  select, optgroup, option, textarea

108
Atributos en XHTML

• Atributos principales
• Se pueden aplicar a la mayoría de los elementos.
• id permite asignar un identificador a un único
  elemento
• class permite asignar una clase o un conjunto de
  clases a un elemento.
• title permite aplicar un título a un elemento
  específico.
• style permite aplicar un estilo a un elemento
  específico.

109
Atributos en XHTML

• Atributos de internacionalización
• Se pueden aplicar a la mayoría de los elementos.
• lang especifica un lenguaje que se aplicará a un
  elemento y a su contenido. El valor del atributo
  debe especificarse conforme a la RFC 1766 (p.e,
  es-ES para español).
• dir especifica el sentido del texto de izquierda
  a derecha (dir"ltr", el valor por defecto) o de
  derecha a izquierda (dir"rtl").

110
Atributos en XHTML

• Atributos de teclado
• Se pueden aplicar a los elementos a, area y
  formularios.
• acceskey permite asignar una tecla de acceso
  rápido a un elemento.
• tabindex permite asignar un orden de tabulación
  a un elemento.

111
Atributos en XHTML

• Eventos
• Eventos de formulario
• onchange se ejecuta el script cuando el elemento
  cambia.
• onsubmit se ejecuta el script cuando se envía el
  formulario.
• onreset se ejecuta el script cuando se limpia el
  formulario.
• onselect se ejecuta el script cuando se
  selecciona el elemento.
• onblur se ejecuta el script cuando el elemento
  pierde el foco.
• onfocus se ejecuta el script cuando el elemento
  gana el foco.

112
Atributos en XHTML

• Eventos de ventana
• onload el script se ejecuta cuando se carga un
  documento.
• onunload el script se ejecuta cuando se descarga
  un documento.
• Eventos de teclado
• onkeydown el script se ejecuta cuando se
  presiona una tecla.
• onkeypress el script se ejecuta cuando se
  presiona y libera una tecla.
• onkeyup el script se ejecuta cuando se libera
  una tecla.

113
Atributos en XHTML

• Eventos de ratón
• onclick al hacer clic con el ratón.
• ondblclick al hacer doble clic con el ratón.
• onmousedown al presionar el botón del ratón.
• onmousemove cuando se mueve el puntero del
  ratón.
• onmouseout cuando el puntero del ratón se mueve
  fuera de un elemento.
• onmouseover cuando el puntero del ratón se
  mueve sobre un elemento
• onmouseup al liberar el botón del ratón.

114
Ejemplo de XHTML

• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Transitional//EN" "http//www.w3.org/TR/xhtml1/DTD
  /xhtml1-transitional.dtd"gt
• lthtmlgt
• ltheadgt
• lttitlegt
• My Home Page
• lt/titlegt
• lt/headgt
• ltbodygt
• lth1gtMy Home Page lt/h1gt
• ltpgt
• Welcome to my home page
• lt/pgt
• lt/bodygt
• lt/htmlgt

115
Estructura Jerárquica
116
Estructura de Documentos

• Los documentos tienen una estructura bien definida

117
Estructura de Documentos

• A nivel de programación se cuenta con un diseño
  lógico

118
Elementos de HTML depreciados en XHTML
119
Estructura de XHTML

• Existen dos tipos de etiquetas bloques
  contenedores y elementos Inline.
• Los contenedores de bloques definen la estructura
  de un documento, mientras que los elementos
  Inline contienen el contenido del documento.

120
Estructura de XHTML
121
Hijos de la Etiqueta HEAD
122
Div

• DIV encierra un conjunto de elementosltdiv
  styletext-align centergt lth2gt Newslt/h2gt
  ltpgtlta hrefbudget.htmlgtBudgetlt/agtlt/pgt ltpgtlta
  hrefinvest.htmlgtInvestmentlt/agtlt/pgtlt/divgt

123
DIVs

• No se recomienda el uso de etiquetas table para
  el diseño
• ltdiv id"article"gtxxxlt/divgt
• article
• width250px
• padding5px
• floatright

124
Span

• Spans encierra objetos (texto, gráficos) dentro
  de un elemento.ltpgtCall me Ishmael. Some years
  ago ltspan stylefont-style italicgtnever
  mind how long preciselylt/spangt having little or
  no money in my purse, and nothing particular to
  interest me on shore,

125
XHTML

• Algunas de las ventajas de usar XHTML son
• Se reduce ancho de banda
• El contenido se hace accesible a diversos
  dispositivos.
• Se tiene un código más limpio y fácil de mantener.

126
XHTML

• XHTML está enfocado en el fondo del documento
  (contenido) no en la forma (diseño).
• En 1995 Al Gore definió el término superautopista
  de la información, no superautopista del diseño.
• Existen tres tipos de documentos Transitional,
  Frameset, and Strict.

127
XHTML

• Están sustituyendo a HTML, pueden tener la
  extensión .htm o .html.
• Todas las etiquetas que abren deben de cerrar. Se
  deben cerrar las comillas simples o dobles.
• Las etiquetas van en minúscula

128
XHTML

• El tamaño del texto puede variar entre los
  distintos navegadores.
• Es recomendable incluir los atributos width y
  height en la etiqueta img para que el navegador
  asigne espacio desde el principio.
• El reducir estos atributos no afecta el tamaño de
  la imagen.

129
XHTML

• Se debe tener cuidado con los caracteres
  especiales. Se deben utilizar entidades como lt
  para gt.
• Utilizar la etiqueta label en los formularios.
• Se deben guardar el uso exacto de las etiquetas
  por ejemplo, h1, table, etc.

130
XHTML

• Utilice comentarios descriptivos al igual que
  sangrías para mejorar la legibilidad del código
  fuente.
• Las etiquetas deben cerrar jerárquicamente, no se
  permiten anidamientos inválidos.
• Poga siempre títulos a las páginas.

131
XHTML

• Coloque los elementos input ocultos al principio
  del formulario.
• Entre más metadatos se tenga, será más fácil
  posicionar los recursos Web en los primeros
  lugares.
• El método GET de HTTP no debe utilizarse para
  enviar datos, en su lugar debe de utilizarse a
  través de POST.

132
Validación de Páginas

• Se pueden validar la estructura de las páginas
  XHTML a través de la URL http//validator.w3.org
• Para validar hojas de estilo CSS se utiliza
  http//jigsaw.w3.org/css-validator/
• Existen otros tipos de validaciones de
  accesibilidad y certificados de algunas
  organizaciones.

133
Sopa de Etiquetas

• Se recomienda ampliamente sangrar el código.

134
Codificación

• Se debe tener mucho cuidado con el esquema de
  codificación del documento Web para no tener
  problemas con símbolos de puntuación como
  acentos.
• Se recomienda utilizar UTF-8 con el juego de
  caracteres ISO-LATIN

135
CSS
136
CSS en XML

• CSS Cascade StyleSheet
• Definen tipos de datos sin realizar ninguna
  transformación.
• No es muy utilizada en lenguajes XML (se
  recomienda mejor XSL) pero es muy utilizada en
  HTML y lenguajes de presentación.

137
Selectors

• Selector es simplesp color blue h1, h2, h3,
  h4 font-style italic
• Selectores contextualesul li font-weight
  bold main img border solid black 5px
  p.intro font-family verdana, sans-serif

138
El modelo de caja

• Todos los elementos de XHTML contienen padding,
  border, and margin

139
Diseño Visual con CSS
140
Esquema visual en capas
logoBranding
branding
secondaryContent
content
mainNav
subNav
141
Declaraciones Comunes

• Background, background-attachment background-colo
  r, background-repeat border, bottom, color,
  cursor, display, float, font, font-family,
  font-size, font-style, font-weight, height,
  left letter-spacing, line-height,
  list-style-image, list-style-position,
  list-style-type, margin, overflow, padding,
  position, right, text-align, text-decoration,
  text-indent, text-transform, top, vertical-align,
  visibility, white-space, width, word-spacing,
  word-wrap, z-index

142
Inclusión de CSS

• El ligado entre CSS y un documento XHTML se puede
  hacer de tres formas distintas
• ltSTYLE TYPE"text/css"gt / Styles go here...
  / lt/STYLEgt
• ltLINK REL"stylesheet" HREF"default.css"
  TYPE"text/css"gt
• ltP STYLE"color FF0000 font-weight bold"gt
  some text lt/Pgt

143
Ejemplo de CSS

• lthtmlgt
• ltheadgt
• ltstyle type"text/css"gt
• h2 text-align center color blue
• pre.java
• border solid
• left-margin 20px
• background-color FFFFEE
• color blue
• font-weight bold
• pre.cpp
• font-size 200
• border dashed
• left-margin 40px
• color red
• lt/stylegt
• lt/headgt

144
Ejemplo de CSS

• ltbodygt
• lth2gtJava Codelt/h2gt
• ltpre class"java"gt
• public static void main(String args)
• System.out.println("Hello world")
• lt/pregt
• lth2gtC Codelt/h2gt
• ltpre class"cpp"gt
• int main()
• cout ltlt "Hello"
• lt/pregt
• lt/bodygt
• lt/htmlgt

145
Representación Visual
146
Otro Ejemplo CSS

• lt?xml version1.0 ?gt
• lt?xml-stylesheet typetext/css
  hrefejemplo.css ?gt
• ltcomputadorgt
• ltcpugtInformaciónlt/cpugt
• ltteclado classclase1gtInfo Tecladolt/tecladogt
• ltraton classclase2gtInfo ratónlt/ratongt
• lt/computadorgt

147
Otro Ejemplo CSS

• .clase1 font-familiy sans-serif
• font-weight bold
• background red
• font-size 30pt
• .clase2 font-family fantasy
• background red
• font-size 30pt

148
DOM
149
DOM

• Document Object Model, Modelo de Objeto Documento
  es una interfaz de programación que permite
  operar con cualquier recurso XML como si fuese
  una estructura jerárquica tipo árbol.
• Para utilizar DOM el documento XML debe de estar
  bien formado y ser válido.
• Se recomienda ampliamente el uso del atributo id
  en las etiquetas del documento

150
DOM
151
DOM
document node
Document_type node lt!DOCTYPEgt
element node ltHTMLgt
element node ltHEADgt
element node ltBODYgt
element node ltTITLEgt
element node ltPgt
text node "Sample"
text node "This is a..."
152
DOM

• Existen tres tipos de nodos elementos, texto y
  atributos.
• DOM cuenta con mecanismos para acceder a los
  elementos
• getElementById('elementID') regresa un objeto
• getElementsByTagName('tag') regresa un arreglo
• Las relaciones que se dan entre los nodos son las
  siguientes

153
DOM

• parentNode
• previousSibling
• nextSibling
• childNodes
• firstChild - childNodes0
• lastChild - childNodesthis.childNodes.length-1

154
DOM

• Tiene tres elementos funcionales
• Propiedades
• className, href, innerHTML, src, style, target,
  value
• Métodos
• appendChild, createTextNode, getElementById,
  setAttribute

155
DOM

• Manejadores de Eventos
• onclick, onkeypress, onmouseover, onresize
• Ejemplo el objeto ancla ltagt
• Propiedades accessKey, href, id, tabIndex,
  target
• Métodos blur(), focus()
• Eventos onblur, onfocus

156
DOM

• ltscript type"text/javascript"gtlt!--
• function swapURL() document.getElementById('s
  earchLink').href "http//www.google.com"
• //--gtlt/scriptgt
• lta id"searchLink" href"http//www.yahoo.com"gtMy
  Search Enginelt/agt

157
DOM

• ltformgt
• ltinput type"button" onclick"swapURL()"
  value"Change URL!"gt
• lt/formgt

158
DOM

• Los objetos disponibles con DOM para una página
  XHTML son

Window
location
etc
frame
document
anchor
form
applet
link
image
checkbox
radio
text
etc
159
Javascript

• M.C. Juan Carlos Olivares Rojas

160
Javascript

• Es un lenguaje interpretado con una orientación a
  objetos no estricta. Permite definir el
  comportamiento de un sitio Web desde el navegador
  de los clientes.
• No existe el concepto de tipo de datos.
• Objetos como Date y Math son similares tanto en
  Java como Javascript

161
Javascript

• Las formas existentes de agregar Javascript en
  XHTML son
• ltSCRIPT TYPE"text/javascript"gt
• // Code goes here...
• lt/SCRIPTgt
• ltSCRIPT TYPE"text/javascript" SRC"code.js"gtlt/SCR
  IPTgt

162
Javascript

• ltINPUT TYPE"Button" onClick"alert('Hi
  there!')" VALUE"Hi"gt
• ltIMG SRC"blue.gif"
• onMouseOver"this.src'red.gif'"
  onMouseOut"this.src'blue.gif'" gt

163
Ejemplo 1

• lthtmlgt
• ltheadgtlttitlegtJavaScript HelloWorld!lt/titlegtlt/headgt
  
• ltbodygt
• ltscript language"JavaScriptgt
• document.write('Javascript says "Hello
  World!")
• lt/scriptgt
• lt/bodygt
• lt/htmlgt

164
Ejemplo 2

• function killBorder()
• if (document.getElementById("footer)
• myFooter document.getElementById("footer
  ")
• footerUL myFooter.getElementsByTagName("
  ul")
• for( var i 0 i lt footerUL.length i
  )
• footerList footerUL.item(i)

165
Ejemplo 2

• listElements footerList.getElementsByTagName("l
  i")
• footerLI listElements.item(0)
• footerLI.style.borderLeft 'none'
• window.onloadkillBorder

166
Ahora si AJAX

• Para lograr el asincronismo, se logra a través
  del objeto XMLHttpRequest que a continuación se
  describe.

167
Métodos de XMLHttpRequest
168
Propiedades de XMLHttpRequest
169
Secuencia de Pasos en Ajax

• 1. Crear el objeto XMLHttpRequest
• Otra forma de hacerlo es verificar si existe el
  objeto window.XMLHttpRequest

170
Secuencia de Pasos en AJAX

• 2. Hacer la petición del recurso de forma
  asíncrona
• 3. Esperar la respuesta

171
Secuencia de Pasos en AJAX

• 4 Agregado del script
• 5. Ejecución del script y obtención de resultados
  de manera asíncrona

172
Secuencia de pasos en AJAX

• Nótese que la función sndReq construye una
  petición pidiendo un parámetro, obteniendo una
  página, asociando el manejador de eventos y no
  enviando argumentos especiales en la petición
• El manejador de eventos verifica que se haya
  completado la respuesta, generalmente se valida
  que haya ocurrido con éxito (estado 200) y se
  procesa la respuesta.

173
API AJAX

• DOJO Toolkit (http//dojotoolkit.org/)
• Biblioteca JavaScript de código abierto
• Proporciona un API para el control y manipulación
  de historial
• Proporciona en el lado del cliente para la
  manipulación de URL y marcadores/favoritos
• Widgets
• Ordenar tablas
• Validación de formularios
• Menus y barras de menús
• Google y Yahoo! Maps

174
API AJAX

• Prototype (http//prototype.conio.net/)
• Framework en JavaScript para el desarrollo
  sencillo y dinámico de aplicaciones web
• Proyectos basados en Prototype
• Ruby on Rails (http//www.rubyonrails.com/)
• script.aculo.us, Thomas Fuchs (http//script.aculo
  .us/)
• Rico (http//openrico.org/)
• Behaviour (http//www.ripcord.co.nz/behaviour/)
• Existen otras como Script.aculo.us, Spry de
  Adobe, etc.

175
Ejemplo de Aplicaciones

• Gmail
• Gmail (http//gmail.com)
• Google Maps (http//maps.google.com/)
• Google Suggest (http//www.google.com/webhp?comple
  te1hlen)
• Google Calendar(http//www.google.com/calendar/)
• Microsoft
• Windows Live Mail (http//mail.live.com)
• Windows Local Live(antes MSN Virtual Earth,
  http//local.live.com)
• Amazon Maps (http//maps.a9.com/)
• Amazon (http//www.a9.com)
• HousingMaps (http//www.housingmaps.com/), con

176
Ejemplo de Aplicaciones

• Aplicaciones de Escritorio
• Suite de oficina
• gOffice (http//www.goffice.com/)
• Thinkfree(http//online.thinkfree.com/)
• Zimbra (http//www.zimbra.com)
• Procesadores de texto
• Writely (http//www.writely.com)
• FCKeditor(http//www.fckeditor.net/)
• Hoja de cálculo
• Num Sum (http//numsum.com)
• Numbler (http//numbler.com/)

177
Ejemplo de Aplicaciones

• Notas
• Webnote(http//www.aypwip.org/webnote/)
• Lector RSS
• Backbase (http//www.backbase.com/demos/RSS/)
• Netvibes (http//www.netvibes.com/)
• Mensajería instantánea
• Meebo (http//www.meebo.com/)
• IM (http//ajaxim.unwieldy.net/)
• Gestor de bases de datos MySQL (http//www.turboaj
  ax.com/turbodbadmin/)

178
Ejemplo de Aplicaciones

• Sistema Operativo (http//www.michaelrobertson.com
  /ajaxos/)
• AJAXLaunch
• AJAXWrite Procesador de textos
  (http//www.ajaxlaunch.com/ajaxwrite/)
• AJAXSketch Editor gráfico (http//www.ajaxsketch.
  com/)
• Eyespot Reproductor de Video (http//www.eyespot.
  com/)
• ajaxXLS Hojas de cálculo (http//www.ajaxxls.com/
  )
• ajaxTunes Reproductor de música
  (http//www.ajaxtunes.com/)
• ajaxOS Sistema Operativo basado en Linspire
  (http//www.myajaxos.com/)

179
Javascript no obstrusivo

• La principal problemática de Javascript es que
  muchos navegadores no tienen soporte para
  Javascript o bien está deshabilitado por razones
  de seguridad.
• Este motivo origina que las páginas Web no sean
  accesibles por todos los navegadores.
• Esta problemática se puede solucionar con la
  separación de javascript del código XHTML.

180
Javascript no obstrusivo

• A esta técnica se le llama Javascript no
  obstrusivo, que correctamente se debería de
  llamar no invasivo o Accesible.
• Lo que se pretende es separar el comportamiento
  (Javascript) del contenido (XHTML) y de la
  presentación (CSS) de las páginas.
• A continuación se muestra un pequeño ejemplo de
  ello.

181
Javascript no obstrusivo

• Tradicionalmente se tiene el código Javascript de
  la siguiente forma
• ltinput type"text" name"fecha"
  onchange"validateDate(this)" /gt
• ltscript type"text/javascript" src"archivoJavascr
  ipt.js"gtlt/scriptgt
• Sino se tiene Javascript no se podrían aplicar
  validaciones a un formulario.

182
Javascript no obstrusivo

• ltform name"formulario" action"recibidor.php"
  method"post"gtltinput type"text" name"fecha"
  id"campoFecha" /gtltbutton type"submit"gtEnviarlt/bu
  ttongtlt/formgt
• Si se deja esta forma la validación se hace en el
  servidor pero puede ser más tardado y con mayor
  carga de trabajo para el servidor. Si se utiliza
  Javascript no obstrusivo puede mejorarse la
  validación.

183
Javascript no obstrusivo

• // Función de validación
• function validaFecha()
• var elCampo document.getElementById("campoFecha"
  ) var resultado /\d2\/\d2\/\d4/.test(
  elCampo.value )
• if( resultado ) return resultado
• else
• alert("El formato de fecha es dd/dd/dddd")return
  false

184
Javascript no obstrusivo

• // Función que añade un evento a un objeto del
  DOM
• function listen(event, elem, func)
• if (elem.addEventListener)// W3C
• return elem.addEventListener(event,func,false)
• else if (elem.attachEvent)// IE
• return elem.attachEvent("on"event, func)
• else throw "No es posible añadir evento"return
  false

185
Javascript no obstrusivo

• // Asociamos al evento submit del formulario la
  función validaFecha
• var elFormulario document.forms"formulario"li
  sten("submit", elFormulario, validaFecha)
• Si se tiene Javascript se agrega este código en
  XHTML vía DOM sino se tiene no se agrega pero las
  validaciones tienen que hacerse en el servidor.

186
Javascript no Obstrusivo

• Reglas del Javascript no obstrusivo
• Nunca, bajo ninguna circunstancia incluyas
  javascript directamente en el documento.
• Javascript es una mejora, no un sistema de
  seguridad.
• Revisa la disponibilidad de un objeto antes de
  acceder a él.

187
Javascript no Obstrusivo

• Crea un Javascript no especifico para un
  navegador
• No uses variables de otros scripts.
• Mantén los efectos de ratón de forma independiente

188
Microformatos

• Los microformatos permiten agregar contenido
  semántico a la Web.
• Son una forma simple de agregar significado
  semántico a un contenido legible por el humano y
  que para la máquina es sólo texto plano.
• Los microformatos son mantenidos y especificados
  por Microformats.org

189
Microformatos

• Los microformatos se aregan a través de los
  atributos de XHTML class, rel y rev.
• Por ejemplo, en el texto "Las aves anidaron en
  52.48,-1.89" los números pueden ser entendidos,
  de acuerdo con el contexto, como coordenadas
  geográficas.
• Las aves anidaron en ltspan class"geo"gt
  ltspan class"latitude"gt52.48lt/spangt, ltspan
  class"longitude"gt-1.89lt/spangt lt/spangt

190
Microformatos

• En el ejemplo anter