Tema: Viñetas personalizables.
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 13/01/2006, 18:44
furoya
(Desactivado)
  
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 22 años, 1 mes
Puntos: 317
Viñetas personalizables.
Hola Foro :

Aunque el ícono del tema sugiera que voy a proponer una idea, en realidad quiero hacer no una sino dos preguntas.

Hace unos días respondí una duda sobre los em, y me puse a mirar disquetes para encontrar algún ejemplo de página hecha con esta medida. Y como de costumbre encontré algo que había olvidado. Tiempo atrás empecé a simular listas con div y dd (también con tablas, pero como en este foro hay gente muy suceptible voy a omitir ese código), y descubrí que el objetivo era usar 'caracteres personalizados' a modo de viñetas.

Por supuesto que al encontrar algo nuevo con qué entretenerme olvidé los
em; y es porque había un par de escripts para ordenar y animar las viñetas.

Era mi gran oportunidad para empezar a experimentar con nodos, así que reescribí los códigos y los probé en IExplorer. El mayor problema lo tuve con la diferente interpretación que hace el bendito navegador entre las versiones 5 y 6 de los em y lo solucioné al la manera Microsoft. Pero cuando probé los escripts en FF fue una tragedia.
Ya me había olvidado de que estos navegadores interpretan distinto los nodos, y tuve que inventar un engendro para corregirlo sin tener que hacer una línea de código para cada uno. El ejemplo es éste :

Código: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"><html>
<head>
<title>VI&Ntilde;ETAS PERSONALIZADAS.</title>
<script type="text/javascript">
var animacion = ["&#9600;","&#9616;","&#9604;","&#9612;"];
var vA= 0;
var paso , undefined;

function anima(){
var vAnim = document.getElementById("listaAnim").childNodes;

vA = (vA == animacion.length-1)? vA=0 : vA += 1;

for(i=0; i<vAnim.length; i++){
if(vAnim[i].innerHTML != undefined){
var nVineta = (vAnim[i].childNodes[0].innerHTML != undefined) ? 0 : 1
vAnim[i].childNodes[nVineta].innerHTML = animacion[vA];
}
}

paso = setTimeout("anima()" , 100);
}



var vSIni = 913;	/*Alfa mayúscula*/
var vSFin = 969;	/*omega minúscula*/
var vS = vSIni;		/*primer ítem (p.e. 922 empieza con Kappa)*/
var excep = "930 938 939 940 941 942 943 944 962"; /*Caracteres acentuados (Separar con espacios)*/

function secuencia(){
var cSecuen = document.getElementById("listaSecuen").childNodes;

 for(c=0; c<cSecuen.length; c++){
  var vSecuen = cSecuen[c].childNodes;

  for(i=0; i<vSecuen.length; i++){
   while((" "+excep+" ").indexOf(" "+vS+" ") > -1) vS += 1;
   if(vSecuen[i].innerHTML != undefined){ 
    var sVineta= (vSecuen[i].childNodes[0].innerHTML != undefined) ? 0 : 1;
    vSecuen[i].childNodes[sVineta].innerHTML = "&#" +vS+ ";";
    vS = (vS == vSFin)? vS = vSIni : vS += 1;
   }
  }
 }
}
</script>
<style type="text/css">

body {font-size:125%; color:#000000; background-color:#ffffff; }
h3 {margin-left:0.5em; }
p {font-size:0.75em; }

#listaAnim {width:10em; border:1px solid black; font-size:1em; }

#listaAnim dd {font-size:0.75em; position:relative; margin:1em 4em; }

.vineta , .vinetaAnim {position:absolute; left:-2em; top:0; font-size:1.2em; font-weight:bold; 
font-family:"Times New Roman", Arial, serif; }

#listaSecuen {position:relative; width:32em; height:10em; margin:1em; }

.lista {position:relative; top:0; margin:1em 0 1em 4em; font-size:0.7em; }

#listaSecuen .vinetaS {color:#000000; background-color:#ffff66; font-weight:bold; 
position:absolute; left:-1em; top:0; }

.listaS {position:relative; top:0; left:0; margin:1em; font-size:0.7em; }

.col {position:relative; float:left; margin-left:1.5em; }

.lista0 {left:0em; }
.lista1 {left:5em; }
.lista2 {left:10em; }
.lista3 {left:15em; }


