Lindos botones con CSS (II)

botones con fondo lindo
Al igual que en el post anterior, voy a compartir el código HTM y CSS para hacer unos botones lindos y accesibles, ya que el contenido está separado del formato.

En este caso usé una imagen transparente de frente y una imagen de unas flores como fondo*.
Imagen de frente:

Rectángulo semi transparente hecho en Gimp (lo pongo sobre una superficie gris para que se pueda ver…)

Rectángulo semi transparente

El código es prácticamente el mismo que en el post anterior, pero le modifiqué los márgenes y el padding para que se viera el botón transparente dentro del otro.

Este es el HTML. En el bloque de la izquierda abro y cierro el “marco” por cada botón, y en el de la derecha el “marco” contiene los otros tres divs:

<div style=”width: 15%; float: left;”>
<div class=”marco”>
<div class=”boton”><p>Opción 1</p>
</div></div>
<div class=”marco”>
<div class=”boton”><p>Opción 2</p>
</div></div>
<div class=”marco”>
<div class=”boton”><p>Opción 3</p>
</div></div>
<div class=”marco”>
<div class=”boton”><p>Opción 4</p>
</div></div>
</div>

<div style=”width: 15%; float: left; margin-left: 20px;”>
<div class=”marco” style=”margin: 10px;”>
<div class=”boton”><p>Opción 1</p>
</div>
<div class=”boton”><p>Opción 2</p>
</div>
<div class=”boton”><p>Opción 3</p>
</div>
</div>
</div>

Y acá está el CSS:

