Podria hacer esto (javascript) solo con CSS?...

Null_ · #1 (**permalink**) 12/12/2008, 15:03

Podria llegar a crear mi ejemplo de mi web que está creado con Javascript+HTML+CSS en puro HTML+CSS???... quiero evolucionar mi ejemplo y transformarlo a CSS completamente para lograr un mejor puntaje de accesibilidad en la web...
En realidad este código es accesible y estandar... el uso o no de javascript solo limita al usuario a utilizar los botones funcionales...
pero estoy obsecionado con ganarme esos puntitos de accesibilidad además de reducir las lineas de código HTML y también que mi archivo .js muera definitivamente...

aqui pueden ver un ejemplo en funcionamiento

y tambien el código (no se asusten) xD

Código HTML:

<div id="Contenido">

<h1>Ejemplo</h1>

<div class="iconos">
<div id="abrir_1" style="display:none;"><a href="javascript:abrir_1()"><img src="/img/icono-codigo-fuente.png" alt="Abrir ejemplo" /><br />Ejemplo.html (C&oacute;digo Fuente)</a></div>
</div>

<div id="ejemplo_html">
<div id="titulo_1"><div style="float:right;">

<span id="min_1"><a href="javascript:minimizar_1()" title="Minimizar ejemplo"><img src="/img/boton_minimizar.gif" alt="Minimizar ejemplo" /></a></span><span id="min_1_x" style="display:none;"><a href="javascript:minimizar_1_x()" title="Desminimizar ejemplo"><img src="/img/boton_minimizar_x.gif" alt="Desminimizar ejemplo" /></a></span>
<span id="rest_1"><a href="javascript:restaurar_1()" title="Restaurar ejemplo"><img src="/img/boton_restaurar.gif" alt="Restaurar ejemplo" /></a></span><span id="max_1" style="display:none;"><a href="javascript:maximizar_1()" title="Maximizar ejemplo"><img src="/img/boton_maximizar.gif" alt="Maximizar ejemplo" /></a></span>
<a href="javascript:cerrar_1()" title="Cerrar ejemplo"><img src="/img/boton_cerrar.gif" alt="Cerrar ejemplo" /></a>
</div>Ejemplo.html - Block de Notas
</div>
<div id="ContEjemplo"><span class="ejemplo_doctype">&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;</span><br />
&lt;html <span class="ejemplo_doctype">xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;es&quot; lang=&quot;es&quot;</span>&gt;<br />

&lt;head&gt;<br />
&lt;title&gt;Ejemplo XHTML CodigodeMaquina&lt;/title&gt;<br />
<span class="ejemplo_doctype">&lt;meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /&gt;</span><br />
&lt;/head&gt;<br />
&lt;body&gt;<br />
<br />

&lt;p&gt;<br />

Este es el ejemplo de código XHTML<br />
&lt;/p&gt;

<br /><br />
&lt;/body&gt;<br />

&lt;/html&gt;
</div>
</div>

<div class="iconos">
<div id="abrir_2" style="display:none;"><a href="javascript:abrir_2()"><img src="/img/icono-navegador.png" alt="Abrir ejemplo" /><br />Ejemplo.html (Navegador)</a></div>
</div>

<div id="ejemplo_naveg">
<div id="titulo_2">
<div style="float:right;">
<span id="min_2"><a href="javascript:minimizar_2()" title="Minimizar ejemplo"><img src="/img/boton_minimizar.gif" alt="Minimizar ejemplo" /></a></span><span id="min_2_x" style="display:none;"><a href="javascript:minimizar_2_x()" title="Desminimizar ejemplo"><img src="/img/boton_minimizar_x.gif" alt="Desminimizar ejemplo" /></a></span>

