Está en la página 1de 10

DESARROLLO WEB .

COM

DESARROLLO WEB.COM

Hacer que un iframe se ajuste a la altura


de una ventana con Javascript
Vamos a definir dinámicamente con javascript el tamaño de un iframe para que se
ajustar el marco al espacio disponible en la ventana del navegador.

Tengo una página que tiene un iframe y quiero que ocupe el espacio máximo disponible,
pero no dispongo de toda la página, porque hay otros contenidos en la página. Además,
como a veces la ventana del navegador es más grande o más pequeña, el espacio que puedo
asignar al iframe es distinto.

En este taller de Javascript vamos a realizar un cálculo del espacio disponible en la página
para que un iframe que tenemos dentro ocupe la mayor área posible. Todo teniendo en
cuenta que cada usuario puede entrar con una definición de pantalla distinta y con un
navegador distinto.

Nota: Recordamos que un iframe es un frame que se puede insertar en el cuerpo de


una página, asignando una altura y una anchura. Podemos ver una explicación
detallada en http://www.desarrolloweb.com/articulos/667.php

Antes que nada me gustaría que se entendiese bien el problema con el que me encuentro, al
no saber qué área hay disponible en la página para cada usuario que nos visita.

Veamos esta imagen, que nos puede aclarar rápidamente el caso en el que nos encontramos.

Imaginemos una definición de 800 x 600. Entonces el espacio para el iframe será el tamaño
útil donde se visualiza la página, menos el espacio reservado para la cabecera. Ahora, por

1
DESARROLLO WEB . COM

ejemplo en una definición de 1280 x768, como el espacio útil para la página es mayor, el
espacio en el que quiero que se vea mi iframe también será mayor. Sigue siendo el tamaño
útil donde se visualiza la página, menos el espacio reservado para la cabecera, pero como
ahora el espacio útil es mayor, el iframe también tiene que presentarse con mayor tamaño.

La solución pasa por utilizar un Javascript para calcular el espacio útil de la página y
restarle el espacio de la cabecera. Entonces tendremos la dimensión altura que tiene que
tener el iframe.

Para calcular este dato tenemos que tener en cuenta que Internet Explorer y Firefox tienen
modos distintos. Es decir, la propiedad espacio útil de la página es distinta en estos dos
browser, por lo que el script se puede complicar un poco.

En Internet Explorer: el espacio útil se calcula con la propiedad


document.body.clientHeight.

En Mozilla Firefox: el espacio útil nos lo devuelve la propiedad window.innerHeight

Con este script podemos calcular el tamaño que debemos reservarle al iframe:

if (window.innerHeight){
//navegadores basados en mozilla
espacio_iframe = window.innerHeight - 110
}else{
if (document.body.clientHeight){
//Navegadores basados en IExplorer, es que no tengo innerheight
espacio_iframe = document.body.clientHeight - 110
}else{
//otros navegadores
espacio_iframe = 478
}
}

El primer if sirve para los navegadores Firefox, Netscape y similares, que entienden la
propiedad window.innerHeight

El segundo if es para IExplorer que conoce document.body.clientHeight.

En los dos casos tenemos que restarle 110, que es el espacio que ocupa la cabecera. El
último if es por si acaso no entiende ninguna de las dos propiedades el javascript, para darle
un valor por defecto.

Luego, escribiríamos mediante javascript la etiqueta iframe con los datos obtenidos
previamente:

2
DESARROLLO WEB . COM

document.write ('<iframe frameborder="0" src="mipagina.html" width="770" height="' +


espacio_iframe + '">')
document.write ('</iframe>')

¿Y qué pasaría si los navegadores no entienden Javascript, o está deshabilitado?

En ese caso nos conviene utilizar la etiqueta noscript, para mostrar un iframe con los
valores por defecto (noscript sólo se tiene en cuenta si no hay soporte para javascript):

<noscript>
<iframe frameborder="0" src="mipagina.html" width="770" height=478>
</iframe>
</noscript>

El código completo sería el siguiente:

<script>
if (window.innerHeight){
//navegadores basados en mozilla
espacio_iframe = window.innerHeight - 110
}else{
if (document.body.clientHeight){
//Navegadores basados en IExplorer, es que no tengo innerheight
espacio_iframe = document.body.clientHeight - 110
}else{
//otros navegadores
espacio_iframe = 478
}
}
document.write ('<iframe frameborder="0" src="mipagina.html" width="770" height="' +
espacio_iframe + '">')
document.write ('</iframe>')
</script>
<noscript>
<iframe frameborder="0" src="mipagina.html" width="770" height=478>
</iframe>
</noscript>

