BLOG DE DISEÑO WEB CORUÑA

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

Magnific Popup, lightbox bonito, responsive, liviano y para jQuery

Magnific Popup, lightbox bonito, responsive, liviano y para jQuery

10/ENE/2014 34.562 visitas Ver comentarios

Siempre que debo utilizar algún sistema para lanzar un popup, me suelo decantar por Colorbox, un plugin muy liviano pero inmensamente potente para lanzar popups bonitos (de esos que no abren una nueva ventana sino que oscurecen la actual y muestran el nuevo contenido en primer plano).

Muchas veces queremos abrir formularios, mensajes, alertas, ampliar fotografías, textos adicionales o cualquier otro contenido y estos popups son una muy buena solución.

LEER ENTRADA

Editar campos de formularios en el lugar con jQuery, Ajax y PHP

Editar campos de formularios en el lugar con jQuery, Ajax y PHP

19/DIC/2013 60.434 visitas Ver comentarios

ACTUALIZACIÓN 26-12-2013: Como me han vaciado la tabla con las pruebas, he puesto una mini validación comprobando que el valor ingresado no esté vacío ni con espacios en blanco.

Señoras y señores, pasen y vean... lo que traigo a continuación es un pequeño código que llevo mucho tiempo queriendo hacer y que aplicaría en muchísimos proyectos y por la razón que sea nunca lo hago.

LEER ENTRADA

Mensaje para aceptar el uso de cookies con jQuery en pocas líneas

Mensaje para aceptar el uso de cookies con jQuery en pocas líneas

11/DIC/2013 30.339 visitas Ver comentarios

¡ATENCIÓN! ESTE CÓDIGO NO ES VÁLIDO PARA UTILIZAR A PARTIR DEL 25/05/2018 YA QUE NO SE ADAPTA A LO ESPECIFICADO EN EL NUEVO RGPD. ÚSALO BAJO TU RESPONSABILIDAD.

Hace meses que todos conocemos, o deberíamos conocer, que existe una, vulgarmente llamada, Ley AntiCookies  cuyo objetivo, básicamente es tener que requerir un consentimiento previo del usuario antes de instalar cookies que permitan, en cristiano, vigilar todo lo que hace el usuario en tu web.

Aunque en un principio era obligatorio pedir confirmación antes de llenarle el navegador de cookies, parece ser que el gobierno español ha dado o daría marcha atrás y ya no se necesitaría un botón para que el usuario autorice la instalación, sino que bastaría con que nuestro visitante continuara la navegación para que se entienda que está de acuerdo con la instalación de dichas cookies.

LEER ENTRADA

Herramientas útiles para maquetar webs adaptativas o Responsive Web Design

Herramientas útiles para maquetar webs adaptativas o Responsive Web Design

05/DIC/2013 19.661 visitas Ver comentarios

Quien me conoce sabe que soy muy fan del Responsive Web Design o diseño web adaptativo o el responsive, como he oído llamarlo. En mis inicios, me basé en el framework Skeleton para tomar las mediaqueries necesarios, el CSS con los reset y tamaños de campos en los formularios o textos, pero a medida que fui avanzando, me lancé a hacer mis propias hojas de estilos y pararme a pensar si realmente me hacía falta usar un framework o podía valerme de mis propios conocimientos.

Incluso me he lanzado a crearme mi propio grid responsive únicamente en CSS que, para cosas básicas o proyectos no muy complejos, me viene muy bien.

LEER ENTRADA

Selecciona múltiples items mediante autocompletar con jQuery Tokeninput

Selecciona múltiples items mediante autocompletar con jQuery Tokeninput

04/DIC/2013 6.127 visitas Ver comentarios

Mi amigo (y gran jugador de padel) David, me ha enviado el enlace de jQuery Tokeninput, un plugin que nos permite buscar y seleccionar múltiples items de una lista predefinida con opción de autocompletar, que se transformarán en etiquetas en nuestro campo de búsqueda similar al estilo que muestra facebook en sus hashtags o cuando etiquetas gente.

