srizan/edicion-en-html
1
0
Fork 0
mirror of https://github.com/SrIzan10/edicion-en-html.git synced 2026-06-06 00:56:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

add website

Browse Source
This commit is contained in:
SrIzan10
2023-02-12 18:29:35 +01:00
parent 312ef7c915
commit 9bb10aaef2
1181 changed files with 76990 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
html2005.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

17
html2005/0introduccion.htm Normal file
View File

@@ -0,0 +1,17 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Edici&oacute;n en HTML</title>
</head>
<frameset rows="80,*" cols="*" border=0 frameborder="no">
<frame src="cabecera.html" border=0 frameborder="no" scrolling="no" noresize>
<frameset cols="159,*">
<frame src="barracapitulos.html" border=0 frameborder="no" hscroll="no" noresize>
<frame src="introduccion/general1.htm" name="contenido" border=0 frameborder="no" id="contenido" >
</frameset>
</frameset>
<noframes></noframes>
</html>

16
html2005/10estilos.htm Normal file
View File

@@ -0,0 +1,16 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Edici&oacute;n en HTML</title>
</head>
<frameset rows="80,*" cols="*" border=0 frameborder="no">
<frame src="cabecera.html" border=0 frameborder="no" scrolling="no" noresize>
<frameset cols="159,*">
<frame src="barracapitulos.html" border=0 frameborder="no" hscroll="no" noresize>
<frame src="estilos/css1.html" name="contenido" border=0 frameborder="no" id="contenido">
</frameset>
</frameset>
<noframes></noframes>
</html>

16
html2005/11publicacion.htm Normal file
View File

@@ -0,0 +1,16 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Edici&oacute;n en HTML</title>
</head>
<frameset rows="80,*" cols="*" border=0 frameborder="no">
<frame src="cabecera.html" border=0 frameborder="no" scrolling="no" noresize>
<frameset cols="159,*">
<frame src="barracapitulos.html" border=0 frameborder="no" hscroll= noresize>
<frame src="publicacion/gestornvu.html" name="contenido" border=0 frameborder="no" id="contenido">
</frameset>
</frameset>
<noframes></noframes>
</html>

16
html2005/12recursos.htm Normal file
View File

@@ -0,0 +1,16 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Edici&oacute;n en HTML</title>
</head>
<frameset rows="80,*" cols="*" border=0 frameborder="no">
<frame src="cabecera.html" border=0 frameborder="no" scrolling="no" noresize>
<frameset cols="159,*">
<frame src="barracapitulos.html" border=0 frameborder="no" hscroll="no" noresize>
<frame src="recursos/recursos1.html" name="contenido" border=0 frameborder="no" id="contenido">
</frameset>
</frameset>
<noframes></noframes>
</html>

16
html2005/13accesibilidad.htm Normal file
View File

@@ -0,0 +1,16 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Edici&oacute;n en HTML</title>
</head>
<frameset rows="80,*" cols="*" border=0 frameborder="no">
<frame src="cabecera.html" border=0 frameborder="no" scrolling="no" noresize>
<frameset cols="159,*">
<frame src="barracapitulos.html" border=0 frameborder="no" hscroll="no" noresize>
<frame src="accesibilidad/directrices.htm" name="contenido" border=0 frameborder="no" id="contenido">
</frameset>
</frameset>
<noframes></noframes>
</html>

16
html2005/14bugs.htm Normal file
View File

@@ -0,0 +1,16 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Edici&oacute;n en HTML</title>
</head>
<frameset rows="80,*" cols="*" border=0 frameborder="no">
<frame src="cabecera.html" border=0 frameborder="no" scrolling="no" noresize>
<frameset cols="159,*">
<frame src="barracapitulos.html" border=0 frameborder="no" hscroll="no" noresize>
<frame src="bugs/errores.html" name="contenido" border=0 frameborder="no" id="contenido">
</frameset>
</frameset>
<noframes></noframes>
</html>

16
html2005/1base.htm Normal file
View File

@@ -0,0 +1,16 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Edici&oacute;n en HTML</title>
</head>
<frameset rows="80,*" cols="*" border=0 frameborder="no">
<frame src="cabecera.html" border=0 frameborder="no" scrolling="no" noresize>
<frameset cols="159,*">
<frame src="barracapitulos.html" border=0 frameborder="no" hscroll="no" noresize>
<frame src="introduccion/entorno.html" name="contenido" border=0 frameborder="no" id="contenido">
</frameset>
</frameset>
<noframes></noframes>
</html>

16
html2005/2tablas.htm Normal file
View File

@@ -0,0 +1,16 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Edici&oacute;n en HTML</title>
</head>
<frameset rows="80,*" cols="*" border=0 frameborder="no">
<frame src="cabecera.html" border=0 frameborder="no" scrolling="no" noresize>
<frameset cols="159,*">
<frame src="barracapitulos.html" border=0 frameborder="no" hscroll="no" noresize>
<frame src="tablas/tablas1.html" name="contenido" border=0 frameborder="no" id="contenido">
</frameset>
</frameset>
<noframes></noframes>
</html>

16
html2005/3multimedia.htm Normal file
View File

@@ -0,0 +1,16 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Edici&oacute;n en HTML</title>
</head>
<frameset rows="80,*" cols="*" border=0 frameborder="no">
<frame src="cabecera.html" border=0 frameborder="no" scrolling="no" noresize>
<frameset cols="159,*">
<frame src="barracapitulos.html" border=0 frameborder="no" hscroll="no" noresize>
<frame src="multimedia/multi1.htm" name="contenido" border=0 frameborder="no" id="contenido">
</frameset>
</frameset>
<noframes></noframes>
</html>

16
html2005/4vinculos.htm Normal file
View File

@@ -0,0 +1,16 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Edici&oacute;n en HTML</title>
</head>
<frameset rows="80,*" cols="*" border=0 frameborder="no">
<frame src="cabecera.html" border=0 frameborder="no" scrolling="no" noresize>
<frameset cols="159,*">
<frame src="barracapitulos.html" border=0 frameborder="no" hscroll="no" noresize>
<frame src="vinculos/vinculos1.htm" name="contenido" border=0 frameborder="no" id="contenido">
</frameset>
</frameset>
<noframes></noframes>
</html>

16
html2005/5validacion.htm Normal file
View File

@@ -0,0 +1,16 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Edici&oacute;n en HTML</title>
</head>
<frameset rows="80,*" cols="*" border=0 frameborder="no">
<frame src="cabecera.html" border=0 frameborder="no" scrolling="no" noresize>
<frameset cols="159,*">
<frame src="barracapitulos.html" border=0 frameborder="no" hscroll="no" noresize>
<frame src="validacion/validacion.html" name="contenido" border=0 frameborder="no" id="contenido">
</frameset>
</frameset>
<noframes></noframes>
</html>

16
html2005/6plantillas.htm Normal file
View File

@@ -0,0 +1,16 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Edici&oacute;n en HTML</title>
</head>
<frameset rows="80,*" cols="*" border=0 frameborder="no">
<frame src="cabecera.html" border=0 frameborder="no" scrolling="no" noresize>
<frameset cols="159,*">
<frame src="barracapitulos.html" border=0 frameborder="no" hscroll="no" noresize>
<frame src="plantillas/plantillas.html" name="contenido" border=0 frameborder="no" id="contenido">
</frameset>
</frameset>
<noframes></noframes>
</html>

16
html2005/7formularios.htm Normal file
View File

@@ -0,0 +1,16 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Edici&oacute;n en HTML</title>
</head>
<frameset rows="80,*" cols="*" border=0 frameborder="no">
<frame src="cabecera.html" border=0 frameborder="no" scrolling="no" noresize>
<frameset cols="159,*">
<frame src="barracapitulos.html" border=0 frameborder="no" hscroll="no" noresize>
<frame src="formularios/formularios1.htm" name="contenido" border=0 frameborder="no" id="contenido">
</frameset>
</frameset>
<noframes></noframes>
</html>

16
html2005/8marcos.htm Normal file
View File

@@ -0,0 +1,16 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Edici&oacute;n en HTML</title>
</head>
<frameset rows="80,*" cols="*" border=0 frameborder="no">
<frame src="cabecera.html" border=0 frameborder="no" scrolling="no" noresize>
<frameset cols="159,*">
<frame src="barracapitulos.html" border=0 frameborder="no" hscroll="no" noresize>
<frame src="marcos/marcos1.htm" name="contenido" border=0 frameborder="no" id="contenido">
</frameset>
</frameset>
<noframes></noframes>
</html>

16
html2005/9xhtml.htm Normal file
View File

@@ -0,0 +1,16 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Edici&oacute;n en HTML</title>
</head>
<frameset rows="80,*" cols="*" border=0 frameborder="no">
<frame src="cabecera.html" border=0 frameborder="no" scrolling="no" noresize>
<frameset cols="159,*">
<frame src="barracapitulos.html" border=0 frameborder="no" hscroll="no" noresize>
<frame src="xhtml/xhtml.html" name="contenido" border=0 frameborder="no" id="contenido">
</frameset>
</frameset>
<noframes></noframes>
</html>

BIN
html2005/Images/Thumbs.db Normal file
View File

Binary file not shown.

BIN
html2005/Images/autores-02.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 173 KiB

BIN
html2005/Images/autores-03.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
html2005/Images/autores-04.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

BIN
html2005/Images/autores-05.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
html2005/Images/autores.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
html2005/Images/autoresover-03.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
html2005/Images/cabecera.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
html2005/Images/flechadcha.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 116 B

BIN
html2005/Images/flechaizq.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 117 B

BIN
html2005/Thumbs.db Normal file
View File

Binary file not shown.

133
html2005/accesibilidad/accesibilidad.htm Normal file
View File

@@ -0,0 +1,133 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="es-es">
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Accesibilidad</title>
<meta content="Ra&uacute;l Luna" name="author">
<link rel="stylesheet" type="text/css" href="../nvu2005.css">
<!-- parche de compatibilización con CSS 2 para navegadores microsoft --><!--[if lt IE 7]> <script src="../ie7/ie7-standard-p.js" type="text/javascript"></script> <![endif]-->
</head>
<body>
<div id="localizador">
<p>Accesibilidad</p>
</div>
<div id="flechadcha">
<a href="directrices.htm" title="avanzar"><img src="../Images/flechadcha.gif" border="0"></a>
</div>
<div id="flechaizq">
<a href="../recursos/recursos8.html" title="retroceder"><img src="../Images/flechaizq.gif" border="0"></a>
</div>
<div id="contenido">
<h2>Accesibilidad</h2>
<p>El crecimiento de la WEB ha hecho que se convierta,
posiblemente, en una de las principales fuentes de
informaci&oacute;n de las que disponemos en el momento actual.
Ahora bien, no estar&iacute;a de m&aacute;s pararnos a pensar
que el plural que acabo de utilizar engloba, especialmente en el
contexto en que se escribe este documento, a un grupo de
poblaci&oacute;n al que podr&iacute;amos atribuirle las
siguientes caracter&iacute;sticas:</p>
<ul>
<li> dispone de unas m&aacute;quinas relativamente potentes
y actualizadas.</li>
<li>posee igualmente unos conocimientos previos que le permiten
suplir las posibles deficiencias que afecten a la claridad de la
informaci&oacute;n presentada, tanto en lo referente a contenido
como en cuanto a estructura.</li>
<li>nuestras capacidades perceptivas, tanto en el aspecto
auditivo como visual, no est&aacute;n deterioradas m&aacute;s
all&aacute; de lo que el propio paso del tiempo las pueda haber
afectado teniendo en cuenta que la edad oscilar&aacute;, en la
mayor&iacute;a de los casos, entre 30 y 50 a&ntilde;os.</li>
<li>algo similar podemos afirmar respecto a las capacidades
motoras y manipulativas.</li>
</ul>
<p>Como suele ocurrir habitualmente tendemos a establecer los
par&aacute;metros que pueden definir nuestra situaci&oacute;n
como lo habitual, olvidando en muchos casos la existencia de otros
grupos humanos afectados por situaciones que pueden llegar a ser muy
distantes de nuestros criterios cotidianos.</p>
<p>Bastar&aacute; con formular las condiciones anteriores en
negativo para darnos cuenta de que el acceso a los contenidos de la WEB
puede convertirse en una tarea bastante m&aacute;s dificultosa de
lo que pod&iacute;amos imaginar.</p>
<p>La siguientes palabras de Tim Berners Lee, creador de Internet
y director del World Wide Web Consortium (W3C) encabezan la
secci&oacute;n de accesibilidad de dicho organismo (WAI-Web
Accessibility Initiative):</p>
<blockquote>
<q>El poder de la red est&aacute; en su
universalidad. El acceso de todos y cada uno sin que influyan las
deficiencias es un aspecto esencial.</q>
</blockquote>
<p>Del trabajo de la WAI han surgido una serie de documentos que
establecen unas pautas y unos criterios de comprobaci&oacute;n de
las mismas para obtener webs accesibles. Dichos documentos constituyen
una especificaci&oacute;n que se encuentra en su versi&oacute;n
1.0 cuyas siglas son WCAG (Web Content Accessibility Guidelines -
Directrices de Accesibilidad para el Contenido WEB)</p>
<p>No todas las pautas afectan en el mismo grado a la
accesibilidad, por lo que se aplican con tres diferentes prioridades,
de forma que los criterios de prioridad 1 ser&iacute;an de
cumplimiento pr&aacute;cticamente obligatorio para aumentar de
forma muy significativa el grado de accesibilidad de la
p&aacute;gina en la que se cumplen. En grado decreciente en cuanto
a su incidencia est&aacute;n los criterios de prioridad 2 y, por
&uacute;ltimo los de prioridad 3 que garantizar&iacute;an que
la p&aacute;gina ser&iacute;a accesible para la totalidad de
los visitantes independientemente de los dispositivos que utilicen o
las discapacidades motoras o sensoriales que puedan padecer. </p>
<p>En funci&oacute;n del cumplimiento de dichas pautas se han
creado unos logotipos de certificaci&oacute;n de conformidad con la
especificaci&oacute;n</p>
<p><img class="imgcentr" style="width: 88px; height: 31px;" src="../imagenes/wcag1A.gif" alt="Logotipo de conformidad WAI Nivel A">Nivel "A" de
Conformidad: Se han satisfecho todos los
puntos de verificaci&oacute;n de Prioridad 1.</p>
<p><img class="imgcentr" style="width: 88px; height: 31px;" src="../imagenes/wcag1AA.gif" alt="Logotipo de conformidad WAI Nivel Doble A">Nivel
"Doble-A" de Conformidad: Se han satisfecho todos
los puntos de verificaci&oacute;n de Prioridad 1 y 2</p>
<p><img class="imgcentr" style="width: 88px; height: 31px;" src="../imagenes/wcag1AAA.gif" alt="Logotipo de conformidad WAI Nivel Triple A">Nivel
"Triple-A" de Conformidad: Se han satisfecho todos
los puntos de verificaci&oacute;n de Prioridad 1, 2, y 3</p>
<br>
<p>&nbsp;</p>
<p>&nbsp;</p>
<blockquote>&nbsp;</blockquote>
<p>&nbsp;</p>
<p></p>
</body>
</html>

94
html2005/accesibilidad/accesibilidadaccesibleAAA.htm Normal file
View File

@@ -0,0 +1,94 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="es">
<head>
<title>Algunos recursos en la red</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../estilo.css" rel="stylesheet" type="text/css">
<script type="text/javascript" language="JavaScript">
<!--
function cargalogo(nombre) {
parent.arriba.location.href=nombre;
}
// -->
</script>
<noscript><p>
<br />Muestra una pestaña superior para indicar que estamos en la sección de Accesibilidad<br />
</p></noscript>
</head>
<body onload="cargalogo('t28.htm');">
<p>&nbsp; </p>
<p>El crecimiento de la WEB ha hecho que se convierta, posiblemente, en una de
las principales fuentes de informaci&oacute;n de las que disponemos en el momento
actual. Ahora bien, no estar&iacute;a de m&aacute;s pararnos a pensar que el
plural que acabo de utilizar engloba, especialmente en el contexto en que se
escribe este documento, a un grupo de poblaci&oacute;n al que podr&iacute;amos
atribuirle las siguientes caracter&iacute;sticas:</p>
<ul>
<li> dispone de unas m&aacute;quinas relativamente potentes y actualizadas </li>
<li>posee igualmente unos conocimientos previos que le permiten suplir las posibles
deficiencias que afecten a la claridad de la informaci&oacute;n presentada,
tanto en lo referente a contenido como en cuanto a estructura.</li>
<li>nuestras capacidades perceptivas, tanto en el aspecto auditivo como visual,
no est&aacute;n deterioradas m&aacute;s all&aacute; de lo que el propio paso
del tiempo las pueda haber afectado teniendo en cuenta que la edad oscilar&aacute;,
en la mayor&iacute;a de los casos, entre 30 y 50 a&ntilde;os</li>
<li>algo similar podemos afirmar respecto a las capacidades motoras y manipulativas.</li>
</ul>
<p>Como suele ocurrir habitualmente tendemos a establecer los par&aacute;metros
que pueden definir nuestra situaci&oacute;n como lo habitual, olvidando en muchos
casos la existencia de otros grupos humanos afectados por situaciones que pueden
llegar a ser muy distantes de nuestros criterios cotidianos.</p>
<p>Bastar&aacute; con formular las condiciones anteriores en negativo para darnos
cuenta de que el acceso a los contenidos de la WEB puede convertirse en una
tarea bastante m&aacute;s dificultosa de lo que pod&iacute;amos imaginar.</p>
<p>La siguientes palabras de Tim Berners Lee, creador de Internet y director del
World Wide Web Consortium (W3C) encabezan la secci&oacute;n de accesibilidad
de dicho organismo (WAI-Web Accessibility Initiative):</p>
<blockquote>
<p><cite>El poder de la red est&aacute; en su universalidad. El acceso de todos
y cada uno sin que influyan las deficiencias es un aspecto esencial.</cite></p>
</blockquote>
<p>Del trabajo de la WAI han surgido una serie de documentos que establecen unas
pautas y unos criterios de comprobaci&oacute;n de las mismas para obtener webs
accesibles. Dichos documentos constituyen una especificaci&oacute;n que se encuentra
en su versi&oacute;n 1.0 cuyas siglas son WCAG (Web Content Accessibility Guidelines
- Directrices de Accesibilidad para el Contenido WEB)</p>
<p>No todas las pautas afectan en el mismo grado a la accesibilidad, por lo que
se aplican con tres diferentes prioridades, de forma que los criterios de prioridad
1 ser&iacute;an de cumplimiento pr&aacute;cticamente obligatorio para aumentar
de forma muy significativa el grado de accesibilidad de la p&aacute;gina en
la que se cumplen. En grado decreciente en cuanto a su incidencia est&aacute;n
los criterios de prioridad 2 y, por &uacute;ltimo los de prioridad 3 que garantizar&iacute;an
que la p&aacute;gina ser&iacute;a accesible para la totalidad de los visitantes
independientemente de los dispositivos que utilicen o las discapacidades motoras
o sensoriales que puedan padecer. </p>
<p>En funci&oacute;n del cumplimiento de dichas pautas se han creado unos logotipos
de certificaci&oacute;n de conformidad con la especificaci&oacute;n</p>
<table width="100%" border="0" cellpadding="3" summary="Esta tabla se compone de dos columnas y tres filas. En la primera columna se muestran los logotipos de accesibilidad. En la segunda se indica el significado de cada uno de los logotipos.">
<tr>
<td><img src="../imagenes/wcag1A.gif" alt="Logotipo de conformidad WAI Nivel A" width="88" height="31"></td>
<td><p>Nivel &quot;A&quot; de Conformidad: Se han satisfecho todos los puntos
de verificaci&oacute;n de Prioridad 1</p></td>
</tr>
<tr>
<td><img src="../imagenes/wcag1AA.gif" alt="Logotipo de conformidad WAI Nivel Doble A" width="88" height="31"></td>
<td><p>Nivel &quot;Doble-A&quot; de Conformidad: Se han satisfecho todos los
puntos de verificaci&oacute;n de Prioridad 1 y 2</p></td>
</tr>
<tr>
<td><img src="../imagenes/wcag1AAA.gif" alt="Logotipo de conformidad WAI Nivel Triple A" width="88" height="31"></td>
<td><p>Nivel &quot;Triple-A&quot; de Conformidad: Se han satisfecho todos
los puntos de verificaci&oacute;n de Prioridad 1, 2, y 3</p></td>
</tr>
</table>
</body>
</html>

227
html2005/accesibilidad/directrices.htm Normal file
View File