3
DESARROLLO WEB . COM

Sobre diseño visual y la credibilidad de tu


sitio web

Un estudio realizado por la universidad de Stanford, concluye en que las personas no


emplean criterios rigurosos al evaluar la credibilidad de un sitio Web.

El diseño visual fue el aspecto más señalado con el 46,1% de las 2,684 personas
participantes para valorar si una Web es o no creíble.

Los resultados analizados demuestran que crear un sitio Web solamente con información de
calidad no es suficiente para ganar credibilidad en las mentes de los usuarios. Aspectos
tales como la disposición de los elementos en la pantalla, la elección de la tipografía, el
tamaño de las fuentes utilizadas, los espacios en blanco, las imágenes y los esquemas de
color, entre otras cosas, influyen en la percepción de los usuarios de manera determinante.

Es decir, el diseño visual será la primera prueba en la credibilidad de un sitio. Si falla en


este criterio, los usuarios probablemente abandonarán el mismo y buscarán otras fuentes de
información y de servicios.
Es importante observar que “verse bien” es interpretado a menudo como ser bueno y ser
creíble. Este pensamiento también parece aplicarse para evaluar la credibilidad de los sitios
Web, puesto que el diseño visual es altamente sensible y perceptible.

He listado aquí los tópicos más influyentes revelados por el estudio sobre “que hacer” y
“que no hacer” a la hora de diseñar visualmente para la credibilidad:

• Organizar la información pensando en el usuario.


Un sitio bien organizado es la antítesis de un sitio que confunda y engañe al usuario
hacia anuncios u otras promociones.
Los usuarios emplean poco tiempo en cada página, moviéndose rápidamente entre
ellas. Según el estudio, los sitios fáciles de navegar fueron percibidos como los más
creíbles.
Cómo se estructure y presente la información será crítico para el éxito del sitio en la
Web, y ha demostrado contribuir en las opiniones sobre credibilidad.
La razón detrás de esta constante no está completamente clara. Se podría especular
que proporcionando una estructura de información ordenada y clara, el equipo de
diseño involucrado demuestra maestría a los usuarios. Los usuarios pueden entonces
asumir que esta maestría se extiende a la calidad de la información del sitio.
• Foco de la información en relación a la función.
Un sitio bien enfocado es visto como más creíble.
Cómo se jerarquizan y disponen los temas presentados en la pantalla impactan al

4
DESARROLLO WEB . COM

momento de percibir un sitio Web. Se sospecha que en muchos de los casos, al


navegar la Web los usuarios no necesariamente leen en profundidad toda la
información brindada. Pero que simplemente teniéndola disponible, se produce la
sensación de credibilidad.
Dependiendo del tipo de sitio visitado, los usuarios tienen expectativas más claras
sobre el foco. Se especula que las expectativas sobre el foco del sitio son más altas
para los tipos de sitios con información que la gente conoce mejor.
• Publicidad
No proporcionar una línea clara entre la publicidad y el sitio mismo se ha
demostrado afecta la credibilidad del sitio. Cuando la publicidad invade el
contenido del sitio Web es mal percibido por los usuarios, ya que en mucho de los
casos lo conducen a creer que el contenido del sitio es controlado por el
patrocinador o que el contenido está conectado con el anuncio. Los pop ups
publicitarios son ampliamente los peor percibidos.
Contar visualmente con una línea clara entre el contenido y los anuncios es
importante, de modo que los patrocinadores no comprometan la información del
sitio Web.

En la mayoría de los de los casos los diseñadores de sitios Web necesitaremos también
centrarnos en la impresión que el diseño visual generará, creando un sitio que alcance lo
que describieron muchos de los participantes del estudio como "mirada limpia, ordenada y
profesional."

Para consultar el informe completo (PDF 1,21MB):


http://www.consumerwebwatch.org/pdfs/stanfordptl.pdf

5
DESARROLLO WEB . COM

Variables de servidor en ASP

Vemos como obtener un listado de todas las variables del servidor en ASP, o en inglés
Server Variables. Realizando un recorrido genérico al array request.servervariables.

En ASP existe una colección de variables de servidor o variables de entorno que pueden ser
interesantes para el programador. Las variables del servidor ofrecen informaciones relativas
tanto al propio servidor web como al cliente que está visitando la página.

Entre los datos que ofrecen se encuentran el nombre del servidor, el nombre del archivo que
se está ejecutando, la IP del servidor, la del cliente que está solicitando la página, juego de
caracteres, navegador que utiliza el cliente, etc.

La colección donde se encuentran todas las variables del servidor se encuentra en el array
de ASP request.servervariables. Existen muchos valores distintos en ese array, cada uno
asociado a un nombre.

