OCHO PASOS PARA CREAR UNA WEB

Utilidades

1. 2. 3. 4. 5. 6. 7. 8. 9.

Registrar nombre de dominio. Buscar alojamiento Web. Elegir un editor Comparativa de editores. Establecer la estructura de la Web. Disear la Web. Colgar la Web en Internet. Alta en buscadores. Control y mantenimiento. Javascripts comentados

Tabln de anuncios virtual Test interactivo de autoevaluacin Apertura controlada de ventanas en enlaces Ttulo de pgina animado Servicios php

Generador de etiquetas <meta> Recursos

Buscador de dominios Comprueba si est libre el dominio que necesitas. Alojamiento Web Todas las posibilidades de alojamiento: parking de dominios, servidor virtual, dominios de correo, planes para empresas, etc. Publicidad en tu Web Gestin de publicidad en pginas web mediante programas de afiliacin. Estadsticas gratis Imprescindibles para llevar un seguimiento de las visitas a nuestra web. Intercambio de banners Una buena manera de promocionar la web. Foros de debate Dos maneras de fomentar la participacin de los visitantes a una web. Titulares del da

Una forma de aadir a una web contenidos actualizados sin ningn esfuerzo.

REGISTRAR EL DOMINIO.
Merece la pena registrar el dominio de nuestro Instituto o Colegio?..... La respuesta es, claramente, S! El nico inconveniente que tiene, que cuesta dinero, ya no lo es tanto porque es mucho ms barato que hace, por ejemplo, 2 aos. Se puede conseguir un dominio por unos 30 anuales. Por eso, esta nica desventaja se podra convertir en la primera de las muchas ventajas. No es nada caro comparado con lo que supona hace poco. Se encuentra fcilmente el dominio libre si buscamos el nombre completo, con el "ies", "cpi" o "ceip" delante, haz la prueba. No hace falta inventarse contracciones del nombre ni abreviaturas que dificultan mucho luego el que se identifique nuestra Web con nuestro Centro al primer vistazo. Si ests pensando en registrarlo, hazlo cuanto antes!, en cualquier momento se puede adelantar alguien, que en el mundo hay muchos institutos y colegios y las coincidencias de nombre a veces son sorprendentes. El tener dominio propio no tiene necesariamente que afectar a la posterior eleccin del alojamiento porque podemos transferir el dominio al sitio donde queramos alojar la Web, incluso siendo un servidor gratuito (por ejemplo iespana). La URL de nuestra Web va a ser mucho ms corta y representativa de nuestro Centro. Comprueba la diferencia: http://members.es.tripod.de/iesmicentro/ http://www.iesmicentro.com

Podremos disponer de muchas cuentas de correo, segn el alojamiento incluso ilimitadas, dentro de nuestro propio dominio con lo que eso lleva consigo de representatividad para el Centro. Por ejemplo: direccion@iesmicentro.com apa@iesmicentro.com filosofia@iesmicentro.com

Si nos vale un dominio .com lo tenemos activo y registrado a nuestro nombre en muy pocos das. Si queremos que sea .es la cosa es ms complicada y, sobre todo, ms cara.

Ya estn disponibles los dominios con o tilde, aunque de momento es algo ms caro. Pincha aqu para ms informacin.

BUSCAR ALOJAMIENTO WEB.

Antes de nada, qu es un servidor y qu se entiende por alojamiento web (webhosting)? Un servidor es bsicamente un "sper ordenador" conectado permanentemente a internet a travs de una conexin que ya la quisiramos en nuestro centro (por ejemplo 10Gb/seg). El alojamiento consiste en que nos dejen usar un trocito del disco duro de ese ordenador para que subamos o colguemos en l nuestra web. En ese espacio que nos da el servidor montaremos un directorio (remoto) de archivos semejante al directorio (local) que tenemos en nuestro disco duro y en el que trabajamos con nuestra Web. Para elegir el servidor que nos ceda alojamiento hay varios datos a tener en cuenta:

Conectividad del servidor: La velocidad a la que transmite los datos y su capacidad de responder a muchas conexiones simultneamente. Este es un dato muy

importante. Cualquiera que navegue por internet sabe que hay sitios que bajan mucho ms lentamente que otros.

Espacio en disco: es decir los Mb que nos van a dejar en su ordenador. Un espacio de 5-15Mb puede ser suficiente para empezar, pero si nuestra Web crece y empezamos a meter fotos de excursiones de alumnos, de actividades, pginas que hagan los alumnos o los departamentos, etc. pronto se nos quedar pequeo el espacio. Una cantidad ms que suficiente puede ser 50Mb.

Servicios que ofrece: como cuentas de correo para nuestro dominio, alta en buscadores, extensiones de FrontPage, etc.

Volumen de transferencia (Gb/mes): es la cantidad de trfico en la red que el dominio genera. Cuantas ms visitas tenga la pgina o ms archivos descarguen desde ella, mayor es el trfico. Ejemplo: si una pgina "pesa" 100 Kb (incluyendo las imgenes) y es vista 10 veces al da, generara un trfico mensual de 30 Mb/mes. Una transferencia mensual de 1Gb es suficiente para empezar.

ALOJAMIENTO GRATUITO O DE PAGO?

Otra vez a vueltas con el vil metal. Lo ideal, evidentemente, es uno de pago, si no nadie los contratara, pero cules son las ventajas frente a uno gratuito? Suelen tener mayor capacidad de transmisin y/o estn menos saturados por lo que las pginas bajan con ms rapidez. No nos ponen publicidad. Esos banners que colocan algunos gratuitos destrozan todo el trabajo de diseo que tantos quebraderos de cabeza da. Otros permiten sustituir el banner por un pop-up (ventanita que se abre al acceder a la pgina), pero stos tambin son molestos. Son ms fiables que los gratuitos ya que, lgicamente, el que paga exige. Si falla uno gratuito y nos deja sin servicio durante 2 das no hay a quien reclamar.

Nos pueden ofrecer servicios a mayores que en un futuro podemos necesitar: servidor seguro, IP fija, CGI propios, etc. Ejemplo de alojamiento de pago: http://www.arsys.es/ Ejemplo de alojamiento gratuito: http://geocities.yahoo.com/home

