Star Rating System (votos con estrellas) con CSS
Trasteando y mirando sistemas de votos por ahí me he encontrado con esto:
Y como no satisfacía mis necesidades al 100% me puse a modificarlo. La idea sería algo más parecido al sistema de votos de EL PAIS, donde tienes unas estrellas para votas y otras no clickables donde se muestran los votos totales. Es decir habría dos tipos el clickable interactivo y el que simplemente es informativo.
Aquí llegan mis dudas en cuanto a semántica si es interactivo creo que estaría bien como está, pero en el que es simplemente informativo, ¿sería mejor ponerle en vez de la lista con los elementos de la votación una sola imagen de reemplazo? es decir tener varios patrones de votación, vease 1 estrella, 1 estrella y media, dos estrellas,... y así sucesivamente y que dependiendo de la votación se pusiese una sola imagen sustituyendo un texto tipo 3 estrellas de cinco.
Yo creo que sí sería más correcto, pero aquí dejo la duda a ver que opináis.
Subo la demo para que le podáis echar un ojo. Además me pasa una cosa extraña en Firefox, en los dos ratins de arriba (inline) al hacer hover se me mueve el texto, cosa que en Explorer no sucede.
Bueno un saludo y aquí os dejo en link: Sistema de Votación con Estrellas
txuma
Hace poco hemos implementado un sistema de votación basándonos en ese que pones. Lo hemos 'tuneado' precisamente para las estrellas de resultado se muestren utilizando un único elemento de lista al que dinámicamente se le asigna una clase para pintar las estrellas. No es complicado, pero si necesitas pistas más concretas dímelo, y cuando tenga un rato te extraigo un ejemplo.
demssite
Gracias Txuma, pues si pones un ejemplo cuando puedas, sí que te lo agradecería.
Un saludo
Diego
txuma
A ver, te lo cuento por encima. El código quedaría así:
<code>
<strong>Valorar:</strong>
<ul>
<li><a href="#" class="uno">1</a></li>
<li><a href="#" class="dos">2</a></li>
<li><a href="#" class="tres">3</a></li>
<li><a href="#" class="cuatro">4</a></li>
<li><a href="#" class="cinco">5</a></li>
</ul>
<strong>Valoracion actual</strong>
<ul class="valoracion>
<li>3</li>
</ul>
</code>
La primera lista no te la explico porque es casi idéntica al ejemplo original.
La segunda es muy sencillo hacerla:
- Al elemento UL.valoracion le das el tamaño que suman todas las estrellas y le pones de fondo las estrellas 'claritas'.
- Al elemento LI le pones de fondo las estrellas encendidas. Y en la hoja de estilos defines cinco clases ('uno', 'dos', ....), cada una de ellas para dar un tamaño distinto al elemento LI.
- Ahora ya solo te falta escribir dinámicamente el <li> y voila
[OJO]
Esto es una adaptación del ejemplo inicial que pusiste. A mi tampoco me gusta mucho semánticamente hablando (por no citar la accesibilidad)
demssite
txuma
[OJO]
Esto es una adaptación del ejemplo inicial que pusiste. A mi tampoco me gusta mucho semánticamente hablando (por no citar la accesibilidad)
Qué te refieres a que haciéndolo como comento no te parece correcto ni semánticamente ni a nivel de accesibilidad ¿o te refieres al ejemplo original de komodoMedia?
pseudo
txuma
<code>
<strong>Valoracion actual</strong>
<ul class="valoracion>
<li>3</li>
</ul>
</code>
Por accesibilidad, lo suyo sería escribir "3 sobre 5", no solo "3", no?
Lo digo porque el gráfico es eso lo que te dice al mostrarte 5 estrellas con 3 "activas"
... lo digo por tocar las bolas, vamos :P
orange
Yo no sé muy bien qué queréis hacer, pero lo de "3 sobre 5" es fácil de resolver
<li>3 [span]sobre 5[/span]</li>
Y ocultas el span
demssite
orange
Yo no sé muy bien qué queréis hacer, pero lo de "3 sobre 5" es fácil de resolver
<li>3 [span]sobre 5[/span]</li>
Y ocultas el span
La idea es adaptar el enlace de arriba: Sistema de Votación con Estrellas para que sea más correcto semánticamente y a nivel de accesibilidad, por lño que comento al principio del post
Un saludo
Kr0n
Pues entre lo del span, para indicar sobre cuanto puntuas, y lo que ha puesto Txuma, ya lo tienes no?
demssite
Pues sip.... ya me pongo con ello y lo enlazo por si a alguien le interesa el resultado final.
Un saludo
demssite
demssite
Además me pasa una cosa extraña en Firefox, en los dos ratins de arriba (inline) al hacer hover se me mueve el texto, cosa que en Explorer no sucede.
Que se me olvidaba, he estado mirando a ver porqué sucede esto en FF y no soy quien.
Un saludo gentes
demssite
Txuma, una cosa, comentaste que habíais desarrollado uno a partir del de komodomedia también. ¿Te funciona en bien en Opera y en FF?
txuma
Sí
demssite
A mi el problema que me da es que en FF se me mueve el texto al hacer hover, y en Opera el inline de mas pequeño tamaño me lo jode y no se porque.
Dejo la dirección con lo ultimo:
Estrellas
demssite
Bueno, ya he conseguido que se vea bien en Opera y en Firefox. Ahora el problema es que el explorer no me lo muestr inline.
¿Alguna sugerencia?