Archivo

Archivo para Septiembre, 2010

CarouFredSel: carrusel de imágenes con jQuery

Martes, 28 de Septiembre de 2010

Después de haber visto 2 sliders de imágenes hechas con jQuery y Orbit, pasaré a ver cómo crear un carrusel de imágenes con jQuery basándome en carouFredSel.

CarouFredSel es un plugin de jQuery que nos ayuda a realizar un carrusel de imágenes a partir de un código HTML. El carrusel lo podemos hacer en vertical u horizontal, automático o clickando en los extremos…

Antes de nada tendremos que descargar este plugin. Una vez descargado lo guardaremos en la carpeta donde almacenemos los ficheros javascript (luego lo referenciaremos).

Así que manos a la obra y empecemos ya con el código… Para empezar, añadiremos a un documento HTML con un DOCTYPE válido la inclusión de las librerías javaScript que necesitaremos. Esto lo añadiremos dentro del <Head>:

[js]


[/js]

Si queremos que nuestro carrusel pueda realizar todo tipo de transiciones, podemos añadir también lo siguiente:

[js]
[/js] Y si queremos añadir también pausas automáticas cuando el usuario se encuentra inactivo por un tiempo determinado, añadiremos: [js]
[/js]

Ahora añadiremos el código que convierte nuestras imágenes en un carrusel automático:
[js]

[/js]
En este código anterior hacemos referencia al nombre del DIV donde se alojarán las fotos a mostrar.

Por último pasaremos a crear el código HTML donde listaremos las imágenes a mostrar. Se puede hacer con un DIV o bien con una lista (yo lo haré con un DIV):
[html]

imagen1
imagenes 2
imagenes 3
imagenes 4
imagenes 5
imagenes 6

[/html]

Es importante definir los tamaños de las imágenes para que todo funcione correctamente. Y también es conveniente completar todo esto con un buen estilo de CSS.

Ahora sólo nos queda probar este ejemplo. Podéis visualizarlo en http://www.alexmontes.es/carrusel.html

También podéis consultar toda la documentación existente en la página web del plugin carouFredSel.

En mi próximo artículo profundizaré en el plugin carouFredSel, puesto que proporciona muchas configuraciones que nos permitirán personalizarlo al 100%.

¿Te gustó el artículo? Compártelo!!:
  • Facebook
  • Twitter
  • FriendFeed
  • del.icio.us
  • LinkedIn
  • Technorati
  • Ping.fm
  • StumbleUpon
  • Google Bookmarks
  • Digg
  • Meneame
  • Netvibes
  • Live
  • BarraPunto
  • Bitacoras.com
  • Reddit
  • Wikio
  • email
  • Print

A. Montes programación, web , ,

Slider avanzado de imágenes en jQuery con Orbit

Jueves, 23 de Septiembre de 2010


Una vez visto cómo crear de manera muy sencilla y rápida un slider de imágenes en jQuery con Orbit, pasaré a profundizar en el tema para personalizar ese slider. Recordad que podéis ver el resultado del slider en la página de pruebas que hice.

La personalización del slider a través de Orbit es muy sencilla. Simplemente cambiaremos un poco el código del primer ejemplo y veremos cual es el resultado.

Leer más…

¿Te gustó el artículo? Compártelo!!:
  • Facebook
  • Twitter
  • FriendFeed
  • del.icio.us
  • LinkedIn
  • Technorati
  • Ping.fm
  • StumbleUpon
  • Google Bookmarks
  • Digg
  • Meneame
  • Netvibes
  • Live
  • BarraPunto
  • Bitacoras.com
  • Reddit
  • Wikio
  • email
  • Print

A. Montes programación, web , ,

Slider de imágenes en jQuery con Orbit

Martes, 21 de Septiembre de 2010


Hace unos días leí en DiarioTHC un artículo sobre cómo implementar un Slider de imágenes en jQuery con Orbit. Me pareció muy interesante así que voy a compartirlo con vosotros, y veremos hasta donde se puede profundizar…