<span id="rest_2"><a href="javascript:restaurar_2()" title="Restaurar ejemplo"><img src="/img/boton_restaurar.gif" alt="Restaurar ejemplo" /></a></span><span id="max_2" style="display:none;"><a href="javascript:maximizar_2()" title="Maximizar ejemplo"><img src="/img/boton_maximizar.gif" alt="Maximizar ejemplo" /></a></span>
<a href="javascript:cerrar_2()" title="Cerrar ejemplo"><img src="/img/boton_cerrar.gif" alt="Cerrar ejemplo" /></a>
</div>Ejemplo XHTML CodigodeMaquina - Mozilla Firefox
</div>
<div id="ContResultado">

<p>
Este es el ejemplo de código XHTML
</p>

</div>
</div>

</div>

CSS

Código:

body		{ font-family : 'Trebuchet MS', Verdana, 'MS sans Serif', arial, tahoma, Helvetica; } 
img		{ border : 0; } 
#Contenido	{ width : 620px; } 

/* VENTANA DEL EJEMPLO XHTML */

#ejemplo_html {
	background:url('/img/fondo_titulo_ejemplo.png') repeat-x top;
	margin:10px 0px 15px;
	border:2px solid #CCC;
	}

#ejemplo_html #titulo_1 {
	background:url('/img/icono-notepad.gif') no-repeat 6px 2px;
	border:1px solid #444;
	border-top:1px solid #222;
	padding:2px 6px 4px 24px;
	font:8pt verdana;color:#FFF;
	text-align:left;
	}

#ejemplo_html #ContEjemplo {
	border:1px solid #444;
	border-top:0px;padding:3px;
	font-size:10pt;
	font-family:"lucida console";
	color:black;
	background:url(img/fondo_ejemplo.gif) center no-repeat #FFF;
	}


/* VENTANA DEL RESULTADO EN NAVEGADOR */

#ejemplo_naveg {
	background:url('/img/fondo_titulo_ejemplo.png') repeat-x top;
	margin:10px 0px 15px;
	border:2px solid #CCC;
	}

#ejemplo_naveg #titulo_2 {
	background:url('/img/icono-firefox.gif') no-repeat 5px 2px;
	border:1px solid #444;border-top:1px solid #222;
	padding:2px 6px 4px 36px;
	font:8pt verdana;color:#FFF;
	text-align:left;
	}

#ejemplo_naveg #ContResultado {
	background-color:#FFF;
	border:1px solid #444;
	border-top:0px;padding:5px 8px;
	font-size:12pt;font-family:'times new roman';
	color:black;
	}


/* ICONOS DEL EJEMPLO */

#abrir_1, #abrir_2 {
	line-height:8px;
	width:80px;
	margin:0px 2px 10px 0px;
	text-align:center;
	}

#abrir_1 a, #abrir_2 a {
	letter-spacing:0px;
	font-size:x-small;
	text-decoration:none;
	color:#444;
	}

Javascript

Código:

function minimizar_1() { document.getElementById('ContEjemplo').style.display='none';
			 document.getElementById('min_1_x').style.display='inline';
			 document.getElementById('min_1').style.display='none';
			 }

function minimizar_1_x() { document.getElementById('ContEjemplo').style.display='block';
			 document.getElementById('min_1').style.display='inline';
			 document.getElementById('min_1_x').style.display='none';
			 }

function restaurar_1() { document.getElementById('ContEjemplo').style.display='block';
			 document.getElementById('ContEjemplo').style.height='150px';
			 document.getElementById('ejemplo_html').style.width='450px';
			 document.getElementById('ContEjemplo').style.overflow='auto';
			 document.getElementById('min_1_x').style.display='none';
			 document.getElementById('min_1').style.display='inline';
			 document.getElementById('rest_1').style.display='none';
			 document.getElementById('max_1').style.display='inline';
			 }

function maximizar_1() { document.getElementById('ContEjemplo').style.display='block';
			 document.getElementById('min_1_x').style.display='none';
			 document.getElementById('min_1').style.display='inline';
			 document.getElementById('ContEjemplo').style.height='100%';
			 document.getElementById('ejemplo_html').style.width='100%';
			 document.getElementById('ContEjemplo').style.overflow='auto';
			 document.getElementById('max_1').style.display='none';
			 document.getElementById('rest_1').style.display='inline';
			 }