@@ -0,0 +1,227 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="es-es">
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Directrices</title>
<meta content="Ra&uacute;l Luna" name="author">
<link rel="stylesheet" type="text/css" href="../nvu2005.css">
<!-- parche de compatibilización con CSS 2 para navegadores microsoft --><!--[if lt IE 7]> <script src="../ie7/ie7-standard-p.js" type="text/javascript"></script> <![endif]-->
</head>
<body>
<div id="localizador">
<p>Accesibilidad&gt;&gt;Directrices</p>
</div>
<div id="flechadcha">
<a href="pautas.htm" title="avanzar"><img src="../Images/flechadcha.gif" border="0"></a>
</div>
<div id="flechaizq">
<a href="accesibilidad.htm" title="retroceder"><img src="../Images/flechaizq.gif" border="0"></a>
</div>
<div id="contenido">
<h2>Directrices de Accesibilidad para el Contenido en la Web </h2>
<dl>
<dt><strong>1 - Proporcione alternativas equivalentes
para el contenido visual y sonoro </strong> </dt>
<dd>Incorporando un contenido que, cuando sea presentado al
usuario, cumpla esencialmente la misma funci&oacute;n o
prop&oacute;sito que el contenido visual o sonoro. En ocasiones
tendr&aacute; un car&aacute;cter primordialmente descriptivo
del contenido (Ej.: descripci&oacute;n de una imagen o
transcripci&oacute;n de un texto) mientras que en otras los
esencial ser&aacute; informar de la funci&oacute;n (Ej.:
Notificar el destino al que se dirigir&aacute; la
pulsaci&oacute;n sobre un enlace soportado por un
gr&aacute;fico)</dd>
<dt><strong>2 - No conf&iacute;e s&oacute;lo en
el color</strong></dt>
<dd>Habr&aacute; que asegurarse de que los textos y
gr&aacute;ficos son comprensibles cuando se vean sin color.</dd>
<dt><strong>3 - Utilice marcadores y hojas de estilo, y
h&aacute;galo apropiadamente</strong></dt>
<dd>Marque los documentos con los elementos estructurales
apropiados. Controle la presentaci&oacute;n con hojas de estilo en
vez de con atributos y elementos de presentaci&oacute;n. (Los
puntos de verificaci&oacute;n de esta directriz son de prioridad 2)</dd>
<dt><strong>4 - Aclare el lenguaje natural usado</strong></dt>
<dd>Marcar con las etiquetas adecuadas para facilitar la
pronunciaci&oacute;n o interpretaci&oacute;n del texto
abreviado o en idioma extranjero.</dd>
<dt><strong>5 - Cree tablas que se transformen airosamente</strong></dt>
<dd>Aseg&uacute;rese de que las tablas tienen el marcado
necesario para ser transformadas por navegadores accesibles y otras
aplicaciones de usuario.</dd>
<dt><strong>6 - Aseg&uacute;rese de que las
p&aacute;ginas que incluyen nuevas tecnolog&iacute;as se
transfiguran airosamente</strong></dt>
<dd>Aseg&uacute;rese de que las p&aacute;ginas son
accesibles incluso cuando las tecnolog&iacute;as m&aacute;s
recientes no son soportadas o se deshabilitan, para lo que
habr&iacute;a que proporcionar versiones alternativas en el caso de
que ello no sea posible.</dd>
<dt><strong>7 - Garantice al usuario el control sobre los
cambios del contenido tempo-sensible</strong></dt>
<dd>Se trata de proporcionar al usuario procedimientos
accesibles para que puedan ser pausados o detenidos los contenidos o
p&aacute;ginas que se mueven, parpadean, se desplazan o se
actualizan autom&aacute;ticamente. </dd>
<dt><strong>8 - Garantice la accesibilidad directa de las
interfaces de usuario incrustadas </strong> </dt>
<dd>Aseg&uacute;rese de que las interfaces de usuario
siguen los principios del dise&ntilde;o accesible: acceso a la
funcionalidad independiente del tipo de dispositivo, operabilidad a
trav&eacute;s del teclado, interfaz por voz, etc. (Esta directriz
se considera de prioridad 1 cuando afecta a funcionalidades importantes
no presentadas de forma alternativa. Si se trata de funciones poco
importantes pasa a ser de prioridad 2)</dd>
<dt><strong>9 - Dise&ntilde;e para la independencia
del tipo de dispositivo</strong></dt>
<dd>Use caracter&iacute;sticas que permitan la
activaci&oacute;n de los elementos de la p&aacute;gina a
trav&eacute;s de diversos dispositivos de entrada.</dd>
<dt><strong>10 - Utilice soluciones provisionales</strong></dt>
<dd>Use soluciones de accesibilidad provisionales de manera que
las ayudas t&eacute;cnicas y los navegadores antiguos puedan
funcionar correctamente.(Directriz de prioridad 2 y 3)</dd>
<dt><strong>11 - Utilice las tecnolog&iacute;as y
directrices del <acronym title="World Wide Web Consortium">W3C</acronym></strong></dt>
<dd>Utilice las tecnolog&iacute;as del <acronym title="World Wide Web Consortium">W3C</acronym> (de
acuerdo con la especificaci&oacute;n) y siga las directrices de
accesibilidad. Cuando no sea posible utilizar una tecnolog&iacute;a
del&nbsp;<acronym title="World Wide Web Consortium">W3C</acronym>,
o hacerlo da como resultado un material que no se transforma
airosamente, proporcione una versi&oacute;n alternativa del
contenido que sea accesible.</dd>
<dt><strong>12 - Proporcione informaci&oacute;n de
contexto y orientaci&oacute;n</strong></dt>
<dd>La funci&oacute;n de la informaci&oacute;n de
contexto y orientaci&oacute;n ser&aacute; ayudar a los usuarios
a entender los elementos o p&aacute;ginas complejas. </dd>
<dt><strong>13 - Proporcione mecanismos de
navegaci&oacute;n claros</strong></dt>
<dd>El objetivo es incrementar la probabilidad de que una
persona encuentre lo que est&aacute; buscando en el sitio para lo
que se recomienda incorporar informaci&oacute;n orientativa, barras
de navegaci&oacute;n, un mapa del sitio, etc. (Se trata de una
directriz de prioridad 2 y 3)</dd>
<dt><strong>14 - Aseg&uacute;rese de que los
documentos sean claros y sencillos</strong></dt>
<dd>La
utilizaci&oacute;n de el lenguaje m&aacute;s claro y sencillo
posible, unida a la
aplicaci&oacute;n del mismo principio en cuanto al estilo y
dise&ntilde;o general son
las bases de esta directriz.</dd>
</dl>
<p>La documentaci&oacute;n al respecto, incluyendo las pautas
de comprobaci&oacute;n para cada una de las directrices y las
t&eacute;cnicas necesarias se encuentra publicada en Internet.
Obviamente puedes recurrir a las fuentes <a href="http://www.w3.org/WAI/" target="_blank">originales</a>
que son las &uacute;nicas que tienen el respaldo pleno del&nbsp;<acronym title="World Wide Web Consortium">W3C</acronym>, pero
que tendr&aacute;s que leer en ingl&eacute;s. Si lo prefieres
puedes recurrir a las traducciones de los diferentes documentos que se
han ido realizando que, si bien no tienen autorizaci&oacute;n
oficial del&nbsp;<acronym title="World Wide Web Consortium">W3C</acronym>,
pueden considerarse plenamente fiables. De hecho puedes encontrarlas a
partir de la p&aacute;gina del Seminario de Iniciativas sobre
Discapacidad y Accesibilidad en la Red <a href="http://www.sidar.org/">(SIDAR)</a> impulsado y
patrocinado por el Real Patronato sobre Discapacidad, de donde se han
obtenido las referencias para elaborar esta introducci&oacute;n a
la accesibilidad.</p>
<p>Una primera aproximaci&oacute;n para el trabajo puedes ser
la siguiente gu&iacute;a </p>
<h3>Gu&iacute;a breve para crear sitios Web accesibles</h3>
<ol>
<li>Im&aacute;genes y animaciones: Use texto alternativo
(atributo <code>alt</code>) para describir la
funci&oacute;n de los elementos visuales. </li>
<li>Mapas de imagen: Use mapas de cliente y texto alternativo
para las zonas activas. </li>
<li>Multimedia: Facilite subt&iacute;tulos y
trascripci&oacute;n de los ficheros de sonido,
descripci&oacute;n de los v&iacute;deos y versiones accesibles
en el caso de usar formatos no accesibles. </li>
<li>Enlaces de hipertexto: Use texto que tenga sentido cuando
se lea fuera de contexto. Por ejemplo, no usar "pincha
aqu&iacute;". </li>
<li>Organizaci&oacute;n de las p&aacute;ginas: Use
encabezados (<code>h1</code>, <code>h2</code>,
<code>h3</code>,...), listas y estructura consistente.
Use Hojas de Estilo en Cascada (<acronym title="Cascading Style Sheets">CSS</acronym>) para
maquetaci&oacute;n y estilo, donde sea posible. </li>
<li>Gr&aacute;ficos de datos: Resuma o use el atributo <code>longdesc</code>.
</li>
<li><span lang="en">Scripts, applets</span> y <span lang="en">plug-ins</span>: Ofrezca alternativas
accesibles en el caso de que las caracter&iacute;sticas activas no
sean accesibles o no tengan soporte. </li>
<li>Marcos (<span lang="en">Frames</span>):
Etiquete con los atributos title o name. </li>
<li>Tablas: Real&iacute;celas de manera que se puedan leer
l&iacute;nea a l&iacute;nea. Incluya un resumen. Evite el uso
de tablas para dar formato a las p&aacute;ginas. </li>
<li>Revise su trabajo: Valide el c&oacute;digo <acronym title="HyperText Markup Language">HTML</acronym>. Use
herramientas de evaluaci&oacute;n y navegadores
s&oacute;lo-texto para verificar la accesibilidad. </li>
</ol>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
</body>
</html>

138
html2005/accesibilidad/directricesaccesible.htm Normal file
View File

@@ -0,0 +1,138 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="es">
<head>
<title>Algunos recursos en la red</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../estilo.css" rel="stylesheet" type="text/css">
<script type="text/javascript" language="JavaScript">
<!--
function cargalogo(nombre) {
parent.arriba.location.href=nombre;
}
// -->
</script>
<noscript><p>
<br />Muestra una pestaña superior para indicar que estamos en la sección que muestra las Directrices de Accesibilidad<br />
</p></noscript>
</head>
<body onload="cargalogo('t29.htm');">
<p>Directrices de Accesibilidad para el Contenido en la Web
</p>
<dl>
<dt><strong>1 - Proporcione alternativas equivalentes para el contenido visual
y sonoro </strong> </dt>
<dd>Incorporando un contenido que, cuando sea presentado al usuario, cumpla
esencialmente la misma función o propósito que el contenido visual o sonoro.
En ocasiones tendr&aacute; un car&aacute;cter primordialmente descriptivo
del contenido (Ej.: descripci&oacute;n de una imagen o transcripci&oacute;n
de un texto) mientras que en otras los esencial ser&aacute; informar de la
funci&oacute;n (D&eacute;: Notificar el destino al que se dirigir&aacute;
la pulsaci&oacute;n sobre un enlace soportado por un gr&aacute;fico)</dd>
<dt><strong>2 - No conf&iacute;e s&oacute;lo en el color</strong></dt>
<dd>Habr&aacute; que asegurarse de que los textos y gráficos son comprensibles
cuando se vean sin color.</dd>
<dt><strong>3 - Utilice marcadores y hojas de estilo, y h&aacute;galo apropiadamente</strong></dt>
<dd>Marque los documentos con los elementos estructurales apropiados. Controle
la presentación con hojas de estilo en vez de con atributos y elementos de
presentación. (Los puntos de verificaci&oacute;n de esta directriz son de
prioridad 2)</dd>
<dt><strong>4 - Aclare el lenguaje natural usado</strong></dt>
<dd>Indicar con las etiquetas adecuadas para facilitar la pronunciación o interpretación
del texto abreviado o en idioma extranjero.</dd>
<dt><strong>5 - Cree tablas que se transformen airosamente</strong></dt>
<dd>Asegúrese de que las tablas tienen el marcado necesario para ser transformadas
por navegadores accesibles y otras aplicaciones de usuario.</dd>
<dt><strong>6 - Aseg&uacute;rese de que las p&aacute;ginas que incluyen nuevas
tecnolog&iacute;as se transfiguran airosamente</strong></dt>
<dd>Asegúrese de que las páginas son accesibles incluso cuando las tecnologías
más recientes no son soportadas o se deshabilitan, para lo que habr&iacute;a
que proporcionar versiones alternativas en el caso de que ello no sea posible.</dd>
<dt><strong>7 - Garantice al usuario el control sobre los cambios del contenido
tempo-sensible</strong></dt>
<dd>Se trata de proporcionar al usuario procedimientos accesibles para que puedan
ser pausados o detenidos los contenidos o páginas que se mueven, parpadean,
se desplazan o se actualizan automáticamente. </dd>
<dt><strong>8 - Garantice la accesibilidad directa de las interfaces de usuario
incrustadas </strong> </dt>
<dd>Asegúrese de que las interfaces de usuario siguen los principios del diseño
accesible: acceso a la funcionalidad independiente del tipo de dispositivo,
operabilidad a través del teclado, interfaz por voz, etc. (Esta directriz
se considera de prioridad 1 cuando afecta a funcionalidades importantes no
presentadas de forma alternativa. Si se trata de funciones poco importantes
pasa a ser de prioridad 2)</dd>
<dt><strong>9 - Dise&ntilde;e para la independencia del tipo de dispositivo</strong></dt>
<dd>Use características que permitan la activación de los elementos de la página
a través de diversos dispositivos de entrada.</dd>
<dt><strong>10 - Utilice soluciones provisionales</strong></dt>
<dd>Use soluciones de accesibilidad provisionales de manera que las ayudas técnicas
y los navegadores antiguos puedan funcionar correctamente.(Directriz de prioridad
2 y 3)</dd>
<dt><strong>11 - Utilice las tecnolog&iacute;as y directrices del W3C</strong></dt>
<dd>Utilice las tecnologías del W3C (de acuerdo con la especificación) y siga
las directrices de accesibilidad. Cuando no sea posible utilizar una tecnología
del W3C, o hacerlo da como resultado un material que no se transforma airosamente,
proporcione una versión alternativa del contenido que sea accesible.</dd>
<dt><strong>12 - Proporcione informaci&oacute;n de contexto y orientaci&oacute;n</strong></dt>
<dd>La funci&oacute;n de la información de contexto y orientación ser&aacute;
ayudar a los usuarios a entender los elementos o páginas complejas. </dd>
<dt><strong>13 - Proporcione mecanismos de navegaci&oacute;n claros</strong></dt>
<dd>El objetivo es incrementar la probabilidad de que una persona encuentre
lo que está buscando en el sitio para lo que se recomienda incorporar información
orientativa, barras de navegación, un mapa del sitio, etc. (Se trata de una
directriz de prioridad 2 y 3)</dd>
<dt><strong>14 - Aseg&uacute;rese de que los documentos sean claros y sencillos</strong></dt>
<dd>La utilización de el lenguaje más claro y sencillo posible, unida a la aplicación del mismo principio en cuanto al estilo y diseño general son las bases de esta directriz.</dd>
</dl>
<p>La documentación al respecto, incluyendo las pautas de comprobación para cada
una de las directrices y las técnicas necesarias se encuentra publicada en Internet.
Obviamente puedes recurrir a las fuentes <a href="http://www.w3.org/WAI/" target="_blank">originales</a>
que son las &uacute;nicas que tienen el respaldo pleno del W3C, pero que tendr&aacute;s
que leer en ingl&eacute;s. Si lo prefieres puedes recurrir a las traducciones
de los diferentes documentos que se han ido realizando que, si bien no tienen
autorizaci&oacute;n oficial del W3C, pueden considerarse plenamente fiables.
De hecho puedes encontrarlas a partir de la p&aacute;gina del Seminario de Iniciativas
sobre Discapacidad y Accesibilidad en la Red <a href="http://www.sidar.org">(SIDAR)</a>
impulsado y patrocinado por el Real Patronato sobre Discapacidad, de donde se
han obtenido las referencias para elaborar esta introducci&oacute;n a la accesibilidad.</p>
<p>Una primera aproximaci&oacute;n para el trabajo puedes ser la siguiente gu&iacute;a
</p>
<p>Gu&iacute;a breve para crear sitios Web accesibles.</p>
<ol>
<li>Im&aacute;genes y animaciones: Use texto alternativo (atributo alt) para
describir la funci&oacute;n de los elementos visuales. </li>
<li>Mapas de imagen: Use mapas de cliente y texto alternativo para las zonas
activas. </li>
<li>Multimedia: Facilite subt&iacute;tulos y trascripci&oacute;n de los ficheros
de sonido, descripci&oacute;n de los v&iacute;deos y versiones accesibles
en el caso de usar formatos no accesibles. </li>
<li>Enlaces de hipertexto: Use texto que tenga sentido cuando se lea fuera de
contexto. Por ejemplo, no usar &quot;pincha aqu&iacute;&quot;. </li>
<li>Organizaci&oacute;n de las p&aacute;ginas: Use encabezados (H1, H2, H3,...),
listas y estructura consistente. Use Hojas de Estilo en Cascada (CSS) para
maquetaci&oacute;n y estilo, donde sea posible. </li>
<li>Gr&aacute;ficos de datos: Resuma o use el atributo longdesc. </li>
<li>Scripts, applets y plug-ins: Ofrezca alternativas accesibles en el caso
de que las caracter&iacute;sticas activas no sean accesibles o no tengan soporte.
</li>
<li>Marcos (Frames): Etiquete con los atributos title o name. </li>
<li>Tablas: Real&iacute;celas de manera que se puedan leer l&iacute;nea a l&iacute;nea.
Incluya un resumen. Evite el uso de tablas para dar formato a las p&aacute;ginas.
</li>
<li>Revise su trabajo: Valide el c&oacute;digo HTML. Use herramientas de evaluaci&oacute;n
y navegadores s&oacute;lo-texto para verificar la accesibilidad. </li>
</ol>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>
<body>
</body>
</html>

2296
html2005/accesibilidad/pautas.htm Normal file
View File

File diff suppressed because it is too large Load Diff

26
html2005/accesibilidad/t28.htm Normal file
View File

@@ -0,0 +1,26 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../titulo.css" rel="stylesheet" type="text/css">
<script language="JavaScript" src="../titulos.js"></script>
</head>
<body topmargin=2><table border="0" cellspacing="0" cellpadding="0" align="right">
<tr>
<td bgcolor="#eeffff"><p><img src="../imagenes/esquina2.gif" width=23 height=43 border=0 alt="" align="middle">
<script type="text/javascript" language="JavaScript">
document.write(t28)
</script>
<img src="../imagenes/esquina3.gif" width=23 height=43 border=0 alt="" align="middle"></p></td><td width="15"></td>
</table>
</body>
</html>

26
html2005/accesibilidad/t29.htm Normal file
View File

@@ -0,0 +1,26 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../titulo.css" rel="stylesheet" type="text/css">
<script language="JavaScript" src="../titulos.js"></script>
</head>
<body topmargin=2><table border="0" cellspacing="0" cellpadding="0" align="right">
<tr>
<td bgcolor="#eeffff"><p><img src="../imagenes/esquina2.gif" width=23 height=43 border=0 alt="" align="middle">
<script type="text/javascript" language="JavaScript">
document.write(t29)
</script>
<img src="../imagenes/esquina3.gif" width=23 height=43 border=0 alt="" align="middle"></p></td><td width="15"></td>
</table>
</body>
</html>

26
html2005/accesibilidad/t30.htm Normal file
View File

@@ -0,0 +1,26 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../titulo.css" rel="stylesheet" type="text/css">
<script language="JavaScript" src="../titulos.js"></script>
</head>
<body topmargin=2><table border="0" cellspacing="0" cellpadding="0" align="right">
<tr>
<td bgcolor="#eeffff"><p><img src="../imagenes/esquina2.gif" width=23 height=43 border=0 alt="" align="middle">
<script type="text/javascript" language="JavaScript">
document.write(t30)
</script>
<img src="../imagenes/esquina3.gif" width=23 height=43 border=0 alt="" align="middle"></p></td><td width="15"></td>
</table>
</body>
</html>

59
html2005/autores.html Normal file
View File

@@ -0,0 +1,59 @@
<HTML>
<HEAD>
<TITLE>autores</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">
<!--
body {
background-color: #B9B9B9;
}
-->
</style></HEAD>
<BODY LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 onLoad="MM_preloadImages('Images/autoresover-03.jpg')">
<!-- ImageReady Slices (autores.psd) -->
<!-- End ImageReady Slices -->
<table width="100%" height="100%" border="0" cellpadding="10" cellspacing="0">
<tr>
<td align="center" valign="middle"><TABLE WIDTH=754 BORDER=0 align="center" CELLPADDING=0 CELLSPACING=0>
<TR>
<TD COLSPAN=3><IMG SRC="Images/autores.jpg" WIDTH=754 HEIGHT=57 ALT=""></TD>
</TR>
<TR>
<TD ROWSPAN=2><IMG SRC="Images/autores-02.jpg" WIDTH=565 HEIGHT=378 ALT=""></TD>
<TD><a href="../index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','Images/autoresover-03.jpg',1)"><img src="Images/autores-03.jpg" alt="portada" name="Image5" width="80" height="29" border="0"></a></TD>
<TD ROWSPAN=2><IMG SRC="Images/autores-04.jpg" WIDTH=109 HEIGHT=378 ALT=""></TD>
</TR>
<TR>
<TD><IMG SRC="Images/autores-05.jpg" WIDTH=80 HEIGHT=349 ALT=""></TD>
</TR>
</TABLE></td>
</tr>
</table>
</BODY>
</HTML>

271
html2005/barracapitulos.html Normal file
View File

@@ -0,0 +1,271 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="es-es">
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>index</title>
<link rel="stylesheet" type="text/css" href="../nvu2005.css">
<!-- parche de compatibilización con CSS 2 para navegadores microsoft --><!--[if lt IE 7]> <script src="ie7/ie7-standard-p.js" type="text/javascript"></script> <![endif]-->
<script type="text/javascript">
<!--
window.onload=mostrarsubmenu;
function mostrarsubmenu(id) {
var d = document.getElementById(id);
for (var i = 1; i<=20; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
<style type="text/css">
/* CSS base procedente de los tutoriales de css.alsacreations.com */
<!--
body {
margin: 0;
padding: 0;
/*width:159px;*/
background: #373F68;
font: 75% verdana, arial, sans-serif;
overflow:auto;
}
#centrado {
width:10em;
padding:0;
margin-left:auto;
margin-right:auto;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: relative;
top: 0;
left: 0;
margin:0;
padding:0;
float:left;
}
#menu {
width:10em;
}
#menu dt {
cursor: pointer;
margin: 1px 0;
padding-left:.2em;
height: auto;
line-height: 15px;
text-align: left;
font-weight: bold;
border: 1px solid gray;
background: #ccc;
}
#menu dd {
border: 1px solid gray;
background-color:#FFFFFF;
}
#menu li {
font-size:.8em;
text-align: left;
padding-left:1em;
background: #fff;
}
#menu li a, #menu dt a {
font-size:.9em;
color: #000;
text-decoration: none;
height: 100%;
}
#menu dd ul li a {
display: block;
border-bottom:thin dotted;
height: 100%;
}
#menu dt a {
text-align:left;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}
#menu #pdf{
background-color:#D0A282;
}
-->
</style>
<base target="contenido">
</head>
<body>
<div id="centrado">
<dl id="menu">
<dt onclick="javascript:mostrarsubmenu('smenu1');" onkeypress="javascript:mostrarsubmenu('smenu1');" title="Haz clic para desplegar el menú de opciones.">
<a href="javascript:,">Introducci&oacute;n</a>
</dt>
<dd id="smenu1">
<ul>
<li><a href="introduccion/general1.htm">Informaci&oacute;n
general</a></li>
<li><a href="introduccion/general2.htm">&iquest;Qu&eacute;
es un hipertexto?</a></li>
<li><a href="introduccion/general3.htm">Normas
de estilo: lo esencial</a></li>
<li><a href="introduccion/general4.htm">Herramientas</a></li>
</ul>
</dd>
<dt onclick="javascript:mostrarsubmenu('smenu2');" onkeypress="javascript:mostrarsubmenu('smenu2');" title="Haz clic para desplegar el menú de opciones.">
<a href="javascript:,">La base</a>
</dt>
<dd id="smenu2">
<ul>
<li><a href="introduccion/entorno.html">Entorno de trabajo</a></li>
<li><a href="introduccion/etiquetas.html">Etiquetas html</a></li>
<li><a href="introduccion/estructurabasica.html">Estructura b&aacute;sica</a></li>
<li><a href="introduccion/texto1.html">El texto</a></li>
<li><a href="introduccion/pag1.html">Colores y fondos</a></li>
<li><a href="introduccion/pag2.html">Im&aacute;genes de fondo</a></li>
<li><a href="introduccion/pag3.html">Etiquetas meta</a></li>
</ul>
</dd>
<dt onclick="javascript:mostrarsubmenu('smenu3');" onkeypress="javascript:mostrarsubmenu('smenu3');" title="Haz clic para desplegar el menú de opciones.">
<a href="javascript:,">Tablas</a>
</dt>
<dd id="smenu3">
<ul>
<li><a href="tablas/tablas1.html">Introducci&oacute;n</a></li>
<li><a href="tablas/tablas2.html">Crear tablas</a></li>
<li><a href="tablas/tablas3.html">M&aacute;s opciones en las tablas</a></li>
</ul>
</dd>
<dt onclick="javascript:mostrarsubmenu('smenu4');" onkeypress="javascript:mostrarsubmenu('smenu4');" title="Haz clic para desplegar el menú de opciones.">
<a href="javascript:,">Multimedia</a>
</dt>
<dd id="smenu4">
<ul>
<li><a href="multimedia/multi1.htm">Imagen</a></li>
<li><a href="multimedia/sonido/multi2.htm">Sonido</a></li>
</ul>
</dd>
<dt onclick="javascript:mostrarsubmenu('smenu5');" onkeypress="javascript:mostrarsubmenu('smenu5');" title="Haz clic para desplegar el menú de opciones.">
<a href="javascript:,">V&iacute;nculos</a>
</dt>
<dd id="smenu5">
<ul>
<li><a href="vinculos/vinculos1.htm">Externos</a></li>
<li><a href="vinculos/vinculos2.htm">Internos</a></li>
<li><a href="vinculos/vinculos2b.htm">Tablas de contenido</a></li>
<li><a href="vinculos/vinculos2c.htm">De descarga</a></li>
<li><a href="vinculos/vinculos3.htm">Correo</a></li>
<li><a href="vinculos/vinculos4.htm">Mapas sensibles</a></li>
<li><a href="vinculos/vinculos5.htm">Enlaces antispam</a></li>
<li><a href="vinculos/vinculos6.html">Redireccionamiento con etiquetas meta</a></li>
</ul>
</dd>
<dt onclick="javascript:mostrarsubmenu();" onkeypress="javascript:mostrarsubmenu();" title="Haz clic para desplegar el menú de opciones.">
<a href="validacion/validacion.html">Validaci&oacute;n</a>
</dt>
<dt onclick="javascript:mostrarsubmenu();" onkeypress="javascript:mostrarsubmenu();" title="Haz clic para desplegar el menú de opciones.">
<a href="plantillas/plantillas.html">Plantillas</a>
</dt>
<dt onclick="javascript:mostrarsubmenu('smenu8');" onkeypress="javascript:mostrarsubmenu('smenu8');" title="Haz clic para desplegar el menú de opciones.">
<a href="javascript:,">Formularios</a>
</dt>
<dd id="smenu8">
<ul>
<li><a href="formularios/formularios1.htm">El contenedor principal</a></li>
<li><a href="formularios/formularios2.htm">Tipos de campo</a></li>
<li><a href="formularios/formularios3.html">Antispam</a></li>
<li><a href="formularios/formularios4.html">Servicios gratuitos de procesado y env&iacute;o</a></li>
</ul>
</dd>
<dt onclick="javascript:mostrarsubmenu('smenu9');" onkeypress="javascript:mostrarsubmenu('smenu19');" title="Haz clic para desplegar el menú de opciones.">
<a href="javascript:,">Marcos</a>
</dt>
<dd id="smenu9">
<ul>
<li><a href="marcos/marcos1.htm">&iquest;Qu&eacute; son?</a></li>
<li><a href="marcos/marcos2.htm">Crear marcos</a></li>
<li><a href="marcos/marcos2b.html">El marco fantasma</a></li>
<li><a href="marcos/marcos3.htm">V&iacute;nculos</a></li>
<li><a href="marcos/marcos5.htm">Iframes</a></li>
</ul>
</dd>
<dt onclick="javascript:mostrarsubmenu();" onkeypress="javascript:mostrarsubmenu();" title="Haz clic para desplegar el menú de opciones.">
<a href="xhtml/xhtml.html">XHTML </a>
</dt>
<dt onclick="javascript:mostrarsubmenu('smenu11');" onkeypress="javascript:mostrarsubmenu('smenu11');" title="Haz clic para desplegar el menú de opciones.">
<a href="javascript:,">Estilos</a>
</dt>
<dd id="smenu11">
<ul>
<li><a href="estilos/css1.html">Introducci&oacute;n</a></li>
<li><a href="estilos/css2.html">Primeros pasos</a></li>
<li><a href="estilos/css3.html">Aplicar estilos</a></li>
<li><a href="estilos/css4.html">Estilos para el texto</a></li>
<li><a href="estilos/css5.html">Estilos para fuentes</a></li>
<li><a href="estilos/css6.html">Fondos</a></li>
<li><a href="estilos/css7.html">Bordes</a></li>
<li><a href="estilos/css8.html">M&aacute;rgenes y rellenos</a></li>
<li><a href="estilos/css9.html">Listas</a></li>
<li><a href="estilos/css10.html">Dise&ntilde;o visual</a></li>
<li><a href="estilos/tecnicascss2.html">T&eacute;cnicas</a></li>
</ul>
</dd>
<dt onclick="javascript:mostrarsubmenu('smenu12');" onkeypress="javascript:mostrarsubmenu('smenu12');" title="Haz clic para desplegar el menú de opciones.">
<a href="javascript:,">Publicaci&oacute;n</a>
</dt>
<dd id="smenu12">
<ul>
<li><a href="publicacion/gestornvu.html">Gestor NVU</a></li>
<li><a href="publicacion/filezilla.htm">Filezilla</a></li>
<li><a href="publicacion/ftp98.htm">Explorador Win98</a></li>
<li><a href="publicacion/ftpxp.htm">Windows XP</a></li>
<li><a href="publicacion/gftp.htm">gFTP</a></li>
</ul>
</dd>
<dt onclick="javascript:mostrarsubmenu('smenu13');" onkeypress="javascript:mostrarsubmenu('smenu13');"title="Haz clic para desplegar el menú de opciones.">
<a href="javascript:,">Recursos</a>
</dt>
<dd id="smenu13">
<ul>
<li><a href="recursos/recursos1.html">Web de cole</a></li>
<li><a href="recursos/recursos2.html">Im&aacute;genes libres</a></li>
<li><a href="recursos/recursos3.html">Bookmarlets</a></li>
<li><a href="recursos/recursos4.html">Favicon</a></li>
<li><a href="recursos/recursos5.html">Extensiones</a></li>
<li><a href="recursos/recursos6.html">Parche Ie7</a></li>
<li><a href="recursos/recursos7.html">Estructuras</a></li>
<li><a href="recursos/recursos8.html">Sitios para aprender CSS</a></li>
<li><a href="recursos/recursos9.html">Car&aacute;cteres especiales</a></li>
<li><a href="recursos/recursos10.html">Referencias web</a> </li>
</ul>
</dd>
<dt onclick="javascript:mostrarsubmenu('smenu14');" onkeypress="javascript:mostrarsubmenu('smenu14');" title="Haz clic para desplegar el menú de opciones.">
<a href="accesibilidad/accesibilidad.htm">Accesibilidad</a>
</dt>
<dd id="smenu14">
<ul>
<li><a href="accesibilidad/directrices.htm">Directrices</a></li>
<li><a href="accesibilidad/pautas.htm">Programas y recursos</a></li>
</ul>
</dd>
<dt onclick="javascript:mostrarsubmenu('');" onkeypress="javascript:mostrarsubmenu();" title="Haz clic para desplegar el menú de opciones.">
<a href="bugs/errores.html">Errores</a>
</dt>
<dt id="pdf" onclick="javascript:mostrarsubmenu();" onkeypress="javascript:mostrarsubmenu();" title="Haz clic para desplegar el menú de opciones.">
<a href="pdf/pdf.htm" >Materiales en PDF</a>
</dt>
</dl>
</div>
</body>
</html>

