Archivo categoría Web
Cómo maximizar la ventana del navegador usando javascript
Por Pablo Viale - Web - 7 Agosto 2007
Para maximizar la ventana del navegador utilizando javascript, debes usar el siguiente código:
-
window.moveTo(0,0);
-
window.resizeTo(screen.availWidth, screen.availHeight);
¿Dónde colocarlo?
Si quieres que cuando alguien haga clic en un vínculo, la ventana se maximice, entonces colócalo en el hipervínculo, así:
-
<a href="#" onClick="window.moveTo(0,0);window.resizeTo(screen.availWidth, screen.availHeight);">Haz clic aquí para maximizar esta ventana</a>
Si quieres abrir un pop-up y que éste se maximice al abrirse, entonces coloca el código en el body de la página del popup, para que se ejecute apenas se abra éste:
-
<body onLoad="window.moveTo(0,0);window.resizeTo(screen.availWidth, screen.availHeight);">
Por cierto, si tu página es un frameset, también funciona:
-
<frameset rows="100,*,100" frameborder="no" border="0" framespacing="0" onLoad="window.moveTo(0,0);window.resizeTo(screen.availWidth, screen.availHeight);">
Probado en Internet Explorer y Firefox.
Forzar puerto 443 y deshabilitar puerto 80 para uso de un certificado SSL
Por Pablo Viale - IIS, Web - 23 Julio 2007
Cuando compras un Certificado de Seguridad SSL, el sitio web que proteges se accede mediante una dirección como esta:
https://seguro.ejemplo.com
La "s" indica al navegador que se va a utilizar una conexión segura y ésta se hace por medio del puerto 443, el cual es el default para HTTPS/SSL.
Ahora bien, si no configuras nada más en tu Sitio Web y alguien teclea esta dirección:
http://seguro.ejemplo.com
notarás que todavía se puede acceder a tu aplicación, pero se está accediendo sin utilizar la seguridad que provee el certificado, lo cual es incorrecto. Lo más recomendable es indicarle a IIS que force la comunicación segura.
Para esto, abre las propiedades de tu Sitio Web en IIS y en la pestaña Directory Security, bajo el título Secure Communications oprime el botón Edit.
Ahora marca la opción Require Secure Channel (SSL) y marca también la opción Require 128-bit encryption si tu Certificado es de 128 bits.
Listo, ahora si intentas entrar a:
http://seguro.ejemplo.com
verás que el navegador te envía el siguiente error:
The page must be viewed over a secure channel
The page you are trying to access is secured with Secure Sockets Layer (SSL).
--------------------------------------------------------------------------------
Please try the following:
Type https:// at the beginning of the address you are attempting to reach and press ENTER.
HTTP Error 403.4 - Forbidden: SSL is required to view this resource.
Internet Information Services (IIS)
Como cerrar un Popup y dirigir la ventana principal a otro URL con JavaScript
Por Pablo Viale - Flash, Web - 25 Junio 2007
Para hacer que se abra un Popup (o ventana emergente) desde una página web, colocamos este código de JavaScript dentro del tag body:
-
<body onLoad="window.open('popup.html','','width=500,height=500')">
Ahora bien, se abre el Popup con la página popup.html. Una vez hecho esto, quiero que al oprimir una liga (ya sea imagen o texto) se cierre el popup y la ventana principal cambie a otra dirección.
Para hacerlo, debemos colocar esta liga en la página popup.html:
-
<a href="javascript: window.opener.location.href = 'http://www.yahoo.com'; window.close();">Ciérrame y cambia de página la ventana principal</a>
Como puedes ver hay dos instrucciones de JavaScript, la primera modifica el URL de la ventana principal y la segunda cierra el popup.
opener hace referencia a la ventana desde la cual se mandó llamar el popup.
Para hacerlo en Flash
Si en tu Popup tienes una animación en Flash y quieres hacer lo mismo, es sencillo, coloca este código en un botón:
-
on(release) {
-
getURL("javascript: window.opener.location.href = 'http://www.yahoo.com'; window.close();");
-
}
Script multinavegador para Agregar a Favoritos
Por Pablo Viale - Web - 15 Junio 2007
Este es un script para Añadir a Favoritos que me encontré en DynamicDrive y que ya probé con Internet Explorer y Firefox.
Copia lo siguiente dentro del tag head de tu página web:
-
<script type="text/javascript">
-
-
/***********************************************
-
* Bookmark site script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
-
* This notice MUST stay intact for legal use
-
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
-
***********************************************/
-
-
/* Modified to support Opera */
-
function bookmarksite(title,url){
-
if (window.sidebar) // firefox
-
window.sidebar.addPanel(title, url, "");
-
else if(window.opera && window.print){ // opera
-
var elem = document.createElement('a');
-
elem.setAttribute('href',url);
-
elem.setAttribute('title',title);
-
elem.setAttribute('rel','sidebar');
-
elem.click();
-
}
-
else if(document.all)// ie
-
window.external.AddFavorite(url, title);
-
}
-
</script>
Puedes utilizar una porción de texto o una imagen y establece la liga de esta manera:
-
<a href="javascript:bookmarksite('Recursos Web', 'http://www.viale.com.mx')">Agregar este sitio a favoritos</a>
Pruébalo aquí:
Como centrar una tabla con hojas de estilos
Por Pablo Viale - Web - 14 Junio 2007
Antes que nada, esta manera de centrar una tabla dentro de una página ha quedado descontinuada:
-
<table align="center">
Los navegadores todavía lo soportan, pero la mejor manera de centrar una tabla es con hojas de estilos (CSS).
Te habrás dado cuenta de que si usas el siguiente código:
la tabla se centra, pero también se centra todo su contenido!
Bueno, la manera de resolver esto es así:
Crea esta definición en tu hoja de estilos:
-
.TablaPrincipal
-
{
-
width: 150px;
-
margin-left: auto;
-
margin-right: auto;
-
}
Y ahora aplícasela a tu tabla:
Se centra la tabla con respecto a la página, pero el texto dentro de la tabla no se centra.
¿Por qué?
Si te preguntas por qué ocurre esto, tendrías que referirte a la sección 10.3.3 de la especificación de las hojas de estilo, que dice:
If both 'margin-left' and 'margin-right' are 'auto', their used values are equal. This horizontally centers the element with respect to the edges of the containing block.
En español:
Si 'margin-left' y 'margin-right' se establecen a 'auto', los valores utilizados son iguales. Esto centra horizontalmente el elemento con respecto a los bordes del bloque contenedor.
Cómo hacer submit de un formulario usando JavaScript
Por Pablo Viale - Web - 6 Junio 2007
Normalmente harás el submit de un formulario utilizando un botón común y corriente:
O quizás lo sepas hacer con una imagen:
¿Pero has tratado de hacer el submit con una liga común?
HTML no nos da la opción de hacerlo de manera similar a los ejemplos antes mencionados, pero lo podemos hacer con JavaScript, así:
En el ejemplo anterior nota que form1 es el nombre que se le da al formulario, por eso es usado en la instrucción de JavaScript. Si modificas el nombre de tu formulario, asegúrate de modificarlo en el JavaScript. No modifiques document ni submit porque son palabras reservadas del lenguaje.
Como añadir un icono (favicon.ico) a tu página web
Por Pablo Viale - Herramientas, Web, WordPress - 30 Mayo 2007
Puedes añadir un icono a tu página web, como este:
Para hacerlo, primero necesitas poner esta línea entre los tags head de tus páginas web:
-
<link rel="shortcut icon" href="favicon.ico">
Después necesitas crear una imagen de 16X16 pixeles y exportarla con la extensión .ico. Lo puedes hacer con el programa Microangelo, pero lo tendrías que comprar, descargar e instalar, y no creo que sea algo que estés deseando.
Te doy una alternativa: Utiliza tu editor de imágenes favorito y haz una imagen de 16X16 pixeles y expórtala como gif. Para convertirla a ico simplemente entra a esta página:
http://www.html-kit.com/favicon/
En ella simplemente haz clic en el botón Examinar, escoge tu imagen y la página web te generará el archivo ico.
Después, si quieres revisar que todo está en orden, puedes validar tu página en esta dirección:
http://www.html-kit.com/favicon/validator/
Para WordPress
Si quieres añadir tu favicon a WordPress, inserta el código arriba mencionado en el archivo header.php del tema que estés utilizando. Ejemplo: c:\miblog\wp-content\themes\mitema\header.php
Guarda páginas web completas en un solo archivo MHT
Por Pablo Viale - Web - 24 Mayo 2007
Normalmente para guardar una página web completa con imágenes tienes que guardar el archivo HTML, bajar las imágenes y colocarlas en la carpeta correspondiente. Si la página web tiene un archivo Flash resulta más problemático.
Con este truco te podrás guardar la página web completa, con imágenes, Flash, javascripts, etc., todo queda en un solo archivo que puedes transportar fácilmente.
Solamente ábrela con Internet Explorer, y selecciona Página -> Guardar cómo y elige el formato de Archivo único (.mht).
Crea un doble menú para soportar handhelds
Por Pablo Viale - Herramientas, Web - 12 Mayo 2007
Si utilizas una herramienta de menús desplegables en tu sitio web (como Sothink DHTML Menu), te habrás dado cuenta de que el menú no se despliega en una Pocket PC o Palm, en muchas ocasiones no aparecen ni las opciones principales. La navegación se pierde totalmente.
** Antes que nada, te recomiendo siempre tener un mapa del sitio accesible mediante un link sencillo para evitar este problema.
De cualquier forma, te muestro a continuación de qué manera puedes hacer que el menú se despliegue para estos dispositivos.
La línea que llama a tu menú debe verse como esta:
-
<script type='text/javascript' language='JavaScript1.2' src='menuDesplegable.js'><\/script>
Sustitúyela por estas dos:
-
<script type="text/javascript" src="brwsniff.js"></script>
-
<script type="text/javascript" language="JavaScript1.2" src="SelectorDeMenus.js"></script>
El archivo brwsniff.js es un detector de navegadores, puedes descargarlo de aquí.
Te recomiendo echarle un ojo al archivo adjunto que pongo en este post ya que hice una pequeña modificación al script, añadí una función llamada writit. Bájalo de aquí.
Con tu editor de textos preferido, crea el documento SelectorDeMenus.js y pega lo siguiente:
-
var br=new Array(4);
-
var os=new Array(2);
-
var flash=new Array(2);
-
br=getBrowser();
-
os=getOS();
-
flash=hasFlashPlugin();
-
if(os[0]!="wince" && os[0]!="palmos"){
-
document.write("<script type='text/javascript' language='JavaScript1.2' src='http://www.mipagina.com.mx/menuDesplegable.js'><\/script>");
-
}
-
else{
-
document.write("<table width='100%' border='0' cellspacing='0' cellpadding='2'><tr>");
-
document.write("<td><a href='http://www.mipagina.com.mx/'>Hogar<\/a><\/td><\/tr><tr>");
-
document.write("<td><a href='http://www.mipagina.com.mx/Seccion1.aspx'>Sección 1<\/a><\/td><\/tr><tr>");
-
document.write("<td><a href='http://www.mipagina.com.mx/Seccion2.aspx'>Sección 2<\/a><\/td><\/tr><\/table>");
-
-
}
Si tienes problemas pegando el código, baja el archivo de aquí.
Si te fijas bien estamos detectando el navegador, si no se trata de wince (pocket pc) ni de palmos, entonces manda el menú desplegable completo. De lo contrario, manda una tabla con las ligas en HTML puro, para que estos dispositivos las puedan leer y mostrar correctamente.
Claro, cada vez que modifiques tu menú desplegable, tendrás que recordar modificar este script, pero es una buena opción para no dejar fuera a los navegadores de handhelds.