Es muy configurable ya que nos permite buscar valores desde una lista predefinida tanto en local como en remoto, ya que utiliza jSON y jSONP para hacer llamadas ajax entre dominios (ya sabemos todos lo doloroso que es a veces hacer llamadas remotas con javascript).

LEER ENTRADA

Cuenta atrás de caracteres en textareas con jQuery

Cuenta atrás de caracteres en textareas con jQuery

20/NOV/2013 4.600 visitas Ver comentarios

Sin duda alguno este es uno de los plugins que cuentan los caracteres que pueden escribirse en un textarea más sencillo y liviano. Creo que no llega a 1kb de peso y cumple con su cometido muy pero muy bien.

Consiste en dos elementos, un textarea y un div que servirá para ir mostrando el número de caracteres restantes, el cual se pondrá con color de fondo en rojo cuando hayamos alcanzado el límite indicado.

LEER ENTRADA

Efecto fotos apiladas únicamente con CSS3

Efecto fotos apiladas únicamente con CSS3

07/NOV/2013 4.734 visitas Ver comentarios

Esto que traigo es un minitutorial para crear un bonito efecto de fotos apiladas utilizando exclusivamente CSS3 sin plugins ni agregados externos ni nada que te complique la vida para aplicarlo.

El efecto, se puede ver en la captura que aparece aquí arriba o en la demo (pulsando en el botón azul) y, básicamente, lo que hace es crear capas similares a la que muestra la imagen utilizándolas como sombras de la capa principal.

LEER ENTRADA

Formularios en HTML5 con tooltips y jQuery validate

Formularios en HTML5 con tooltips y jQuery validate

04/NOV/2013 7.473 visitas Ver comentarios

El otro día mi amigo Andrés Karp me recordó de manera amistosa que hacía mucho tiempo que no escribía nada para ADWE, así que como me entró un sentimiento enorme de culpa, he escrito el post más largo que escribí en mi vida...

En él, he preparado un mini tutorial para tunear nuestros formularios, usando métodos propios para la validación con jQuery Validation, mostrar los mensajes de un modo no intrusivo e incluso, incorporarle unos más que útiles tooltips o textos de ayuda.

LEER ENTRADA

Calendario de Eventos Responsive en HTML5, colorbox y base de datos MySQL

Calendario de Eventos Responsive en HTML5, colorbox y base de datos MySQL

28/OCT/2013 28.952 visitas Ver comentarios

Si ya habías visto el calendario en HTML5 que nos dejaba Eric Wenneberg en mi anterior entrada, sabrás que soy muy fan de este tipo de widgets porque es muy común que me los pidan en proyectos en los que participo o he participado.

Pero me gusta tener a mano un recurso que pueda personalizar a mi gusto, no soy muy fan de jQueryUI, no soy fan de su peso y ni de su estética en general, por eso me gustan tener alternativas a las que les pueda meter mano con facilidad.

LEER ENTRADA

fullPage.js, páginas web a pantalla completa con scroll vertical y horizontal

fullPage.js, páginas web a pantalla completa con scroll vertical y horizontal

17/OCT/2013 14.196 visitas Ver comentarios

Este plugin me lo envía Alvaro Trigo, autor de fullPage.js, un plugin de jQuery para crear impresionantes páginas web a pantalla completa con desplazamiento vertical y horizontal.

Resumiendo, viene a ser una especie de presentación de diapositivas a pantalla completa con eventos que nos permiten pasar de una página a otra con un suave desplazamiento animado.

LEER ENTRADA

Calendario de eventos en jQuery y HTML5 responsive

Calendario de eventos en jQuery y HTML5 responsive

10/OCT/2013 51.413 visitas Ver comentarios

El siguiente código es para mostrar por pantalla un sencillo calendario, muy personalizable y adaptable a las diferentes resoluciones ya que todos los valores están expresados en EM o porcentajes (únicamente su alto está expresado en pixels para mantener el espacio fijo).

Está basado en el Flatmin responsive calendar que encontré desde la web de plugins de jQuery (todo el crédito es para Eric Wennerberg), pero al intentar hacer una demo, me he dado cuenta que tiene varios fallos que voy a comentar a continuación.

LEER ENTRADA

