Successfully reported this slideshow.

XHTMLy CSS 4a Edicion

0

Share

Upcoming SlideShare
HTML y CSS
HTML y CSS
Loading in …3
×
1 of 59
1 of 59

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

XHTMLy CSS 4a Edicion

  1. 1. XHTML + CSS Raúl Jiménez Ortega - rjimenez@webmastersmalaga.com
  2. 2. Programa Entrega de documentación y presentación. Introducción Histórica Accesibilidad XHTML 1.0 1er descanso Amaya Ejercicio 2º descanso CSS Firebug y validaciones
  3. 3. Presentación Asociación de Webmasters de Málaga http://www.webmastersmalaga.com
  4. 4. Objetivos del taller ● Dar una visión global de cómo se crea una página web estática. ● Adquirir aptitudes para evaluar la calidad de una web. ● Conocer las herramientas de validación de estándares. ● Justificar la necesidad de usar estándares de accesibilidad. ● Aprender mediante la práctica a crear una página web estática básica. ● Un repaso a algunas herramientas de depuración.
  5. 5. Qué no vamos a ver en el taller Al tener tan poco tiempo hay cosas que no podremos ver: ● No estudiaremos en profundidad XHTML ni CSS. ● No estudiaremos usabilidad ni posicionamiento. ● No aprenderemos a publicar una página web.
  6. 6. Introducción Histórica
  7. 7. ¿Qué es XHTML y para qué se usa? eXtensible HiperText Markup Language Lenguaje extensible de marcado de hipertexto Se usa para estructurar los contenidos de los documentos de hipertexto. Hipertexto: texto que se muestra en un computador y que se caracteriza por tener enlaces a otros textos. La popularidad de estos lenguajes (HTML/XHTML/SGML,...)se debe al amplio uso que tiene en Internet.
  8. 8. Introdución histórica Standard Generalized Markup Language (1986 ISO normaliza) World Wide Web Consortium (W3C) HTML 3.2 - W3C, 14/01/1997 HTML 4.01 W3C, 24/12/1999 XHTML 1.0 - W3C, 26/01/2000 XML 1.0 - W3C, 26/11/2008 XML 1.1 - W3C, 16/08/2006
  9. 9. XHTML ó HTML 4.0 HTML 4.01 XHTML 1.0 <img alt="Portrait Murakami Haruki" <img alt="Portrait Murakami Haruki" src="/images/murakami.jpg"> src="/images/murakami.jpg" /> <p lang="fr"> <p xml:lang="fr"> Je levai la tête pour regarder Je levai la tête pour regarder les étoiles. Leur vue apaisa les étoiles. Leur vue apaisa peu à peu les battements de peu à peu les battements de mon coeur. mon coeur. </p> </p> <p> <p> <cite class="title"> <cite class="title"> Chroniques de l'oiseau à Chroniques de l'oiseau à ressort ressort </cite> </cite> - <cite class="author"> - <cite class="author"> Haruki Murakami Haruki Murakami </cite> </cite> </p> </p>
  10. 10. XHTML - HTML 4.0 Hay 3 tipos de documentos (DOCTYPE): Strict: Separa completamente el contenido de la presentación. No permite usar elementos desaprobados. Transitional: Permite el uso de elementos desaprobados. Frameset: Permite usar elementos desaprobados como los marcos (frames e iframes).
  11. 11. Accesibilidad ¿Qué es?, ¿por qué? y ¿en que consiste?
  12. 12. Accesibilidad - ¿Qué es? No es más que una serie de pautas y recomendaciones que han sido creadas para garantizar el acceso a la información. Estas facilitan la navegación a: ● Personas: con algún tipo de discapacidad: visual, auditiva, cognitiva, ... ● Navegadores: al usar un lenguaje universal. ● Buscadores: al estar bien estructurado facilita la búsqueda de información.
  13. 13. Accesibilidad - No es un capricho Las Naciones Unidas en la declaración sobre los Derechos de las Personas con Discapacidad (2006) reconoció que la Accesibilidad es un derecho humano básico. En España por la ley 34/2002 de 11 de Julio de Servicios de la Sociedad de la Información y Comercio Electrónico establece que las Administraciones públicas tienen que adoptar las medidas necesarias para que la información disponible en sus respectivas páginas de Internet pueda ser accesible a personas con discapacidad y de edad avanzada. Leyes vigentes: http://www.sidar.org/recur/direc/legis/espa.php
  14. 14. Accesibilidad - Pautas 1. Proporcione alternativas equivalentes para el contenido visual y auditivo. 2. No se base sólo en el color. 3. Identifique el idioma usado. 4. Diseñe con indepencia del dispositivo. 5. Utilice tecnologías y pautas w3c. 6. Proporcione mecanismos claros de navegación. 7. Asegúrese de que los documentos sean claros y simples. 8. Etc.
  15. 15. Accesibilidad - Técnicas 1. Evite contenidos que se muevan y/o parpadeen. No actualice o redireccione las páginas sin autorización del usuario. 2. Si incrusta alguna aplicación en la página asegúrese de que también es accesible. 3. Realice soluciones compatibles con navegadores antiguos. 4. Evite utilizar elementes desaconsejados por w3c. Si es imposible crear una página accesible, cree una alternativa que si lo sea. 5. Cree un estilo coherente, simple y claro para todas las páginas de su web. 6. Etc.
  16. 16. XHTML 1.0 Conceptos y reglas básicas
  17. 17. Conceptos básicos Etiquetas: La etiquetas son palabras reservadas que se encierran entre los símbolos "<" y ">" y que tienen un significado semántico. Ejemplos de etiquetas pueden ser: ● <br/> - salto de linea. ● <p> ... </p>- párrafo. Pero además algunas etiquetas pueden tener atributos, especiales, por ejemplo: <a href="curriculum_vitae.html">Enlace a mi CV</a>
  18. 18. Conceptos básicos (II) Las etiquetas pueden aparecer individualmente o en parejas. Por ejemplo para enmarcar un texto dentro de un párrafo usamos: <p>Aquí dentro iría el párrafo.</p> *Estas etiquetas se cierran anteponiendo el símbolo "/" al nombre de la etiqueta. Y por ejemplo así se insertaría una imagen: <img src="mi_foto.jpg" alt="Foto de Raúl comiendo pipas" />
  19. 19. Conceptos básicos (III) ● Los elementos de un documento XHTML usan una estructura de árbol. ● No se puede cerrar una etiqueta si la anterior no se ha cerrado. Ejemplo: Incorrecto: <p><strong>Texto en negrita</p></strong> Correcto: <p><strong>Texto en negrita</strong></p>
  20. 20. Conceptos básicos (III) ● Los elementos de un documento XHTML usan una estructura de árbol. ● No se puede cerrar una etiqueta si la anterior no se ha cerrado. Ejemplo: Incorrecto: <p><strong>Texto en negrita</p></strong> Correcto: <p><strong>Texto en negrita</strong></p> Correcto y bonito: <p> <strong>Texto en negrita</strong> </p>
  21. 21. Reglas básicas La estructura básica de un documento XHTML es la siguiente: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>Nuevo</title> <!-- Información relevante para buscadores y navegadores --> </head> <body> <!-- Aquí introduciremos todo el contenido visible en la página --> </body> </html>
  22. 22. Juegos de caracteres O también conocidos como "charsets": ISO 8859-1: lenguas originarias de Europa occidental: alemán, aragonés, asturiano, catalán, danés, escocés, español,etc. ISO 8859-2: lenguas de Europa Oriental. UTF-8: Unicode, es el más usado en Internet. Ejemplo de uso: <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  23. 23. Reglas básicas Normas de XHTML: ● El nombre de las etiquetas y los atributos deben ir en minúsculas. ● El valor de los atributos deben ir entre comillas. ● Todas las etiquetas tienen que ser cerradas. ● Los atributos tienen que tener siempre valores.
  24. 24. Algunas etiquetas Algunas de las etiquetas más comunes: ● h1, h2, h3 (header): Encabezado de orden 1,2,3... ● p (paragraph): parrafo. ● a: hipervínculo/vínculo/link. ● img (image): imagen. ● strong: enérgico. ● ul (unorder list): lista desordenada. ○ li (list item): elemento de lista.
  25. 25. Hipervínculos Algunos atributos que nos van a hacer falta: <a href="http://www.webmastergranada.es">Enlace</a> ● href: Este atributo indica la ruta del enlace al que queremos acceder. Las rutas pueden ser absolutas o relativas: ● Absolutas: hay que indicar la URL completa del destino. Ejemplos: http://miweb.com/foto.jpg, ftp://.... ● Relativas: se busca el destino a partir del directorio en el que se encuentra el fichero. Por ejemplos: fichero.html, directorio/foto.jpg, ../estilo.css.
  26. 26. Listas desordenadas e Imagen Ejemplo de lista desordenada: Ejemplo de imágen: Código: Código: <ul> <img src="valor" alt="valor" /> <li>Elemento 1</li> <li>Elemento 2</li> ● src: Indica la ruta donde se ... encuentra la imagen. </ul> ● alt: Es un texto alternativo que Se verá así: se usará para describir el lo ● Elemento 1 que aparece en la imagen. ● Elemento 2
  27. 27. Amaya - ¿Qué es? Amaya es un cliente Web que actúa como navegador y como editor. Ha sido diseñado por el W3C y el INRIA con el principal objetivo de demostrar nuevas tecnologías Web y ayudar a los usuarios a producir páginas Web válidas. Ventajas frente a otras alternativas: ● Adobe Dreamweaver ● MS Frontpage ● MS Word Y lo mejor de todo: es libre, gratuito y tiene versiones para Windows, Linux y MacOS. Podéis descarlo en: http://www.w3.org/Amaya
  28. 28. Ejercicio Crear una página que contenga los siguientes elementos. ● Encabezado 1 ● Encabezado 2 ● Párrafo con un enlace y un texto enérgico. ● Añadir una imagen ● Encabezado 3 ● Una lista desordenada ● Encabezado 3 ● Y otra lista pero esta vez ordenada. ● Añadir un párrafo con el pie de página (autor, año,...)
  29. 29. CSS Conceptos y reglas básicas
  30. 30. Introducción
  31. 31. Introducción
  32. 32. Introducción ● Todas las páginas mostradas tienen el mismo código HTML. ● Por defecto, el navegador mostraría ésto. ● Esa apariencia se puede mejorar mediante 'hojas de estilo'. ● Otros muchos diseños se pueden encontrar en http: //www.csszengarden.com
  33. 33. ¿Qué es CSS? CSS es un lenguaje de hojas de estilos creado para controlar la presentación de los documentos electrónicos definidos por HTML y XHTML. CSS es la mejor forma de separar los contenidos y su presentación y es imprescindible para la creación de páginas webs complejas.
  34. 34. Ventajas del CSS La separación de los contenidos y su presentación presenta numerosas ventajas: ● Separación de los contenidos y su presentación. ● Mejora la accesibilidad del documento. ● Reduce la complejidad de su mantenimiento. ● Permite visualizar el mismo documento en infinidad de dispositivos diferentes. ● Facilita la reutilización, la personalización y el mantenimiento
  35. 35. ¿Cómo funciona CSS? Tenemos dos opciones para insertar CSS en XHTML. 1.- Archivo externo (que se llama "Hoja de Estilo") y enlazarlo desde nuestro documento XHTML. <link rel="stylesheet" type="text/css" href="estilo.css"/> Ventaja: al modificar una hoja de estilos modificamos el aspecto de los todas las páginas que enlacen esa hoja de estilos.
  36. 36. ¿Cómo funciona CSS? (II) Podemos inscrutarlo en el mismo archivo XHTML. <style type="text/css"> <!-- body,td,th { font-family: Arial; font-size: 12px; color: #FFE6F5; } --> </style> Se utiliza para webs poco complejas.
  37. 37. ¿Dónde se coloca CSS? CSS se coloca entre las etiquetas <head></head> del documento (X)HTML. (la Cabecera <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" type="text/css" rel="hoja_estilos.css"/> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ejemplo de Incrustación de CSS</title> </head> <body> </body> </html>
  38. 38. Importante ● Una de las características más importantes de los estilos definidos con CSS es que se pueden agrupar en diferentes reglas que se aplican al mismo selector. h1 { color:red; } h1 { font-size: 2em; } h1 (font-family: Verdana; } Esto es igual a la siguiente regla CSS: h1 { color: red; font-size: 2em; font-family: Verdana; }
  39. 39. Importante Herencia La herencia de los estilos definidos mediante CSS es uno de los conceptos más característicos de este lenguaje de hojas de estilos. Muchas de las propiedades que se aplican a los elementos, son heredadas por los elementos que se encuentran dentro de esos elementos.
  40. 40. Ejemplo de Herencia <html> <head> <title> Ejemplo de herencia de estilos </title> <style type="text/css"> body { font-family: Arial; color: black; } h1 { font-family: Verdana; } p { color: red; } </style > </head> <body> <h1>Titular de la pagina</h1> <p>Un párrafo de texto no muy largo</p> </body> </html>
  41. 41. Conceptos básicos Regla: cada uno de los estilos que comprenden una hoja de estilos CSS. Cada regla esta compuesta de "selectores", "llave de apertura" ({), "declaraciones" y "llave de cierre" (}). Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS. (h1, h2, h3, body, td, img, p,... ) Declaración: la declaración específica los estilos que se aplicarán a los elementos. ( color : black ) Propiedad: permite modificar el aspecto de una característica del elemento. (font-family, color, margin, padding,...) Valor: indica el nuevo valor de la característica modificada en el elemento. (Arial, black, 20px, 0px,...)
  42. 42. Regla CSS
  43. 43. Comenzando El color de primer plano La propiedad color hace referencia al foreground color, es decir, el color que está por encima del fondo. body { color: #666; } De esta manera nuestro web tendrá las letras de gris oscuro. El fondo Podemos modificar el fondo de un elemento con la propiedad background, que tiene la siguiente sintaxis: background: #fff; De esta manera el color de fondo será de color blanco.
  44. 44. Continuamos Fuente Hay varias propiedades que nos permiten jugar con el aspecto del texto. Antes que nada tenemos que considerar que no todos los ordenadores tienen las mismas fuentes instaladas. Es necesario utilizar fuentes "estándar" que tengan la mayoría de ordenadores. font-family: define las tipografías y su orden de preferencia. font-style: da formato a la tipografía (cursiva, oblicua y normal) font-variant: da formato de versalitas al texto. font-weight: grosor de la letra. font-size: tamaño de la letra. Puede ser en pixeles (px) o puntos (pt). font: nos permite definir simultáneamente más de una propiedad de la fuente. El orden de los valores es importante.
  45. 45. Continuamos Texto Para la propiedad texto tenemos: text-align: alineación horizontal del texto respecto un elemento. (left, right, center, justify) text-decoration: define decoraciones de la fuente. (none,blink, line-through, overline, underline). text-transform: define mayusculas/minúsculas. (capitalize, uppercase, lowercase, none) line-height: define el interlineado del texto. Se mide en px. body { text-align: left; text-decoration: underline; }
  46. 46. El modelo de caja El "box model" es la característica más importante del lenguaje de hojas de estilos CSS, ya que condiciona el diseño de todas las webs y todos los documentos (X)HTML. Todos los elementos que forman un documento HTML se representan mediante cajas rectangulares, cuyas propiedades define CSS y cuya representación visual controla CSS. Hay dos tipos de cajas: ● Block: rompen el flujo de maquetación (un párrafo). ● Inline: siguen el flujo y estan contenidos dentro de elementos de bloque. (un enlace).
  47. 47. El modelo de caja (II) Las propiedades más importantes de una caja son: width (ancho), height (alto), padding (relleno), border (borde) y margin (margen).
  48. 48. El modelo de caja (III) Los elementos que forman una caja son (más a menos prioridad): Contenido (content): se trata del componente principal del elemento. Relleno (padding): esta formado por el espacio libre (opcional) entre el contenido y el borde que lo encierra (opcionalmente). Borde (border): línea que encierra completamente el contenido y el relleno. Imagen de fondo (background image): imagen que se muestra por debajo del contenido. Color de fondo (background color): color que rellena el espacio por el contenido y su posible relleno. Margen (margin): espacio libre entre la caja y las demas cajas adyacentes.
  49. 49. Anchura ( width ) Width (anchura) Establece la anchura de un elemento y no admite valores negativos. El siguiente ejemplo establece el valor de anchura del <div> lateral: #lateral { width: 200px; } <div id="lateral"> ... </div>
  50. 50. Altura ( height ) Height (altura) Establece la altura de un elemento y no admite valores negativos. El siguiente ejemplo establece el valor de la altura del <div> de cabecera: #cabecera { height: 60px; } <div id="cabecera"> .... </div>
  51. 51. Margen (margin) CSS define 4 propiedades para controlar cada uno de los margenes horizontales y verticales de un elemento. margin-top: margen superior. margin-right: margen derecho. margin-botton: margen inferior. margin-left: margen izquierdo. # cabecera { margin: 10px 5px 10px 5px; }
  52. 52. Relleno ( padding ) Al igual que el margin, el padding también dispone de 4 propiedades para controlar los espacios de relleno horizontales y verticales de un elemento. padding-top: relleno superior. padding-right: relleno derecho. padding-botton: relleno inferior. padding-left: relleno izquierdo. Comparte las mismas características que la propiedad Margin.
  53. 53. Clases (.clase) ● Esta orientada para seleccionar elementos concretos de la página. ● Lo que se hace es asignar un atributo class especificos a los elementos que se quieren seleccionar y en la hoja de estilos se utiliza el selector de clase. ● El selector esta formado por un signo de punto (.) y el nombre del atributo class que se quiere seleccionar. .especial { color: red; } Este ejemplo de clase define el color de la fuente de color rojo.
  54. 54. ID (#identificador) ● La principal diferencia entre este selector y el selector de clase tiene que ver con HTML y no CSS. ● El atributo "id" debe ser único, de forma que 2 elementos diferentes no pueden tener el mismo valor de ir. ● Comparten las mismas características, salvo por el símbolo que utiliza ( almohadilla # ). #especial { color: red; } <p>Primer párrafo</p> <p id="especial"> Segundo párrafo</p> <p>Tercer párrafo</p>
  55. 55. Clases vs ID Por tanto, para aplicar un mismo estilo a un sólo elemento utilizamos el selector de "id" y para varias estilos elementos diferentes el selector de "clase". .importante { color:red; } (Clase) #importante { color:red; } (ID)
  56. 56. Ejercicio CSS ● Añadir un color de fondo ● Cambiar el tipo de fuente por defecto, de algún elemento (h1,etc) ● Definir un color para los enlaces ● Definir una decoración para :hover de algún enlace La imaginación al poder
  57. 57. Herramientas para la depuración Firebug: https://addons.mozilla.org/es-ES/firefox/addon/1843 Web Developer: https://addons.mozilla.org/es-ES/firefox/addon/60 YSlow (Why slow?): https://addons.mozilla.org/es-ES/firefox/addon/5369 TAW3 (Test de Accesibilidad Web) http://www.tawdis.net Otras: MeasureIt, ColorZilla y WebDeveloper
  58. 58. Se nos acabó el tiempo... Si os habéis quedado con alguna duda no os preocupéis, podéis preguntarnos cualquier cosa a través del Campus Virtual de la Asociación de Webmasters: http://webmastergranada.es/formacion/ Y también para profundizar más: http://www.w3schools.com/
  59. 59. Esto ha sido todo... ¡¡MUCHAS GRACIAS!!

×