Visualizaci

1
Visualización de documentos XML con HTML
2
la etiqueta ltxmlgt de HTML

• Es una técnica de Microsoft. En exploradores
  diferentes a IE5 es probable que funcione igual
  el uso del elemento script
• ltscript languagexml typetext/xml
  idnombre_id srcdocumento_XML.xmlgt...lt/script
  gt
• Es una técnica para la introducción de datos XML
  en una página web HTML
• Microsoft la denomina vinculación de datos (data
  binding)
• Técnica ligada al desarrollo técnico conocido
  como ADO (ActiveX Data Object)
• Se trata de un desarrollo que puede proporcionar
  unos controles de acceso remoto a datos conocidos
  como controles DSO (Data Source Object)
• Mediante la etiqueta ltxmlgt se puede incluir y
  gestionar datos XML (data island) en el interior
  de un documento HTML

3
ltHTMLgt ltHEADgt ltTITLEgtEsto es una
pruebalt/TITLEgt lt/HEADgt ltBODYgt ltXML IDpruebaDSO
hrefprueba.xmlgtlt/XMLgt .................... lt/BO
DYgt lt/HTMLgt
4
lt?xml version"1.0" encoding"ISO-8859-1"
?gt ltalumnosgt ltalumnogt ltnumerogt1lt/numerogt
ltnombregtEduardolt/nombregt ltapellidogtPeislt/apel
lidogt ltnivelgtIniciaciónlt/nivelgt
ltcursogtXMLlt/cursogt lt/alumnogt ltalumnogt
ltnumerogt2lt/numerogt ltnombregtJaimelt/nombregt
ltapellidogtPérezlt/apellidogt ltnivelgtAvanzadolt/ni
velgt ltcursogtWindows 2000lt/cursogt lt/alumnogt
ltalumnogt ltnumerogt3lt/numerogt ltnombregtJosé
Manuellt/nombregt ltapellidogtGaldolt/apellidogt
ltnivelgtBásicolt/nivelgt ltcursogtHTMLlt/cursogt
lt/alumnogt ltalumnogt ltnumerogt4lt/numerogt
ltnombregtMaría Teresalt/nombregt
ltapellidogtOrtegalt/apellidogt
ltnivelgtMediolt/nivelgt ltcursogtUNIXlt/cursogt
lt/alumnogt lt/alumnosgt
5
ltHTMLgt ltHEADgt ltTITLEgtEsto es una
pruebalt/TITLEgt lt/HEADgt ltBODYgt ltXML
IDpruebaDSO_2gt ltalumnosgt ltalumnogt..........lt/a
lumnogt ltalumnogt..........lt/alumnogt ltalumnogt.....
.....lt/alumnogt ltalumnogt..........lt/alumnogt lt/alum
nosgt lt/XMLgt ............. lt/BODYgt lt/HTMLgt
6
tabla típica HTML
..... ltbodygt ..... lttablegt ltcaptiongtLISTA DE
ALUMNOSlt/captiongt lttheadgt ltthgtNúmerolt/thgt ltthgtNomb
relt/thgt ltthgtApellidolt/thgt ltthgtCursolt/thgt ltthgtNivel
lt/thgt lt/theadgt lttbodygt lttrgt lttdgt1lt/tdgt lttdgtEduardo
lt/tdgt lttdgtPeislt/tdgt lttdgtXMLlt/tdgt lttdgtIniciaciónlt/t
dgt lt/trgt lttrgt ..... lt/trgt lt/tbodygt lt/tablegt .... lt
/bodygt ....
7
lthtmlgt ltheadgt lttitlegtLista de alumnos
1lt/titlegt lt/headgt ltbodygt ltxml id"ListaAlumnos1"
src"alumnos04_01.xml"gtlt/xmlgt lttable
datasrc"ListaAlumnos1" border"1"gt
ltcaptiongtLISTA DE ALUMNOSlt/captiongt lttheadgt
ltthgtNúmerolt/thgt ltthgtNombrelt/thgt
ltthgtApellidolt/thgt ltthgtCursolt/thgt
ltthgtNivellt/thgt lt/theadgt lttbodygt lttrgt
lttdgtltspan datafld"numero"gtlt/spangtlt/tdgt
lttdgtltspan datafld"nombre"gtlt/spangtlt/tdgt
lttdgtltspan datafld"apellido"gtlt/spangtlt/tdgt
lttdgtltspan datafld"curso"gtlt/spangtlt/tdgt
lttdgtltspan datafld"nivel"gtlt/spangtlt/tdgt lt/trgt
lt/tbodygt lt/tablegt lt/bodygt lt/htmlgt
8
........ ltalumnogt ltnumerogt1lt/numerogt
ltnombregtEduardolt/nombregt ltapellidogtPeislt/apellid
ogt ltedadgt19lt/edadgt ltnivelgtIniciaciónlt/nivelgt
ltcursogtXMLlt/cursogt ltsexogtHlt/sexogt ltobservaciones
gtPendiente de pagolt/observacionesgt lt/alumnogt ltalum
nogt ltnumerogt2lt/numerogt ltnombregtJaimelt/nombregt
ltapellidogtPérezlt/apellidogt ltedad /gt
ltnivelgtAvanzadolt/nivelgt ltcursogtWindows
2000lt/cursogt ltsexogtHlt/sexogt ltobservacionesgtHizo
el curso de Iniciación en 1998lt/observacionesgt
lt/alumnogt ........
9
Eduardo Peis ejemplo04_05.htm
lthtmlgt ltheadgtlttitlegtLista de alumnos
3lt/titlegt ltstyle type"text/css"gt body
font-familyVerdana,sans-serif
font-size12pt h2 font-familyComic Sans
MSfont-size16pxcolornavy lt/stylegt lt/headgt ltb
odygt ltcentergt lth2gtLISTADO DE ALUMNOS del Centro
"TODO-WEB"lt/h2gt ltxml id"ListaAlumnos3"
src"alumnos04_04.xml"gtlt/xmlgt lttable
datasrc"ListaAlumnos3" border"0"
cellspacing"4" cellpadding"2"gt ltcaptiongtLISTA
DE ALUMNOSlt/captiongt lttheadgt lttr
bgcolor"cc99cc"gt ltthgtNúmlt/thgt ltthgtNombrelt/thgt ltt
hgtApellidolt/thgt ltthgtCursolt/thgt ltthgtNivellt/thgt ltthgt
Edadlt/thgt lt/trgt lt/theadgt lttbodygt lttr
bgcolor"cccccc"gt lttd align"center"gt ltspan
datafld"numero"gtlt/spangt lt/tdgt lttd align"right"gt
ltspan datafld"nombre"gtlt/spangt lt/tdgt lttdgtltbgt
ltspan datafld"apellido"gtlt/spangt lt/bgtlt/tdgt lttd
align"center"gt ltspan datafld"curso"gtlt/spangt
lt/tdgt lttd bgcolor"ff9999"gtltugt ltspan
datafld"nivel"gtlt/spangt ltugtlt/tdgt lttd
align"center"gt ltspan datafld"edad"gtlt/spangt
lt/tdgt lt/trgtlt/tbodygtlt/tablegtlt/centergtlt/bodygtlt/htmlgt

