TIC
Start of topic | Skip to actions
Aprende fáciLmente a diseñar páginas Web Educativas
- Cocinado por...
Todo el proceso lo haremos como usuarios normales sin privilegios de root
En primer lugar, tienes que ver la versión de Mozilla Composer con la que estás trabajando. Es muy importante porque hasta la versión 1.7 Composer trae un bug que hace que las imágenes de fondo de página siempre se queden con la ruta absoluta puesta aunque marques la opción de URL relativa. Además, muchas de las imágenes que coloques en tu página web también quedarán con una ruta absoluta (de forma aleatoria). Este error queda corregido a partir de la versión 1.7 de la Suite Mozilla. Para ver que versión tienes instalada pulsas Ayuda->Acerca de Mozilla y ahí podrás ver tu versión instalada.
Si trabajas con Guadalinex Edu en cualquiera de sus versiones, tendrás que actualizar tu versión del paquete Mozilla para no tener que sufrir este error. Veamos los pasos:
- En la dirección http://www.mozilla-europe.org/es/products/mozilla1x/ puedes bajarte la última actualización 1.7.3 en español (en el momento de elaborar esta guía).
- Te descargarás un paquete comprimido que seguramente tendrás guardado en la carpeta /home/usuario
- Haciendo doble click sobre dicho paquete podrás descomprimirlo. Te creará una carpeta llamada instalador-mozilla-v1.7.3
- Dicha carpeta la puedes tener también en /home/usuario (luego podrás borrarla).
- Entra dentro de dicha carpeta y haz doble click en instalar. Elige la opción Ejecutar
- El proceso a partir de aquí es muy simple. Sólo tienes que tener en cuenta que te propondrá como defecto instalarse en la carpeta /usr/local y tienes que cambiarla puesto que todo el proceso lo estamos haciendo como usuario normal y no tenemos permiso para escribir fuera de nuestra carpeta de usuario. Puedes poner por ejemplo instalar en /home/usuario/mozilla_1_7_3
- La instalación es automática. Cuando termine tendrás dentro de la carpeta que has decidido un fichero que se llama mozilla. Si haces doble click sobre él arranca el navegador (desde el que se puede acceder al Composer)
Si quieres tener un lanzador en tu escritorio para Composer hacemos lo siguiente:
- Botón derecho sobre el escritorio->Crear un lanzador
- En la ventana que te aparece, en la pestaña Básico, en nombre escribes el que quieras, por ejemplo Mozilla Composer
- En comando, elige la opción examinar y busca el fichero mozilla que arranca la aplicación, en mi caso la ruta sería: /home/usuario/mozilla_v.1.7.3/mozilla
- Con esta opción en comando arranca la suite completa, si lo que quieres es sólo Composer, entonces al final de la línea del comando añades -edit, quedaría así: /home/usuario/mozilla_v.1.7.3/mozilla -edit
- En iconos puedes ponerle un icono de la aplicación, los tienes en /home/usuario/mozilla-v1.7.3/chrome/icons/default
- Con ésto ya tienes creado el lanzador para Composer y estarás actualizado a la última. ¡¡Y todo como usuario sencillo!!. No hace falta ser root.
- Vamos a ver como podemos hacer que al pasar el ratón por encima de una palabra o gráfico aparezca una ventana emergente con algún tipo de mensaje que nosotros hayamos programado. Lo vamos a practicar de tal forma que en nuestras páginas podamos insertar explicaciones del vocabulario que aparece en la misma.
- Fíjate en el ejemplo de abajo. En esta página al pasar el ratón por encima de las palabras señaladas aparece una ventana con el significado de la misma.
- Ventana que aparece al pasar el ratón por la palabra "laboriosa" de la ventana superior
- En primer lugar seleccionamos la palabra o gráfico y pulsamos en el botón enlace
- A continuación, en la ventana donde hay que elegir la dirección del enlace escribimos null para que no nos lleve a ninguna ubicación o página, sólo queremos que aparezca la ventana emergente
- Después pulsamos en el botón de Edición avanzada y seleccionamos la pestaña Eventos Javascript
- En Atributos pulsamos y seleccionamos la opción onmouseover. En valor escribimos lo que hay en la figura alert('Muy trabajadora'), o el mensaje entre comillas simples que nosotros queramos que aparezca. Luego aceptamos y ya tenemos creado un evento javascript con ventanas emergentes explicativas.
- En primer lugar, para ver cómo se crean los botones Lee ésto*
- Como verás en el enlace anterior, necesitamos crear dos botones para cambiar de uno a otro cuando el cursor pase por encima del botón.
- Lo primero que hacemos es insertar como imagen en nuestra página el botón principal, es decir el que se va a ver normalmente (a menos que pasemos el ratón por lo alto que cambiará al botón secundario).
- Ahora veamos el código javascript que hay que añadirle a este botón para que haga el efecto de cambio de uno a otro botón al pasar el ratón por encima.
- Primero seleccionamos el botón y pulsamos sobre Enlace:
- Escribimos la dirección del enlace para cuando pulsemos el botón (si no queremos que vaya a ningún enlace escribimos null y pulsamos sobre Edición Avanzada
- En esta ventana pulsamos sobre la pestaña Eventos Javascript:
- Pinchamos sobre atributos, elegimos onmouseover y escribimos lo que ves a la derecha en valor y lo mismo para onmouseout y su valor:
- onmouseover es la sentencia que indica al navegador que el ratón está encima del gráfico (botón). Diciéndole que tome el valor src="botocuestionario2.png" le hemos dicho que cambie el botón 1 por el 2. Con onmouseout hacemos lo mismo para indicarle que cambie los botones cuando el cursor se quite de encima del gráfico (botón).
- Pulsando con el derecho sobre una página podemos seleccionar Ver su código fuente:
- He remarcado la Hoja de estilos de la página:
BODY {font-size: 90%; font-family: Verdana, Arial, sans-serif; margin-left: 5%; margin-right: 5%;} </style> Esta hoja de estilos afecta a toda la página (por eso tiene la sentencia BODY) y en ella definimos:
- El tamaño font-size para la letra en % respecto al tamaño por defecto que tiene la letra al visualizarla en un navegador.
- La familia de letras font-family que se van a utilizar en nuestra página, en este caso Verdana, Arial sin serif (el rabito que marca las terminaciones de algunas letras como la Times)
- El margen izquierdo margin-left en % respecto al ancho de la página y también el margen derecho margin-right
- Fíjate en el ejemplo de abajo en el que el texto del cuento fluye a la derecha de la imagen
- Para lograrlo, selecciona la imagen con el botón derecho y le das a Propiedades, abajo ves que además hemos redimensionado la imagen.
- En la pestaña apariencia hemos hecho dos cambios: hemos dejado un margen de 4 pixels para separar el texto de la imagen y a la derecha donde pone Alinear texto con imagen, hemos elegido que el texto fluya por la derecha de la imagen. Ya puedes hacer click y escribir tu texto que te saldrá como en la imagen.
- Como complemento a la explicación para crear marcos en el curso de Edición Html
- Este código tendrías que copiarlo para crear dos marcos horizontales en tu página. Varía el ancho del marco superior cambiando el número en rows="147,*", el número hace referencia a pixels o puntos.
- Tienes que introducir el siguiente código donde quieras poner un buscador en tu página. Abajo te puedes descargar un fichero de texto con el código para que uses las funciones de copiar-pegar.
Temas Relacionados: ElGimp -- JuanLopez - 15 Dic 2004 El pingüino ya no tiene frío
arriba
| ClasificacionDePaginas | |
|---|---|
| SoftwareTIC: | SuiteMozilla |
| TematicaTIC: | CreacionWeb |
| LenguajesDeProgramacion: | LenguajeHtml |
| DetallesExtra: | EjerciciosPracticos |
| I | Fichero  | Acción | Tamaño | Fecha | Por | Comentario |
|---|---|---|---|---|---|---|
 | buscador_google.rtf | gestionar | 0.8 K | 24 Feb 2005 - 10:39 | JuanLopez |
Editar | Fich. Adj. | Imprimir | LaTex | Texto Fuente | Más Opciones
Revisiones: | r1.18 | > | r1.17 | > | r1.16 | Historia Completa | Enlaces desde..
Revisiones: | r1.18 | > | r1.17 | > | r1.16 | Historia Completa | Enlaces desde..