Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Podria hacer esto (javascript) solo con CSS?... en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 12/12/2008, 15:03
Avatar de Null_  
Fecha de Ingreso: octubre-2008
Ubicación: Santiago
Mensajes: 530
Antigüedad: 9 años, 1 mes
Puntos: 30
Podria hacer esto (javascript) solo con CSS?...

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...
__________________
Diego Escares
• Twitter: @diegoescares
• Web: diegoescares.com
  #2 (permalink)  
Antiguo 12/12/2008, 17:10
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Podria hacer esto (javascript) solo con CSS?...

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.
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 12/12/2008, 17:42
Avatar de Null_  
Fecha de Ingreso: octubre-2008
Ubicación: Santiago
Mensajes: 530
Antigüedad: 9 años, 1 mes
Puntos: 30
Respuesta: Podria hacer esto (javascript) solo con CSS?...

Cita:
Iniciado por Mikmoro Ver Mensaje
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...
__________________
Diego Escares
• Twitter: @diegoescares
• Web: diegoescares.com
  #4 (permalink)  
Antiguo 12/12/2008, 17:57
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Podria hacer esto (javascript) solo con CSS?...

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.
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 12/12/2008, 20:44
Avatar de Null_  
Fecha de Ingreso: octubre-2008
Ubicación: Santiago
Mensajes: 530
Antigüedad: 9 años, 1 mes
Puntos: 30
Respuesta: Podria hacer esto (javascript) solo con CSS?...

Cita:
Iniciado por Mikmoro Ver Mensaje
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...
__________________
Diego Escares
• Twitter: @diegoescares
• Web: diegoescares.com

Última edición por Null_; 12/12/2008 a las 20:51
  #6 (permalink)  
Antiguo 12/12/2008, 23:01
 
Fecha de Ingreso: diciembre-2008
Ubicación: Cordoba
Mensajes: 127
Antigüedad: 9 años
Puntos: 17
Respuesta: Podria hacer esto (javascript) solo con CSS?...

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
  #7 (permalink)  
Antiguo 13/12/2008, 00:40
 
Fecha de Ingreso: noviembre-2008
Mensajes: 94
Antigüedad: 9 años
Puntos: 6
Respuesta: Podria hacer esto (javascript) solo con CSS?...

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).
  #8 (permalink)  
Antiguo 13/12/2008, 00:46
Avatar de Null_  
Fecha de Ingreso: octubre-2008
Ubicación: Santiago
Mensajes: 530
Antigüedad: 9 años, 1 mes
Puntos: 30
Respuesta: Podria hacer esto (javascript) solo con CSS?...

vale, tu eres muy molono! :D

PD: te deje un mensajito en tu perfil :P
__________________
Diego Escares
• Twitter: @diegoescares
• Web: diegoescares.com
  #9 (permalink)  
Antiguo 13/12/2008, 00:51
Avatar de Null_  
Fecha de Ingreso: octubre-2008
Ubicación: Santiago
Mensajes: 530
Antigüedad: 9 años, 1 mes
Puntos: 30
Respuesta: Podria hacer esto (javascript) solo con CSS?...

Cita:
Iniciado por rb3m Ver Mensaje
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
__________________
Diego Escares
• Twitter: @diegoescares
• Web: diegoescares.com
  #10 (permalink)  
Antiguo 13/12/2008, 06:04
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Podria hacer esto (javascript) solo con CSS?...

Cita:
Iniciado por Null_ Ver Mensaje
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.
__________________
Visita mi nueva web idplus.org
  #11 (permalink)  
Antiguo 13/12/2008, 14:07
Avatar de Null_  
Fecha de Ingreso: octubre-2008
Ubicación: Santiago
Mensajes: 530
Antigüedad: 9 años, 1 mes
Puntos: 30
Respuesta: Podria hacer esto (javascript) solo con CSS?...

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
__________________
Diego Escares
• Twitter: @diegoescares
• Web: diegoescares.com
  #12 (permalink)  
Antiguo 13/12/2008, 17:18
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Podria hacer esto (javascript) solo con CSS?...

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.
__________________
Visita mi nueva web idplus.org
  #13 (permalink)  
Antiguo 15/12/2008, 10:10
 
Fecha de Ingreso: noviembre-2008
Mensajes: 94
Antigüedad: 9 años
Puntos: 6
Respuesta: Podria hacer esto (javascript) solo con CSS?...

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.
  #14 (permalink)  
Antiguo 15/12/2008, 10:30
Avatar de Null_  
Fecha de Ingreso: octubre-2008
Ubicación: Santiago
Mensajes: 530
Antigüedad: 9 años, 1 mes
Puntos: 30
Respuesta: Podria hacer esto (javascript) solo con CSS?...

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...
__________________
Diego Escares
• Twitter: @diegoescares
• Web: diegoescares.com

Última edición por Null_; 15/12/2008 a las 10:44
  #15 (permalink)  
Antiguo 15/12/2008, 10:55
 
Fecha de Ingreso: noviembre-2008
Mensajes: 94
Antigüedad: 9 años
Puntos: 6
Respuesta: Podria hacer esto (javascript) solo con CSS?...

Cita:
Iniciado por Null_ Ver Mensaje
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.
  #16 (permalink)  
Antiguo 15/12/2008, 18:00
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 4 meses
Puntos: 2113
Respuesta: Podria hacer esto (javascript) solo con CSS?...

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.
__________________
- León, Guanajuato
- GV-Foto
  #17 (permalink)  
Antiguo 15/12/2008, 18:08
Avatar de Null_  
Fecha de Ingreso: octubre-2008
Ubicación: Santiago
Mensajes: 530
Antigüedad: 9 años, 1 mes
Puntos: 30
Respuesta: Podria hacer esto (javascript) solo con CSS?...

Cita:
Iniciado por Triby Ver Mensaje
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.
__________________
Diego Escares
• Twitter: @diegoescares
• Web: diegoescares.com
  #18 (permalink)  
Antiguo 15/12/2008, 18:22
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 4 meses
Puntos: 2113
Respuesta: Podria hacer esto (javascript) solo con CSS?...

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.
__________________
- León, Guanajuato
- GV-Foto
  #19 (permalink)  
Antiguo 18/12/2008, 18:41
Avatar de Null_  
Fecha de Ingreso: octubre-2008
Ubicación: Santiago
Mensajes: 530
Antigüedad: 9 años, 1 mes
Puntos: 30
Respuesta: Podria hacer esto (javascript) solo con CSS?...

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
__________________
Diego Escares
• Twitter: @diegoescares
• Web: diegoescares.com
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:31.