ELEGIR UN EDITOR.
Sea cual sea el editor que se elija hay una pregunta que preocupa casi siempre a los que se enfrentan por primera vez a la tarea de disear una pgina web es necesario aprender algo de lenguaje html? Pues me temo que s. Imprescindible no es, pero s muy conveniente, ya que en muchas ocasiones hay que retocar el cdigo html directamente para conseguir el efecto deseado ya que con el editor no nos sale. Esos conocimientos tambin sirven para limpiar un poco el cdigo de etiquetas superfluas que inserta el editor. En cuanto a los editores, bsicamente los hay de dos tipos: HTML y WYSIWYG. Con los primeros editamos el cdigo de la pgina y para ver el resultado tenemos que abrirla con un navegador. Los segundos nos permiten editarla tal y como se ver en el navegador (wysiwyg significa "lo que ves es lo que obtendrs"). EDITORES HTML. Se manejan como un procesador de texto, pero lo que vamos escribiendo es el cdigo html de la pgina, por lo que debemos conocer bastante a fondo los fundamentos de dicho lenguaje. Pero entonces para qu queremos un editor html si basta con el simple Bloc de Notas para editar texto plano? Pues por dos razones. Primero porque ahorramos mucho trabajo. Por ejemplo, una tabla de 8 filas y 3 columnas con sus correspondientes parmetros (ancho, alto, borde, color de fondo, etc.) tiene un cdigo largusimo que el editor nos inserta automticamente. La segunda razn es que no hace falta estar muy pendiente de la sintaxis porque el editor va corrigiendo en gran medida los errores que surjan. La gran ventaja de estos editores es que nos permiten un control total sobre el diseo de la pgina y generan un cdigo todo lo limpio que nuestra claridad de ideas permite.

Un ejemplo de editor html es 1st Page2000, que se puede descargar de forma gratuita en la siguiente direccin: http://www.evrsoft.com/download/#download_now EDITORES WYSIWYG. La aparicin de estos editores ha permitido que todo el mundo pueda crear una pgina web ya que no requiere un aprendizaje previo de html ni de lenguajes de programacin. Con ellos se ve constantemente la pgina con el formato con el que se ver a travs del navegador, al menos en teora (alguna sorpresa tambin dan). El diseo es mucho ms fcil y entretenido porque se va viendo sobre la marcha cmo queda la pgina. Esto es especialmente til cuando no se tiene la idea clara de antemano de lo que se quiere hacer. Adems, al incluir plantillas prediseadas, se puede ahorrar mucho tiempo y conseguir una pgina web lista en pocos minutos. Pero no todo son ventajas, tambin tienen muchos inconvenientes:

Generan un cdigo html muy sucio (unos ms que otros) sobre todo si se usan las plantillas prediseadas. Esto redunda en el mal funcionamiento de la web y en su mayor tamao en Kb y, por tanto, en tiempo de descarga.

Se pierde control sobre el diseo de la web; deja un menor margen de maniobra que, a veces, nos obliga a retocar el cdigo directamente.

Los editores que vienen con los navegadores no son del todo compatibles entre s. Un diseo realizado con FrontPage puede no funcionar correctamente con Netscape y viceversa entre Composer e Internet Explorer.

Para acceder a las ltimas novedades del diseo web habra que adquirir las ltimas versiones de estos editores. A pesar de todo, la gran mayora se decide por un editor WYSIWYG; entonces cul

elegir? FrontPage o Composer? Pues, ninguno de los dos, si nos lo podemos permitir, el mejor con diferencia es Dreamweaver.

Tambin hay otra posibilidad. Editar un documento en Word y guardarlo luego como pgina web. Puede parecer el colmo de la sencillez, pero el resultado deja mucho que desear. Si se usan las funciones de Word, ste luego intentar mantener el formato al convertirlo a html y generar un cdigo realmente intrincado que los navegadores se las ven y se las desean para descifrar. Por ltimo, para los que sigan dudando entre un editor html o WYSIWYG: En realidad, lleva el mismo tiempo y dificultad aprender html que conocer a fondo un editor WYSIWYG. Si quieres comprobar por ti mismo los resultados de varios editores, visita la siguiente comparativa.

COMPARATIVA DE RESULTADOS DE EDITORES HTML.

El documento de partida consta de una tabla simple editada con Word con un resumen de las etiquetas fundamentales del cdigo html. Se guard como documento de Word con el nombre prueba.doc Ver archivo prueba.doc Tamao: 30208 bytes. Para editar una pgina web que mostrara una tabla semejante a la del documento de Word probamos hasta 5 posibilidades distintas de edicin, intentando que el resultado fuera lo ms parecido posible a la tabla original. Recomendamos al visitar cada pgina echarle un vistazo al cdigo fuente de cada versin para analizar lo que hace cada editor. (Para los despistados, botn derecho en cualquier parte de la pgina y Ver cdigo fuente). 1. Desde Word guardamos el documento como tipo Pgina Web con el nombre prueba_word.htm prueba_word.htm Tamao: 17488 bytes.

2. Seleccionamos y copiamos todo el documento de Word y luego lo pegamos en una pgina en blanco de FrontPage. La guardamos con el nombre prueba_fp_pegada.htm prueba_fp_pegada.htm Tamao: 12884 bytes. 3. Editamos desde cero la tabla en FrontPage manteniendo el mismo formato de tabla y lo guardamos como prueba_fp_editada.htm prueba_fp_editada.htm Tamao: 4440 bytes. 4. Editamos desde cero la tabla con Dreamweaver, pero siempre desde la vista de diseo, sin tocar el cdigo html ms que cuando era imprescindible. Lo guardamos como prueba_dw_editada.htm prueba_dw_editada.htm Tamao: 3282 bytes. 5. El mismo documento anterior editado con Dreamweaver lo fuimos retocando en vista de cdigo, eliminamos etiquetas superfluas, limpiamos el cdigo de sangras y saltos de lnea innecesarios. Qued como si se hubiera escrito desde cero en el Bloc de Notas. Lo guardamos como prueba_dw_retocada.htm prueba_dw_retocada.htm Tamao: 2537 bytes. Si se mantiene la misma proporcin de tamao de archivo, una pgina web normalita de 30 Kb editada a mano pesara con cada editor, aproximadamente:

Bloc de Notas: 30 Kb.

Dreamweaver: 38 Kb.

FrontPage editada: 51 Kb.

FrontPage pegada desde Word: 149 Kb.

Guardada desde Word como pgina web: 202 Kb!!!

Conclusin: Mejor que cada cual saque sus propias conclusiones.

LISTADO DE ETIQUETAS HTML.

ETIQUETAS <! --> <html> </html> <head> </head> <title> </title>

LISTADO DE ETIQUETAS HTML ATRIBUTOS VALORES DESCRIPCIN Inserta comentarios. No es interpretada por el navegador. Inicio y final del documento html Informacin general del documento html Ttulo del documento. Visible en la barra del navegador background href del archivo grfico. text bgcolor link Color hexadecimal.

<body> </body>

alink vlink topmargin leftmargin marginheight marginwidth Tamao en pxeles. No se recomienda usarlas.

