BLOG DE DISEÑO WEB CORUÑA

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

Antes y después en fotografías con jQuery

Antes y después en fotografías con jQuery

4.932 visitas

ClassyCompare es un plugin del que no hay mucho que explicar, sirve para mostrar un antes y un después en nuestras fotografías de un modo muy sencillo y con un agradable efecto de arrastre del ratón para ver una u otra imagen.

Pues eso, se basa en 2 imágenes, una que representa el ANTES y la segunda que representa el DESPUES. El plugin se encargará de ponerlas en la misma posición y de aplicar una máscara según desplacemos el ratón de izquierda a derecha o viceversa.

LEER ENTRADA

Basic jQuery Slider responsive, liviano y configurable

Basic jQuery Slider responsive, liviano y configurable

17.152 visitas

Siempre queremos poner un slider en nuestras webs y nos esforzamos en buscar el más cool (o guay en versión spanish), con miles de efectos, que abarque miles de formatos en su contenido y que sea adaptativo (responsive in english)... para luego, no hacer nuestras webs adaptativas, poner sólo imágenes y usar siempre el efecto FADE... verdad?

Pues bien, buscando algo bueno bonito y barato, dí con este slider, realmente muy simple pero excesivamente potente y fácil de configurar o personalizar. Está basado en jQuery, como no, y su CSS tiene 13 líneas! (acabo de dejar de alucinar)... pero vamos a verlo a fondo.

LEER ENTRADA

Listado de registros con scroll infinito en PHP, Ajax y jQuery

Listado de registros con scroll infinito en PHP, Ajax y jQuery

32.541 visitas

ACTUALIZACIÓN SEPTIEMBRE 2013: A pedido de un usuario en los comentarios, hay una variante del scroll infinito en PHP y Ajax lanzado desde un botón y no al desplazar el scroll al final de la página. Si quieres ver la demo, vete a este enlace.

Ahora que ya conoces las redes sociales, porque las conoces, no? habrás visto que la mayoría utiliza el scroll infinito de datos, es decir, a medida que vas bajando el scroll en la pantalla, se van cargando automáticamente nuevos registros de tus bases de datos.

LEER ENTRADA

Aceptar coma o punto como decimal en jQuery Validate

Aceptar coma o punto como decimal en jQuery Validate

17.142 visitas

Este minipost surge porque me encontré en la necesidad de aceptar el punto o la coma, indistintamente, como decimal en un campo de tipo numérico y aplicándole un rango de valores permitidos.

Lógicamente, estamos hablando de jQuery Validation plugin que, como buen plugin escrito en inglés, utiliza el punto como separador de decimales y la coma como separador de miles.

LEER ENTRADA

Prueba tus maquetaciones de Responsive Web Design

Prueba tus maquetaciones de Responsive Web Design

5.365 visitas

Motivado por la aparición de Responsivator, me he decidido a liberar un clon que testea tus diseños web maquetados de manera adaptativa o, como todos lo conocemos, en Responsive Web Design.

El script es muy sencillo, se ocupa mediante una llamada en Ajax de cargar diferentes estados de la url introducida en el área indicada abajo, que no deja de ser un iframe para cada tamaño.

LEER ENTRADA

STOC un plugin para crear una tabla de contenidos con jQuery

STOC un plugin para crear una tabla de contenidos con jQuery

4.187 visitas

Muchas veces nos encontramos con tener que mostrar gran cantidad de texto en una web, el ejemplo más claro de ésto es el típico aviso legal de las webs, que son unos enormes textos que nadie lee, pues bien, este plugin hará más fácil al usuario encontrar los títulos de los apartados creando una elegante tabla de contenidos (TOC de Table of Contents en la lengua de Shakespeare) o índice en castellano.

Lo genial de este plugin, además de ser livianito -pesa sobre unos 5kb- es que no te necesita para crear la lista. Sólo le debes indicar la cantidad de cabeceros (léase H1, H2, H3...) que debe considerar para crear la tabla. Unicamente habrá que indicar la profundidad, por ejemplo, 3, entonces el plugin creará una lista de contenidos teniendo en cuenta los h1, h2 y h3 del div que le indiques. Así de fácil, así de bonito.

LEER ENTRADA

Lazy load, carga tus imágenes bajo demanda con jQuery