function cerrar_1()    { document.getElementById('ejemplo_html').style.display='none';
			 document.getElementById('abrir_1').style.display='block';
			 }

function abrir_1()     { document.getElementById('ejemplo_html').style.display='block';
			 document.getElementById('abrir_1').style.display='none';
			 }



function minimizar_2() { document.getElementById('ContResultado').style.display='none';
			 document.getElementById('min_2_x').style.display='inline';
			 document.getElementById('min_2').style.display='none';
			 }

function minimizar_2_x() { document.getElementById('ContResultado').style.display='block';
			 document.getElementById('min_2').style.display='inline';
			 document.getElementById('min_2_x').style.display='none';
			 }

function restaurar_2() { document.getElementById('ContResultado').style.display='block';
			 document.getElementById('ContResultado').style.height='150px';
			 document.getElementById('ejemplo_naveg').style.width='450px';
			 document.getElementById('ContResultado').style.overflow='auto';
			 document.getElementById('min_2_x').style.display='none';
			 document.getElementById('min_2').style.display='inline';
			 document.getElementById('rest_2').style.display='none';
			 document.getElementById('max_2').style.display='inline';
			 }

function maximizar_2() { document.getElementById('ContResultado').style.display='block';
			 document.getElementById('min_2_x').style.display='none';
			 document.getElementById('min_2').style.display='inline';
			 document.getElementById('ContResultado').style.height='100%';
			 document.getElementById('ejemplo_naveg').style.width='100%';
			 document.getElementById('ContResultado').style.overflow='auto';
			 document.getElementById('max_2').style.display='none';
			 document.getElementById('rest_2').style.display='inline';
			 }

function cerrar_2()    { document.getElementById('ejemplo_naveg').style.display='none';
			 document.getElementById('abrir_2').style.display='block';
			 }

function abrir_2()     { document.getElementById('ejemplo_naveg').style.display='block';
			 document.getElementById('abrir_2').style.display='none';
			 }

bueno el que pueda indicarme alguna técnica o guiarme para lograr esto solamente con CSS se lo agradeceria mucho, si no, tendre que estar de porvida con este código feo...

Mikmoro · #2 (**permalink**) 12/12/2008, 17:10

Yo no creo que se pueda: son 6 comportamientos para cada caja, 2 por 3 botones, y con CSS no es fácil hacerlos persitentes.

Si te preocupa o te interesa de verdad la accesibilidad, igual puedes empezar a plantearte dejar de usar unas cajas "cerrables" y "redimensionables" para presentar simples ejemplos.

Null_ · #3 (**permalink**) 12/12/2008, 17:42

Cita:

Iniciado por Mikmoro

Yo no creo que se pueda: son 6 comportamientos para cada caja, 2 por 3 botones, y con CSS no es fácil hacerlos persitentes.

Si te preocupa o te interesa de verdad la accesibilidad, igual puedes empezar a plantearte dejar de usar unas cajas "cerrables" y "redimensionables" para presentar simples ejemplos.

Gracias por ver y analizar mi código Mikmoro

Perfecto, entiendo tu punto, esperemos a ver si hay alguien mas que "crea que se pueda" y responda por aca, aun siento que podría llegar a hacerlo con CSS...

Por otro lado, la accesibilidad a mis ejemplos esta correcta por parte de los usuarios, pero no por parte de los sistemas de puntuacion SEO que es la parte en que me empeze a preocupar ahora. Pues un ejemplo siempre estará visible ante el usuario, y si este no dispone de javascript, solo se le limitara el privilegio de utilizar los botones funcionales...

El fin de mi código es presentar futuros ejemplos que utilizen porcentajes o diseños liquidos al usuario siendo que este pueda visualizar su brillo sin necesidad de utilizar un enlace a una nueva página (cosa que también ofresco). Con este método quiero probar si este visitante volverá nuevamente al sitio porque le ha gustado la presentacion de los ejemplos...