Inicio y final del cuerpo del documento. Lo que se ve en el navegador

ESTRUCTURA DE LA WEB.
Antes de empezar a disear el sitio web hay que organizarlo y para ello hay que tener claro cul va a ser el propsito del sitio web, sus contenidos y la audiencia potencial de la que dispondr. Lo que va a determinar la estructura de la web van a ser en gran medida los contenidos; ellos nos deben indicar cual de los siguientes tres tipos de estructura es el ms adecuado:

Estructura de rbol o jerrquica: A partir de una pgina de bienvenida o portal (raz) se abren unas secciones (ramas) que a su vez contienen mltiples pginas web (hojas).

Estructura lineal: a partir de una pgina de bienvenida o portal se suceden las siguientes pginas una tras otra como si se tratara de un libro.

Estructura en red: Las pginas que forman el sitio web se enlazan unas con otras segn sus contenidos en una especie de red en la que no se aprecia ningn tipo de jerarqua.

Para la web de un centro educativo parece ms conveniente una estructura en rbol, con una presentacin, unas secciones (administracin, departamentos, alumnos, apa, etc.) que daran paso a las pginas que elabore cada colectivo. Esta organizacin permite al visitante conocer en qu lugar de la web se encuentra y se le facilita la navegacin mediante botones que ascienden o descienden en la estructura del rbol para alternar entre secciones. La eleccin del tipo de estructura va a determinar tambin el emplazamiento de los archivos y directorios. Esto nos permite organizar la web de una forma lgica facilitando mucho el trabajo del diseador, pero tambin es algo que afecta al visitante ya que slo por la direccin de la pgina que visita puede hacerse una idea de dnde est. Para simplificar las cosas es recomendable usar en los nombres de archivo y de carpeta slo letras minsculas, sin caracteres especiales y sin espacios en blanco, adems de elegir nombres cortos y representativos. Con marcos o sin marcos? Es otro dilema que afecta a la estructura de la web y que hay que decidir al principio ya que va a tener consecuencias tanto para el diseador como para el visitante.

10

Supongamos una web con la siguiente estructura: un marco superior con el ttulo principal (nombre del centro, localidad,...), un marco a la izquierda con la barra de navegacin y un gran marco principal donde se cargan las pginas que se llaman desde dicha barra. Esta estructura tiene las siguientes ventajas: El ttulo y la barra de navegacin, por muy complejos que sean, se cargan una sola vez y despus permanecen en su marco acelerndose mucho la descarga de las dems pginas. Si hay que modificar un enlace, slo hay que hacerlo en la pgina del marco de navegacin y no en todas las pginas como si cada una llevara la barra en s misma. Las pginas se disean de una manera mucho ms rpida porque no llevan ni ttulo ni barra de navegacin.

Frente a estas ventajas tenemos dos inconvenientes: La direccin de cada pgina no se corresponde con lo que se observa en pantalla ya que si tecleamos una direccin concreta (por ejemplo la pgina del departamento de filosofa), nos aparecer sin los marcos de ttulo y barra de navegacin y el visitante no sabr dnde ha entrado. Por otro lado, si tecleamos la direccin de la pgina de marcos, se carga la presentacin del sitio web y no la pgina de filosofa.

Los visitantes que quieran agregar una pgina a favoritos no podrn hacerlo por la misma razn: o guardan la pgina aislada o guardan la presentacin sin la pgina. Si optamos por una pgina sin marcos, tampoco hay que renunciar a las ventajas antes citadas ya que hay dos posibles soluciones:

La barra de navegacin comn a todo el sitio web se pone en un javascript (en un archivo adjunto .js) y cada pgina lo manda cargar al principio, en la seccin <head>. Despus de la primera carga, ya lo tendremos en cach y no har falta volverlo a descargar. Desde el punto de vista del diseador, cuando haya que cambiar un enlace, slo se cambia en el archivo .js

11

Dreamweaver tiene la opcin de crear plantillas de diseo. Un cambio en la plantilla se actualiza automticamente en todas la pginas que se han creado a partir de ella. Por ltimo, si se opta por marcos, hay que tener cuidado con los enlaces externos ya

que est muy mal visto que se carguen como un marco ms dentro de otra web.

DISEAR LA WEB.
A la hora de disear la web hay dos conceptos que conviene tener en cuenta y que son la accesibilidad y la usabilidad.

ACCESIBILIDAD. La web se hace con la idea de que sea vista por el mayor nmero de personas y en mltiples pases, pero cada uno de los visitantes va a acceder a ella con un equipo y una forma de navegar que, si no lo tenemos en cuenta, le impida apreciar el diseo o que no lo vea en absoluto. Los factores tcnicos y de navegacin que afectan a la visualizacin correcta de una pgina web son: Conexiones lentas a internet. Ordenadores que no tienen flash ni plug-ins instalados, muchas veces sencillamente porque su propietario no quiere. Ordenadores con tarjetas grficas que slo permiten 256 colores. Ordenadores con pocas fuentes instaladas. Usuarios con equipos porttiles.

12

Monitores de baja resolucin. Distintos tipos de exploradores. Usuarios que tienen desactivada la carga de imgenes en su explorador. Versiones antiguas de los exploradores. Usuarios con deficiencias visuales que activarn las fuentes ms grandes y aumentarn el contraste del texto y los fondos.

Usuarios con deficiencias motrices que les impiden manejar el ratn y usarn sobre todo el teclado. Como es casi imposible contemplar todos estos factores en el diseo de la web, es

conveniente tener presente estos 3 principios para lograr que su accesibilidad sea lo mayor posible: 1. La web debe adaptarse al equipo del visitante transformando su aspecto de forma correcta. 2. El texto es siempre lo ms accesible para cualquier usuario. Por ello se debe poner siempre un texto alternativo a las imgenes. 3. El contenido debe ser navegable. Hay que colocar elementos de navegacin claros y correctamente situados que permitan moverse por la web en todas direcciones.

USABILIDAD. Una web muy lograda desde el punto de vista del diseo, pero con una baja usabilidad ser un fracaso seguro de visitantes. Se podra dar infinidad de recomendaciones en este sentido:

13

Disear la web pensando en el punto de vista del visitante. La mayora de los internautas se cansa de esperar a que cargue una pgina lenta. Debe ser lo ms rpida posible.

Navegacin fcil e intuitiva. No agobiar con complejas y pesadas presentaciones. Ir al grano. Contenidos rigurosos y escuetos. Las pginas cargadas de texto suelen cansar. Si no hay ms remedio, dar la opcin al visitante mediante un archivo de texto, de imprimir el texto para leerlo en papel que es mucho ms cmodo.

