Foros del Web » Creando para Internet » Diseño Gráfico »

Enlaces alternativos a enlaces con javascript

Estas en el tema de Enlaces alternativos a enlaces con javascript en el foro de Diseño Gráfico en Foros del Web. Hola, tengo un menu de opciones donde al pulsar carga dinámicamente en un div una página html. Si tengo javascript habilitado funciona bien, sin embargo, ...
  #1 (permalink)  
Antiguo 08/07/2009, 05:08
 
Fecha de Ingreso: abril-2009
Mensajes: 66
Antigüedad: 15 años, 7 meses
Puntos: 0
Mensaje Enlaces alternativos a enlaces con javascript

Hola, tengo un menu de opciones donde al pulsar carga dinámicamente en un div una página html. Si tengo javascript habilitado funciona bien, sin embargo, cuando no pues los enlaces no hacen nada.

Los enlaces tienen un contenido parecido al siguiente:
Código:
<a href="javascript:CargarContenido('contenido/portada.html');">
     Inicio
</a>
Al pasarle el test taw3 me ha salido un mensaje informandome de que lo corrija y que debería mostrar de alguna manera todo contenido generado dinámicamente.

¿Cómo podría habilitar un enlace alternativo cuando no funcione javascript?

He pensado en crear un enlace que abrá la web : portada.html con target="_blank", aunque realmente me aparecería sin estilo ya el contenido de esos ficheros es algo así:

Código:
<p>
hola sdasd
asdasd
</p>
<h1> Prueba 2 </h1>
<p> Probando
asdasd
asd
</p>
¿Sería posible crear los enlaces alternativos? Sin javascript, sería imposible cargar el contenido de un fichero en un div,¿no?

Un saludo
  #2 (permalink)  
Antiguo 08/07/2009, 07:24
Avatar de PatomaS
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 20 años, 8 meses
Puntos: 63
Respuesta: Enlaces alternativos a enlaces con javascript

Hola

Lo que tienes que hacer, es tener activada alguna capa y su contenido al cargar la página, de esa manera, el visitante que no tiene js activado, puede ver el contenido.

Paralelamente, en el js, escondes la capa y la muestras con el menú tal y como haces ahora, es decir, el js da la funcionalida de ocultar y mostrar la capa.

Si en una misma página tiene varias capas y cada una tiene un contenido independiente, deberás buscar la manera de darles cohesión y lógica para que quien no tenga js activado y las vea todas, no sienta que son un pegote desordenado.

Felicidad
__________________
¡ hey, hou, hou, hey !
  #3 (permalink)  
Antiguo 08/07/2009, 08:43
 
Fecha de Ingreso: abril-2009
Mensajes: 66
Antigüedad: 15 años, 7 meses
Puntos: 0
Mensaje

Cita:
Iniciado por PatomaS Ver Mensaje
Hola

Lo que tienes que hacer, es tener activada alguna capa y su contenido al cargar la página, de esa manera, el visitante que no tiene js activado, puede ver el contenido.

Paralelamente, en el js, escondes la capa y la muestras con el menú tal y como haces ahora, es decir, el js da la funcionalida de ocultar y mostrar la capa.

Si en una misma página tiene varias capas y cada una tiene un contenido independiente, deberás buscar la manera de darles cohesión y lógica para que quien no tenga js activado y las vea todas, no sienta que son un pegote desordenado.

Felicidad
Hola, gracias por responderme.

¿Cargar contenido en la página y luego ocultarlo con javascript no haría que tardase demasiado en cargar la página? No sé si te referias a poner el contenido de cada fichero html en una capa oculta para javascript. Pero si es así, sería imposible ya que son muchos ficheros.

Antes se me ocurrió una idea. Para cada opción de los menus que son a la vez enlaces a otras páginas podría hacer lo siguiente:
Código:
<li>
          <a href="javascript:CargarContenido('contenido/p1.html');" >
               Opción 1 </a>
          <noscript>
                  <a href="contenido/p1.html" target="_blank"> Opción 1</a>
                   </noscript>
</li>
Lo malo es que me aparece repetido "Opción 1". Mostrar el contenido de ese fichero html en una página aparte tampoco me hace mucha gracia porque le falta el doctype, la hoja de estilos, etc... Se ve bastante feo el contenido de los ficheros "fuera de su contexto".

Como se trata de un fichero .jsp no sé si meter algún código en jsp para que solucione este problema.


Con JSP creo que tampoco voy a llegar muy lejos. He conseguido cargar los ficheros html y colocarlos en su div, haciendo algo parecido a esto:

