¿Recuerdan ese efecto que animaba una pagina de contenido como si fuera un libro cuyas paginas se cambiaban con el mouse? Sí, ese efecto que hacia que todos odiaran Flash y que era una forma de no pensar demasiado al implementar un diseño.
Turn.js es el efecto en HTML5 y Javascript. De Emmanuel Garcia (@blasten), nativo de Venezuela, viviendo en Cincinnati.
Ventajas de Turn.js por encima de Flash
Es (más o menos) cross browser, aprovechando la aceleración por hardware de Webkit, usando transformaciones y translaciones 3D de CSS3 y eventos touch. Por lo que funciona "bien" en navegadores móviles y tablets.
Además, tiene todo lo bueno de HTML. URLs "casi" profundas, texto seleccionable e indexable por Google, la flexibilidad de diseño de un sitio normal en HTML y CSS, así como interactividad interna.
Desventajas de Turn.js
En las desventajas: ESTO ERA HORRIBLE EN EL 2006 CON FLASH Y LO SIGUE SIENDO EN EL 2012 CON HTML5. Por favor no lo usen para un sitio entero. Si un cliente quiere esto como la base de todo su sitio, despidelo. El único caso donde veo esto funcionando es como un demo de cómo quedaría una versión impresa real.
El problema del Page Flip, con Flash o con Turn.js, sigue siendo que es una solución perezosa desde un punto de vista de interfaz. Una revista que llegue a la web tiene que aspirar a una interfaz tipo Flipboard, NO a una interfaz que "simule" el papel.
Esto, claro, no quita el merito técnico que tiene Turn.js. Sólo pesa 6KB y obviamente es de código abierto en Github, además de ser cross platform incluso en móviles. Vale la pena aprender del código.
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
Por Juan el 08 de Febrero de 2012
Juan-blog :
Por el 08 de Febrero de 2012
Mientras seguiré revisando los post de CL
Saludos
Por Inyaka el 08 de Febrero de 2012
Por D_avalos el 08 de Febrero de 2012
Por gzaloprgm el 08 de Febrero de 2012
Siendo que el efecto es una máscara, una rotación y un par de degradados, no debería andar mucho más fluido? me gustaría ver una version hecha con webGL...
Freddie :
Wow, nunca he despedido a un cliente, creo que así no funciona.
Por David Cespedes el 08 de Febrero de 2012
Para los que tiene iPad y quieren ver una revista hecha totalmente en HTML5 y CSS3 vayan a http://asidemag.com/ no tiene el efecto de fip pero esta increible! y ya la mayoria de cosas las podemos hacer con lo que nos han enseñado en #mejornado.la
tecmaniaco :
Kinduff :
Freddie :
Wow, nunca he despedido a un cliente, creo que así no funciona.
Por Renato el 09 de Febrero de 2012
Estoy de acuerdo en que su uso no puede ser en toda la web, pero no estoy de acuerdo con que todo tenga que ser Flipboard, ese análisis lo debe hacer la persona que lo implementara de acuerdo al objetivo de su diseño.
Por CaliboWeb el 09 de Febrero de 2012
Freddie :
Don't worry, tu me puedes explicar. Entiendo que puedas dejar clientes, pero ¿Despedirlos? Por simple definición no funciona. Si he rechazado clientes y he dejado proyectos por motivos de su lado.
Explícame porfavor que no entiendo.
Renato-blog :
Kinduff :
Freddie :
Don't worry, tu me puedes explicar. Entiendo que puedas dejar clientes, pero ¿Despedirlos?
tecmaniaco :
Por DiegoVelevu el 11 de Febrero de 2012
[html5 no llega a competir en la misma categoría que Away 3D]
Por Kineticfront el 11 de Febrero de 2012
Por byron el 13 de Febrero de 2012
Por arcangel1995 el 14 de Febrero de 2012
¿Y qué opinan de esto?
http://html5lounge.com/audiocuentoipad/
Es nuestro propio pageflip, aunque en este link que les comparto tenemos subida la primera versión, ahora está muchísimo mejor, con nuevas características, animaciones dentro de páginas, mejor rendimiento, etc.
Ya se hizo algo de discusión en fdw: http://www.forosdelweb.com/f175/audiocuentos-html5-para-ipad-958836/ respondiendo el por qué funciona en safari/ipad.
Saludos!
Por dual3nigma el 15 de Febrero de 2012
Por barna09 el 20 de Febrero de 2012
saludos....
Por JessikLynch el 21 de Febrero de 2012
Por Pha el 21 de Febrero de 2012
Respecto a las supuestas "ventajas" sobre versiones flash, no estoy ni medio de acuerdo.
1) No es crossbrowser (ni siquiera "mas o menos"). Que funcione en dispositivos no significa que lo pueda ver la mayor parte de la gente en cualquier cosa que tenga un navegador (en ie8 ni se ve...). Y a saber como funciona de "rapido" en segun que dispositivos/navegadores, y si da problemas o no hace lo que tiene que hacer en otros navegadores diferentes a webkit.
2) Que digan que esta acelerado por hardware da todavia mas credito a los "pageFlip flash", los cuales ni siquiera utilizan "stage3D" ni gpu, sino que son pura cpu, y aun asi este "pageFlip javascript" es bastante mas tosco y menos "suave" que cualquier pageFlip flash en el mismo equipo/navegador.
3) En cuanto a las "url profundas" (deep linking) funciona exactamente igual que cualquier desarrollo flash que utilice un sistema tipo "swfaddress" (estoy por apostar que eso es lo que usan en "turn.js"). El problema del deep linking es exactamente igual que javascript. De esto no te libras.
4) A pesar de ser un "producto" o desarrollo perfectamente valido para ordenador (en este caso vale para ambas, flash y javascript, obviamente), no creo que sea muy "usable" en un smartphone (quizas si en un tablet, pero habria que ver "como va"...), en el que no se ve "una mierda". Navegar en algo que no este optimizado para movil es un coñazo, sin mas, salvo que sea "texto puro" y quieras leer algo (utilizando el zoom) simplemente por informarte.
5) Este punto anterior reduce su interes en que funcione en dispositivos. Por tanto, el experimento esta bien, pero no le veo una utilidad real como "producto vendible".
6) En definitiva, al Cesar lo que es del Cesar. Flash/actionscript (incluso sin stage3D y todo lo que va a venir, aplicaciones para dispositivos incluidas...) sigue siendo mas optimo (superior) para este tipo de desarrollos y productos.
Por bansiridiscente el 02 de Junio de 2012
Además, debo coincidir con Freddier y Pha: este efecto tal cual de funcional ya deja mucho que desear. Al menos ésta forma de implementarlo parece ser obsoleta y poco acorde a la realidad actual en la que cada vez más gente se conecta desde un dispositivo móvil (dígase tablet, smartphone, etc).
Por FabVale el 05 de Junio de 2012
Me evitas usar flash pfff
Por Carlos el 18 de Julio de 2012
Por beatmaster el 27 de Marzo de 2013
Por ahgfh el 31 de Mayo de 2013
QUIEN PROGRAMOS ESTA PAGINAS ESTA CAGADA....................... WUAKAKAKAKA LA
JEJEJE
Por alito el 06 de Diciembre de 2013
con los dias luego de hacer edit pages muestra solo la mitad de las paginas y no hay una guia para solucionar este problema
Por Ang1e el 06 de Enero de 2014
Por SergioSanchez el 31 de Mayo de 2016