No abusar de los colores chillones, de la negrita y, mucho menos, de los mensajes parpadeantes que a muchas personas molestan y no son, en el fondo, necesarios.

Evitar si se puede la aparicin de barras de desplazamiento horizontal a partir de una resolucin de 800x600. No merece la pena disear pensando en resoluciones menores que ya casi no se encuentran.

COLGAR LA WEB EN INTERNET.

Antes de transferir toda la Web al servidor, conviene tener en cuenta algunas cosas si queremos que se vea bien desde el principio y no dar a los visitantes una impresin de provisionalidad o de "estar a medio hacer".

1. Colocar en el servidor una pgina de prueba que no sea accesible por quien no sepa
de su existencia. Para ello basta con no llamarla index.htm. Avisamos entonces a amigos y compaeros para que la vean y den su opinin. Tambin podemos aprovecharla para hacer pruebas de navegacin si subimos ms pginas.

14

2. Si a pesar de todo queremos ir subiendo pginas sin terminar, es mejor no poner el tpico mensaje "en construccin"; en su lugar se puede describir por encima el contenido que tendr y poner un enlace a la pgina principal. 3. En las pginas que enlazan con una que no est terminada o no existe todava, es preferible no activar el enlace, pero s que aparezca el texto. Si activamos el vnculo, el tiempo de carga de una pgina no encontrada resulta frustrante; sin embargo, el texto sin enlace puede animar al visitante interesado a volver das o semanas despus a ver si ya se termin esa seccin. La diferencia est entre perder un visitante, a lo mejor para siempre, y conseguir que vuelva a por algo que le interesa. 4. Comprobar antes de la transferencia final que todo funciona correctamente en el disco duro. 5. Asegurarse de que todos los archivos necesarios estn en su carpeta

correspondiente de la Web y no en cualquier carpeta del disco duro, porque los enlaces funcionaran en el disco, pero no en internet.

Cuando ya est todo listo, se puede proceder a la transferencia de los archivos. Esto se puede hacer de distintas maneras dependiendo del servidor que tengamos, pero en todos los casos necesitaremos que nos provea de un nombre de usuario y contrasea (login y password), as como de una direccin de servidor para acceder al directorio remoto.

La transferencia la podemos hacer de varias maneras:

1. Por ftp: Con un programa cliente de ftp como Cuteftp. Una vez establecida la
conexin tendremos en pantalla los dos directorios, el local y el remoto, y podremos enviar los archivos como si fuera el explorador de Windows entre unidades y carpetas, pinchando y arrastrando.

2. Con FrontPage tenemos la opcin "Publicar Web" que realiza la transmisin

mediante http y no ftp por lo que no conviene alternar entre ambos tipos de

15

transmisin. Si usamos esta opcin y despus transferimos mediante ftp, es posible que luego no nos vuelva a funcionar lo de "publicar" con FrontPage. Esta opcin slo funciona si nuestro servidor acepta las "extensiones de servidor de FrontPage" y eso nos lo tienen que informar ellos. Algunos servidores, disponiendo de dichas extensiones, no recomiendan en absoluto que se transfieran los archivos con FrontPage porque dicen que se producen despus fallos en el funcionamiento general de la Web. Por otro lado, es la nica manera de que funcionen los elementos de FrontPage tales como contadores, formularios, etc.

3. Desde la pgina web del servidor, entrando en la seccin "administrador de sitio"

con el correspondiente nombre de usuario y contrasea (por ejemplo, Geocities o Iespana) Puede ser cmodo para subir unos pocos archivos, pero no para transferir la Web completa la primera vez.

4. Dreamweaver tiene su propio ftp que funciona muy bien, bastante mejor que lo de
FrontPage.

Mientras se est haciendo la transferencia hay que estar muy pendiente sobre todo a estos 3 detalles: 1. Ser lo ms meticuloso y ordenado posible para que no quede ningn archivo ni carpeta sin transferir. 2. Atender a los errores de transmisin que se vayan produciendo y que nos comunica el ftp para reenviar y sobreescribir en el directorio remoto aquello que por un fallo no se transmiti en su totalidad. 3. No renombrar archivos o carpetas una vez transferidas ya que, con el tiempo, los directorios local y remoto acabaran por no coincidir y es muy difcil en esa situacin mantener una Web sin fallos.

16

DAR DE ALTA EN BUSCADORES. Tenemos 3 maneras distintas de dar de alta la Web en los buscadores:

1. Servicio de alta de pago: Es la opcin ms cmoda y nos permite abarcar un

nmero de buscadores enorme. Algunos ofrecen alta hasta en 3000 buscadores. El colmo de la comodidad son los servicios que, adems, nos renuevan las altas mensualmente. El inconveniente est clarsimo, el precio, pero es la opcin ms fiable.

2. Servicio de alta gratuito: En ocasiones lo ofrece el propio servidor que nos aloja la
Web, estupendo. Si no, hay que buscar alguno de los muchos que hay por internet. Es frecuente que no se noten los resultados de estas altas, como si este servicio gratuito no fuera tenido en cuenta por los grandes buscadores o lo fuera despus de bastante tiempo.

3. Alta manual: Puede llegar a ser tedioso, pero es la mejor manera de tener la
seguridad de que el alta se ha enviado y la han recibido correctamente. Se debe ir llevando una lista con los buscadores a los que se enva y luego ir tachando a medida que comprobamos que ya aparece nuestra web en ellos. Es muy til para esta tarea tener activada al opcin "autocompletar entradas de formulario" en el navegador porque habr que escribir lo mismo decenas o centenares de veces.

Los campos que habr que cubrir suelen ser por lo menos 6:

1. Ttulo de la pgina: lo que figura entre las etiquetas <title>. Muy importante ya que
es por el ttulo por donde suelen ordenar las pginas en los directorios de los buscadores.

2. URL: Ojo con equivocarse. En algunos piden teclear http://, en otros no. Hay que
estar muy atento en este punto, no vaya a ser que nos den de alta la pgina con la direccin http://http://www.micpi.com

17

3. e-mail de contacto, por si nos avisan por correo de que ya est indexada nuestra
pgina.

4. Descripcin de la pgina: Hay que redactar una frase lo ms adecuada a nuestra

web, que la defina con claridad, pero sin repetir lo que dice el ttulo y sin usar caracteres estridentes ( LA MEJOR WEB!!! ), no nos lo admitiran en casi ningn buscador.

5. Palabras clave: Otro punto muy importante. Suelen limitar el nmero de ellas que
podemos introducir, por lo que hay que elegirlas con mucho cuidado, pensando en las bsquedas en las que queremos que aparezca nuestra web. Poner palabras clave muy buscadas (ej. sexo) sin que vengan a cuento es pan para hoy y hambre para maana.

