Diseño Web Javascript
No, no se ofendan. Con el título de este tutorial no pretendemos decirles que sus sitios sean malos o algo por el estilo, pero un aspecto que todo Webmaster debe tener en cuenta es que siempre se puede mejorar.
Con JavaScript disponemos de un poderoso lenguaje que nos permite añadir muy buenas funcionalidades a nuestras páginas Web con solo unas pocas líneas de código. En el tutorial de hoy, les traemos algunos sencillos trucos que nos ayudarán a obtener esa funcionalidad que tanto buscamos.
Todo el detalle, como siempre, después del salto.
Nota: El propósito de este artículo no es entrar en detalle sobre que es JavaScript ni detallar su funcionamiento. Lo que intentamos es entregar algunos pequeños códigos para que puedan insertarlos en sus sitios y saber que es lo que hace cada uno de ellos.
Con ese aviso, vamos de lleno a este tutorial. La verdad es que para el desarrollo no necesitaremos materiales especiales, a lo más un editor Web (como Dreamweaver o NVU) o simplemente un editor de texto (como Block de Notas) para insertar los códigos.
En resumen, hoy veremos:
Así que con los contenidos ya definidos, vamos manos a la obra:
1.- Añadir sitio a Favoritos: Este pequeño truco nos sirve para crear un vínculo (mediante texto o imagen) para que nuestros visitantes le hagan click y automáticamente añadan nuestra página a Favoritos. El código es bastante sencillo, y es como sigue:
<a href="javascript:window.external.AddFavorite('http://www.ejemplo.com','Titulo del
sitio');">Agregar a favoritos</a>
Solo deben cambiar la URL por la suya y el “Título del Sitio” por el que corresponda. Además si desean, el texto Agregar a favoritos pueden reemplazarlo por una imagen.
2.- Página de Inicio: Otra manera de crear lealtad con nuestros usuarios es otorgarles la posibilidad de dejar nuestro sitio como página de inicio, para que cada vez que abran su navegador, cargue nuestro sitio directamente. Esto se hace añadiendo el siguiente código, el cual creará un vínculo para que cuando hagan click se establezca la página de inicio:
<a href="http://www.ejemplo.com#" class="chlnk"
onclick="this.style.behavior='url(#default#homepage)';
this.setHomePage('http://www.ejemplo.com');"
style="cursor: hand"> Haznos tu página de inicio</a>
3.- Abrir una ventana emergente: También conocidos como “pop-ups”. A pesar de lo odiosos que pueden ser, tienen una cierta utilidad para algunos contenidos que queramos desplegar. Para abrir ventanas emergentes, debemos primero insertar la siguiente función entre las etiquetas <head> y </head>:
<script language="JavaScript">function Abrir_ventana (pagina) {var opciones="toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, width=508, height=365, top=85, left=140";window.open(pagina,"",opciones);}</script>
En esta función podemos editar varios parámetros de la ventana a abrir, como por ejemplo si tendra barra de estado, su ancho, alto, si tendra scrollbar, etc. Ahí podrán ajustar dependiendo de la necesidad que tengan. Luego para hacer uso de esa función, en los vínculos desde donde las llamaremos ponemos:
<a href="javascript:Abrir_ventana('popup.html')">Abrir la
ventana</a>
Donde popup.html es la página que se abrirá en la ventana emergente.
4.-Evitar el doble envío de formularios: Cuando tenemos formularios en nuestro sitio (contacto, registro, etc), muchas veces ocurre que algunos usuarios por distintas razones realizan más de un click y se produce un doble envío. Para prevenirlo, debemos partir por insertar la siguiente función entre las etiquetas <head> y </head>:
<script LANGUAGE="JavaScript"><!--var cuenta=0;function enviado() {if (cuenta == 0){cuenta++;return true;}else{alert("El formulario ya está siendo enviado, por favor aguarde un instante.");return false;}}// --></script>
Y luego en las propiedades del formulario añadimos la parte de ‘onSubmit” del siguiente código, tal como se muestra:
<form method="POST" action="proceso.php" onSubmit="return enviado()">...<input type="submit" value="Enviar"></form>
5.- Marcar/desmarcar todos los checkbox de un formulario: Cuando presentamos un formulario a los visitantes, en ocasiones les entregamos una serie de opciones que les dejamos marcar o desmarcar. Para esto es muy útil añadir un pequeño link para que los marquen o desmarquen todos si así lo desean. Para esto primero añadimos entre las etiqueas <head> y </head>:
<SCRIPT LANGUAGE = "JavaScript"><!--function modificar_boxes(chequear,cantidad){for (i=0; i < cantidad ; i++ ){if (chequear){document.forms[0].opcion[i].checked=true;}else{document.forms[0].opcion[i].checked=false;} }}--></SCRIPT>
Y luego en el formulario luego de que añadimos los checkboxes, añadimos lo siguiente:
<INPUT TYPE=button NAME="marcar" VALUE="Marcar todos" onClick="modificar_boxes(true,3)"><INPUT TYPE=button NAME="desmarcar" VALUE="Desmarcar todos" onClick="modificar_boxes(false,3)">
6.- Redirigir de acuerdo a la resolución de pantalla del usuario: Cuando construimos un sitio Web, un aspecto importante a tener en cuenta es la resolución de pantalla de los visitantes. Siempre se ha pensado en un estandar de 1024×768 pero hoy en día muchos usuarios tienen resoluciones mayores y en algunos casos menores, por lo que es una buena opción tener distintas modalidades de nuestro Sitio y redirigirlos de acuerdo a la que tienen. Primero debemos añadir entre las etiquetas <head> y </head>:
<script LANGUAGE="JavaScript">function redireccionar() {var url640x480 = "http://www.tu-sitio.com/640x480";var url800x600 = "http://www.tu-sitio.com/800x600";var url1024x768 = "http://www.tu-sitio.com/1024x768";if ((screen.width == 640) && (screen.height == 480))window.location.href= url640x480;else if ((screen.width == 800) && (screen.height == 600))window.location.href= url800x600;else if ((screen.width == 1024) && (screen.height == 768))window.location.href= url1024x768;else window.location.href= url640x480;}</script>
Ahí podemos modificar de acuerdo a las resoluciones que deseemos soportar. Y luego modificamos la etiqueta <body> dejandola así:
<body onLoad="redireccionar()">
7.- Imprimir la página: Para el final dejamos un truco bastante sencillo, el cual nos permitirá entregarle a los usuarios la utilidad de que impriman la página actual, mediante el siguiente código:
<a href="javascript:print()">Imprimir</a>
Con eso podrán imprimir el resultado de alguna información que les presentemos.
Con ese último truco terminamos este tutorial por hoy. En una próxima oportunidad iremos presentandoles algunas otras cosas interesantes para que vayan implementando en sus sitios y hacerlos cada vez más cómodos y completos para sus visitantes.
Como siempre este tutorial ha sido desarrollado, probado y documentado por el equipo de Como Lo Hago, por lo que cuenta con nuestro Sello de Garantía. Cualquier duda, problema o comentario que puedan tener, pueden dejarnos unas líneas en el área habilitada a continuación.
Esperamos que este tutorial haya sido de utilidad para Uds.
Muchas gracias por leer y será hasta una próxima oportunidad.
1:46:25 am
y si deseo trabajar en Mozilla Firefox!!!… nu funcionan, solo el de “Imprimir”, pero y resto, como lo hago??..
12:02:32 am
Hola, ando buscando la forma de poder hacer que en un formulario tengo 2 textfield pero quiero que salga escrito con un formato cuando esta vacío Usuario y en otro contraseña así como lo es en facebook. Alguien sabe como poder hacerlo?
11:21:14 pm
muy buena inf.
11:27:23 pm
hbjhjds