Css y jscript

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 Windows

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

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

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)


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

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:



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 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 siendo posicionados.



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

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

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 accesibles



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()
{



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


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


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

Recommended

Recommended

More Related Content

What's hot

What's hot (15)

Similar to Css y jscript

Similar to Css y jscript (20)

Css y jscript