Transcript
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com
Botones con estilo
Autores del manual Este manual ha sido realizado por los siguientes colaboradores de DesarrolloWeb.com: Luciano Moreno Consultor, diseñador y desarrollador web en ParaRedeBJS. Especialista en usabillidad y diseño centrado en el usuario. (6 capítulos)
Manual de Botones con estilo: http://www.desarrolloweb.com/manuales/30/ © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
1
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com
Botones y HTML A pesar de ser los formularios una de las partes más importantes de toda aplicación web, es bien cierto que el lenguaje HTML nos ofrece pocas (por no decir ninguna) opciones para adaptar sus elementos al diseño de nuestra página. Efectivamente, son pocos los componentes sobre los que podemos actuar para cambiar su aspecto externo. Tenemos la opción de dar más o menos longitud a un textarea o a una caja de texto, de configurar el tamaño de la fuente de las mismas, de "trucar" una lista de selección mediante espacios para conseguir que tenga un tamaño adecuado, etc. Pero uno de los elementos más operativos, los botones de formulario, quedan casi fuera de estas configuraciones. Referencia: En nuestro manual de HTML podrás encontrar una serie de artículos sobre formularios que te ayudarán en la tarea de confeccionar estos elementos interactivos.
Así, siempre que introduzcamos en nuestra página un elemento submit, reset o button, su aspecto será del tipo:
enviar
Es decir, de fondo grís, con aspecto 3D y con pocas posibilidades más. El botón anterior es de tipo submit, que, además, tiene por objeto ejecutar el envío de los datos del formulario. De esta forma, si tenemos un formulario con un campo de texto, cuyo atributo action apunta a la página de Yahoo España, definido por el código:
Si lo deseas, puedes descargar los códigos e imágenes empleados en todo este tutorial. Siempre que pulsemos sobre el botón se nos abrirá una ventana nueva (target="_blank") con la página de Yahoo (valor de action). Pero también ocurrirá lo mismo, por propia definición, siempre que, teniendo el foco uno de los objetos del formulario, pulsemos la tecla Intro o la tecla Enter (retorno de carro). Sólo tenéis que comprobarlo en el ejemplo anterior, situando el cursor sobre la caja de texto y pulsando Enter. La pregunta a hacernos es: ¿Podemos de alguna forma cambiar el aspecto de estos elementos?. Y la respuesta, afortunadamente, es que sí. Vamos a ver a continuación cómo podemos cambiar el aspecto exterior de los botones de formulario, bien haciendo uso de complementos al lenguaje HTML, como las Hojas de Estilos en Cascada (CSS), bien simulando estos componentes. Artículo por Luciano Moreno
Manual de Botones con estilo: http://www.desarrolloweb.com/manuales/30/ © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
2
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com
Botones y CSS Las Hojas de Estilos en Cascada (CSS) son sin duda una de las herramientas más útiles que podemos usar en nuestras páginas web. Nos permiten definir el aspecto con el que se van a presentar todos y cada uno de los elementos de una página web, consiguiendo con ello la buscada separación entre datos y presentación, tan buscada por los desarrolladores. Mediante CSS podemos mejorar notablemente el aspecto de nuestros botones de formulario, siempre y cuando el navegador usado por nuestro visitante soporte la aplicación de estilos a estos elementos, es decir, todos los navegadores de 5ª y 6ª generación. Referencia: Dispones en DesarrolloWeb de un manual de hojas de estilo CSS que te enseñará a utilizar esta tecnología para crear páginas más atractivas y precisas.
Como ejemplo, vamos a modificar el aspecto externo del botón de la página anterior, dándole un fondo azul, quitándole el aspecto 3D y poniendo el texto en blanco, con fuente Verdana de 10 pixels. También vamos a definir su tamaño exacto. El código necesario será:
Cuyo resultado es el siguiente:
enviar
Analizando un poco el código anterior, vemos que hemos definido una clase de estilo, .boton, que define los atributos deseados para nuestro botón. La clase viene definida estableciendo, dentro de las etiquetas
... el nombre de la misma precedido por un punto, unas llaves y dentro de ellas los atributos deseados con sus valores. De esta forma podemos fijar el aspecto concreto de nuestros botones, teniendo libertad para defirnir cuantas clases necesitemos. Como ventajas de este método están la total configuración de aspecto y que seguimos teniendo un botón submit estándar (por lo que si pulsamos la tecla Enter se enviarán los datos del formulario). Las pegas son que estas características de estilos para botones no son aceptadas por Netscape 4x y que seguimos teniendo la limitación de botones rectangulares. Descargar los códigos e imágenes Artículo por Luciano Moreno
Manual de Botones con estilo: http://www.desarrolloweb.com/manuales/30/ © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
3
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com
Botones e imágenes En multitud de ocasiones tenemos que construir páginas web en las que la forma general de los elementos de la misma no es rectángular, por lo que la inclusión de botones de formulario estándares romperían este diseño, al introducir elementos rectángulares en la composición. En estos casos podemos recurrir a la simulación de botones mediante imágenes, con lo que la libertad de diseño es completa, pudiendo construir botones ovalados, circulares, triángulares, etc. Supongamos que hemos construido la siguiente imagen gif:
Sólo nos queda ahora darle vida mediante código JavaScript, lo que se consigue de forma fácil, incluyendo la imagen dentro de un enlace que llame al método submit del objeto form, con el que accedemos al formulario. El código necesario es del tipo:
Cuyo resultado es el siguiente:
Obtenemos así un botón con los lados redondeados, y que resulta compatible con todos los navegadores, al ser en realidad una imagen. Hemos añadido una clase de estilo (.enlace) para que al situar el cursor sobre el botón no aparezca la mano típica de los enlaces, sino la flecha característica de los botones; la pega es que esto último sólo funciona en Internet Explorer y Netscape 6x, mientras que en Netscape 4x seguirá apareciendo la mano. La principal diferencia entre usar una imagen y usar un botón estándar es en el caso de la imagen hemos perdido la funcionalidad de foco de los botones, es decir, que si ahora situamos el cursor en la caja de texto y pulsamos la tecla Enter, los datos del formulario no se enviarán. Vamos a ver cómo podemos arreglar esto. Nota: En algunos navegadores, por ejemplo Internet Explorer 6, no se llega a perder la funcionalidad del envío del formulario con la pulsación de la tecla Enter.
Descargar los códigos e imágenes Artículo por Luciano Moreno
Manual de Botones con estilo: http://www.desarrolloweb.com/manuales/30/ © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
4
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com
Botones, CSS y tablas Puesto que con el uso exclusivo de una imagen perdemos la propiedad de envío de datos mediante teclado, vamos ahora a diseñar un botón complejo, formado por piezas diversas que vamos a maquetar usando una tabla, de tal forma que el cuerpo del botón resultante sea un elemento estándar HTML. Para ello vamos a partir de la imagen del ejemplo anterior, a la que vamos a recortar los dos extremos curvos, usando para ello algún programa gráfico, como Paint Shop Pro. El proceso se resume en la siguiente figura:
Con esto, obtenemos los dos extremos que nos van a hacer falta para nuestro truco. El siguiente paso es crear una tabla tal que contenga en sus extremos laterales las imágenes anteriores, quedando en el centro una celda vacía (para que se mantengan los tamaños de las celdas sin contenido introducimos en ellas un gif transparente de 1x1 pixels, bs.gif):
En la celda vacía vamos a situar el botón con estilos del ejemplo 2, obteniendo con ello una repreducción de lo que era la imagen entera, pero que ahora será una tabla-botón:
Manual de Botones con estilo: http://www.desarrolloweb.com/manuales/30/ © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
5
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com
Cuyo resultado es el siguiente:
enviar
Este botón es de colores, tiene los lados curvos y admite los eventos típicos de los botones estándar, por lo que si situamos en cursor en la caja de texto y pulsamos Enter, los datos se enviarán. Además, también podemos acceder a ls demás propiedades de un botón, por ejemplo a disabled (Internet Explorer y Netscape 6x), que activa o desactiva un botón, de tal forma que aparece normal o "muerto", sin tener operatividad. El código necesario para ello es:
Que podéis ver en funcionamiento a continuación: desactivar activar Si pulsáis en enlace "desactivar" podréis observar cómo el texto de botón aparece en Internet Explorer en color grís, y si pincháis sobre él no ocurrirá nada. Lo mismo ocurre en Netscape 6x, aunque en este caso el texto del botón no sufre cambios. Al pulsar sobre el enlace "activar", el botón vuelve a su estado inicial. La única pega es que en Netscape 4x el resultado es feísimo, al no admitir este navegador estilos para los botones. Por lo tanto, este sistema es aconsejable en aquellas páginas que vayan a ser diseñadas para Internet Explorer y/o Netscape 6x. Descargar los códigos e imágenes Artículo por Luciano Moreno
Botones, imágenes y eventos Según lo visto hasta ahora, el botón más compatible es el formado por una imagen simple, al verse igual en todos los navegadores. Sin embargo, teníamos el problema de que este tipo de botón ignora los eventos de teclado, por lo que no envía los datos al pulsar el usuario la tecla Enter. Una solución a este problema es capturar dicho evento, es decir, la pulsación del usuario de la tecla Enter, ya que si lo conseguimos podremos llamar a una función JavaScript que nos envíe el formulario. El código necesario para ello es el que sigue, donde podemos apreciar que Internet Explorer y Netscape Navigator tienen una forma diferente de capturar los eventos, y que usamos el identificador de tecla 13, que es el que corresponde a Enter (podemos usar la tecla o teclas que necesitemos): HTMLWeb. WebScript. Diseño. Botones con estilo.
Manual de Botones con estilo: http://www.desarrolloweb.com/manuales/30/ © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
6
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com
Cuyo resultado es el siguiente:
Con esto hemos conseguido el objetivo buscado: un botón cross-browser (compatible con los diferentes navegadores), que además soporte los eventos característicos de este tipo de elementos de formulario. El inconveniente es que los textos que aparecen en la imagen deben ser fijos, salvo que definamos diferentes imágenes para los posibles casos. En caso de páginas que deban soportar multi-idioma, esto se convierte en un obstáculo importante. Vamos a ver cómo podemos hayar una solución a esto. Descargar los códigos e imágenes Artículo por Luciano Moreno
Manual de Botones con estilo: http://www.desarrolloweb.com/manuales/30/ © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
7
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com
Botones, tablas y eventos Para resolver el problema del multi-idioma lo ideal sería contar con un botón tal que el texto que aparece en él sea accesible mediante variables de servidor, es decir, que tengamos una estructura de botón fija, pero que su contenido podamos configurarlo según nuestras necesidades. Si nos basamos en lo estudiado hasta ahora, podemos usar la tabla-botón que habíamos construido, introduciendo en su celda central un texto, en lugar de un botón estándar con estilos. El problema a partir de aquí será doble: 1. Capturar el evento CLICK en la tabla, de tal forma que cuando el usuario pinche sobre cualquier parte de ella el formulario sea enviado. 2. Capturar el evento de la tecla Enter, para que se mantenga la funcionalidad típica de los botones. Este segundo problema lo hemos resuelto anteriormente, y en cuanto al primero, basta con aprovechar que Internet Explorer y Netscape 6x soportan los eventos en el elemento table. Y como Netscape 4x no los soporta, incluimos en texto de botón dentro de un enlace, para que el resultado final sea en cierta forma compatible con todos los navegadores. El código final necesario será del tipo: HTMLWeb. WebScript. Diseño. Botones con estilo.
Cuyo resultado es el siguiente:
enviar
Notad cómo hemos establecido dos funciones diferentes, envia() y envia2(), una llamada desde el enlace y otra desde el evento onclick de la tabla, y una variable booleana, contador. El objeto es que al pulsar sobre "enviar" no se envién dos veces los datos del formulario (ya que el texto está dentro del enlace y dentro de la tabla). La gran ventaja que presenta este botón ficticio es que es "casi" compatible con todos los navegadores, es totalmente configurable por nosotros y soporta acceso al texto que debe aparecer en el botón, con lo que es ideal para aplicaciones multi-lenguaje, en las que el texto debe depender del idioma elegido por el usuario. Conclusión Como véis, usando la imaginación y las herramientas simples de que disponemos, es fácil convertir elementos "sosos" de nuestras páginas en partes importantes del diseño de las mismas. Siempre existe alguna solución a nuetras necesidades de diseño, y para encontrarla basta con liberar nuestra mente y dejar que nuestras ideas fluyan. Descargar los códigos e imágenes Artículo por Luciano Moreno
Manual de Botones con estilo: http://www.desarrolloweb.com/manuales/30/ © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
9
