Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/xhtml___css.pdf ·...
Transcript of Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/xhtml___css.pdf ·...
![Page 1: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/xhtml___css.pdf · XML, XPath, XSLT, XLink, XSD, ... MathML, SMIL, SVG ... (HTML) de presentación (CSS).](https://reader036.fdocuments.co/reader036/viewer/2022062604/5fbfa511bbb7a449dc31392e/html5/thumbnails/1.jpg)
Aplicaciones WebXHTML+CSS
David Cabrero Souto
Grupo MADS (http://www.grupomads.org/)Universidade da Coruña
![Page 2: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/xhtml___css.pdf · XML, XPath, XSLT, XLink, XSD, ... MathML, SMIL, SVG ... (HTML) de presentación (CSS).](https://reader036.fdocuments.co/reader036/viewer/2022062604/5fbfa511bbb7a449dc31392e/html5/thumbnails/2.jpg)
W3C
Establece estándares: recomendaciones.HTML 4.0XHTML 1.0, XHTML 1.1, XHTML 2.0, XFORMSCSS1, CSS2, CSS3XML, XPath, XSLT, XLink, XSD, . . .MathML, SMIL, SVG. . .
Estilo: separar contentido (HTML) de presentación (CSS).
![Page 3: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/xhtml___css.pdf · XML, XPath, XSLT, XLink, XSD, ... MathML, SMIL, SVG ... (HTML) de presentación (CSS).](https://reader036.fdocuments.co/reader036/viewer/2022062604/5fbfa511bbb7a449dc31392e/html5/thumbnails/3.jpg)
XHTML
Tres sabores de XHTML 1.0:XHTML 1.0 StrictXHTML 1.0 TransitionalXHTML 1.0 Frameset
Lenguaje XML.Documento = árbol XML.Elementos contienen otros elementos.Cada elemento está marcado por dos etiquetas inicio y fin.Sintaxis:
Etiquetas encerradas en ángulos “<” y “>”.“<etiqueta>”, “</etiqueta>”.No se pueden cruzar etiquetas de elementos anidados.Nombres de etiquetas en minúsculas.Valores de atributos entre comillas.
<etiqueta attr=”valor”></etiqueta>
Comentarios: “<!– Comentario –>”
![Page 4: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/xhtml___css.pdf · XML, XPath, XSLT, XLink, XSD, ... MathML, SMIL, SVG ... (HTML) de presentación (CSS).](https://reader036.fdocuments.co/reader036/viewer/2022062604/5fbfa511bbb7a449dc31392e/html5/thumbnails/4.jpg)
Estrucutura de un documento XHTML
HTML
Elemento raíz del documento.Principio y fin: “<html>” “</html>”.
HEAD (“<head></head>”)
Metainformación del documento.Primer elemento.Ejemplo: “<title>¡Hola Web!</title>”.Ejemplo: “<meta name="keywords" content="Linux,Accesibilidad, Distribución" />”
BODY (“<body></body>”)
Después de HEAD.Encierra el contenido del documento.
![Page 5: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/xhtml___css.pdf · XML, XPath, XSLT, XLink, XSD, ... MathML, SMIL, SVG ... (HTML) de presentación (CSS).](https://reader036.fdocuments.co/reader036/viewer/2022062604/5fbfa511bbb7a449dc31392e/html5/thumbnails/5.jpg)
Estrucutura de un documento XHTML
HTML
Elemento raíz del documento.Principio y fin: “<html>” “</html>”.
HEAD (“<head></head>”)
Metainformación del documento.Primer elemento.Ejemplo: “<title>¡Hola Web!</title>”.Ejemplo: “<meta name="keywords" content="Linux,Accesibilidad, Distribución" />”
BODY (“<body></body>”)
Después de HEAD.Encierra el contenido del documento.
![Page 6: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/xhtml___css.pdf · XML, XPath, XSLT, XLink, XSD, ... MathML, SMIL, SVG ... (HTML) de presentación (CSS).](https://reader036.fdocuments.co/reader036/viewer/2022062604/5fbfa511bbb7a449dc31392e/html5/thumbnails/6.jpg)
Estrucutura de un documento XHTML
HTML
Elemento raíz del documento.Principio y fin: “<html>” “</html>”.
HEAD (“<head></head>”)
Metainformación del documento.Primer elemento.Ejemplo: “<title>¡Hola Web!</title>”.Ejemplo: “<meta name="keywords" content="Linux,Accesibilidad, Distribución" />”
BODY (“<body></body>”)
Después de HEAD.Encierra el contenido del documento.
![Page 7: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/xhtml___css.pdf · XML, XPath, XSLT, XLink, XSD, ... MathML, SMIL, SVG ... (HTML) de presentación (CSS).](https://reader036.fdocuments.co/reader036/viewer/2022062604/5fbfa511bbb7a449dc31392e/html5/thumbnails/7.jpg)
Elementos XHTML
Encabezados: h1, h2, h3, . . .Párrafos: pListas:
Desordenada: ulOrdenada: olElemento de la lista: li
Lista de definiciones: dlTérmino: dtDefinición: dd
Enfasis: emCitas: citeAcrónimo: abbr, acronym
![Page 8: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/xhtml___css.pdf · XML, XPath, XSLT, XLink, XSD, ... MathML, SMIL, SVG ... (HTML) de presentación (CSS).](https://reader036.fdocuments.co/reader036/viewer/2022062604/5fbfa511bbb7a449dc31392e/html5/thumbnails/8.jpg)
Elementos XHTML
Encabezados: h1, h2, h3, . . .Párrafos: pListas:
Desordenada: ulOrdenada: olElemento de la lista: li
Lista de definiciones: dlTérmino: dtDefinición: dd
Enfasis: emCitas: citeAcrónimo: abbr, acronym
![Page 9: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/xhtml___css.pdf · XML, XPath, XSLT, XLink, XSD, ... MathML, SMIL, SVG ... (HTML) de presentación (CSS).](https://reader036.fdocuments.co/reader036/viewer/2022062604/5fbfa511bbb7a449dc31392e/html5/thumbnails/9.jpg)
Elementos XHTML
Encabezados: h1, h2, h3, . . .Párrafos: pListas:
Desordenada: ulOrdenada: olElemento de la lista: li
Lista de definiciones: dlTérmino: dtDefinición: dd
Enfasis: emCitas: citeAcrónimo: abbr, acronym
![Page 10: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/xhtml___css.pdf · XML, XPath, XSLT, XLink, XSD, ... MathML, SMIL, SVG ... (HTML) de presentación (CSS).](https://reader036.fdocuments.co/reader036/viewer/2022062604/5fbfa511bbb7a449dc31392e/html5/thumbnails/10.jpg)
Elementos XHTML
Encabezados: h1, h2, h3, . . .Párrafos: pListas:
Desordenada: ulOrdenada: olElemento de la lista: li
Lista de definiciones: dlTérmino: dtDefinición: dd
Enfasis: emCitas: citeAcrónimo: abbr, acronym
![Page 11: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/xhtml___css.pdf · XML, XPath, XSLT, XLink, XSD, ... MathML, SMIL, SVG ... (HTML) de presentación (CSS).](https://reader036.fdocuments.co/reader036/viewer/2022062604/5fbfa511bbb7a449dc31392e/html5/thumbnails/11.jpg)
Elementos XHTML
Encabezados: h1, h2, h3, . . .Párrafos: pListas:
Desordenada: ulOrdenada: olElemento de la lista: li
Lista de definiciones: dlTérmino: dtDefinición: dd
Enfasis: emCitas: citeAcrónimo: abbr, acronym
![Page 12: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/xhtml___css.pdf · XML, XPath, XSLT, XLink, XSD, ... MathML, SMIL, SVG ... (HTML) de presentación (CSS).](https://reader036.fdocuments.co/reader036/viewer/2022062604/5fbfa511bbb7a449dc31392e/html5/thumbnails/12.jpg)
Elementos XHTML
Encabezados: h1, h2, h3, . . .Párrafos: pListas:
Desordenada: ulOrdenada: olElemento de la lista: li
Lista de definiciones: dlTérmino: dtDefinición: dd
Enfasis: emCitas: citeAcrónimo: abbr, acronym
![Page 13: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/xhtml___css.pdf · XML, XPath, XSLT, XLink, XSD, ... MathML, SMIL, SVG ... (HTML) de presentación (CSS).](https://reader036.fdocuments.co/reader036/viewer/2022062604/5fbfa511bbb7a449dc31392e/html5/thumbnails/13.jpg)
Elementos XHTML
Encabezados: h1, h2, h3, . . .Párrafos: pListas:
Desordenada: ulOrdenada: olElemento de la lista: li
Lista de definiciones: dlTérmino: dtDefinición: dd
Enfasis: emCitas: citeAcrónimo: abbr, acronym
![Page 14: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/xhtml___css.pdf · XML, XPath, XSLT, XLink, XSD, ... MathML, SMIL, SVG ... (HTML) de presentación (CSS).](https://reader036.fdocuments.co/reader036/viewer/2022062604/5fbfa511bbb7a449dc31392e/html5/thumbnails/14.jpg)
Hipertexto XHTML
Enlace a un recurso externo.Enlaces: elemento aDestino = atributo href: “<a href="URL">contenido</a>”“contenido” se presenta como hiperenlace.
Enlace dentro del documento.Etiquetar un punto del documento (ancla).“<a name="ancla">. . . </a>”Hipervínculo: “<a href="#ancla">. . . </a>”
![Page 15: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/xhtml___css.pdf · XML, XPath, XSLT, XLink, XSD, ... MathML, SMIL, SVG ... (HTML) de presentación (CSS).](https://reader036.fdocuments.co/reader036/viewer/2022062604/5fbfa511bbb7a449dc31392e/html5/thumbnails/15.jpg)
Hipertexto XHTML
Enlace a un recurso externo.Enlaces: elemento aDestino = atributo href: “<a href="URL">contenido</a>”“contenido” se presenta como hiperenlace.
Enlace dentro del documento.Etiquetar un punto del documento (ancla).“<a name="ancla">. . . </a>”Hipervínculo: “<a href="#ancla">. . . </a>”
![Page 16: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/xhtml___css.pdf · XML, XPath, XSLT, XLink, XSD, ... MathML, SMIL, SVG ... (HTML) de presentación (CSS).](https://reader036.fdocuments.co/reader036/viewer/2022062604/5fbfa511bbb7a449dc31392e/html5/thumbnails/16.jpg)
Ejemplo: Tic-Tac-Toe
Juego similar al tres en raya.No se pueden mover las fichas.Si se llena el tablero = empate.
![Page 17: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/xhtml___css.pdf · XML, XPath, XSLT, XLink, XSD, ... MathML, SMIL, SVG ... (HTML) de presentación (CSS).](https://reader036.fdocuments.co/reader036/viewer/2022062604/5fbfa511bbb7a449dc31392e/html5/thumbnails/17.jpg)
Ejemplo: Tic-Tac-Toe (II)
<html><head><title>TIC-TAC-TOE</title>
</head><body><h1>TIC-TAC-TOE</h1><p>Turno de: Jugador 1</p><table><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr>
</table></body>
</html>
![Page 18: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/xhtml___css.pdf · XML, XPath, XSLT, XLink, XSD, ... MathML, SMIL, SVG ... (HTML) de presentación (CSS).](https://reader036.fdocuments.co/reader036/viewer/2022062604/5fbfa511bbb7a449dc31392e/html5/thumbnails/18.jpg)
Separación de contenido y presentación
XHTML (HTML): contenido del documento.CSS: presentación (aspecto).
![Page 19: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/xhtml___css.pdf · XML, XPath, XSLT, XLink, XSD, ... MathML, SMIL, SVG ... (HTML) de presentación (CSS).](https://reader036.fdocuments.co/reader036/viewer/2022062604/5fbfa511bbb7a449dc31392e/html5/thumbnails/19.jpg)
CSS
Cascade Style Sheet.Versiones: CSS1, CSS2, CSS3.Presentación del documento.Posibilidad de especificar varios estilos.
Pantalla, impresora, handheld, . . .“Themes”, versiones alto contraste, . . .
![Page 20: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/xhtml___css.pdf · XML, XPath, XSLT, XLink, XSD, ... MathML, SMIL, SVG ... (HTML) de presentación (CSS).](https://reader036.fdocuments.co/reader036/viewer/2022062604/5fbfa511bbb7a449dc31392e/html5/thumbnails/20.jpg)
CSS: Cómo enlazar a un documento
1 No recomendado: atributo style.<h1 style="color:red;">
2 Hoja de estilo incrustada o interna.<head><style type="text/css">h1 { color: red; }</style>...
3 Hoja de estilo externa.<head><link rel="stylesheet" href="css/default.css"
title="default" type="text/css" /><link rel="alternate stylesheet" href="css/hc.css"
title="Contraste alto" type="text/css" /><link rel="stylesheet" type="text/css"
href="css/print.css" media="print">
![Page 21: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/xhtml___css.pdf · XML, XPath, XSLT, XLink, XSD, ... MathML, SMIL, SVG ... (HTML) de presentación (CSS).](https://reader036.fdocuments.co/reader036/viewer/2022062604/5fbfa511bbb7a449dc31392e/html5/thumbnails/21.jpg)
CSS: reglas
CSS = conjunto de reglas.Regla = par (selector, elementos).Selector: define a qué elementos se aplica la regla.Elementos: pares atributo, valor.
h1 {color: red;
}table {
border: 1px solid #000000;}
![Page 22: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/xhtml___css.pdf · XML, XPath, XSLT, XLink, XSD, ... MathML, SMIL, SVG ... (HTML) de presentación (CSS).](https://reader036.fdocuments.co/reader036/viewer/2022062604/5fbfa511bbb7a449dc31392e/html5/thumbnails/22.jpg)
CSS: selectores
Elementos html. Ejemplo: h1, table, p, ...
Seleccionar por clase.<table class="tablero">table.tablero { border: 1px solid #000000; }
Seleccionar por identificador.<table id="tabla01">table#tabla01 { border: 1px solid #000000; }
Selector universal: **.tablero = .tablero, *#tablero = #tablero
![Page 23: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/xhtml___css.pdf · XML, XPath, XSLT, XLink, XSD, ... MathML, SMIL, SVG ... (HTML) de presentación (CSS).](https://reader036.fdocuments.co/reader036/viewer/2022062604/5fbfa511bbb7a449dc31392e/html5/thumbnails/23.jpg)
CSS: selectores (II)
Varios elementos en un selector separados por comas.h1, p, .xtra
Seleccionar descendientes, hermanos e hijos:p > p, p + p, p p
Pseudo-clases:first-child, :visited, :hover, ...
![Page 24: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/xhtml___css.pdf · XML, XPath, XSLT, XLink, XSD, ... MathML, SMIL, SVG ... (HTML) de presentación (CSS).](https://reader036.fdocuments.co/reader036/viewer/2022062604/5fbfa511bbb7a449dc31392e/html5/thumbnails/24.jpg)
CSS: atributos
BackgroundBordeDimensionesFuentesMargenesPosición. . .
![Page 25: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/xhtml___css.pdf · XML, XPath, XSLT, XLink, XSD, ... MathML, SMIL, SVG ... (HTML) de presentación (CSS).](https://reader036.fdocuments.co/reader036/viewer/2022062604/5fbfa511bbb7a449dc31392e/html5/thumbnails/25.jpg)
CSS: valores
Dimensiones: pt, px, pc, in, cm, mm, em, ex.xx-small, x-small, small, normal, large,x-large, xx-large, larger, smaller
Colores: Nombres de color blue, valor RGB #0000ff,rgb(0,0,255), rgb(0%,0%,100%)
![Page 26: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/xhtml___css.pdf · XML, XPath, XSLT, XLink, XSD, ... MathML, SMIL, SVG ... (HTML) de presentación (CSS).](https://reader036.fdocuments.co/reader036/viewer/2022062604/5fbfa511bbb7a449dc31392e/html5/thumbnails/26.jpg)
CSS: el modelo de caja
![Page 27: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/xhtml___css.pdf · XML, XPath, XSLT, XLink, XSD, ... MathML, SMIL, SVG ... (HTML) de presentación (CSS).](https://reader036.fdocuments.co/reader036/viewer/2022062604/5fbfa511bbb7a449dc31392e/html5/thumbnails/27.jpg)
Ejemplo: Tic-Tac-Toe (CSS)
<td><p class="cas_vacia"/></td>
.cas_vacia, .cas_azul, .cas_roja {border: 1px solid #000000;width: 128px;height: 128px;
}
.cas_azul {background: #0000ff;
}
.cas_roja {background: #ff0000;
}
![Page 28: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/xhtml___css.pdf · XML, XPath, XSLT, XLink, XSD, ... MathML, SMIL, SVG ... (HTML) de presentación (CSS).](https://reader036.fdocuments.co/reader036/viewer/2022062604/5fbfa511bbb7a449dc31392e/html5/thumbnails/28.jpg)
CSS: Herencia
Algunos elementos heredan las propiedades del elementoque los contiene.<div>El texto de este párrafo está en rojo.<p class="grande">Y este párrafo además,
en letra grande.</p></div>
div { color: red; }p.grande { font-size: large; }
También existe el elemento span.
<p>...<span class="xtra"><a href="...">...</a></span>
...</p>
![Page 29: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/xhtml___css.pdf · XML, XPath, XSLT, XLink, XSD, ... MathML, SMIL, SVG ... (HTML) de presentación (CSS).](https://reader036.fdocuments.co/reader036/viewer/2022062604/5fbfa511bbb7a449dc31392e/html5/thumbnails/29.jpg)
XHTML+CSS: capas
Elemento div.Pseudo-estructural, pseudo-visual.Define un área rectangular.Se puede modificar su posición.Se pueden superponer.
![Page 30: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/xhtml___css.pdf · XML, XPath, XSLT, XLink, XSD, ... MathML, SMIL, SVG ... (HTML) de presentación (CSS).](https://reader036.fdocuments.co/reader036/viewer/2022062604/5fbfa511bbb7a449dc31392e/html5/thumbnails/30.jpg)
Navegadores: modo estándares
Navegadores modernos: dos modos:Modo cumplir estándares.Quirksmode.
Switch: declaración de tipo de documento correcta.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
![Page 31: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/xhtml___css.pdf · XML, XPath, XSLT, XLink, XSD, ... MathML, SMIL, SVG ... (HTML) de presentación (CSS).](https://reader036.fdocuments.co/reader036/viewer/2022062604/5fbfa511bbb7a449dc31392e/html5/thumbnails/31.jpg)
XHTML+CSS: validadores
http://www.w3.org/QA/Tools/, . . .Analizan el documento.Inidican los errores respecto al estándar.
![Page 32: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/xhtml___css.pdf · XML, XPath, XSLT, XLink, XSD, ... MathML, SMIL, SVG ... (HTML) de presentación (CSS).](https://reader036.fdocuments.co/reader036/viewer/2022062604/5fbfa511bbb7a449dc31392e/html5/thumbnails/32.jpg)
Referencias
http://www.w3c.org/, http://www.w3c.es/http://www.w3schools.com/,http://www.quirksmode.org/
http://www.csszengarden.com/, . . .http://www.alistapart.com/, . . .. . .
“Designing With Web Standards”, Jeffrey Zeldman.