La idea—si bien simple—se le ocurrió a Kumail Hunaid (diseñador y desarrollador de aplicaciones Web) y es muy sencillo implementarla. Sólo hay que cargar, antes del cierre de las etiquetas de cabecera (aka head) de la página Web, la librería de jQuery y luego este pequeño script
<script type="text/javascript" src="jquery.min.js"> </script><script type="text/javascript" src="responsive-elements.js"></script>
Luego hay que declarar los elementos que serán afectados
<div class="quote" data-respond>
Finalmente hay que declarar mediante los parámetros más grande que y menor que las CLASSes y los puntos de ruptura donde se adaptará el diseño
.quote.lt500 {background: blue}
.quote.gt150.lt300 {background: red}
De manera opcional se puede trabajar con parámetros como start, end e interval
<div class="quote" data-respond="start: 100px; end: 900px; interval: 50px;">
Sitio Web | Responsive Elements
Podés encontrar a Daniel en Google+
]]>El concepto es simple: Adaptive Images detecta el tamaño de pantalla del visitante y en forma automática crea, cachea y entrega una apropiada versión redimensionada de las imágenes incrustadas en el mark-up HTML.
Si esta es una buena noticia, la mejor es que la implementación de esta idea no require cambio alguno en el mark-up.
Hemos asistido a un rápido crecimiento en el uso de ancho de banda de escritorio; no obstante las visitas a los sitios Web desde dispositivos de manos como smartphones y tablets se ha visto incrementado de manera brusca y repentina. Estos dispositivos tienen pantallas pequeñas, muchos de ellos son lentos y trabajan con un ancho de banda muy bajo.
El impacto de carga de las imágenes, en especial atención es alto. Y la experiencia de usuario que genera la carga lenta de una imagen puede resultar en una tasa de rebote más alta que la deseada. Adaptive Images se encarga de solucionar esto.
Como manejar Adaptive Images en HTML
Ventajas de uso
- Trabaja en forma eficaz sobre el sitio Web existente
- No requiere cambios en la estructura HTML ni en el mark-up
- Trabaja sobre la filosofía el dispositivo móvil primero
- Sencilla y poderosas customizaciones
- La implementación demora sólo minutos
Implementación
- Agregar y/o modificar el archivo .htaccess y subir el archivo adaptive-images.php a la carpeta raiz del sitio Web
- Agregar sólo una línea de Javascript dentro del
<head>de la página - Agregar los valores CSS de Media Query dentro del bloque $resolutions del archivo PHO
Sitio Web & Demo | Adaptive Images
Requerimientos para el uso de Adaptive Images
- Apache 2
- PHP 5.x
- Librería GD *
* Normalmente incluída en PHP
Podés encontrar a Daniel en Google+
]]>SuperScrollorama es un plugin basado en jQuery que permite excelentes y llamativos efectos a la hora de hacer impactantes y llamativas presentaciones en una página Web.
Avanzados efectos de scroll con SuperScrollorama
Sitio Web | SuperScrollorama
Vía | Web Resources Depot
Podés encontrar a Daniel en Google+
]]>
Como redimensionar una imagen de fondo con jQuery
Este plugin trabaja como un slideshow si múltiples imágenes son utilizadas y la cantidad de efectos disponibles es variada.
Principales características
- Es un plugin no intrusivo
- Trabaja con todos los navegadores modernos
- Permite el uso de múltiples imágenes
La configuración es—verdaderamente—sencilla y este framework está robustamente documentado; como así también variada y amplia la configuración.
Sitio Web | Ajax Blender
Podés encontrar a Daniel en Google+
]]>
FitVids
FitVids es un plugin basado en jQuery que permite que los videos insertados en las páginas Web o blogs sean redimensionados—sin perder la relación de aspecto (aspect ratio)—si la ventana es redimensionada.
Implementación de FitVids
<script type="text/javascript" src="path/to/jquery.min.js"></script><script type="text/javascript" src="path/to/jquery.fitvids.js"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function(){
// Target your .container, .wrapper, .post, etc.
$("#thing-with-videos").fitVids();
});
// ]]></script>
Video | 2:04 min
Sitio Web | FitVids
Descargar desde Github
Podés encontrar a Daniel en Google+
]]>
Slides | un slideshow con jQuery
Es compatible con los siguientes navegadores: Internet Explorer 7, 8 y 9, Firefox 3+, Chrome y Safari.
Sitio Web | Slides
Versión | 1.0
Actualización | 23 Nov 2010
Podés encontrar a Daniel en Google+
]]>
Ejemplo del método .lettering(‘words’)
<p class="word_split">Lorem ipsum</p>
<script>
$(document).ready(function() {
$(".word_split").lettering('words');
});
</script>
El resultado generado por el script, es el siguiente:
<p class="word_split"> <span class="word1">Lorem </span> <span class="word2">ipsum</span> </p>
Asimismo, es posible—siempre mediante el uso de span—utilizar efectos diferentes para cada letra.
Sitio Web | letteringjs.com
Podés encontrar a Daniel en Google+
]]>
dualSlider | un slider dual basado en jQuery
Sitio Web | dualSlider
Vía | Indeziner
Podés encontrar a Daniel en Google+
]]>
Cloud Zoom | efecto de Zoom con jQuery
Cloud Zoom es un script basado en jQuery que es comparable—en calidad y prestaciones—a algunos productos comerciales; la diferencia aquí, es que—además—es gratis.
Este script es pequeño, robusto, compatible con los navegadores modernos y soporta varios parámetros.
Sitio Web | Cloud Zoom
Licencia | MIT
Ver | demo
Podés encontrar a Daniel en Google+
]]>
Como mostrar listas en columnas
Easy List Splitte es un script en jQuery que facilita mucho las cosas a la hora de mostrar una lista—tanto ordenada como desordenada—en 2 ó más columnas.
Este plugin requiere sólo un argunmento, esto es: el número de columnas que queremos visualizar:
$('.my-list').easyListSplitter({ colNumber: 3 });
Este plugin tiene varias fortalezas:
- no es necesario modificar el markup HTML
- sólo hay que definir el número de columnas
- el CSS es independiente del plugin
El orden de visualización es por defecto de arriba a abajo > salto de columna
O bien, puede configurarse ordenado a través de las columnas
Sitio Web | Easy List Splitte
Podés encontrar a Daniel en Google+
]]>