6. Categora: En los buscadores temticos nos mandarn elegir la categora y la

seccin. Hay que pensar bien cul es la ms apropiada, en la que ms nos van a buscar.

Otra cuestin a tener en cuenta es lo de las etiquetas <meta>. Hay buscadores que son "meta buscadores", es decir, que indexan las pginas segn lo que contengan esas etiquetas. Conviene, por tanto, ponerlas en todas las pginas de nuestra web y elegir bien su contenido. La sintaxis sera: <meta name="Keywords" content="palabras clave separadas por espacios"> <meta name="description" content="Descripcion de la pagina por ejemplo lo mismo que ponemos en el campo descripcion del formulario"> Estas etiquetas deben ir en la seccin <head> del cdigo fuente. Si lo prefieres, puedes utilizar el generador de etiquetas <meta> en la siguiente pgina.

18

Una ltima recomendacin: Yo empezara por Google. Los dems ya se irn haciendo sin prisas. GENERADOR DE ETIQUETAS <META> Son etiquetas que se colocan en la seccin <head> del documento html y que son ledas por multitud de buscadores. Es muy importante poner por lo menos la descripcin y las palabras clave y, por supuesto, hacerlo con la sintaxis correcta. Con el formulario que aparece al principio de esta pgina podrs generar todas las etiquetas meta sin necesidad de conocer la sintaxis. Puedes cubrir los campos que quieras y cuantas veces quieras. Despus, simplemente tendrs que copiar y pegar el texto que aparezca en la seccin <head> de tu pgina. A continuacin del formulario encontrars un comentario sobre a qu se refiere cada etiqueta meta. Cubre el siguiente formulario para generar las etiquetas de tu Web.

Palabras clave: Descripcion: Ttulo: Autor: Tema: Generador: Idioma: Robots:

Generar etiquetas

Palabras clave: Hay que meditar con calma qu palabras clave definen perfectamente nuestra pgina y por las que queremos que aparezca indexada en los buscadores. Conviene poner entre 200 y 400 caracteres y no necesariamente deben ser palabras sueltas separadas por espacios, tambin se pueden poner "frases clave" separadas entre s por comas. Una frase clave es una sucesin de trminos que componen una frase si les aadimos mentalmente los artculos, preposiciones, etc.

19

Por ejemplo, una frase clave sera: "Prcticas laboratorio biologa enseanza secundaria".

Descripcin: Breve resumen del contenido de la pgina. No ms de 200 caracteres. Debe escribirse de forma sintcticamente correcta, con sus artculos, verbos, etc. no como las frases clave.

Ttulo: Parecido a la etiqueta <title> pero lo que escribamos en la etiqueta meta-title no aparece en el navegador como ttulo de la pgina aunque s que lo leen los robots de los buscadores.

Autor: Nombre del autor del sitio.

Tema: Parecido a la descripcin. Breve resumen del tema del que trata la pgina.

Generador: Nombre del editor html con el que se ha elaborado la pgina.

Idioma: Importante tambin para que los buscadores coloquen la pgina en la categora correcta en cuanto al idioma en el que est escrita.

Robots: Los robots de los buscadores realizan dos acciones cuando acceden a una pgina, indexar el contenido de la pgina (index) y seguir los vnculos que aparezcan en ella (follow). Si queremos que una de las dos acciones o las dos no las realice, debemos poner la etiqueta meta "robots" para avisar al robot de esa circunstancia.

CONTROL Y MANTENIMIENTO.
Mantener actualizada la web es imprescindible si se quiere que los visitantes vuelvan de vez en cuando a ella. Para ello conviene introducir novedades peridicamente, que los contenidos no sean inmutables. Sobre esto se pueden dar las siguientes recomendaciones:

20

Hacer modificaciones peridicas del diseo de la web manteniendo algunos elementos fijos como el ttulo, logo, etc. Pequeos cambios en los colores o en los elementos de navegacin pueden dar un aspecto muy distinto a la web.

Actualizar el contenido y mantener informado al visitante de dichas actualizaciones. Por ejemplo, si aadimos una pgina con fotos y comentarios de las ltimas actividades culturales o excursiones que hizo el centro, lo ideal es avisarlo con un enlace bien visible en la pgina principal de la web.

Introducir elementos en el portal de la web que cambien por s solos peridicamente sin necesidad de un mantenimiento muy laborioso. He aqu algunos ejemplos:

