Sistema de valoracion con estrellitas

Sistema de valoracion con estrellitas

Sistema de valoracion con estrellitas
4.4 (88%) 20 votos

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

eso es todo el html!

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

El estilo Css

Aquí si es un poco mas ..

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

y algo de funcionalidad con javascript..

Un extra con Javascript

Pero antes llama a jquery así..

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

Sistema de valoracion con estrellitas
4.4 (88%) 20 votos

5 Comentarios ¿Qué opinas tú del tema?

  1. Francisco Martinez Gich 2017-01-03
  2. Pamela 2015-12-01
    • Jonathan Melgoza 2015-12-01
  3. jose 2015-05-23

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *