BLOG DE DISEÑO WEB CORUÑA

Un poco de todo, recursos, tutoriales, noticias, anuncios...

Sistema de Votación con estrellas en CSS, jQuery y Ajax sin plugins guardando el resultado en una base de datos mysql con PHP

Sistema de Votación con estrellas en CSS, jQuery y Ajax sin plugins guardando el resultado en una base de datos mysql con PHP

17/JUL/2013 15.776 visitas Ver comentarios

Hoy traigo un nuevo sistema de votación con estrellas, conocido como star rating, utilizando CSS y jQuery para mostrar y animar la elección del valor y almacenando el voto en una base de datos MySQL.

A diferencia del realizado anteriormente, he simplificado el código al máximo y está realizado en 3 tamaños distintos de estrellas, válidas para 16px, para 24px o para 32px para que utilices la que mejor se adapte a tu diseño.

LEER ENTRADA

Imprimir un área determinada del documento con jQuery

Imprimir un área determinada del documento con jQuery

12/JUL/2013 31.054 visitas Ver comentarios

A menudo nos encontramos con la necesidad de crear una versión para imprimir del documento que estamos mirando, ya sea porque son datos, una ficha de un producto, una reserva de un servicio, un pago, una compra o cualquier otra opción que puede requerir que nuestros visitantes impriman lo que ven por pantalla.

Lógicamente, generar la versión para imprimir requiere de un trabajo extra, cuando no, un CSS indicando que es sólo para imprimir con media print y hacer el doble CSS de toda nuestra web o hacer el duplicado del documento a la versión imprimible con CSS limitado o sin éste.

LEER ENTRADA

Comprobar si un enlace es correcto y funciona con PHP

Comprobar si un enlace es correcto y funciona con PHP

04/JUL/2013 15.305 visitas Ver comentarios

Muchas veces queremos enlazar fuentes o sitios externos desde nuestros artículos o, en otro de los casos, incluir determinada URL a modo de iframe y necesitamos comprobar que esa URL o dirección sigue estando online, es correcta y funciona actualmente.

Para eso, he desarrollado una pequeña función en PHP que lo que hace es recibir una URL y comprobar sus cabeceras, las cuales las obtendremos en un ARRAY y para lo cual debemos saber que cuando una página web está activa su cabecera será representada con un número 200.

LEER ENTRADA

Sistema de votación Me gusta o No me gusta con PHP, Jquery y Ajax

Sistema de votación Me gusta o No me gusta con PHP, Jquery y Ajax

14/JUN/2013 24.669 visitas Ver comentarios

Si recuerdas una entrada mía anterior donde dejaba un sistema de votación con estrellas, sabrás de qué va esta entrada. Es la misma votación pero modernizada a contar la cantidad de LIKES o HATES recibidos.

En castellano entendible, vendría a ser un contador de la cantidad de gente a la que le gusta lo que ve y la cantidad de gente a la que no le gusta lo que ve.

LEER ENTRADA

Pasar opciones de un select list múltiple a otro con jQuery

Pasar opciones de un select list múltiple a otro con jQuery

12/JUN/2013 31.580 visitas Ver comentarios

Este pequeño código es antiguo y, seguramente lo has necesitado más de una vez para filtrar opciones de un select moviendo las seleccionadas de la lista de origen a una nueva lista vacía.

Básicamente, tenemos dos selects (ORIGEN y DESTINO) declarados como múltiple, unos botones que harán el traspaso de valores de una lista a la otra y opciones para pasar o quitar todos los elementos con un solo click del ratón.

LEER ENTRADA

Desbloquear contenido a cambio de un tweet con PHP y Ajax

Desbloquear contenido a cambio de un tweet con PHP y Ajax

07/JUN/2013 6.550 visitas Ver comentarios

Tener un blog de relativo éxito o fama siempre es un placer. A menudo recibo muchos comentarios y correos agradeciéndome los aportes o ayuda brindada y es una gran satisfacción.

Por el otro lado, nos encontramos con la ardua tarea de dar difusión a estos aportes, códigos, scripts o como quieras llamarlos y esa, seguramente, es la tarea más difícil de todas.

LEER ENTRADA

Hover captions. Superposiciones con efectos en jQuery

Hover captions. Superposiciones con efectos en jQuery

30/MAY/2013 8.158 visitas Ver comentarios

Hover captions es un plugin para jQuery que permite mostrar superposiciones a elementos con unos efectos muy interesantes.

Traduciéndolo a castellano básico, este plugin hará que cuando pases el ratón por encima de una foto o un div o lo que sea, muestre un contenido alternativo por encima apareciendo con el efecto seleccionado, que puede ser de transparencia, apareciendo por los laterales, o por los lados superior o inferior.

LEER ENTRADA

Obtener todos los atributos DATA de un elemento con jQuery y HTML5

Obtener todos los atributos DATA de un elemento con jQuery y HTML5

28/MAY/2013 21.597 visitas Ver comentarios

Empezando por el principio, vamos a ver que es un atributo DATA en HTML5. Muchas veces hemos necesitado guardar información extra en algún elemento de nuestra web o aplicación web para poder acceder luego a ella. Lo normal era usar un CLASS, un ID o un REL, o en el peor de los casos, invéntandonos un atributo y pasando de validar el código HTML.

Si bien estas opciones podían resolvernos el problema cuando el atributo era uno o varios en el caso de usar las clases CSS, no dejaba de ser una porquería. Y digo porquería porque era una forma de engañar al navegador y meterle información para uso privado de nuestra web que no tenía relación ni con la hoja de estilos, ni con la verdadera misión del atributo REL ni nada parecido.

LEER ENTRADA

30 plugins jQuery que vale la pena mirar

30 plugins jQuery que vale la pena mirar

22/MAY/2013 11.285 visitas Ver comentarios

Quien me conoce, sabe que soy muy fan de jQuery y la manera en que simplificó el uso de javascript a la vez que aportó grandes funcionalidades y efectos simples y complejos con, muchas veces, pocas líneas de código.

Cientos y cientos de nuevos plugins jQuery se publican cada año. Algunos básicos, ofreciendo funciones simples, otros pueden ser complejos y ofrecer muchas más funcionalidades.

LEER ENTRADA

Rellenar un select con datos obtenidos remotamente en json vía jQuery

Rellenar un select con datos obtenidos remotamente en json vía jQuery

16/MAY/2013 34.801 visitas Ver comentarios

Volvemos a jQuery y esta vez lo hacemos con un poco de PHP y JSON. Lo que vamos a hacer es rellenar un SELECT (o lista desplegable) con opciones cargadas remotamente mediante JSON.

Para ello, nos vamos a valer de 3 elementos. Un formulario -con un botón para cargar el contenido-, un poco de javascript para hacer la carga de opciones y un PHP que devolverá un array convertido en una cadena JSON.

LEER ENTRADA

Comprobar que una fecha existe usando jQuery Validate

Comprobar que una fecha existe usando jQuery Validate

16/MAY/2013 18.458 visitas Ver comentarios

Siguiendo con mis anteriores post donde hablo de jQuery Validate, esta vez me ha tocado verificar que la fecha ingresada en un campo de texto de mi formulario sea correcta.

Qué quiere decir que una fecha sea correcta... pues que exista. jQuery Validate tiene una opción para validar fechas y otra que llama dateISO, pero según mis pruebas, el primer caso (DATE), sólo verifica que ingreses un número (he probado a poner un 33 y el validador ha pasado de largo)... y el segundo, si bien valida el formato de una fecha (dd-mm-yyyy o yyyy-mm-dd) no verifica que la fecha exista, por lo que si pones 33-33-3333 te deja pasar porque el formato es correcto.

LEER ENTRADA

Calcular fecha pasada relativa con PHP

Calcular fecha pasada relativa con PHP

10/MAY/2013 4.963 visitas Ver comentarios

Como desarrolladores web, a menudo necesitamos mostrar las fechas en nuestro sitio web. Como usuario, no me gusta leer fechas completos como "26 de noviembre 2011 23:30" porque, inconscientemente, me pongo a hacer la cuenta para saber cuánto tiempo pasó hasta el día de hoy.

Prefiero leer fechas inteligentes como "Hace 1 hora" o "hace 6 meses". Por lo tanto, aquí he escrito una función rápida y sencilla en PHP que muestre la diferencia o tiempo transcurrido basándose en un valor de marca de hora determinado tiempo.

LEER ENTRADA

Mantener fijo el cabecero al hacer scroll con jQuery

Mantener fijo el cabecero al hacer scroll con jQuery

09/MAY/2013 29.460 visitas Ver comentarios

A raíz de una consulta en Twitter de mi buen amigo @tecnorama y de mi nuevo amigo @opeto82, he preparado una minidemo para dejar fijo el cabecero (o el elemento que nos interese) al hacer scroll y no perderlo de vista.

Seguramente habrás visto miles de webs (incluso la mía) que al desplazarte con las barras de desplazamiento vertical, pierdes el logo, el menú o algún elemento que te haría falta tener a mano si el contenido se hace muy extenso.

LEER ENTRADA

Scroll hacia arriba sin utilizar plugins en jQuery

Scroll hacia arriba sin utilizar plugins en jQuery

25/ABR/2013 12.992 visitas Ver comentarios

Lo que vamos a hacer en este post es agregar dinámicamente un botón para volver a la parte superior de la web si nuestra página tiene scroll vertical.

Básicamente controlaremos la posición vertical de nuestra página y si ésta supera un tamaño especificado en el código javascript, aparecerá un botón con una flecha apuntando hacia arriba en la parte inferior derecha de nuestra pantalla.

LEER ENTRADA

Mantener el cabecero de una tabla fijo con jQuery

Mantener el cabecero de una tabla fijo con jQuery

22/ABR/2013 16.003 visitas Ver comentarios

Si eres de los que usan las tablas para lo que realmente son, es decir, para mostrar datos tabulares y no para maquetación, este plugin te vendrá bien si tus tablas contienen muchas filas y corres el riesgo de perder los cabeceros de las columnas al hacer scroll.

Si usas Excel, sabrás que puedes fijar el contenido de las cabeceras para mantenerlas siempre visibles en la parte superior y así saber siempre qué columna estás viendo. Pues bien, este plugin hace lo mismo pero en una tabla de HTML.

LEER ENTRADA

FractionSlider un slide animado en jQuery

FractionSlider un slide animado en jQuery

19/ABR/2013 6.601 visitas Ver comentarios

FractionSlider es un slider más en jQuery, como tantos otros que hay por ahí conocidos tales como el NivoSlider (uno de mis preferidos), el Galleria, etc... pero tiene una particularidad que lo hace diferente y es que cada slide puede tener sus propias animaciones, transiciones y efectos.

Es así, cada uno de los slides puede contener diferentes partes y configurar el orden de aparición, efecto y animación junto al tiempo de duración.

LEER ENTRADA