Bueno eso, gracias por responder, si puedes Mikmoro... convenceme a sacrificar mis ejemplos para obtener mas beneficios...

Mikmoro · #4 (**permalink**) 12/12/2008, 17:57

No, no, no te digo que sacrifiques tus ejemplos, estaría bueno, lo que decía es plantearse esa manera tan molona con cajas dimensionables y tal de mostrarlos, que siendo algo bonito para un tipo de usuarios, también es algo innecesario, y no muy bueno si no se puede degradar el javascript de forma transparente.

No entiendo cuando dices que es accesible para las personas pero no para los robots: si te refieres a que una persona sin JS puede ver el ejemplo pero el robot dice que ahí hay algo contrario a la accesibilidad, seguro que se debe a que no tienes puesto el JS de forma transparente o no "intrusiva", y el robot lo sigue viendo ahí interfiriendo en el código.
Si no hablabas de eso, entonces ya me explicarás.

Yo también quedo a la expectativa de que algún valiente diga que eso se puede conseguir sólo con CSS. Lo veo muy difícil, pero dejemos una puerta abierta a que alguien nos sorprenda.

Null_ · #5 (**permalink**) 12/12/2008, 20:44

Cita:

Iniciado por Mikmoro

No entiendo cuando dices que es accesible para las personas pero no para los robots: si te refieres a que una persona sin JS puede ver el ejemplo pero el robot dice que ahí hay algo contrario a la accesibilidad, seguro que se debe a que no tienes puesto el JS de forma transparente o no "intrusiva", y el robot lo sigue viendo ahí interfiriendo en el código.
Si no hablabas de eso, entonces ya me explicarás.

Hablo de eso, entendiste bien

bueno... ahora comprendi mejor tu ideal y espero que "algún valiente" me eleve mi esperanza

PD: ¿Que es "molona"? soy de chile...

McPinkY18 · #6 (**permalink**) 12/12/2008, 23:01

molona es uan palara de españa me parece es comno decir elegante bonito agradable

PD : Null_ acabo de ver tu pagina y esta muy interesante y yo que estoy empezando con html hace 1 semana :). Esta muy presentable tu pagina y sobre todo por que no hay tantos gifs q distraen a la hora de leer los articulos

ni mas q decir esta guapa tu web :D

rb3m · #7 (**permalink**) 13/12/2008, 00:40

No se puede, pero como Mikmoro lo señaló correctamente: si te sigue diciendo que tienes un problema de accesibilidad es porque estás usando javascript de manera intrusiva, y en el caso de tu sitio es porque los botones los estás haciendo así:

<a href="javascript:abrir_1()"><img ... <-- esta imagen no es una liga, por lo que no debería usar el tag <a>

La función de javascript la puedes asignar al tag <img> mismo, en vez de crear una liga que no va a ninguna parte. Si le asignas una clase a <img>, por ejemplo <img class="cerrar"> puedes recorrer tu documento con javascript y cada que encuentre una imagen de esa clase asignarle la acción de cerrar.

Mejor aún, que busque los div de clase iconos y les vaya metiendo tanto las imágenes como las acciones corresponidentes. De esa manera quien no tenga js tampoco verá los botones (que no harían nada).

Null_ · #8 (**permalink**) 13/12/2008, 00:46

vale, tu eres muy molono! :D

PD: te deje un mensajito en tu perfil :P

Null_ · #9 (**permalink**) 13/12/2008, 00:51

Cita:

Iniciado por rb3m

No se puede, pero como Mikmoro lo señaló correctamente: si te sigue diciendo que tienes un problema de accesibilidad es porque estás usando javascript de manera intrusiva, y en el caso de tu sitio es porque los botones los estás haciendo así:

<a href="javascript:abrir_1()"><img ... <-- esta imagen no es una liga, por lo que no debería usar el tag <a>