.casino {font-size:1em; }
.casino dd {font-size:0.75em; position:relative; margin:1em 4em; }
dd .vinetaC {font-size:1.2em; width:1.2em; text-align:center; 
font-family:arial,"times new roman", serif; position:absolute; 
margin:0 -2em; }
.rojo {color:#ff0000; background-color:#ffffff; }
.negro {color:#000000; background-color:#ffffff; }

</style>
</head>
<body>

<!--[if lt IE 5.5000]> 
<style>

.vineta , .vinetaAnim {left:1.2em; }

</style>
<![endif]-->

<h2>Listas simuladas. (IE6 / FF5)</h2>

<h3>Usa caracteres ASCII / Unicode como vi&ntilde;etas.</h3>
<h4>Con <tt>dl</tt> y <tt>dd</tt>.</h4>

<dl class="casino">
   <dd><span class="vinetaC negro">&spades;</span>Picas.<br />
(spades)</dd>
   <dd><span class="vinetaC negro">&clubs;</span>Tr&eacute;boles<br />
(clubs)</dd>
   <dd><span class="vinetaC rojo">&diams;</span>Diamantes<br />
(diams)</dd>
   <dd><span class="vinetaC rojo">&hearts;</span>Corazones<br />
(hearts)</dd>
</dl>

<h4>Simulada con <tt>div</tt>.</h4>

<div class="lista">
<span class="vineta">&#9788;</span>
&Iacute;tem con vi&ntilde;eta <br />
personalizada. <br />
</div>
<div class="lista">
<span class="vineta">&#8976;</span>
&Iacute;tem con vi&ntilde;eta <br />
personalizada. <br />
</div>
<div class="lista">
<span class="vineta">&#9835;</span>
&Iacute;tem con vi&ntilde;eta <br />
personalizada. <br />
</div>
<div class="lista">
<span class="vineta">&#8776;</span>
&Iacute;tem con vi&ntilde;eta <br />
personalizada. <br />
</div>

<h3>Con animación <i>mouseover</i>.</h3>

<dl id="listaAnim" onmouseover="anima()" onmouseout="clearTimeout(paso)">
   <dd><span class="vinetaAnim">&#9600;</span>&Iacute;tem con vi&ntilde;eta <br />
animada <br />
uno.
</dd>
   <dd><span class="vinetaAnim">&#9600;</span>&Iacute;tem con vi&ntilde;eta <br />
animada <br />
dos.
</dd>
   <dd><span class="vinetaAnim">&#9600;</span>&Iacute;tem con vi&ntilde;eta <br />
animada <br />
tres.
</dd>
</dl>

<h3>Usa una secuencia ordenada.</h3>

<div id="listaSecuen">

<div class="col">
<div class="listaS">
<span class="vinetaS"> </span>
0 Un &iacute;tem <br />
relleno relleno 
</div>
<div class="listaS">
<span class="vinetaS"> </span>
1 Otro &iacute;tem <br />
relleno relleno 
</div>
<div class="listaS">
<span class="vinetaS"> </span>
2 Otro &iacute;tem 
</div>
<div class="listaS">
<span class="vinetaS"> </span>
3 Otro &iacute;tem <br />
relleno relleno 
</div>
</div>

<div class="col">
<div class="listaS">
<span class="vinetaS"> </span>
4 Un &iacute;tem <br />
relleno relleno 
</div>
<div class="listaS">
<span class="vinetaS"> </span>
5 Otro &iacute;tem <br />
relleno relleno 
</div>
<div class="listaS">
<span class="vinetaS"> </span>
6 Otro &iacute;tem 
</div>
<div class="listaS">
<span class="vinetaS"> </span>
7 Otro &iacute;tem <br />
relleno relleno 
</div>
</div>

<div class="col">
<div class="listaS">
<span class="vinetaS"> </span>
8 Un &iacute;tem <br />
relleno relleno 
</div>
<div class="listaS">
<span class="vinetaS"> </span>
9 Otro &iacute;tem <br />
relleno relleno 
</div>
<div class="listaS">
<span class="vinetaS"> </span>
10 Otro &iacute;tem 
</div>
<div class="listaS">
<span class="vinetaS"> </span>
11 Otro &iacute;tem <br />
relleno relleno 
</div>
</div>

<div class="col">
<div class="listaS">
<span class="vinetaS"> </span>
12 Un &iacute;tem <br />
relleno relleno 
</div>
<div class="listaS">
<span class="vinetaS"> </span>
13 Otro &iacute;tem <br />
relleno relleno 
</div>
<div class="listaS">
<span class="vinetaS"> </span>
14 Otro &iacute;tem 
</div>
<div class="listaS">
<span class="vinetaS"> </span>
15 Otro &iacute;tem <br />
relleno relleno 
</div>
</div>

</div>

<input type="button" value="Ver Vi&ntilde;etas Griegas" onclick="secuencia()" /> 
<p>
La secuencia de las vi&ntilde;etas coincide con el orden Unicode. Con un nuevo click 
se puede ver la progresi&oacute;n (May&uacute;sculas, min&uacute;sculas y recomienza). 
El escript ignora los caracteres acentuados que estan entre la '&Omega;' y la '&alpha;'.
</p>

<p>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-html401"
alt="Valid HTML 4.01 Transitional" height="31" width="88"></a>
</p>

</body>
</html>
Y las preguntas son :
  1. ¿Hay alguna forma de usar unicode en los list-style?.
  2. ¿Hay alguna manera elegante de hacer que un escript no caiga en nodos 'vacíos' en Firefox? (me pareció ver una, pero dentro de algún código que no recuerdo y por eso no lo puedo buscar).

Gracias