Lazy load, carga tus imágenes bajo demanda con jQuery

14.316 visitas

Lazy Load es un plugin de jQuery escrito en JavaScript que se encarga de retrasar la carga de imágenes en las páginas web largas. Las imágenes que se encuentren fuera del viewport (parte visible de la página web) no serán cargadas antes de que llegues a su ubicación bien sea con la rueda del ratón o la barra de scroll. Resumiendo, hace justamente lo contrario que la precarga de imágenes.

Usar Lazy Load en páginas web largas que contienen muchas imágenes de gran tamaño hará que la carga de la página vaya más rápido. Incluso, va más allá, ya que el navegador estará en el estado listo después de cargar únicamente las imágenes visible de un primer vistazo omitiendo aquellas que no se vean hasta que te desplaces por la web. En algunos casos, también puede ayudar a reducir la carga del servidor.

LEER ENTRADA

Elegir entre PDO y Mysqli para programación en PHP

Elegir entre PDO y Mysqli para programación en PHP

32.022 visitas

Como muchos ya sabréis, yo me enteré a la fuerza, PHP ha decidido marcar como obsoletas todas las funciones nativas de mysql, es decir, que si utilizas mysql_query o mysql_select_db o cualquier cosa que empiece por mysql_, entonces, estás obsoleto como yo.

Pues bien, PHP, nos propone dos opciones para reemplazar nuestros códigos que son PDO y Mysqli o Mysql Improved (un mysql mejorado). Cabe destacar, que cualquiera de estos dos métodos requiere de PHP 5.0 en el caso de Mysqli y PHP 5.1 en el caso de PDO.

LEER ENTRADA

Adapt.js para Responsive Web Design con javascript

Adapt.js para Responsive Web Design con javascript

6.043 visitas

Adapt.js es un archivo JavaScript muy livianito (848 bytes minified) que determina qué archivo CSS debe cargarse antes de que el navegador renderice o muestre tu página. Si el navegador se inclina o se cambia el tamaño, Adapt.js simplemente comprueba su ancho, y sirve sólo el CSS que se necesita, cuando se necesita.

Un posible inconveniente de Adapt.js es la posibilidad de ver un breve destello de contenido sin estilo mientras se cambia de fichero CSS (piensa en ello como "Ajax" para CSS) aunque nos avisan desde su web que se hizo todo lo posible por evitar el destello creando hojas CSS de 3kb de peso.

LEER ENTRADA

Resumen de Subflash 2012 en Vigo

Resumen de Subflash 2012 en Vigo

5.398 visitas

Un año más, dejamos atrás una nueva edición de Subflash, un evento que no te debes perder si te interesa el desarrollo web, o eres flashero o simplemente quieres pasar un fin de semana con gente extraordinaria.

Este año fue especial, fue la primera vez que se realizó en tierras gallegas, concretamente en Vigo. Y fuimos pocos, es verdad, pero yo me fui de ahí con la buena sensación de haber podido hablar con cada uno de los asistentes, al menos 5 minutos con cada uno, cosa que en ediciones anteriores, al ser tanta gente, era casi imposible.

LEER ENTRADA

Entendiendo el concepto de Media Queries en CSS3

Entendiendo el concepto de Media Queries en CSS3

7.739 visitas

Para entender el concepto de Media Query, nada mejor que la definición oficial del W3C que dice: "Una media query consiste en un tipo de dispositivo (media) y cero o más expresiones que comprueban  el estado de las características particulares de ese dispositivo. Entre las características que pueden utilizarse en una media query están las propiedades  "ancho", "alto" y "color". Mediante el uso de media queries, la presentación del contenido puede adaptarse a un rango específico de dispositivos de salida sin necesidad de modificar el propio contenido".

Traduciéndolo al idioma ´martiniano´, una Media Query es una serie de condiciones que pueden aplicarse a nuestras hojas de estilo CSS para que, según el tamaño y resolución del dispositivo, adopte una u otra forma.

LEER ENTRADA

Combobox o selects dependientes de 3 niveles con PHP y jQuery

Combobox o selects dependientes de 3 niveles con PHP y jQuery

103.859 visitas

A menudo nos encontramos con la necesidad de realizar listas o selects dependientes del valor seleccionado en un nivel superior. Lo que comúnmente llamamos combobos o selects dependientes, que al seleccionar una opción de una lista, vamos actualizando las listas de niveles inferiores o, mejor dicho, dependientes del anterior.