14
html2005/bugs/errores.css Normal file
View File

@@ -0,0 +1,14 @@
/* Generated by CaScadeS, a stylesheet editor for Mozilla Composer */
.prohibited { background-color: rgb(204, 0, 0);
color: rgb(255, 255, 255);
font-weight: bold;
}
.missing { color: rgb(255, 255, 255);
font-weight: bold;
background-color: rgb(255, 153, 102);
}
.muddle { background-color: rgb(255, 255, 102);
color: rgb(0, 0, 0);
font-weight: normal;
}

907
html2005/bugs/errores.html Normal file
View File

@@ -0,0 +1,907 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="es-es">
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Errores de N|VU</title>
<meta content="Ra&uacute;l Luna" name="author">
<link rel="stylesheet" type="text/css" href="../nvu2005.css">
<!-- parche de compatibilización con CSS 2 para navegadores microsoft --><!--[if lt IE 7]> <script src="../ie7/ie7-standard-p.js" type="text/javascript"></script> <![endif]-->
<link rel="stylesheet" href="errores.css" type="text/css">
</head>
<body>
<div id="localizador">
<p>Errores</p>
</div>
<div id="flechaizq">
<a href="../accesibilidad/pautas.htm" title="retroceder"><img src="../Images/flechaizq.gif" border="0"></a>
</div>
<div id="contenido">
<h2>Algunos
errores conocidos de N|VU 1.0</h2>
Como programa en desarrollo que es, N|VU presenta algunos errores o
comportamientos no previsibles que pueden hacernos perder mucho tiempo
si no sabemos de su existencia. Vamos a aprovechar el trabajo de
recopilaci&oacute;n realizado por Charles Cooke, publicado en
ingl&eacute;s en su p&aacute;gina <a href="http://web.onetel.net.uk/%7Echarlescooke/nvubugs10.htm" target="_blank">http://web.onetel.net.uk/%7Echarlescooke/nvubugs10.htm</a>,
en el que me he basado para elaborar las siguientes notas, que son en
gran parte una traducci&oacute;n del original con algunos
a&ntilde;adidos que he podido ir descubriendo con el uso del programa.
Dado que su trabajo
de soporte pretende conseguir repercutir en las futuras mejoras de NVU
vamos a omitir sus valoraciones de los errores, que &eacute;l mismo
indica que son personales. Sin embargo s&iacute; que
incluir&eacute; alguna valoraci&oacute;n de los mismos basada
en mi propia experiencia, ya que toda esta documentaci&oacute;n
est&aacute; elaborada utilizando el N|VU, por lo que
podr&iacute;a perfectamente colocarse el icono <img style="width: 80px; height: 15px;" alt="Hecho con N|VU" title="Hecho con N|VU" src="../imagenes/madewithNvu80x15clear.png">
<div class="indentado50">
<ol id="mozToc">
<!--mozToc h3 1 h4 4 h5 5 h6 6--><li><a href="#mozTocId917388">Hojas
de estilo externas</a></li>
<li><a href="#mozTocId938461">Declaraci&oacute;n
del tipo de documento incompleta</a></li>
<li><a href="#mozTocId607266">Especificaci&oacute;n
del tipo de documento en las
preferencias</a></li>
<li><a href="#mozTocId338911">Creaci&oacute;n
de c&oacute;digos no acordes con el
tipo de DTD</a></li>
<li><a href="#mozTocId546780">Manejo
de capas</a></li>
<li><a href="#mozTocId273941">Modificaciones
ortogr&aacute;ficas no disparan el
guardado al cerrar</a></li>
<li><a href="#mozTocId63492">Subrayado
autom&aacute;tico de errores no se mantiene al abrir
p&aacute;ginas guardadas</a></li>
<li><a href="#mozTocId205130">Funcionamiento
irregular de las sugerencias ortogr&aacute;ficas</a></li>
<li><a href="#mozTocId93648">Listas
anidadas</a></li>
<li><a href="#mozTocId824262">Aplicaci&oacute;n
de ID</a></li>
<li><a href="#mozTocId683738">Inactivaci&oacute;n
de barra de formato</a></li>
<li><a href="#mozTocId603191">Numeraci&oacute;n
de l&iacute;neas</a></li>
<li><a href="#mozTocId869574">P&eacute;rdida
del foco de la pesta&ntilde;a activa</a></li>
<li><a href="#mozTocId994843">Tablas</a></li>
<li><a href="#mozTocId607055">Tablas
de contenido (TOC)</a></li>
<li><a href="#mozTocId228445">Formularios.
Teclas de&nbsp;accesibilidad en campos de texto</a></li>
<li><a href="#mozTocId361504">Formularios.
Propiedades de botones de opci&oacute;n y casillas de
verificaci&oacute;n</a></li>
<li><a href="#mozTocId88626">Formularios.
Propiedades de listas y cuadros de selecci&oacute;n</a></li>
<li><a href="#mozTocId618617">Limpiador
de c&oacute;digo</a></li>
<li><a href="#mozTocId641744">Cerrar
sin salvar estilos en l&iacute;nea</a></li>
<li><a href="#mozTocId16141">Administrador
de sitios</a></li>
<li><a href="#mozTocId214804">Editor
CSS</a></li>
<li><a href="#mozTocId479435">Tabla
de c&oacute;digos generados por N|VU seg&uacute;n las
circunstancias</a></li>
</ol>
<span class="indentado50"></span></div>
<br>
<h3><a class="mozTocH3" name="mozTocId917388"></a>Hojas
de estilo externas</h3>
<dl>
<dt>Descripci&oacute;n:</dt>
<dd>El enlace al archivo CSS
aparece siempre como ruta absoluta. Una vez que una p&aacute;gina
se mueva a una&nbsp;localizaci&oacute;n distinta, por
ejemplo&nbsp; desde una m&aacute;quina local a un servidor no
se podr&aacute; localizar el archivo de hoja de estilos, salvo que
esta transferencia se realice con el gestor de sitios de N|VU que
enviar&aacute; el archivo CSS, junto con el resto de archivos
complementarios a la carpeta que indiquemos modificando la ruta para
que se convierta en relativa.</dd>
<dt>Soluci&oacute;n provisional:</dt>
<dd>
<ol>
<li>Publicar la p&aacute;gina utilizando el
administrador
de sitios de N|VU (menos recomendable)</li>
<li>Modificar manualmente la ruta desde la
pesta&ntilde;a <img style="width: 99px; height: 21px;" alt="C&oacute;digo fuente" src="../imagenes/pestanacodigofuente.png">
para convertirla
en relativa (m&aacute;s recomendable)</li>
</ol>
</dd>
<dt>Repercusi&oacute;n:</dt>
<dd>Los usuarios principiantes pueden encontrarse con que sus
p&aacute;ginas no se muestran como esperan, desaprovechando una de
las funciones m&aacute;s potentes y recomendables del
programa.&nbsp;</dd>
<dt>Valoraci&oacute;n:</dt>
<dd>Error importante</dd>
</dl>
<h3><a class="mozTocH3" name="mozTocId938461"></a>Declaraci&oacute;n
del tipo de documento incompleta</h3>
<dl>
<dt>Descripci&oacute;n:</dt>
<dd>La declaraci&oacute;n de tipo de documento cuando se
opta por
documentos HTML (opci&oacute;n por defecto) es incompleta porque
omite
el URL del DTD. Los tipos permitidos est&aacute;n enumerados en el
p&aacute;rrafo 7.2 de las especificaciones&nbsp;HTML 4.01 del
W3C.</dd>
<dt>Soluci&oacute;n provisional:</dt>
<dd>
<ol>
<li>Modificar con&nbsp;un editor de texto externo la
p&aacute;gina base y guardarla como plantilla (no puede hacerse
desde
N|VU porque no guarda las modificaciones en la DTD</li>
<li>Crear las nuevas p&aacute;ginas
bas&aacute;ndose en esa plantilla.</li>
</ol>
</dd>
<dt>Repercusi&oacute;n:</dt>
<dd>Algunos navegadores pueden reaccionar de modo caprichoso,
por lo
que pueden mostrar tama&ntilde;os incorrectos de letra y deteriorar
la
compatibilidad para diversos navegadores que se hubiera
perseguido.&nbsp;</dd>
<dt>Valoraci&oacute;n:</dt>
<dd>Error de importancia media.</dd>
</dl>
<h3><a class="mozTocH3" name="mozTocId607266"></a>Especificaci&oacute;n
del tipo de documento en las
preferencias</h3>
<dl>
<dt>Descripci&oacute;n:</dt>
<dd>A pesar de que se indique un tipo de documento
predeterminado en
las preferencias generales (herramientas preferencias) dicha
opci&oacute;n solo persiste hasta que&nbsp;se crea un documento
de un
tipo diferente,momento en el que&nbsp;esta elecci&oacute;n
sobreescribe
las preferencias generales.</dd>
<dt>Soluci&oacute;n provisional:</dt>
<dd> Aunque se establezca&nbsp;un tipo de documento
predeterminado no confiar en esta condici&oacute;n y estar atentos
en
cada nuevo documento a que el tipo sea el que realmente pretendemos. </dd>
<dt>Repercusi&oacute;n:</dt>
<dd>Puede ocurrir, por ejemplo, que establezcamos como tipo
predeterminado HTML 4.01 strict, pero una vez que creemos un documento
de tipo HTML 4.01 transitional todos los dem&aacute;s se
crear&aacute;n
con este tipo.</dd>
<dt>Valoraci&oacute;n:</dt>
<dd>Error importante que puede resultar dif&iacute;cil de
detectar
para quienes no validen o hagan poco uso de la revisi&oacute;n de
c&oacute;digo.</dd>
</dl>
<h3><a class="mozTocH3" name="mozTocId338911"></a>Creaci&oacute;n
de c&oacute;digos no acordes con el
tipo de DTD</h3>
<dl>
<dt>Descripci&oacute;n:</dt>
<dd>La aplicaci&oacute;n de formato a zonas o elementos del
documento puede producir: <br>
<ol type="a">
<li>que se aplique un formato que no es compatible con el
tipo de DTD especificado&nbsp;</li>
<li>que se genere c&oacute;digo que no tiene efecto
sobre el formato&nbsp;</li>
<li>que opciones que deber&iacute;an poder utilizarse
seg&uacute;n el DTD especificado no est&eacute;n accesibles. </li>
</ol>
Todas estas situaciones se producen seg&uacute;n se encuentre
marcada o no en las preferencias la opci&oacute;n para <span class="refmenu">"usar css..."</span> y en
funci&oacute;n del tipo de DTD especificado.</dd>
<dt>Soluci&oacute;n provisional:</dt>
<dd>Para los expertos, si todo el formato se realiza
utilizando&nbsp;CSS no habr&aacute; problemas.<br>
Para el resto, si se elige&nbsp;<span class="refmenu">usar
estilos css en lugar de elementos y atributos html</span> en las
preferencias y se utiliza un DTD transitional no habr&aacute;
problemas de validaci&oacute;n.<br>
Para quienes quieran usar DTD strict y seguir utilizando los botones o
las opciones de men&uacute; consultar la tabla para evitar errores.
</dd>
<dt>Repercusi&oacute;n:</dt>
<dd>Se producir&aacute;n errores de validaci&oacute;n.
Puede requerir tiempo para las correcciones manuales.</dd>
<dt>Valoraci&oacute;n:</dt>
<dd>Error importante, especialmente para principiantes, ya que
puede desconcertar mucho la inactivaci&oacute;n de opciones.</dd>
</dl>
<h3><a class="mozTocH3" name="mozTocId546780"></a>Manejo
de capas</h3>
<dl>
<dt>Descripci&oacute;n:</dt>
<dd>Cada capa puede moverse de posici&oacute;n
f&aacute;cilmente si
arrastramos el tirador de posici&oacute;n que aparece en la zona
superior izquierda. Si se han creado varias capas y, al
moverlas,&nbsp;el contorno de una de ellas oculta completamente el
tirador de posici&oacute;n de otra ser&aacute; imposible volver
a
acceder a &eacute;l para mover esa capa. Incluso, aunque el valor
z-index de la capa que tiene el tirador oculto sea mayor
seguir&aacute;
produci&eacute;ndose esa situaci&oacute;n.</dd>
<dt>Soluci&oacute;n provisional:</dt>
<dd>
<ol type="a">
<li>Activar la cuadr&iacute;cula de fijaci&oacute;n
(<span class="refmenu">formato </span><img style="width: 14px; height: 13px;" alt="a continuaci&oacute;n" src="../imagenes/flechamenu.png"><span class="refmenu">
rejilla de posicionamiento</span>)
con una medida de 20 p&iacute;xeles facilita la vuelta de cada capa
a su
posici&oacute;n original y deja suficiente libertad de
posicionamiento.</li>
<li>Modificar temporalmente la posici&oacute;n de la
capa
que oculta
el tirador para hacerlo accesible y situar la capa donde se desee.
Restaurar luego la posici&oacute;n de la capa que movimos para
acceder
al tirador.</li>
</ol>
</dd>
<dt>Repercusi&oacute;n:</dt>
<dd>Puede ser muy molesto al obligar a realizar varias
operaciones para obtener un resultado que deber&iacute;a ser muy
simple.</dd>
<dt>Valoraci&oacute;n:</dt>
<dd>Error ligero salvo que se utilicen muchas capas
posicionadas absolutamente.&nbsp;</dd>
</dl>
<dl>
</dl>
<h3><a class="mozTocH3" name="mozTocId273941"></a>Modificaciones
ortogr&aacute;ficas no disparan el
guardado al cerrar</h3>
<dl>
<dt>Descripci&oacute;n:</dt>
<dd>Si se ha activado el subrayado de palabras mal escritas y
modificamos alguna palabra con la opci&oacute;n sugerida al pulsar
con
el bot&oacute;n derecho se muestra el cambio en pantalla pero no
cambia
el&nbsp;estado del documento a modificado.&nbsp;</dd>
<dt>Soluci&oacute;n provisional:</dt>
<dd>Cuando se hagan correcciones ortogr&aacute;ficas por
sugerencias
en el men&uacute; contextual no guardar sin haber realizado una
modificaci&oacute;n tal como a&ntilde;adir y borrar un
espacio.&nbsp; </dd>
<dt>Repercusi&oacute;n:</dt>
<dd>Si se cierra el
documento no
preguntar&aacute; si se quieren guardar los cambios y&nbsp;se
perder&aacute;n las modificaciones, guard&aacute;ndose la
p&aacute;gina con los errores ortogr&aacute;ficos.</dd>
<dt>Valoraci&oacute;n:</dt>
<dd>Error importante que puede provocar errores involuntarios
al
hacer que se publiquen con errores p&aacute;ginas que los autores
consideran corregidas.</dd>
</dl>
<dl>
</dl>
<h3><a class="mozTocH3" name="mozTocId63492"></a>Subrayado
autom&aacute;tico de errores no se mantiene al abrir
p&aacute;ginas guardadas</h3>
<dl>
<dt>Descripci&oacute;n:</dt>
<dd>Si se abre una p&aacute;gina ya guardada en
vista&nbsp;<img style="width: 65px; height: 20px;" alt="Normal" src="../imagenes/pestananormal.png"> no
se subrayan las palabras mal escritas a pesar de que est&eacute;
especificado as&iacute; en las preferencias.</dd>
<dt>Soluci&oacute;n provisional:</dt>
<dd>Pulsar la pesta&ntilde;a <img style="width: 99px; height: 21px;" alt="C&oacute;digo fuente" src="../imagenes/pestanacodigofuente.png"> y volver a la
pesta&ntilde;a <img style="width: 65px; height: 20px;" alt="Normal" src="../imagenes/pestananormal.png">
activa el subrayado de los errores ortogr&aacute;ficos. </dd>
<dt>Repercusi&oacute;n:</dt>
<dd>Puede provocar errores involuntarios al hacer
que se publiquen con errores ortogr&aacute;ficos p&aacute;ginas
que los autores consideran correctas.</dd>
<dt>Valoraci&oacute;n:</dt>
<dd>Error importante.&nbsp;</dd>
</dl>
<h3><a class="mozTocH3" name="mozTocId205130"></a>Funcionamiento
irregular de las sugerencias ortogr&aacute;ficas</h3>
<dl>
<dt>Descripci&oacute;n:</dt>
<dd>Cuando&nbsp; <span class="refmenu">subrayar
las palabras mal escritas </span>
est&aacute; activado suele presentarse la opci&oacute;n de
sugerencias
ortogr&aacute;ficas en el men&uacute; contextual, pero no
siempre es
as&iacute;. En ocasiones desaparece la opci&oacute;n de las
sugerencias.</dd>
<dt>Soluci&oacute;n provisional:</dt>
<dd>Desactivar en las preferencias <span class="refmenu">subrayar
las palabras mal escritas </span>y volver a reactivarlo. </dd>
<dt>Repercusi&oacute;n:</dt>
<dd>Provoca acciones innecesarias</dd>
<dt>Valoraci&oacute;n:</dt>
<dd>Error moderado que provoca molestias al usuario. Dados los
errores que presenta esta funci&oacute;n parece poco aconsejable
mantenerla activa, siendo preferible recurrir a la
correcci&oacute;n
ortogr&aacute;fica de todo el documento al finalizarlo.</dd>
</dl>
<h3><a class="mozTocH3" name="mozTocId93648"></a>Listas
anidadas</h3>
<dl>
<dt>Descripci&oacute;n:</dt>
<dd>Las actuales especificaciones consideran incorrecta la
anidaci&oacute;n de una lista dentro de otra si se ha cerrado el
elemento&nbsp;<code>&lt;li&gt;</code>
precedente. Cuando dentro de una lista
pulsamos el bot&oacute;n de sangrar texto de la barra de formato se
anida una lista para crear los elementos de segundo nivel pero se
cierra el elemento con su etiqueta <code>&lt;/li&gt;</code></dd>
<dt>Soluci&oacute;n provisional:</dt>
<dd>Utilizar la opci&oacute;n de men&uacute;&nbsp;<span style="font-weight: bold;"></span><span class="refmenu"> herramientas </span><img style="width: 14px; height: 13px;" alt="a continuaci&oacute;n" src="../imagenes/flechamenu.png"> <span class="refmenu">limpiador
de c&oacute;digo </span>y
volver a reactivarlo. </dd>
<dt>Repercusi&oacute;n:</dt>
<dd>Se producir&aacute;n errores de validaci&oacute;n,
lo cual puede suponer que alg&uacute;n navegador muestre de forma
err&oacute;nea la anidaci&oacute;n.</dd>
<dt>Valoraci&oacute;n:</dt>
<dd>Error moderado. Aunque la mayor&iacute;a de los
navegadores presentar&aacute;n correctamente los diferentes niveles
del listado puede no ocurrir as&iacute; en el futuro. La
soluci&oacute;n es sencilla y, de paso, podemos localizar otros
elementos innecesarios en el c&oacute;digo.</dd>
</dl>
<h3><a class="mozTocH3" name="mozTocId824262"></a>Aplicaci&oacute;n
de ID</h3>
<dl>
<dt>Descripci&oacute;n:</dt>
<dd>Puede aplicarse el mismo <code>ID</code> a
varios elementos.</dd>
<dt>Soluci&oacute;n provisional:</dt>
<dd>Revisar manualmente el c&oacute;digo para evitarlo </dd>
<dt>Repercusi&oacute;n:</dt>
<dd>Si se utiliza inadvertidamente podr&iacute;an
producirse
aplicaciones incorrectas de estilos o enlaces
err&oacute;neos.&nbsp;
Provoca errores de validaci&oacute;n del c&oacute;digo.</dd>
<dt>Valoraci&oacute;n:</dt>
<dd>Error
moderado. Posiblemente los principiantes no utilizar&aacute;n esta
posibilidad y es de esperar que los expertos no cometan este error.</dd>
</dl>
<h3><a class="mozTocH3" name="mozTocId683738"></a>Inactivaci&oacute;n
de barra de formato</h3>
<dl>
<dt>Descripci&oacute;n:</dt>
<dd>De vez en cuando las dos barras de formato quedan
inactivas.
Cuando esto ocurre tambi&eacute;n algunos elementos de los
men&uacute;s
se vuelven inactivos y desaparece la identificaci&oacute;n del
archivo
de la barra de t&iacute;tulo de la aplicaci&oacute;n.</dd>
<dt>Soluci&oacute;n provisional:</dt>
<dd>Cerrar y reiniciar el programa </dd>
<dt>Repercusi&oacute;n:</dt>
<dd>P&eacute;rdida de tiempo.</dd>
<dt>Valoraci&oacute;n:</dt>
<dd>Error
moderado. Es molesto por la p&eacute;rdida de tiempo pero no
provoca errores irrecuperables.</dd>
</dl>
<h3><a class="mozTocH3" name="mozTocId603191"></a>Numeraci&oacute;n
de l&iacute;neas</h3>
<dl>
<dt>Descripci&oacute;n:</dt>
<dd>Cuando se valida un documento que contiene errores la
numeraci&oacute;n de las l&iacute;neas que se devuelve no
coincide con
la que muestra N|VU en la pesta&ntilde;a <img style="width: 99px; height: 21px;" alt="C&oacute;digo fuente" src="../imagenes/pestanacodigofuente.png">.</dd>
<dt>Soluci&oacute;n provisional:</dt>
<dd>Buscar la l&iacute;nea correcta utilizando la
referencia de c&oacute;digo que muestra el validador.</dd>
<dt>Repercusi&oacute;n:</dt>
<dd>P&eacute;rdida de tiempo.&nbsp;</dd>
<dt>Valoraci&oacute;n:</dt>
<dd>Error
molesto por la incomodidad provocada. Adem&aacute;s tiene una
relativa importancia porque introduce en el archivo c&oacute;digos
invisibles, que no afectan a la visualizaci&oacute;n del documento,
pero que incrementan su tama&ntilde;o innecesariamente.&nbsp;</dd>
</dl>
<h3><a class="mozTocH3" name="mozTocId869574"></a>P&eacute;rdida
del foco de la pesta&ntilde;a activa</h3>
<dl>
<dt>Descripci&oacute;n:</dt>
<dd>En ocasiones, cuando tenemos&nbsp;documentos abiertos
en varias
pesta&ntilde;as se pierde el foco de la pesta&ntilde;a que
est&aacute;
a la vista: cuando queremos pegar un fragmento que hemos copiado de la
misma o de otra pesta&ntilde;a no sucede nada aparentemente. El
foco se
ha trasladado a la primera pesta&ntilde;a y es all&iacute;
donde se van
pegando los fragmentos en lugar de la pesta&ntilde;a en la que
deseamos
hacerlo.</dd>
<dt>Soluci&oacute;n provisional:</dt>
<dd>Cerrar y reiniciar el programa. </dd>
<dt>Repercusi&oacute;n:</dt>
<dd>P&eacute;rdida de tiempo.&nbsp;Posibles errores al
guardar cambios que no deber&iacute;an guardarse en el
documento que ha recibido err&oacute;neamente los fragmentos pegados</dd>
<dt>Valoraci&oacute;n:</dt>
<dd>Error moderado. Puede provocar la
publicaci&oacute;n&nbsp;de documentos con fragmentos que no les
corresponden.</dd>
</dl>
<h3><a class="mozTocH3" name="mozTocId994843"></a>Tablas</h3>
<dl>
<dt>Descripci&oacute;n:</dt>
<dd>Originalmente las tablas se insertan con una anchura por
defecto del 100% de la ventana. Al cabo de un tiempo se cambia el tipo
de unidad en las preferencias pasando de porcentaje a
p&iacute;xeles, cre&aacute;ndose las nuevas tablas con una
anchura de 100 p&iacute;xeles.</dd>
<dt>Soluci&oacute;n provisional:</dt>
<dd>Modificar la opci&oacute;n de anchura en el
men&uacute; <span class="refmenu">tabla&nbsp;</span><img style="width: 14px; height: 13px;" alt="a continuaci&oacute;n" src="../imagenes/flechamenu.png"><span class="refmenu">
insertar&nbsp;</span><img style="width: 14px; height: 13px;" alt="a continuaci&oacute;n" src="../imagenes/flechamenu.png"><span class="refmenu">
pesta&ntilde;a preciso</span>
para volver a porcentaje </dd>
<dt>Repercusi&oacute;n:</dt>
<dd>P&eacute;rdida de tiempo. Intervenci&oacute;n
innecesaria del usuario</dd>
<dt>Valoraci&oacute;n:</dt>
<dd>Error leve.&nbsp;</dd>
</dl>
<h3><a class="mozTocH3" name="mozTocId607055"></a>Tablas
de contenido (TOC)</h3>
<dl>
<dt>Descripci&oacute;n:</dt>
<dd>La ayuda indica que si se marca <span class="refmenu">hacer
que
la tabla de contenidos sea de
s&oacute;lo lectura</span> provocar&aacute; que la lista
sea
de texto simple sin
enlaces. En la actual versi&oacute;n esta opci&oacute;n no
tiene efecto y la lista sigue saliendo con enlaces.</dd>
<dt>Soluci&oacute;n provisional:</dt>
<dd>No hay soluci&oacute;n, salvo que se eliminaran
manualmente los enlaces </dd>
<dt>Repercusi&oacute;n:</dt>
<dd>Funci&oacute;n in&uacute;til en la actual versi&oacute;n</dd>
<dt>Valoraci&oacute;n:</dt>
<dd>Error leve.&nbsp;</dd>
</dl>
<h3><a class="mozTocH3" name="mozTocId228445"></a>Formularios.
Teclas de&nbsp;accesibilidad en campos de texto</h3>
<dl>
<dt>Descripci&oacute;n:</dt>
<dd style="">Cuando se adjudica una tecla de acceso
r&aacute;pido (<code>accesskey</code>) en un campo de
texto de una l&iacute;nea su valor no se almacena<span class="refmenu"></span></dd>
<dt>Soluci&oacute;n provisional:</dt>
<dd>Insertar manualmente el
c&oacute;digo <code>accesskey="letra"</code> </dd>
<dt>Repercusi&oacute;n:</dt>
<dd>Repetir innecesariamente una tarea y de forma
m&aacute;s inc&oacute;moda que la prevista.</dd>
<dt>Valoraci&oacute;n:</dt>
<dd>Error moderado: puede provocar la creaci&oacute;n de
documentos con accesibilidad reducida en contra de la
intenci&oacute;n del autor. Molesto.&nbsp;</dd>
</dl>
<h3><a class="mozTocH3" name="mozTocId361504"></a>Formularios.
Propiedades de botones de opci&oacute;n y casillas de
verificaci&oacute;n</h3>
<dl>
<dt>Descripci&oacute;n:</dt>
<dd style="">Al intentar modificar las propiedades de un
bot&oacute;n de opci&oacute;n o una casilla de
verificaci&oacute;n ya creados accediendo con el bot&oacute;n
derecho al&nbsp;men&uacute; contextual <span class="refmenu">propiedades
del campo de formulario</span> o intentando lanzar el panel de creaci&oacute;n/edici&oacute;n con un doble clic no se obtiene respuesta del programa.</dd>
<dt>Soluci&oacute;n provisional:</dt>
<dd><span style="font-weight: bold;"></span><code></code>
Utilizar el bot&oacute;n derecho sobre la etiqueta <code>&lt;input&gt;</code>
de la barra de estado y elegir <span class="refmenu">propiedades
avanzadas</span> lanza el panel para editar las
propiedades pero habr&aacute; que conocer&nbsp;cu&aacute;l es el atributo que deseamos modificar.</dd>
<dt>Repercusi&oacute;n:</dt>
<dd>Desconcierta puesto que en otros tipos de campos se puede
realizar la edici&oacute;n sin problemas.</dd>
<dt>Valoraci&oacute;n:</dt>
<dd>Error moderado: aunque la
soluci&oacute;n es relativamente c&oacute;moda desconcierta por
lo an&oacute;malo del comportamiento y, adem&aacute;s, obliga a
trabajar haciendo referencia a los atributos en lugar de utilizar la
traducci&oacute;n de los mismos para que un usuario poco experto pueda
comprender r&aacute;pidamente el sentido.</dd>
</dl>
<h3><a class="mozTocH3" name="mozTocId88626"></a>Formularios.
Propiedades de listas y cuadros de selecci&oacute;n</h3>
<dl>
<dt>Descripci&oacute;n:</dt>
<dd style="">Situaci&oacute;n similar a la anterior: no se obtiene
respuesta del programa al&nbsp;intentar modificar las propiedades de un
cuadro men&uacute; o lista de selecci&oacute;n ya creados accediendo
con el bot&oacute;n
derecho al&nbsp;men&uacute; contextual <span class="refmenu">propiedades
del campo de formulario</span> o&nbsp;con un doble clic.</dd>
<dt>Soluci&oacute;n provisional:</dt>
<dd><span style="font-weight: bold;"></span><code></code>Editar manualmente la lista de opciones desde la pesta&ntilde;a&nbsp;<img style="width: 99px; height: 21px;" alt="C&oacute;digo fuente" src="../imagenes/pestanacodigofuente.png">&nbsp;</dd>
<dt>Repercusi&oacute;n:</dt>
<dd>Obliga a introducir el c&oacute;digo manualmente.</dd>
<dt>Valoraci&oacute;n:</dt>
<dd>Error moderado: aunque a&ntilde;adir o borrar opciones no es una
tarea complicada resulta inc&oacute;modo para usuarios noveles. En
muchos casos es preferible eliminar el campo creado y recurrir al
asistente gr&aacute;fico para crearlo de nuevo.</dd>
</dl>
<h3><a class="mozTocH3" name="mozTocId618617"></a>Limpiador
de c&oacute;digo</h3>
<dl>
<dt>Descripci&oacute;n:</dt>
<dd>No todos los bloques vac&iacute;os se limpian. Listas
ordenadas y desordenadas vac&iacute;as permanecen, as&iacute;
como bloques &lt;span&gt;&lt;/span&gt; sin contenido en
su interior.</dd>
<dt>Soluci&oacute;n provisional:</dt>
<dd>Eliminar manualmente los c&oacute;digos sobrantes </dd>
<dt>Repercusi&oacute;n:</dt>
<dd>Se mantiene c&oacute;digo innecesario</dd>
<dt>Valoraci&oacute;n:</dt>
<dd>Error leve, pero frustrante si se pretende obtener un
c&oacute;digo ligero ya que se pod&iacute;a esperar que la
limpieza fuera completa y no exigiera revisi&oacute;n manual.</dd>
</dl>
<h3><a class="mozTocH3" name="mozTocId641744"></a>Cerrar
sin salvar estilos en l&iacute;nea</h3>
<dl>
<dt>Descripci&oacute;n:</dt>
<dd style="">Si se selecciona una etiqueta en la barra
de estado y se le aplica un estilo incrustado el bot&oacute;n de <span class="refmenu">guardar</span> permanece
inactivo y el programa no invita a guardar los cambios si cerramos la
pesta&ntilde;a sin hacer otros cambios</dd>
<dt>Soluci&oacute;n provisional:</dt>
<dd>Realizar un cambio trivial: a&ntilde;adir un espacio y
borrarlo para activar el estado de documento modificado. </dd>
<dt>Repercusi&oacute;n:</dt>
<dd>Se puede perder c&oacute;digo al pensar que el
documento ya est&aacute; guardado.</dd>
<dt>Valoraci&oacute;n:</dt>
<dd>Error moderado.&nbsp;</dd>
</dl>
<h3><a class="mozTocH3" name="mozTocId16141"></a>Administrador
de sitios</h3>
<dl>
<dt>Descripci&oacute;n:</dt>
<dd style="">No existe opci&oacute;n
espec&iacute;fica para ver s&oacute;lo los documentos xhtml o
css, que quedan ocultos si se selecciona <span class="refmenu">ver
documentos html&nbsp;</span></dd>
<dt>Soluci&oacute;n provisional:</dt>
<dd>Utilizar la opci&oacute;n <span class="refmenu">ver
todos los documentos</span>. </dd>
<dt>Repercusi&oacute;n:</dt>
<dd>Obliga a localizar visualmente.</dd>
<dt>Valoraci&oacute;n:</dt>
<dd>Error leve.&nbsp;</dd>
</dl>
<h3><a class="mozTocH3" name="mozTocId214804"></a>Editor
CSS</h3>
<dl>
<dt>Descripci&oacute;n:</dt>
<dd style="">El bot&oacute;n <span class="refmenu">bajar</span> no funciona</dd>
<dt>Soluci&oacute;n provisional:</dt>
<dd>Seleccionar elementos que se encuentren por debajo y
utilizar el bot&oacute;n <span class="refmenu">subir</span>
para reorganizar las reglas de estilo. </dd>
<dt>Repercusi&oacute;n:</dt>
<dd>M&aacute;s pulsaciones de las necesarias.</dd>
<dt>Valoraci&oacute;n:</dt>
<dd>Error leve.&nbsp;</dd>
</dl>
<a href="errorestabla.htm" target="_blank">Ver tabla
de c&oacute;digos generados por N|VU seg&uacute;n las
circunstancias</a>
<br>
<br>
</div>
</body>
</html>

1178
html2005/bugs/errorestabla.htm Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
html2005/bugs/imagenes/icoalineardcha.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 249 B

BIN
html2005/bugs/imagenes/icoenfasis.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 320 B

BIN
html2005/bugs/imagenes/icofondo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 289 B

BIN
html2005/bugs/imagenes/icoincrementasangrado.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 295 B

BIN
html2005/bugs/imagenes/icoitalica.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 355 B

BIN
html2005/bugs/imagenes/icojustificar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 205 B

BIN
html2005/bugs/imagenes/icomasenfasis.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 330 B

BIN
html2005/bugs/imagenes/icomayor.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 433 B

BIN
html2005/bugs/imagenes/icomenor.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 373 B

BIN
html2005/bugs/imagenes/iconegrita.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 392 B

BIN
html2005/bugs/imagenes/icoprimerplano.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 275 B

BIN
html2005/bugs/imagenes/icosubraya.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 359 B

BIN
html2005/bugs/imagenes/madewithNvu80x15clear.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
html2005/bugs/imagenes/tag-comment.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 907 B

BIN
html2005/bugs/imagenes/valid-css.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
html2005/bugs/imagenes/valid-html401.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

2651
html2005/bugs/nvubugs10.html Normal file
View File

File diff suppressed because it is too large Load Diff

4824
html2005/bugs/nvubugs10traducida.html Normal file
View File

File diff suppressed because it is too large Load Diff

67
html2005/bugs/ug.css Normal file
View File

@@ -0,0 +1,67 @@
/* Style sheet for Nvu user Guide - Nvu version 0.9 - Guide version 0.6 - Updated 17 Mar-2005 */
/* Global Tag styles */
body { margin: 0px; text-align: left; background: fixed url(images/paper.gif); }
p, h1, h2, h3, h4, td, li { font-family: Arial,Helvetica,sans-serif; }
p { font-size: small; margin-top: 0px; margin-bottom: 0.25em; margin-left: 3em; text-align: left; }
h1, h2, h3, h4 { font-weight: bold; margin-bottom: 0em; padding-top: 0.5em; padding-bottom: 0px; margin-top: 0em; color: rgb(66, 137, 181); }
h1 { text-align: center; font-size: x-large; margin-bottom: 1em; }
h1was { text-align: center; font-size: x-large; margin-top: 1em; margin-bottom: 1em; }
h2 { font-size: medium; text-align: left; }
h3, h4 { font-size: small; text-align: left; }
td { padding-left: 4px; padding-right: 4px; font-size: small; margin-bottom: 0.25em; margin-top: 0px; }
ul { margin-top: 0px; margin-bottom: 0px; }
li { font-size: small; margin-top: 0px; margin-bottom: 0px; margin-left: 3em; text-align: left; }
hr { width: 80%; height: 2px; margin-left: 10% ; margin-top:1em; background-color: rgb(74, 148, 197); color: rgb(74, 148, 197); }
/* Anchor styles */
a:link { text-decoration: underline; font-weight: bold; color: rgb(66, 137, 181); }
a:visited { font-weight: bold; color: rgb(66, 137, 181); }
a:hover { color: rgb(73, 149, 196); background-color: rgb(238, 238, 238); }
a:focus { color: white; background-color: rgb(73, 149, 196); }
/* Classes */
.cent { text-align: center; }
.clear { clear: left;}
.highlt { vertical-align: super; font-size: 80%; background-color: rgb(200, 203, 220); }
.note { margin-left: 4em; margin-right: 1em; padding-left: 0.35em; padding-right: 0; background-color: rgb(255, 255, 204); }
.left { float: left; }
.right { float: right; }
.logo { padding-left:44px; height: 44px; padding-top:10px; }
.madewith {border: 0px solid ; width: 135px; height: 52px;}
.madewith:link {text-decoration: none; font-weight:normal; margin-left: 0; }
.tsp {font-size: x-small ;}
.key { background-color: rgb(186, 218, 255); }
.warn { margin-left: 4em; margin-right: 1em; padding-left: 0.35em; padding-right: 0; border-style: solid none; border-color: rgb(0, 0, 0); border-width: 1px; background-color: rgb(255, 186, 144); }
.ie {color: rgb(255, 255, 255); font-size: 1px;}
.offset a { position:relative; top:-80px;}
/* Pane styles */
/* Main pane */
.paneholder { width: 770px; }
.panemain { position: absolute; top: 62px; left: 170px; max-width: 600px; }
/* Menu pane */
.panemenu { position: fixed; top: 0px; left: 10px; width: 160px; z-index: 3; }
div.panemenu p { margin:0; font-weight: bold; font-size: small; color: rgb(66, 137, 181); }
div.panemenu p a:link { text-decoration: none; color: rgb(66, 137, 181); font-size: small; }
div.panemenu p a:visited { text-decoration: none; color: rgb(66, 137, 181); font-size: small; }
div.panemenu p a:hover { color: rgb(73, 149, 196); background-color: rgb(238, 238, 238); }
div.panemenu p a:focus { color: rgb(73, 149, 196); background-color: rgb(238, 238, 238); }
div.panemenu ul { border-style: solid; border-color: rgb(66, 137, 181); border-width: 1px; margin-left: 1em; padding-left: 0.25em; margin-right: 0.25em; list-style-type: none;}
div.panemenu ul li { margin:0; padding:0; }
div.panemenu ul a:link { text-decoration: none; color: rgb(33, 80, 100); font-size: small; font-weight:normal;}
div.panemenu ul a:visited { text-decoration: none; color: rgb(33, 80, 100); font-size: small; font-weight:normal; }
div.panemenu ul a:hover { color: rgb(73, 149, 196); background-color: rgb(238, 238, 238); }
div.panemenu ul a:focus { color: rgb(73, 149, 196); background-color: rgb(238, 238, 238); }
/* Top pane */
.panetop { width: 588px; height: 80px; position: fixed; top: 0px; left:10px; padding-left: 180px; z-index: 2; background-image: url(images/paper.gif); }
div.panetop h1 { text-align:left; margin-top: 0; margin-bottom:0; }
div.panetop h2 { text-align:left; margin-top: 0; }
/* Div styles */
.contents { margin-top: 0pt; margin-bottom: 0px; line-height:80%; }

BIN
html2005/cab/Images/cab_01.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
html2005/cab/Images/cab_03.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 362 B

BIN
html2005/cab/Images/cap.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
html2005/cab/Images/cap_00.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 730 B

BIN
html2005/cab/Images/cap_01.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 639 B

BIN
html2005/cab/Images/cap_02.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 759 B

BIN
html2005/cab/Images/cap_03.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 752 B

BIN
html2005/cab/Images/cap_04.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 650 B

BIN
html2005/cab/Images/cap_05.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 736 B

BIN
html2005/cab/Images/cap_06.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 751 B

BIN
html2005/cab/Images/cap_07.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 675 B

BIN
html2005/cab/Images/cap_08.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 738 B

BIN
html2005/cab/Images/cap_09.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 748 B

BIN
html2005/cab/Images/cap_10.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 921 B

BIN
html2005/cab/Images/cap_11.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 790 B

BIN
html2005/cab/Images/cap_12.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 885 B

BIN
html2005/cab/Images/cap_13.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 845 B

BIN
html2005/cab/Images/cap_14.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 836 B

BIN
html2005/cab/Images/cap_15.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 854 B

BIN
html2005/cab/Images/cap_16.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 873 B

BIN
html2005/cab/Images/cap_17.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 836 B

BIN
html2005/cab/Images/cap_18.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 926 B

BIN
html2005/cab/Images/fin.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
html2005/cab/Images/fnd.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 561 B

57
html2005/cab/cab.html Normal file
View File

@@ -0,0 +1,57 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style></head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" background="Images/fnd.jpg"><table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="Images/cab_01.jpg" width="516" height="79"></td>
</tr>
</table></td>
<td width="1%" rowspan="2"><img src="Images/fin.jpg" width="43" height="105"></td>
</tr>
<tr>
<td width="3%"><img src="Images/cab_03.jpg" width="28" height="26"></td>
<td width="96%" bgcolor="#D3D4D4"><table border="0" align="right" cellpadding="0" cellspacing="0" bordercolor="#990000">
<tr>
<td><img src="Images/cap.jpg" width="65" height="26"></td>
<td><a href="#"><img src="Images/cap_00.jpg" width="17" height="26" border="0"></a></td>
<td><a href="#"><img src="Images/cap_01.jpg" width="18" height="26" border="0"></a></td>
<td><a href="#"><img src="Images/cap_02.jpg" width="17" height="26" border="0"></a></td>
<td><a href="#"><img src="Images/cap_03.jpg" width="17" height="26" border="0"></a></td>
<td><a href="#"><img src="Images/cap_04.jpg" width="15" height="26" border="0"></a></td>
<td><img src="Images/cap_05.jpg" width="20" height="26"></td>
<td><img src="Images/cap_06.jpg" width="16" height="26"></td>
<td><img src="Images/cap_07.jpg" width="16" height="26"></td>
<td><img src="Images/cap_08.jpg" width="17" height="26"></td>
<td><img src="Images/cap_09.jpg" width="18" height="26"></td>
<td><img src="Images/cap_10.jpg" width="22" height="26"></td>
<td><img src="Images/cap_11.jpg" width="24" height="26"></td>
<td><img src="Images/cap_12.jpg" width="23" height="26"></td>
<td><img src="Images/cap_13.jpg" width="24" height="26"></td>
<td><img src="Images/cap_14.jpg" width="26" height="26"></td>
<td><img src="Images/cap_15.jpg" width="24" height="26"></td>
<td><img src="Images/cap_16.jpg" width="23" height="26"></td>
<td><img src="Images/cap_17.jpg" width="26" height="26"></td>
<td><img src="Images/cap_18.jpg" width="24" height="26"></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>

23
html2005/cabecera.css Normal file
View File

@@ -0,0 +1,23 @@
/* CSS Document */
body{
background-image:url(cabecera.jpg);
background-repeat: no-repeat;
}
h2
{
margin-left:80%;
margin-top:40px;}
a{
text-decoration:none;
color:#373F68;
font-stretch: ultra-condensed;
font-family:Helvetica, Arial, sans-serif;
font-size:22px;
font-weight: bold;}
a:hover {color: #B5B19A}

10
html2005/cabecera.html Normal file
View File

@@ -0,0 +1,10 @@
<HTML>
<HEAD>
<TITLE>cabecera</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<link href="cabecera.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<h2><a href="indice.html" target="_top">&iacute;ndice</a>&nbsp;&nbsp;<a href="../index.html" target="_top">portada</a></h2>
</BODY>
</HTML>

BIN
html2005/cabecera.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
html2005/estilos/Thumbs.db Normal file
View File

Binary file not shown.

239
html2005/estilos/absolutamenterelativo.html Normal file
View File

@@ -0,0 +1,239 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="es-es">
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Absolutamente relativo</title>
<meta content="Ra&uacute;l Luna" name="author">
<link rel="stylesheet" type="text/css" href="../multi1.css">
<link rel="stylesheet" type="text/css" href="../nvu2005.css">
<!-- parche de compatibilización con CSS 2 para navegadores microsoft --><!--[if lt IE 7]> <script src="../ie7/ie7-standard-p.js" type="text/javascript"></script> <![endif]-->
</head>
<body>
<div id="localizador">
<p>Estilos&gt;&gt;Absolutamente relativo</p>
</div>
<div id="flechadcha">
<a href="tecnicascss2.html" title="avanzar"><img src="../Images/flechadcha.gif" border="0"></a>
</div>
<div id="flechaizq">
<a href="css10.html" title="retroceder"><img src="../Images/flechaizq.gif" border="0"></a>
</div>
<div class="solapas">
<ul>
<li><a href="css10.html">Diseño visual</a></li>
<li class="activo"><a href="absolutamenterelativo.html">Absolutamente relativo</a></li>
</ul>
</div>
<div class="principal">
<h2>Absolutamente relativo</h2>
<p>Este t&iacute;tulo aparentemente parad&oacute;jico
procede el t&iacute;tulo original de un art&iacute;culo en
ingl&eacute;s <cite>Relatively Absolute de Tommy Olson</cite> en el que se
intenta ofrecer una aclaraci&oacute;n del sentido de los diversos
modos de posicionamiento mediante <acronym title="Cascading Style Sheets">CSS</acronym>. De hecho el contenido de este
apartado del curso no es una traducci&oacute;n del mismo pero
s&iacute; una adaptaci&oacute;n basada en lo que
all&iacute; se plantea.</p>
<p>Para dise&ntilde;ar una p&aacute;gina web,
adem&aacute;s de las decisiones referentes a las fuentes, colores y
elementos gr&aacute;ficos, hay que elegir una
disposici&oacute;n de los componentes para lo cual se pueden
emplear tablas, flotaciones y posicionamiento.&nbsp;</p>
<p>El uso de las tablas, aunque sigue siendo probablemente el
m&eacute;todo m&aacute;s extendido es el menos recomendable de
todos por su incidencia negativa en la accesibilidad y su falta de
adecuaci&oacute;n para una correcta estructuraci&oacute;n de la
informaci&oacute;n. De hecho est&aacute; totalmente
desaconsejado con el <acronym title="World Wide Web Consortium">W3C</acronym>.</p>
<p>La utilizacion de la propiedad float es un m&eacute;todo
mucho m&aacute;s acorde con los est&aacute;ndares y puede ser
suficiente en muchas ocasiones.</p>
<p>El posicionamiento es la tercera t&eacute;cnica y la que
m&aacute;s dificultades de interpretaci&oacute;n tiene, por lo
que vamos a intentar aclararlo.</p>
<p>Para empezar vamos a tomar como referencia una serie
num&eacute;rica: 1, 2, 3,... en la que cada n&uacute;mero ocupa
de forma natural una posici&oacute;n: el 2 aparece
detr&aacute;s del 1 y antes del 3. Los elementos que componen una
p&aacute;gina web siguen el mismo esquema y tienen un orden natural
que es su orden de aparici&oacute;n en el c&oacute;digo que genera la
p&aacute;gina, por lo
que podr&iacute;amos decir que coincidir&iacute;an con el
comportamiento de una serie num&eacute;rica. (F&iacute;jate que he
especificado el orden de aparici&oacute;n en el c&oacute;digo, no el
orden de aparici&oacute;n en la p&aacute;gina porque podr&iacute;amos
confundirnos&nbsp;con lo que vemos si nos guiamos por la
presentaci&oacute;n de los elementos en pantalla)</p>
<p>Una vez fijada la referencia consideremos los diferentes
valores que puede adoptar la propiedad <code>position</code></p>
<dl>
<dt><code></code>static</dt>
<dd>Es el valor por defecto. Cualquier elemento con
<code>position:static</code> se situar&aacute; en la ventana en la
posici&oacute;n por defecto de acuerdo a su orden de
aparici&oacute;n en el flujo del documento, sin modificar la
posici&oacute;n. Dada esta particularidad podr&iacute;a
pensarse que su&nbsp;efecto ser&aacute; nulo. En parte es
as&iacute; ya que no sirve para modificar la posici&oacute;n de
un elemento, pero en alg&uacute;n momento ser&aacute; necesario
recurrir a este valor para restaurar los valores por defecto.</dd>
<dt>relative</dt>
<dd>Algunas veces el lenguaje nos juega malas pasadas y esta
puede ser una de ellas. La idea de posici&oacute;n relativa nos
sugiere que debemos considerar un elemento ajeno como punto de
referencia para situar elemento al que le aplicamos esta propiedad y
realmente no es as&iacute;: la posici&oacute;n relativa toma
como referencia la posici&oacute;n que ocupar&iacute;a el
elemento si se respeta el flujo del documento sin modificar la
situaci&oacute;n que le corresponder&iacute;a en ese caso. <br>
<br>
Si le aplicamos a un elemento la propiedad <code>position:relative</code> pero no
especificamos ning&uacute;n valor de desplazamiento el efecto es el
mismo que si no la hubi&eacute;ramos aplicado o hubi&eacute;ramos
utilizado el valor por defecto <code>position:static</code>.
Si le adjudicamos un valor <code>top:10px</code>
el elemento se desplazar&aacute; 10
p&iacute;xeles hacia abajo respecto a la que habr&iacute;a sido su
posici&oacute;n normal. Tambi&eacute;n podr&iacute;amos ponerle valores
negativos. Adem&aacute;s, dado que lo &uacute;nico que hacemos es
desplazar el elemento pero &eacute;ste&nbsp;sigue ocupando lo mismo,
es innecesario especificar un valor para <code>bottom</code> o <code>right</code> si lo hemos
hecho para <code>top</code> y <code>left</code> (o viceversa)<br>
<br>
Los elementos posicionados relativamente siguen en el flujo del
documento&nbsp;ocupando el espacio que les corresponde, pero no donde
aparecen sino donde habr&iacute;an estado si hubieran estado
posicionados est&aacute;ticamente. Por ello la utilidad del
posicionamiento relativo no se aplica excesivamente al desplazamiento
de elementos, sino m&aacute;s bien a convertir elementos en
posicionados, ya que una vez aplicada, aunque no movamos el elemento ni
un p&iacute;xel servir&aacute; como referencia para que los elementos
hijos, que hereden alguna propiedad del que tiene
<code>position:relative</code>, dispongan de un nuevo punto de c&aacute;lculo,
especialmente cuando se utilice el valor absolute.</dd>
<dt>absolute</dt>
<dd>Si lo anterior puede habernos procucido un cierto desconcierto,
esto va a acabar de complicar la situaci&oacute;n: la
interpretaci&oacute;n de posici&oacute;n absoluta que podr&iacute;amos
deducir del t&eacute;rmino tampoco es correcta.&nbsp;<br>
<br>
Cuando adjudicamos a un elemento <code>position:absolute</code> y le aplicamos un
desplazamiento la nueva posici&oacute;n se calcula localizando el primer
ancestro posicionado y situando los bordes a la distancia indicada
respecto a los bordes de ese elemento. En caso de que no exista
ning&uacute;n ancestro posicionado la especificaci&oacute;n&nbsp;<acronym title="Cascading Style Sheets Especificaci&oacute;n 2">CSS2</acronym>. toma
como referencia el bloque contenedor inicial, indicando que ser&aacute;
el navegador el que determine&nbsp;cu&aacute;l es, lo cual suele
traducirse en que se&nbsp;toma como referencia el elemento <code>body</code> que
coincide con la ventana de la aplicaci&oacute;n.<br>
<br>
Una cuesti&oacute;n que hay que tener en cuenta es que, cuando un
elemento est&aacute; posicionado con esta propiedad, sale del flujo del
documento, por lo que el lugar que le corresponder&iacute;a es ocupado
por el siguiente elemento, lo cual supone que podemos encontrarnos con
que un elemento puede quedar debajo de otro que est&eacute; situado de
forma absoluta.<br>
<br>
En los navegadores con soporte completo para&nbsp;<acronym title="Cascading Style Sheets">CSS</acronym> se pueden especificar
valores para los cuatro costados y el navegador se encarga de calcular
el ancho, pero no ocurre as&iacute; con Internet Explorer, lo cual nos
obliga a especificar, al menos, la anchura del elemento posicionado. Se
pueden indicar valores negativos para las distancias de los cuatro
lados, aunque siempre habr&aacute; que tener en cuenta cu&aacute;l es
el bloque contenedor de referencia para evitar que nuestro elemento
quede fuera de la pantalla.</dd>
<dt>fixed</dt>
<dd>En este caso el elemento de referencia es siempre la ventana del
navegador, por lo que ser&iacute;a la posici&oacute;n m&aacute;s
cercana a lo que podr&iacute;amos interpretar como absoluto. Los elementos
que llevan esta posicion salen del flujo y se mantienen fijos en la
ventana, pero a&uacute;n mantienen una relaci&oacute;n de profundidad
con el resto de los elementos: mientras no hayamos alterado el valor
z-index, los elementos que se han creado antes del posicionado se
encontrar&aacute;n por debajo de &eacute;l, mientras que los que se
crean despu&eacute;s se superpondr&aacute;n al elemento posicionado en
el caso de que tengan que coincidir al desplazar la p&aacute;gina.<br>
<br>
Como consecuencia de lo anterior, si queremos crear un men&uacute; que
permanezca fijo en la parte superior de la pantalla y creamos el
elemento que lo contiene en primer lugar tendremos que modificar su
valor z-index poni&eacute;ndolo mayor que cualquier otro en el resto de
la p&aacute;gina.</dd>
<dt></dt>
</dl>
</div>
</body>
</html>

BIN
html2005/estilos/atencion.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 251 B

257
html2005/estilos/borraractividad80.html Normal file
View File

@@ -0,0 +1,257 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>actividad80</title>
<style type="text/css">
h2
{
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: rgb(51, 102, 255);
border-right-color: rgb(51, 102, 255);
border-bottom-color: rgb(51, 102, 255);
border-left-color: rgb(51, 102, 255);
}
h2:hover
{
background-color: rgb(255, 255, 204);
}
</style>
</head>
<body>
<p>Veamos las particularidades que aportan las redes
telem&aacute;ticas a la elaboraci&oacute;n de un
peri&oacute;dico escolar: </p>
<p>Respecto al documento </p>
<ul>
<li>Incorporaci&oacute;n de fragmentos multimedia </li>
<li>Presentaci&oacute;n atractiva </li>
<li>Facilidad de edici&oacute;n </li>
<li>Buen nivel de retroalimentaci&oacute;n </li>
</ul>
<p>Respecto al proceso </p>
<ul>
<li>Costes reducidos </li>
<li>Disposici&oacute;n inmediata del producto </li>
<li>Posibilidad de difusi&oacute;n masiva </li>
<li>M&iacute;nimos requerimientos para el almacenamiento </li>
</ul>
<p>Elementos multimedia </p>
<p>La edici&oacute;n del peri&oacute;dico escolar en
papel permite presentar informaci&oacute;n textual e imagen fija,
bien consista &eacute;sta en dibujos, gr&aacute;ficos o fotos.
Como elemento positivo no podemos olvidar la reproducci&oacute;n de
la graf&iacute;a original que puede ser muy interesante cuando los
autores son alumnos de los primeros niveles de escolaridad.
Tambi&eacute;n en la edici&oacute;n electr&oacute;nica
podemos incorporar las graf&iacute;as originales, bien de textos o
bien de dibujos, mediante la utilizaci&oacute;n de alg&uacute;n
perif&eacute;rico de captura de imagen, y no olvidemos que esta
aplicaci&oacute;n acompa&ntilde;a a un equipo dotado con una
tarjeta de captura de v&iacute;deo. En la edici&oacute;n
electr&oacute;nica de nuestra revista encontramos como novedad la
posibilidad de incorporar junto al texto y la imagen fija elementos
multimedia: sonido e imagen en movimiento. Bien es verdad que
habr&aacute; que tener en cuenta que el actual estado de las redes
de comunicaci&oacute;n hacen todav&iacute;a poco viable la
inclusi&oacute;n de secuencias animadas de cierta
duraci&oacute;n, ya que su excesiva extensi&oacute;n hace que
su transmisi&oacute;n se dilate mucho. Por ello habr&aacute;
que tener en cuenta el foro en el que se va a difundir la revista: Si
es la red interna del centro podremos rebajar las exigencias en cuanto
a espacio ocupado por la informaci&oacute;n, ya que la
infraestructura de las redes internas hace posible una mayor densidad
de tr&aacute;fico sin p&eacute;rdida sensible de velocidad. Si
el destino es Internet habr&aacute; que ser muy cuidadosos con este
aspecto debido al reducido ancho de banda disponible. Habr&aacute;
que renunciar a las presentaciones espectaculares, so pena de perder a
los visitantes, aburridos ante un tiempo de descarga que se haga
intolerable. </p>
<p>Presentaci&oacute;n atractiva </p>
<p>La edici&oacute;n en papel suele hacerse utilizando los
medios de reprograf&iacute;a con los que se cuenta en el centro:
multicopista fotocopiadora. En ocasiones los centros con una cierta
tradici&oacute;n y fuerte raigambre en su entorno pueden conseguir
un patrocinador que haga alguna aportaci&oacute;n
econ&oacute;mica, con la que se puede acceder a una modesta
edici&oacute;n en imprenta. Lo habitual es que la
edici&oacute;n, cuando se hace con los medios propios, sea en
blanco y negro, con la evidente p&eacute;rdida de calidad de las
im&aacute;genes que, sin que pueda evitarse, tienden a empastarse
en un masa negruzca sin ning&uacute;n detalle. La
edici&oacute;n en imprenta, mucho menos frecuente, mejora
sensiblemente la calidad, pero tambi&eacute;n suele ser en blanco y
negro para reducir costes. La edici&oacute;n electr&oacute;nica
nos permite incorporar el color a la presentaci&oacute;n de la
revista, con lo que no s&oacute;lo se hace mucho m&aacute;s
vistosa, sino que nos abre las puertas de un componente que resulta
fundamental para transmitir de forma correcta algunos contenidos. </p>
<p>Facilidad de edici&oacute;n </p>
<p>Para llevar a cabo la maquetaci&oacute;n de una revista
escolar sencilla, con una presentaci&oacute;n adecuada, es
imprescindible manejar un programa de autoedici&oacute;n o, en su
defecto, dominar en profundidad de alguno de los modernos procesadores
de texto. Esto significa que estamos privando a alumnos y alumnas,
especialmente a los m&aacute;s peque&ntilde;os, de la
posibilidad de controlar en gran medida su trabajo. Por su parte, el
lenguaje HTML que utilizamos para realizar la creaci&oacute;n de
p&aacute;ginas WEB es intr&iacute;nsecamente sencillo al
apoyarse en un concepto simple: el documento original es texto puro,
sin formatear, al que se encierra entre unas etiquetas que se encargan
de especificar la apariencia de cada fragmento. Por ejemplo para
indicar que algo va en en negrita habr&iacute;a que poner
&lt;B&gt; que indica que lo que va a continuaci&oacute;n es
negrita y &lt;/B&gt; que indica que acaba la negrita. El
aprendizaje de las etiquetas b&aacute;sicas y su
utilizaci&oacute;n no lleva m&aacute;s que un par de horas, sin
contar con la gran cantidad de editores WYSWYG (lo que ves es lo que
obtienes) en los que ni siquiera es necesario escribir dichas
etiquetas. Con esta forma de trabajar posibilitamos que se puedan
trabajar en profundidad y con autonom&iacute;a los aspectos de
expresi&oacute;n, ya que el alumno s&oacute;lo tiene que
preocuparse por la correcci&oacute;n ortogr&aacute;fica,
gramatical y de estilo para expresar aquello que realmente quiere
decir, sin preocuparse de la presentaci&oacute;n. Por otra parte,
necesitar &uacute;nicamente una herramienta que produzca textos sin
formatear nos permite recuperar algunas m&aacute;quinas, de las que
se han quedado obsoletas, para que puedan ser empleadas por los
chavales. </p>
<p>Retroalimentaci&oacute;n </p>
<p>La secci&oacute;n de Cartas al Director es la ventana por
la que la prensa escrita recoge las opiniones, cr&iacute;ticas y
aportaciones de los lectores. Sin considerar otros elementos, es muy
posible que en m&aacute;s de una ocasi&oacute;n hayamos
renunciado a manifestar nuestras opiniones utilizando este medio,
desanimados ante la falta de inmediatez del correo tradicional. En una
revista electr&oacute;nica desaparece este inconveniente y se
propicia la participaci&oacute;n y el intercambio de informaciones
y opiniones. Es f&aacute;cil imaginar la importancia que la
secci&oacute;n de Correo puede tener si nos atrevemos a embarcarnos
en un proyecto intercentros en el que la revista de cada uno sea el
n&uacute;cleo de comunicaci&oacute;n e intercambio. </p>
<h2>Econom&iacute;a. </h2>
<p>Frente a los gastos que genera una edici&oacute;n en papel
tenemos la econom&iacute;a de la edici&oacute;n
electr&oacute;nica: el ejemplar virtual es &uacute;nico y a la
vez m&uacute;ltiple y adaptable a la demanda. &uacute;nico en
tanto que no creamos m&aacute;s que una copia. M&uacute;ltiple
en cuanto que cada usuario dispone de su propio ejemplar a partir de la
publicaci&oacute;n electr&oacute;nica. La
repercusi&oacute;n econ&oacute;mica de esta
caracter&iacute;stica es obvia: no necesitamos hacer una
inversi&oacute;n en papel y en reprograf&iacute;a para elaborar
una tirada sobre cuya difusi&oacute;n no tenemos certeza. </p>
<h2>Rapidez </h2>
<p>Quien haya estado comprometido en la elaboraci&oacute;n de
un peri&oacute;dico escolar habr&aacute; tenido que padecer la
lentitud de los procesos necesarios para confeccionar los contenidos
cuando se trata de un peri&oacute;dico de centro. Adem&aacute;s
habr&aacute; tenido que a&ntilde;adir las dilaciones que
conlleva la impresi&oacute;n de los materiales y su
distribuci&oacute;n. Si se pretende crear un peri&oacute;dico
de aula o de nivel es bastante probable que se haya abandonado la idea,
ya que la inversi&oacute;n en tiempo y medios para una tirada muy
reducida no compensa el aprovechamiento educativo que se pueda obtener.
La organizaci&oacute;n de las tareas ser&aacute; el
&uacute;nico medio para paliar el primer inconveniente citado, pero
el resto es perfectamente subsanable cuando trabajamos con una
edici&oacute;n electr&oacute;nica: no hay que esperar hasta que
el peri&oacute;dico est&eacute; impreso y la
difusi&oacute;n es autom&aacute;tica. No es necesario que se
actualice toda una edici&oacute;n: cada clase o grupo puede ir
incorporando sus materiales a medida que se preparan. Un simple
avisador gr&aacute;fico al lado del enlace nos informar&aacute;
de que se trata de un material reciente. Incluso es posible disponer de
un peri&oacute;dico propio de cada clase puesto que se anulan los
costes que implicaba la edici&oacute;n en papel. </p>
<h2>Distribuci&oacute;n masiva </h2>
<p>&iquest;A cu&aacute;ntas personas llega nuestro
peri&oacute;dico escolar? Lo habitual es que la
distribuci&oacute;n alcance al entorno pr&oacute;ximo al
centro: familia, barrio, pueblo. En algunos casos, si existe
correspondencia escolar, puede llegar a los centros con los que
mantenemos relaci&oacute;n. En el caso de la revista escolar
electr&oacute;nica estamos, literalmente, "lanzando al mundo"
nuestro mensaje. Ahora bien, esta potencial distribuci&oacute;n de
lo que hemos hecho en nuestro centro en un &aacute;mbito planetario
s&oacute;lo se queda en una posibilidad te&oacute;rica si no la
acompa&ntilde;amos de otras medidas de difusi&oacute;n. Tras
unas primeras experiencias para hacernos al medio ser&iacute;a
aconsejable integrarnos en alguna red, nacional o supranacional,
dedicada a potenciar este tipo de prensa escolar.&nbsp;</p>
<h2>Almacenamiento </h2>
<p>Problema: Hemos hecho una tirada de 300 ejemplares y se han
vendido 230. Cada ejemplar ten&iacute;a 25 p&aacute;ginas. Para
que la tinta no traspasara el papel la impresi&oacute;n era a una
cara. &iquest;Qu&eacute; hacemos con los ejemplares que nos
sobran? </p>
<p>Soluci&oacute;n 1: (persistente) A ver si conseguimos
hacer otra "batida" del barrio y los colocamos. </p>
<p>Soluci&oacute;n 2: (ecol&oacute;gico-educativa)
Intentemos reciclar el papel en las aulas y la secretar&iacute;a
utiliz&aacute;ndolo para borradores y "trabajos en sucio". </p>
<p>Soluci&oacute;n 3: (ecol&oacute;gica a secas) Vamos a
tirarlo al contenedor de papel. </p>
<p>Soluci&oacute;n 4: (conservacionista) Vamos a guardarlo en
el almac&eacute;n para que no estorbe mientras pensamos algo. </p>
<p>Aunque se haya planteado en tono jocoso este es uno de los
problemas que presenta la edici&oacute;n en papel. Las 1750 hojas
excedentes de la tirada del problema anterior acaban, en la
mayor&iacute;a de los casos, como material para reciclaje o
amontonando polvo en alg&uacute;n rinc&oacute;n de un
almac&eacute;n. En la edici&oacute;n electr&oacute;nica de
la revista escolar no hay excedentes, porque la utilizaci&oacute;n
de papel por parte del centro es m&iacute;nima y, en todo caso,
ajustada a las demandas de ejemplares impresos. Por lo tanto no tenemos
problemas de almacenamiento de material sobrante. Adem&aacute;s,
las ediciones previas pueden estar accesibles ocupando un
m&iacute;nimo espacio en el disco duro del servidor. </p>
</body>
</html>

99
html2005/estilos/borrarlista.html Normal file
View File

@@ -0,0 +1,99 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="es-es">
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title></title>
<meta content="Ra&uacute;l Luna" name="author">
<link rel="stylesheet" type="text/css" href="../nvu2005.css">
<!-- parche de compatibilización con CSS 2 para navegadores microsoft --><!--[if lt IE 7]> <script src="../ie7/ie7-standard-p.js" type="text/javascript"></script> <![endif]-->
<style type="text/css">
ul {
width: 45em;
}
li{width: 40em;}
</style>
</head>
<body>
<p></p>
<ul>
<li>Ambite</li>
<li>Arganda del Rey</li>
<li>Campo Real</li>
<li>Caraba&ntilde;a</li>
<li>Morata de Taju&ntilde;a</li>
<li>Nuevo
Batz&aacute;n</li>
<li>Olmeda de las Fuentes</li>
<li>Orusco</li>
<li>Perales de
Taju&ntilde;a</li>
<li>Pozuelo del Rey</li>
<li>Rivas Vaciamadrid</li>
<li>San
Mart&iacute;n de la Vega</li>
<li>Tielmes</li>
<li>Valdilecha</li>
<li>Villar de Olmo</li>
</ul>
<ol>
<li class="col1">Antelope</li>
<li class="col1">Baboon</li>
<li class="col1">Bison</li>
<li class="col1">Camel</li>
<li class="col1">Chimpanzee</li>
<li class="col2 coltopper">Deer</li>
<li class="col2">Eland</li>
<li class="col2">Elk</li>
<li class="col2">Gazelle</li>
<li class="col2">Gibbon</li>
<li class="col3 coltopper">Kangaroo</li>
<li class="col3">Meerkat</li>
<li class="col3">Sheep</li>
<li class="col3">Warthog</li>
<li class="col3">Zebra</li>
</ol>
</body>
</html>

42
html2005/estilos/botonesrollover.html Normal file
View File

@@ -0,0 +1,42 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title></title>
<style type="text/css">
a.boton { border-style: solid;
border-color: rgb(127, 127, 127) rgb(0, 0, 0) rgb(0, 0, 0) rgb(127, 127, 127);
border-width: 1px;
margin-left: 3px;
margin-right: 3px;
padding-left: 2px;
padding-right: 2px;
text-decoration: none;
background-color: rgb(235, 235, 235);
}
a.boton:hover { border-style: solid;
border-color: rgb(0, 0, 0) rgb(127, 127, 127) rgb(127, 127, 127) rgb(0, 0, 0);
text-decoration: none;
background-color: rgb(200, 200, 200);
color: red;
}
a.boton:active { border-style: solid dotted dotted solid;
border-color: rgb(0, 0, 0) rgb(127, 127, 127) rgb(127, 127, 127) rgb(0, 0, 0);
text-decoration: none;
background-color: rgb(0, 0, 0);
}
</style>
</head>
<body>
<a class="boton" href="botonesrollover.html">Enlace
1</a>
<a class="boton" href="dos.htm">Enlace 2</a>
<a class="boton" href="tres.htm">Enlace 3</a>
<a class="boton" href="cuatro.htm">Enlace 4</a>
<a class="boton" href="cinco.htm">Enlace 5</a>
</body>
</html>

26
html2005/estilos/boxmodel.html Normal file
View File

@@ -0,0 +1,26 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="es-es">
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Modelo de caja</title>
<meta content="Ra&uacute;l Luna" name="author">
<style type="text/css">
body{height:100%}
</style>
</head>
<body>
<p style="border-style: solid; border-width: 5px; margin: 30px; padding: 40px; width: 400px; background-color: rgb(204, 255, 255); min-height: 50%;">Este
p&aacute;rrafo tiene aplicado un estilo seg&uacute;n el cual
tendr&aacute; una anchura de 400 p&iacute;xeles,
con&nbsp;un relleno de 40 p&iacute;xeles, un borde de 5
p&iacute;xeles y un margen de 30 p&iacute;xeles.</p>
</body>
</html>

213
html2005/estilos/css1.html Normal file
View File

@@ -0,0 +1,213 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Introducci&oacute;n a CSS</title>
<link rel="stylesheet" href="../nvu2005.css" type="text/css">
<!-- parche de compatibilización con CSS 2 para navegadores microsoft -->
<!--[if lt IE 7]>
<script src="../ie7/ie7-standard-p.js" type="text/javascript"></script>
<![endif]-->
</head>
<body>
<div id="localizador">
<p>Estilos&gt;&gt;Introducci&oacute;n</p>
</div>
<div id="flechadcha">
<a href="css2.html" title="avanzar"><img src="../Images/flechadcha.gif" border="0"></a>
</div>
<div id="flechaizq">
<a href="../xhtml/xhtml.html" title="retroceder"><img src="../Images/flechaizq.gif" border="0"></a>
</div>
<div id="contenido">
<h2>Cascading Style Sheets</h2>
<p>O lo que es lo mismo: hojas de estilo en cascada.</p>
<p>El motivo de haber puesto en primer lugar la
denominaci&oacute;n en ingl&eacute;s es porque vas a encontrar
en muchos momentos estas siglas para referirse al concepto que
trabajaremos en este ep&iacute;grafe. Poco a poco iremos
descifrando el significado real de esta denominaci&oacute;n que,
por ahora, puede resultarnos un tanto cr&iacute;ptica.</p>
<p>Lo primero en lo que coincidiremos es en que el lenguaje HTML
es
francamente antip&aacute;tico y poco flexible cuando se trata de
incidir en la apariencia de una p&aacute;gina. El problema real
est&aacute; en que la concepci&oacute;n original del mismo no
pretend&iacute;a orientarlo hacia el aspecto gr&aacute;fico: la
misi&oacute;n principal de las etiquetas HTML es proporcionar
estructura l&oacute;gica y sem&aacute;ntica al
contenido.&nbsp;Pensemos que el lenguaje HTML surgi&oacute; en
un entorno, el universitario, y con un prop&oacute;sito, la
publicaci&oacute;n de contenidos cient&iacute;ficos
estructurados, eminentemente textuales. El problema es que la masiva
difusi&oacute;n de Internet hizo que se rompiera el marco original
y se hiciera necesario, especialmente desde la irrupci&oacute;n de
un uso comercial, presentar p&aacute;ginas en las que el centro de
gravedad se trasladaba del contenido y su estructura a la forma, ya que
se trataba de crear "imagen de marca". Fue entonces cuando empezaron a
aparecer los problemas, ya que el lenguaje HTML no est&aacute;
pensado para trabajar con los elementos formales sino con los
de tipo estructural.</p>
<p>Si te paras a pensar un poco sobre lo que acabas de leer
puedes darte cuenta por ejemplo de que, aunque hayamos podido utilizar
las etiquetas &lt;h1&gt; para conseguir un texto de un
determinado tama&ntilde;o que nos pudiera valer de titular lo
l&oacute;gico habr&iacute;a sido emplearlas para organizar los
contenidos indicando que su contenido es el
t&iacute;tulo&nbsp;de un fragmento que tiene tiene una
importancia superior, que aquellos que van encabezados por un
&lt;h2&gt; </p>
<p>El crecimiento exponencial de Internet hizo que la imagen que
nos hemos hecho de lo que debe ser una p&aacute;gina WEB fuera
acerc&aacute;ndose a lo que es hoy: un entorno multimedia en el que
los aspectos formales han cobrado una gran importancia. Pero esta
percepci&oacute;n sigue apoy&aacute;ndose en la
utilizaci&oacute;n del mismo lenguaje que le hab&iacute;a
servido de base en los primeros tiempos, lo cual ha hecho que los
dise&ntilde;adores hayan tenido que recurrir a trucos y
artima&ntilde;as para paliar las deficiencias del lenguaje HTML en
lo referente a la presentaci&oacute;n visual.</p>
<p>Al tratarse de a&ntilde;adidos a la finalidad original, y
en muchos casos utilizaciones francamente contradictorias con la misma,
podemos encontrarnos con situaciones muy problem&aacute;ticas
cuando pretendemos introducir modificaciones globales en un sitio WEB.
&iquest;Imaginas, por ejemplo, el trabajo
que&nbsp;ser&iacute;a necesario para cambiar el tipo de letra
de un sitio WEB compuesto por cincuenta p&aacute;ginas? </p>
<p>La forma de solucionarlo ha sido la utilizaci&oacute;n de
las hojas de estilo en cascada. Las hojas de estilo en cascada aportan,
como caracter&iacute;stica esencial, la posibilidad de separar los
elementos formales de los de contenido, de forma que con una
peque&ntilde;a modificaci&oacute;n de la hoja de estilo se
pueda cambiar el aspecto de todas las p&aacute;ginas en las que se
aplica esa hoja. Volviendo al ejemplo anterior tal vez nos
bastar&iacute;a con cambiar una vez la palabra sans-serif por serif
para conseguir que las cincuenta p&aacute;ginas de nuestra web
cambiaran autom&aacute;ticamente de apariencia.</p>
<p>Antes de empezar es conveniente considerar una
cuesti&oacute;n: el <acronym>W3C</acronym>,
como organismo encargado de la estandarizaci&oacute;n, elabora un
conjunto de especificaciones normativas, pero...&nbsp; cada
navegador
ofrece un soporte m&aacute;s o menos ajustado a las
especificaciones.
De hecho nos encontramos en un momento en el que la
especificaci&oacute;n CSS3, que incluye una gran cantidad de
posibilidades no contempladas en las versiones previas, no es soportada
por ning&uacute;n navegador. Incluso, la implementaci&oacute;n
de las
especificaciones CSS2 presenta importantes&nbsp;deficiencias en
Explorer 6 y anteriores, lo cual nos obligar&aacute; a buscar
algunos
trucos para lograr efectos similares en todos los navegadores. Es muy
probable que las nuevas versiones de los navegadores que tal vez hayan
aparecido cuando leas esta documentaci&oacute;n superen estos
problemas
y se ajusten a la normativa com&uacute;n. </p>
<h2>&iquest;Por qu&eacute; se denominan hojas de estilo?</h2>
<p>La denominaci&oacute;n de hojas de estilo hace referencia
a que podemos, a partir de las etiquetas b&aacute;sicas de HTML,
realizar modificaciones en las propiedades de las
mismas,&nbsp;indic&aacute;ndole al navegador unas instrucciones
muy precisas sobre la forma en la que tiene que presentar un
determinado elemento, esto es, el estilo de la presentaci&oacute;n.
</p>
<p>Una ventaja a&ntilde;adida es que, al tratarse de una
colecci&oacute;n de instrucciones escrita en formato de texto. Si
recurrimos a&nbsp;su uso m&aacute;s aconsejable, dichas
instrucciones
estar&aacute;n separadas de la propia p&aacute;gina web y
ser&aacute;n
aplicables a m&uacute;ltiples p&aacute;ginas
simult&aacute;neamente,
por lo que&nbsp; conseguiremos que el c&oacute;digo
de&nbsp;nuestra&nbsp;p&aacute;gina en s&iacute; resulte
mucho
m&aacute;s ligero. </p>
<p>Por otra parte, al quedar un c&oacute;digo mucho
m&aacute;s limpio gracias a la descarga de los elementos de
formato, la estructura de la informaci&oacute;n quedar&aacute;
mucho m&aacute;s clara ya que el c&oacute;digo
tender&aacute; a ser muy simple. </p>
<h2>&iquest;Por qu&eacute; se denominan "en cascada"?</h2>
<p>A la hora de crear un estilo, las especificaciones que se
realicen para un determinado elemento ser&aacute;n aplicables a
todos aquellos elementos que se encuentren "por debajo" de
&eacute;l atendiendo a un criterio de herencia. Por ejemplo, si
especificamos un tipo de letra para el elemento &lt;body&gt;
todos aquellos elementos que puedan heredar las
caracter&iacute;sticas se presentar&aacute;n con el mismo tipo
de fuente. As&iacute;, el elemento &lt;p&gt;
heredar&aacute; el tipo de letra salvo que especifiquemos lo
contrario y no necesitar&iacute;amos volver a indicar esta
caracter&iacute;stica.&nbsp;</p>
<p>Gracias a la organizaci&oacute;n en cascada podemos crear
hojas de estilo muy compactas, ya que una sola norma en el primer
elemento de la cadena de herencia permite que podamos aplicarla a todos
los herederos.</p>
<p>Adem&aacute;s de ello se establece un orden de prioridad
para la aplicaci&oacute;n de las normas en caso de que resulten
contradictorias. El orden de preferencia para aplicar una norma es el
siguiente:</p>
<ol>
<li>Estilo especificado dentro de la etiqueta. (estilo en
l&iacute;nea) </li>
<li>Estilo especificado en la cabecera del documento. (hoja de
estilos interna)</li>
<li>Estilo definido en un documento independiente al que se
enlaza nuestra p&aacute;gina. (hoja de estilos externa) </li>
</ol>
<p>Teniendo en cuenta el orden mencionado, el procedimiento
m&aacute;s c&oacute;modo es crear una hoja de estilo en un
archivo independiente y vincular las p&aacute;ginas a este archivo.
Si queremos realizar alguna modificaci&oacute;n en un elemento
concreto podr&iacute;amos recurrir a uno de los dos primeros
procedimientos que, al ser m&aacute;s espec&iacute;ficos,
resultar&aacute;n preferentes.</p>
<h2>&iquest;CSS1, CSS2 o CSS3?</h2>
<p>Es posible que en cuanto intentes localizar alguna
informaci&oacute;n sobre hojas de estilo te aparezca la referencia
a
uno de los tres niveles. Obviamente son m&aacute;s avanzadas las
especificaciones del nivel 3, pero ya hemos comentado que en el momento
actual no est&aacute;n soportadas por la mayor&iacute;a de los
navegadores, por lo que haremos referencia a las de nivel 2.</p>
</div>
</div>
</body>
</html>

38
html2005/estilos/css10.css Normal file
View File

@@ -0,0 +1,38 @@
/* Generated by CaScadeS, a stylesheet editor for Mozilla Composer */
th { background-color: rgb(170, 188, 53);
text-align: center;
}
#centrada { border: thin solid ;
margin: auto;
padding: 10px;
width: 450px;
}
#Contenedora { width: 100%;
text-align: center;
}
#CentradaIE { border: thin solid ;
margin: auto;
padding: 10px;
width: 450px;
text-align: justify;
}
.enlinea li { list-style-type: none;
display: inline;
margin-right: 3em;
}
.grande { font-size: large;
}
.muygrande { font-size: xx-large;
}
#ejemploapilarcapas { height: 270px;
overflow: hidden;
}

