HTML and CSS tutorials, references, and articles W3C



HTML, CSS, Javascript y Accesibilidad

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

Javascript

Accesibilidad

Diseño móvil

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

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

Bibliografía

Separación presentación - contenido

Al principio fue el Verbo...

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

Rompetechos

  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

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

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

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

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

Recursos

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 el elemento HTML con id = 'footer' */
.resaltado
{
	font-family: "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

CSS: Ejercicios

Ejercicios

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:
Examinado la herencia con Firebug

Recursos

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

Técnicas de diseño

Recursos

CSS: Box model (Modelo de caja) I

Esquema del modelo de caja

Esquema del modelo de caja
Esquema del modelo de caja de la W3C

Recursos

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 parque. Él es el doble de grande que su amiga, y cada noche le guarda un sitio fijo a su lado para que se...</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.

Display (problema on display:none;)

Permite definir la visibilidad de un objeto. De todos sus posibles valores los más usados son:

Position: static, relative, absolute, fixed, z-index

Permite establecer la ubicación de los elementos dentro de la pantalla.

El valor de la propiedad z-index especifica el nivel de apilamiento de los elementos que están siendo posicionados.

Entendiendo el concepto de z-index

Float

Permite establecer si un elemento de bloque puede flotar respecto a otros.

La propiedad clear: left/right/both; sirve para eliminar el flotado de elementos.

Recursos

CSS: Box model (Modelo de caja) - Ejercicios

Ejercicios

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

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

Recursos

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

Recursos

HTML y CSS: Formularios - ejercicios

Ejercicios

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:

Variables

Escribiendo código

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

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

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

Ejemplo básico de uso del DOM

Recursos

JavaScript: Frameworks

Desde hace tiempo hay alternativas a tener que escribir todo nuestro código javascript. Para eso están los frameworks:

jQuery Dojo Toolkit Modernizr Ext JS 4 Prototype Mootools YUI Library

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

HTML5Conjunto 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


Qué es HTML5

CSS3

Recursos

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:

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.

En función a estos puntos de verificación se establecen los niveles de conformidad:

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:

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

Recursos

Diseño móvil: ECMAScript Mobile Profile.

Especificación del Javascript que soportan los dispositivos móviles: ECMAScript Mobile Profile (en PDF).

Emuladores:

Técnicas

Opera mobile emulator emulando un Samsung Galaxy S

Vista del login del CampusVirtual de la UC con navegador Vista del login del CampusVirtual de la UC con dispositivo movil

Vista del login del CampusVirtual de la UC con navegador Vista del login del CampusVirtual de la UC con dispositivo movil

Recursos