.marco {

width: 99%;
background-image: url(‘http://irisfernandez.com.ar/imagenes/flores.jpg’);
background-repeat: repeat-none;
padding-top: 10px;
padding-bottom: 10px;
}

.boton {
width: 80%;
line-height: 40px;
background-image: url(‘http://irisfernandez.com.ar/imagenes/transparente.png’);
color: #000;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
}
.boton a:link {
color: #000;
text-decoration: none;
}
.boton a:hover {

color: #000;
text-decoration: none;
}
.boton a:visited {

color: #000; text-decoration: none;
}

*Imagen de fondo descargada de Wikimedia Commons:

Douglasia laevigata 2453CC BY-SA 3.0

Walter Siegmund – Own work

Lindos botones con CSS

Botones lindos con CSSEn uno de mis trabajos tenía que hacer unos botones más o menos acordes con el resto del sitio y se me ocurrió hacerlos en un rectángulo con sombra, sobre una franja de otro color.

¿Por qué no hacerlos directamente como imagen?

Porque la regla número uno de la accesibilidad es separar el contenido del formato. Un invidente puede escuchar el nombre de las opciones únicamente si estas están insertadas como texto.

Un dispositivo muy lento mostrará los textos y tardará mucho en cargar las imágenes.

¿Cómo se hacen?

1) En el archivo CSS se definen los tipos de DIV que se usarán:

Un div contiene la franja que está debajo del rectángulo.

Es un div que mide 50px de altura, y que tiene como fondo una imagen (porque esa franja anaranjada tiene un degradado). La imagen de fondo se repite horizontalmente cuanto sea necesario, adaptándose al ancho del DIV.

Este es el código CSS del marco:

.marco {
width: 99%;
height: 50px;
 background-color: #fff;
background: url('https://blabla/pix/fondoopciones.png');
background-repeat: repeat-x;
}

Y este es el CSS del botón en sí

.boton {

 width: 80%;
 line-height: 40px;
 background-color: #773156;
 color: #fff;
 margin-left: auto;
 margin-right: auto;
 text-align: center;
 box-shadow: 5px 5px 2px #999; 
}
.boton a:link {
 color: #fff;
 text-decoration: none;
 }

.boton a:hover {

 color: #fff;
 text-decoration: none;
 }

.boton a:visited {

 color: #fff; text-decoration: none;

}

Luego, en el HTML utilizo un DIV dentro de otro:

<div class="marco">
<div class="boton">
<a href="enlacedelboton">Preguntas frecuentes</a>
</div>
</div>

Mapas de imagen

¿Qué es un mapa de imagen? Se trata de una imagen que contiene zonas sensibles donde, al pasar el mouse, se activa un link. Aquí muestro dos variantes: una sola imagen con zonas sensibles, y una segunda opción donde se dividió la gran imagen en tres imágenes, y se aplicó el intercambio de imágenes explicado en el post anterior.

Mapa de imagen con zonas sensibles y enlaces externos

Para realizarlo, se utiliza una imagen de base con la propiedad usemap, que vincula la imagen con el mapa que describimos previamente, siempre utilizando el atributo ALT, de acuerdo a las recomendaciones de accesibilidad.

Mapamundo Kepler

America septentrionalis Septentrio Terra Australis Incognita Mar di India

Detenga el mouse en los continentes para leer su nombre

El problema que encontré en este caso, es que en el celular con Android no se muestran los Titles ni los ALT. Este es el código del mapa de imagen anterior:

<img alt=”Mapamundo Kepler” src=”800px-Kepler-world.jpg” usemap=”#mapa1″ width=”600″ border=”0″ />

<map id=”mapa1″ name=”mapa1″>

<area title=”America septentrionalis” alt=”America septentrionalis” coords=”10,10,120,234″ shape=”rect” href=”http://……” />

<area title=”Septentrio” alt=”Septentrio” coords=”150,10,350,225″ shape=”rect” href=”http://……” />

<area title=”Terra Australis Incognita” alt=”Terra Australis Incognita” coords=”150,225,350,450″ shape=”rect” href=”http://……” />

<area title=”Mar di India” alt=”Mar di India” coords=”350,10,550,450″ shape=”rect” href=”http://……” /> </map>

<p style=”text-align: center;”>Detenga el mouse en los continentes para leer su nombre</p>

Ejemplo sin mapa de imagen

Utilizando lo explicado en el post anterior, dividimos la imagen grande en varias imágenes pequeñas, a las cuales les cambiamos el aspecto al pasar sobre ellas:

America septentrionalis
Septentrio y Terra Australis Incognita
Mar di India

Cambiar de imagen al pasar el mouse sin Javascript

Este es uno más de esos posts que escribo casi exclusivamente para mí misma, ya que cada vez que lo necesito me pongo a buscar en Internet…

Esta vez apliqué lo que encontré en este artículo: HTML Cambio de imagen sin javascript

El resultado puede verse en estos dos botones:

Letra pe::Letra eme

Este es el ejemplo de código para los botones anteriores:

<a

onmouseover=”document.letrape.src=’http://…./pe_verde.png'”

onmouseout=”document.letrape.src=’http://…./pe_bn.png'”

href=”https://www.irisfernandez.com.ar/betaweblog”>

<img alt=”Letra pe” src=”http://…./pe_bn.png” name=”letrape” />

</a>

<a

onmouseover=”document.letraeme.src=’http://…./eme_azul.png'”

onmouseout=”document.letraeme.src=’http://…/eme_bn.png'”

href=”https://www.irisfernandez.com.ar/betaweblog”>

<img alt=”Letra eme” src=”http://…/eme_bn.png” name=”letraeme” />

</a>

La traducción sería algo así como:

<enlace

onmouseover….cuando el mouse esté sobre esta imagen, cambiar a esta otra imagen: pe_verde.png

onmouseout……cuando el mouse salga de esta imagen, cambiar a esta imagen: pe_bn.png

href……….destino de la imagen >

<img….. imagen que se verá antes de que el mouse pase por encima>

Cómo ganar dinero con la accesibilidad web

Hace muchos años que tengo el honor de dar diversas charlas en eventos vinculados con el software libre, con la educación, o con ambas. Incluso he organizado varios de estos eventos, junto a otros profesionales muy queridos y muy capaces.

Los años, la experiencia, y sobre todo los fracasos me fueron mostrando que en mis charlas sobre Accesibilidad web, los asistentes eran pocos, y si bien solía interesarles el tema en el momento, lo aprendido solía quedar en esa hora y en ese lugar, si lograr encender la llama de la curiosidad y el deseo de profundizar (salvo honrosas excepciones, de gente super interesante con la que continúo en contacto).

Sin embargo, cuando comencé a crear grupos y a dar charlas vinculadas -por ejemplo- con Moodle, el éxito fue inmediato. ¿Cuál era la diferencia? ¿Por qué todo el mundo quería saber sobre Moodle y nadie sobre accesibilidad web? ¿Es que a la gente no le interesa que aquellas personas que tienen alguna limitación para moverse puedan hacer trámites por internet, comprar en el supermercado virtual y estudiar desde su casa?

Crear sitios accesibles es un tema realmente complejo. Hay que aprender, hay que saber, hay que informarse. Y tanto esfuerzo, tanta energía, ¿para qué? Para algo tan importante como no dejar a nadie afuera. 

Las personas con discapacidad no tiene necesidades especiales: como me lo enseñó Jarmila Havlik (nunca olvido sus enseñanzas), las personas con discapacidad necesitan soluciones especiales para las mismas necesidades que tenemos todos los seres humanos: trabajar, estudiar, hacer nuestros trámites, y sobre todo, valernos por nosotros mismos. Y es eso lo que necesitan quienes se ven beneficiados por la accesibilidad web. Un discapacitado visual, una persona sorda, alguien con movimientos poco controlados, con epilepsia fotosensible, con un yeso en un brazo, con un mouse que no funciona, o amamantando a un bebé… ¿no merecen nuestro esfuerzo?

Y ahora, retomando el título del post, me pregunto ¿Cómo ganar dinero con la accesibilidad web? Digo, me lo pregunto porque no tengo ni la menor idea, pero lo único de lo que sí estoy segura, es que el dinero moviliza a la gente, convoca y motiva; no así la sensibilidad social o el deseo de hacer mejor la vida de los otros. Si alguien tiene la respuesta a mi pregunta, le pido que la comparta; a ver si logramos que la accesibilidad empiece a salir en la tele y a enseñarse en las academias…

 

Dedicado a Martín Baldassarre, y a Claudio Segovia, amigos que no dejan de poner energías en esto que a veces parece una lucha contra molinos de viento. Inspirada por una charla con Pablo Medrano.