892
html2005/estilos/css10.html Normal file
View File

@@ -0,0 +1,892 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="es-es">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>CSS: dise&ntilde;o visual</title>
<meta name="author" content="Ra&uacute;l Luna">
<!-- parche de compatibilización con CSS 2 para navegadores microsoft --><!--[if lt IE 7]>
<script src="../ie7/ie7-standard-p.js" type="text/javascript"></script>
<![endif]-->
<link href="../nvu2005.css" type="text/css" rel="stylesheet">
<link href="../multi1.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="css10.css" type="text/css">
</head>
<body>
<div id="localizador">
<p>Estilos&gt;&gt;Dise&ntilde;o visual</p>
</div>
<div id="flechadcha">
<a href="absolutamenterelativo.html" title="avanzar"><img src="../Images/flechadcha.gif" border="0"></a>
</div>
<div id="flechaizq">
<a href="css9.html" title="retroceder"><img src="../Images/flechaizq.gif" border="0"></a>
</div>
<div class="solapas">
<ul>
<li class="activo"><a href="css10.html">Diseño visual</a></li>
<li><a href="absolutamenterelativo.html">Absolutamente relativo</a></li>
</ul>
</div>
<div class="principal">
<h2>Dise&ntilde;o visual</h2>
<p> Bajo el ep&iacute;grafe de dise&ntilde;o visual se
incluyen propiedades referidas a la forma en que podemos controlar
c&oacute;mo
se muestra un elemento,&nbsp;c&oacute;mo aparecer&aacute;
una imagen en
relaci&oacute;n a otro elemento, el posicionamiento de un elemento
respecto a su posici&oacute;n habitual o con una
posici&oacute;n fija dentro de la p&aacute;gina, la
determinaci&oacute;n de la visibilidad de un elemento y el orden en
el que se mostrar&aacute;n las capas si estas se superponen, la
creaci&oacute;n de recortes para mostrar la informaci&oacute;n
y c&oacute;mo mostrarla cuando supera el espacio asignado.</p>
<h3>C&oacute;mo se muestran los elementos</h3>
<div>
<p>Ya hemos visto que hay elementos en bloque y en
l&iacute;nea y que su forma de construir el cuadro contenedor
difiere bastante. Mediante el uso de CSS podemos indicarle al navegador
que debe mostrar un elemento creando un tipo de cuadro distinto al que
le corresponder&iacute;a por su naturaleza.&nbsp;En el editor
de CSS de N|VU podr&aacute;s acceder a esta propiedad dentro de la
pesta&ntilde;a caja.</p>
</div>
<p><strong>Propiedad: </strong><code>display</code></p>
<p><strong>Valores:</strong> aunque
podr&iacute;amos considerar otros recogidos en la
especificaci&oacute;n vamos a tener en cuenta s&oacute;lo <code>inline</code>
y <code>block</code> para intercambiar la forma de
presentaci&oacute;n de las dos principales disposiciones.&nbsp;</p>
<div class="ejemplo">
<p> <strong>Ejemplo 1</strong></p>
<p>Si utilizo el selector span para marcar una palabra de una
frase y aplicarle un estilo lo normal es que ese estilo genere un
cuadro de elemento en l&iacute;nea ya que esa es la <span style="border: 1px dotted orange;">presentaci&oacute;n</span>
predeterminada para los fragmentos de texto. A continuaci&oacute;n
se repite este mismo texto aplic&aacute;ndole la propiedad
<code>display:block</code> a la palabra
presentaci&oacute;n. </p>
<p><strong>Resultado</strong></p>
<p>Si utilizo el selector span para marcar una palabra de una
frase y aplicarle un estilo lo normal es que ese estilo genere un
cuadro de elemento en l&iacute;nea ya que esa es la <span style="border: 1px dotted orange; display: block;">presentaci&oacute;n</span>
predeterminada para los fragmentos de texto. A continuaci&oacute;n
se repite este mismo texto aplic&aacute;ndole la propiedad
display:block a la palabra presentaci&oacute;n.</p>
<p><strong>Ejemplo 2 </strong></p>
<p>En el segundo ejemplo marcaremos los p&aacute;rrafos con
<code>display:inline</code></p>
<p>Este es el segundo p&aacute;rrafo. Ahora repetimos los dos
p&aacute;rrafos correspondientes a este ejemplo y
aparecer&aacute;n uno a continuaci&oacute;n de otro como si no
hubiese salto de p&aacute;rrafo.</p>
<p><strong>Resultado</strong></p>
<p style="display: inline;">En el segundo ejemplo
marcaremos el segundo p&aacute;rrafo con <code>display:inline</code></p>
<p style="display: inline;">Este es el segundo
p&aacute;rrafo. Ahora repetimos los dos p&aacute;rrafos
correspondientes a este ejemplo y aparecer&aacute;n uno a
continuaci&oacute;n de otro como si no hubiese salto de
p&aacute;rrafo.</p>
</div>
<p>&nbsp;</p>
<h3>Posici&oacute;n flotante</h3>
<p>Se trata de una propiedad que encuentra su principal
aplicaci&oacute;n en las im&aacute;genes, aunque
tambi&eacute;n nos permitir&aacute; situar elementos textuales
y conseguir interesantes efectos de inclusi&oacute;n, especialmente
si utilizamos como complemento los fondos.&nbsp;En el editor de CSS
de N|VU podr&aacute;s acceder a esta propiedad dentro de la
pesta&ntilde;a caja. </p>
<p><b>Propiedad:</b> <code>float</code> </p>
<p><b>Valores:</b> <code>left</code>
har&aacute; flotar el elemento afectado en la zona izquierda, <strong><code>right</code>
</strong> en la derecha y <strong><code> none</code>
</strong>impedir&aacute; la flotaci&oacute;n haciendo que
el elemento se
muestre en la posici&oacute;n que le corresponde en el flujo de la
p&aacute;gina.&nbsp;</p>
<div class="ejemplo">
<p><b>Ejemplos:</b> En el ejemplo que se muestra se
han creado dos identificadores a los que se les ha aplicado la
propidedad <code>float</code> y algunas m&aacute;s de
fondos,
m&aacute;rgenes y rellenos para que su presentaci&oacute;n
visual tenga "aire" entre las diferentes zonas. <a href="javascript:void(0)" onclick="window.open('muestra12.htm','','statusbar=0,menubar=0,toolbar=0,top=0,left=0,width=690,height=400')">Ver
ejemplo </a></p>
</div>
<h2>Zonas de flotaci&oacute;n prohibidas</h2>
<p>Si no nos interesa que a un determinado elemento se le
a&ntilde;adan zonas flotantes
podemos indicarlo mediante una propiedad
espec&iacute;fica.&nbsp;En el editor de CSS de N|VU
podr&aacute;s acceder a esta propiedad dentro de la
pesta&ntilde;a caja. </p>
<p><b>Propiedad:</b> <code>clear</code></p>
<p><b>Valores: </b><code>left</code><strong>
</strong>impedir&aacute; la flotaci&oacute;n de un
elemento a la
izquierda del que lleva la propiedad, <code>right</code><strong>
</strong>har&aacute; lo propio a la derecha y <code>
both</code><strong>
</strong>afectar&aacute; a ambos lados.</p>
<div class="ejemplo">
<p><b>Ejemplos:</b> Se repite el ejemplo anterior
pero se ha evitado la flotaci&oacute;n de la zona a la que
hab&iacute;amos llamado mancheta. <a href="javascript:void(0)" onclick="window.open('muestra13.htm','','statusbar=0,menubar=0,toolbar=0,top=0,left=0,width=690,height=500')">Ver
ejemplo </a></p>
</div>
<p>Antes de continuar recordemos cual es el proceso habitual de
generaci&oacute;n de p&aacute;ginas en una ventana de
ordenador. Es lo que se denomina <strong>flujo normal</strong>:</p>
<ul>
<li>Los elementos de bloque generan cajas de bloque que se
sit&uacute;an verticalmente, una a continuaci&oacute;n de otra
en su orden de aparici&oacute;n en la p&aacute;gina, comenzando
por la parte superior de la ventana. El espaciado vertical entre un
elemento y el siguiente se calcula tomando el mayor valor de margen
superior o inferior de los elementos implicados.<br>
&nbsp; </li>
<li>Los elementos en l&iacute;nea generan cajas de
l&iacute;nea que se disponen horizontalmente uno a
continuaci&oacute;n de otro en su orden de aparici&oacute;n en
la p&aacute;gina, desde el inicio del bloque que las contiene. Si
hay dos cajas de l&iacute;nea contiguas sus espaciados horizontales
se mantienen, sum&aacute;ndose sus anchuras. Cuando una caja de
l&iacute;nea ocupa m&aacute;s del espacio disponible se rompe
autom&aacute;ticamente generando una nueva caja en el
rengl&oacute;n inferior. En ese caso, los bordes,
m&aacute;rgenes y rellenos no tienen aplicaci&oacute;n en el
borde de ruputura ni en el de inicio de la siguiente caja.</li>
</ul>
<div class="practicas">
<img style="width: 29px; height: 29px; float: left;" alt="Actividad 92" title="Actividad 92" src="../imagenes/numeracion/noventaydos.gif">
<p>Vamos a
comprobar con un ejercicio pr&aacute;ctico lo que acabamos de
comentar.</p>
<ul>
<li>Crea una p&aacute;gina nueva con dos
p&aacute;rrafos y apl&iacute;cales a cada uno de ellos un
estilo en l&iacute;nea que recoja las siguientes propiedades:
<ul>
<li><code>margin:50px</code> y <code>border:thin
solid blue</code> para el primero </li>
<li><code>margin:10px</code> y <code>border:thin
dotted red</code> para el segundo</li>
<li>tambi&eacute;n ser&iacute;a conveniente que al
selector <code>body</code> le a&ntilde;adieras el
estilo <code>margin:0px</code> </li>
</ul>
</li>
<li>A&ntilde;ade un nuevo p&aacute;rrafo sin
caracter&iacute;sticas especiales.</li>
<li>Modifica los valores de los m&aacute;rgenes en la
pesta&ntilde;a <img style="width: 99px; height: 21px;" alt="C&oacute;digo fuente" src="../imagenes/pestanacodigofuente.png">
y
alterna con <img style="width: 103px; height: 20px;" alt="Vista preliminar" src="../imagenes/pestanavistapreliminar.png">
para
comparar los efectos visuales obtenidos.</li>
<li>Selecciona una palabra del primer p&aacute;rrafo
encerr&aacute;ndola entra el delimitador <code>&lt;span&gt;</code>
y su
cierre <code>&lt;/span&gt;</code>.
Apl&iacute;cale al delimitador el
estilo <code>border:thin solid red</code>.</li>
<li>Haz exactamente lo mismo con la palabra anterior o
posterior a la que acabas de trabajar.</li>
<li>Como tienes a la vista el resultado selecciona un grupo de
palabras que incluyan un salto de l&iacute;nea y
enci&eacute;rralas entre <code>&lt;span&gt;</code>
y <code>&lt;/span&gt;</code> para aplicarles el
mismo estilo de antes y ve a
la pesta&ntilde;a&nbsp;<img style="width: 103px; height: 20px;" alt="Vista preliminar" src="../imagenes/pestanavistapreliminar.png">
para comprobar la ausencia
de los bordes al final y al principio de l&iacute;nea.</li>
<li>Si quieres puedes guardar la p&aacute;gina como <strong>actividad92.html</strong></li>
</ul>
</div>
<p>Para poder modificar la apariencia visual disponemos en CSS2
de la posibilidad de alterar el flujo normal especificando la
posici&oacute;n de los elementos. Se trata de una propiedad muy
potente y, aunque podemos aplicarla directamente sobre cualquier
elemento, la recomendaci&oacute;n ser&iacute;a que lo hicieras
creando contenedores de bloque con la etiqueta <code>&lt;div&gt;</code>
y
especificando en
ellos la posici&oacute;n. </p>
<img class="flotder" alt="Capa creada con N|VU" src="imagenes/imagendecapa.png" style="width: 302px; height: 155px;">As&iacute;
pues, antes de ver los valores y los efectos de los mismos comentemos
que N|VU dispone de un icono que nos permite generar una capa, que
no es m&aacute;s que un contenedor en bloque, con una simple
pulsaci&oacute;n sobre el icono <img alt="Icono de capa" style="width: 25px; height: 24px;" src="imagenes/icocapa.png">
que crear&aacute; una capa
vac&iacute;a
que se ir&aacute; rellenando con el contenido que vayamos
tecleando.&nbsp; <br>
<p>Si lo que pretendemos es crear una capa a partir de contenidos
que ya estaban incluidos en la p&aacute;gina basta con que los
se&ntilde;alemos arrastrando y pulsemos el mismo icono para que se
genere el contenedor para englobarlos a todos. Tanto en uno como en
otro caso la capa generada lo es con posici&oacute;n absoluta, por
lo que si lo &uacute;nico que pretend&iacute;amos era insertar
una etiqueta div puede resultar m&aacute;s c&oacute;modo
hacerlo utilizando el selector desplegable de tipo de
p&aacute;rrafo o tecleando las etiquetas de apertura y cierre tras
haber marcado el texto que queremos convertir en div y elegido <span class="refmenu">insertar<img class="imgcentr" style="width: 14px; height: 13px;" alt="submen&uacute;" title="submen&uacute;" src="flechamenu.png">html</span>.&nbsp;</p>
<p>Cuando nos situemos sobre una capa posicionada absolutamente
el programa lo
indicar&aacute; haciendo aparecer sus l&iacute;mites y
modificando el icono de las capas que aparecer&aacute; como <img style="width: 24px; height: 26px;" alt="Icono de capa activa" title="Icono de capa activa" src="imagenes/icocapaactiva.png">.
Podremos moverla de un sitio
a otro si pulsamos sobre <img alt="Tirador para mover capas" title="Tirador para mover capas" style="width: 16px; height: 16px;" src="imagenes/tiradordecapa.png"> y
arrastramos hasta la nueva posici&oacute;n o bien modificar su
tama&ntilde;o utilizanod los tiradores de los v&eacute;rtices y
el centro de los lados. </p>
<p>Para modificar los estilos que afectan a la capa
bastar&aacute; con hacer doble clic sobre su interior y modificar o
a&ntilde;adir las propiedades que necesitemos.</p>
<div class="practicas">
<img style="width: 29px; height: 29px; float: left;" alt="Actividad 93" title="Actividad 93" src="../imagenes/numeracion/noventaytres.gif">
<ul>
<li>Crea una p&aacute;gina nueva con dos
p&aacute;rrafos y selecci&oacute;nalos </li>
<li>Pulsa&nbsp;<img alt="Icono de capa" style="width: 25px; height: 24px;" src="imagenes/icocapa.png">
para
crear una capa que los incluya.</li>
<li>Desplaza la capa hacia otra posici&oacute;n y haz clic
para situar el cursor fuera de la capa.</li>
<li>Pulsa nuevamente&nbsp;<img alt="Icono de capa" style="width: 25px; height: 24px;" src="imagenes/icocapa.png">
para
crear una capa vac&iacute;a y teclea un p&aacute;rrafo para
darle contenido. </li>
<li>Haz un doble clic en el interior de una de las capas y
utiliza la propiedad <code>background-color</code> para
adjudicarle un color de
fondo.</li>
<li>Arrastra la nueva capa de forma que se superponga sobre la
anterior. </li>
<li>Utiliza los iconos <img style="width: 48px; height: 25px;" alt="Iconos para ordenar el apilamiento de capas" title="Iconos para ordenar el apilamiento de capas" src="imagenes/icoordendecapas.png">
para modificar el orden en
que se apilan. Puedes realizar todo el trabajo sobre la
pesta&ntilde;a <img style="width: 103px; height: 20px;" alt="Vista preliminar" src="../imagenes/pestanavistapreliminar.png">,
pero
para ver el efecto deber&aacute;s pulsar sobre una zona fuera de
las capas, de forma que no est&eacute; se&ntilde;alada ninguna
de ellas.</li>
</ul>
</div>
<h3>Posici&oacute;n de un elemento</h3>
<p>Habr&aacute;s comprobado que al crear las capas N|VU ha
introducido unos c&oacute;digos de estilo. Como las hemos movido
hasta situarlas en un punto concreto de la p&aacute;gina ha
utilizado el valor <code>absolute</code> que es uno de
los posibles.&nbsp;En el editor de CSS de N|VU podr&aacute;s
acceder a esta propiedad dentro de la pesta&ntilde;a caja. El tema
del posicionamiento es uno de los de mayor repercusi&oacute;n para
el dise&ntilde;o de p&aacute;ginas con CSS. Puedes consultar
una <a href="absolutamenterelativo.html">ampliaci&oacute;n
de conceptos</a> que te ayudar&aacute; a comprender este tema
en profundidad.</p>
<p><strong>Propiedad</strong>: <code>position</code></p>
<p><strong>Valores:</strong> Esta propiedad
indicar&aacute; la forma de calcular la posici&oacute;n del
elemento utilizando los valores <code>absolute</code>,
<code><strong>relative</strong></code>, <code>fixed</code>
y <code>static</code>, que es el valor por
defecto,&nbsp;pero para completar el c&aacute;lculo
ser&aacute; necesario
a&ntilde;adir luego las propiedades <code>left</code>,
<code>top</code><strong>, </strong><code>bottom</code><strong>
</strong> o <code>right</code>
indicando las distancias en cualquiera de las unidades admitidas
respecto a la caja contenedora. Estas distancias habra que indicarlas
en el editor de CSS de N|VU dentro de la pesta&ntilde;a caja en la
secci&oacute;n desplazamientos.</p>
<div class="ejemplo">
<p><b>Ejemplos:</b> </p>
<p><code>Absolute</code>. <a href="javascript:void(0)" onclick="window.open('muestra14.htm','','statusbar=0,menubar=0,toolbar=0,top=0,left=0,width=690,height=400,resizable=yes')">Ver
ejemplo</a></p>
<p><code>Relative</code>. La posici&oacute;n
relativa se calcula a partir
de la posici&oacute;n que ocupar&iacute;a un elemento si
siguiera el flujo normal. El resto de los elementos no se ajustan a la
posici&oacute;n modificada por lo que puede ocurrir que el elemento
se superponga sobre otros. <a href="javascript:void(0)" onclick="window.open('muestra15.htm','','statusbar=0,menubar=0,toolbar=0,top=0,left=0,width=760,height=350,scrollbars=auto,resizable=yes')">Ver
ejemplo</a></p>
<p><code>Fixed</code>. Se trata de una variante de la
posici&oacute;n
absoluta cuyo efecto es similar al de las im&aacute;genes de fondo
que se mantienen en una posici&oacute;n fija independientemente del
desplazamiento de la p&aacute;gina. Cuando se aplican a un medio
impreso, formando algo similar a una cabecera, se repiten en todas las
p&aacute;ginas. <a href="javascript:void(0)" onclick="window.open('muestra16.htm','','statusbar=0,menubar=0,toolbar=0,top=0,left=0,width=760,height=350')">Ver
ejemplo</a></p>
<p><code>Static</code>
es el valor por defecto y no produce ninguna modificaci&oacute;n en
el posicionamiento del elemento, por lo que su misi&oacute;n puede
ser m&aacute;s bien la de restablecer el flujo de la
p&aacute;gina despu&eacute;s de haber situado alg&uacute;n
elemento posicionado. </p>
</div>
<div class="avisos"><img style="width: 28px; height: 25px;" alt="Atenci&oacute;n" src="../imagenes/atencion.gif">Internet Explorer
6&nbsp;no soporta la posici&oacute;n <code>fixed. </code>Para
poder utilizarla y que se vea en este navegador hay que aplicar un
parche que veremos en la secci&oacute;n de recursos.</div>
<h3>Visibilidad</h3>
<p>Como el nombre de la propiedad sugiere se refiere a la
posibilidad de hacer que un elemento resulte visible o invisible. Su
utilidad reside en la combinaci&oacute;n con scripts que permitan
mostrar u ocultar capas al realizar determinadas acciones con el
rat&oacute;n, pero este tema excede los contenidos de este curso,
aunque puedes realizar alguna b&uacute;squeda sobre "javascript
para mostrar y ocultar capas" para encontrar referencias.&nbsp;En
el editor de CSS de N|VU podr&aacute;s
acceder a esta propiedad dentro de la pesta&ntilde;a caja.</p>
<p><strong>Propiedad:</strong> <code>visibility</code>
</p>
<p><strong>Valores: </strong>Visible<strong> </strong>
que es el
valor por defecto o <code>hidden</code> para ocultarla</p>
<p><strong>Ejemplos:</strong> Ver el
c&oacute;digo del ejemplo</p>
<ul>
<li><a href="javascript:void(0)" onclick="window.open('muestra17.htm','','statusbar=0,menubar=0,toolbar=0,top=0,left=0,width=450,height=250')">Ver
un ejemplo en funcionamiento </a><br>
&nbsp; </li>
<li><a href="javascript:void(0)" onclick="window.open('muestra18.htm','','statusbar=0,menubar=0,toolbar=0,scrollbar=1,top=0,left=0,width=800,height=630,resizable=yes')">Ver
el c&oacute;digo</a><br>
&nbsp; </li>
</ul>
<h2>Recortes</h2>
<p>Tenemos la posibilidad de "encerrar" un elemento dentro de un
recuadro con unas dimensiones determinadas. El resto del contenido
quedar&aacute; recortado y no
se mostrar&aacute;. Esta propiedad no est&aacute; incluida en
el editor CSS de N|VU por lo que habr&aacute; que insertar el
c&oacute;digo manualmente. </p>
<p><strong>Propiedad:</strong> <code>clip</code>
</p>
<p><strong>Valores: </strong>Para definir la zona de
recorte estableceremos las coordenadas de un rect&aacute;ngulo que
har&aacute; de ventana visible del documento. Los valores que se
aplican indican la posici&oacute;n de los v&eacute;rtices
superior izquierdo, superior derecho,
inferior derecho&nbsp;e inferior izquierdo respecto a los bordes
superior e izquierdo del contenedor en el que se encuentra la
imagen, y se anotan en la forma <code>rect (valor, valor,
valor, valor)</code>donde el primer valor sirve para calcular la
distancia hasta el borde superior, el segundo la distancia de ese
v&eacute;rtice hasta el borde izquierdo, el tercero se calcula de
nuevo respecto al borde superior y el &uacute;ltimo se calcula
respecto al borde izquierdo y sirve para determinar la distancia del
&uacute;ltimo vertice (y tambi&eacute;n del primero del que
s&oacute;lo conoc&iacute;amos su distancia al borde superior)<strong>&nbsp;
<a href="javascript:void(0)" onclick="window.open('muestra19.htm','','statusbar=0,menubar=0,toolbar=0,top=0,left=0,width=790,height=450')">Ver
ejemplo</a></strong></p>
<div class="avisos"><img style="width: 28px; height: 25px;" alt="Atenci&oacute;n" src="../imagenes/atencion.gif">Internet Explorer
6&nbsp;no soporta la propiedad <code>clip.&nbsp;</code></div>
<p>
</p>
<h3>&nbsp;Desbordamiento</h3>
<p>&iquest;Qu&eacute; ocurre cuando definimos unas
dimensiones exactas para un elemento y el contenido del mismo desborda
los l&iacute;mites establecidos? Depender&aacute; de los
valores que adopte la propiedad que controla el
desbordamiento.&nbsp;En
el editor de CSS de N|VU podr&aacute;s
acceder a esta propiedad dentro de la pesta&ntilde;a caja.</p>
<p><strong>Propiedad:</strong> <code>overflow</code>
</p>
<p><strong>Valores: </strong>Si no se especifica
valor de <code>overflow</code> los navegadores
utilizar&aacute;n <code>visible</code>
como valor por defecto. Los valores posibles son:</p>
<ul>
<li><code>Visible</code>: Se desprecia la
altura establecida, ampli&aacute;ndola hasta el tama&ntilde;o
necesario para que se pueda mostrar todo el contenido. Hay una
diferencia importante en el modo de realizar este ajuste
autom&aacute;tico de la altura: Internet Explorer desplaza hacia
abajo el resto de los elementos, mientras que Mozilla, Konqueror o
Gale&oacute;n hacen la ampliaci&oacute;n pero mantienen la
referencia de la altura original para mostrar los siguientes elementos,
con lo que el resultado es que el contenido del elemento que se
autoamplia se superpone al de los siguientes.<br>
</li>
<li><code>Hidden</code>: Se recorta el
contenido mostrando lo que cabe en las dimensiones establecidas, pero
no se muestran barras de desplazamiento para poder acceder al resto del
contenido <br>
</li>
<li><code>Scroll</code><strong>:</strong>
Se incorporan al
bloque barras de desplazamiento horizontal y vertical, incluso si no
son necesarias porque el contenido ocupe menos espacio que el
establecido en las dimensiones del elemento. Igual que en el caso
anterior se recorta el contenido, pero ahora s&iacute; que podremos
visualizarlo al disponer de barras de desplazamiento. <br>
</li>
<li><code>Auto</code><strong>:</strong>
Si el contenido no puede
mostrarse completo en las dimensiones marcadas se incorpora una barra
de desplazamiento vertical para poder acceder a lo que no queda
visible. Si existe alg&uacute;n elemento que desborde las
dimensiones horizontales tambi&eacute;n se incluir&iacute;a una
barra de desplazamiento horizontal. </li>
</ul>
<p><a href="javascript:void(0)" onclick="window.open('muestra20.htm','','statusbar=0,menubar=0,toolbar=0,top=0,left=0,width=690,height=700')">Ver
ejemplo </a></p>
<h3> Alineamiento vertical </h3>
<p>Es una propiedad que tiene su principal aplicaci&oacute;n
para las im&aacute;genes, cosa que ya se pod&iacute;a hacer con
HTML, pero puede aplicarse a cualquier elemento en
l&iacute;nea.&nbsp;Esta propiedad no est&aacute; incluida
en
el editor CSS de N|VU por lo que habr&aacute; que insertar el
c&oacute;digo manualmente.</p>
<p><strong>Propiedad:</strong> <code>vertical-align</code></p>
<p><strong>Valores y ejemplos: </strong></p>
<p>Se utiliza la imagen <img src="../imagenes/atencion.gif" height="25" width="28"> para
mostrar el efecto de cada valor </p>
<ul>
<li><code>baseline</code><strong> </strong>
el elemento
afectado alinea su borde inferior con el borde inferior del elemento
padre. <strong><img src="../imagenes/atencion.gif" alt=" " style="vertical-align: baseline;" height="25" width="28"></strong></li>
<li><strong> </strong><code>sub</code><strong>
</strong>el elemento afectado
alinea su borde inferior como si fuera un sub&iacute;ndice<strong><img src="../imagenes/atencion.gif" alt=" " style="vertical-align: sub;" height="25" width="28"></strong></li>
<li><strong> </strong><code>super</code><strong>
</strong>el elemento afectado
alinea su borde inferior como si fuera un super&iacute;ndice <img src="../imagenes/atencion.gif" alt=" " style="vertical-align: super;" height="25" width="28"></li>
<li><strong> </strong><code>top</code><strong>
</strong>el elemento afectado
alinea su borde superior con el borde superior del elemento
m&aacute;s alto de la l&iacute;nea, independientemente de que
sea <span class="grande">texto</span> o imagen<img src="../imagenes/flechaarriba.gif" height="29" width="29">
<strong><strong><img src="../imagenes/atencion.gif" style="vertical-align: top;" alt=" " height="25" width="28"></strong></strong></li>
<li><code> text-top</code><strong> </strong>el
elemento
afectado alinea su borde superior con el borde superior de la fuente
base del elemento padre<strong> </strong>(n&oacute;tese
que no toma en cuenta las modificaciones del <span class="muygrande">tama&ntilde;o</span>
<strong><strong><img src="../imagenes/atencion.gif" style="vertical-align: text-top;" alt=" " height="25" width="28"></strong></strong>de
la fuente) </li>
<li><strong> </strong><code>middle</code><strong>
</strong>el elemento afectado
alinea su l&iacute;nea central con con medio del elemento padre <strong><strong><img src="../imagenes/atencion.gif" alt=" " style="vertical-align: middle;" height="25" width="28"></strong></strong></li>
<li><code>bottom</code><strong> </strong>el
elemento afectado
alinea su borde inferior con el elemento m&aacute;s <span class="grande">bajo</span> de la l&iacute;nea<strong>
<strong><img src="../imagenes/atencion.gif" alt=" " style="vertical-align: bottom;" height="25" width="28"></strong></strong>(en
este caso se toma en cuenta la modificaci&oacute;n de
tama&ntilde;o de la fuente que ha desplazado el borde inferior de
la letra j) </li>
<li><code> text-bottom</code> el elemento
afectado alinea su borde inferior con el borde inferior de la fuente
base del elemento padre (n&oacute;tese que no toma en cuenta el
elemento m&aacute;s <span class="muygrande">bajo</span>)
<img src="../imagenes/atencion.gif" alt=" " style="vertical-align: text-bottom;" height="25" width="28"></li>
<li><code> longitud</code> expresada en
cualquiera de las unidades v&aacute;lidas, tomando como referencia
el borde inferior del elemento afectado e indicadas en positivo (.3cm)<img src="../imagenes/atencion.gif" style="vertical-align: 0.3cm;" height="25" width="28"> o en negativo (-10px)<strong>
<img src="../imagenes/atencion.gif" alt=" " style="vertical-align: -10px;" height="25" width="28"></strong></li>
<li><code> porcentaje</code><strong> </strong>
donde la
posici&oacute;n 0% <strong><img src="../imagenes/atencion.gif" alt=" " style="vertical-align: 0%;" height="25" width="28"></strong>equivaldr&iacute;a
a <code>baseline</code>, pudiendo expresarlo en negativo
(-50%)<strong><img src="../imagenes/atencion.gif" style="vertical-align: -50%;" height="25" width="28"></strong>o
positivo
(100%)<strong><img src="../imagenes/atencion.gif" alt=" " style="vertical-align: 100%;" height="25" width="28"></strong></li>
</ul>
<h3>Apariencia del cursor</h3>
<p>El navegador modifica de forma autom&aacute;tica la forma
en que muestra el cursr&nbsp;en funci&oacute;n de la
posici&oacute;n del rat&oacute;n sobre
los elementos de la p&aacute;gina, pero tambi&eacute;n podemos
especificarlo mediante estilos.&nbsp;Esta propiedad no
est&aacute; incluida
en
el editor CSS de N|VU por lo que habr&aacute; que insertar el
c&oacute;digo manualmente.</p>
<p><strong>Propiedad:</strong> <code>cursor</code></p>
<p><strong>Valores y ejemplos: </strong>Pasando el
rat&oacute;n sobre cada uno de los valores ver&aacute;s cambiar
el cursor de acuerdo a cada uno de ellos: <code><span style="cursor: crosshair;">crosshair,</span><span style="cursor: default;">default</span>, <span style="cursor: pointer;">pointer</span>, <span style="cursor: move;">move</span>, <span style="cursor: e-resize;">e-resize</span>, <span style="cursor: ne-resize;">ne-resize,</span> <span style="cursor: nw-resize;">nw-resize</span>, <span style="cursor: n-resize;">n-resize</span>, <span style="cursor: se-resize;">se-resize</span>, <span style="cursor: sw-resize;">sw-resize</span>, <span style="cursor: s-resize;">s-resize</span>, <span style="cursor: w-resize;">w-resize</span>, <span style="cursor: text;">text</span>, <span style="cursor: wait;">wait</span>, <span style="cursor: help;">help</span></code>
. </p>
<h3>Apilar capas</h3>
<p>Adem&aacute;s de poder colocar las capas en la
posici&oacute;n que se desee, tambi&eacute;n se puede decidir
el orden en el que se ir&aacute;n apilando, de forma que unas zonas
se superpongan a otras. Esta propiedad s&oacute;lo puede aplicarse
a capas que tengan establecido el atributo position.&nbsp;En
el editor de CSS de N|VU podr&aacute;s
acceder a esta propiedad dentro de la pesta&ntilde;a caja.</p>
<p><strong>Propiedad:</strong> <code>z-index</code></p>
<p><strong>Valor:</strong> Se aplican valores
num&eacute;ricos, de forma que un valor m&aacute;s alto indica
que el elemento est&aacute; por encima de los dem&aacute;s que
tengan valor m&aacute;s bajo o que no tengan establecida propiedad
de profundidad</p>
<div class="ejemplo" id="ejemploapilarcapas">
<p><strong>Ejemplo:</strong></p>
<div id="rosa" style="border: thin solid rgb(0, 51, 102); position: relative; background-color: rgb(255, 204, 204); width: 220px; height: 200px; z-index: 1;">
<div id="naranja" style="border: thin solid rgb(255, 170, 102); position: absolute; margin-left: 40px; margin-top: 40px; background-color: rgb(255, 221, 119); width: 340px; height: 170px; z-index: 2;"></div>
</div>
<div class="codigo2" style="position: relative; top: -150px; z-index: 3;">
<p><code>&lt;div id="salmon" style="position:relative;
background-color: rgb(255, 204, 204); border: thin solid rgb(0, 51,
102); width:220px;
height:200px; z-index:1"&gt;<br>
<br>
&lt;div id="naranja" style="position:absolute; margin-left:40px;
margin-top: 40px; background-color: rgb(255, 221, 119); border: thin
solid rgb(255, 170, 102);
width:340px; height:170px; z-index:2"&gt;&lt;/div&gt;<br>
&lt;/div&gt; </code>
<br>
</p>
</div>
</div>
<p>&nbsp;</p>
<div class="practicas">
<img style="width: 29px; height: 29px; float: left;" alt="Actividad 94" title="Actividad 94" src="../imagenes/numeracion/noventaycuatro.gif">
<ul>
<li>Experimenta con las propiedades para el dise&ntilde;o
visual con CSS e incorpora aquellas que necesites a tus documentos o a
tu hoja de estilo.</li>
</ul>
</div>
</div>
</body>
</html>