La función de javascript la puedes asignar al tag <img> mismo, en vez de crear una liga que no va a ninguna parte. Si le asignas una clase a <img>, por ejemplo <img class="cerrar"> puedes recorrer tu documento con javascript y cada que encuentre una imagen de esa clase asignarle la acción de cerrar.

Mejor aún, que busque los div de clase iconos y les vaya metiendo tanto las imágenes como las acciones corresponidentes. De esa manera quien no tenga js tampoco verá los botones (que no harían nada).

oh! gracias, entendi todo tu punto de vista, intentare eso mañana y te comentare haber si tengo algunas dudas.... por sierto ese fue mas o menos mi tercer javascript, no soy un experto, pero me quedo gustando el lenguaje jeje...

gracias por recomendarme una mejora

, tu tambien eres muy molono :D

Mikmoro · #10 (**permalink**) 13/12/2008, 06:04

Cita:

Iniciado por Null_

gracias por recomendarme una mejora

, tu tambien eres muy molono :D

Molón, sería molón.
El verbo "molar" (coloquial), significa gustar (en varios sentidos o con varias acepciones). Ese coche me mola (me gusta, pero algo más que gustar, es guay, buen rollo, etc.).
Algo muy molón es algo bonito pero a la vez enrollado, cool, etc.

Debes buscar información sobre javascript no intrusivo, y en la dirección que te indica rb3m exactmente. Si consigues dibujar los botones con JS, de manera que si no está presente ni se ven, es perfecto.

Null_ · #11 (**permalink**) 13/12/2008, 14:07

Jaja, gracias por enseñarme algo del diccionario coloquial de españa xD
Bueno, me han surgido dudas, pero ya comprendi todo el tema de javascript no intrusivo pero los ejemplos que encontre no me funcionan ¬¬

Aca postie lo que encontre para que me ayudara mas gente :D

Agradeceria su info

Mikmoro · #12 (**permalink**) 13/12/2008, 17:18

He leído el otro hilo y es exactamente eso. Aun así, yo le pediría a rb3m (que seguro que maneja JS mejor que yo), que me ayudara con el código para que las imágenes de los botones se carguen mediante JS, y si está desactivado, que ni siquiera aparezcan.
Eso sería degradar perfectamente JS.

rb3m · #13 (**permalink**) 15/12/2008, 10:10

Hola,

Hice algo así, pero por el tiempo me permití hacerlo usando jquery porque 1) es mucho más rápido, y 2) ya tenía algo medio empezado.

Es posible hacerlo sin jquery, para lo cual es recomendable que en vez de redescubrir el hilo negro usar algunas de las funciones ya existentes para añadir elementos, asignar eventos y mostrar/ocultar, por ejemplo insertAfter() , addEvent() y toggle(). Las tres están disponibles en una sola entrada del blog de Dustin Diaz: http://www.dustindiaz.com/top-ten-javascript/

Con jquery sería así:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <style type="text/css">
    h3 {
      width: 50%;
      color: white;
      background-color: black;
      margin: 0;
      display: block;
    }

    h3 + img {
      position: relative;
      top: -20px;
      left: 45%;
    }
  </style>
    
  <script type="text/javascript" src="../js/jquery-latest.pack.js"></script>
  <script type="text/javascript">
  $(document).ready(function()
   {
   //agrega después de cada h3
   var botones = '<img src="boton_restaurar.gif" alt="Mostrar/Ocultar" class="switch" />';
   $("h3").after(botones)

   //esconde los elementos con la clase toggable
   $(".toggable").hide(); 

   //le asignamos una función a la clase switch
   $(".switch").click(function()
  {
  //el secreto está en el next.
    $(this).next(".toggable").toggle("slow");
  });
});
</script>
  <title>Botones no intrusivos</title>
  </head>
  <body>

<h3>Lista 1</h3>
<ul class="toggable">
<li>bla</li>
<li>bla bla</li>
<li>bla bla bla</li>
</ul>

