Implementar acordeón de la home de Mozilla.org en forma de plugin de WP

[stripTM]

Mejorar el carrusel de portada, desde el html que lo genera (listas ul/li) hasta las funcionalidades (slide en pantallas táctiles,,,).

[skozz]

En qué sentido queremos mejorarlo? En diseño? Puedo encargarme yo, pero me gustaría saber si tenéis algo en mente concreto o le doy riendas sueltas a mi imaginación.

[stripTM]

Sería que el html que genera sea más limpio, el actual abusa de los atributos data- realmente no haría falta ninguno. Luego todo debería quedar en un: -ul class="carrusel" -li>...aquí los elementos de cada promoción, título, descripción, imagen, etc /li> -li>.../li> -li>.../li> /ul>

[jdgg1983]

Quería saber en que punto está el carrusel y si aun puedo aportar. Dejando el carrusel con diferentes efectos de transición, carga de imagenes de forma dinámica, etc.

[stripTM]

Esta tarea sigue pendiente, antes de los efectos lo que hay que conseguir es el html limpio, sino seguimos con lo mismo.

[fjaguero]

Podemos hacerlo manualmente si el propio slider necesita muchas funcionalidades. Otra sería ver otro plugin más limpio.

[stripTM]

Pues viendo la frecuencia en la que actualizamos el slider, no me parece mal tenerlo hecho a mano.

[fjaguero]

Me refería a hacerlo a mano si NO necesita funcionalidades complejas. Ok, habría que ver que funcionalidades se necesitan. ¿Sólo imagen, posición y link?

[stripTM]

Es que incluso me apostaría algo a que el carrusel mostrase el orden de los elementos aleatoriamente y lo sustituimos por poner aleatoriamente uno de los 4 items prescindiendo del cambio y medimos en número de visitas antes y después no va a variar.

Creo que los carruseles fueron una moda para meter en poco espacio mucho contenido con la falsa idea de que la gente se queda mirando mientras eso da vueltas.

[fjaguero]

Correcto, yo soy anti-carrusel por eso, no aporta casi. Mejor la home de Mozilla con 4 ideas fijas que se ven de un plumazo.

[fjaguero]

Entonces dejamos definido que implementaremos el mismo bloque de slides de mozilla.org a modo de plugin de Wordpress configurable. ¿Qué te parece @bernimel @stripTM?

[bernimel]

¿Esto es para nuestra home? A mi me parece bien. ¿En móvil sería igual?

[stripTM]

Si, gusta más que el carrusel además al ser más rígido en el numero de elementos evita tener carruseles gigantes.

[fjaguero]

@bernimel sería como el de Mozilla.

[bernimel]

Nice!

[imfernandomontes]

Cómo va esto?

[stripTM]

@tarefer Parece que no hay nadie trabajando en ello ¿quieres mirarlo tu?

[imfernandomontes]

si me gustaría contribuir. Al parecer se desea en html puro. Cierto?

[stripTM]

Dentro de lo posible que sea únicamente html y css, si hubiese que usar javascript que sea para lo mínimo, escuchar eventos y modificar algún class que determine el estado del javascript.

Parece que en mozilla.org ya no está el acordeón que comentaba @bernimel pero si lo lo conocías lo que hacía que que cuando seleccionabas alguno de los elementos este se destacaba creciendo y los otros quedaban más pequeños.

[imfernandomontes]

excelente, algo similar a http://tienda.ecoblitz.com/ dale un vistazo y me dices.

[stripTM]

Eso es :-)

[imfernandomontes]

Ok soy nuevo en colaborar, me pongo al tanto de como debo hacer para implementar ese codigo para que sea tal cual aparece.

[stripTM]

Una manera muy rápida es te bajas el html de la portada [1] en el head le añades un para que desde cualquier servidos o tu localhost sigas viendo el diseño. Y metes al final tu css, js y vas haciendo las modificaciones del html que vayas viendo.

Nos lo vas enseñando y una vez decidamos que es diseño/fucionalidad es la que queremos es cuando nos 'pegaríamos' haciendo el plugin de WordPress

[1] view-source:www.mozilla-hispano.org

[bernimel]

Hola @tarefer, ¿avanzaste algo? Estamos planteando la posibilidad de activar este carrusel con nuevos contenidos [1] y si además viene una funcionalidad mejor y un código más limpito ... ¡¡3 en 1!! :)

Si no, ¿alguien puede ponerse con esto?

[1] https://foro.mozilla-hispano.org/t/cambio-en-carrusel-de-portada-del-portal/19514/20

[bernimel]

Hola,

Por comentar un poco más sobre esto, además de la referencia que puso @tarefer listo aquí unas cuantas más que he encontrado, a ver qué os parecerían:

http://webcodebuilder.com/examples/flexslider-kwiks/demo.html http://www.egrappler.com/raccordion/demo2.htm http://www.madeincima.it/download/samples/jquery/easyAccordion/ http://slidorion.com/

[stripTM]

Por código los que más me gustan son: http://webcodebuilder.com/examples/flexslider-kwiks/demo.html http://www.madeincima.it/download/samples/jquery/easyAccordion/

Me parece que el último (easyAccordion) no está preparado para móviles.

[bernimel]

Veamos....

El primero es mucho más gráfico y potente visualmente, llamará más la atención, pero tiene problemas de lectura. Ni siquiera se leerá el titular de cada destacado.

El segundo es súper básico gráficamente y tiene lectura perfecta. ¿Se podrían tocar los estilos? ¿Se podría hacer por ejemplo que las imágenes (muñecos) fuesen más grandes? ¿O que el fondo fuese una imagen en lugar de blanco?

[stripTM]

Si, la pinta puede ser la que queramos, por lo que veo el plugin sólo se encarga de hacer las transiciones.

[bernimel]

Genial. Entonces, ¿siguientes pasos? ¿Tiene que hacer alguien un diseño?

[stripTM]

Si, incluso si ya lleva los contenidos reales casi me mejor.

[pcimagen]

algo sencillo seria tres anclas y con hover(situar el cursor) que amplien su tamaño y con los mediaqueries se hace multiplataforma y ya pocas lineas Alguien tiene un diseño propuesto?

[pcimagen]

La idea es no usar js? solo css y html?

[fjaguero]

@stripTM estaba comentando eso si no recuerdo mal