Código:
<% String s = ""; %>

...

 <li><a href="javascript:CargarContenido('contenido/p1.html'); ">Explicación Teorica</a>
       <noscript><% s = LeerFichero("contenido/p1html"); %></noscript>         
...
         <noscript>    
                  <% out.println(s); %>
          </noscript>
El problema de esto es que no carga el fichero dinámicamente sino que carga el último que he puesto con: LeerFichero("contenido/p1.html").

¿Teneis alguna idea de como hacer que LeerFichero solo se llame cuando se pulse el enlace u otra manera de poder hacer esto? La forma de trabajar con JSP es muy parecida a la de php.

Si consigo la forma de hacerlo edito o posteo de nuevo.

Un saludo

Última edición por Daniel Ulczyk; 08/07/2009 a las 13:03 Razón: Combinando 2 mensajes consecutivos del mismo usuario
  #4 (permalink)  
Antiguo 08/07/2009, 21:32
Avatar de PatomaS
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 20 años, 8 meses
Puntos: 63
Respuesta: Enlaces alternativos a enlaces con javascript

Hola

Los lenguajes de servidor requieren que la petición vaya hasta ellos y entonces envían una página entera de respuesta, que de hecho, es la forma idónea de hacerlo y la opción que yo usaría. Una página por contenido.

Dependiendo del caso, podría ser un popup, pero hay que evaluar el caso.

La verdad, es que sin conocer bien el caso que nos comentas, las souciones son complicadas de esbozar. ¿no puedes poner una dirección para que lo veamos funcionando?

Por otro lado, siendo páginas jsp, añadirles fragmentos mediante inclusiones no es nada laborioso, evalua bien esa opción.

Felicidad
__________________
¡ hey, hou, hou, hey !
  #5 (permalink)  
Antiguo 09/07/2009, 02:12
 
Fecha de Ingreso: abril-2009
Mensajes: 66
Antigüedad: 15 años, 7 meses
Puntos: 0
Mensaje Respuesta: Enlaces alternativos a enlaces con javascript

Cita:
Iniciado por PatomaS Ver Mensaje
Hola

Los lenguajes de servidor requieren que la petición vaya hasta ellos y entonces envían una página entera de respuesta, que de hecho, es la forma idónea de hacerlo y la opción que yo usaría. Una página por contenido.

Dependiendo del caso, podría ser un popup, pero hay que evaluar el caso.

La verdad, es que sin conocer bien el caso que nos comentas, las souciones son complicadas de esbozar. ¿no puedes poner una dirección para que lo veamos funcionando?

Por otro lado, siendo páginas jsp, añadirles fragmentos mediante inclusiones no es nada laborioso, evalua bien esa opción.

Felicidad
Hola PatomaS, gracias de nuevo por contestar.

Ayer por la tarde estuve leyendo sobre el tema. Sobre los problemas de la accesibilidad en ajax. Leí algo interesante que decia que debía aislar lo que sería la interfaz web de lo que sea programable. Es decir, en mi caso he estado ejecutando código javascript dentro de un enlace, al deshabilitar el javascript no funcionan. Por ello aconsejan que no pongan ningún tipo de código javascript para que estos complementen las funciones de cada elemento de la web y que no impidan su funcionamiento. Ponian el típico ejemplo de un formulario web donde quitaban el evento click de un boton para detectar el evento en un fichero externo para que si alguna vez se encuentran el javascript deshabilitado el formulario pudiese funcionar.

Voy a intentar hacer algo parecido. Para conseguir mayor accesibilidad y que cumpla lo del patron MVC voy a quitar el codigo javascript de los enlaces para hacerlo externamente.

Aún así aun me preocupa como hacer lo de abrir las webs sin javascript habilitado. Ojala encuentre algo para jsp. Creo que es a lo que te referias con lo de que "la petición vaya hasta ellos". Lo malo es que no sé como detectar que se ha pulsado un enlace y que esa petición la detecte un código jsp. Si encuentro la manera estaría chupado ya que podría abrir la web que quisiese como pop-up (como comentaste) añadiendo al fichero la cabecera de doctype y la hoja de estilos o como lo estaba haciendo antes cargando el contenido en el div central simplemente leyendo el fichero y mostrando su contenido.

Lo de facilitar un enlace web no puedo hacerlo ya que lo estoy realizando de manera local.


Voy a ver que consigo hacer :)

Muchas gracias por tu ayuda.
  #6 (permalink)  
Antiguo 09/07/2009, 03:43
Avatar de PatomaS
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 20 años, 8 meses
Puntos: 63
Respuesta: Enlaces alternativos a enlaces con javascript

