[Javaescript] Uso de manejadores y validación
SkuNk
skunk1 en gmail.com
Mar Sep 18 05:07:40 PDT 2007
El día 18/09/07, Sergio Iglesias <ser.iglesias en gmail.com> escribió:
>
> Hola:
>
> Gracias de nuevo por la respuesta. La próxima le doy a responder a todos.
> No consigo hacer esto que me cuentas. Más bien, no sé como hacerlo. He
> probado varias cosas pero nada.
>
> <ul class="serv">
> <li><h3><a href="servicios-web/pagina-web-corporativa.php"
> onclick="javascript: cargar('caracteristicas','ajax/pagina-
> web-corporativa.php'); return false;" title="Página web
> Corporativa: la mejor manera de tener presencia en
> Internet"><strong>Página web Corporativa</strong></a></h3></li>
> <li><h3><a href="servicios-web/pagina-web-catalogo.php"
> onclick="javascript: cargar('caracteristicas','ajax/pagina-
> web-catalogo.php'); return false;" title="Página web
> Catálogo: la mejor manera de mostrar tus productos en
> Internet"><strong>Página web Catálogo</strong></a></h3></li>
> <li><h3><a href="servicios-web/pagina-web-ecommerce.php"
> onclick="javascript: cargar('caracteristicas','ajax/pagina-
> web-ecommerce.php'); return false;" title="Página web eCommerce: la
> mejor manera de tener comercio electrónico en
> Internet"><strong>Página web eCommerce</strong></a></h3></li>
> <li><h3><a href="servicios-web/rediseno-web.php" onclick="javascript:
> cargar('caracteristicas','ajax/rediseno-web.php'); return false;"
> title="Rediseño web: adapta tu página web a las normas
> W3C"><strong>Rediseño de páginas web</strong></a></h3></li>
> <li><h3><a href="servicios-web/posicionamiento-buscadores.php"
> onclick="javascript: cargar('caracteristicas','ajax/posicionamiento-
> buscadores.php'); return false;" title="Posicionamiento web: tu
> página web en las primeras posiciones de Google y otros
> buscadores"><strong>Posicionamiento en buscadores</strong></a></h3></li>
> <li><h3><a href="servicios-web/blog-personales.php" onclick="javascript:
> cargar('caracteristicas','ajax/blog-personales.php'); return false;"
> title="Blog personales: creación de blog personales"><strong>Blog
> personales</strong></a></h3></li>
> </ul>
>
> Esta es la lista donde están estos manejadores. Cómo tengo que ponerla
> para tener la misma funcionalidad que antes?
>
> El fichero js externo, deberia tener
> if(document.getElementById('mielemento'))
> document.getElementById('mielemento').onclick = function()
> {
> cargar()....
> }
>
> y llamar la funcion:
> function cargar(iddiv,pagina) {
> divId = iddiv;
> url = pagina;
> loader = '<p class="cargando">Cargando datos...<br />Espera un momento,
> por favor.</p>'; // 'html for loading' or false
> effect = 'false'; // 'appear' , 'blind' , 'highlight' or false
> ecache = false; // cache for html file true or false
> $ajaxload(divId, url, loader, effect, ecache);
> }
>
> Pero como le paso esos valores la funcion cargar?
>
> Gracias, gracias, gracias!
>
> El día 18/09/07, SkuNk <skunk1 en gmail.com> escribió:
>
> > El día 18/09/07, Sergio Iglesias <ser.iglesias en gmail.com> escribió:
> > >
> > > Gracias. Miraré todo esto que me pasas detenidamente.
> > > Una cosa: si desactivas el plugin de javascript, sigues teniendo toda
> > la
> > > funcionalidad de la web. Es decir, que el punto 6.4, a priori sí lo
> > > cumpliría puesto que permito la navegación.
> > >
> > > El día 18/09/07, SkuNk <skunk1 en gmail.com > escribió:
> > > >
> > > >
> > > > El día 18/09/07, Sergio Iglesias <ser.iglesias en gmail.com > escribió:
> > > > >
> > > > > Hola a todos:
> > > > > Estoy rediseñando mi página web y he utilizado un poco de AJAX en
> > la
> > > > > página
> > > > > de inicio. Tengo problemas de validación con la misma. He pasado
> > la
> > > > > página
> > > > > por eXaminator y me da estos errores:
> > > > >
> > > > > [image: Ocultar] Se usan manejadores de eventos que dependen de un
> > > > > dispositivo sin manejadores redundantes (onclick sin onkeypress,
> > por
> > > > > ejemplo).
> > > > >
> > > > > Los eventos deben poder activarse con cualquier dispositivo porque
> > hay
> > > > > usuarios que no pueden, por ejemplo, usar un ratón. Por tanto se
> > deben
> > > > >
> > > > > especificar manejadores de evento independientes del tipo de
> > > > > dispositivo o
> > > > > definir eventos redundantes.
> > > > >
> > > > > WCAG 6.4 : Para los scripts y applets, asegúrese de que la
> > ejecución de
> > > > > los
> > > > > manejadores de eventos sean independientes del tipo de
> > dispositivo.
> > > > > *(Prioridad
> > > > > 2)*
> > > > >
> > > > > Buscando información sobre este tipo de "error" y analizando la
> > página
> > > > > con
> > > > > watchfire, me dicen que utilice los eventos onclick con
> > onkeypress.
> > > > > Pero al
> > > > > hacer esto, el efecto que consigo no es muy apropiado que diga yo.
> > > > > Pulsando
> > > > > cualquier tecla se está recargando la parte de AJAX. El otro error
> > que
> > > > > me
> > > > > da, es uno que me dice que tengo 7 errores de validación. He
> > mirado
> > > > > estos
> > > > > errores, y son a consecuencia de la función de AJAX. Esta es la
> > > > > función:
> > > > >
> > > > > <script type="text/javascript">
> > > > > function cargar(iddiv,pagina) {
> > > > > divId = iddiv;
> > > > > url = pagina;
> > > > > loader = '<p class="cargando">Cargando datos...<br />Espera un
> > > > > momento, por
> > > > > favor.<\/p>'; // 'html for loading' or false
> > > > > effect = 'false'; // 'appear' , 'blind' , 'highlight' or false
> > > > > ecache = false; // cache for html file true or false
> > > > > $ajaxload(divId, url, loader, effect, ecache);
> > > > > }
> > > > > </script>
> > > > >
> > > > > y este es el error:
> > > > > http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.sergioiglesias.net%2Fnueva%2Findex.php
> >
> > > > >
> > > > >
> > > > > Espero alguna solución y cualquier comentario será bienvenido.
> > > > >
> > > > > Gracias!!
> > > > > ------------ próxima parte ------------
> > > > > Se ha borrado un adjunto en formato HTML...
> > > > > URL:
> > > > >
> > http://lists.scriptia.net/private.cgi/javaescript-scriptia.net/attachments/20070918/fbc501e0/attachment.htm
> > > > > _______________________________________________
> > > > > Javaescript mailing list
> > > > > Javaescript en lists.scriptia.net
> > > > > http://lists.scriptia.net/listinfo.cgi/javaescript-scriptia.net
> > > > >
> > > >
> > > >
> > > > Hola Sergio,
> > > >
> > > > Para empezar, la forma en que lo estás haciendo es obtrusiva, porque
> > > > quién no disponga de esta tecnología no podrá acceder a los
> > contenidos
> > > > cargados con AJAX y obviamente el cambiar onclick por onkeypress no
> > > > soluciona nada, ya que como te está diciendo el punto 6.4 de la
> > > > validación de accesibilidad, los eventos deben ser independientes,
> > lo que
> > > > quiere decir que NO debes usar eventos y/o debe de haber una
> > alternativa, o
> > > > bien con un correspondiente elemento <noscript> por cada <script> o
> > permitir
> > > > esa navegación sin javascript con formularios sencillos, enlaces de
> > > > navegación, etc.
> > > >
> > > > Segunda, si pretendes realizar una página accesible, olvidate de
> > AJAX
> > > > para cargar contenidos, utilizalo únicamente para complementar la
> > > > funcionalidad en caso de que dispongan de la tecnología, pero que
> > esta siga
> > > > siendo funcional sin ella. Luego, separa bien la capa de
> > comportamiento con
> > > > la de presentación (CSS) y la de contenido (HTML), evitando escribir
> > los
> > > > eventos en la maquetación y definiendo estos en un archivo js
> > externo. Por
> > > > ejemplo.
> > > >
> > > > if(document.getElementById('mielemento'))
> > > > document.getElementById('mielemento').onclick = function()
> > > > {
> > > > alert("Cargando datos....");
> > > > cargar()....
> > > > }
> > > >
> > > > Esto te validará el WCAG correctamente (al menos automáticamente),
> > pero
> > > > seguirá siendo obtrusivo si no permites una alternativa.
> > > >
> > > > Bueno, te dejo un par de enlaces sobre el tema.
> > > > http://es.wikipedia.org/wiki/JavaScript_no_obstructivo
> > > > http://www.estadobeta.com/2005/11/25/3-capas-de-presentacin/
> > > >
> > http://outbook.blogspot.com/2007/06/las-tres-capas-del-diseo-web.html
> > > >
> > > > Espero te sea útil.
> > > >
> > > > --
> > > > Philipp Keweloh
> > > > skunk1 en gmail.com
> > >
> > >
> > >
> >
> > En ese caso, y si el contenido que cargas en AJAX está disponible sin
> > JavaScript, con extraer los eventos a un archivo .js externo como te he
> > mostrado en el ejemplo, tendrás solucionado el problema.
> >
> > Saludos!
> >
> > PD: Cuando respondas a un mensaje de la lista, utiliza siempre el
> > "Responder
> > a todos" para que se incluya el mail de la lista y todos podamos seguir
> > el
> > hilo (algunas listas no añaden la cabecera Reply-To), de lo contrario
> > (como
> > es el caso de tu última respuesta a mi respuesta) sólo lo recibirá la
> > persona a la que respondes.
> >
> > --
> > Philipp Keweloh
> > skunk1 en gmail.com
> > ------------ próxima parte ------------
> > Se ha borrado un adjunto en formato HTML...
> > URL: http://lists.scriptia.net/private.cgi/javaescript-scriptia.net/attachments/20070918/26c417c5/attachment.htm
> >
> > _______________________________________________
> > Javaescript mailing list
> > Javaescript en lists.scriptia.net
> > http://lists.scriptia.net/listinfo.cgi/javaescript-scriptia.net
> >
>
>
Vale, a ver, te lo he hecho con dos posibilidades, para que así entiendas
las diferentes formas de hacerlo, aunque existen otras. La segunda es más
elegante y más efectiva, ya que te permite una mejor escalabilidad del sitio
web.
La manera sencilla, es identificar cada elemento por separado y, mediante la
capa de comportamiento ejecutar una acción concreta por cada elemento. (Los
ids son de ejemplo y ya los cambiarás si te parece oportuno)
* html
<ul class="serv">
<li><h3><a href="servicios-web/pagina-web-corporativa.php"
id="wcorporativa" title="Página web Corporativa: la mejor manera de
tener presencia en Internet"><strong>Página web
Corporativa</strong></a></h3></li>
<li><h3><a href="servicios-web/pagina-web-catalogo.php" id="wcatalogo"
title="Página web Catálogo: la mejor manera de mostrar tus
productos en Internet"><strong>Página web
Catálogo</strong></a></h3></li>
<li><h3><a href="servicios-web/pagina-web-ecommerce.php" id="wecommerce"
title="Página web eCommerce: la mejor manera de tener comercio
electrónico en Internet"><strong>Página web
eCommerce</strong></a></h3></li>
<li><h3><a href="servicios-web/rediseno-web.php" id="rweb"
title="Rediseño web: adapta tu página web a las normas
W3C"><strong>Rediseño de páginas web</strong></a></h3></li>
<li><h3><a href="servicios-web/posicionamiento-buscadores.php"
id="pbuscadores" title="Posicionamiento web: tu página web en las
primeras posiciones de Google y otros buscadores"><strong>Posicionamiento en
buscadores</strong></a></h3></li>
<li><h3><a href="servicios-web/blog-personales.php" id="bpersonales"
title="Blog personales: creación de blog personales"><strong>Blog
personales</strong></a></h3></li>
</ul>
* comportamiento.js
if(document.getElementById('wcorporativa'))
document.getElementById('wcorporativa').onclick = function() {
cargar('caracteristicas','ajax/pagina-web-corporativa.php'); return false; }
if(document.getElementById('wcatalogo'))
document.getElementById('wcatalogo').onclick = function() {
cargar('caracteristicas','ajax/pagina-web-catalogo.php'); return false; }
if(document.getElementById('wecommerce'))
document.getElementById('wecommerce').onclick = function() {
cargar('caracteristicas','ajax/pagina-web-ecommerce.php'); return false; }
if(document.getElementById('rweb'))
document.getElementById('rweb').onclick = function() {
cargar('caracteristicas','ajax/rediseno-web.php'); return false; }
if(document.getElementById('pbuscadores'))
document.getElementById('pbuscadores').onclick = function() {
cargar('caracteristicas','ajax/posicionamiento-buscadores.php'); return
false; }
if(document.getElementById('bpersonales'))
document.getElementById('bpersonales').onclick = function() {
cargar('caracteristicas','ajax/blog-personales.php'); return false; }
La segunda, funciona con una clase (en este caso la he llamado
".caracteristicas") y basta con añadir dicha clase al elemento <a>.
He procurado utilizar los métodos y propiedades nativas de los navegadores
actuales, como es el caso del método getElementsByTagName, que si no me
equivoco lo soportan los más populares.
* html
<ul class="serv">
<li><h3><a href="servicios-web/pagina-web-corporativa.php"
class="caracteristicas" title="Página web Corporativa: la mejor
manera de tener presencia en Internet"><strong>Página web
Corporativa</strong></a></h3></li>
<li><h3><a href="servicios-web/pagina-web-catalogo.php"
class="caracteristicas" title="Página web Catálogo: la mejor
manera de mostrar tus productos en Internet"><strong>Página web
Catálogo</strong></a></h3></li>
<li><h3><a href="servicios-web/pagina-web-ecommerce.php"
class="caracteristicas" title="Página web eCommerce: la mejor manera
de tener comercio electrónico en Internet"><strong>Página web
eCommerce</strong></a></h3></li>
<li><h3><a href="servicios-web/rediseno-web.php" class="caracteristicas"
title="Rediseño web: adapta tu página web a las normas
W3C"><strong>Rediseño de páginas web</strong></a></h3></li>
<li><h3><a href="servicios-web/posicionamiento-buscadores.php"
class="caracteristicas" title="Posicionamiento web: tu página web en
las primeras posiciones de Google y otros
buscadores"><strong>Posicionamiento en buscadores</strong></a></h3></li>
<li><h3><a href="servicios-web/blog-personales.php"
class="caracteristicas" title="Blog personales: creación de blog
personales"><strong>Blog personales</strong></a></h3></li>
</ul>
* comportamiento.js
var enlaces = document.getElementsByTagName('a');
for(i=0; i<enlaces.length; i++)
{
if(enlaces[i].className == "caracteristicas")
{
enlace[i].onclick = function()
{
var cadena = this.href;
var partes = cadena.split("/");
cargar('caracteristicas','ajax/'+partes[partes.length-1]);
return false;
}
}
}
No lo he probado, a no ser que me haya colado en alguna cosa debería
funcionar en IE, Firefox y Opera.
Ya me dirás que tal te va.
Suerte!
--
Philipp Keweloh
skunk1 en gmail.com
------------ próxima parte ------------
Se ha borrado un adjunto en formato HTML...
URL: http://lists.scriptia.net/private.cgi/javaescript-scriptia.net/attachments/20070918/90882b40/attachment.htm
Más información sobre la lista de distribución Javaescript