css y jscript

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 Windows•

Jorge Hoya

Servicio de Informática de la Universidad de Cantabria

Web: http://www.jorgehoya.es/

Email: [email protected]

Versión imprimible

of 19HTML, CSS, Javascript y Accesibilidad

17/04/2012http://personales.gestion.unican.es/hoyaj/curso/html-css-javascript/?no-google

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 sonHTML establece qué etiquetas sonHTML establece qué etiquetas sonHTML establece qué etiquetas son válidasválidasválidasválidas.•

El estándar XHTML separa la capa deXHTML separa la capa deXHTML separa la capa deXHTML separa la capa de presentación de la de contenidospresentación de la de contenidospresentación de la de contenidospresentación de la de contenidos•

HTML = CONTENIDOS

CSS = PRESENTACIÓN

El desarrollo WebEl desarrollo WebEl desarrollo WebEl desarrollo Web siguiendo los estándares deberá ser vuestro modo de vidasiguiendo los estándares deberá ser vuestro modo de vidasiguiendo los estándares deberá ser vuestro modo de vidasiguiendo los estándares deberá ser vuestro modo de vida, no debiérais crear página HTML alguna sin tenerlos

siempre en mente.

¿Por qué?

Compatibilidad temporal con los navegadores.1.

Control de la capa de presentación.2.

Independencia del dispositivo utilizado para visualizar la Web.3.

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-).

4.

Disminución del peso de la página, aumento en la rapidez de carga de la misma (mejora en la experiencia del usuario - Usabilidad)5.

Accesibilidad6.

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"> 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd"> 

<!DOCTYPE HTML> 

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.

<!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>



</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



</BODY>

</HTML>

Documento HTML 5 mínimo.

<!DOCTYPE html>

<head>


</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



<head>





<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" />



<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" />





<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>



</body>

</html>

Recursos

XHTML 1.0 Strict Cheat Sheet•

XHTML Basic 1.1 Cheat Sheet•

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> 

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

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 documentola correcta semántica del documentola correcta semántica del documentola 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)

1.

A la vista de la actual página inicial de la Universidad, ¿qué se puede decir de su estructura lógica?2.

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)



<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>


/* 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;

}

<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 div's 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:

the value is determined through specification (the "specified value")1.

then resolved into a value that is used for inheritance (the "computed value")2.

then converted into an absolute value if necessary (the "used value")3.

finally transformed according to the limitations of the local environment (the "actual value").4.

Mini-resumen con una imagen

Examinando la herencia con Firebug:



Marco Giacomuzzi

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).

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 visual•



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)



<head>

<title>CSS: elementos de bloque y en línea</title>



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 siendoestán siendoestán siendoestán siendo posicionadosposicionadosposicionadosposicionados.



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 correctosemánticamente correctosemánticamente correctosemánticamente correcto (código HTML correcto)

•

Solución: menú horizontal



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.

Primer y Segundo CicloPrimer y Segundo CicloPrimer y Segundo CicloPrimer y Segundo Ciclo EspacioEspacioEspacioEspacio EuropeoEuropeoEuropeoEuropeo Tercer CicloTercer CicloTercer CicloTercer Ciclo

GradoGradoGradoGrado DoctoradoDoctoradoDoctoradoDoctorado DoctoradoDoctoradoDoctoradoDoctorado AntigüoAntigüoAntigüoAntigüo Estudios PropiosEstudios PropiosEstudios PropiosEstudios Propios

Total: 2 Total: 4 Total: 4 Total: 3 Total: 3

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

Listado de alumnos de la UC

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> 

<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> 

<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>Jose Luís Rodriguez Zapatero</td>


</tr>

</tbody>

<tbody>

<tr>

<td />

<td>2 Antonio Iglesias</td>


<td>Jose Luís Rodriguez Zapatero</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:

El acceso a los formularios mediante el teclado: tabindex1.

Agrupación de los controles dentro del formulario: 2.fieldset�

legend�

Agrupación de las opciones de menú: optgroup3.

Vinculación explítica e implícita de etiquetas con los controles de formulario: label4.

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 accesibles•



HTML y CSS: Formularios - ejercicios

Ejercicios

07. Crear un formulario maquetado con tablascon tablascon tablascon tablas que se parezca lo más posible a la siguiente imagen. •

08. Crear un formulario maquetado sin tablassin tablassin tablassin 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()

{



World Wide Web Consortium (W3C)

//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

La página web debe tener el mismo contenido con y sin javascript.1.

Si hay contenido o elementos HTML que sólo tienen sentido con javascript activado, estos deben ser creados por este.2.

La funcionalidad debe ser independiente del dispositivo.3.

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)

4.

Los scripts no deben redirigir las páginas o enviar los formularios sin niguna interacción con el usuario.5.

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

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 DOM



Recursos

W3C: Document Object Model•

Document Object Model•

ppk: Eventos•

addEventListener•

JavaScript: Frameworks

Desde hace tiempo hay alternativas a tener que escribir todotodotodotodo 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?

Descargar la versión adecuada desde la web oficial (production vs development)1.

Incluirla en la página2.

Usarla3.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Pruebas con jQuery</title>



<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" />



<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 API's

Introduce nuevas etiquetas: header, nav, section, aside, footer, datalist, canvas, audio, etc•

Incluye más atributos para algunas ya existentes, en especial en los formulariosformulariosformulariosformularios: 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).•

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.

•



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 S



Recursos

CSS Mobile Profile 2.0 •

Mis cosas de dispositivos móviles•



css y jscript

Automotive