Por ejemplo, para mostrar la IP del visitante ponemos:

<%=request.servervariables("REMOTE_ADDR")%>

Para conocer el navegador del usuario pondríamos:

<%=request.servervariables("HTTP_USER_AGENT")%>

O para ver la ruta física donde está el archivo ASP que se está ejecutando, dentro de la
estructura del sistema de archivos del servidor (el disco duro y la ruta completa del archivo
.asp):

<%=request.servervariables("APPL_PHYSICAL_PATH")%>

Recorrido genérico a el array request.servervariables

Una buena idea para conocer todas las variables que existen en el array de variables de
servidor es hacer un recorrido genérico a request.servervariables. Para hacer ese recorrido
podemos utilizar un bucle for each. Como esto:

for each variable in request.servervariables


response.write "<br> " & variable & ": "

6
DESARROLLO WEB . COM

response.write request.servervariables(variable)
next

Con esto mostraremos el nombre de cada variable junto con el valor de esa variable. Así
podremos ver todas las variables que contiene el array junto con el dato que almacenan y
podemos darnos cuenta de los datos que tenemos disponibles.

El resultado de ejecución de ese script en uno de nuestros servidores es el siguiente:

HTTP_CONNECTION:keep-alive HTTP_KEEP_ALIVE:300
HTTP_ACCEPT:text/xml,application/xml,application/xhtml+xml,text/html;
q=0.9,text/plain; q=0.8,image/png,*/*; q=0.5 HTTP_ACCEPT_CHARSET:ISO-8859-
1,utf-8;q=0.7,*;q=0.7 HTTP_ACCEPT_ENCODING:gzip,deflate
HTTP_ACCEPT_LANGUAGE:es-es,es;q=0.8,en-us;q=0.5,en;q=0.3
HTTP_COOKIE:ASPSESSIONIDASTATCRD=GAJDKNCANGABJAPEOGBONGFN;
ASPSESSIONIDAQSBSCRD=LAJDPPEADNEMHDBKOCLAIMAD
HTTP_HOST:www.dominio.com HTTP_USER_AGENT:Mozilla/5.0 (Windows; U;
Windows NT 5.1; es-ES; rv:1.8.0.9) Gecko/20061206 Firefox/1.5.0.9
ALL_RAW: Cache-Control: max-age=0 Connection: keep-alive Keep-Alive: 300 Accept:
text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png
,*/*;q=0.5 Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Accept-Encoding: gzip,deflate
Accept-Language: es-es,es;q=0.8,en-us;q=0.5,en;q=0.3 Cookie:
ASPSESSIONIDASTATCRD=GAJDKNCANGABJAPEOGBONGFN;
ASPSESSIONIDAQSBSCRD=LAJDPPEADNEMHDBKOCLAIMAD Host:
www.dominio.com User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; es-ES;
rv:1.8.0.9) Gecko/20061206 Firefox/1.5.0.9
APPL_MD_PATH: /LM/W3SVC/881/ROOT
APPL_PHYSICAL_PATH: C:\WWW\dominio.com\Html\
AUTH_PASSWORD:
AUTH_TYPE:
AUTH_USER:
CERT_COOKIE:
CERT_FLAGS:
CERT_ISSUER:
CERT_KEYSIZE:
CERT_SECRETKEYSIZE:
CERT_SERIALNUMBER:
CERT_SERVER_ISSUER:
CERT_SERVER_SUBJECT:
CERT_SUBJECT:
CONTENT_LENGTH: 0
CONTENT_TYPE:
GATEWAY_INTERFACE: CGI/1.1
HTTPS: off
HTTPS_KEYSIZE:

7
DESARROLLO WEB . COM

