Cómo mejorar tu sitio Web mediante JavaScript

¡Extraído de Como Lo Hago!

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.

Cómo mejorar tu sitio Web mediante JavaScript

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.

Contenidos:

En resumen, hoy veremos:

Crear un link para que añadan nuestro sitio a Favoritos.
Que dejen nuestro sitio como página de inicio.
Abrir una ventana emergente.
Evitar doble envío de formularios.
Marcar/desmarcar todos los checkboxes de un formulario.
Redirigir de acuerdo a la resolución de pantalla del usuario.
Imprimir la página.

Así que con los contenidos ya definidos, vamos manos a la obra:

Procedimiento:

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 1024x768 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.

Soporte Técnico CBTa #75

viernes, 14 de junio de 2013