Antes de empezar, quería aclarar dónde podemos implementar el Slider de imágenes. Hoy en día, es muy común utilizar en la página de inicio de webs corporativas, personales o tiendas on-line para presentar productos, trabajos realizados, etc…

Y por último (y ya empezamos con el código), quería comentar qué es jQuery y Orbit: jQuery es una biblioteca o framework de JavaScript que permite simplificar la interacción con documentos HTML, manejar eventos, desarrollar animaciones y agregar interacción AJAX. En cambio, Orbit es un plugin que permite mostrar atractivos sliders de imágenes.

Ahora sí, pasemos a trabajar. Manos a la obra…

Para empezar, tenemos que descargarnos el Orbit kit y jQuery. Una vez descargados y colocados en las carpetas donde almacenemos nuestros scripts, procederemos a crear un fichero html nuevo o bien editar aquel en el que queremos añadir el slider.

Leer más…

¿Te gustó el artículo? Compártelo!!:
  • Facebook
  • Twitter
  • FriendFeed
  • del.icio.us
  • LinkedIn
  • Technorati
  • Ping.fm
  • StumbleUpon
  • Google Bookmarks
  • Digg
  • Meneame
  • Netvibes
  • Live
  • BarraPunto
  • Bitacoras.com
  • Reddit
  • Wikio
  • email
  • Print

A. Montes programación, web , ,

Microsoft publica nueva versión de EMET

Sábado, 18 de Septiembre de 2010

Microsoft ha publicado una nueva versión del complemento de seguridad EMET. Concretamente han publicado la versión 2.0.

EMET (Enhanced Mitigation Experience Toolkit) es una herramienta de Microsoft que permite incorporar a nuestras aplicaciones (a medida o de terceros) todas las nuevas medidas de seguridad que va sacando Microsoft como pueden ser DEP,ASLRSEHOP,…

En muchas empresas existe software realizado por la misma empresa, por empresas externas o bien descargado de internet. A este software no le podemos aplicar las nuevas medidas de seguridad que Microsoft saca para sus aplicaciones. Este desfase provoca que este software que estamos utilizando quede expuesto a vulnerabilidades, con todo el riesgo que ello conlleva…

EMET hay que ejecutarlo en segundo plano, creando así una capa de seguridad para nuestro software. Podemos configurar diferentes aspectos de la protección que permite EMET.

Leer más…

¿Te gustó el artículo? Compártelo!!:
  • Facebook
  • Twitter
  • FriendFeed
  • del.icio.us
  • LinkedIn
  • Technorati
  • Ping.fm
  • StumbleUpon
  • Google Bookmarks
  • Digg
  • Meneame
  • Netvibes
  • Live
  • BarraPunto
  • Bitacoras.com
  • Reddit
  • Wikio
  • email
  • Print

A. Montes programación, software ,

Microformatos: xFn

Martes, 14 de Septiembre de 2010


Una vez comentados los microformatos hCard y hCalendar y hReview, pasaré a comentar el microformato xFn.

El microformato xFn se utiliza para relaciones sociales utilizando links. Con este microformato se pretende dotar de información extra a un enlace, explicando qué relación existe entre nosotros y la persona/empresa a la que estamos enlazando. De esta manera, los lectores sabrán por qué enlazamos a otros blogs o webs. Veamos un ejemplo para facilitar la explicación:

<a href="http://www.blog1.org/" rel="compañero de trabajo">Blog de Javi</a>
<a href="http://www.blog2.com/" rel="amigo del colegio">Blog de Luis</a>
<a href="http://www.web3.es/" rel="cliente">Empresa Ficticia</a>

Leer más…

¿Te gustó el artículo? Compártelo!!:
  • Facebook
  • Twitter
  • FriendFeed
  • del.icio.us
  • LinkedIn
  • Technorati
  • Ping.fm
  • StumbleUpon
  • Google Bookmarks
  • Digg
  • Meneame
  • Netvibes
  • Live
  • BarraPunto
  • Bitacoras.com
  • Reddit
  • Wikio
  • email
  • Print

A. Montes programación, web , ,