Cómo mejorar tu sitio Web mediante JavaScript

o, 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:

[ol][li]Crear un link para que añadan nuestro sitio a Favoritos.[/li][li]Que dejen nuestro sitio como página de inicio.[/li][li]Abrir una ventana emergente.[/li][li]Evitar doble envío de formularios.[/li][li]Marcar/desmarcar todos los checkboxes de un formulario.[/li][li]Redirigir de acuerdo a la resolución de pantalla del usuario.[/li][li]Imprimir la página.[/li][/ol] 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:

Cita: Mostrar
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:

Cita: Mostrar
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>:

Cita: Mostrar
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:

Cita: Mostrar
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>:

Cita: Mostrar
Y luego en las propiedades del formulario añadimos la parte de 'onSubmit" del siguiente código, tal como se muestra:

Cita: Mostrar
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>:

Cita: Mostrar
Y luego en el formulario luego de que añadimos los checkboxes, añadimos lo siguiente:

Cita: Mostrar
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>:

Cita: Mostrar
Ahí podemos modificar de acuerdo a las resoluciones que deseemos soportar. Y luego modificamos la etiqueta <body> dejandola así:

Cita: Mostrar
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:

Cita: Mostrar
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.
Cómo mejorar tu sitio Web mediante JavaScript
22 Puntos Score: 4.4/10
Visitas: 1321 Favoritos: 11
Ver los usuarios que votaron...
7 Comentarios Cómo mejorar tu sitio Web mediante JavaScript
JavaScript + ajax + addEventListener + php, lo mejor, saludos
Gracias por el aporte !!
Interesante tu aporte,  
@thebestmsf Asi es amigo una combinaci?
@New1 Gracias Amigo, muy buen post ,y disculpa pero quisiera hacer una preguntilla (?
Bueno ya me ha ganado en responder el compa?
Para dejar un comentario Registrate! o.. eres ya usuario? Accede!