Titulares del da (http://www.imente.com): Se pueden disear en cuanto a tamao y color de fondo para que encajen en la parte de la pgina que ms nos interese. Se renuevan cada da automticamente y podemos elegir la temtica de los titulares.

Banners de intercambio (http://www.clicklatino.com): De paso que renovamos automticamente el aspecto de la pgina, nos damos a conocer a travs del intercambio.

Introducir elementos de participacin de los visitantes. Ejemplos:

Foros de debate (http://www.quicktopic.com/) Encuestas (http://encuestas.miarroba.com/) Tabln de anuncios virtual. Ejemplo.

Una ltima recomendacin. Como norma general, hay que contestar siempre los correos que se reciban de los visitantes. Es una manera de fidelizar las visitas y, sobre todo, es de buena educacin.

21

TABLN DE ANUNCIOS VIRTUAL.

Es un tabln al que se le pueden "pegar" muchas notas y avisos porque si se amontonan, como en un tabln de verdad, se pueden apartar los de delante o reordenarlos todos si se quiere. Para ver como queda pincha en este enlace. El cdigo fuente del javascript es el siguiente: Seccin <head>

Copyright (C) 1999 Thomas Brattli This script is made by and copyrighted to Thomas Br Visit for more great scripts. This may be used freely I w ill also appriciate any links you could give me. *************************************************************** //Default brow sercheck, added to all scripts! function checkBrow ser(){ this.ver=navigator.appVersion this.dom=document.getElementById?1:0 this.ie5=(this.ver.indexOf("MSIE 5")>-1 &&

Seccin <body>

<div <div <div <div <div

id="divDrag0"><p align="center" style="w ord-sp id="divDrag1"><p align="center" style="w ord-sp id="divDrag2"><p align="center" style="w ord-sp id="divDrag3"><p align="center" style="w ord-sp id="divDrag4"><p align="center" style="w ord-sp

Por cada nuevo anuncio que se ponga en el tabln hay que: 1. Aadir una nueva lnea en la seccin <head> a continuacin de

22

#divDrag4{position:absolute; left:0; top:0; visibility...... Que ponga: #divDrag5{position:absolute; left:0; top:0; visibility...... Especificando las nuevas variables (tamao y origen de la imagen)

2. Aadir una nueva lnea a continuacin de oDrag[4].moveIt(160,340) Que ponga: oDrag[5].moveIt(x,y) Donde x e y son las coordenadas en pxeles de la posicin inicial. 3. Aadir una nueva lnea en la seccin <body> a continuacin de <div id="divDrag4"><p align="center" style=...... Que ponga: <div id="divDrag5"><p align="center" style=...... Y escribiremos antes de la etiqueta </div> todo el cdigo html de lo que queremos que aparezca en el anuncio. Si quieres que te quede exactamente igual, aqu tienes los archivos: corcho de fondo post-it: verde140x150 rosa180x120 am120x80

23

De todas formas, lo ideal es que busques otro formato distinto. Si es as, mndame una direccin para que pueda ver como ha quedado. Este javascript es una adaptacin del de Thomas Brattli (bratta.com), respeta sus mensajes de copyright. <style type="text/css"> #divDrag0{position:absolute; left:0; top:0; visibility:hidden; clip:rect(0,120,170,0); height:170; width:120; layer-background-image:url('../images/p_it_verdex150.jpg'); backgroundimage:url('../images/p_it_verdex150.jpg')} #divDrag1{position:absolute; left:0; top:0; visibility:hidden; clip:rect(0,300,130,0); height:130; width:300; layer-background-image:url('../images/p_it_rosa300x130.jpg'); backgroundimage:url('../images/p_it_rosa300x130.jpg')} #divDrag2{position:absolute; left:0; top:0; visibility:hidden; clip:rect(0,150,200,0); height:200; width:150; layer-background-image:url('../images/p_it_verde150x200.jpg'); backgroundimage:url('../images/p_it_verde150x200.jpg')} #divDrag3{position:absolute; left:0; top:0; visibility:hidden; clip:rect(0,100,100,0); height:100; width:100; layer-background-image:url('../images/p_it_rosa100x100.jpg'); backgroundimage:url('../images/p_it_rosa100x100.jpg')} #divDrag4{position:absolute; left:0; top:0; visibility:hidden; clip:rect(0,80,60,0); height:60; width:80; layer-background-image:url('../images/p_it_amar80x60.jpg'); backgroundimage:url('../images/p_it_amar80x60.jpg')} </style> <script type="text/javascript" language="JavaScript"> /******************************************************************************** Copyright (C) 1999 Thomas Brattli This script is made by and copyrighted to Thomas Brattli at www.bratta.com Visit for more great scripts. This may be used freely as long as this msg is intact! I will also appriciate any links you could give me. ********************************************************************************/ //Default browsercheck, added to all scripts! function checkBrowser(){ this.ver=navigator.appVersion this.dom=document.getElementById?1:0

24

this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0; this.ie4=(document.all && !this.dom)?1:0; this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0; this.ns4=(document.layers && !this.dom)?1:0; this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5) return this } bw=new checkBrowser() //How many layers do you have?? numdrag=5 /******************************************************************************** Remember to set the width and height to the same as the clip values when you change on the layers. If you are adding a image in one of the layers do like I have done on divDrag3 (see style), add is as a background-image. Then the drag will be smoother. Remember to set the the height, width and clip to the exact same as the size of you image. ********************************************************************************/

/******************************************************************************** Object constructor part. Setting the objects methods and properties ********************************************************************************/ function dragObj(obj,nest){ nest=(!nest) ? '':'document.'+nest+'.' this.css=bw.dom? document.getElementById(obj).style:bw.ie4?

document.all[obj].style:bw.ns4?eval(nest+"document.layers." +obj):0; this.evnt=bw.dom? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4? eval(nest+"document.layers." +obj):0; this.x=(bw.ns4 || bw.ns5)? this.css.left:this.css.pixelLeft; this.y=(bw.ns4 || bw.ns5)? this.css.top:this.css.pixelTop; this.moveIt=b_moveIt; this.drag=false;

25

this.clickedX=0; this.clickedY=0 return this } function b_moveIt(x,y){ this.x=x; this.y=y; this.css.left=this.x this.css.top=this.y } function mmover(e){ tp=(bw.ns5 || bw.ns4)?e.target.name:window.event.srcElement.tagName if(tp=="DIV" || bw.ns4 || bw.ns5){ num=(bw.ns4 || bw.ns5)?e.target.id.substr(7,2):(bw.ie4 || bw.ie5)? window.event.srcElement.id.substr(7,2):0 oDrag[parseInt(num)].isOver=true } } function mmout(e){ tp=(bw.ns5 || bw.ns4)?e.target.name:window.event.srcElement.tagName if(tp=="DIV" || bw.ns4 || bw.ns5){ num=(bw.ns4)?e.target.id.substr(7,2):(bw.ie4 window.event.srcElement.id.substr(7,2):0 if(bw.ns5) for(var i=0; i<oDrag.length;i++){oDrag[i].isOver=false} else oDrag[parseInt(num)].isOver=false } } function mup(){ for(var i=0; i<oDrag.length;i++){ if(oDrag[i].isOver) { oDrag[i].drag=false } } } function mdown(num){ x=(bw.ns4 || bw.ns5)?num.pageX:event.x || bw.ie5)?

26

y=(bw.ns4 || bw.ns5)?num.pageY:event.y for(var i=0; i<oDrag.length;i++){ if(oDrag[i].isOver) { oDrag[i].drag=true oDrag[i].clickedX=x-oDrag[i].x oDrag[i].clickedY=y-oDrag[i].y cZIndex++ oDrag[i].css.zIndex=cZIndex } } } function mmove(e){ x=(bw.ns4 || bw.ns5)?e.pageX:event.x y=(bw.ns4 || bw.ns5)?e.pageY:event.y for(var i=0; i<oDrag.length;i++){ if(oDrag[i].drag){ oDrag[i].moveIt(x-oDrag[i].clickedX,y-oDrag[i].clickedY) } } return false } /******************************************************************************** Set this variable to the zIndex you want it to start at, (if you have several layers and want it to start on the top, change to somthing higher then the uppermost layer ********************************************************************************/ cZIndex=10 /******************************************************************************** Making objects, Capturing events, when the user mouseovers a layer the variable/property of that layer names .isOver will be true, and that means if the user clicks when he is on top of that layer it becomes draggable ********************************************************************************/

27

function dragInit(){ oDrag=new Array() for(i=0;i<numdrag;i++){ oDrag[i]=new dragObj('divDrag'+i) oDrag[i].evnt.onmouseover=mmover; oDrag[i].evnt.onmouseout=mmout; } if(bw.ns4) document.captureEvents(Event.MOUSEMOVE | Event.MOUSEDOWN | Event.MOUSEUP) document.onmousedown=mdown document.onmouseup=mup document.onmousemove=mmove; //HERE YOU CAN MOVE THE LAYERS TO A POSITION IF YOU WANT TO BEFORE THEY ARE SHOWN. oDrag[0].moveIt(10,80) oDrag[1].moveIt(240,120) oDrag[2].moveIt(500,260) oDrag[3].moveIt(130,330) oDrag[4].moveIt(160,340) //Showing the layers for(i=0;i<numdrag;i++){ oDrag[i].css.visibility='visible' } } onload=dragInit; </script>

<div id="divDrag0"><p align="center" style="word-spacing: 0; line-height: 100%; margin-left: 5; margin-right: 5; margin-top: 5; margin-bottom: 0"><font size="2" face="Comic Sans MS"><b>Este mensaje est fijo y en negrita y lleva una imagen</b><br><font size="4"

28

face="Comic

Sans

MS"><img

border="0"

align="center"

src="../images/lazo_azul.gif"

width="30" height="47"></font></div> <div id="divDrag1"><p align="center" style="word-spacing: 0; line-height: 100%; margin-left: 5; margin-right: 5; margin-top: 5; margin-bottom: 0"><font size="2" face="Comic Sans MS">Cada mensaje en su nota</font></div> <div id="divDrag2"><p align="center" style="word-spacing: 0; line-height: 100%; margin-left: 5; margin-right: 5; margin-top: 5; margin-bottom: 0"><font size="2" face="Times New Roman"><b></b>Este enlace<br><a tiene texto</font><br><font size="1">en dos tamaos y un href="http://www.joseacortes.com/">joseacortes.com</a></font></div><div

id="divDrag3"><p align="center" style="word-spacing: 0; line-height: 100%; margin-left: 5; margin-right: 5; margin-top: 5; margin-bottom: 0"><font size="2" face="Comic Sans MS"></div> <div id="divDrag3"><p align="center" style="word-spacing: 0; line-height: 100%; margin-left: 5; margin-right: 5; margin-top: 5; margin-bottom: 0"><font size="1" face="Comic Sans MS"></font></div> <div id="divDrag4"><p align="center" style="word-spacing: 0; line-height: 100%; margin-left: 5; margin-right: 5; margin-top: 5; margin-bottom: 0"><font size="1" face="Comic Sans MS"></font></div></font></font>

TEST INTERACTIVO DE EVALUACIN.

Se trata de un test que se contesta y corrige por Internet. Existen muchos tipos y aqu proponemos uno que consiste en preguntas con un enunciado y 5 posibles respuestas de la que slo una es verdadera. El programa avisa de que se ha fallado la respuesta, pero no da opcin a seguir probando, pasa a la siguiente. As obliga a pensar cada pregunta en vez de tantear la respuesta correcta. Para ver como queda pincha en este enlace. La pgina web del test debe tener dos marcos, como mnimo. Uno estrecho donde aparecen las estadsticas del test segn se van contestando las preguntas y otro ms amplio

29

donde van saliendo las preguntas de una en una. A continuacin tienes las 3 pginas que componen el test, la pgina de marcos ("index.htm") y las 2 pginas de los 2 marcos ("test.htm" e "inicio.htm"). Las puedes descargar en un nico archivo .zip en el siguiente enlace: archivos_test.zip Una vez descomprimidas, gurdalas en la misma carpeta. Slo hay que modificar la pgina que contiene el cdigo del script, que es la test.htm. Los cambios a realizar son los siguientes: Poner el ttulo del test. Para ello modifica la lnea que pone var titulo="<h2 align=center>Ttulo del test</h2>"; Sustituye el texto en negrita por tu propio titulo. Indicarle al programa cuantas preguntas va a tener el test this.length=5; Sustituye el 5 por el nmero de preguntas que vayas a poner en el test.

Escribir

las

preguntas.

Ir

aadiendo

lneas

como

la

siguiente

this[0]=new pregunta("Enunciado 1","Respuesta A","Respuesta B","Respuesta C","Respuesta D","Respuesta E",5) Sustituye lo que est en negrita por lo que corresponda: el 0 por el nmero de orden de la pregunta, el enunciado, las 5 respuestas y el 5 por el nmero que corresponde a la respuesta acertada.

Para modificar el diseo con el que aparecen las preguntas, debes escribir el cdigo html, directamente en el script, en las lneas que empiezan por ppal.write de la siguiente manera: ppal.write("cdigo html con comillas simples que escribimos");

30

Y ya debera funcionar el test. Si lo utilizas y consigues que funcione, te agradecera que me mandaras un correo con un enlace para poder visitarlo.

Contenidos Biologa 2 bachillerato Ensayos microbiolgicos Prcticas de laboratorio Galera de imgenes Resultados Preguntas: Falladas: Correctas: Porcentaje:

TEST DE PRINCIPIOS INMEDIATOS.

1. Los oligoelementos.

Aparecen en cantidades muy pequeas en los seres vivos Tienen poca importancia biolgica Slo son 5: S, K, P, Ca y Mg Las 3 primeras son verdaderas Las 3 primeras son falsas

TTULO EN JAVASCRIPT.
Se trata de un ttulo en texto que puede llevar varias lneas con distintos formatos y que se desplaza a una velocidad regulable. Puedes ver como queda en el siguiente enlace.

31

El cdigo fuente del javascript es el siguiente: Seccin <head>

<script type="text/javascript" language="JavaScript" /************************************************************** Copyright (C) 1999 Thomas Brattli This script is made by and copyrighted to Thomas Br Visit for more great scripts. This may be used freely I w ill also appriciate any links you could give me. *************************************************************** //Default brow sercheck, added to all scripts! function checkBrow ser(){ this.ver=navigator.appVersion this.dom=document.getElementById?1:0 this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.ie4=(document.all && !this.dom)?1:0; this.ns5=(this.dom && parseInt(this.ver) >= this.ns4=(document.layers && !this.dom)?1 this.bw =(this.ie5 || this.ie4 || this.ns4 || this.n return this } bw =new checkBrow ser() //Here are the variables you have to set:

Seccin <body>

<div id="divWrite">linea 1</div> <div id="divWrite2">linea 2</div>

Posibles cambios que se pueden introducir: wWorks=0 Escribe texto. wWorks=1 Retira texto. var wFontsize=40, var wColor="#000000", var wAlign="center" establecen respectivamente el tamao, el color y la alineacin del texto. var wSpeed=50 Velocidad de movimiento del texto. Cuanto menor la cifra, ms rpido.

32

var wHide=false El texto permanece. var wHide=true Desaparece.

Se pueden conseguir ms lneas de texto simplemente aadiendo a continuacin de oWrite2=new makeWriteObj('divWrite2',"linea 2"....... Otra lnea de este estilo: oWrite3=new makeWriteObj('divWrite3',"linea 3"....... Y su correspondiente etiqueta: <div id="divWrite3">linea 3 </div> En la seccin <body> Este javascript es una adaptacin del de Thomas Brattli (bratta.com), respeta sus

mensajes de copyright.

<script type="text/javascript" language="JavaScript"> /******************************************************************************** Copyright (C) 1999 Thomas Brattli This script is made by and copyrighted to Thomas Brattli at www.bratta.com Visit for more great scripts. This may be used freely as long as this msg is intact! I will also appriciate any links you could give me. ********************************************************************************/ //Default browsercheck, added to all scripts! function checkBrowser(){ this.ver=navigator.appVersion this.dom=document.getElementById?1:0 this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0; this.ie4=(document.all && !this.dom)?1:0; this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;

33

this.ns4=(document.layers && !this.dom)?1:0; this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5) return this } bw=new checkBrowser() //Here are the variables you have to set: //There are 2 ways this script can work. // 0 = WriteText // 1 = RemoveText wWorks=0 var wText="linea 1" //The text you want write out var wFontsize=40 //Set the fontsize you want var wColor="#000000" //The text color var wAlign="center" //the alignment of the text, you can choose center, right or left. var wSpeed=50 //Set the speed you want it to write in (in milliseconds between each letter) var wFont='Arial Black,Arial,Helvetica' //The font face var wHide=false //do you want it to hide when its done? (true or false) var wHidewait=1000 //Set the time you want it to wait before it hides /*You can remove this if you don't wan't it to start right away. You can have it start if someone clicks a link (make a link like this: <a href="#" onclick="writeInit()">Click to writetext</a>)*/ onload=writeInit; /********* You shouldn't really have to set anything below this point ***********/ //Object functions function makeWriteObj(obj,text,size,color,align,speed,font,hide,hidewait,works){ this.css=bw.dom? this.writeref=bw.dom? document.getElementById(obj).style:bw.ie4? document.getElementById(obj):bw.ie4? document.all[obj].style:bw.ns4?document.layers[obj]:0; document.all[obj]:bw.ns4?document.layers[obj].document:0; this.text=text; this.size=size; this.color=color; this.align=align; this.speed=speed;

