Posted by Leo Jiménez on March 9, 2012 at 4:49pm
Saludos compañeros y compañeras,
Necesito que me guíen un poco en este asunto, tengo un sitio hecho en Drupal 7 (temporalmente en http://ci2.ucr.ac.cr y pronto en http://ci.ucr.ac.cr).
El asunto es que cada vez que selecciono un ítem en el menú, carga toda la página y me manda al inicio de la misma, por lo que hay que hacer scroll para ver el contenido que cargó.
Lo que se me ocurre es meterle AJAX para que cargue solo la parte de contenido. O bien que cargue toda la página pero que la deje a la misma altura. Lo malo es que no se como, ¿alguna sugerencia?
Pura vida ;-)
Comments
Quicktabs
Hola, no se si es exactamente lo que andas buscando, pero que tal si usas Quicktabs? http://drupal.org/project/quicktabs
Anclas
Definitivamente la opcion de cargar el contenido via AJAX es viable, hay varias formas de hacer eso.
Ahora, la forma sencilla de llegar a un punto de la pagina es a travez de anclas (Anchors), de hecho, los links en HTML se hacen en los tag que son "a" por anclas.
Si le pones un name o id a un tienes un ancla que accessas usando #nombre_ancla en el URL del link.
En Drupal para indicar el nombre del ancla al que el link debe ir puedes usar la funcion url() (http://api.drupal.org/api/drupal/includes%21common.inc/function/url/7) o la funcion l() (http://api.drupal.org/api/drupal/includes%21common.inc/function/l/7) usando el parametro $options y dentro de el pasar el nombre del ancla en "fragment" (array('fragment' => 'nombre_ancla').
Si ocupas hacer algo custom en un menu, podrias crear un bloque custom e ingresar el HTML ahi y ponerlo donde va el menu o tambien ya sea para menus o para links dentro de algun tipo de contenido o algo asi podrias usar theme functions o templates.
Si nos explicas un poco mas de lo que estas intentando hacer y el porque quieres llegar a un punto especifico de la pagina tal vez te podemos ayudar mas.
Sobre anclas: http://www.w3.org/TR/html4/struct/links.html
Nestor Mata
http://nestor.profesional.co.cr/es
Si quicktabs o view slideshow thumbnails
Si quicktabs te puede servir y es muy bueno lo hace con ajax, o tambien puedes probar con view slideshow y ponerle los thumbnails como items del menu http://drupal.org/project/views_slideshow
saludos
www.luisduenas.com
@isimgt
Link HTML
Hola, me parece que la opción por AJAX es válida, aunque más trabajada.
Si vos te fijás todos los títulos tienen un ID asignado.
"< h1 id="page-title" class="title">Asesoría< / h1>"
Solamente con concatenar ese ID a la URL de cada ítem de tu menú ya la pantalla se ubica correctamente a la altura del título.
En otras palabras, este link debería ubicarse a la altura de tu título:
http://ci2.ucr.ac.cr/colaboracion#page-title // ojo que le agregué al enlace la parte "#page-title"
Saludos.
Hola, gracias por las prontas
Hola, gracias por las prontas respuestas.
Ojeando Quicktabs me parece que no es lo que necesito.
Las anclas suenan prácticas, pero lo malo es que todos los links tendrían un '#page-title' al final, por lo que no se vería "elegante".
¿Si lo hiciera con AJAX como debería hacerlo? ¿Es muy complejo? Es que nunca lo he usado, ¿será que me toca sentarme a leer AJAX hasta dominarlo?
Opciones
El detalle, es que normalmente no tendrias que preocuparte por esto, ademas, hay que tener mucho cuidado con usar AJAX en terminos de SEO, normalmente el contenido cargado por AJAX no lo pueden indexar los buscadores.
Como critica sobre la parte funcional del diseño, normalmente cuando se decide usar un gran area de no contenido en la parte superior de la pagina se utiliza solo para el homepage, y se usa una version mucho mas corta para las paginas de contenido, en tu caso, eliminando el banner grande al inicio de la pagina, de manera que en las paginas de contenido este esta muy visible poco despues del menu y no hay que hacer scroll para llegar al contenido, ademas, tener que hacer scroll para ver el contenido normalmente genera mayores rebotes en el sitio y menos visitantes, igual, son es solo una critica constructiva para que lo tomes en cuenta, pero de optar por esto ya no tendrias que preocuparte por que se haga scroll automatico hasta el contenido o hacer load por ajax.
En cuanto a si es poco elegante usar anclas, yo diria que no, es uno de los elementos basicos de HTML y de hecho hay frameworks de AJAX que se basan en las anclas para esto, pero igual es solo mi opinion.
En cuanto a AJAX, hay muchas opciones, deberias darle una busqueda a los modulos que hay para AJAX, algo debe de haber que te ayude, tal vez alguien mas nos contribuya con una idea de cual modulo usar, en general, lo que debes hacer es cargar el contenido del nodo dentro de un area dispuesta para este, una opcion sencilla podria ser crear un modulo custom en el que crees un menu hook, donde la llamada a ese path llame a una funcion que busque el contenido de un nodo y lo devuelva por ajax, y luego un pequeño codigo en jQuery que haga la solicitud y lo reemplace en tu area de contenido, eso en caso de no haber un modulo que haga algo parecido ya.
Mi recomendacion personal en resumen, elimina el area grande de tu diseño para las paginas internas y asunto solucionado.
Suerte
Nestor Mata
http://nestor.profesional.co.cr/es
Muchas gracias por las
Muchas gracias por las recomendaciones, pues si, es la primera vez que me enfrento a una situación como esta y por culpa del gran área que se va en el encabezado. Lo malo es que no me queda otra, se pidió así y tengo que ver como lo soluciono.
Voy a ver como me queda usando anclas.
Pura vida
Si, se lo que es eso...
Si, se lo que es eso... donde manda capitan... bueno, suerte, creo que las anclas deberias poder hacerlo rapido para que puedas considerar si te quedas con esa opcion o no, en caso de optar por AJAX (o AHAH) (la opcion de tony se ve sencilla y rapida de implementar) recuerda tener presente el SEO.
Suerte
Nestor Mata
http://nestor.profesional.co.cr/es
demo
Hola Leo!
http://adventureincostarica.korsos.com/hotels
ahi tengo ambas opciones.
Si ves la opcion de las categorias esta en tabs, mientras la paginacion esta en ajax (ahah de hecho)
La paginacion en ahah viene con views. Osea esta hecho, click click
Los tabs los hice con un js de 6 lineas. Es otro jamon.
Insultar en Internet es como correr autos en calle publica: Aunque ganes, sigues siendo un idiota.
Tuanis
Esta tuanis ese toque en ese sitio, Tony :)
Nestor Mata
http://nestor.profesional.co.cr/es
muchas gracias Nes!
en lo personal me gusta un monton, por el orden en que hace las descargas.
A) baja la primer pagina de cada tab, pero en orden. Por lo que no retrasa al usuario
B) las paginas extra si las baja con ahah, salvando ancho de banda.
C) la barrita de la derecha queda reservada para info y herramientas que operan (en teoria) sin cambiar el contenido cargado.
Insultar en Internet es como correr autos en calle publica: Aunque ganes, sigues siendo un idiota.
Responsive design
Otro Plus es que con esta navegacion con botones grandes y buena velocidad, uno hace que el sitio sea mas facil de navegar para dispositivos moviles
Insultar en Internet es como correr autos en calle publica: Aunque ganes, sigues siendo un idiota.
¡Eso Tony! Veo, y veo que
¡Eso Tony! Veo, y veo que carga todo bien rápido. En mi caso sería que cargue cada página llamándola desde un menú. Mmm :-/
Veamos como me va con las anclas...
componente js
Si notas, al lado derecho hay un mapita, que tambien controla los tabs.
Antes usaba un componente mas grande, pero no me dejaba hacer los llamados desde adentro del div cambiante.
de hecho, el codigo aun lo tengo incrustado en el bloque, porque aun estoy desarrollando.
Insultar en Internet es como correr autos en calle publica: Aunque ganes, sigues siendo un idiota.
preprocess
NOTA IMPORTANTE:
tuve que hacer una modificacion a nivel de plantilla.
el asunto es el siguiente:
cuando un view es embedded (incrustado) sus JS no lo son. Esto es un problema dificil de resolver, porque es dificil darse cuenta de cual es el problema. Uno nada mas se da cuenta de que el JS deja de funcionar.
Recordemos que tanto ajax como ahah son JS.
Una vez que descubri cual es el problema, solamente tuve que meter esos js en el preproceso con la condicion para que no los cargue siempre.
Aqui me explicaron como:
http://drupal.org/node/928882
Insultar en Internet es como correr autos en calle publica: Aunque ganes, sigues siendo un idiota.
Muy agradable
Hola, muy buena tu demo, una pregunta por favor, que galería has utilizado y como has hecho lo del mapa?.
Te comento una cuestión, estoy haciendo una web en la que habrá productos proporcionados por 40 ó 60 productores, quiero hacer un tab para cada uno de ellos, de forma que cuando accedan para gestionar sus contenidos vean en un tab varias pestañas, por ejemplo: una descripción de su empresa, sus productos, su blog, un mapa de situación, su galería de imagenes, etc. la pregunta concreta es si cuando accedan cada uno verá sus datos y no otros, veo que en la definición de cada grupo de tab se ha de poner la ID del nodo o vista lo cual creo me obliga a crear manualmente cada tab para cada productor con sus respectivos contenidos, no se podría crear un tab que sirvisiese como plantilla donde fuesen a parar los contenidos de cada uno utilizando para ello "relation" o taxonomías o cualquier otro sistema?.
Gracias.
Francisco.
Menu secundario
Una opcion, seria que los links que estan en esa parte de banners se conviertan en una linea de links secundarios debajo de los links primarios para las paginas internas, o sino, un bloque de links a uno de los lados.
Algunas veces la mejor forma de solucionar un problema no es solucionandolo, sino eliminando la necesidad de solucionarlo ;)
Nestor Mata
http://nestor.profesional.co.cr/es
asi es
Esa es la razon por la cual, independientemente de lo buen desarrollador que uno sea, el rol del project manager es decisivo: A veces el problema no existia, sino que fue inventado.
Insultar en Internet es como correr autos en calle publica: Aunque ganes, sigues siendo un idiota.
La solución fácil fueron las anclas
La solución fácil fueron las anclas, lo que hice fue añadir un theme_menu_link() en el template.php de mi tema (llamado ciweb):
/**
* Añade el ancla #page-title a cada elemento de un menú.
*/
function ciweb_menu_link(array $variables) {
$element = $variables['element'];
$sub_menu = '';
if ($element['#below']) {
$sub_menu = drupal_render($element['#below']);
}
$options = array(
'fragment' => 'page-title',
);
$output = l($element['#title'], $element['#href'], array('fragment' => 'page-title',));
return '<li' . drupal_attributes($element['#attributes']) . '>' . $output . $sub_menu . "</li>\n";
}
La clave es la opción fragment en la función l()
Muchas gracias a todos ^_^