responsive elements

Como hacer que cualquier elemento se adapte a cualquier ancho

Responsive Elements es un genial recurso para quienes trabajan con diseños adaptativos (aka responsive design)
[flippingCard type=”over” float=”left” width=”328px” height=”208px” background=”#FFF” border=”none”]
[fc_front]
Elementos adaptativos
[/fc_front]
[fc_back]
Este plugin, basado en jQuery, permite que cualquier elemento se adapte y responda al área que ocupa
[/fc_back]
[/flippingCard]
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

[space size=”10″]

<script src="jquery.min.js" type="text/javascript">
</script><script src="responsive-elements.js" type="text/javascript">

Luego hay que declarar los elementos que serán afectados

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


Sitio Web | Responsive Elements

Como manejar Adaptive Images en HTML

Como manejar Adaptive Images en HTML

Como entregar pequeñas imágenes en pequeños dispositivos

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

Avanzados efectos de scroll con SuperScrollorama

Avanzados efectos de scroll con SuperScrollorama

John Polacek, el autor de Scrollorama ha publicado recientemente una versión con esteroides de su popular plugin; se trata de SuperScrollorama

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

Como redimensionar una imagen de fondo con jQuery

Como redimensionar una imagen de fondo con jQuery

Background Stretcher (aka bgStretcher 2011) es un script basado en jQuery que permite agregar una gran imagen—o bien un conjunto de imágenes, si el diseño Web lo requiere—y redimensionar cada una, de manera proporcional, al tamaño de la ventana del navegador para llenar así toda el área.

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

KeyBoarder - una librería para mostrar atajos de teclado

KeyBoarder | una librería para mostrar atajos de teclado

keyboarder
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
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