jmocana.eu

Maquetador web

contactar

Blog

¿sobre que escribo?

Archivo de Marzo de 2011

Escalar imagenes según el tamaño del navegador con Maximage

2 comentarios »

Mar29

Si lo que queremos es escalar imágenes según las dimensiones del navegador de nuestros usuarios una buena opción es utilizar el plugin de jquery Maximage desarrollado por Aaron Vanderzwan.

Maximage escala las imágenes deseadas a su máxima anchura acorde con el tamaño del navegador, el ratio de la imagen y otras opciones.

Podéis ver un ejemplo pinchando aquí. Redimensionar vuestro navegador y fijaros en como la imagen irá escalándose automáticamente.

Para empezar a utilizar este útil plugin tan sólo tendréis que descargarlo y hacer la llamada en el <head> de nuestro documento html. No os olvidéis de hacer antes la llamada a jquery

<script src="jquery.pack.js" type="text/javascript"></script>
<script src="jquery.maximage.js" type="text/javascript"></script>

A continuación insertar el siguiente script:

<script>
$(document).ready(function(){
 $('img.className').maxImage({
  isBackground: true
 });
});
</script>

Mediante la opción isBackground: true ajustamos la imagen al navegador. Por último insertaremos la clase utilizada en el script (en nuestro caso className) en la imagen que deseamos maximizar

<img class="className" src="foto.jpg" alt="descripción de la foto" />

Alguna de las opciones configurables del plugin son las siguientes:

Leer el resto de esta entrada »

Texto e imagenes en canvas con Fxcanvas. Soporte IE6+

0 Comentarios

Mar22

Fxcanvas es una implementación del elemento canvas de HTML5 para Internet Explorer. El proyecto esta desarrollado por Google y la librería tiene los siguientes requisitos:

Requisitos

  • Flash Player 9+ en Internet Explorer (Algunas versiones a partir de la 10.1 puede que no funcionen correctamente)
  • IE 5.5 +. (IE9 no lo soporta por ahora)

Fxcanvas nos permite trabajar solo con gráficos en dos dimensiones.

Uso

Descargar el comprimido en el directorio publico del servidor y pegar las siguientes llamadas js en la sección head de nuestro documento.

<head>
  <script type="text/javascript" src="/public/path/jooscript.js"></script>
  <script type="text/javascript" src="/public/path/fxcanvas.js"></script>
  <!--[if IE]><script type="text/javascript" src="/public/path/flash_backend.js"></script><![endif]-->
  <comment><script type="text/javascript" src="/public/path/canvas_backend.js"></script></comment>
</head>

Manuales de canvas

Si todavía no habéis trasteado demasiado con canvas podéis echar un vistazo a estos tutoriales

Ejemplo

A continuación realizaré un ejemplo muy básico en el que usaremos tanto imagenes como textos. Pongamos por ejemplo que nos piden realizar una gráfica con los resultados de las votaciones del balón de oro.
ver ejemplo
descargar ejemplo (86 Kb)

Leer el resto de esta entrada »