<h3>Lista 2</h3>
<ul class="toggable">
<li>ble</li>
<li>ble ble</li>
<li>ble ble ble</li>
</ul>

<h3>Lista 3</h3>
<ul class="toggable">
<li>bli</li>
<li>bli bli</li>
<li>bli bli bli</li>
</ul>

<h3>Lista 4</h3>
<ul class="toggable">
<li>¿Que dijeron? "Sigue blo", pues no. Este es nomás para despistar. Abuzados.</li>
</ul>

  </body>
</html>

Y el ejemplo funcionando: http://robertobaca.net/ejemplos/boto...les.jquery.htm

Tal vez me compliqué un poco con el css.

Null_ · #14 (**permalink**) 15/12/2008, 10:30

Que bello el efecto rb3m (solo le faltan unos ajustes al css) pero creo que seguire con mi javascript, no con una caja con efecto tipo "power point" (que me carga), prefiero conservar un estilo de caja tipo "windows" mas rudo.
Y Mikmoro, yo el día sabado en la noche me puse a pensar exactamente lo mismo, me gustaria que si el usuario no tuviera javascript activado, no carge los botones, pues le serian inútiles.

bueno, posteare eso ultimo en el otro hilo...

rb3m · #15 (**permalink**) 15/12/2008, 10:55

Cita:

Iniciado por Null_

Que bello el efecto rb3m (solo le faltan unos ajustes al css) pero creo que seguire con mi javascript, no con una caja con efecto tipo "power point" (que me carga), prefiero conservar un estilo de caja tipo "windows" mas rudo.

El look y el efecto lo puedes hacer como quieras. El ejemplo pretende demostrar más o menos como funcionaría pero no ser exactamente como lo tienes que hacer tú. Simplemente puedes tomar de ahí lo que necesites y adaptarlo a lo que necesites y como lo quieras hacer ver.

Por ejemplo, yo nada más puse un botón, pero tú puedes poner los que quieras, asignarle una clase a cada uno y una acción diferente a cada clase, pero al final del mismo modo que se hace para uno se hace para dos, tres, cuatro, etc. Yo le puse cierto efecto de hacerlo aparecer lentamente, tú le puedes decir que aparezca rápido, o sin efecto alguno, con otro color de fondo, esconder el botón activado, etc.

Triby · #16 (**permalink**) 15/12/2008, 18:00

Lo de no mostrar los botones si Javascript no esta habilitado es muy sencillo, solo ponles display:none; y haz una funcion en js para cambiarlos a display:block; cuando la pagina ya este cargada.

Null_ · #17 (**permalink**) 15/12/2008, 18:08

Cita:

Iniciado por Triby

Lo de no mostrar los botones si Javascript no esta habilitado es muy sencillo, solo ponles display:none; y haz una funcion en js para cambiarlos a display:block; cuando la pagina ya este cargada.

Pero aun asi no solucionamos nada para beneficiar a la accesibilidad, hay que considerar todos los aspectos de la web...
¿Que pasa con los que no disponen de hojas de estilo ni javascript pero solo del documento html?
Ellos veran los botones y no los podrán utilizar, y esto es lo que deseo mejorar. Hacer que el javascript cuando se carge, carge a su vez los botones funcionales...

Gracias por el aporte, si no hay solución creo que hare algo parecido a lo que has dicho para mejorar un poco el ejemplo.

Triby · #18 (**permalink**) 15/12/2008, 18:22

Entonces crea bloques (span o div) con identificador para cada boton y la funcion aplicara el innerHtml con imagen, acciones, etc., mucho trabajo para crear el javascript necesario, pero si ganarias muchos puntos en cuestion de accesibilidad.

Null_ · #19 (**permalink**) 18/12/2008, 18:41

Hola de nuevo a todos,
Gracias por toda su ayuda!
bueno pude degradar completamente el javascript y quedo totalmente accesible =D
quedo mejor de lo que esperaba...
aqui pueden ver el ejemplo si es que les sirve de algo...

bye