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+
]]>
KeyBoarder es un proyecto alojado en Google code cuya función es hacernos la cosa bien fácil a la hora de mostrar atajos de teclado (aka shortcuts) en nuestros sitios Web.
KeyBoarder convierte automáticamente las referencias textuales de atajos de teclado en las representaciones gráficas correspondientes. El proceso es rápido, la librería—escrita en Javascript—es independiente de cualquier otra librería utilizada (por ejemplo, jQuery), lo que insume el uso de recursos casi al mínimo.
Demostración de la teclas de atajo en Open Office Writer
KeyBoarder - una librería para mostrar atajos de teclado
Desde la perspectiva del diseño KeyBoarder introduce varias CLASSes en CSS muy atractivas; lo cual permitiría utilizarlas en cualquier otro proyecto o diseño Web.
Un ejemplo—del markup—a continuación (para mostrar ALT+X):
A lower limit can be set on the number of consecutive keys that must be present, in order for shortcut rendering to take place. e.g. rendering ALT + X but not ALT
Sitio Web | KeyBoarder
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+
]]>
MathJax es una librería Javascript Compatible con todos los navegadores modernos, MathJax es una librería open source que se basa en Ajax la cual permite renderizar ecuaciones matemáticas.
Como insertar ecuaciones con MathJax
Este script toma la sintaxis de LaTeX para renderizar—mediante las fuentes provistas—las ecuaciones correspondientes.
Las API pueden sencillamente ser integradas para el uso en cualquier proyecto Web.
Sitio Web | MathJax
Vía | Arantxa
Podés encontrar a Daniel en Google+
]]>Video | 1:30 min
Como agregar etiquetas a las imágenes con Stipple
Un excelente recurso en Javascript que ofrece la posibilidad que el visitante interactúe con el contenido.
Cómo funciona Stipple
Una vez activado Stipple, es posible etiquetar objetos en las fotos mediante un editor inline; de esta forma se agregan zonas interactivas sobre la imagen—con formas de pequeños puntos—para luego mostrar información adicional.
Sitio Web | Stipple
Podés encontrar a Daniel en Google+
]]>- debe poder ejecutarse en cualquier navegador que soporte los estándares; preferentemente HTML5, CSS3 y Javascript
- debe ser usable en cualquier navegador que corra Javascript
- la página debe cargarse rápidamente
Una calculadora en el navegador
La calculadora trabaja adecuadamente en iPhone y en iPad Touch y otras consideraciones pueden leerse en el blog del autor: Simple online calculator using HTML and Javascript
Sitio Web | calc8.com
Licencia | GPL3
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+
]]>