Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Xhtml

1,006 views

Published on

un curso de xhtml

Published in: Education
  • Be the first to comment

Xhtml

  1. 1. Introducción a XHTML César F. Acebal Universidad de Oviedo www.cesaracebal.com Curso de CSS avanzado
  2. 2. Separación entre presentación y contenido <ul><li>Esa distinción no está siempre clara: </li></ul><ul><ul><li>HTML también tiene etiquetas de describen la presentación en vez de la estructura </li></ul></ul><ul><ul><li>En el Word podemos trabajar con estilos </li></ul></ul><ul><ul><ul><li>Conjunto de características que se pueden aplicar a una porción de texto </li></ul></ul></ul><ul><ul><ul><ul><li>Por ejemplo, que el estilo Título 1 vaya en Helvética negrita y cursiva, y a 18 puntos </li></ul></ul></ul></ul>
  3. 3. Salvando las limitaciones del HTML <ul><li>El HTML es un lenguaje muy sencillo </li></ul><ul><ul><li>Ésa es precisamente una de las razones del enorme éxito del Web </li></ul></ul><ul><li>Los diseñadores han tratado, desde el principio, de salvar sus limitaciones estilísticas </li></ul><ul><ul><li>Si bien la intención era buena (mejorar la presentación de los documentos), las técnicas usadas solían tener efectos secundarios indeseados </li></ul></ul>
  4. 4. Salvando las limitaciones del HTML <ul><li>Ejemplos de estas técnicas son: </li></ul><ul><ul><li>Usar extensiones de HTML propietarias </li></ul></ul><ul><ul><li>Convertir texto en imágenes </li></ul></ul><ul><ul><li>Meter texto en tablas </li></ul></ul><ul><ul><li>Escribir un programa en vez de usar HTML </li></ul></ul>
  5. 5. Extensiones de HTML propietarias <ul><li>Los vendedores de navegadores comenzaron a crear sus propias etiquetas, para dar más control a los autores sobre la apariencia de una página Web </li></ul><ul><li>Llegó un momento en cada nueva versión incorporaba nuevas etiquetas </li></ul><ul><li>Pero estas etiquetas no son universales, sólo funcionan en un navegador determinado </li></ul><ul><li>No tienen sentido en navegadores no visuales (de voz, Braille, etcétera) o en navegadores de texto (Lynx, dispositivos de mano –teléfonos, PDA...–) </li></ul><ul><li>Por el contrario, los elementos de HTML son independientes del dispositivo </li></ul><ul><ul><li>Ejemplo: <em> Destacar esto </em> </li></ul></ul><ul><li>Las hojas de estilo han permitido eliminar todos estos elementos </li></ul><ul><ul><li>Ya no hacen falta elementos como <center> o <font> </li></ul></ul><ul><ul><li>En HTML 4.0 fueron relegadas a una versión de transición </li></ul></ul>
  6. 6. Convertir texto en imágenes <ul><li>Haciendo que el texto sea una imagen, el diseñador tiene control total sobre fuentes, espaciado, colores... (el texto se verá tal cual el lo creó) </li></ul><ul><li>Luego, simplemente inserta la imagen en la página donde debiera ir el texto </li></ul><ul><li>Problemas: </li></ul><ul><ul><li>Elimina la accesibilidad de la página </li></ul></ul><ul><ul><li>Requiere tiempo de espera por parte del usuario </li></ul></ul>
  7. 7. Accesibilidad <ul><li>Capacidad de usar la información de una página por parte de personas o programas </li></ul><ul><ul><li>Los robots ( crawlers , spiders ) examinan las páginas Web de Internet para indexarlas en sus sistemas de búsqueda (Google, AltaVista...) </li></ul></ul><ul><ul><ul><li>No pueden leer imágenes </li></ul></ul></ul><ul><ul><li>No todos los usuarios tienen navegadores gráficos </li></ul></ul><ul><ul><li>Aun teniéndolo, puede tenerlo configurado para ver el texto a un tamaño mayor </li></ul></ul><ul><li>La única solución (aparte de CSS) es incluir una descripción textual de la imagen </li></ul>
  8. 8. Tiempo de espera <ul><li>Lleva tiempo cargar y dibujar las imágenes en el navegador </li></ul><ul><li>El usuario puede impacientarse y abandonar la página antes de que ésta termine de cargarse </li></ul>
  9. 9. Colocar texto en tablas <ul><li>Permite controlar la disposición del texto </li></ul><ul><ul><li>Ejemplo: añadir un margen al documento </li></ul></ul><ul><ul><li>Es común que todo el contenido de una página vaya dentro de una tabla (y que ésta tenga, a su vez, muchas más tablas dentro) </li></ul></ul><ul><li>No todos los navegadores admiten tablas </li></ul><ul><ul><li>En ese caso no se verá la página </li></ul></ul><ul><li>Complica la escritura del HTML </li></ul><ul><ul><li>Cuanto más compleja sea la estructura de las tablas, más difícil será escribir y mantener el código </li></ul></ul>
  10. 10. Colocar texto en tablas <ul><li>También tiene problemas de accesibilidad </li></ul><ul><ul><li>Por ejemplo, los programas que tratan de leer las páginas sin mostrarlas visualmente </li></ul></ul><ul><ul><ul><li>Un navegador de voz podría indicar al usuario que entra en una tabla, y emitir un sonido cada vez que entra en una casilla </li></ul></ul></ul><ul><ul><ul><li>Eso sólo tiene sentido si la información es realmente tabular: listas de precios, ventas... </li></ul></ul></ul><ul><ul><li>Otros navegadores para pantallas pequeñas podrían mostrar sólo una casilla de cada vez </li></ul></ul><ul><li>Usadas con cuidado, a veces pueden ser una buena solución </li></ul><ul><li>No obstante, CSS prácticamente elimina la necesidad de usar tablas para composición </li></ul>
  11. 11. Escribir un programa en vez de usar HTML <ul><li>Ejemplo: applets Java, Flash </li></ul><ul><li>Esto da control total sobre cada píxel de la pantalla (algo que ni siquiera es posible con CSS) </li></ul><ul><li>Tiene muchos de los inconvenientes anteriores </li></ul><ul><li>La gracia de HTML es que el mismo documento puede verse en un montón de dispositivos diferentes </li></ul><ul><li>HTML es un estándar universal de formato de datos para la publicación de información </li></ul>
  12. 12. Introducción a XHTML
  13. 13. Elementos <ul><li>Un elemento normalmente tiene tres partes: </li></ul><ul><ul><li>etiqueta de inicio </li></ul></ul><ul><ul><li>contenido </li></ul></ul><ul><ul><li>etiqueta de fin </li></ul></ul>Nombre atributo <a href=“aficiones.html”>Aficiones</a> Nombre elemento Valor atributo CONTENIDO ATRIBUTO ETIQUETA DE INICIO ETIQUETA DE FIN ELEMENTO
  14. 14. Sintaxis de los elementos <ul><li>Todas las etiquetas empiezan por “ < “ y terminan con “ > ” </li></ul><ul><li>Entre ellas va el nombre del elemento </li></ul><ul><li>Algunos elementos pueden tener atributos </li></ul><ul><ul><li>El valor de los atributos va siempre entrecomillado </li></ul></ul><ul><li>El contenido no tiene por qué ser sólo texto: también puede tener otros elementos </li></ul><ul><li>La etiqueta de fin se llama igual que la de principio con la barra “ / ” ( slash ) </li></ul><ul><li>Hay elementos que no tienen etiqueta de fin ni contenido </li></ul><ul><ul><li><br> </li></ul></ul><ul><ul><li>Nota: en XHTML todos los elementos tienen que cerrarse: </li></ul></ul><ul><ul><ul><li><br></br> </li></ul></ul></ul><ul><ul><ul><li><br /> </li></ul></ul></ul>
  15. 15. Sintaxis de HTML <ul><li>Son documentos estructurados </li></ul><ul><ul><li>La especificación define qué elementos puede contener un documento, cómo se relacionan los elementos entre sí y sus posibles atributos y valores </li></ul></ul><ul><ul><ul><li>Cuál puede ser el contenido de un elemento: </li></ul></ul></ul><ul><ul><ul><ul><li>texto, otros elementos, mezcla de texto y elementos o nada </li></ul></ul></ul></ul><ul><li>En HTML, los nombres de los elementos y de los atributos da igual que vayan en mayúsculas o en minúsculas </li></ul><ul><ul><li>En XHTML –una reformulación de HTML para que cumpla las normas de XML– deben ir en minúsculas </li></ul></ul><ul><li>En XHTML, los valores de los atributos siempre van entrecomillados </li></ul><ul><li>Comentarios: <!-- Esto es un comentario --> </li></ul>
  16. 16. Sintaxis de HTML <ul><li>Los elementos se pueden anidar (cumpliendo las normas de la especificación): </li></ul><ul><li><b><i>Correcto</i></b> </li></ul><ul><ul><li>Pero no pueden cruzarse: </li></ul></ul><ul><ul><li><b><i>Incorrecto</b></i> </li></ul></ul><ul><li>Los navegadores hacen caso omiso de las etiquetas desconocidas (aunque procesan el contenido): </li></ul><ul><li>< pepe >Contenido</ pepe > </li></ul><ul><li>Y lo mismo con los atributos (en este caso obvian también su valor): </li></ul><ul><li><h1 pepe=“hola” >Contenido</h1> </li></ul>
  17. 17. Permisividad de los navegadores <ul><li>Al final, la corrección de un documento queda al arbitrio de los navegadores </li></ul><ul><ul><li>No es como hacer un programa, donde el compilador nos informa de todos los errores </li></ul></ul><ul><ul><li>Lo que para un navegador puede ser válido, para otro puede que no, o que lo interprete de forma completamente distinta </li></ul></ul><ul><ul><li>Tratan de adivinar lo que quiso decir el autor </li></ul></ul><ul><li>Debemos tratar de ajustarnos al estándar </li></ul><ul><li>Se puede comprobar la corrección de una página con los validadores </li></ul><ul><ul><li>Comparan la página con la especificación (la gramática) de HTML: DTD </li></ul></ul><ul><li>Aun así, hay que probar siempre una página con varios navegadores (distintas marcas y versiones, plataformas, etc.) </li></ul>
  18. 18. XML Puesto que afirmamos que XHTML es XML, comentaremos rápidamente algunos conceptos muy básicos de éste, como son la diferencia que hace entre buena formación y validez de los documentos.
  19. 19. Documentos <ul><li>“ Un objeto de datos es un documento XML si está bien formado . Un documento XML bien formado puede, además, ser válido , si cumple otras restricciones.” </li></ul>
  20. 20. Buena formación <ul><li>Un documento XML está bien formado si cumple las reglas sintácticas de la especificación </li></ul><ul><li>¡Ojo!, nótese que hablamos de reglas sintácticas, no de gramática (XML no tiene una gramática definida, ésta se la definimos nosotros mediante los DTD) </li></ul><ul><li>Ejemplos: </li></ul><ul><ul><li>Que no haya etiquetas sin cerrar </li></ul></ul><ul><ul><li>Que no se entremezclen etiquetas: <a><b></a></b> </li></ul></ul><ul><ul><li>Etcétera </li></ul></ul>
  21. 21. Validez <ul><li>Para que un documento XML sea válido debe incluir la declaración <!DOCTYPE> al principio, donde viene especificada la DTD </li></ul><ul><ul><li>Definición de tipo de documento </li></ul></ul><ul><li>El documento debe adecuarse a la gramática impuesta por dicha DTD </li></ul><ul><li>Si no se incluyera esa declaración, el procesador XML no realizaría la comprobación de validez </li></ul>
  22. 22. Estructura de un documento HTML <ul><li><!DOCTYPE html PUBLIC </li></ul><ul><li>“ -//W3C//DTD HTML 4.01 EN//” </li></ul><ul><li>“ http://www.w3.org/TR/html4/strict.dtd”> </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title>Mi primera página Web</title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li>¡Hola, mundo! </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  23. 23. Declaración de XML <ul><li>En un documento XHTML, habría que añadir también la declaración de XML: </li></ul><ul><ul><li>ISO-8859-1 es el juego de caracteres europeo </li></ul></ul><ul><ul><ul><li>Por omisión, el tipo de codificación es UTF-8 </li></ul></ul></ul><?xml version=“1.0” encoding=“ISO-8859-1” ?> <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/ xhtml1/DTD/xhtml1-strict.dtd &quot;> <html> ... </html>
  24. 24. Versiones de HTML <ul><li>World Wide Web Consortium (W3C): </li></ul><ul><ul><li>Organización encargada de estandarizar las tecnologías Web </li></ul></ul><ul><ul><li>www.w3 . org </li></ul></ul><ul><li>Tres variantes de HTML 4.01: </li></ul><ul><ul><li>Strict </li></ul></ul><ul><ul><ul><li>Eliminó todos los elementos y atributos que tenían que ver con la presentación y no con la estructura  todo eso se hará ahora con hojas de estilo </li></ul></ul></ul><ul><ul><li>Transitional </li></ul></ul><ul><ul><ul><li>Mantiene bastantes elementos y atributos de presentación </li></ul></ul></ul><ul><ul><ul><li>Pensada como etapa de transición (desaparecerá del estándar) </li></ul></ul></ul><ul><ul><li>Frameset </li></ul></ul><ul><ul><ul><li>Lo mismo que la de transición pero para documentos con marcos (frames) </li></ul></ul></ul><ul><li>XHTML: lo mismo con pequeños cambios de sintaxis para que los documentos HTML sean también documentos XML </li></ul>
  25. 25. Tipos de elementos <ul><li>Los elementos pueden dividirse en tres grupos: </li></ul><ul><ul><li>De nivel de bloque </li></ul></ul><ul><ul><ul><li>Insertan una línea en blanco antes y después de su contenido </li></ul></ul></ul><ul><ul><ul><li><h1> , <p> ... </li></ul></ul></ul><ul><ul><li>De línea </li></ul></ul><ul><ul><ul><li><strong> , <em> , <a> , <img> ... </li></ul></ul></ul><ul><ul><li>Invisibles </li></ul></ul><ul><ul><ul><li><title> , <link> , <style> </li></ul></ul></ul>
  26. 26. Elementos de XHTML A continuación, iremos viendo qué elementos define la especificación XHTML y cómo éstos pueden combinarse (son las reglas a las que deberemos ajustarnos para crear el contenido de nuestras páginas Web).
  27. 27. Elemento <title> <ul><li>Va en la cabecera </li></ul><ul><li><head> </li></ul><ul><li><title>AA Funky Software</title> </li></ul><ul><li></head> </li></ul><ul><li>Es obligatorio </li></ul><ul><li>¿Para qué sirve? </li></ul><ul><ul><li>Es lo que aparece en la barra de título de la ventana del navegador </li></ul></ul><ul><ul><li>También lo que aparece al añadir la página a favoritos </li></ul></ul><ul><ul><li>Es utilizado por los robots de indexación de los buscadores </li></ul></ul>
  28. 28. Elemento <title>. Consejos <ul><li>Hay que darle un nombre significativo </li></ul><ul><ul><li>Aunque mejor si es a la vez conciso </li></ul></ul><ul><li>Puede ser conveniente indicar la estructura en el propio título, como ayuda a la navegación </li></ul><ul><li><title> </li></ul><ul><li> MiEmpresa - ¿Quiénes somos? – Consejo de </li></ul><ul><li>Administración </li></ul><ul><li></title> </li></ul>
  29. 29. Elementos de bloque <ul><li>Cuerpo del documento ( body ) </li></ul><ul><li>Títulos ( h1, h2... h6 ) </li></ul><ul><li>Párrafos ( p ) </li></ul><ul><li>Salto de línea ( br ) </li></ul><ul><li>Barra o separador horizontal ( hr ) </li></ul><ul><li>Preformateado ( pre ) </li></ul><ul><li>Citas de bloque ( blockquote ) </li></ul><ul><li>Listas </li></ul><ul><ul><li>Desordenadas ( ul, li ) </li></ul></ul><ul><ul><li>Ordenadas ( ol, li ) </li></ul></ul><ul><ul><li>De definición ( dl, dt, dd ) </li></ul></ul><ul><li>División ( div ) </li></ul><ul><li>Tablas </li></ul><ul><li>Formularios </li></ul>
  30. 30. Elemento <body> <ul><li>Representa el cuerpo, el contenido en sí del documento </li></ul><ul><ul><li>Todo lo que vaya dentro de él es lo que realmente se muestra en la página Web </li></ul></ul><ul><li>Nota : dentro del elemento <body> no podemos poner texto suelto, directamente, ni elementos de línea, sino sólo elementos de bloque </li></ul>
  31. 31. Elementos de título: <h1>, <h2>… <h6> <ul><li>Permiten dividir el documento en secciones lógicas </li></ul><ul><ul><li><h1> sería el título principal de la página </li></ul></ul><ul><ul><li>Tras él vendrán secciones ( <h2> ), subsecciones ( <h3> )… y así sucesivamente hasta el nivel <h6> </li></ul></ul><ul><li>Normalmente, el navegador aplicará un estilo distinto a cada título </li></ul><ul><ul><li>Más grande, en negrita… </li></ul></ul><ul><li>Sólo pueden contener elementos de línea </li></ul>
  32. 32. A propósito de los elementos de título <ul><li>No hay que olvidar que se trata de elementos lógicos: </li></ul><ul><ul><li>No deben utilizarse pensando en el formato que les a dar el navegador </li></ul></ul><ul><ul><ul><li>Además, éste puede variar de unos a otros (y eso sin tener en cuenta los navegadores no gráficos: de texto, lectores de pantalla, etc.) </li></ul></ul></ul><ul><ul><li>Deben tener sentido </li></ul></ul><ul><ul><ul><li>Que <h1> sea realmente el título de la página, que <h2> sean las secciones en las que tiene sentido dividir la página, y así sucesivamente </li></ul></ul></ul><ul><ul><li>Además, conviene respetar la jerarquía </li></ul></ul><ul><ul><ul><li>Que no aparezca un <h3> , por ejemplo, sin que antes haya un <h2> </li></ul></ul></ul>
  33. 33. Ejemplo del uso de títulos <ul><li><h1> </li></ul><ul><li>Creación de sitios Web mediante hojas de estilo </li></ul><ul><li></h1> </li></ul><ul><li><h2> Introducción al Web y a XHTML </h2> </li></ul><ul><li>... </li></ul><ul><li><h2> XHTML (Continuación) </h2> </li></ul><ul><li>... </li></ul><ul><li><h3> Tablas </h3> </li></ul><ul><li>... </li></ul>
  34. 34. Párrafos: elemento <p> <ul><li>Se trata también de un elemento lógico </li></ul><ul><li>Permite dividir el documento en párrafos </li></ul><ul><li>No puede contener otros elementos de bloque </li></ul><ul><li>No debe usarse para obtener saltos de línea </li></ul><ul><ul><li>Además, no funcionaría ( comprobarlo ) </li></ul></ul><ul><ul><li>La forma de insertar un salto de línea es mediante <br> </li></ul></ul><ul><ul><ul><li>Así sí podemos tener varías líneas de separación </li></ul></ul></ul><ul><ul><ul><ul><li>Pero cuando deseemos más espaciado vertical es mejor acudir a las hojas de estilo que al elemento <br> </li></ul></ul></ul></ul>
  35. 35. Ejercicio <ul><li>Se trata de probar lo visto hasta la fecha, para lo que crearemos nuestra primera página Web </li></ul><ul><li>Recordemos: </li></ul><ul><ul><li>Título ( <title> ) </li></ul></ul><ul><ul><li>Títulos o cabeceras ( <h1> …) </li></ul></ul><ul><ul><li>Párrafos ( <p> ) </li></ul></ul><ul><ul><li>Saltos de línea ( <br> ) </li></ul></ul><ul><ul><ul><li>Aunque en la práctica no abusaremos de este elemento </li></ul></ul></ul><ul><li>¿Qué ocurre con los espacios en blanco, tabuladores y saltos de línea que escribimos directamente en nuestro código HTML? ¿Cómo se visualizan? ¿A qué crees que se debe esto? </li></ul>
  36. 36. Texto preformateado: <pre> <ul><li>Si queremos que la página Web muestre el mismo formato (espacios, tabulaciones y saltos de línea) que el código HTML, encerramos ese texto en un elemento <pre> </li></ul><ul><ul><li>Por ejemplo, un poema, una porción de código… </li></ul></ul><ul><ul><li>Se usa muy poco </li></ul></ul><ul><li>Problema: los tabuladores </li></ul><ul><ul><li>Se desaconseja su uso en el texto preformateado, porque el número de espacios a que se corresponden puede no coincidir en el navegador y el editor empleado </li></ul></ul>
  37. 37. Citas de bloque: <blockquote> <ul><li>Permite incluir largas citas textuales en la página (es un elemento de bloque) </li></ul><ul><li>Atributos: </li></ul><ul><ul><li>cite </li></ul></ul><ul><ul><ul><li>Como valor, tiene un URI (normalmente será un URL, es decir, una dirección de otra página Web) </li></ul></ul></ul><ul><ul><ul><li>Es decir, ahí se indicaría la fuente de la que procede la cita </li></ul></ul></ul><ul><li>Normalmente, los navegadores lo visualizan con un ligero sangrado </li></ul><ul><li>¿Tiene algún otro efecto en los navegadores actuales? ¿Se os ocurre algún otro que pudieran tener? </li></ul>
  38. 38. Tipos de listas en HTML <ul><li>Existen tres tipos de listas: </li></ul><ul><ul><li>Ordenadas </li></ul></ul><ul><ul><li>Desordenadas </li></ul></ul><ul><ul><li>De definición </li></ul></ul><ul><li>Las listas se pueden anidar </li></ul><ul><ul><li>Es decir, un elemento de una lista puede ser a su vez otra lista </li></ul></ul><ul><ul><li>No tienen por qué ser del mismo tipo </li></ul></ul><ul><ul><ul><li>Un elemento de una lista desordenada pueden ser, por ejemplo, una serie de puntos representados como una lista ordenada </li></ul></ul></ul>
  39. 39. Listas ordenadas <ul><li>Ejemplo: </li></ul><ul><li>Sintaxis: </li></ul><ul><ul><li><ol> (de “ordered list”) designa a toda la lista </li></ul></ul><ul><ul><li>Cada elemento se indica mediante <li> </li></ul></ul><ul><ul><li>1. Introducción al Web y a XHTML </li></ul></ul><ul><ul><li>2. XHTML (Continuación) </li></ul></ul><ul><ul><li>3. Introducción a las hojas de estilo </li></ul></ul>
  40. 40. Listas desordenadas <ul><li>Ejemplo: </li></ul><ul><ul><li>Esta misma diapositiva </li></ul></ul><ul><li>Sintaxis: </li></ul><ul><ul><li><ul> (de “unordered list”) designa a toda la lista </li></ul></ul><ul><ul><li>Cada elemento se indica mediante <li> </li></ul></ul>
  41. 41. Listas de definición <ul><li>Están pensadas para diccionarios, glosarios, etc. </li></ul><ul><li>Ejemplo: </li></ul><ul><ul><li>Webmail, webmail ( correo electrónico de sitio web,correo basado en web,correo web ) </li></ul></ul><ul><ul><li>Servicio que permite gestionar el correo electrónico desde un sitio web. Es de gran utilidad para personas que tienen que desplazarse con frecuencia y lo ofrecen habitualmente los proveedores de acceso a Internet. Ver también: &quot;email &quot;, &quot;ISP &quot;, &quot;website &quot;. </li></ul></ul><ul><ul><li>Webmaster, webmaster (administrador de Web) </li></ul></ul><ul><ul><li>Persona que se encarga de la gestión y mantenimiento de un servidor web, fundamentalmente desde el punto de vista técnico; no hay que confundirlo con el editor de web (webeditor). Ver también: &quot;Web editor, web editor &quot;, &quot;web server &quot;. </li></ul></ul>
  42. 42. Listas de definición <ul><li>Pueden tener más usos que el anterior </li></ul><ul><ul><li>Por ejemplo, una lista con las características de un producto: </li></ul></ul><ul><li>Sintaxis: </li></ul><ul><ul><li><dl> para la lista completa </li></ul></ul><ul><ul><li><dt> el término a definir </li></ul></ul><ul><ul><li><dd> la definición </li></ul></ul><ul><ul><li>Lower cost </li></ul></ul><ul><ul><li>The new version of this product costs significantly less than the previous one! </li></ul></ul><ul><ul><li>Easier to use </li></ul></ul><ul><ul><li>We've changed the product so that it's much easier to use! </li></ul></ul><ul><ul><li>Safe for kids </li></ul></ul><ul><ul><li>You can leave your kids alone in a room with this product and they won't get hurt (not a guarantee). </li></ul></ul>
  43. 43. Ejercicio <ul><li>Crear una lista como la siguiente: </li></ul>The ingredients: • 100 g. flour • 10 g. sugar • 1 cup water • 2 eggs • salt, pepper The procedure: 1. Mix dry ingredients thoroughly. 2. Pour in wet ingredients. 3. Mix for 10 minutes. 4. Bake for one hour at 300 degrees. Notes: The recipe may be improved by adding raisins.
  44. 44. Elementos de línea <ul><li>Elementos lógicos ( em, strong, code... ) </li></ul><ul><li>Elementos físicos ( i, b, tt... ) </li></ul><ul><li>Enlaces ( a ) </li></ul><ul><li>Imágenes ( img ) </li></ul><ul><li>span </li></ul>
  45. 45. Elementos lógicos y físicos <ul><li>HTML no es un lenguaje de descripción de página física, como PostScript o los editores WYSIWYG (Word, por ejemplo) </li></ul><ul><li>Éstos definen la presentación del documento </li></ul><ul><ul><li>Negrita ( <b> ), Cursiva ( <i> )... </li></ul></ul><ul><li>HTML define la estructura lógica de un documento, no su aspecto (que queda a la elección del navegador) </li></ul><ul><ul><li><strong>, <em>... </li></ul></ul>
  46. 46. Elementos físicos <ul><li>Cursiva ( <i> ) </li></ul><ul><li>Negrita ( <b> ) </li></ul><ul><li>Máquina de escribir ( <tt> ) </li></ul><ul><li>Más grande ( <big> ) </li></ul><ul><li>Más pequeño ( <small> ) </li></ul><ul><li>Subíndice ( <sub> ) </li></ul><ul><li>Superíndice ( <sup> ) </li></ul>
  47. 47. Elementos lógicos <ul><li>Indican el tipo de contenido que encierran, no cómo debe presentarse </li></ul><ul><li>No tiene sentido una etiqueta de negrita en un navegador de voz o Braille, o en otros tipos de navegadores (PDA, etc.) </li></ul><ul><li>Con las hojas de estilo, tenemos control total sobre cómo deben presentarse los elementos lógicos </li></ul><ul><ul><li>Evitaremos, por tanto, el uso de elementos físicos </li></ul></ul>
  48. 48. Elementos lógicos <ul><li>Importante ( <strong> ) </li></ul><ul><li>Énfasis ( <em> ) </li></ul><ul><li>Código ( <code> ) </li></ul><ul><li>Dirección ( <address> ) </li></ul><ul><li>Abreviatura ( <abbr> ) </li></ul><ul><ul><li><abbr title=“Massachusetts Avenue”>Mass. Ave.</abbr> </li></ul></ul><ul><li>Acrónimo ( <acronym> ) </li></ul><ul><ul><li><acronym title=“HiperText Markup Language”>HTML</acronym> </li></ul></ul><ul><li>Cita ( <cite> y <q> ) </li></ul>
  49. 49. Entidades de carácter <ul><li>Sintaxis: </li></ul><ul><ul><li>& código ; </li></ul></ul><ul><ul><ul><li>Donde “código” es una palabra reservada o un número que indica el carácter a representar </li></ul></ul></ul><ul><li>Permiten poner caracteres especiales en un documento: </li></ul><ul><ul><li>Letras acentuadas, etc. </li></ul></ul><ul><li>Juego de caracteres para el español: </li></ul><ul><ul><li>ISO 8859-1 (Latin-1) </li></ul></ul>
  50. 50. Algunas entidades de carácter ¡ &iexcl; ¿ &iquest; Ñ &Ntilde; ñ &ntilde; ... Á &Aacute; ... é &eacute; á &aacute; — &mdash; - &rdash; € &euro; © &copy; &nbsp; > &gt; < &lt; & &amp; “ &quot;
  51. 51. Enlaces
  52. 52. URL <ul><li>URI: Uniform Resource Identifier </li></ul><ul><ul><li>URL: Uniform Resource Locator </li></ul></ul><ul><li>Un URL es la dirección única de todo documento en el Web </li></ul><ul><ul><li>http://www.eutio.uniovi.es/ </li></ul></ul><ul><li>Estructura básica: </li></ul>protocolo://dirección del sitio[:puerto]/directorio/fichero
  53. 53. Protocolo <ul><li>Un protocolo define el modo en que se comunican dos ordenadores para llevar a cabo alguna tarea </li></ul><ul><li>Protocolo del Web: </li></ul><ul><ul><li>HTTP (HyperText Transfer Protocol) </li></ul></ul><ul><ul><li>Especifica cómo tiene lugar el diálogo entre el navegador y el servidor para conseguir el fichero especificado </li></ul></ul><ul><ul><li>No se ocupa del transporte en sí: TCP </li></ul></ul><ul><li>Cada vez que tecleamos una dirección o pulsamos un enlace el navegador se comunica vía HTTP con el servidor Web indicado </li></ul>
  54. 54. Protocolos más utilizados Permite enviar un correo electrónico mailto Páginas Web http File Transfer Protocol ftp Permite acceder a un fichero en el sistema de ficheros local file
  55. 55. Dirección del sitio <ul><li>Suele ser un nombre simbólico: nombre de dominio </li></ul><ul><ul><li>www.uniovi.es especifica una máquina llamada “www” en el dominio “uniovi.es” </li></ul></ul><ul><ul><li>El nombre de máquina puede ser cualquiera </li></ul></ul><ul><ul><ul><li>“ www” no es más que un convenio para especificar aquellas máquinas que son servidores Web </li></ul></ul></ul><ul><ul><ul><li>como “ftp” suele designar a los servidores de FTP </li></ul></ul></ul><ul><ul><ul><li>incluso aunque muchas veces se trate de la misma máquina </li></ul></ul></ul>
  56. 56. Dirección del sitio <ul><li>También podría ser directamente la dirección IP </li></ul><ul><ul><li>http ://156.35.14.3/ </li></ul></ul><ul><li>Los nombres de dominio no distinguen entre mayúsculas y minúsculas </li></ul><ul><ul><li>http :// www.uniovi.es / </li></ul></ul><ul><ul><li>http ://WWW.UNIOVI.ES/ </li></ul></ul><ul><ul><li>http :// wWw.UniOvi.es / </li></ul></ul>
  57. 57. Directorio <ul><li>Hay que indicar la ruta hasta el fichero deseado </li></ul><ul><li>Como mínimo, debe ir la barra (“/”) </li></ul><ul><ul><li>http://www.uniovi.es / </li></ul></ul><ul><li>Si no la ponemos, la pone el navegador por nosotros </li></ul><ul><ul><li>...pero en los enlaces en HTML sí debe aparecer </li></ul></ul><ul><li>También se puede indicar un subdirectorio: </li></ul><ul><ul><li>http://www.uniovi.es/Vicerrectorados/Postgrado_TitulosPropios/doctorado/ </li></ul></ul><ul><ul><li>Siempre se usa la barra “/”, no “” (incluso aunque el servidor Web sea una máquina Windows: está definido por el estándar URI, no depende del SO) </li></ul></ul><ul><li>La ruta sí puede diferenciar entre mayúsculas y minúsculas (si el servidor Web es, por ejemplo, una máquina Unix) </li></ul>
  58. 58. Nombre del fichero <ul><li>Depende del SO del servidor Web </li></ul><ul><li>Las páginas Web generalmente tienen como extensión .html o .htm </li></ul><ul><li>Las extensiones son importantes para que el navegador sepa cómo tratar un fichero </li></ul><ul><ul><li>un .html, lo interpreta y lo muestra </li></ul></ul><ul><ul><li>un .jpg, trata de mostrar la imagen </li></ul></ul><ul><ul><li>un .doc, abre el Word si lo tenemos instalado </li></ul></ul><ul><ul><li>etcétera </li></ul></ul>
  59. 59. Nombre del fichero <ul><li>Si no se especifica, el servidor busca un fichero con un nombre determinado en el directorio especificado </li></ul><ul><ul><li>Normalmente, el index.html o el index.htm </li></ul></ul><ul><ul><li>Se puede configurar el el programa que utilicemos como servidor Web (Apache, IIS...) </li></ul></ul>
  60. 60. Puerto <ul><li>Por omisión, una petición HTTP se dirige al puerto 80 </li></ul><ul><ul><li>Por eso casi nunca la especificamos </li></ul></ul><ul><li>Pero se podría configurar el servidor Web para que “escuchase” peticiones en otro puerto </li></ul><ul><li>En ese caso, hay que indicarlo explícitamente: </li></ul><ul><ul><li>http://www.midominio.com :8080 / </li></ul></ul>
  61. 61. Enlaces en HTML <ul><li>Se indican con la etiqueta <a> </li></ul><a href=“URL del documento destino” title=“Descripción del enlace”>Texto del enlace</a>
  62. 62. URL relativos <ul><li>Relativos, frente a los absolutos como http://www.uniovi.es/ , porque se parte de la ubicación actual </li></ul><ul><ul><li>Son enlaces a otras páginas o documentos locales (pertenecientes al propio sitio, no externos) </li></ul></ul><ul><li>Las mismas reglas que en Windows: </li></ul><ul><ul><li>El punto representa el directorio actual: </li></ul></ul><ul><ul><li>“ . /musica/lunitaTucumana.mp3 ” (o “ musica/lunitaTucumana.mp3 ”) </li></ul></ul><ul><ul><li>Y los dos puntos el directorio anterior: “ .. / .. /articulos/usabilidad/ ” </li></ul></ul>
  63. 63. El enlace “mailto” <ul><li>Permite enviar un correo electrónico con sólo pulsar en un enlace </li></ul><ul><ul><li>Bueno, realmente lo que hace es crear un mensaje nuevo con esa dirección en el destinatario </li></ul></ul><ul><ul><ul><li>Es decir, abre el programa de correo electrónico que tenga instalado el usuario </li></ul></ul></ul><ul><li>Ejemplo: </li></ul><ul><ul><li><a href=&quot;mailto:acebal@ieee.org&quot; title=&quot;Feel free to write me&quot;> [email_address] </a> </li></ul></ul>
  64. 64. Ejercicio <ul><li>Crear un documento HTML que contenga varios enlaces, tanto a otras páginas locales (crear para ello un mini-sitio Web con unas pocas páginas) como a sitios externos </li></ul><ul><ul><li>¿Cómo representa el navegador los enlaces? </li></ul></ul><ul><ul><li>¿Y cuando ya han sido visitados? </li></ul></ul><ul><ul><li>¿Para qué sirve el atributo title ? </li></ul></ul><ul><li>Probar a crear una pequeña estructura de directorios </li></ul>
  65. 65. Ejercicio (cont.) <ul><li>Por ejemplo, que tenga una estructura similar a ésta: </li></ul>informática imágenes artículos apuntes
  66. 66. Ejercicio (cont.) <ul><li>Además, que todas las páginas tengan un menú principal con las distintas secciones del sitio </li></ul><ul><ul><li>En este caso, serían dos (las del primer nivel) </li></ul></ul><ul><li>Y que cada página muestre la ruta completa de esa página en la jerarquía del sitio </li></ul><ul><ul><li>Por ejemplo: </li></ul></ul><ul><ul><li>inicio -> informática -> apuntes -> introducción al Web y a XHTML </li></ul></ul><ul><li>Poner en la página principal enlaces directos a algunas de las páginas inferiores de la jerarquía </li></ul><ul><ul><li>Tendría sentido hacerlo, por ejemplo, en una sección “Novedades” </li></ul></ul><ul><li>Probar a enlazar otros documentos distintos de HTML (Word, PDF, imágenes, ZIP, etc.) </li></ul>
  67. 67. Imágenes
  68. 68. Introducción <ul><li>El Web data de 1990, pero se empieza a popularizar a partir de 1993, con la llegada de Mosaic </li></ul><ul><li>Píxel: elemento de imagen ( Pic ture El ement) </li></ul><ul><li>Resolución de pantalla: ancho por alto </li></ul><ul><ul><li>640  480, 800  600, 1024  768, 1600  1200... </li></ul></ul><ul><li>Número de colores </li></ul>2 24 = 16 M. de colores 24 bits por píxel Color verdadero 2 16 = 65535 colores 16 bits por píxel Alta resolución 2 8 = 256 colores 8 bits por píxel SVGA 2 4 = 16 colores 4 bits por píxel VGA
  69. 69. Tipos de imágenes <ul><li>Vectoriales </li></ul><ul><ul><li>Se describen matemáticamente como un conjunto de curvas </li></ul></ul><ul><li>De mapa de bits </li></ul>= CIRCLE(50, red)
  70. 70. Mapas de bits <ul><li>Ejemplo </li></ul><ul><ul><li>Imagen de mapa de bits descomprimida de 640  480 y color de 24 bits </li></ul></ul><ul><ul><ul><li>640  480  24 = 7.372.800 bits = 900 KB </li></ul></ul></ul><ul><ul><ul><li>Con un módem de 56 Kbps  128 s </li></ul></ul></ul><ul><li>¿Qué es lo que se hace entonces? </li></ul><ul><ul><li>Comprimirlas </li></ul></ul><ul><ul><ul><li>Con pérdida </li></ul></ul></ul><ul><ul><ul><li>Sin pérdida </li></ul></ul></ul>
  71. 71. GIF <ul><li>Compresión sin pérdida </li></ul><ul><li>8 bits (máximo de 256 colores) </li></ul><ul><ul><li>Efecto de tramado: al ajustar los colores </li></ul></ul><ul><li>Resulta adecuado para dibujos </li></ul><ul><li>Permite transparencias </li></ul><ul><ul><li>Problema: aliasing (escalado) </li></ul></ul><ul><ul><li>Sólo se puede poner un color como transparente </li></ul></ul>.gif
  72. 72. JPEG <ul><li>Compresión con pérdida </li></ul><ul><li>24 bits de color </li></ul><ul><li>Adecuado para fotografías </li></ul><ul><li>No permite transparencia </li></ul>.jpg, .jpeg
  73. 73. Tiempos de respuesta <ul><li>1 décima de segundo </li></ul><ul><ul><li>El usuario percibe que el sistema está reaccionando instantáneamente </li></ul></ul><ul><li>1 segundo </li></ul><ul><ul><li>Sin demora, aunque se pierde la noción de instantaneidad </li></ul></ul><ul><li>10 segundos </li></ul><ul><ul><li>Límite máximo para que el usuario espere sin hacer otras cosas </li></ul></ul><ul><li>Hay que tener en cuenta estos valores para el tamaño de cada documento </li></ul>
  74. 74. Imágenes en HTML <ul><li>Se insertan con la etiqueta <img> </li></ul><img src=“URL” alt=“Texto alternativo” width=“ancho” height=“alto”/>
  75. 75. Atributo alt <ul><li>Proporciona una descripción de la imagen </li></ul><ul><li>Es lo que aparecerá en un navegador de texto </li></ul><ul><li>O lo que leerá un navegador de voz </li></ul>
  76. 76. Atributos height y width <ul><li>El propósito principal es reservar espacio en la página para la imagen que se está cargando </li></ul><ul><ul><li>Así el navegador puede ir mostrando los elementos de la página en su ubicación final </li></ul></ul><ul><li>No deben usarse para ajustar el tamaño </li></ul><ul><ul><li>Para eso usaremos un programa de diseño gráfico </li></ul></ul><ul><ul><li>Tienen que reflejar el tamaño real de la imagen </li></ul></ul><ul><ul><li>Una excepción a esto son las imágenes planas: </li></ul></ul><ul><ul><ul><li><img src=“pixel_verde.gif” height=“100” widht=“50”> </li></ul></ul></ul>
  77. 77. Ejercicio <ul><li>Probar a introducir imágenes en un documento </li></ul><ul><ul><li>Poner algunas aparte (por ejemplo, en un bloque <div> ellas solas) y otras en medio de un texto </li></ul></ul><ul><ul><li>¿Cómo se visualizan? </li></ul></ul>

×