Selectores de rangos numéricos en jQuery

Selectores de rangos numéricos en jQuery

23/SEP/2013 6.143 visitas Ver comentarios

Todos sabemos, supongo, que HTML5 introduce nuevos tipos de campos para nuestros formularios. Entre las nuevas incorporaciones, tenemos campos de tipo email, de tipo number, de tipo date y muchos más.

Aunque la mayoría de las virtudes de estos nuevos campos los vemos en los dispositivos móviles, ya que nuestro smartphone nos abrirá el teclado que corresponda a cada tipo de campo o un calendario en el caso del tipo date, hay un campo nuevo en especial al que quiero referirme en esta entrada.

LEER ENTRADA

Grid CSS adaptativo sin frameworks

Grid CSS adaptativo sin frameworks

13/SEP/2013 9.401 visitas Ver comentarios

Empezando por el principio, tengo que decir que un Grid es una rejilla o sistema de columnas que, generalmente tienen como límite 12 o 16 bloques verticales definidos en nuestra hoja de estilos CSS.

Si bien hay muchísimos frameworks CSS que nos dan grids hechos, en opciones de columna de tamaño fijo o variable, yo soy de los que le gusta hacerse sus propios sistemas, entonces, aunque te dé una lista de frameworks que deberías mirar si te interesa la maquetación en base a una rejilla, te dejo un grid hecho en casa, sencillo, con las opciones básicas, es decir, las columnas.

LEER ENTRADA

Plugin jQuery para crear guías paso a paso

Plugin jQuery para crear guías paso a paso

02/SEP/2013 4.779 visitas Ver comentarios

Cuando tenemos que explicarle a nuestros visitantes las nuevas funcionalidades o los pasos que debe seguir para usar nuestro sistema, nos viene como anillo al dedo tener un plugin como jQuery Tourbus a mano.

Este plugin toma los elementos que creemos en orden, dentro de una lista ordenada (OL) y convertirla en un visual paso a paso o recorrido (tour) de aquellas secciones que marquemos para cada elemento LI.

LEER ENTRADA

Color Picker jQuery simple y liviano para tus webs

Color Picker jQuery simple y liviano para tus webs

28/AGO/2013 3.704 visitas Ver comentarios

Muchas veces nos encontramos en la necesidad de incorporar a nuestros CMS o gestores de contenido, un selector de color para que el usuario personalice determinadas secciones o colores de nuestra web.

Si alguna vez utilizaste un editor de texto wysiwyg (what you see is what you get), sabrás que todos traen opciones para personalizar el color de texto y de fondo, del mismo modo que un procesador de texto como Word o incluso la ventana de componer un nuevo correo de gmail o cualquier otro gestor de correo.

LEER ENTRADA

Easy Responsive Tabs to Accordion (pestañas a acordeón con jQuery)

Easy Responsive Tabs to Accordion (pestañas a acordeón con jQuery)

22/AGO/2013 8.924 visitas Ver comentarios

En estos tiempos donde el diseño web adaptativo (Responsive Web Design mola más) está de moda, tener en nuestras páginas webs un sistema de pestañas puede dificultarnos la presentación cuando nos centramos en la vista para dispositivos móviles, donde contaremos con un viewport de 320px como máximo...

Entonces, es una buena alternativa transformar este sistema de pestañas en un acordeón para no perder ni funcionalidad ni contenido.

LEER ENTRADA

Unslider, slider responsive en jQuery de 3kb de peso

Unslider, slider responsive en jQuery de 3kb de peso

06/AGO/2013 7.432 visitas Ver comentarios

Este pequeño y sencillo plugin es un slider de tan sólo 3kb de peso que se limita a hacer eso, animar diapositivas que pueden ser tanto imágenes como contenido rico en HTML. Puede configurarse con CSS y, al ser responsive, incluye una función de soporte de teclado para pasar los slides manualmente.

No incluye ningún efecto especial, ni fades ni nada que no sea movimiento de derecha a izquierda. Es totalmente personalizable y tiene muy pocas líneas de código, además de estar éste en Github con lo que es 100% opensource.

LEER ENTRADA