10
Eduardo Peis ejemplo04_06.htm
lthtmlgt ltheadgt lttitlegtLista de alumnos
4lt/titlegt ltstyle type"text/css"gt body
font-familyVerdana,sans-serif font-size12px
font-weightnormal h2 font-familyComic Sans
MSfont-size16pxcolornavy lt/stylegt lt/headgt ltbo
dygt ltcentergt lth2gtLISTADO DE ALUMNOS del Centro
"TODO-WEB"lt/h2gt ltxml id"ListaAlumnos4"
src"alumnos04_04.xml"gtlt/xmlgt lttable
datasrc"ListaAlumnos4" border"0"
cellspacing"4" cellpadding"2"gt ltcaptiongtLISTA
DE ALUMNOSlt/captiongt lttheadgt lttr
bgcolor"cc99cc"gt ltthgtNúmlt/thgt ltthgtNombrelt/thgt ltt
hgtApellidolt/thgt ltthgtCursolt/thgt ltthgtNivellt/thgt lt/tr
gt lt/theadgt lttbodygt lttr bgcolor"cccccc"gt lttd
align"center"gtltspan datafld"numero"gtlt/spangtlt/tdgt
lttd align"right"gtltspan datafld"nombre"gtlt/spangtlt
/tdgt lttdgtltbgtltspan datafld"apellido"gtlt/spangtlt/bgtlt/
tdgt lttd align"center"gtltspan datafld"curso"gtlt/spa
ngtlt/tdgt lttd bgcolor"ff9999"gtltugtltspan
datafld"nivel"gtlt/spangtltugtlt/tdgt lt/trgt lt/tbodygt lt/t
ablegt ltpgtnbsplt/pgt
Sigue ?
11
lttable datasrc"ListaAlumnos4" border"0"
cellspacing"4" cellpadding"2"gt ltcaptiongtOBSERVAC
IONES DE ALUMNOSlt/captiongt lttheadgt lttr
bgcolor"cc99cc"gt ltthgtNombrelt/thgt ltthgtApellidolt/t
hgt ltthgtEdadlt/thgt ltthgtObservacioneslt/thgt lt/trgt lt/th
eadgt lttbodygt lttr bgcolor"cccccc"gt lttd
align"right"gtltspan datafld"nombre"gtlt/spangtlt/tdgt
lttdgtltbgtltspan datafld"apellido"gtlt/spangtlt/bgtlt/tdgt lt
td align"center"gtltspan datafld"edad"gtlt/spangtlt/td
gt lttd bgcolor"ccffcc"gtltigtltspan
datafld"observaciones"gtlt/spangtltigtlt/tdgt lt/trgt lt/tb
odygt lt/tablegt lt/centergt lt/bodygt lt/htmlgt
12
Eduardo Peis asimétricos
lt?xml version"1.0" encoding"ISO-8859-1"
?gt ltalumnosgt ltalumnogt ltnumerogt1lt/numerogt
ltnombregtEduardolt/nombregt ltapellidogtPeislt/apel
lidogt ltedadgt19lt/edadgt ltnivelgtIniciaciónlt/nive
lgt ltcursosgt ltcurso1gtXMLlt/curso1gt ltcur
so2gtHTMLlt/curso2gt ltcurso3 /gt lt/cursosgt ltsexo
gtHlt/sexogt ltobservacionesgtPendiente de
pagolt/observacionesgt lt/alumnogt .....
13
Eduardo Peis Ejemplo04_08.html
lthtmlgt ltheadgt.......lt/headgt ltbodygtltcentergt lth2gtLIS
TADO DE ALUMNOS del Centro "TODO-WEB"lt/h2gt ltxml
id"ListaAlumnos5" src"alumnos04_07.xml"gtlt/xmlgt lt
table datasrc"ListaAlumnos5" border"0"
cellspacing"4" cellpadding"2"gt ltcaptiongtLISTA
DE ALUMNOSlt/captiongt lttheadgtlttr
bgcolor"cc99cc"gt ..... lt/trgtlt/theadgt lttbodygt lttr
bgcolor"cccccc"gt lttd align"center"gtltspan
datafld"numero"gtlt/spangtlt/tdgt lttd
align"right"gtltspan datafld"nombre"gtlt/spangtlt/tdgt
lttdgtltbgtltspan datafld"apellido"gtlt/spangtlt/bgtlt/tdgt lt
tdgt lttable datasrc"ListaAlumnos5"
datafld"cursos" cellspacing"0"gt lttbodygt lttrgt lttd
gt ltspan datafld"curso1"gtlt/spangtltbrgt ltspan
datafld"curso2"gtlt/spangtltbrgt ltspan
datafld"curso3"gtlt/spangtnbsp lt/tdgt lt/trgt lt/tbody
gt lt/tablegt
14
Eduardo Peis Alumnos04_09.xml
lt?xml version"1.0" encoding"ISO-8859-1"
?gt ltalumnosgt ......... ltalumnogt
ltnumerogt3lt/numerogt ltnombregtJosé
Manuellt/nombregt ltapellidogtGaldolt/apellidogt lt
edadgt21lt/edadgt ltcursosgt
ltcurso1gtHTMLlt/curso1gt ltcurso2gtJavaScriptlt/curso
2gt ltcurso3gtASPlt/curso3gt lt/cursosgt ltnivelesgt
ltnivel1gtBásicolt/nivel1gt ltnivel2gtMediolt/niv
el2gt ltnivel3gtIniciaciónlt/nivel3gt lt/nivelesgt
ltsexogtHlt/sexogt ltobservacionesgtFalta mucho a
claselt/observacionesgt lt/alumnogt ..........
15
Eduardo Peis Ejemplo04_10.htm
......... ltxml id"ListaAlumnos6"
src"alumnos04_09.xml"gtlt/xmlgt lttable
datasrc"ListaAlumnos6" border"0"
cellspacing"4" cellpadding"2"gt ltcaptiongtLISTA
DE ALUMNOSlt/captiongt lttheadgtlttr
bgcolor"cc99cc"gt ltthgtNúmlt/thgt ......... lttbodygt
lttr bgcolor"cccccc"gt lttd align"center"gtltspan
datafld"numero"gtlt/spangtlt/tdgt lttd
align"right"gtltspan datafld"nombre"gtlt/spangtlt/tdgt
lttdgtltbgtltspan datafld"apellido"gtlt/spangtlt/bgtlt/tdgt lt
tdgt lttable datasrc"ListaAlumnos6"
datafld"cursos" cellspacing"0"gt lttbodygt lttrgt lttd
gt ltspan datafld"curso1"gtlt/spangtltbrgt ltspan
datafld"curso2"gtlt/spangtltbrgt ltspan
datafld"curso3"gtlt/spangtnbsp lt/tdgt lt/trgtlt/tbodygt
lt/tablegtlt/tdgt lttdgt lttable datasrc"ListaAlumnos6"
datafld"niveles" cellspacing"0"gt lttbodygt lttrgt lt
tdgt ltspan datafld"nivel1"gtlt/spangtltbrgt ltspan
datafld"nivel2"gtlt/spangtltbrgt ltspan
datafld"nivel3"gtlt/spangtnbsp lt/tdgt lt/trgtlt/tbodygt
lt/tablegtlt/tdgt lt/trgtlt/tbodygtlt/tablegtlt/centergtlt/body
gtlt/htmlgt
16
Eduardo Peis control atributos
lt?xml version"1.0" encoding"ISO-8859-1"
?gt ltalumnosgt ltalumno numero"1"gt
ltnombregtEduardolt/nombregt ....... ltalumno
numero"2"gt ltnombregtJaimelt/nombregt
ltapellidogtPérezlt/apellidogt ....... ltalumno
numero"3"gt ltnombregtJosé Manuellt/nombregt
ltapellidogtGaldolt/apellidogt ltedadgt21lt/edadgt ltcurs
osgt ltcurso1gtHTMLlt/curso1gt ltcurso2gtJavaScri
ptlt/curso2gt ltcurso3gtASPlt/curso3gt lt/cursosgt ltni
velesgt ltnivel1gtBásicolt/nivel1gt ltnivel2gtMediolt/
nivel2gt ltnivel3gtIniciaciónlt/nivel3gt lt/nivelesgt
ltsexogtHlt/sexogt ltobservacionesgtFalta mucho a
claselt/observacionesgt lt/alumnogt ........
17
Eduardo Peis Ejemplo04_12.htm
..... ltxml id"ListaAlumnos7" src"alumnos04_11.xm
l"gtlt/xmlgt lttable datasrc"ListaAlumnos7"
border"0" cellspacing"4" cellpadding"2"gt ltcapti
ongtLISTA DE ALUMNOSlt/captiongt ..... lttbodygt lttr
bgcolor"cccccc"gt lttd align"center"gtltspan
datafld"numero"gtlt/spangtlt/tdgt lttd
align"right"gtltspan datafld"nombre"gtlt/spangtlt/tdgt
lttdgtltbgtltspan datafld"apellido"gtlt/spangtlt/bgtlt/tdgt lt
tdgt lttable datasrc"ListaAlumnos7"
datafld"cursos" cellspacing"0"gt lttbodygt lttrgt lttd
gt ltspan datafld"curso1"gtlt/spangtltbrgt ltspan
datafld"curso2"gtlt/spangtltbrgt ltspan
datafld"curso3"gtlt/spangtnbsp lt/tdgt lt/trgt lt/tbody
gt ....
18
Eduardo Peis Alumnos04_13.xml
....... ltalumno numero"3"gt ltnombregtJosé
Manuellt/nombregt ltapellidogtGaldolt/apellidogt lte
dadgt21lt/edadgt ltcursosgt ltcurso1gtHTMLlt/curso
1gt ltnivel1gtBásicolt/nivel1gt ltcurso2gtJavaScrip
tlt/curso2gt ltnivel2gtMediolt/nivel2gt ltcurso3gtAS
Plt/curso3gt ltnivel3gtIniciaciónlt/nivel3gt lt/curso
sgt ltsexogtHlt/sexogt ltobservacionesgtFalta mucho a
claselt/observacionesgt lt/alumnogt .......
19
Eduardo Peis Ejemplo04_14.html
..... ltxml id"ListaAlumnos8" src"alumnos04_13.xm
l"gtlt/xmlgt lttable datasrc"ListaAlumnos8"
border"0" cellspacing"4" cellpadding"2"gt .... lt
tbodygt lttr bgcolor"cccccc"gt lttd
align"center"gtltspan datafld"numero"gtlt/spangtlt/tdgt
lttd align"right"gtltspan datafld"nombre"gtlt/spangtlt
/tdgt lttdgtltbgtltspan datafld"apellido"gtlt/spangtlt/bgtlt/
tdgt lttdgt lttable datasrc"ListaAlumnos8"
datafld"cursos" cellspacing"0"gt lttbodygt lttrgt lttd
gt ltbgtltspan datafld"curso1"gtlt/spangtlt/bgtnbsp ltigtlt
span datafld"nivel1"gtlt/spangtlt/igtltbrgt ltbgtltspan
datafld"curso2"gtlt/spangtlt/bgtnbsp ltigtltspan
datafld"nivel2"gtlt/spangtlt/igtltbrgt ltbgtltspan
datafld"curso3"gtlt/spangtlt/bgtnbsp ltigtltspan
datafld"nivel3"gtlt/spangtlt/igtnbsp lt/tdgt lt/trgt lt/t
bodygt ....
20
Eduardo Peis Gestión individual de datos
........... ltxml id"ListaAlumnos9"
src"alumnos04_04.xml"gtlt/xmlgt ........... ltpgtNúmer
o ltbgtltspan datasrc"ListaAlumnos9"
datafld"numero"gtlt/spangtlt/bgtlt/pgt ltpgtAlumno
ltbgtltspan datasrc"ListaAlumnos9"
datafld"nombre"gtlt/spangtnbsp ltspan
datasrc"ListaAlumnos9" datafld"apellido"gtlt/span
gtlt/bgtlt/pgt ltpgtEdad ltbgtltspan datasrc"ListaAlumnos
9" datafld"edad"gtlt/spangtlt/bgtnbsp Sexo
ltbgtltspan datasrc"ListaAlumnos9"
datafld"sexo"gtlt/spangtlt/bgtlt/pgt lthr width"500"
align"left"gt ltpgtCurso ltbgtltspan
datasrc"ListaAlumnos9" datafld"curso"gtlt/spangtlt
/bgtlt/pgt ltpgtNivel ltbgtltspan datasrc"ListaAlumnos9
" datafld"nivel"gtlt/spangtlt/bgtlt/pgt ltpgtObservaciones
ltbgtltspan datasrc"ListaAlumnos9"
datafld"observaciones"gt lt/spangtlt/bgtlt/pgt lthr
width"500" align"left"gt ..........
Sigue ?
21
.......... ltcentergt ltbutton onclick"ListaAlumnos9
.recordset.MoveFirst()" title"Principio"gt
nbspnbspltltnbspnbsp lt/buttongtnbsp
ltbutton onclick"if (! ListaAlumnos9.recordset.BO
F) ListaAlumnos9.recordset.MovePrevious()"
title"Anterior"gt nbspltnbsp lt/buttongtnbsp
ltbutton onclick"if (! ListaAlumnos9.recordset.E
OF) ListaAlumnos9.recordset.MoveNext()"
title"Siguiente"gt nbspgtnbsp lt/buttongtnbs
p ltbutton onclick"ListaAlumnos9.recordset.MoveLa
st()" title"Final"gt nbspnbspgtgtnbsp
nbsp lt/buttongt lt/centergt lt/bodygt lt/htmlgt
22
......... ltxml id"ListaAlumnos10"
src"alumnos04_04.xml"gtlt/xmlgt ......... ltpgtNúmero
ltbgtltspan datasrc"ListaAlumnos10"
datafld"numero"gtlt/spangtlt/bgtlt/pgt ltpgtNombre
ltinput type"text" datasrc"ListaAlumnos10"
datafld"nombre" size"25"gtlt/pgt ltpgtApellido
ltinput type"text" datasrc"ListaAlumnos10"
datafld"apellido" size"25"gt ltpgtEdad ltbgtltspan
datasrc"ListaAlumnos10" datafld"edad"gtlt/spangtlt/
bgtnbspnbspnbspnbspnbspnbspnbsp Sexo
ltinput type"radio" datasrc"ListaAlumnos10"
datafld"sexo" value"H"gtHombre ltinput
type"radio" datasrc"ListaAlumnos10"
datafld"sexo" value"M"gtMujerlt/pgt lthr
width"500" align"left"gt ltpgtCurso ltselect
datasrc"ListaAlumnos10" datafld"curso"
size"1"gt ltoption value"HTML"gtHTML ltoption
value"UNIX"gtUNIX ltoption value"Windows
2000"gtWindows 2000 ltoption value"XML"gtXML lt/selec
tgtnbspnbspnbspnbspnbspnbsp Nivel
ltselect datasrc"ListaAlumnos10" datafld"nivel"
size"1"gt ltoption value"Iniciación"gtIniciación lto
ption value"Básico"gtBásico ltoption
value"Medio"gtMedio ltoption value"Avanzado"gtAvanz
ado lt/selectgtlt/pgt ltpgtObservaciones ltbgtltspan
datasrc"ListaAlumnos10" datafld"observaciones"gt
lt/spangtlt/bgtlt/pgt ..........
variantes
23
.............. ltxml id"ListaAlumnos11"
src"alumnos04_18.xml"gtlt/xmlgt lttable id"lista"
datasrc"ListaAlumnos11" datapagesize"2"
border"0" cellspacing"4" cellpadding"2"gt ......
........ lttr bgcolor"cccccc"gt lttd
align"center"gtltspan datafld"numero"gtlt/spangtlt/tdgt
lttd align"left"gtltspan datafld"nombre"gtlt/spangtn
bsp ltbgtltspan datafld"apellido"gtlt/spangtlt/bgtlt/tdgt
lttd align"center"gtltspan datafld"curso"gtlt/spangtlt/
tdgt lttd bgcolor"ff9999"gtltugtltspan
datafld"nivel"gtlt/spangtlt/ugtlt/tdgt lttd
align"center"gtltspan datafld"edad"gtlt/spangtlt/tdgt lt
/trgt lt/tbodygt lt/tablegt lthr width"500"gt ltbutton
onclick"lista.firstPage()" title"Principio"gt nb
spnbspltltnbspnbsp lt/buttongtnbsp ltbu
tton onclick"if (! ListaAlumnos11.recordset.BOF)
lista.previousPage()" title"Anterior"gt
nbspltnbsplt/buttongtnbsp ltbutton
onclick"if (! ListaAlumnos11.recordset.EOF)
lista.nextPage()" title"Siguiente"gt
nbspgtnbsplt/buttongtnbsp ltbutton
onclick"lista.lastPage()" title"Final"gt
nbspnbspgtgtnbspnbsplt/buttongtnbsp
lt/centergt lt/bodygt lt/htmlgt
Navegación controlada