En una plática con DS, me mostraba el sistema de 2advanced, en el que usando solamente Flash tambien se puede navegar usando los botones de "Atrás" y "Adelante" del navegador. Le comenté que es muy complejo lo que hacían ellos y que podía hacerlo mejor. Puede ser mejor estructurado y más sencillo de usar. Yo tenía varias teorías, pero como no me dedico a hacer webs, núnca he tenido la necesidad real de hacerlo. No me gusta comerme mis palabras, así que me dí a la tarea de hacer el sistema, en un rato libre, en cosa de 20 minutos estaba funcionando(en Firefox), gracias a FSM mi hipótesis funcionó.
Basicamente mi idea era:
1.- Verificar la posición actual. Que es esa que se encuentra despues de un signo de numero dentro de una URL, por ejemplo:
2.- Cada vez que el hash cambie, será envíado a Flash como una variable String.
3.- Flash la interpretará como una variable que define la sección actual.
Por ejemplo:
Código :
loadMovie(variableHash);
Funcionalidad:
- Haciendo copy/paste de la url
- Utilizando las flechas, atrás y adelante
- Moviendole a lo wey en el navegador
Requerimientos:
- Para el funcionamiento de la versión Alpha 0.2, se requiere FF, en futuras versiones será multi-navegador
- Requiere tener activo JS(¿quién carajos no lo tiene?).
Aqui tienen el ejemplo funcionando(REPITO SóLO ESTA ASEGURADA LA CALIDAD de funcionamiento en FIREFOX):
http://www.danonino.org/BrowseSystem/BrowseSystem.html
PERO para Internet Explorer, la cosa va distinto, requiere un poco de mas trabajo, sobre todo que accedemos a métodos y funciones que no son parte de ningún estandar (de por si IE no se apega). Tengo teorías acerca de como resolverlo, pero no el tiempo para hacerlo, si existe un developer valiente haganmelo saber por un Mensaje Privado. Requiere de mucho tiempo de test, test y test, no es tanto el código necesario, mas bien son muchas horas de prueba lo que necesito.
Terminando de solucionar el detalle en IE, tendremos un sistema para navegar en Flash, de forma fácil y c00l.
Para los interesador aqui dejo el código fuente (BrowseSystem Alpha0.2)
PD. Gracias DanielSemper por ser mi beta tester y reportar el primer bug, el cual bautizamos como el "Bug virgen". Siento decirlo pero lo desvirgue, el bug esta corregido.
NOTA: descubrimos un BUG en Google Talk, borra las etiquetas(hash) de las url.
¿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.
Te explico un poco, en tu blog, si entras por:
http://www.theninjabunny.com/
Y te pones a ver posts, la URL en tu navegador NUNCA cambiará, por lo que el usuario común, acostumbrado a hacer copy/paste de la URL, esta jodido. (Tendría que hacer clic en el boton de link permanente)
En cambio con el sistema de navegación si puede hacer copy/paste. Y como te decía arriba, en tu sistema puedes usar mod_rewrite y "anchors"(hash), se pueden combinar, dependiendo de las necesidades.
Un ejemplo de combinación:
Todos los links que haces desde fuera, los haces de la siguiente forma:
www.theninjabunny.com/seccion_conejo1
Y para los que esten dentro de tu blog, navegando entre varias secciones podrán ver:
www.theninjabunny.com/#seccion_conejo1
Que es mucho mejor, que simplemente ver:
www.theninjabunny.com/ <- Como si estuvieran en un frame o algo así
De tal forma que seguiras explotando el mod_rewrite para los buscadores(o para lo que lo ocupes), y el "sistema de navegación" interno, será un plus que tus visitantes agradecerán
Saludos
Enlaces permanentes
http://www.klynch.com/apps/flashlinking/#id=1
Enlaces permanentes aún más profundos
http://www.magicpixel.com.au/tutorials/flash/deeplinking.cfm
- En el contenido que indexas para los buscadores(<noscript></noscript>), tienes los links así:
www.theninjabunny.com/conejo1
www.theninjabunny.com/conejo2
Así dejalos, no los muevas
- En tu control de mod_rewrite(Que solo se activa LA PRIMERA vez que llega un visitante a tu blog), limpia el contenido de la URL y remplazalo por el anchor. De tal manera que el mod_rewrite sigue funcionando para lo que lo quieres(links claros y legibles, y mas facilmente indexados, links externos y demás), pero una vez que llegan a tu sitio, tienes una navegación c00l para tus visitantes, la URL cambia dependiendo la sección en la que esten.
Me gustaría poder documentar todas las variantes, pero primero quiero lograr tener un motor de navegación:
- Fácil de usar
- Que funcione en todos los navegadores
- Que este pensando para trabajar en distintos ambientes
p.d. Neo, pruebalo en IE, creo que tiene el mismo problema(repito sé la solución es cosa de tiempo para hacerlo)
Por Josue Jovel el 13 de Julio de 2006
Espero q sirva de algo.
Por ma el 15 de Julio de 2006
Anonymous :
Espero q sirva de algo.
En la pagina de vortex no se utiliza ese sistema...
ya que la url no aparece en la barra de direcciones...
En la que si funciona en los dos navegadores es en la de 2advanced que es por lo cual empezo todo esto...
Por shenlong el 02 de Agosto de 2006
Ej:
http://www.bk.com/#menu=5,-1,-1
Por David Castro el 21 de Agosto de 2006
Por FeNtO el 21 de Agosto de 2006
Por Adrián el 08 de Septiembre de 2006
Código :
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>BrowseSystem</title> <script src="swfobject.js"></script> <script> document.isIE = navigator.appName.indexOf("Microsoft") != -1; var current = ""; var actual = ""; var ready = false; function callReady(value){ ready = value; } function addSection(str){ top.location.hash = str; if(document.isIE){ document.getElementById('flashnav').setAttribute('src', 'auxContent.php?hash='+str); } } function verific(){ if(document.isIE){ actualizarHash(); } if((top.location.hash != current) && ready){ current = top.location.hash; defineSection(current); } } function actualizarHash(){ var src_elements = document.frames['flashnav'].location.href.split("?hash="); var newHash = src_elements[src_elements.length-1]; if(top.location.hash.substr(1) != newHash){ top.location.hash = newHash; } } function thisMovie(movieName) { return (document.isIE) ? window[movieName] : document[movieName]; } function defineSection(str) { str = str.substr(1); thisMovie("BrowseSystem").defineSection(str); } setInterval(verific, 100); </script> </head> <body> <div id="BrowseSystemDiv"></div> <script> var so = new SWFObject("BrowseSystem.swf", "BrowseSystem", "550", "400", "8", "#2E5881"); so.write("BrowseSystemDiv"); </script> <script language="javascript" type="text/javascript"> if(document.isIE) { var firstHash = top.location.hash.substr(1); document.write("<iframe id='flashnav' name='flashnav' src='auxContent.php?hash="+firstHash+"' style='display: none;'></iframe>"); } </script> </body> </html>Y tambien funciona en Firefox
Saludos
http://www.iconperu.net/adrian/browse/
YA funciona en FF e IE, ahora es cuestión de tiempo, para revisarlo, probarlo y pasarlo a una clase de JS, formalizar la documentación y liberarlo como recurso.
Los interesados pueden colaborar probando el sistema, y enviandome un MP con bugs que encuentren.
Gracias Adrián por tu colaboración.
Por Adrián el 11 de Septiembre de 2006
Por poner a tras aun fl el 23 de Septiembre de 2006
a debajo de mi archivo tengo una pelicula flas bueno lo que hace al flash ponerse sobre del boton colante obviamente no se lee.
si alguien sabe. necesito su ayuda les estare muy agradecida.
[email protected]
Por tato el 14 de Febrero de 2007
Por shenlong el 09 de Abril de 2007
http://www.asual.com/swfaddress/
Por bipsa el 26 de Febrero de 2008
Código :
/* Object Page */ var Page = { anchorAdded : null, Nav : { createAnchor : function (anchorName){ /* In order to see this working on IE 6 I should create a Iframe to add to the browser Story */ if (!$(anchorName)){ var obj_anchor = elements.htmlElement('a', {id:anchorName, name:anchorName}); var obj_body = document.body; obj_body.appendChild(obj_anchor); } top.location.hash = anchorName; }, readAnchor : function (){ return top.location.hash.replace("#", ""); } } }; /** Put all generic DOM methods here Object created by Juan Sebastian Romero */ var elements = { /* Creates an HTML Object with attributes @Usage: var div = elements.htmlElement('div', {id:5, class:'base'}) */ htmlElement : function(elementType, attributes){ var html_object = document.createElement(elementType); if(attributes){ for (var i in attributes){ switch (i) { case 'class' : html_object.className = attributes[i]; break; default : html_object.setAttribute(i, attributes[i]); break; } } } return html_object; } };Espero que ayude Saludos
Por bipsa el 26 de Febrero de 2008
Saludos
Por mikarts el 17 de Julio de 2008
Llevo dos días probando todas vuestras soluciones, y otras que he encontrado por la web, pero no llego a nada. No me funciona y me gustaría conseguirlo.
Si alguien tiene tiempo, le agradecería que me ayudase.
Gracias.