Hola

Creo que algunas cosas se te han mezclado. Aunque vas por buen camino.

Veamos.

Los popups no los puedes abrir desde el servidor, solo los puedes abrir desde el cliente, o mejor dicho, solo los puede abrir el navegador siguiendo una orden window.open de js; bueno, activex también vale, pero no es el caso.

Para detectar el vínculo en el servidor, basta con que leas las variables de servidor, algo como $_SERVER de php y ahí busca el referer, o si quieres, un argumento en el vínculo.

Lo de los argumentos es por si usas vínculos del tipo: pagina.jsp?id=1.

El servidor solo puede enviar páginas al navegador, la cual se mostrará en la ventana del navegador qu eha hecho la petición, si quieres que el contenido se abra en un popup, deberás hacerlo desde un js.

Revisa este artículo que te puede ayudar a abrir popups de forma accesible o en su defecto, a cargar las páginas en la misma ventana del navegador; por supuesto estas debe estar completas y tú mencionas que las que tienes son solo fragmentos.

Aunque veo tu caso, no termino de ver el problema o complicación, o la necesidad de tener archivos con fragmentos en vez de completos. Si puedes poner la dirección de la página, puede ayudar a nuestra interpretación.

Felicidad
__________________
¡ hey, hou, hou, hey !
  #7 (permalink)  
Antiguo 10/07/2009, 04:25
 
Fecha de Ingreso: abril-2009
Mensajes: 66
Antigüedad: 15 años, 7 meses
Puntos: 0
Mensaje Respuesta: Enlaces alternativos a enlaces con javascript

Cita:
Iniciado por PatomaS Ver Mensaje
Hola

Creo que algunas cosas se te han mezclado. Aunque vas por buen camino.

Veamos.

Los popups no los puedes abrir desde el servidor, solo los puedes abrir desde el cliente, o mejor dicho, solo los puede abrir el navegador siguiendo una orden window.open de js; bueno, activex también vale, pero no es el caso.

Para detectar el vínculo en el servidor, basta con que leas las variables de servidor, algo como $_SERVER de php y ahí busca el referer, o si quieres, un argumento en el vínculo.

Lo de los argumentos es por si usas vínculos del tipo: pagina.jsp?id=1.

El servidor solo puede enviar páginas al navegador, la cual se mostrará en la ventana del navegador qu eha hecho la petición, si quieres que el contenido se abra en un popup, deberás hacerlo desde un js.

Revisa este artículo que te puede ayudar a abrir popups de forma accesible o en su defecto, a cargar las páginas en la misma ventana del navegador; por supuesto estas debe estar completas y tú mencionas que las que tienes son solo fragmentos.

Aunque veo tu caso, no termino de ver el problema o complicación, o la necesidad de tener archivos con fragmentos en vez de completos. Si puedes poner la dirección de la página, puede ayudar a nuestra interpretación.

Felicidad
Hola PatomaS, ya he solucionado mi problema :)

Hice lo que comenté, cambie los enlaces para ponerlos de esta forma:

Código:
<a href="contenido/p1.html" target="_blank">Explicación Teorica</a
De forma que si no está javascript habilitado se abren las páginas fuera de la página principal. Me doy por vencido lo de cargar el contenido en la propia página. Sucede lo que comentabas, que jsp es para el lado del servidor y para el lado del cliente se debería hacer con javascript. Pero aún así no queda tan mal. Al menos se cumple de que se pueden acceder a los contenidos accesibles.

En la portada de la web cuando no está habilitada el javascript he cargado un fragmento de código que es el contenido de la portada pero quitandole el doctype, las etiquetas body, etc... Cargo ese contenido de esta manera:

Código:
<noscript>	
	          <div id="error">
    		      <p> Para utilizar esta página, JavaScript debe estar habilitado. 
          		  </p>
          	 </div>
          	 <%= LeerFichero("contenido/portada-error.html") %>
          </noscript>
LeerFichero es una función de jsp que devuelve un String cuyo contenido es el contenido del fichero. De esta manera si no está habilitado el javascript se carga el contenido de ese fichero y se podrá ver la portada perfectamente.

Aunque los enlaces los haya puesto con target="_blank, el código de javascript (utilizando jquery) lo que hace es cargar el contenido de esa página en el div que yo he especificado de esa manera no se me abre en ninguna parte.