34

this.font=font; this.hide=hide; this.hidewait=hidewait; this.writeWrite=b_writeWrite; this.writeText=b_writeText; this.write=b_write if(bw.dom || bw.ie4){ //Setting the style properties this.css.fontFamily=this.font; this.css.color=this.color; this.css.textAlign=this.align } this.obj = obj + "Object"; } function b_write(num,fn){ if(!fn) fn='' if(!this.works) this.writeText(num,fn) else this.removeText(fn) } function b_writeWrite(text){ if(bw.ns4){ this.writeref.write('<p style="text-align:'+this.align+'; font-size:' +this.size+'px; font-family:'+this.font+'; color:'+this.color+'">'+text+'</p>') this.writeref.close() }else if(bw.dom){ this.writeref.replaceChild(document.createTextNode(text),this.writeref.childNodes[0]) }else if(bw.ie4) this.writeref.innerHTML=text } function b_writeText(num,fn){ if (num<=this.text.length){ wtext=this.text.substr(0,num) this.writeWrite(wtext); num+=1; setTimeout(this.obj+".writeText("+num+",'"+fn+"')",this.speed) }else{ if(this.hide) setTimeout(this.obj+".css.visibility='hidden'",this.hidewait); eval(fn) } eval(this.obj + "=this"); return this this.css.fontSize=this.size; this.removeText=b_removeText; this.works=works;

35

} function b_removeText(fn){ if(this.text.length>0){ this.text=this.text.slice(0,this.text.length-1) this.writeWrite(this.text) setTimeout(this.obj+".removeText('"+fn+"')",this.speed) }else{ if(this.hide) setTimeout(this.obj+".css.visibility='hidden'",this.hidewait); eval(fn) } } /*Initiates the object, shows it and starts the zoom ****************************************************************************/ function writeInit(){ if(bw.bw){ oWrite=new makeWriteObj('divWrite',wText,wFontsize,wColor,wAlign,wSpeed,wFont,wHide,wHidewait,w Works) //Change the line below to: oWrite.write(0) if you only have one object. oWrite.write(0,'oWrite2.css.visibility="visible"; oWrite2.write(0)') oWrite.css.visibility='visible' //Another object, just remove this line if you only want one object. It's just to show you how can have more objects. oWrite2=new 2",18,"#000000","center",100,"Verdana,Arial",0,500,0) } } </script> makeWriteObj('divWrite2',"linea

APERTURA CONTROLADA DE VENTANAS.

36

La idea de este javascript es que al pinchar un enlace se abra una ventana con el tamao que queramos, pudiendo tambin controlar otros parmetros como que tenga barra de estado o no, que se pueda modificar el tamao o no, etc. Esto es bastante prctico cuando en una pgina tenemos enlaces a muchas fotos. De esta manera la pgina se carga rpido porque no tiene fotos y el visitante puede ir abriendo las que quiera sin que le desaparezca la pgina principal. El cdigo que hay que insertar es el siguiente: <a href="javascript:;" onClick="window.open()">Texto del enlace</a> Los elementos de la ventana que se pueden ajustar deben ir en el parntesis de window.open separados por comas y encerrados en comillas simples. Ejemplos: Para abrir la pgina ejemplo.htm que est en la misma carpeta que la actual con un tamao de 200x375, con el resto de elementos en su valor predeterminado que es 0 o NO window.open('ejemplo.htm','','height=200,width=375') Ver

La misma ventana pero con barra de estado. window.open('ejemplo.htm','','height=200,width=375,status=1') Ver

La misma ventana pero con barra de mens. window.open('ejemplo.htm','','height=200,width=375,menubar=1') Ver

La misma ventana pero con barra de herramientas. window.open('ejemplo.htm','','height=200,width=375,toolbar=1') Ver

La misma ventana pero con barra de direccin.

37

window.open('ejemplo.htm','','height=200,width=375,location=1') Ver Si en la ventana hay un enlace a otra pgina que no cabe en el tamao que hemos fijado, como es el caso del ejemplo, hay que dar la opcin de que aparezcan barras de desplazamiento o de redimensionar la ventana. Esto se hace con scrollbars=1 y resizable=1 respectivamente. window.open('ejemplo.htm','','height=200,width=375,scrollbars=1') Ver window.open('ejemplo.htm','','height=200,width=375,resizable=1') Ver

38