XHTMLy CSS 4a Edicion
Upcoming SlideShare
Loading in...5
×
 

XHTMLy CSS 4a Edicion

on

  • 699 views

Taller impartido en la Asociación de Webmasters de Málaga en 2010

Taller impartido en la Asociación de Webmasters de Málaga en 2010

Statistics

Views

Total Views
699
Views on SlideShare
697
Embed Views
2

Actions

Likes
0
Downloads
7
Comments
0

1 Embed 2

http://www.linkedin.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

XHTMLy CSS 4a Edicion XHTMLy CSS 4a Edicion Presentation Transcript

  • XHTML + CSS Raúl Jiménez Ortega -rjimenez@webmastersmalaga.com
  • ProgramaEntrega de documentación y presentación.Introducción HistóricaAccesibilidadXHTML 1.01er descansoAmayaEjercicio2º descansoCSSFirebug y validaciones
  • Presentación Asociación de Webmasters de Málaga http://www.webmastersmalaga.com
  • 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.
  • 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.
  • Introducción Histórica
  • ¿Qué es XHTML y para qué se usa? eXtensible HiperText Markup Language Lenguaje extensible de marcado de hipertextoSe usa para estructurar los contenidos de los documentosde hipertexto.Hipertexto: texto que se muestra en un computador y que secaracteriza por tener enlaces a otros textos.La popularidad de estos lenguajes (HTML/XHTML/SGML,...)sedebe al amplio uso que tiene en Internet.
  • Introdución históricaStandard Generalized Markup Language (1986 ISO normaliza) World Wide Web Consortium (W3C)HTML 3.2 - W3C, 14/01/1997 HTML 4.01 W3C, 24/12/1999XHTML 1.0 - W3C, 26/01/2000XML 1.0 - W3C, 26/11/2008XML 1.1 - W3C, 16/08/2006
  • 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 loiseau à Chroniques de loiseau à ressort ressort </cite> </cite> - <cite class="author"> - <cite class="author"> Haruki Murakami Haruki Murakami </cite> </cite> </p> </p>
  • XHTML - HTML 4.0Hay 3 tipos de documentos (DOCTYPE):Strict:Separa completamente el contenido de la presentación. Nopermite usar elementos desaprobados.Transitional:Permite el uso de elementos desaprobados.Frameset:Permite usar elementos desaprobados como los marcos(frames e iframes).
  • Accesibilidad¿Qué es?, ¿por qué? y ¿en que consiste?
  • Accesibilidad - ¿Qué es?No es más que una serie de pautas y recomendaciones quehan 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.
  • Accesibilidad - No es un caprichoLas Naciones Unidas en la declaración sobre los Derechos de lasPersonas con Discapacidad (2006) reconoció que la Accesibilidad esun derecho humano básico.En España por la ley 34/2002 de 11 de Julio de Servicios de laSociedad de la Información y Comercio Electrónico establece que lasAdministraciones públicas tienen que adoptar las medidasnecesarias para que la información disponible en sus respectivaspáginas de Internet pueda ser accesible a personas con discapacidady de edad avanzada.Leyes vigentes:http://www.sidar.org/recur/direc/legis/espa.php
  • 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.
  • Accesibilidad - Técnicas1. Evite contenidos que se muevan y/o parpadeen. No actualice oredireccione las páginas sin autorización del usuario.2. Si incrusta alguna aplicación en la página asegúrese de quetambién es accesible.3. Realice soluciones compatibles con navegadores antiguos.4. Evite utilizar elementes desaconsejados por w3c. Si es imposiblecrear una página accesible, cree una alternativa que si lo sea.5. Cree un estilo coherente, simple y claro para todas las páginas desu web.6. Etc.
  • XHTML 1.0Conceptos y reglas básicas
  • Conceptos básicosEtiquetas:La etiquetas son palabras reservadas que se encierran entrelos 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>
  • Conceptos básicos (II)Las etiquetas pueden aparecer individualmente o en parejas.Por ejemplo para enmarcar un texto dentro de un párrafousamos: <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" />
  • 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>
  • 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>
  • Reglas básicasLa 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>
  • Juegos de caracteresO 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" />
  • Reglas básicasNormas 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.
  • Algunas etiquetasAlgunas 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.
  • HipervínculosAlgunos 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.
  • Listas desordenadas e ImagenEjemplo 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 queSe verá así: se usará para describir el lo ● Elemento 1 que aparece en la imagen. ● Elemento 2
  • Amaya - ¿Qué es?Amaya es un cliente Web que actúa como navegador ycomo editor. Ha sido diseñado por el W3C y el INRIA con elprincipal objetivo de demostrar nuevas tecnologías Web yayudar a los usuarios a producir páginas Web válidas.Ventajas frente a otras alternativas: ● Adobe Dreamweaver ● MS Frontpage ● MS WordY lo mejor de todo: es libre, gratuito y tiene versiones paraWindows, Linux y MacOS.Podéis descarlo en: http://www.w3.org/Amaya
  • EjercicioCrear una página que contenga los siguienteselementos. ● 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,...)
  • CSSConceptos y reglas básicas
  • Introducción
  • Introducción
  • 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
  • ¿Qué es CSS?CSS es un lenguaje de hojas de estilos creado para controlarla presentación de los documentos electrónicos definidos porHTML y XHTML.CSS es la mejor forma de separar los contenidos y supresentación y es imprescindible para la creación de páginaswebs complejas.
  • Ventajas del CSSLa separación de los contenidos y su presentación presentanumerosas 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
  • ¿Cómo funciona CSS?Tenemos dos opciones para insertar CSS en XHTML.1.- Archivo externo (que se llama "Hoja de Estilo") y enlazarlodesde nuestro documento XHTML. <link rel="stylesheet" type="text/css" href="estilo.css"/>Ventaja: al modificar una hoja de estilos modificamos elaspecto de los todas las páginas que enlacen esa hoja deestilos.
  • ¿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.
  • ¿Dónde se coloca CSS?CSS se coloca entre las etiquetas <head></head> deldocumento (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>
  • 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; }
  • ImportanteHerenciaLa herencia de los estilos definidos medianteCSS es uno de los conceptos máscaracterísticos de este lenguaje de hojas deestilos. Muchas de las propiedades que seaplican a los elementos, son heredadas por loselementos que se encuentran dentro de esoselementos.
  • 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>
  • Conceptos básicosRegla: cada uno de los estilos que comprenden una hoja de estilosCSS. 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 laregla CSS. (h1, h2, h3, body, td, img, p,... )Declaración: la declaración específica los estilos que se aplicarán alos elementos. ( color : black )Propiedad: permite modificar el aspecto de una característica delelemento. (font-family, color, margin, padding,...)Valor: indica el nuevo valor de la característica modificada en elelemento. (Arial, black, 20px, 0px,...)
  • Regla CSS
  • ComenzandoEl color de primer planoLa propiedad color hace referencia al foreground color, es decir, elcolor que está por encima del fondo.body { color: #666; }De esta manera nuestro web tendrá las letras de gris oscuro.El fondoPodemos modificar el fondo de un elemento con la propiedadbackground, que tiene la siguiente sintaxis:background: #fff;De esta manera el color de fondo será de color blanco.
  • ContinuamosFuenteHay varias propiedades que nos permiten jugar con el aspecto del texto. Antesque nada tenemos que considerar que no todos los ordenadores tienen lasmismas fuentes instaladas. Es necesario utilizar fuentes "estándar" que tenganla 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.
  • ContinuamosTextoPara 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;}
  • El modelo de cajaEl "box model" es la característica más importante del lenguaje dehojas de estilos CSS, ya que condiciona el diseño de todas las webs ytodos los documentos (X)HTML.Todos los elementos que forman un documento HTML se representanmediante cajas rectangulares, cuyas propiedades define CSS y cuyarepresentació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).
  • El modelo de caja (II)Las propiedades más importantes de una caja son: width(ancho), height (alto), padding (relleno), border (borde) ymargin (margen).
  • 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 elcontenido y el borde que lo encierra (opcionalmente).Borde (border): línea que encierra completamente el contenido y elrelleno.Imagen de fondo (background image): imagen que se muestra pordebajo del contenido.Color de fondo (background color): color que rellena el espacio por elcontenido y su posible relleno.Margen (margin): espacio libre entre la caja y las demas cajasadyacentes.
  • Anchura ( width )Width (anchura)Establece la anchura de un elemento y no admite valoresnegativos.El siguiente ejemplo establece el valor de anchura del <div>lateral:#lateral { width: 200px; }<div id="lateral"> ...</div>
  • Altura ( height )Height (altura)Establece la altura de un elemento y no admite valoresnegativos.El siguiente ejemplo establece el valor de la altura del <div> decabecera:#cabecera { height: 60px; }<div id="cabecera"> ....</div>
  • Margen (margin)CSS define 4 propiedades para controlar cada uno de losmargenes 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;}
  • Relleno ( padding )Al igual que el margin, el padding también dispone de 4propiedades para controlar los espacios de rellenohorizontales 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.
  • 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.
  • 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>
  • Clases vs IDPor tanto, para aplicar un mismo estilo a un sólo elemento utilizamos el selector de "id" y paravarias estilos elementos diferentes el selector de "clase". .importante { color:red; } (Clase) #importante { color:red; } (ID)
  • 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 enlaceLa imaginación al poder
  • Herramientas para la depuraciónFirebug:https://addons.mozilla.org/es-ES/firefox/addon/1843Web Developer:https://addons.mozilla.org/es-ES/firefox/addon/60YSlow (Why slow?):https://addons.mozilla.org/es-ES/firefox/addon/5369TAW3 (Test de Accesibilidad Web)http://www.tawdis.netOtras: MeasureIt, ColorZilla y WebDeveloper
  • 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/
  • Esto ha sido todo... ¡¡MUCHAS GRACIAS!!