Páginas WEB Accesibles - Universidad Complutense de Madrid

Introducción HTML El estándarEsctructura de un documento HTMLEsctructura de un documento HTMLPrueba 1Prueba 1Parrafoitem 1item 2IMPORTANTEEn HTML se representan los elementos, no cómo se pintan.HTML tiene la estrucutura no la presentación.Luis Fernando Llana DíazPáginas WEB AccesiblesDept. de Sistemas Informáticos y Programación Universidad Complutense de Madrid

Introducción HTML El estándarEsctructura de un documento HTMLLuis Fernando Llana DíazPáginas WEB AccesiblesDept. de Sistemas Informáticos y Programación Universidad Complutense de Madrid

Introducción HTML El estándarEsctructura de un documento HTMLAñadiendo estilo.................................body {background-color: #ace;color:black;font-family:sans-serif;padding:0;margin:0;}h1,h2,h3,h4,h5,h6 {font-variant:small-caps;background-color:#99FF33;padding-left:1em;padding-right:1em;border-top: solid 1pt black;border-bottom: solid 1pt black;text-align:right;}Luis Fernando Llana DíazPáginas WEB AccesiblesDept. de Sistemas Informáticos y Programación Universidad Complutense de Madrid

Introducción HTML El estándarEsctructura de un documento HTMLLuis Fernando Llana DíazPáginas WEB AccesiblesDept. de Sistemas Informáticos y Programación Universidad Complutense de Madrid

Introducción HTML El estándarMarcas importantesMarcas importantesCabeceras: h1, . . ., h6.Párrafos: p.Listas: ol, ul, dl.Tablas: table.Enlaces: a.Imágenes: img.Formularios: form.Marcas de formato: span, div.Luis Fernando Llana DíazPáginas WEB AccesiblesDept. de Sistemas Informáticos y Programación Universidad Complutense de Madrid

Introducción HTML El estándarCabecerasCabecerasSirven para dar estructura al documento.Se deben usar de forma ordenada:Uso adecuado: NO se debe usar para cambiar el tipo de letra.Luis Fernando Llana DíazPáginas WEB AccesiblesDept. de Sistemas Informáticos y Programación Universidad Complutense de Madrid

Introducción HTML El estándarCabecerasI Premio Complutense-Microsoft de Diseno AccesibleBasesLa Universidad Complutense de Madrid, a traves del ObservatorioComplutense de la Accesibilidad a la óEducacin Superior, convoca .............................CandidatosRequisitos..........................Formularios........................Luis Fernando Llana DíazPáginas WEB AccesiblesDept. de Sistemas Informáticos y Programación Universidad Complutense de Madrid

Introducción HTML El estándarCabecerasPárrafosTodo el texto debe ir dentro de un bloqueEl párrafo es la principal marca de bloque. Todo el texto deben ir dentro de una marca de bloque.La principal marca de bloque es el parrafo.Luis Fernando Llana DiazDept. Sistemas Informaticos y ProgramacionFacultad de InformaticaUniversidad Complutense de MadridLuis Fernando Llana DíazPáginas WEB AccesiblesDept. de Sistemas Informáticos y Programación Universidad Complutense de Madrid

Introducción HTML El estándarCabecerasEnlaces (Anchors)Los enlaces hacen que el HTML sea hyper.Luis Fernando Llana íDazLuis Fernando Llana DíazPáginas WEB AccesiblesDept. de Sistemas Informáticos y Programación Universidad Complutense de Madrid

Introducción HTML El estándarCabecerasTipos de URLsAbsoluta:...Relativas:Al servidor donde está el documento:.........Al documento actual . ............... . .o marca base, dentro de la cabecera:Luis Fernando Llana DíazPáginas WEB AccesiblesDept. de Sistemas Informáticos y Programación Universidad Complutense de Madrid

Introducción HTML El estándarCabecerasFormulariosInteractuar con el servidor:BuscarBuscar en googleAVISO: la etiqueta no funciona bien en IE6. El siguienteNO funciona bien en IE6:BorrarModificarEn IE6 es necesario usar la etiqueta .Luis Fernando Llana DíazPáginas WEB AccesiblesDept. de Sistemas Informáticos y Programación Universidad Complutense de Madrid

Introducción HTML El estándarCabecerasFormulariosAtributos:action URL del programa que analiza la petición; puede seun PHP, JSP o servlet de Java, ASP, Phyton, CGI(prgrama en cualquier lenguaje de programación:Python, Perl, C o incluso Pascal).Salida del programa un fichero HTML.method dos métodos de dar el input al programa.get se añaden los parámetros a la URL.post se añaden el la petición como fichero deentrada (no aparece en la URL).Luis Fernando Llana DíazPáginas WEB AccesiblesDept. de Sistemas Informáticos y Programación Universidad Complutense de Madrid

Introducción HTML El estándarCabecerasFormulariosTodas las marcas de entrada deben tener el atributo name (para elservidor) y el atributo id (para la marca label).Marca input, atributo type:text Texto normal.password Texto normal, pero en el echo aparecen *. AVISO noes seguro.checkbox Marcado o no, verdadero o falso, etc...radio Opciones alternativas, sólo se puede seleccionar unode los relacionados (tienen el mismo atributo name).image, reset, submit, button botones, es preferible usar laetiqueta button, pero cuidado con IE6.Luis Fernando Llana DíazPáginas WEB AccesiblesDept. de Sistemas Informáticos y Programación Universidad Complutense de Madrid

Introducción HTML El estándarCabecerasFormulariosOtras marcas de input:file mandar un fichero, es necesario que el método seapost.hidden datos que no se muestran en el navegador.Otras marcas de entrada (no input):textarea textos largos....... para listasdesplegables.http://antares.sip.ucm.es/~luis/sugerencias.phpLuis Fernando Llana DíazPáginas WEB AccesiblesDept. de Sistemas Informáticos y Programación Universidad Complutense de Madrid

Introducción HTML El estándarCabecerasImágenes

Introducción HTML El estándarCabecerasTablasNombreApellidoséTelfonoe-MailLuis FernandoLlana íDaz4527llana@sip.ucm.eséJos LuisíRodrguez Zapaterozp@la-moncloa.esLuis Fernando Llana DíazPáginas WEB AccesiblesDept. de Sistemas Informáticos y Programación Universidad Complutense de Madrid

Introducción HTML El estándarCabecerasAtributos Isrc, href, alt, action, method.Modifican el comportamiento de la marca.El valor siempre debe ir entre comillas simples ’ o comillasdobles ".Obsoleto: . Todo lo relativo avisualización: colores, tipos de letras, posicionamiento, se debedejar en hojas de estilo separadas.saltar úmen de ónavegacinEnlaces:Universidad Complutense de MadridáPgina de LuisáPgina del W3CLuis Fernando Llana DíazPáginas WEB AccesiblesDept. de Sistemas Informáticos y Programación Universidad Complutense de Madrid

Introducción HTML El estándarUso correcto sel marcadoUso bueno del marcado IIdentificación del lenguaje natural:.....................No usar las comillas:texto entre comillasLuis Fernando Llana DíazPáginas WEB AccesiblesDept. de Sistemas Informáticos y Programación Universidad Complutense de Madrid

Introducción HTML El estándarUso correcto sel marcadoUso bueno del marcado IIINo usar tablas para maquetado de las páginas.http://antares.sip.ucm.es/pruebas/html/pr3.html

Introducción HTML El estándarUso correcto sel marcadoUso bueno del marcado IVTexto en 2 columnasUn áprrafo, ....Otro áprrafo, ...Un áprrafo, ...Luis Fernando Llana DíazPáginas WEB AccesiblesDept. de Sistemas Informáticos y Programación Universidad Complutense de Madrid

Introducción HTML El estándarLeyendo el DTDLeyendo el estándar Ihttp://antares.sip.ucm.es/~luis/estandares/html4sidebar/elem.htmlDescripción sintáctica de un fichero HTML en sintaxis DTD.Donde se pueden colocar marcas y donde no. E.j. una referenciadebe estar dentro de una marca de bloque.Dos clases de marcas block o inline.Luis Fernando Llana DíazPáginas WEB AccesiblesDept. de Sistemas Informáticos y Programación Universidad Complutense de Madrid

Introducción HTML El estándarLeyendo el DTDLeyendo el estándar IILuis Fernando Llana DíazPáginas WEB AccesiblesDept. de Sistemas Informáticos y Programación Universidad Complutense de Madrid

Introducción HTML El estándarLeyendo el DTDLeyendo el estándar IIILuis Fernando Llana DíazPáginas WEB AccesiblesDept. de Sistemas Informáticos y Programación Universidad Complutense de Madrid

Introducción HTML El estándarLeyendo el DTDVisualización de una página I1 Analizar el HTML y crear un árbol que repesenta eldocumento (document tree).htmlheadlink title metabodydivh1ph2olspanli li li liLuis Fernando Llana DíazPáginas WEB AccesiblesDept. de Sistemas Informáticos y Programación Universidad Complutense de Madrid

Introducción HTML El estándarLeyendo el DTDVisualización de una página II2 Identificar el medio en el que va a representar la página:braille, embossed, handheld, print, projection, screen, speech,tty, tv.3 Descargar las hojas de esilo asociadas al documento y almedio.4 Anotar en cada nodo del árbol con cada propiedad disponiblesegún las hojas de estilo, si el medio es screen se aplica elvisual formatting model.5 Generar una estructura de formato, es parecido al árbolanterior pero puede aparecer y desaparecer información:Si un elemento tinen el valor none en la propiedad display,no aprece.Luis Fernando Llana DíazPáginas WEB AccesiblesDept. de Sistemas Informáticos y Programación Universidad Complutense de Madrid

Introducción HTML El estándarLeyendo el DTDVisualización de una página IIIEl las listas aparece puede aparecer una imagen bola.No se modifica el document tree.6 Transferir la estructura de formato al medio concreto (impimirlos resultados, mostrarlos en la ventana de un navegadorgráfico, pronunciar el texto, etc.).Luis Fernando Llana DíazPáginas WEB AccesiblesDept. de Sistemas Informáticos y Programación Universidad Complutense de Madrid

Introducción HTML El estándarLeyendo el DTDPrincipios del diseño CSS I1 Compatibilidad, hacia adelante y hacia atrás.2 Complemento a los documentos estructurados. Documentosuniformes. Es fácil cambiar la apariencia de un documento sinalterar el HTML.3 Independecia del fabricante, plataforma y dispositivo.4 Mantenibilidad. Si el jefe dice que los comentarios deben ir enrojo, basta cambiar una ĺınea5 Mejora del rendimiento de la red.6 Flexibilidad. Se pueden especificar información de estilo en elnavegador (user agent), del usuario, las que aparecen eldocumento.Luis Fernando Llana DíazPáginas WEB AccesiblesDept. de Sistemas Informáticos y Programación Universidad Complutense de Madrid

Introducción HTML El estándarLeyendo el DTDPrincipios del diseño CSS II7 Riqueza. La calidad depende de la creatividad del autor.8 Accesibilidad.Se puede controlar la apariencia del texto, no son necesarioslos “botones gráficos”.Hace innecesario el uso de trucos para la maquetación: marcos(http://www.la-moncloa.es), imágenes invisibles, o tablas.El modificador !important permite al usuario definir susnecesidades.El valor inherit mejora la generalidad de la cascada ypermite una mejor y más consitente ajuste.Se soporta medios como braille, embossed y tty.Luis Fernando Llana DíazPáginas WEB AccesiblesDept. de Sistemas Informáticos y Programación Universidad Complutense de Madrid