825
html2005/estilos/css2.html Normal file
View File

@@ -0,0 +1,825 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="es-es">
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>CSS - Primeros pasos</title>
<link rel="stylesheet" href="../nvu2005.css" type="text/css">
<!-- compliance patch for microsoft browsers --><!--[if lt IE 7]> <script src="../ie7/ie7-standard-p.js" type="text/javascript"></script> <![endif]-->
<link rel="stylesheet" href="css3.css" type="text/css">
</head>
<body>
<div id="localizador">
<p>Estilos&gt;&gt;Primeros pasos</p>
</div>
<div id="flechadcha">
<a href="css3.html" title="avanzar"><img src="../Images/flechadcha.gif" border="0"></a>
</div>
<div id="flechaizq">
<a href="css1.html" title="retroceder"><img src="../Images/flechaizq.gif" border="0"></a>
</div>
<div id="contenido">
<p>Para introducirnos en el mundo de las CSS iremos presentando
la informaci&oacute;n en&nbsp;peque&ntilde;os bloques,
acompa&ntilde;ados de un ejemplo que muestre el resultado. En
muchos casos les seguir&aacute; una pr&aacute;ctica muy simple
que permita aplicar lo expuesto. La&nbsp;recomendaci&oacute;n
es que vayas paso a paso y que, en cuanto tengas cierta seguridad,
experimentes ampliando el ejercicio propuesto con elementos similares
intentando prever los resultados que vas a obtener. Si lo haces
as&iacute; es posible que en alg&uacute;n momento te encuentres
con que no todo sale como pretentes, pero no te preocupes porque lo
m&aacute;s probable es que algo m&aacute;s adelante encuentres
la respuesta al problema que se te ha planteado.&nbsp;</p>
<h2>Sintaxis b&aacute;sica </h2>
<p>La sintaxis general de cualquier declaraci&oacute;n de
estilo, va a
estar compuesta por tres elementos:</p>
<p class="resaltadocentro">selector
{propiedad:valor} </p>
<p>donde selector va a ser, b&aacute;sicamente, el elemento
html que deseamos definir, la propiedad el atributo que queremos
modificar, apareciendo por &uacute;ltimo el valor que deseamos
asignarle al atributo. La propiedad se separa del atributo mediante dos
puntos y ambos se encierran entre llaves. Aunque no es imprescindible
cuando s&oacute;lo hay una propiedad es conveniente
a&ntilde;adir un punto y coma al final de cada par
propiedad / valor (nos ser&aacute; muy &uacute;til para
facilitar la
lectura cuando se vayan complicando algo m&aacute;s las
especificaciones ya que entonces s&iacute; que es necesario
utilizar el punto y coma como separador)</p>
<div>
<p class="avisos">Cuando los
valores requieren especificar un tipo de unidad, esta se indica a
continuaci&oacute;n del valor num&eacute;rico, sin espacio de
separaci&oacute;n: 1cm ser&iacute;a una notaci&oacute;n
correcta, mientras que 1 cm no lo ser&iacute;a.</p>
</div>
<h2>El editor CSS de N|VU</h2>
<p>Ver&aacute;s que constantemente se har&aacute;
referencia a&nbsp;los c&oacute;digos con los que se obtiene un
determinado efecto. Es conveniente que te vayas familiarizando con
ellos, pero al principio te resultar&aacute; de gran ayuda la
utilizaci&oacute;n del editor de estilos que integra N|VU, al que
puedes acceder desde la opci&oacute;n de men&uacute; <span class="refmenu">herramientas <img src="../imagenes/flechamenu.png" height="13" width="14">
editor css</span></p>
<p><a href="javascript:void(0)" onclick="window.open('presentaciondeleditordecss.swf','','statusbar=0,menubar=0,toolbar=0,top=0,left=0,width=880,height=443')">Ver v&iacute;deo de ejemplo</a> </p>
<p>
</p>
Aunque posteriormente veremos otras formas m&aacute;s eficientes
vamos a empezar a familiarizarnos con el editor mediante la
creaci&oacute;n de hojas de estilo internas para lo que seguiremos
estos pasos </p>
<ol>
<li>Pulsar el bot&oacute;n style</li>
<li>Crear hoja de estilo</li>
<li>Pulsar <span class="refmenu">regla</span></li>
<li>Indicar la clase, tipo o identificador. Para que la regla
afecte a un elemento html habr&aacute; que poner su nombre, sin los
&aacute;ngulos.</li>
<li>Pulsar <span class="refmenu">crear regla de
estilo</span></li>
<li>Utilizar las pesta&ntilde;as para indicar los atributos
y valores aplicables.</li>
</ol>
<div class="practicas">
<img class="numact" style="width: 29px; height: 29px; float: left;" alt="Actividad 76" title="Actividad 76" src="../imagenes/numeracion/setentayseis.gif">
<ul>
<li>Carga en el
editor la p&aacute;gina <a href="quijote1.html" target="_blank">quijote1.html</a></li>
<li>Utliza el Editor CSS para crear una&nbsp;nueva hoja de
estilo.</li>
<li>Pasa a la vista&nbsp;<img style="width: 99px; height: 21px;" alt="C&oacute;digo fuente" src="../imagenes/pestanacodigofuente.png"> para comprobar
c&oacute;mo se han creado&nbsp;en la secci&oacute;n
&lt;head&gt; un par de selectores para englobar las reglas de
estilos que iremos creando. Gu&aacute;rdalo como <strong>actividad76.html</strong></li>
</ul>
</div>
<h2>Selectores de tipos</h2>
<p>El selector m&aacute;s sencillo es el que denominamos de
tipo. Se refiere a una etiqueta definida en el lenguaje HTML. Su gran
ventaja ser&aacute; que con una &uacute;nica
modificaci&oacute;n en una hoja de estilos podremos modificar la
apariencia de todos las p&aacute;ginas de un sitio al variar la
presentaci&oacute;n de un determinado tipo.</p>
<p class="ejempcss">Ej: body {color:white}</p>
<p>Para cada selector podremos establecer m&aacute;s de una
propiedad. Para
separarlas utilizaremos el punto y coma, siendo habitual para favorecer
la legibilidad, que cada propiedad se escriba en un rengl&oacute;n.</p>
<p><a href="javascript:void(0)" onclick="window.open('muestra1.htm','','statusbar=0,menubar=0,toolbar=0,top=0,left=0,width=680,height=200')">Ver
ejemplo&nbsp;</a></p>
<div class="practicas">
<img class="numact" style="width: 29px; height: 29px; float: left;" alt="Actividad 77" title="Actividad 77" src="../imagenes/numeracion/setentaysiete.gif">
<ul>
<li>Si lo hab&iacute;as cerrado vuelve a abrir el
archivo&nbsp;<strong>actividad76.html</strong></li>
<li>Crea una
regla para que los p&aacute;rrafos se presenten
en color azul marino.</li>
<li>Cierra el editor CSS y comprueba el resultado.</li>
<li>Aprovecha la visualizaci&oacute;n para hacer que el
texto
Primera Parte se convierta
en un t&iacute;tulo de tipo <code>h1</code> y el
t&iacute;tulo del
Cap&iacute;tulo 1 en un <code>h2</code>.</li>
<li>Mira en la pesta&ntilde;a&nbsp;<img style="width: 99px; height: 21px;" alt="C&oacute;digo fuente" src="../imagenes/pestanacodigofuente.png">
c&oacute;mo se ha definido la regla para los p&aacute;rrafos</li>
<li>Vuelve al editor de estilos y haz que el p&aacute;rrafo
est&eacute; justificado y con letra de la familia sans-serif
(tendr&aacute;s que hacer doble clic&nbsp;sobre la hoja de
estilo para que se desplieguen los selectores y poder elegir el que
hemos creado ).</li>
<li>Crea una regla para que los t&iacute;tulos&nbsp;<code>h1</code>
se presenten
en fuente sans-serif y color granate y otra para que los&nbsp;<code>h2</code>
sean
tambi&eacute;n sans-serif pero en color gris de intensidad media.</li>
<li>Comprueba en la pesta&ntilde;a&nbsp;<img style="width: 99px; height: 21px;" alt="C&oacute;digo fuente" src="../imagenes/pestanacodigofuente.png">
c&oacute;mo han quedado definidos los estilos</li>
<li>Guarda el trabajo como <strong>actividad77.html</strong></li>
</ul>
</div>
<h2>Selector universal</h2>
<p>Se representa mediante el asterisco (*) y se refiere a
cualquier elemento del documento HTML.&nbsp;Su
utilizaci&oacute;n est&aacute; muy relacionada con las clases y
selectores ID, pero suele omitirse.</p>
<h2>Agrupando selectores </h2>
<p>Si queremos aplicar una propiedad com&uacute;n a varios
selectores sin
necesidad de tener que definirla en cada caso podemos agruparlos
list&aacute;ndolos separados por comas y haciendo una
definici&oacute;n com&uacute;n para
todos ellos.</p>
<p class="ejempcss">Ej.: h1,h2,h3 {color:blue}</p>
<p><a href="javascript:void(0)" onclick="window.open('muestra2.htm','','statusbar=0,menubar=0,toolbar=0,top=0,left=0,width=680,height=290')">Ver
ejemplo</a></p>
<div class="practicas"><img class="numact" style="width: 29px; height: 29px; float: left;" alt="Actividad 78" title="Actividad 78" src="../imagenes/numeracion/setentayocho.gif">
<ul>
<li>Vuelve al archivo&nbsp;<strong>actividad77.html</strong>
que recoge los &uacute;ltimos pasos que hemos dado.</li>
<li>Crea una regla que agrupe&nbsp;<code>h1</code>
y&nbsp;<code>h2</code> para especificar que deben
llevar&nbsp;el tipo de letra de la familia sans-serif.</li>
<li>Borra este atributo en cada una de las reglas individuales
para&nbsp;<code>h1</code> y&nbsp;<code>h2</code></li>
<li>Comprueba que ambos t&iacute;tulos siguen
present&aacute;ndose con la fuente que hemos
seleccionado.&nbsp;</li>
<li>Guarda este nuevo paso como <strong>actividad77.html</strong></li>
</ul>
</div>
<h2>Selectores contextuales</h2>
<p><img class="flotizq" style="width: 500px; height: 443px;" alt="Ejemplo esquem&aacute;tico de relaciones de herencia en una pagina html" title="Ejemplo esquem&aacute;tico de relaciones de herencia en una pagina html" src="documentohtml.png"></p>
<p>La imagen que aparece a la izquierda corresponde a un ejemplo
esquem&aacute;tico de la organizaci&oacute;n de los elementos
en una
p&aacute;gina html.</p>
<p>Se puede observar c&oacute;mo determinados elementos se
encuentran "anidados" dentro de otros.</p>
<p>Esta situaci&oacute;n genera unas relaciones que pueden
calificarse
de familiares (de hecho, la nomenclatura para indicarlas
utilizar&aacute; los t&eacute;rminos padre, hijo, ascendiente y
descendiente entre otros).</p>
<p>Vamos a ver a continuaci&oacute;n algunos ejemplos de lo
que
significa esta jerarqu&iacute;a en la organizaci&oacute;n de
los
elementos de una p&aacute;gina html para lo que
podremos&nbsp;guiarnos
por el
siguiente
esquema de relaciones:</p>
<p>&nbsp;<br clear="all">
</p>
<table style="text-align: left; width: 100%;" border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<th>Relaci&oacute;n</th>
<th>Descripci&oacute;n</th>
</tr>
<tr>
<td>Un elemento es <strong>padre</strong> de
otro si...</td>
<td>El segundo elemento se encuentra directamente entre la
apertura y el cierre de las etiquetas del elemento padre.<br>
Ej: <code>&lt;p&gt;Los
&lt;strong&gt;rumiantes&lt;/strong&gt; son
&lt;em&gt;mam&iacute;feros&lt;/em&gt;</code><br>
El elemento <code>&lt;p&gt;</code> es padre de <code>&lt;strong&gt;</code>
y de <code>&lt;em&gt;</code></td>
</tr>
<tr>
<td>Un elemento es <strong>hijo</strong> de
otro si...</td>
<td>La relaci&oacute;n anterior es
rec&iacute;proca, por lo que
los elementos&nbsp;<code>&lt;strong&gt;</code>
y&nbsp;<code>&lt;em&gt;</code>&gt; del
ejemplo
son hijos del
elemento&nbsp;<code>&lt;p&gt;</code></td>
</tr>
<tr>
<td>Un elemento es <strong>ascendiente</strong>
de otro si...</td>
<td>Si el segundo se encuentra entre las etiquetas de
apertura y cierre del primero (aunque sea de forma indirecta). <br>
Ej: <code>&lt;div&gt;<br>
&lt;p&gt;Los
&lt;strong&gt;rumiantes&lt;/strong&gt; son
&lt;em&gt;mam&iacute;feros&lt;/em&gt;<br>
&lt;/div&gt;</code><br>
El elemento <code>&lt;div&gt;</code> es
ascendiente&nbsp; de&nbsp;<code>&lt;p&gt;</code>
de&nbsp;<code>&lt;strong&gt;</code> y de<code>
&lt;em&gt;</code></td>
</tr>
<tr>
<td>Un elemento es <strong>descendiente</strong>
de otro si...</td>
<td>Est&aacute; incluido, directa o indirectamente,
dentro de
otro elemento. En el ejemplo anterior&nbsp;<code>&lt;em&gt;</code>
es
desdendiente de&nbsp;<code>&lt;p&gt;</code> y
tambi&eacute;n de&nbsp;<code>&lt;div&gt;</code></td>
</tr>
<tr>
<td>Un elemento es <strong>adyacente</strong>
a otro si ... </td>
<td>Comparte el mismo padre y, adem&aacute;s se
encuentra inmediatamente consecutivo al anterior.<br>
Ej: <code>&lt;p&gt;Los
&lt;strong&gt;ungulados&lt;/strong&gt; son
&lt;em&gt;mam&iacute;feros&lt;/em&gt; con
&lt;em&gt;pezu&ntilde;as&lt;/em</code>&gt;<br>
En este ejemplo s&oacute;lo el primer&nbsp;<code>&lt;em&gt;</code>
ser&iacute;a adyacente a&nbsp;<code>&lt;strong&gt;</code>
ya que el segundo,
aunque tiene el mismo padre ya no es inmediatamente posterior.</td>
</tr>
</tbody>
</table>
<p>Los patrones para indicar estas relaciones para elaborar los
selectores ser&iacute;an los siguientes:</p>
<table style="text-align: left; width: 100%;" border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<th>Patr&oacute;n</th>
<th>Utilizaci&oacute;n</th>
</tr>
<tr>
<th>x y</th>
<td>Para apuntar hacia cualquier&nbsp;elemento del tipo
y que sea&nbsp;<strong>descendiente</strong> de un
elemento del tipo x </td>
</tr>
<tr>
<th>x&nbsp;&gt; y</th>
<td>Para referirnos a&nbsp;cualquier&nbsp;elemento
del tipo y que sea <strong>hijo</strong> de&nbsp;un
elemento del tipo x </td>
</tr>
<tr>
<th>x + y </th>
<td>Para identificar cualquier&nbsp;elemento del tipo y
que sea <strong>adyacente</strong> a&nbsp;un elemento
del tipo x</td>
</tr>
</tbody>
</table>
<p>Teniendo en cuenta estas relaciones podemos realizar una
selecci&oacute;n muy espec&iacute;fica de elementos del
documento para
aplicarles un determinado estilo. Podr&iacute;amos, por ejemplo,
querer que
los fragmentos que estuvieran enfatizados mediante la etiqueta
&lt;em&gt; aparecieran en color verde. Pero
podr&iacute;amos ser incluso m&aacute;s
espec&iacute;ficos indicando que s&oacute;lo queremos que
aparezcan en color verde
los fragmentos enfatizados que formen parte de una lista. Esto lo
har&iacute;amos colocando primero el selector li y, a
continuaci&oacute;n separado
por un espacio, el selector em para luego especificar las propiedades</p>
<p class="ejempcss"> Ej.:<code> li em {color: green}</code></p>
<p><a href="javascript:void(0)" onclick="window.open('muestra4.htm','','statusbar=0,menubar=0,toolbar=0,top=0,left=0,width=750,height=465')">Ver
ejemplo </a></p>
<div class="avisos"><strong>Advertencia importante:</strong>
La&nbsp;versi&oacute;n 6 de Internet Explorer s&oacute;lo
es capaz de interpretar&nbsp; correctamente el selector
contextual que utilizamos para apuntar hacia un
descendiente. Aunque posteriormente veremos alguna forma de corregir
este error tenlo en cuenta si intentas crear alg&uacute;n selector
para elementos hijos o adyacentes, que s&iacute;
funcionar&aacute;n correctamente en los navegadores Mozilla,
Firefox u Opera.</div>
<div class="practicas">
<img class="numact" style="width: 29px; height: 29px; float: left;" alt="Actividad 79" title="Actividad 79" src="../imagenes/numeracion/setentaynueve.gif">
<ul>
<li>Abre en NlVU
archivo <a href="licenciacc.html" target="_blank">licenciacc.html</a></li>
<li><span style="color: rgb(255, 0, 0); font-weight: bold;"></span>Crea
una regla para&nbsp;que todas los t&eacute;rminos enfatizados
con &lt;em&gt; aparezcan en color azul&nbsp;</li>
<li>Crea otra regla para que los elementos &lt;em&gt;
que se encuentren dentro de un item de una lista se muestren en
negrita.&nbsp;</li>
<li>&iquest;Te animas a crear una regla para que los
elementos &lt;em&gt; adyacentes a otro elemento
&lt;em&gt; se muestren de color rojo</li>
<li>Guarda el trabajo como <strong>actividad79.html</strong></li>
</ul>
</div>
<h2>Selectores basados en atributos</h2>
<p>Si la posibilidad de utilizar selectores contextuales aporta
una gran flexibilidad, todav&iacute;a es mucho mayor la que nos
brinda la posibilidad de decidir que un estilo se aplicar&aacute; a
aquellos elementos que cumplan determinados atributos.</p>
<table style="text-align: left; width: 100%;" border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<th>Patr&oacute;n</th>
<th>Utilizaci&oacute;n</th>
</tr>
<tr>
<th>x[atributo]</th>
<td>Para apuntar hacia cualquier&nbsp;elemento del tipo
x que cuente con un determinado atributo (independientemente del valor
que tenga el atributo) </td>
</tr>
<tr>
<th>x[atributo="valor"]</th>
<td>Para referirse a cualquier&nbsp;elemento del tipo x
que cuente con un
determinado atributo cuyo valor sea el especificado </td>
</tr>
<tr>
<th>x[atributo~="valor"] </th>
<td>Algunos elementos pueden admitir varios valores
separados por espacios para un atributo. Este patr&oacute;n nos
sirve para identificar a&nbsp;cualquier&nbsp;elemento
del tipo x que cuente con un
determinado atributo alguno de cuyos valores sea el especificado.</td>
</tr>
</tbody>
</table>
<div class="avisos">Al igual que ocurr&iacute;a en el
caso de los selectores
contextuales no existe soporte para este tipo de selectores en las
versiones iguales o inferiores a la 6 de Internet Explorer.<br>
</div>
<div class="practicas">
<img class="numact" style="width: 29px; height: 29px; float: left;" alt="Actividad 80" title="Actividad 80" src="../imagenes/numeracion/ochenta.gif">
<ul>
<li>Abre el archivo&nbsp;<a href="selectoresporatributo.html" target="_blank">selectoresporatributo.html</a></li>
<li><span style="color: rgb(255, 0, 0); font-weight: bold;"></span>Crear
una hoja de estilo con una regla para&nbsp;que todos los elementos
que
incluyan el atributo <code>face</code> en la etiqueta <code>font</code>
se muestren en negrita.</li>
<li>A&ntilde;ade una regla para que aquellos elementos que
tengan el valor <code>Courier</code> como atributo
&uacute;nico de&nbsp;<code>face</code> se
muestren en it&aacute;lica.</li>
<li>Por fin una tercera regla que haga que los que tengan,
entre
otros,
el valor <code>serif</code> en el atributo&nbsp;<code>face</code>
se muestren en color verde.<br>
</li>
<li>Comprueba visualmente los resultados. Recuerda que,
mientras
no
apliquemos un parche, Internet Explorer ser&aacute; incapaz de
aplicar
estos selectores.</li>
</ul>
</div>
<h2>Clases </h2>
<p>El selector class nos permite definir diferentes estilos para
el mismo elemento HTML. El ejemplo siguiente supondr&iacute;a la
posibilidad de tener dos tipos de p&aacute;rrafo en el documento:
uno en azul y otro en rojo, en funci&oacute;n de la clase que cada
uno lleve indicada. Para establecer la clase a&ntilde;adimos un
punto y el nombre que le adjudicamos a la clase a
continuaci&oacute;n del selector y antes de iniciar las propiedades.</p>
<p class="ejempcss">Ej.:<code> p.azul {color: blue}
p.rojo
{color: red}</code></p>
<p><a href="javascript:void(0)" onclick="window.open('muestra3.htm','','statusbar=0,menubar=0,toolbar=0,top=0,left=0,width=780,height=370')">Ver
ejemplo </a></p>
<div class="avisos">
<p>Se puede aplicar m&aacute;s de una
clase&nbsp;a un elemento html. Al aplicar las clases lo haremos
separ&aacute;ndolas por un espacio.</p>
<p class="ejempcss">Ej.: &lt;p class="azul
centrado"&gt;Texto&lt;/p&gt;</p>
</div>
<p>Es muy frecuente que la definici&oacute;n de las clases se
haga sin
ligarlas a una etiqueta concreta. En el ejemplo anterior
podr&iacute;a
omitirse la referencia al elemento p y eso har&iacute;a que las
caracter&iacute;sticas de la clase se aplicaran a cualquier
elemento al que se
le aplicara. En este caso el selector empieza con un punto seguido del
nombre de la clase.&nbsp; </p>
<p class="ejempcss">Ej.: <code>.azul {color: blue}
.rojo {color:
red}</code></p>
<p class="ejempcss"><code>El efecto ser&aacute;
equivalente
si se utiliza el selector universal: *.azul {color: blue} *.rojo
{color:
red}</code> </p>
<p><a href="javascript:void(0)" onclick="window.open('muestra5.htm','','statusbar=0,menubar=0,toolbar=0,top=0,left=0,width=780,height=428')">Ver
ejemplo</a></p>
<p>Para crear una regla de tipo clase en el editor de CSS
utilizaremos la opci&oacute;n <span class="refmenu">estilo
con nombre </span>y escribiremos el nombre sin precederlo con el
punto (el programa se encargar&aacute; de ello).</p>
<p class="centrado"><img style="width: 491px; height: 135px;" alt="Crear una clase con el editor de CSS" title="Crear una clase con el editor de CSS" src="imagenes/crearclase.png"></p>
<p>Una vez definidas las clases, la aplicaci&oacute;n de las
mismas en N|VU se limita a marcar el fragmento&nbsp;que deseamos
modificar arrastrando con el rat&oacute;n y elegir la clase
correspondiente en el listado que aparece en la segunda barra de
formato. Con el procedimiento de pinchar arrastrar definiremos zonas
del documento que no tienen que coincidir con un elemento completo,
como pod&iacute;a ser un p&aacute;rrafo, lo cual hace que el
programa genere una etiqueta <code>span</code> que englobe
los fragmentos seleccionados.&nbsp;</p>
<p>Si lo que realmente queremos es aplicar una clase a un
elemento, por ejemplo un p&aacute;rrafo, una lista ordenada
completa, un contenedor gen&eacute;rico, etc, es preferible que lo
seleccionemos situ&aacute;ndonos sobre cualquier punto del mismo y
marcando la etiqueta que lo identifica en la barra de estado (la que
aparezca en &uacute;ltimo lugar corresponder&aacute; al punto
en que nos encontramos). Una vez hecha esta marca podemos aplicar la
clase:</p>
<ul>
<li>eligi&eacute;ndola en el desplegable de la 2&ordf;
barra de formato&nbsp;&nbsp;</li>
<li>pulsando con el bot&oacute;n derecho sobre el elemento
se&ntilde;alado en la barra de estado y desplegando <span class="refmenu">clases</span> para elegir la adecuada </li>
</ul>
<h2>Pseudoclases</h2>
<p>Las pseudoclases se utilizan para particularizar algunos
efectos de determinados selectores en algunas situaciones especiales.
Uno de los grupos que se aplica m&aacute;s frecuentemente es el que
tiene que ver con la etiqueta &lt;a&gt; para marcar diferentes
presentaciones de los enlaces.</p>
<p>La sintaxis es ligeramente diferente de la general: <strong>selector:pseudoclase
{propiedad : valor}</strong></p>
<h3><strong>Pseudoclases
relacionadas con los v&iacute;nculos</strong></h3>
<p>Su funci&oacute;n es cambiar la apariencia
seg&uacute;n el estado del v&iacute;nculo. Existen cuatro
tipos: </p>
<ul>
<li><code>a:link</code> sirve
para establecer
las propiedades de un enlace no visitado</li>
<li><code>a:visited</code> indica las
propiedades que adoptar&aacute; un enlace visitado</li>
<li><code>a:hover</code> especifica
la
apariencia que adoptar&aacute; un enlace en el momento en que el
bot&oacute;n se sit&uacute;a sobre &eacute;l.</li>
<li><code>a:active</code>
fija las propiedades
que tomar&aacute; un enlace en el momento en que se pulsa sobre
&eacute;l para activarlo. </li>
</ul>
<p><a href="javascript:void(0)" onclick="window.open('muestra21.htm','','statusbar=0,menubar=0,toolbar=1,directionbar=0,top=0,left=0,width=780,height=290')">Ver
ejemplo </a></p>
<div class="avisos">
<p>El orden en el que se deben especificar estas pseudoclases en
las hojas de
estilos para que tengan efecto es el que se ha utilizado para
describirlas. Esto tiene su l&oacute;gica debido a que, en caso de
haber alguna contradicci&oacute;n entre dos selectores siempre se
aplica el enumerado en &uacute;ltimo lugar: por ello el que se
refiere al enlace activo debe ser el &uacute;ltimo para que se
eviten variaciones en la presentaci&oacute;n mostr&aacute;ndose
las propiedades del enlace visitado(visited) o con el rat&oacute;n
encima (hover). Por el mismo motivo la pseudoclase hover debe aparecer
detras de visited para que la apariencia del enlace pueda modificarse
al pasar el rat&oacute;n sobre el mismo, independientemente de que
se haya visitado o no el enlace. Por &uacute;ltimo, visited
tendr&aacute; que ir despu&eacute;s de link puesto que de lo
contrario se aplicar&iacute;a la apariencia del enlace no visitado
aunque ya se hubiera estado en la p&aacute;gina de destino.</p>
</div>
<p>Existen tambi&eacute;n los llamados pseudoelementos que
ver&aacute;s en la secci&oacute;n dedicada al texto pero
todav&iacute;a podemos considerar la pseudoclase que se refiere al
primer elemento hijo <code>first-child</code><strong>
</strong>que nos
permitir&iacute;a obtener, por ejemplo un efecto similar al que
presentan algunas ediciones impresas cuando el primer
p&aacute;rrafo de un cap&iacute;tulo se muestra en un
tama&ntilde;o m&aacute;s grande o en it&aacute;lica.</p>
<p><a href="javascript:void(0)" onclick="window.open('muestra22.htm','','statusbar=0,menubar=0,toolbar=0,top=0,left=0,width=780,height=290')">Ver
ejemplo </a></p>
<div class="practicas">
<img class="numact" style="width: 29px; height: 29px; float: left;" alt="Actividad 80" title="Actividad 81" src="../imagenes/numeracion/ochentayuno.gif">
<ul>
<li>Crea un documento
que contenga un enlace a una
p&aacute;gina en la red (o
bien hazlo con un enlace a un documento local y crea tambi&eacute;n
este
&uacute;ltimo)</li>
<li>Crea una hoja de estilo en la que incluyas
caracter&iacute;sticas que te apetezcan para definir las
pseudoclases en el
orden especificado.</li>
<li>Comprueba las variaciones que se producen al pasar el
rat&oacute;n sobre el enlace o al visitarlo y volver nuevamente a
la p&aacute;gina.</li>
<li>Modifica el orden subiendo&nbsp;la pseudoclase <code>a:visited</code> al primer
lugar y comprueba lo que ocurre.</li>
<li>Introduce otras variaciones en el orden para comprobar los
efectos.</li>
<li>Guarda el trabajo como <strong>actividad81.html</strong></li>
</ul>
</div>
<h2>El selector id </h2>
<p>Mientras que el selector clase puede aplicarse a varios
elementos
del mismo o diferente tipo en una p&aacute;gina podemos crear
tambi&eacute;n un
selector id para diferenciar elementos espec&iacute;ficos que
a&ntilde;adir&aacute;n alguna
caracter&iacute;stica diferente de las que tienen los elementos de
su clase.
El nombre del selector se inicia con el signo # seguido del nombre del
identificador.</p>
<p class="ejempcss">Ej: <code>#rojo {color: red}</code></p>
<p><a href="javascript:void(0)" onclick="window.open('muestra6.htm','','statusbar=0,menubar=0,toolbar=0,top=0,left=0,width=780,height=440')">Ver
ejemplo</a></p>
<p>Para crear una regla de tipo id en el editor de CSS
utilizaremos la opci&oacute;n <span class="refmenu">estilo
aplcado a todos los elementos coincidentes con el siguiente selector </span>y
escribiremos el nombre empezando por el signo #</p>
<p class="centrado"><img style="width: 552px; height: 139px;" alt="Crear un selector ID con el editor de CSS" title="Crear un selector ID con el editor de CSS" src="imagenes/crearid.png"></p>
Una vez definidos los selectores <code>ID</code> , la
aplicaci&oacute;n de los
mismos habr&aacute; que realizarla seleccionando la etiqueta
correspondiente al elemento en la barra de estado y pulsando el
bot&oacute;n derecho para elegir entre las posibilidades que se
muestren en la opci&oacute;n <span class="refmenu">id</span>
del men&uacute; desplegable.
<p><a href="javascript:void(0)" onclick="window.open('muestra6.htm','','statusbar=0,menubar=0,toolbar=0,top=0,left=0,width=780,height=440')">
</a></p>
<h2>Comentarios</h2>
<p>Puede venir muy bien incluir comentarios que nos sirvan para
aclarar
o recordar alg&uacute;n aspecto de las especificaciones que
escribimos en una
hoja de estilo. Para hacerlo lo iniciaremos con <code>/*</code>
y lo finalizaremos
con <code>*/</code></p>
<p class="ejempcss">Ej:</p>
<p style="font-weight: normal;" class="ejempcss"><code>
/* pongo la primera l&iacute;nea
del p&aacute;rrafo con ID=muestra en versales de color azul*/</code></p>
<p style="font-weight: normal;" class="ejempcss"><code>
p#muestra:first-line {color: #0000FF;
font-variant: small-caps}</code></p>
<p style="font-weight: normal;" class="ejempcss"><code></code></p>
</div>
</body>
</html>

13
html2005/estilos/css3.css Normal file
View File

@@ -0,0 +1,13 @@
/* Generated by CaScadeS, a stylesheet editor for Mozilla Composer */
.azul { color: rgb(51, 51, 255);
}
.blancoazul { color: rgb(255, 255, 255);
background-color: rgb(0, 0, 153);
}
.ejempcss { color: rgb(91, 102, 150);
font-weight: bold;
}

1625
html2005/estilos/css3.html Normal file
View File

File diff suppressed because it is too large Load Diff

Some files were not shown because too many files have changed in this diff Show More