Traduciendo, tenemos 3 listas (las llamaremos SELECT PADRE, SELECT HIJO y SELECT NIETO), pues bien, lo que queremos es que PADRE actualice a HIJO y éste a su vez, actualice a NIETO... pero cuidado, que también queremos que si se cambia alguno de estos valores, tanto PADRE, HIJO y NIETO se actualicen sobre la marcha.

LEER ENTRADA

Tooltips sencillos con jQuery y CSS

Tooltips sencillos con jQuery y CSS

9.299 visitas

Otro nuevo plugin, Gips, para mostrar tooltips en nuestros elementos de la web con pocas líneas de código y 100% personalizables. Como siempre, necesitaremos jQuery, un poco de CSS y nuestra imaginación para combinar los estilos y efectos de nuestros globitos de ayuda.

El plugin nos permite configurar el estilo, tiempo que está visible, si se oculta automáticamente o no, la posición, el botón de cierre y todas las opciones que nos hacen falta.

LEER ENTRADA

Comprobar la fortaleza de una contraseña con jQuery

Comprobar la fortaleza de una contraseña con jQuery

13.939 visitas

Este plugin se encarga de verificar la fortaleza de la contraseña ingresada a la vez que valida que se ingrese dos veces la misma clave, mientras presenta de modo gráfico el nivel de seguridad de la cadena ingresada.

Resumiendo, te dice si tu clave es fácil de adivinar o difícil según la combinación de caracteres que contenga. Para mayor nivel de seguridad, combinar símbolos, letras -ya sean minúsculas o mayúsculas- y números.

LEER ENTRADA

Insertar Google Maps en tu web con jQuery

Insertar Google Maps en tu web con jQuery

9.245 visitas

Lo que traigo en esta ocasión es un plugin de jQuery que se encargará de hacerte facil la tarea de insertar y manipular mapas de Google Maps en tu web.

Si la API v3 de Google Maps ya es bastante más sencilla de utilizar que su versión anterior, este plugin realmente simplifica la tarea de utilizar los mapas y adaptarlos a nuestras necesidades.

LEER ENTRADA

jQuery Hint, texto de ayuda en los campos de tu formulario

jQuery Hint, texto de ayuda en los campos de tu formulario

8.161 visitas

jQuery Text box hint es un plugin que se ocupará de mostrar y esconder contenido automáticamente en los campos de nuestro formulario de contacto.

Muchas veces habrás visto que al rellenar un formulario (creo que Twitter lo tiene), ya te aparece escrito algún texto en los campos de tipo input o textarea y al hacer click sobre ellos ese contenido desaparece automáticamente, volviendo a aparecer si haces un click fuera de dicho campo.

LEER ENTRADA

Mis primeros pasos en el Responsive Web Design

Mis primeros pasos en el Responsive Web Design

10.572 visitas

En esto del desarrollo web como en la vida, siempre toca evolucionar. Y evolucionar, en términos de informática, quiere decir incorporar nuevas prácticas, nuevos conocimientos y técnicas para optimizar el flujo de trabajo, consiguiendo un producto final de mejor calidad en el menor tiempo posible.

Esta vez, le ha tocado el turno al Responsive Web Design, o diseño web responsivo... o, en cristiano, el diseño web que se adapta a todos los dispositivos, según tamaño de pantalla u orientación, sin tener distintas versiones de tu web... Qué quiere decir ésto? Que partiendo de la base de un sólo código, es decir una única página web, mediante algunos .JS y muchas líneas de CSS, obtendrás la versión adecuada para el tamaño de la pantalla de tu visitante.

LEER ENTRADA

Agregar eventos a jQuery UI datePicker

Agregar eventos a jQuery UI datePicker

16.853 visitas

Esto es magia en estado puro. Me lo encontré buscando como agregar eventos al jQuery UI datePicker para que, en lugar de seleccionar la fecha indicada, muestre una alerta o siga un vínculo desde cada día del calendario.

Encontré este código que voy a copiar y pegar tal cual... antes que me muerdan, el código no es mío, pero lo que hace, básicamente, es crear un array con los eventos a mostrar y luego capturar el evento de seleccionar la fecha.

LEER ENTRADA