HTTPS_SECRETKEYSIZE:
HTTPS_SERVER_ISSUER:
HTTPS_SERVER_SUBJECT:
INSTANCE_ID: 881
INSTANCE_META_PATH: /LM/W3SVC/881
LOCAL_ADDR: 255.176.130.0
LOGON_USER:
PATH_INFO: /pruebas_dw/variables_server.asp
PATH_TRANSLATED:
C:\WWW\dominio.com\dominio.com\Html\pruebas_dw\variables_server.asp
QUERY_STRING:
REMOTE_ADDR: 1.17.117.37
REMOTE_HOST: 1.17.117.37
REMOTE_USER:
REQUEST_METHOD: GET
SCRIPT_NAME: /pruebas_dw/variables_server.asp
SERVER_NAME: www.dominio.com
SERVER_PORT: 80
SERVER_PORT_SECURE: 0
SERVER_PROTOCOL: HTTP/1.1
SERVER_SOFTWARE: Microsoft-IIS/6.0
URL: /pruebas_dw/variables_server.asp
HTTP_CACHE_CONTROL: max-age=0
HTTP_CONNECTION: keep-alive
HTTP_KEEP_ALIVE: 300
HTTP_ACCEPT:
text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png
,*/*;q=0.5
HTTP_ACCEPT_CHARSET: ISO-8859-1,utf-8;q=0.7,*;q=0.7
HTTP_ACCEPT_ENCODING: gzip,deflate
HTTP_ACCEPT_LANGUAGE: es-es,es;q=0.8,en-us;q=0.5,en;q=0.3
HTTP_COOKIE: ASPSESSIONIDASTATCRD=GAJDKNCANGABJAPEOGBONGFN;
ASPSESSIONIDAQSBSCRD=LAJDPPEADNEMHDBKOCLAIMAD
HTTP_HOST: www.dominio.com
HTTP_USER_AGENT: Mozilla/5.0 (Windows; U; Windows NT 5.1; es-ES; rv:1.8.0.9)
Gecko/20061206 Firefox/1.5.0.9

Nota: he cambiado algún dato sensible de esta lista de variables, como la IP del
visitante o la del servidor, o la ruta física de los archivos. Pero es perfecto para
hacerse una idea de los contenidos que ofrece el array request.servervariables.

8
DESARROLLO WEB . COM

¿Qué es Telnet y SSH?

Qué es este protocolo de red y para qué puede servir hacer telnet a un webmaster.

Qué es este protocolo de red y para qué puede servir hacer telnet a un webmaster.
Descripción del protocolo SSH, para conectarse a una máquina de manera segura.

Telnet es un protocolo de red, utilizado en Internet para acceder remotamente a una


máquina o servidor. Telnet es un protocolo que permite acceder a la línea de comandos del
servidor, para realizar cualquier tipo de administración del sistema, típicamente Linux o
Unix. Telnet suele escuchar el puerto 23.

Para acceder por telnet a un servidor necesitas que ese servidor de soporte a telnet y además
tener una cuenta de usuario en la máquina a la que te conectas.

Existen diversos programas cliente que podemos utilizar para hacer telnet. Uno muy
popular es Putty.

Nota: Telnet es un protocolo poco seguro, por eso casi se ha dejado de usar. Ahora lo típico
es utilizar SSH que es otro protocolo muy similar, aunque con mejoras de seguridad
sustanciales. Mirar más abajo en este artículo.

De cara a un webmaster habría que decir que telnet serviría para conectarse con un servidor
web, que puede estar en un centro de datos lejos de nuestra oficina, como si estuviéramos
trabajando in situ, es decir, delante de él. Una vez dentro del ordenador, se pueden realizar
cualquier tipo de acciones de configuración remotamente, como acceder al sistema de
ficheros o configurar cualquier asunto del servidor, como el servidor web, el correo, php,
tareas de planificación diaria, etc.

Generalmente cuando se contrata un alojamiento básico no se dispone de acceso telnet, ya


que los alojamientos normales se ofrecen en máquinas compartidas por muchos otros
dominios. Con telnet podríamos configurar cualquier cosa del servidor y eso es algo que no
nos van a permitir, porque podría afectar a otros dominios o al correcto funcionamiento del
servidor en general.

Telnet es un servicio típico que viene con los servidores dedicados. Como un servidor
dedicado sólo lo utiliza un único usuario, con telnet puede configurar a su gusto cualquier
cosa del servidor. Una vez que tenemos un dedicado, podemos comprobar como a través
del telnet nos resulta muy cómo realizar algunas acciones de administración, como

9
DESARROLLO WEB . COM

backups, migraciones, planificación automática de tareas periódicas, reparación del


servidor ante caídas, etc.

Telnet no es seguro. SSH sí es seguro

Cuando nos conectamos por telnet con un servidor tenemos que enviar nuestro nombre de
usuario y contraseña. Estos datos críticos se envían por medio de texto plano, sin ningún
tipo de encriptación, por lo que cualquiera podría leerlos si está "escuchando" nuestras
comunicaciones.

Para evitar este grave problema de seguridad se utiliza SSH, que es un protocolo de
comunicación en redes muy similar, pero en el que todas las comunicaciones viajan de
manera encriptada.

SSH suele trabajar en el puerto 22 y los programas que permiten hacer telnet lo más normal
es que permitan también hacer SSH. Por ejemplo, el mencionado Putty también permite
hacer SSH, lo que a veces se llama "telnet por ssh".

10