Css y jscript
Upcoming SlideShare
Loading in...5
×
 

Css y jscript

on

  • 407 views

 

Statistics

Views

Total Views
407
Views on SlideShare
407
Embed Views
0

Actions

Likes
0
Downloads
5
Comments
0

0 Embeds 0

No embeds

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

Css y jscript Css y jscript Document Transcript

  • HTML, CSS, Javascript y Accesibilidad Page 1 of 19 Jorge Hoya Servicio de Informática de la Universidad de Cantabria Web: http://www.jorgehoya.es/ Email: jorge.hoya@gestion.unican.es Versión imprimible Qué veremos HTML y CSS • Introducción Brevísima historia del HTML Separación Contenido (CSS) de la Presentación (HTML): ■ Distintos tipos de DOCTYPES: del HTML hacia el XHTML (¿HTML5?) ■ Motivos y vinculación con la Accesibilidad Sintaxis HTML ■ Textos, enlaces, imágenes y listas ■ Etiquetas adecuadas a la semántica del documento : no b, sí strong Sintaxis CSS • Modelo de Caja (Box model) Contenido + padding + border + margin (hack IE5) Propiedad display - problema con los lectores de pantalla Posicionamiento: absoluto, relativo, fijado y flotante (diseño estático, líquido o elástico) • Tablas y Formularios Tablas sólo presentan datos tabulares no maquetan Vinculación de campos de formulario Javascript • Breve presentación • Inclusión correcta de script y trabajo con el DOM • Frameworks: jQuery, Mootools, Dojo, YUI Library, Prototype, Ext JS 4 HTML5 • Breve presentación Accesibilidad • El W3C y las WCAG Diseño móvil • Especificación para móviles de Javascript • Técnicas y emuladores For handouts, its often useful to include extra notes using a div element with class="handout" following each slide, as in: Brevísima historia del HTML Historia • Allá por 1990, Tim Berners-Lee le da por pensar en un sistema, basado en SGML, para acceder a documentos en línea almacenados en máquinas que se comunicaría vía TCP/IP. • No es hasta 1995 que se consigue publicar, el 22 de septiembre de ese mismo año, el primer estándar oficial de HTML, el HTML 2.0. • A partir del 1996 será el W3C quien se encargue de la evolución del estándar. • El borrador del estándar HTMLv 3.0 fue propuesto por el recién formado W3C en marzo de 1995 (que incorpora la creación de tablas, mejora del flujo de elementos, etc) • HTML 4.0 se publicó el 24 de Abril de 1998 e introduce las hojas de estilo y los scripts como grandes cambios. • La última especificación oficial de HTML se publicó el 24 de diciembre de 1999 y se denomina HTML 4.01 Desde la publicación de HTML 4.01, la actividad de estandarización de HTML se detuvo y el W3C se centró en el desarrollo del estándar XHTML. Por este motivo, en el año 2004, las empresas Apple, Mozilla y Opera mostraron su preocupación por la falta de interés del W3C en HTML y decidieron organizarse en una nueva asociación llamada WHATWG (Web Hypertext Application Technology Working Group), cuya actividad actual se centra en el futuro estándar HTML 5, del que se publicó un primer borrador oficial el 22 de enero de 2008. Debido a la fuerza de las empresas que forman el grupo WHATWG y a la publicación de los borradores de HTML 5.0, en marzo de 2007 el W3C decidió retomar la actividad estandarizadora de HTML. Herramientas • Un editor HTML, como Notepad++ • Firefox con las extensiones: Web developer (fundamental), HTML validator, Fangs, Firebug. Chrome con la extensión: Web developer (fundamental), Firebug. • IE8 con sus Herramientas de Desarrollo • ColorPic • Colour Contrast Analyser • Lynx para Windowshttp://personales.gestion.unican.es/hoyaj/curso/html-css-javascript/?no-google 17/04/2012
  • HTML, CSS, Javascript y Accesibilidad Page 2 of 19 Bibliografía • Breve historia de HTML en Librosweb • Explicación de HTML en la Wikipedia Separación presentación - contenido Al principio fue el Verbo... • Cuando surgió el HTML no había estándares por lo que el HTML sólo te preocupó de evolucionar aportando funcionalidades. • Con el origen de los navegadores, allá por el año 1995, surgió la necesidad de crear el estándar. • El estándar HTML establece qué etiquetas son válidas. • El estándar XHTML separa la capa de presentación de la de contenidos HTML = CONTENIDOS CSS = PRESENTACIÓN El desarrollo Web siguiendo los estándares deberá ser vuestro modo de vida, no debiérais crear página HTML alguna sin tenerlos siempre en mente. ¿Por qué? 1. Compatibilidad temporal con los navegadores. 2. Control de la capa de presentación. 3. Independencia del dispositivo utilizado para visualizar la Web. 4. Beneficios en SEO: Google es el primo hermano de Rompetechos, lo que él no vea no existe (pero ¡ojo! que cuando te ve da miedo lo que te saca: métodos de indexación y relevancia de contenidos además de nuevos algoritmos de optimización de resultados: http://www.nacionred.com/seguridad-en-internet/duckduckgo-el-buscador-de-internet-que-respeta-tu-privacidad - ver video al final del documento-). 5. Disminución del peso de la página, aumento en la rapidez de carga de la misma (mejora en la experiencia del usuario - Usabilidad) 6. Accesibilidad Bibliografía • SEO: Guía de introducción a la optimización de motores de búsqueda. • Criterios a aplicar en SEO • Qué es la Usabilidad • Úsalo, usabilidad para todos • Introducción a la usabilidad HTML: DOCTYPE, especificación del tipo de documento ¿Por qué se debe especificar el doctype? Porque determina qué versión de (X)HTML utiliza el documento, y esa es una información clave que necesitan los navegadores u otras herramientas que procesen el documento. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Tipos de (X)HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!-- HTML 4.01 Strict --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!-- HTML 4.01 Transitional --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <!-- HTML 4.01 Frameset --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- XHTML 1.0 Strict --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- XHTML 1.0 Transi <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <!-- XHTML 1.0 Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <!-- XHTML 1.1 --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd"> <!-- XHTML Basic 1.1 --> <!DOCTYPE HTML> <!-- HTML5 --> Otros tipos <!DOCTYPE math PUBLIC "-//W3C//DTD MathML 2.0//EN" "http://www.w3.org/TR/MathML2/dtd/mathml2.dtd"> <!DOCTYPE math SYSTEM "http://www.w3.org/Math/DTD/mathml1/mathml.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd"> Bibliografía • W3C: No se debe olvidar añadir el doctype • W3C: Recommended Doctype Declarations to use in your Web document • W3C: Marckup Validation Service • W3C: Todos los estándares y los borradores HTML: Estructura básica de un documento Documento XHTML 1.0 mínimo.http://personales.gestion.unican.es/hoyaj/curso/html-css-javascript/?no-google 17/04/2012
  • HTML, CSS, Javascript y Accesibilidad Page 3 of 19 <!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" xml:lang="es" lang="es"> <head> <title> mundo</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> </head> <body> <p> mundo</p> <!-- comentario --> </body> </html> Documento HTML 4.01 mínimo. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>My first HTML document</TITLE> </HEAD> <BODY> mundo <!-- comentario --> </BODY> </HTML> Documento HTML 5 mínimo. <!DOCTYPE html> <head> <title> mundo</title> </head> <body> <p> mundo</p> </body> </html> HTML: XHTML 1.0 Strict Trabajaremos con XHTML 1.0 Strict (el transational debe ser usado como tránsito entre el HTML 4 y el XHTML 1). Además de las etiquetas que XHTML declara como obsoletas, las principales diferencias son: • Todos los elementos, o etiquetas, deben cerrarse (las etiquetas vacías también: br, hr, link, meta). • Las etiquetas y atributos deben ir escritos en minúsculas. • Los valores de los atributos deben ir entre comillas. • No está permitida la minimización de atributos (se usa el nombre del atributo como valor). Más información en la Especificación del XHTML1 en W3C Ejemplos <br /> <input type="submit" value="Enviar" id=p /> <textarea readonly="readonly">Solo-lectura</textarea> Un ejemplo algo más completo <!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" xml:lang="es" lang="es"> <head> <title> mundo</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <!-- capa de presentacion --> <link rel="stylesheet" type="text/css" title="Hoja de estilos por defecto" href="css/style.css" media="print,screen" /> <link rel="alternate stylesheet" type="text/css" title="Hoja de estilos opcional" href="css/style2.css" media="screen" /> <link rel="shortcut icon" href="img/favicon.ico" /> <link rel="next" title="Pagina siguiente" href="pagina_siguiente.jsp" /> <!-- información para los buscadores --> <meta name="keywords" content="palabras separadas por comas que estén vinculadas con la Web" /> <meta name="description" content="Descripción de la Web de unos 50-150 caracteres" /> <meta name="author" content="Mr. Bing" /> <!-- inclusion de javascript --> <!-- CDATA: el texto que le sigue será excluido del parser XML --> <script type="text/javascript"> <![CDATA[ function matchwo(a,b) { if (a < b && a > 0) { return 1; } else { return 0; } } ]]> </script> </head> <body> <p> mundo</p> <!-- comentario --> </body> </html> Recursos • XHTML 1.0 Strict Cheat Sheet • XHTML Basic 1.1 Cheat Sheethttp://personales.gestion.unican.es/hoyaj/curso/html-css-javascript/?no-google 17/04/2012
  • HTML, CSS, Javascript y Accesibilidad Page 4 of 19 Ejemplo de documento web con posibilidad de escoger el CSS a utilizar. HTML: Textos, enlaces, imágenes y listas Textos, enlaces, imágenes y listas • Elementos básicos: párrafos (p), saltos de línea (br), enfasis (em), abreviaturas (abbr), acrónimos (acronym) • Semántica del documento: Introducción a la Web semántica • Encabezados (hn), listas (ol / ul), enlaces (a) (internos, o adyacentes, y externos) <h1>Encabecado de primer nivel</h1> - <h2>Encabecado de segundo nivel</h2> <ul> <li>Primer elemento</li> <li>Segundo elemento</li> </ul> <a href="http://www.unican.es/" title="Texto descriptivo del enlace">Universidad de Cantabria</a> <a href="#punto-de-destino-interno" title="">Enlace interno</a> <a name="punto-de-destino-interno"></a> <!-- ancla o punto de destino interno --> • Enlaces (a): Estados: link, active, visited, hover, focus a:active { color: #02293F; } a:link { color:#C6EAF9; } a:visited { color: #ccc;} a:hover { color: #990000;} Accesibilidad: ■ tabindex [1..n] ■ acceskeys: 2 problemas: no es facil hacerle ver al usuario cual es la acceskey y puede entrar en conflicto con otros atajos de teclado. ■ Ventanas emergentes ■ Enlaces adyacentes: a href="#punto_de_destino" • Imágenes: alt, width y height imágenes de fondo (css) y decorativas (Accesibilidad: las imágenes que sean meramente decorativas deberán ser gestionadas mediante CSS o, en su defecto, con alt="") formatos: jpg, gif o png (ie6 no - PngFix) reemplazo de imágenes con css (ejercicio) Recursos • HTMLDOG: Etiquetas HTML • HTMLDOG: HTML para principiantes HTML: Ejercicios Ejercicios 01: Código HTML y estructura semántica 1. Tomando como punto de partida la página inicial de la Web de la Universidad de Cantabria (sus imágenes, textos y estructura lógica) este primer ejercicio pide crear un documento XHTML 1.0 estricto que sea copia de su página inicial. Es decir, que mostrando la misma información respete la correcta semántica del documento (sin preocuparse de que los elementos salgan unos al lado de los otros, como en la original, ya que valdrá con que salgan unos a continuación de los otros). Nota: en caso de no ver la estructura lógica se deberá sugerir una. (Solución) 2. A la vista de la actual página inicial de la Universidad, ¿qué se puede decir de su estructura lógica? CSS: Inclusión y estructura básica La inclusión de las hojas de estilo en cascada, CSS, en nuestros documentos se hará dentro del bloque head de nuestra página (aunque los navegadores modernos son capaces de interpretarlas si se añaden dentro del body) <!-- inserción de CSS en un documento HTML --> <link rel="[alternate] stylesheet" type="text/css" title="Hoja de estilos por defecto" href="css/style.css" media="print,screen" /> <style type="text/css"> @import url("css/style.css") print /* Problemas con IE */ </style> <style type="text/css" media="print"> @import url("css/style.css") </style> <style type="text/css"> /* instrucciones CSS */ </style> Estructura de un documento CSS /* Comentario en un documento CSS */ h1{} /* redefinición de una etiqueta HTML */ #footer{} /* definición de un elemento existente en el HTML con id="footer" (=selector)*/ .nombreDeClase{} /* definición de una clase */ a:hover, /* definición de una pseudo-clase */ a:link, a:visited, a:active, a:focus{} #footer ul li span:first-child /* definición del comportamiento visual de la primera etiqueta span que esté dentro de un elemento de lista en e .resaltado { font-face: "Vistant Malinkus Gran", Tahoma, Verdana, sans-serif; font-size: 100%; /* ó 0.8em ó 9px */ /* IMP!!! */ font-weight: bold; font-style: italic; text-transform: uppercase; text-align: right; background-color: #990099; /* rgb(0,150,255)*/ background: #990099 url("url_a_la_imagen") top left no-repeat; color: #000; vertical-align: super; }http://personales.gestion.unican.es/hoyaj/curso/html-css-javascript/?no-google 17/04/2012
  • HTML, CSS, Javascript y Accesibilidad Page 5 of 19 <p class="resaltado">Texto del párrafo al que aplicamos el estilo resaltado</p> <p id="footer">Texto del párrafo identificador como footer</p> Recursos • HTMLDOG: CSS para principiantes • HTMLDOG: propiedades CSS • Referencia CSS • Todo tipo de chuletas para el desarrollador web • Referencia de CSS I • Chuletas de CSS I • Chuletas de CSS II • CSS III Preview • Editor CSS TopStyle • ¿Diseño fijo, flexible, líquido, fluido, o elástico? Un diseño universal • Problemas con @import: no hay control en el orden de carga • W3C: Media types • Mis cosas de CSS CSS: Ejercicios Ejercicios • 02. Aplicando CSS a un documento HTML Al documento creado en el ejercicio 01, aplicarle los estilos necesarios para que se parezca visualmente a la actual página de la Universidad de Cantabria. • 03. Tablas (o grids) sin table Mediante divs crear una estructura tabular donde podamos alojar 9 imágenes. Es decir, mediante etiquetas div crear una estructura que parezca una tabla 3x3, con una imagen en cada celda, sin que para ello usemos la etiqueta table. Solución: Ejemplo de tabla sin table CSS: Asignación de valores, cascada y herencia Asignación de valores, cascada y herencia - A medias, tema duro!!! Una vez que el agente de usuario ha analizado el documento y construido el arbol del documento, debe establecer, para cada elemento del árbol, un valor para cada propiedad que le asigna cada tipo de media. Este valor final de la propiedad es el resultado de un cálculo de 4 pasos: 1. the value is determined through specification (the "specified value") 2. then resolved into a value that is used for inheritance (the "computed value") 3. then converted into an absolute value if necessary (the "used value") 4. finally transformed according to the limitations of the local environment (the "actual value"). Mini-resumen con una imagen Examinando la herencia con Firebug:http://personales.gestion.unican.es/hoyaj/curso/html-css-javascript/?no-google 17/04/2012
  • HTML, CSS, Javascript y Accesibilidad Page 6 of 19 Recursos • Assigning property values, Cascading, and Inheritance CSS: ¿Diseño fijo, líquido (o fluido) o elástico (o flexible)? Pauta 3.4 de las W3C WCAG 1.0 3.4 Utilice unidades relativas en lugar de absolutas al especificar los valores en los atributos de los marcadores de lenguaje y en los valores de las propiedades de las hojas de estilo. [Prioridad 2] Qué significa: La maquetación, la presentación y los contenidos de texto de una página deben tener la posibilidad de adaptación a la interfaz utilizada por el usuario, sin superposiciones o perdida de informaciones en caso de redimensionamiento (ampliación o reducción de visualización y/o de los carácteres). Marco Giacomuzzi Las unidades relativas • em: el tamaño (font-size) de la fuente relevante [ h1 { margin: 0.5em } ] • %: valor relativo al valor del elemento padre [ p { line-height: 140% } • ex: la altura de la x de la fuente relevante [ h1 { margin: 1ex } ] • px: pixeles, relacionados con los dispositivos visuales [ p { font-size: 14px } ] Técnicas de diseño • Diseño fijo: Diseño que utiliza dimensiones de tamaño absoluto: inches (in), centímetros (cm), milímetros (mm), puntos (pt), picas (pc). Su efecto es bloquear el tamaño de un elemento a un tamaño fijo. • Diseño líquido (o fluido): Diseño que utiliza como unidad de medida el porcentaje (%). Su efecto es la adaptción de los elementos y su disposición aprovechando todo el ancho de pantalla que será calcualada en base a la resolución del dispositivo utilizado. • Diseño elástico (o flexible): Diseño que utiliza como unidad de medida em. Su efecto es adaptar el ancho de los elementos y su disposición en base al tamaño de texto configurado por el usuario. • Diseño híbrido: Diseño que utiliza unidades de medida absolutas, porcentaje y em. Recursos • Entendiendo las medidas I • Entendiendo las medidas II • Diseño fijo, flexible, líquido y fluido: diseño universal CSS: Box model (Modelo de caja) I Esquema del modelo de caja Esquema del modelo de caja de la W3C Recursos • W3C: Box model • W3C: Modelo de formato visualhttp://personales.gestion.unican.es/hoyaj/curso/html-css-javascript/?no-google 17/04/2012
  • HTML, CSS, Javascript y Accesibilidad Page 7 of 19 CSS: Box Model (Modelo de caja) II Introducción al modelo de cajas Elementos de bloque y en línea (inner) Los elementos HTML se puede agrupar en dos grupos: aquellos que de por sí son considerados como bloques, o cajas, (div, p, blockquote, h1, etc) y los que lo son como elementos de línea (span) <!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" xml:lang="es" lang="es"> <head> <title>CSS: elementos de bloque y en línea</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <style type="text/css"> body { font-family: "Lucida Sans Unicode", Tahoma, Verdana, sans-serif; font-size: 80%; } h1 { font-weight: normal; text-align: center; border: 1px solid green; } div, .resaltado { border: 0.05em solid red; /* En Chrome no se ven los bordes */ border: 1px solid red; margin:0.5em; } </style> </head> <body> <div id="layout"> <div id="header"> <h1>CSS: elementos de bloque y en línea</h1> </div> <div id="content"> <p><span class="resaltado">Cabárceno</span> entrenó a los dos leones marinos invidentes que fueron rechazados en otro p </div> <div id="footer"> <p> </p> </div> </div> </body> </html> Ver el ejemplo Overflow Cuando el contenido sobrepasa las dimensiones indicadas podemos configurar cómo debe, el navegador, comportarse a tal efecto. • visible: (por defecto) el contenido sobresale de la caja. • hidden: la parte del contenido que no quepa en la caja será ocultado. • scroll: el navegador ofrece siempre las barras de desplazamiento para poder ver el contenido. • auto: actúa como scroll sólo cuando el contenido no cabe en la caja. Display (problema on display:none;) Permite definir la visibilidad de un objeto. De todos sus posibles valores los más usados son: • none: oculta visualmente el objeto. Problema con los lectores de pantalla al usarlo para quitar elementos de la pantalla (Ej: menú de salto de contenidos - accesibilidad). ¿Alternativas?: text-indent, font-size:0; • block: muestra el objeto como un bloque (con un salto de línea antes y después) • inline: muestra el objeto com un elemento de línea (valor por defecto). Position: static, relative, absolute, fixed, z-index Permite establecer la ubicación de los elementos dentro de la pantalla. • static: es el valor por defecto y no posiciona al elemento, lo deja fluir con los demás elementos dentro de la página. • relative: Genera un elemento posicionado relativamente respecto a su posición normal. • absolute: Genera un elemento posicionado absolutamente respecto al primer elemento que no esté posicionado estáticamente (usando static). La posición viene dada por los valores de top, left, bottom y right. • fixed: Genera un elemento posicionado absolutamente respecto a la ventana del navegador. El valor de la propiedad z-index especifica el nivel de apilamiento de los elementos que están siendo posicionados.http://personales.gestion.unican.es/hoyaj/curso/html-css-javascript/?no-google 17/04/2012
  • HTML, CSS, Javascript y Accesibilidad Page 8 of 19 Float Permite establecer si un elemento de bloque puede flotar respecto a otros. • left: el elemento flota a la izquierda de los demás. • right: el elemento flota a la derecha de los demás. • none: el elemento no flota. La propiedad clear: left/right/both; sirve para eliminar el flotado de elementos. Recursos • Información sobre display y sus posibles valores • Información sobre position y sus posibles valores • Información sobre float y sus posibles valores • Usando z-index • Entendiendo el uso de float • Menu horizontal en dos niveles CSS: Box model (Modelo de caja) - Ejercicios Ejercicios • 04. Posicionamiento de elementos Se ha de intentar recrear la siguiente imagen, teniendo presente que el texto Parte inferior de la caja va antes, en el código fuente de la página, que Parte superior de la caja. Solución: posicionamiento de elemento • 05. Uso de las hojas de estilo. Aplicar los estilos necesarios al documento creado en el ejercicio 02 para que los elementos se muestren posicionados como en la página oficial de la UC • 06. Uso de las hojas de estilo. Recrear, lo mejor posible, el menú del Diario Montañés usando un marcado semánticamente correcto (código HTML correcto) Solución: menú horizontalhttp://personales.gestion.unican.es/hoyaj/curso/html-css-javascript/?no-google 17/04/2012
  • HTML, CSS, Javascript y Accesibilidad Page 9 of 19 • 07. Crear un menú horizontal desplegable de doble nivel que tenga el código HTML más correcto posible. (este ejercicio es para nota) Solución: Doble menú horizontal desplegable HTML y CSS: Tablas Tablas Estructura thead Fila de la tabla que actúa como cabecera de la misma y que debe contener información sobre las columnas (sólo puede haber una en la tabla; si se fijan más de una los navegadores lo renderizan correctamente pero los agentes de usuario pueden, seguro, no entender la estructura de la tabla). La etiqueta puede no cerrarse. tbody Parte de la tabla que contiene los datos y que puede no ser única en la tabla. ¿Para qué tener varios? Para, según lo comentado en StackOverflow, separar en grupos los datos mostrados y, junto con los atributos rules y borders de la tabla, fijar cómo pintarla (mira el ejemplo de abajo). tfoot Bloque final de la tabla (debe ir antes del tbody para que los agentes de usuario puedan renderizar el pie de la tabla antes de tener todos los datos) caption Indica la naturaleza de la tabla (sólo uno por tabla y después de la apertura de la misma) summary Proporciona información adicional a los agentes de usuario sobre la tabla. scope Especifica el conjunto de celdas para las que la presente celda de cabecera proporciona información. Ejemplo de tabla en la que establecemos los atributos frame y rules. 1 2 3 4 5 6 7 8 9 <table border="5" frame="vsides" rules="cols"> <tr> <td>1 <td>2 <td>3 <tr> <td>4 <td>5 <td>6 <tr> <td>7 <td>8 <td>9 </table> Vamos a ver una tabla de ejemplo que utiliza lo antes descrito. Listado de alumnos de la UC Primer y Segundo Ciclo Espacio Europeo Tercer Ciclo Grado Doctorado Doctorado Antigüo Estudios Propios Manuel Pérez Alberto Romón Luis Roberto Merino María Manteca Antonio Machado Antonio Iglesias Jordi Estadella Mariano Rajoy Maria Iglesias Jordi Estadella Jose Luís Rodriguez Zapatero Mariano Rajoy 2 Antonio Iglesias Jordi Estadella Jose Luís Rodriguez Zapatero Mariano Rajoy Total: 2 Total: 4 Total: 4 Total: 3 Total: 3 Veamos el código del ejemplo anterior: <table summary="Pequeña descripción sobre el contenido de la tabla para los agentes de usuario" border="1"> <caption>Listado de alumnos de la UC</caption> <thead> <!-- A la hora de imprimir, si la tabla se parte nos incluirá en cada hoja el thead y el tfoot, excepto con IE --> <tr> <th scope="col">Primer y Segundo Ciclo</th> <th colspan="2" scope="colgroup">Espacio Europeo</th> <th colspan="2" scope="colgroup">Tercer Ciclo</th> </tr> <tr> <th /> <th scope="col">Grado</th> <th scope="col">Doctorado</th> <th scope="col">Doctorado Antigüo</th> <th scope="col">Estudios Propios</th> </tr> </thead> <tfoot> <!-- A la hora de imprimir, si la tabla se parte nos incluirá en cada hoja el thead y el tfoot, excepto con IE --> <tr> <td>Total: 2</td> <td>Total: 4</td> <td>Total: 4</td> <td>Total: 3</td> <td>Total: 3</td> </tr> </tfoot> <tbody> <tr> <td>Manuel Pérez</td> <td>Alberto Romón</td> <td>Luis Roberto Merino</td> <td>María Manteca</td> <td /> </tr> <tr> <td>Machado</td> <td>Maria Iglesias</td> <td>Jordi Estadella</td> <td /> <td>Mariano Rajoy</td> </tr> <tr> <td /> <td>Antonio Iglesias</td> <td>Jordi Estadella</td> <td>Jose Luís Rodriguez Zapatero</td> <td>Mariano Rajoy</td> </tr> </tbody>http://personales.gestion.unican.es/hoyaj/curso/html-css-javascript/?no-google 17/04/2012
  • HTML, CSS, Javascript y Accesibilidad Page 10 of 19 <tbody> <tr> <td /> <td>2 Antonio Iglesias</td> <td>Jordi Estadella</td> <td>Jose Luís Rodriguez Zapatero</td> <td>Mariano Rajoy</td> </tr> </tbody> </table> Accesibilidad Las Tablas son elementos HTML destinados a la presentación de datos tabulares, no para maquetar. ( Linearización de la UC). Pautas de accesibilidad: • 5.1 For data tables, identify row and column headers. Prioridad 1 - Nivel A • 5.2 For data tables that have two or more logical levels of row or column headers, use markup to associate data cells and header cells. Prioridad 1 - Nivel A • 5.3 Do not use tables for layout unless the table makes sense when linearized. Otherwise, if the table does not make sense, provide an alternative equivalent (which may be a linearized version). Prioridad 2 - Nivel AA • 5.4 If a table is used for layout, do not use any structural markup for the purpose of visual formatting.. Prioridad 2 - Nivel AA • 5.5 Provide summaries for tables. Prioridad 3 - Nivel AAA • 5.6 Provide abbreviations for header labels. Prioridad 3 - Nivel AAA Recursos • W3C: HTML tables • HTMLDOG - Tablas para principiantes • HTMLDOG - Tablas para no principiantes • W3C: Using the scope attribute to associate header cells and data cells in data tables • W3C: XHTML Tables Module • W3C: Lista de puntos de las WCAG 1.0 HTML y CSS: Formularios Formularios Una correcta sintaxis del formulario impone que se tenga en cuenta: 1. El acceso a los formularios mediante el teclado: tabindex 2. Agrupación de los controles dentro del formulario: fieldset legend 3. Agrupación de las opciones de menú: optgroup 4. Vinculación explítica e implícita de etiquetas con los controles de formulario: label Vinculación explícita <form name="frmPrueba"> <label>Nombre: <input type="text" name="txtNombre" value="Indica tu nombre" tabindex="1" /></label> </form> Vinculación implícita <form name="frmPrueba"> <label for="txtNombre">Nombre: </label><input type="text" name="txtNombre" id="txtNombre" value="Indica tu nombre" tabindex="1" /> </form> Accesibilidad Puntos de verificación según las WCAG 1.0 • 6.3 Ensure that pages are usable when scripts, applets, or other programmatic objects are turned off or not supported. If this is not possible, provide equivalent information on an alternative accessible page. Prioridad 1 - Nivel A • 12.3 Divide large blocks of information into more manageable groups where natural and appropriate. Prioridad 2 - Nivel AA • 13.4 Use navigation mechanisms in a consistent manner. Prioridad 2 - Nivel AA • 10.2 Until user agents support explicit associations between labels and form controls, for all form controls with implicitly associated labels, ensure that the label is properly positioned. Prioridad 2 - Nivel AA • 12.4 Associate labels explicitly with their controls. Prioridad 2 - Nivel AA • 6.4 For scripts and applets, ensure that event handlers are input device-independent. Prioridad 2 - Nivel AA • 9.5 Provide keyboard shortcuts to important links (including those in client-side image maps), form controls, and groups of form controls. Prioridad 3 - Nivel AAA • 10.4 Until user agents handle empty controls correctly, include default, place-holding characters in edit boxes and text areas. Prioridad 3 - Nivel AAA Recursos • W3C: Formularios en HTML 4.01 • HTMLDOG: Formularios • Formularios accesibleshttp://personales.gestion.unican.es/hoyaj/curso/html-css-javascript/?no-google 17/04/2012
  • HTML, CSS, Javascript y Accesibilidad Page 11 of 19 HTML y CSS: Formularios - ejercicios Ejercicios • 07. Crear un formulario maquetado con tablas que se parezca lo más posible a la siguiente imagen. • 08. Crear un formulario maquetado sin tablas que se parezca lo más posible a la imagen anterior. Solución: Formulario accesible maquetado sin tablas Javascript: Introducción Javascript Introducción Javascript (ECMA-262) Lenguaje de programación, orientado a la Web, que se ejecuta en los navegadores de los usuarios (Antes sí que era cierto lo de que sólo se ejecuta en el lado del cliente pero ahora ya no lo es tanto: Node.js - entorno JavaScript del lado de servidor que utiliza un modelo asíncrono y dirigido por eventos.) Especificiones oficiales: ECMA y ECMAScript Operadores: • de comparación: ==, !=, >, >=, <, <= • de asignación: +, -, *, /, %, --, ++ • lógicos: && (= and), || (=or), ! (= not) • ternario: var variable = condition ? trueValue : falseValue; Variables • Simples: string, number, boolean, null, undefined (conversión automática de tipos e identificación de los mismos con typeOf()). • Complejas: Object (String, Date, Math) (que tienen Propiedades, Métodos y Eventos) y Array (normales y asociativos). Escribiendo código • JS es case sensitive (nombres: letras, numeros, simbolo dolar, _ y no debe comenzar con numero) • indentado del codigo + comentarios • ámbitos de variables: de función (si es declarada dentro de funcion-> función, fuera de función -> global) [ artículo: JavaScript-Scoping-and-Hoisting] • declaracion de variables: palabra reservada var y notación camelCase (igual que las funciones). Declaración de funciones function name ( [arguments] ) { //code here } Ejemplo Cuando tenemos muchas funciones JS, generalmente desde la inclusión de varios ficheros, podemos tener problemas de sobrescritura de las mismas. Para ayudar a evitarlo, se pueden definir funciones como métodos de un Objeto (tal y como sucede con los objetos String o Date). myScript = new Object(); myScript.init = function() {http://personales.gestion.unican.es/hoyaj/curso/html-css-javascript/?no-google 17/04/2012
  • HTML, CSS, Javascript y Accesibilidad Page 12 of 19 //code here }; myScript.otherMethod = function() { // more code here; } // uso de las funciones init(); // error, no existe. myScript.init() // correcto. En esta misma línea, para evitar tener que repetir el nombre del objeto en todas las declaraciones de los métodos, se puede usar la notación object literal (literal de objeto) que crea el objeto y aplica las funciones como métodos del mismo (en lugar de como funciones aisladas). var myScript = { variable:hello; varArray:[bye, out]; init:function() { //code here } otherMethod:function() { // more code here; } } // uso de las funciones myScript.init(); Accesibilidad 1. La página web debe tener el mismo contenido con y sin javascript. 2. Si hay contenido o elementos HTML que sólo tienen sentido con javascript activado, estos deben ser creados por este. 3. La funcionalidad debe ser independiente del dispositivo. 4. Los elementos HTML que básicamente no son interactivos (todos menos enlaces y campos de formulario) no deben convertirse en ello (salvo que se proporcione una alternativa) 5. Los scripts no deben redirigir las páginas o enviar los formularios sin niguna interacción con el usuario. Recursos • Introducción a Javascript • ppk: JavaScript - Table of contents • ppk: Great Broser Compatibility Table • JavaScript-Scoping-and-Hoisting • Ejemplos con jQuery • Mis cosas de JS • JS no intrusivo • Creating accesible javascript Javascript: DOM DOM Definición The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page World Wide Web Consortium (W3C) Tabajando con el DOM • Métodos básicos para acceder a elementos del DOM document.getElementsById(id): devuelve una referencia única al elemento HTML cuyo atributo id sea el indicado. document.getElementsByTagsName(tag): devuelve un array con las referencias a los elementos HTML cuya etiqueta sea la indicada. • Moviéndonos por el DOM parent children siblings (hermanos) • Cada nodo tiene una serie de propiedades: nodeType, nodeName, nodeValue, node.getAttribute(attribute), node.setAttribute(attribute, value) • Añadiendo objetos outerHTML(), innerHTML() ( métodos rápidos que no usan el DOM) document.createElement(elemento) document.createTextNode(string) node.appendChild(newNode) node.cloneNode(bool) node.insertBefore(newNode, oldNode) node.removeChild(oldNode) node.replaceChild(oldNode) Eventos Probablemente lo mejor que JS ofrece al desarrollador centrado en la interfaz del usuario (uno de los temas más confusos, no porque sea dificil sino por la interpretación que de él hacen los distintos navegadores) Modelos de eventos • tradicional: element.onclick = doSomething(); • W3C DOM: addEventListener Ejemplo básico de uso del DOMhttp://personales.gestion.unican.es/hoyaj/curso/html-css-javascript/?no-google 17/04/2012
  • HTML, CSS, Javascript y Accesibilidad Page 13 of 19 Recursos • W3C: Document Object Model • Document Object Model • ppk: Eventos • addEventListener JavaScript: Frameworks Desde hace tiempo hay alternativas a tener que escribir todo nuestro código javascript. Para eso están los frameworks: Usarlas implícita, quizás en muchos casos, aumentar el tamaño final de nuestro código javascript pero las facilidades de uso compensan el aumento de peso de la página en total Por cercanía usaremos jQuery. ¿Qué hay que hacer? 1. Descargar la versión adecuada desde la web oficial (production vs development) 2. Incluirla en la página 3. Usarla <!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" xml:lang="es" lang="es"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Pruebas con jQuery</title> <!-- <link rel="home" href="/" /> --> <meta name="author" content="Jorge Hoya" /> <meta name="MSSmartTagsPreventParsing" content="TRUE" /> <meta name="distribution" content="public" /> <meta name="robots" content="ALL" /> <meta name="revisit-after" content="3 days" /> <meta name="language" content="es" /> <meta name="Description" content="Pruebas con jQuery" /> <meta name="keywords" content="jquery, javascript, tabs, droppable" /> <!-- inclusión de jQuery --> <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script> </head> <body> <script type="type/javascript"> /* Evento: http://api.jquery.com/ready/ */ $(document).ready(function(){ /* Selectores: http://api.jquery.com/category/selectors/ */ $(#box).html(<p> mundo</p>); }); </script> <div id="box"></div> </body> </html> Ejemplo básico de un menú desplegable con jQuery Ejemplo básico de Ajax con jQuery HTML5 Presentación Conjunto de tecnologías que vienen a responder al uso real de HTML y de XHTML en la Web, además de incluir funcionalidades específicas de navegadores. Intenta definir un marcado, que puede ser escrito en HTML o en XHTML, aportar nuevas APIs • Introduce nuevas etiquetas: header, nav, section, aside, footer, datalist, canvas, audio, etc • Incluye más atributos para algunas ya existentes, en especial en los formularios: incluye validación, nuevos tipos de input, etc. • Simplifica la sintaxis del marcado: desaparece atributo type, el entrecomillado del valor de un atributo • Documentos XHTML5 (deben ser servidos como application/xhtml+xml o como application/xml).http://personales.gestion.unican.es/hoyaj/curso/html-css-javascript/?no-google 17/04/2012
  • HTML, CSS, Javascript y Accesibilidad Page 14 of 19 CSS3 Recursos • Wikipedia: HTML5 • W3C: HTML5 • Sumergirse en HTML5 • Etiquetas de HTML5 • Modernizr • 10 Novedades de HTML5 que puedes empezar a aprovechar ahora mismo • HTML5 Security Cheat Sheet • Mis cosas de HTML5 Accesibilidad: Presentación Presentación La accesibilidad web, cualidad íntimamente relacionada con la usabilidad, se refiere a la capacidad de acceso a la Web y a sus contenidos por todas las personas independientemente de la discapacidad (física, intelectual o técnica) que presenten o de las que se deriven del contexto de uso (tecnológicas o ambientales). Al hablar de Accesibilidad web se está haciendo referencia a un diseño Web que va a permitir que estas personas puedan percibir, entender, navegar e interactuar con la Web, aportando a su vez contenidos. La accesibilidad Web también beneficia a otras personas, incluyendo personas de edad avanzada que han visto mermadas sus habilidad a consecuencia de la edad. ¿Por qué es importante? La Web es un recurso muy importante para diferentes aspectos de la vida: educación, empleo, gobierno, comercio, sanidad, entretenimiento y muchos otros. Es muy importante que la Web sea accesible para así proporcionar un acceso equitativo e igualdad de oportunidades a las personas con discapacidad. Una página Web accesible puede ayudar a personas con discapacidad a que participen más activamente en la sociedad. Una de las funciones de la Iniciativa de Accesibilidad Web (WAI) es desarrollar pautas y técnicas que proporcionen soluciones accesibles para el software Web y para los desarrolladores Web. Las pautas de WAI son consideradas como estándares internacionales de accesibilidad Web. Conscientes de la necesidad de proporcionar soluciones accesibles para software Web y para los desarrolladores Web, se han creado una serie de recursos que permiten especificar las características que han de cumplir los contenidos disponibles mediante tecnologías Web en Internet, Intranets y otro tipo de redes informáticas, para que puedan ser utilizados por la mayor parte de las personas, incluyendo personas con discapadicad y personas de edad avanzada, de forma autónoma o mediante las ayudas técnicas pertinentes. Entre estos recursos destacan: • Las Pautas de Accesibilidad al Contenido en la Web 1.0 (WCAG 1.0): Se trata de una recomendación internacional sobre cómo hacer accesibles los contenidos de la Web a las personas con discapacidad. Se engloban en la Iniciativa para la Accesibilidad Web (WAI) del Consorcio de la Web (W3C). En el año 2008, W3C actualizó las Pautas de Accesibilidad al contenido en la Web, (WCAG 2.0). • La norma UNE 139803:2004 es una norma española, que ha tomado como punto de partida para su realización las Directrices para la Accesibilidad de los contenidos en la Web 1.0 (WCAG 1.0) de la Iniciativa para la Accesibilidad Web (WAI) del Consorcio de la Web (W3C). • La Metodología Unificada de Evaluación Web (UWEM 1.0 y UWEM 1.2) describe una metodología para la evaluación del cumplimiento de la recomendación WCAG 1.0. El fin de esta metodología consiste en asegurar que las herramientas y técnicas de evaluación desarrolladas para la vigilancia a gran escala o para la evaluación en local, sean compatibles y coherentes entre sí y con la iniciativa WAI.http://personales.gestion.unican.es/hoyaj/curso/html-css-javascript/?no-google 17/04/2012
  • HTML, CSS, Javascript y Accesibilidad Page 15 of 19 Para la revisión del nivel de accesibilidad de una Web hay herramientas automáticas que intentar ayudar en el proceso. No obstante, y esto es algo importante, ninguna herramienta en sí misma puede determinar si un sitio cumple o no las pautas de accesibilidad. Para determinar si un sitio Web es accesible, es necesaria la evaluación humana. Accesibilidad: WCAG Pautas de accesibilidad al contenido Web Para hacer el contenido Web accesible, el World Wide Web Consortium (W3C), en especial su grupo de trabajo Web Accessibility Initiative (WAI), han desarrollado, enre otras, las denominadas Pautas de Accesibilidad al Contenido en la Web (WCAG) (en sus dos versiones WCAG 1.0 de 1999 y WCAG 2.0 y de 2008) cuya función principal es guiar el diseño de páginas Web hacia un diseño accesible, reduciendo de esta forma barreras a la información. WCAG consiste en 14 pautas que proporcionan soluciones de diseño y que utilizan como ejemplo situaciones comunes en las que el diseño de una página puede producir problemas de acceso a la información. Las Pautas contienen además una serie de puntos de verificación que ayudan a detectar posibles errores. Cada punto de verificación está asignado a uno de los tres niveles de prioridad establecidos por las pautas. • Prioridad 1: son aquellos puntos que un desarrollador Web tiene que cumplir ya que, de otra manera, ciertos grupos de usuarios no podrían acceder a la información del sitio Web. • Prioridad 2: son aquellos puntos que un desarrollador Web debería cumplir ya que, si no fuese así, sería muy difícil acceder a la información para ciertos grupos de usuarios. • Prioridad 3: son aquellos puntos que un desarrollador Web debería cumplir ya que, de otra forma, algunos usuarios experimentarían ciertas dificultades para acceder a la información. En función a estos puntos de verificación se establecen los niveles de conformidad: • Nivel de Conformidad "A": todos los puntos de verificación de prioridad 1 se satisfacen. • Nivel de Conformidad "Doble A": todos los puntos de verificación de prioridad 1 y 2 se satisfacen. • Nivel de Conformidad "Triple A": todos los puntos de verificación de prioridad 1,2 y 3 se satisfacen. Las pautas describen cómo hacer páginas Web accesibles sin sacrificar el diseño, ofreciendo esa flexibilidad que es necesaria para que la información sea accesible bajo diferentes situaciones y proporcionando métodos que permiten su transformación en páginas útiles e inteligibles. En concreto, las pautas creadas por la WAI se dividen en tres bloques: • Pautas de Accesibilidad al Contenido en la Web (WCAG): Están dirigidas a los webmasters e indican cómo hacer que los contenidos del sitio Web sean accesibles. • Pautas de Accesibilidad para Herramientas de Autor (ATAG): Están dirigidas a los desarrolladores del software que usan los webmasters, para que estos programas faciliten la creación de sitios accesibles. • Pautas de Accesibilidad para Agentes de Usuario (UAAG): Están dirigidas a los desarrolladores de Agentes de usuario (navegadores y similares), para que estos programas faciliten a todos los usuarios el acceso a los sitios Web. Legislación española Desde el año 2002, en España se han desarrollado varias leyes que definen los niveles de accesibilidad y fechas de cumplimiento[2] : • Ley 34/2002 de 11 de julio, de servicios de la sociedad de la información y de comercio electrónico. • Ley 51/2003 de 2 de diciembre de Igualdad de Oportunidades, No Discriminación y Accesibilidad Universal con discapacidad. • Real Decreto 366/2007 de 16 de marzo, de accesibilidad y no discriminación de las personas con discapacidad en sus relaciones con la Administración General del Estado. • Ley 27/2007, de 23 de octubre, por la que se reconocen las lenguas de signos españolas y se regulan los medios de apoyo a la comunicación oral de las personas sordas, con discapacidad auditiva y sordociegas. • Real Decreto 1494/2007, de 12 de noviembre, por el que se aprueba el Reglamento sobre las condiciones básicas para el acceso de las personas con discapacidad a la sociedad de la información. • Ley 49/2007, de 26 de diciembre, por la que se establece el régimen de infracciones y sanciones en materia de igualdad de oportunidades, no discriminación y accesibilidad universal de las personas con discapacidad. Recursos • Mis cosas de Accesibilidad • Agente de usuario: JAWS • Agente de usuario: Window-Eyes • Agente de usuario: NVDA (gratuito) Diseño móvil: ECMAScript Mobile Profile. Especificación del Javascript que soportan los dispositivos móviles: ECMAScript Mobile Profile (en PDF). Emuladores: • Android SDK • Opera mobile emulator Técnicas • Media Queries <link href="Coordinador_files/mobile.css" type="text/css" rel="stylesheet" media="handheld, only screen and (max-device-width: 480px)"> • Código HTML válido y correcto. • Minimización del tamaño de los recursos utilizados (código HTML de las páginas, imágenes, CSS, JS, etc) y cacheado de los mismos. Opera mobile emulator emulando un Samsung Galaxy Shttp://personales.gestion.unican.es/hoyaj/curso/html-css-javascript/?no-google 17/04/2012
  • HTML, CSS, Javascript y Accesibilidad Page 16 of 19http://personales.gestion.unican.es/hoyaj/curso/html-css-javascript/?no-google 17/04/2012
  • HTML, CSS, Javascript y Accesibilidad Page 17 of 19http://personales.gestion.unican.es/hoyaj/curso/html-css-javascript/?no-google 17/04/2012
  • HTML, CSS, Javascript y Accesibilidad Page 18 of 19http://personales.gestion.unican.es/hoyaj/curso/html-css-javascript/?no-google 17/04/2012
  • HTML, CSS, Javascript y Accesibilidad Page 19 of 19 Recursos • CSS Mobile Profile 2.0 • Mis cosas de dispositivos móvileshttp://personales.gestion.unican.es/hoyaj/curso/html-css-javascript/?no-google 17/04/2012