Desarrollo Web

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 ('') ¿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> 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 ('') <noscript> <iframe frameborder="0" src="mipagina.html" width="770" height=478>

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 "
" & 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-88591,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