Foros del Web » Programando para Internet » Javascript »

Viñetas personalizables.

Estas en el tema de Viñetas personalizables. en el foro de Javascript en Foros del Web. Hola Foro : Aunque el ícono del tema sugiera que voy a proponer una idea, en realidad quiero hacer no una sino dos preguntas. Hace ...
  #1 (permalink)  
Antiguo 13/01/2006, 18:44
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 16 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
  #2 (permalink)  
Antiguo 14/01/2006, 13:03
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.563
Antigüedad: 16 años, 8 meses
Puntos: 1266
Hola furoya:

Como siempre, haciendo cosas interesantes...

Supongo que ya habrás visto el inspector DOM que hice hace algún tiempo: http://www.pepemolina.com/DOM/index.html (en la misma carpeta del destripador)...

De la primera pregunta poco podría ayudarte, pero algo he tratado el tema de los nodos... Lo que pasa con los nodos vacíos, es que pueden tratarse de espacios en blanco o retornos de carro... te lo digo, porque con mozilla se generan ese tipo de nodos al tener 2 tags separados por un retorno de carro o un espacio en blanco (me pareció extraño ver que del nodo raiz de un documento colgaran tres hijos... document.documentElement.childNodes.length == 3... siendo el intermedio la separación entre </head> y <body>... creo que todos ponemos esos tags en diferentes líneas...

Para diferenciarlo, me parece que se debe consultar el noreType... nodeType == 1 => es etiqueta... hay tipo para comentarios y otros para texto...

Espero que te sirva.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 16/01/2006, 11:59
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 16 años, 1 mes
Puntos: 317
Gracias por el comentario, caricatos.

Eso de los tipos de nodo está muy bien, pero lo mismo me obliga a poner un condicional y saltear los que no me sirvan. Tenía la esperanza de que hubiera algún modo de decirle al navegador que no insertara sus nodos, pero seguro que no.

El inspector DOM lo había visto y no se me ocurrió buscarlo (), es que estoy muy vago y esperaba algún código que no tuviera que desarmar .

Ya que estás aquí aprovecho para consultarte algo. Estoy haciendo algunas pruebas de validación, y este código lo puse como HTML 4.01 y pasó. Pero si lo pongo como XHTML 1.0 me da unos errores extraños.
Me lee el JS como si fuera parte del contenido, y me dice, por ejemplo, que el 'et' ('ampersand') de

Código:
vSecuen[i].childNodes[sVineta].innerHTML = "&#" +vS+ ";";
puede estar mal, aunque dependiendo del contexto. Lo puedo reemplazar con \x26, pero en realidad está bien.

Por supuesto que si oculto el escript como un comentario valida perfectamente. ¿Sabes de alguna forma para que se pueda usar un escript en XHTML sin ponerlo en un documento aparte?.
¿O ésto es un error del validador y el código está bien?
  #4 (permalink)  
Antiguo 16/01/2006, 12:26
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.563
Antigüedad: 16 años, 8 meses
Puntos: 1266
Hola furoya:

Lo de desarmar el código... creo que ya tienes que estar acostumbrado... (si no, es difícil aprender...)
Creo que para quitar nodos vacíos debes controlar que el nodeType == (1 o 3)
y el nodeValue con algo distinto de tabuladors/espacios o saltos de línea...
http://html.conclase.net/w3c/dom1-es...-one-core.html

Sobre la validación, normalmente no aspiro a validar más que html 4.01 (y si bien termino pasándola, me hace perder muchas horas...)

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #5 (permalink)  
Antiguo 20/01/2006, 12:31
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 16 años, 1 mes
Puntos: 317
Gracias por el enlace. No había tenido suerte con los que encontré y este parece simple y completo (al menos para empezar).

Cita:
...Lo de desarmar el código... creo que ya tienes que estar acostumbrado... (si no, es difícil aprender...)
sí, claro; así aprendí. Y este Foro me ayudó mucho, por eso me decidí a registrarme. Lo que pasa es que el calor me tiene sin ganas de hacer nada. Pero no soy un buen ejemplo (bah, nunca lo fuí), voy a juntar valor para estudiar el problema.

Y lo de la validación; era justo con lo que me estaba peleando antes de responderte, por eso se me ocurrió preguntar. A mi también me cansa un poco porque estoy más acostumbrado a escribir ejemplos que al final va a ajustar quien los necesite, no yo.

Me parece que el validador tiene un par de bugs, pero quiero hacer algunas pruebas más para estar seguro, o preguntar con algún dato más certero que mis sospechas. En HTML 4.01 también me devuelve mensajes confusos. Y es cierto, a veces se pierden horas corrigiendo códigos viejos, pero aquí hay gente que se siente más segura si un código valida bien y no me gustaría dejarlos afuera si puedo evitarlo.

Otra vez gracias, voy a probar lo de los nodeType .
  #6 (permalink)  
Antiguo 31/03/2009, 09:52
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 16 años, 1 mes
Puntos: 317
Respuesta: Viñetas personalizables.

Al final estudié lo de los nodos. Pero ahora que salieron nuevas versiones de navegadores seguro voy a tener que mirarlos de nuevo. Igual los uso poco, así que no me pregunten porque no me acuerdo. ;)

Volví porque hay un detalle del código anterior que conviene aclarar. Dije que pongo ejemplos para que los adapte quien los tenga que usar. Y es un motivo (o excusa) para haber metido los div y no algún elemento de lista que sería más 'sintáctico'.

Por otro lado, aprovecho que estoy por aquí y dejo otro ejemplo.
Existe una recomendación por parte del W3C para no modificar el formato de marcadores de lista desde el CSS. Eso significa que si queremos cambiarle el tamaño o los colores tenemos que usar algún truco. En Firefox o en Opera es fácil, porque cambiando las propiedades de font arrastramos las de viñetas; pero Internet Explorer se tomó en serio lo del estándar y nos ignora el tamaño, así que tenemos que usar un hack un poco más complejo.

Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>MARCADOR DE LISTA.</title>
<style type="text/css">
body { color:white; background-color: black; font-size: 100%;}
ul { background-color: transparent; font-size: 2em; }
li { margin-left: 1em; font-size: 1em; line-height: 0.8em; }
span { font-size: 0.5em; color: white; }
</style>
</head>
<body>

<!--[if IE]>
<style type="text/css">
ul { zoom: 2; font-size: 1em; }
</style>
<![endif]-->

<h2>Vi&ntilde;etas personalizadas. (FF3; Op9; IE7)</h2>

<ul>
<li style="color:red; "> <span>qwertyuiop<br>qwertyuiop </span></li>
<li style="color:green; "> <span>qwertyuiop<br>qwertyuiop </span></li>
<li style="color:blue; "> <span>qwertyuiop<br>qwertyuiop </span></li>
</ul> 

</body>
</html> 
  #7 (permalink)  
Antiguo 31/03/2009, 10:09
Avatar de Panino5001
Moderatroll
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.068
Antigüedad: 14 años, 6 meses
Puntos: 775
Respuesta: Viñetas personalizables.

Ja, ja, me encantan tus truquillos.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:56.