Sistema de valoracion con estrellitas

Sistema de valoracion con estrellitas

Hey! ¿Como estas? Espero que genial como yo 😀 El dia de hoy vamos a comenzar a realizar un sistema de valoracion con estrellitas que nos ayude a conocer lo mas valorado por nuestros lectores, mostrar snippets mas atractivos y demas.. pero bueno, eso mas adelante por que el dia de hoy comenzaremos con la visualizacion de las estrellitas en nuestro contenido, algo bastante facil de realizar. Todo lo que necesitaremos sera escribir algo de html, algo de css para darle estilo y un poco de javascript para darle un extra de interaccion con el usuario, vamos ya!! 😛

Lo que haremos

Podemos explicartelo pero mejor te lo mostramos para que sepas si te animas o no 😀

Si ves al inicio de este articulo podrás ver un conjunto de estrellas, cinco para ser exactos, las cuales sirven para que valores este contenido ( que espero y sean 5 estrellas ) pues es precisamente lo que haremos en este articulo hoy 😀

La base Html

<strong class="msj">¡Valora nuestro contenido!</strong>
<br/>
<span class="star-rating">
<input type="radio" name="rating" value="1"><i></i>
<input type="radio" name="rating" value="2"><i></i>
<input type="radio" name="rating" value="3"><i></i>
<input type="radio" name="rating" value="4"><i></i>
<input type="radio" name="rating" value="5"><i></i>
</span>

eso es todo el html!

crear-un-sistema-de-valoracion-con-estrellitas-1


¿Sabías que?

¿Necesitas hosting wordpress? WebEmpresa te ofrece un servicio super rápido, excelente soporte en español y certificado SSL gratuito:

WebEmpresa

El estilo Css

Aquí si es un poco mas ..

.star-rating {
font-size: 0;
white-space: nowrap;
display: inline-block;
margin-top:25px;
width: 125px;
height: 25px;
overflow: hidden;
position: relative;
background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjREREREREIiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=');
background-size: contain;
}
.star-rating i {
opacity: 0;
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 20%;
z-index: 1;
background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjRkZERjg4IiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=');
background-size: contain;
}
.star-rating input {
-moz-appearance: none;
-webkit-appearance: none;
opacity: 0;
display: inline-block;
width: 20%;
height: 100%;
margin: 0;
padding: 0;
z-index: 2;
position: relative;
}
.star-rating input:hover + i,
.star-rating input:checked + i {
opacity: 1;
}
.star-rating i ~ i {
width: 40%;
}
.star-rating i ~ i ~ i {
width: 60%;
}
.star-rating i ~ i ~ i ~ i {
width: 80%;
}
.star-rating i ~ i ~ i ~ i ~ i {
width: 100%;
}
.msj {
position: fixed;
top: 0;
left: 0;
right: 0;
text-align: center;
padding: 20px;
display: block;
}
*,
::after,
::before {
height: 100%;
padding: 0;
margin: 0;
box-sizing: border-box;
text-align: center;
vertical-align: middle;
}

crear-un-sistema-de-valoracion-con-estrellitas-2

y algo de funcionalidad con javascript..

Un extra con Javascript

$(':radio').change(
function(){
$('.msj').text( this.value + ' estrellas' );
} 
)

Pero antes llama a jquery así..
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

y a probarlo se ha dicho..

crear-un-sistema-de-valoracion-con-estrellitas-3

Proximos pasos..

¿Y Ahora? Lo siguiente que haremos en el próximo tutorial sera guardar esta información en la base de datos para registrarla y leerla, también nos falta añadirle microformatos para hacer que google se entere de nuestro nuevo sistema de valoracion y lo muestre en los resultados de búsqueda ( si! esas estrellitas que tienen algunos resultados cuando buscas en google 😀 ).

Hasta la próxima!

Crear un sistema de valoracion con estrellitas

Clic para valorar esta información
[Total: 10 Promedio: 4.2]