UNIVERSIDAD DE EL SALVADOR FACULTAD DE INGENIERIA Y ARQUITECTURA ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS MANEJO DE SOFTWARE PARA MICROCOMPUTADORAS Ciclo II – 2012

GUIA DE LABORATORIO 05 En este material de apoyo se desarrolla una aplicación que permita explicar algunos elementos fundamentales en el diseño de una página web; utilizando la herramienta BlueGriffon v 1.5.1. BlueGriffon es una aplicación intuitiva que proporciona a los autores Web una interfaz de usuario sencilla que permite crear sitios web atractivos utilizando la técnica WYSIWYG que significa: What You See Is What You Get (en inglés, "lo que ves es lo que obtienes").. Desarrolle esta guía y guarde todos los archivos en la carpeta Prac06 dentro de su carnet PRIMERA PARTE Creación de Páginas Web y subida de archivos en sitio gratuito.

I-Elementos de BlueGriffon 1. Abra la carpeta BlueGriffon 1.5.1 Portable, la cual puede estar comprimida en .zip o .rar, en tal caso descomprímala. Y podrá ver la siguiente estructura de archivos:

Para abrir el programa de doble clic en bluegriffon.exe, tal como lo muestra la figura.

Al abrirlo aparecerá la siguiente pantalla, de no ser así, entre al menú de Archivo, y seleccione nuevo:

B

C

F E

A D

Área de trabajo: Es la pagina que se esta diseñando, esta puede verse en tipo diseño, en código o ambas opciones (dividir). A. Selector de Vistas: Da la posibilidad de cambiar de vista de Diseño a ver su Código Fuente y viceversa. B. Barra de Menú: Barra que contiene los elementos de menú desplegables a los cuales se puede accesar. C. Barras de Herramientas: Muestra las diferentes herramientas de acceso rápido que podemos utilizar. D. TAG(etiqueta) o elemento Xhtml5 en la cual se encuentra el cursor actualmente.

II- Crear Pagina Web Principal 1. Debemos escribir sobre el Área de Trabajo la siguiente oración: “Bienvenidos/as a la página de : ”, luego seleccione el texto y presione el botón la etiqueta negrita (strong) como lo muestra la siguiente figura:

para poner

2. Ahora Digitaremos “MANEJO DE SOFTWARE PARA MICROCOMPUTADORAS”. Y “Área de Botones” y sombrearemos la frase MANEJO DE SOFTWARE PARA MICROCOMPUTADORAS

y sobre la barra de herramientas, cambiamos la opción de Párrafo a Encabezado 1 .

Debe quedar como la siguiente figura:

3. Si deseamos centrarlo basta con dar clic en . Ahora cambiaremos el color de letra a color azul, para ello utilizaremos las Propiedades de Estilo. Damos clic en la opcion “Paneles” de la barra de menu y luego seleccionamos “Propiedades de estilo”.

Aparecerá el Panel de Propiedades de estilo. Adecue sus ventanas para que se vea se la siguiente manera:

Ahora seleccione el texto y en el Panel de Propiedades de estilo despliegue la sección “Colores”, luego de clic en “Primer plano”:

Seleccione el color azul y de clic en aceptar. El programa le pedira introducir un Id (*) unico, puede ingresar por ejemplo el nombre “h1azul”.

Podra observar el siguiente cambio:

4. Para conseguir un aspecto más atractivo de la página Web o de todas las páginas Web de un sitio, podemos cambiarles sus propiedades. En este caso colocaremos un color de fondo a la página que se está diseñando. Para ello debemos dirigirnos a la etiqueta “body”, dando clic en la parte inferior izquierda de la ventana, como muestra la figura: Luego, en el panel de “Propiedades de estilo” damos clic, dentro de la seccion “Colores”, a la opcion “Color de fondo”:

Seleecionamos el color gris y nuevamente nos pedira ingresar un Id unico, e ingresamos el texto “fondopagina”. Al hacer estos cambios la pagina se vera como se muestra en la siguiente imagen.

(*) El atributo id especifica un identificador único para un elemento HTML (el valordebe ser único dentro del documento HTML). El atributo id es el más utilizado para apuntar a un estilo en una hoja de estilo y JavaScript (a través del DOM HTML) para manipular el elemento con el ID específico.

5. Procedemos a guardar la página, le recomendamos lo haga en su carpeta de practica6(carnet\prac06). Para ello debemos dar clic sobre el icono Guardar . Como es la primera vez que guardamos y no hemos introducido un título a la página nos aparecerá la siguiente ventana:

Introducimos el título de la página “LabBG” este se mostrará en la barra de título de nuestro navegador, damos clic en aceptar. Ahora buscamos la ubicación de nuestra carpeta y le colocamos el nombre de “PaginaPrincipal” como lo muestra la siguiente figura: tm

Cierre brue grifón y busque su archivo, si aparece como el que se muestra en la figura, significa que no ha tomado la extensión html correctamente, por lo cual deberá ser renombrado dicho archivo a PaginaPrincipal.html Antes

Cambio

Posteriormente veremos el archivo en formato correcto(reconocido que puede abrirse con mozilla u otro programa que maneje html)

Vuelva a entrar a blue grifón

Seleccione un archivo

Presione clic en aceptar.

6. Tratando de mejorar el diseño de la página principal; se deberá agregar un texto dinámico que muestre: “Programa de la Asignatura”, para ello utilizaremos marquesina (etiqueta marquee), al mismo tiempo conoceremos como ingresar código de forma manual. Damos clic en donde queremos que aparezca la marquesina(debajo de texto “MANEJO…..”), Luego presione clic en menú “Insertar”, luego en “Código HTM”:

Luego en la ventana que aparece digitaremos el siguiente código: Programa de la Asignatura



Al dar clic en Aceptar podrá ver el texto en su área de trabajo:

Si se desea cambiar el estilo de la marquesina, debemos ubicarnos en el tag de marquesina para el cambio de las propiedades de estilo.

Asi mismo daremos un nuevo tamaño al texto, y en el panel de “Propiedades de Estilo” desplegamos la seccion “General” y en “Tamaño” el que se llama: Muy grande (xx/large).

Puede ponerle a ese id el nombre formatomarquesina.

Puede tambien cambiar el color(a verde) como lo hizo en el nombre de la asignatura.

Debera quedar de la siguiente forma:

7. Ahora procederemos a visualizar nuestro diseño realizado en el navegador

web. Damos en clic en el siguiente icono:

Luego nos pedirá que seleccionemos el navegador de nuestra preferencia para poder realizar esta acción. Damos clic en Elegir, nos dirigimos a Equipo, luego seleccionamos Disco C:/, Archivos de Programa (puede variar a Archivos de Programa x86), Mozilla Firefox y estando en ese directorio seleccionamos: firefox.exe y luego damos clic en Aceptar.

Con eso aparecerá nuestra página web inicial como se verá en un navegador Como vera la marquesina no es más que un texto que se va moviendo en nuestra página web dependiendo de las opciones que hayamos configurado.