Pongo el código por si a alguien le hace falta:
Código:
window.onload= function()
{
	//References
	var sections = $("a");//document.getElementsByTagName("a");//;
	var loading = $("#loading");
	var content = $("#contenido");//document.getElementById("#cont-pcpal-cuerpo"); //
	
	sections.click(function(e){
		var my_anchor = $(this).attr("href");
		showLoading();
		if(my_anchor != "#"){
			content.slideUp("slow", function(){	content.load(my_anchor, hideLoading);	} );
			content.slideDown();
		}
	return(false);
	});

	//show loading bar
	function showLoading(){
		loading
			.css({visibility:"visible"})
			.css({opacity:"1"})
			.css({display:"block"})
		;
	}
	//hide loading bar
	function hideLoading(){
		//loading.fadeTo(1000, 0);
	};
	
	//Se carga la portada de la página al abrir la página:
	content.load("portada.html");
}
Está basado en un ejemplo de ajax accesible: http://www.hellogoogle.com/examples/contentajax/

Del ejemplo de está página me di cuenta que no hay ningun problema crear las páginas de contenido con las cabeceras y poniendo de nuevo las etiquetas body, html, etc...

La verdad es que me ha venido muy bien el ejemplo ese.

Lo suyo es que se cargasen dentro de la etiqueta #contenido, pero bueno... creo que sería complicado intentar hacerlo con jsp.

Un saludo y gracias PatomaS.
  #8 (permalink)  
Antiguo 12/07/2009, 20:10
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 16 años, 8 meses
Puntos: 142
Respuesta: Enlaces alternativos a enlaces con javascript

Hola, creo que llego un poco tarde, pero te daré una solución que yo uso por si complace tus necesidades:

Código HTML:
<a href="contenido/portada.html" onclick="CargarContenido('contenido/portada.html');return false">Inicio</a> 
De esta forma, si tiene JS activado, se ejecutará la carga, y caso contrario, se abrirá la página sin estilos, pero será accesible por lo menos (no olvides el return false o se abrirá la página aunque JS esté activado).

Espero esto te haya servido. Éxito
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #9 (permalink)  
Antiguo 13/07/2009, 01:51
 
Fecha de Ingreso: abril-2009
Mensajes: 66
Antigüedad: 15 años, 7 meses
Puntos: 0
De acuerdo Respuesta: Enlaces alternativos a enlaces con javascript

Cita:
Iniciado por daPhyre Ver Mensaje
Hola, creo que llego un poco tarde, pero te daré una solución que yo uso por si complace tus necesidades:

Código HTML:
<a href="contenido/portada.html" onclick="CargarContenido('contenido/portada.html');return false">Inicio</a> 
De esta forma, si tiene JS activado, se ejecutará la carga, y caso contrario, se abrirá la página sin estilos, pero será accesible por lo menos (no olvides el return false o se abrirá la página aunque JS esté activado).

Espero esto te haya servido. Éxito
No sabía que podía hacerse así también. Yo ahora mismo lo voy a dejar tal como esta ahora mismo, sin código javascript ni de css en el fichero html para lograr lo de "JavaScript no obstructivo". Pero si algún día necesito hacer algo parecido ya sé lo del return false;.

Gracias por el "truco" daPhyre :).

Saludos
  #10 (permalink)  
Antiguo 13/07/2009, 03:28
Avatar de PatomaS
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 20 años, 8 meses
Puntos: 63
Respuesta: Enlaces alternativos a enlaces con javascript

Hola

El método del onclick no es adecuado, aunque si muy difundido.

No es adecuado por diversos motivos, entre ellos, algunos motores de js generan una advertencia, aunque el usuario no la vea, se registra; es una mala práctica de programación hacer un return false para adecuar un código a un bug y finalmente, es dependiente de un determinado dispositivo, que es el ratón, por lo tanto, como solución a problemas de accesibilidad, es solo hacer las cosas a medioa camino.

Felicidad
__________________
¡ hey, hou, hou, hey !
  #11 (permalink)  
Antiguo 15/07/2009, 02:26
 
Fecha de Ingreso: abril-2009
Mensajes: 66
Antigüedad: 15 años, 7 meses
Puntos: 0
Respuesta: Enlaces alternativos a enlaces con javascript

Hola, parece ser que esto sigue dando problemas. Me he dado cuenta que si pulso a los enlaces de la página cargada dinámicamente se abren en una ventana nueva en vez de comportarse como los enlaces del menu principal o el de la izquierda donde el contenido de los enlaces se cargan en el div que está destinado para eso.

¿Alguno de ustedes sabe de que podría ser? No sé si es por usar onload y debería utilizar otro método.

Un saludo y gracias.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:55.