Bloget

Aquellos que hayan visitado nuestra web (y los que no, podéis hacerlo ahora), habrán visto la animación que hay en la pantalla principal. Consiste en una animación con Fx.Elements la cual, al hacer clic en alguna de las secciones, se convierte en un acordeón horizontal. Ambos efectos han sido realizados con la librería javascript mootools 1.1.

Voy a ahorrarme la parte de hacer la animación Fx.Elements porque es trivial y sólo con ver la demo en la web oficial de mootools se consigue, aún así si teneis cualquier duda… os será resuelta e incluso puedo colgar el ejemplo de como hacerlo.

La realización del acordeón consta de tres partes, que vamos a diferenciar.

HTML:

<div id=”servicios”>
<h5 id=”h5eprs”></h5>

<div id=”eprs” class=”servicio”>Texto a mostrar en primera sección</div>

<h5 id=”h5eprd”></h5>
<div id=”eprd” class=”servicio”>Texto a mostrar en segunda sección</div>

<h5 id=”h5efrm”></h5>
<div id=”efrm” class=”servicio”>Texto a mostrar en tercera sección</div>
</div>

Tenemos una capa “servicios” que será el contenedor de todas las partes del acordeón, cada parte del acordeón está formada por una cabecera, y un cuerpo. La cabecera puede ser un div, span… en nuestro caso es un h5, el cuerpo será un div.

Como podemos apreciar en el ejemplo tenemos tres partes de acordeón; tres cabeceras (h5) y tres cuerpos (div).

CSS:

#h5eprs {
background-image: url(barra_eprs.png);
}

#h5eprd {
background-image: url(barra_eprd.png);
}

#h5efrm {
background-image: url(barra_efrm.png);
}
#servicios {
position: relative;
float:left;
}

#servicios .servicio {
float: left;
position: relative;
display: block;
width: 160px;
height: 336px;
background-repeat:no-repeat;
background-position: 25px 49%;
margin-top: -1px;
}

#eprs { background-image:url(e_eprs.png); border-right: 1px solid black;}
#eprd { background-image:url(e_eprd.png); border-right: 1px solid black;}
#efrm { background-image:url(e_efrm.png); }

El CSS en este caso no tiene gran poder para el acordeón, pero indica el posicionamiento del acordeón (#servicios), y el estilo que deseamos que tenga, tanto las partes plegadas (h5), como los contenidos (#servicios .servicio e ids de cada uno) que en este caso sólo muestran imágenes de fondo.

JS:

accordion = new Accordion(’#servicios h5′, ‘#servicios div’,
{
width: true,
fixedWidth: 390, /* Colocamos el ancho y el alto total del acordeón */
fixedHeight: 335,
display: index;
});

En este apartado, lo único reseñable es el atributo WIDTH, éste es el que determinará si el acordeón es horizontal. Los otros parámetros definen el ancho y el alto total del acordeón (el FIXEDWIDTH sólo funciona en acordeones horizontales), el parámetro INDEX indica que sección dentro del acordeón queremos mostrar cuando se visualice, en nuestro caso le pasamos el valor de la sección en la que se ha clicado, pero puede ponerse un valor fijo.

Recordad que el código JS hay que introducirlo dentro de:

window.addEvent(’domready’, function() {

//COLOCAR EL CÓDIGO DEL ACORDEÓN AQUÍ

});

Es un ejemplo fácil y sencillo, aunque crear un acordeón con mootools no es muy complicado aquí os dejo este pequeño tutorial.

Compártelo

Últimas noticias:

El blog ETConsultors ha sido invadido por los atrapantes, estos bichejos rojizos y de aspecto viscoso pueden contener premios en su interior.

Intenta cazarlos tú mismo para obtener el posible premio y líbranos de ellos, si no te atreves a tocarlos siquiera… llama a los atrapadores, ellos lo harán por ti. Se cpmenta que están empezando a caer y que el martes la plaga habrá acabado.

Ayúdanos a liberarnos de esta invasión!!

Compártelo

…

No se por donde empezar…

Ni que decir…

sólo ellos son capaces de hacer algo similar…

Ved el vídeo y comentais… algo espectacular. No os preocupeis si no sabeis inglés… yo tampoco… y no salgo de mi asombro.

He aquí el enlace:

http://es.youtube.com/watch?v=sOSk9TW7z-4

Compártelo

Así es, el buscador más usado de Internet vuelve a sorprendernos esta vez con un galardón, el premio Príncipe de Asturias de Comunicación y Humanidades por delante del periodista Manuel Leguineche (el cual, según dicen, ha llevado el periodismo a las cotas más altas) y de la Wikipedia, que también estaba nominada y con posibilidades de triunfo.

Le han concedido el premio “por poner de forma instantánea y selectiva al alcance de millones de personas el canal de internet y por favorecer el acceso generalizado al conocimiento”.

Ha sido un galardón no exento de polémica ya que muchos miembros del jurado ponían en tela de juicio el merecimiento del mismo por parte de Google ya que es una compañía tecnológica, y nunca podría sustituir al ser humano, no escribe, no edita… La pregunta es ¿se merece Google este premio? Yo, sinceramente, voto que sí.

Compártelo

Se ha confirmado por parte de Google que el core de la plataforma Android va a ser 100% software libre, cambiando totalmente la historia de los controladores multimedia, que siempre han sido cerrados.

Android usará la licencia de Apache (ASL v2) y, todo el software que utilice Eclipse como por ejemplo el plugin de desarrollo para Android sobre Eclipse, será licenciado bajo Eclipse Public License (EPL).

Por otra parte, está planteándose hacer unas pocas aplicaciones suyas como código cerrado, entre ellas GMAIL, por lo que, en ese caso, no serían parte de Android.

Compártelo