guia 5 bluegriffon 2013

Páginas Web Página 1 de 22

UNIVERSIDAD DE EL SALVADOR

FACULTAD DE INGENIERIA Y ARQUITECTURA

ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS

MANEJO DE SOFTWARE PARA MICROCOMPUTADORAS

CICLO II-2013

GUIA DE LABORATORIO 5

Páginas Web: BlueGriffon Indicaciones: Se desarrolla una aplicación que permita explicar algunos elementos fundamentales en el diseño de una página web, utilizando la herramienta libre BlueGriffon v1.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.

Entorno de Trabajo

Pagina Web Trabajo


Puede realizar la instalación de BlueGriffon desde Aula Virtual, este se encuentra en curso de MSM115, sección de Novedades:

Descripción de entorno de trabajo de BlueGriffon

A. Á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).

B. Selector de Vistas: Da la posibilidad de cambiar de vista de Diseño a ver su Código Fuente y viceversa.

C. Barra de Menú: Barra que contiene los elementos de menú desplegables a los cuales se puede accesar.

D. Barras de Herramientas: Muestra las diferentes herramientas de acceso rápido que podemos utilizar.

E. Muestra la etiqueta o elemento html en la cual se encuentra el cursor actualmente.

F. Pestañas abiertas y Pestaña Activa.

I-Elementos de BlueGriffon

A

B

C

D

E

E

F

E


1. Debemos escribir sobre el Área de Trabajo la siguiente oración: “Bienvenidos/as a

la pagina de”, luego seleccione el texto y presione el botón para poner la etiqueta negrita (strong) como lo muestra la siguiente figura:

2. Ahora presionamos “enter” y crearemos una etiqueta <h1> para ello, escribiremos sobre el área de trabajo “MSM_115”. Luego sobre la barra de herramientas, cambiamos la opción de Párrafo a Encabezado 1.

El resultado debe ser similar a la siguiente figura:

II- Crear Pagina Web Principal


3. Si deseamos centrarlo basta un clic en . Ahora cambiaremos el color de letra a color azul, para ello utilizaremos las Propiedades de Estilo. 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 de 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 obeservar 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 cambiar 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 memoria USB,

en una nueva carpeta llamada “LabSitiosWeb”. 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, luego clic en aceptar.


Ahora buscamos la ubicación de nuestra carpeta y le colocamos el nombre de

“PaginaPrincipal” como lo muestra la siguiente figura:

6. Tratando de mejorar el diseño de la página principal;

se debe agregar un texto dinámico que muestre:

“Programa de la Materia”, para ello utilizaremos

marquesina (etiqueta marquee), al mismo tiempo

conoceremos como ingresar código de forma

manual.

Damos clic en el menú “Insertar”, luego en “Codigo

html”:

Luego en la ventana que aparece

digitaremos el siguiente código:

<marque>Programa de la

Materia</marquee><br></br>


Clic en Aceptar podrá ver el texto en su área de trabajo:

Si se desea cambiar el estilo de la

marquesina, debemos repetir el paso

3 de esta seccion 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”

establecemos 0.9cm:

El resultado es:

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.

Como puede observar marquesina no es más que un texto que se va moviendo

en nuestra página web dependiendo de las opciones que hayamos configurado.


8. Ahora procederemos a ingresar un botón en nuestro diseño. Damos un salto de

línea (enter) para pasar a un nuevo párrafo, nos vamos al menú y seleccionamos

la opción “Insertar”, luego damos clic en “Formulario” y seleccionamos la opción

“Botón”

También podemos realizar esta misma acción dando clic en la flecha que apunta

hacia abajo del icono ubicado en la barra de herramientas como muestra la

siguiente figura:

A continuación aparecerá una ventana en donde debe especificar las

configuraciones del botón y deberá poner un nombre “Unidad I” y en tipo

seleccione la opción “Botón” de la siguiente manera:


Luego observara que aparece un pequeño botón en el área de trabajo

especificada, y lo editamos dando clic sobre él, escribimos el texto “Unidad I”.

Deberá observarse de la siguiente manera:

Para mayor resalte a nuestra Botón le pondremos letra negrita siguiendo estos

pasos:

Seleccionamos el botón, un clic sobre él y en el Panel de Propiedades de Estilo,

debemos seleccionar que la propiedad que utilizaremos sea aplicada a los

elementos del mismo tipo, tal como muestra la figura:

Luego desplegamos la sección “General” y damos clic en la opción “Negrita”. Le

pedirá ingresar un id único y escribimos el texto “botonnegrita”.

Deberá observarse de la siguiente forma:

Luego crearemos cuatro botones mas con los textos Unidad II, Unidad III, Unidad

IV, Unidad V; Al final deberá observarse tal como muestra la figura:


9. Ahora procederemos a colocar una imagen .gif a nuestra pagina. Para ello

debemos descargar una imagen .gif y colocarla en una nueva carpeta en nuestro

sitio, la cual crearemos y la llamaremos “imagenes”.

La imagen tiene como nombre smart.gif y se encuentra en la practica de esta

semana:

Carpeta a crear y donde debe guardar Smart.Gig:

Luego en la aplicación BlueGriffon damos clic en el

menu “Insertar” y luego seleccionamos la opcion

“Imagen”como se muestra en la figura:

Luego aparecerá una ventana en la cual seleccionaremos la imagen que

deseamos insertar en nuestra área de trabajo, para ello damos clic en el icono

de la sección “Seleccionar imagen”, tal como se muestra en la figura:

Buscamos la imagen .gif que guardamos en nuestra carpeta “imagenes”, la

seleccionamos y damos clic en abrir.


Luego en el campo “Título” escribimos el texto “Imagen Pagina Principal” y en el

campo “Texto alternativo” (texto que aparecerá como un substituto a la imagen en

caso de presentarse problemas con la misma o no cargarse.) escribimos el texto

“Imagen no Disponible”:

Damos clic en aceptar y podremos observar nuestra imagen en el Área de trabajo

tal como muestra la figura:


1. Insertar una página nueva en blanco, para ello damos clic sobre icono y abre una nueva página en blanco. Como lo muestra la siguiente figura:

2. La debemos guardar con el nombre de “UnidadI” con el título “Unidad I”. Se debe de diseñar la página de la siguiente manera según como se explicó en las partes anteriores de esta guía.

3. Ahora procederemos a insertar una tabla, para ello nos vamos al menú y damos clic

en “Tabla”, luego en “Insertar” y nuevamente damos clic en “Tabla”:

4. Aparecerá un recuadro en donde seleccionaremos el número de filas por el

número de columnas (3x4), que se representa por los cuadros:

Observara que aparece una tabla con las filas y columnas especificadas:

III-Crear Nuevas Páginas secundarias


5. Deberemos de diseñar la siguiente tabla:

Objetivo Contenido Duración

Teórico Laboratorio

Aprender el funcionamiento de los procesadores de texto en software de tipo propietario y código abierto

1. Conceptos generales 2. Manipular documentos 3. Manejo de tablas 4. Inserción de imágenes y archivos 5. Hipervínculos 6. Combinación de correspondencia 7. Índices y tablas de contenido

2 semanas

1 semana

Se puede auxiliar de la opción “Unir celdas”. Esta se aplica seleccionando dos o más

celdas, luego damos clic derecho sobre las celdas seleccionadas y en el submenú que

aparece seleccionamos la opción “Unir Celdas”, tal como muestra la siguiente figura:.

Al final su diseño deberá quedar de la siguiente manera:


6. Deberemos crear los enlaces de los botones diseñados anteriormente. Para ello

debemos retornar a la “PaginaPrincipal” y seleccionar todo el botón luego dar clic

derecho sobre el botón al cual le asignaremos la página, en este caso será el

botón “Unidad I”, y luego dar clic en la opción “Insertar o editar un enlace” como

se muestra en la figura (note la forma de selección del botón, dando clic y

mantener presionado para seleccionarlo):

En la ventana que aparecerá, de clic en el icono de la sección “Destino”, tal como

muestra la figura:

A continuación aparecerá el directorio de nuestro sitio web, y seleccionamos la

página a la cual el enlace hará referencia, es decir, a la que queremos que se

redireccione.


Seleccionamos entonces “UnidadI” y damos clic en aceptar:

Es de suma importancia que seleccione la opción “La URL es relativa a la

ubicación de la página”, nunca olvide chequear esta opción:

El botón se vera de la siguiente forma en nuestra área de trabajo:

Ahora ejecute su página web en el navegador (paso 7 de la sección anterior) y de

clic en el botón. Deberá ser re-direccionado a la página “Unidad I”.

7. Ahora procedemos a crear un botón (como se mostro en los numerales anteriores) en la página UnidadI para poder regresar a la pagina principal.

8. Finalmente Deberemos de crear todas las páginas asociadas a los botones.


9. Ahora procederemos a subir nuestro sitio a un hosting gratis; el que utilizamos para realizar este ejemplo es el siguiente: http://www.000webhost.com/

10. Al entrar al sitio aparecerá la siguiente ventana

11. Debemos registrarnos a dicho hosting con una cuenta de correo electrónico. Esto lo realizamos presionando el botón Order Now en Free Hosting.

12. Se le mostrará un formulario primero defina su subdominio en la sección que dice

(recommended) ya que es el gratuito, coloque un nombre para su URL en este caso se colocó msm115ues como ejemplo, usted puede colocar carnet-msm115ues, sustituyendo la palabra carnet por su número de carnet de estudiante de la UES.

http://www.000webhost.com/


13. En la sección de “Your name” escriba su nombre, en este caso como ejemplo se colocó Manejo de Software, en “Your email” digite una dirección de correo electrónico válida y de su propiedad posteriormente a registrarse recibirá un correo electrónico en su bandeja de entrada.

14. Luego debe ingresar un password o contraseña que posea mínimo 6 caracteres y

el cual puede contener únicamente letras y números.

15. Como último paso digitamos el texto que se nos muestre en la imagen en el

momento de registrarnos y hacemos clic en el checkbox junto a “I agree to Terms Of Service” para aceptar los términos del servicio, finalmente damos clic en el botón Create My Account. Con lo que la nueva cuenta se habrá creado en nuestro caso el hosting creado es http://msm115ues.net16.net.

16. Recibiremos un correo al email que hayamos registrado con todos los datos

relacionados a la cuenta de hosting que hemos creado. 17. Seguimos los pasos que se nos indiquen en el correo para activar la cuenta. 18. Ahora procederemos a subir nuestros archivos realizados, primero debemos de

cambiarle el nombre a la pagina principal y a todos los link asociados; esto lo


hacemos debido a que el hosting solo reconoce el nombre de la pagina principal como index.html.

19. Para cambiarle el nombre, abrimos la ubicación de nuestro archivo y damos clic derecho sobre nuestro archivo “PaginaPrincipal” y luego cambiar nombre como lo muestra la siguiente figura. El nombre será index

20. Para cambiarle los link a los botones, debemos ubicarnos en dentro del área de

trabajo de BlueGriffon y seleccionar el botón que haga referencia a nuestra pagina con nombre antiguo “PaginaPrincipal”, y debemos actualizarlo a “index”. Seleccionamos el botón, damos clic derecho y luego seleccionamos “Insertar o editar un enlace”:

Damos clic nuevamente en el área “Destino” tal como se explico anteriormente en el siguiente icono:

Ahora seleccionamos la pagina “index” tal como muestra la siguiente imagen:

Es de suma importancia que seleccione la opción “La URL es relativa a la

ubicación de la página”, nunca olvide chequear esta opción:

Luego damos clic en aceptar y probamos nuestros cambios ejecutando nuestro navegador y cambiando entre páginas dando clic en los botones creados.

21. Esto se hace para todos los botones en donde se involucre la página “PaginaPrincipal” y debemos actualizarlo a index.

22. Adicionalemente la configuración del webhost no reconoce la primera línea de código que BlueGriffon incrusta en todas nuestras páginas web. Para corregir este error, se debe abrir cada una de nuestras pagina creadas y editarlas con el NotePad (Bloc de notas) o en la sección “Codigo fuente” de BlueGriffon y sustituir la primera línea de código: <?xml version="1.0" encoding="UTF-8"?> Por la que mostramos a continuación: 

23. Para subir los archivos lo haremos por medio de un servidor ftp. Este servidor ya viene incluido dentro del host gratis en el que nos hemos registrado.

24. Para ello deberemos acceder desde nuestra cuenta a la siguiente pagina, donde se encuentra nuestro panel de control:

Puede ser que nos aparezca aun la opción “Go to CPanel”, en tal caso damos clic en “Refresh Status” para que este se actualice:

25. Buscamos la sección “Files” y damos clic en el siguiente icono:

26. Aparecerá la siguiente pagina, y damos clic en donde esta indicado a

continuación:


27. Nos aparecerá la siguiente pagina (habiendo ingresado nuestro password

establecido):

28. Este es nuestro servidor que esta en la web. Deberemos subir los archivos en la carpeta public_html. Damos clic sobre ella y nos aparecerá la siguiente pantalla:


29. Al dar clic sobre Upload, nos aparecerá la siguiente pantalla

30. En esta deberemos subir los archivos con la opción examinar y seleccionaremos

todas las paginas web. Cuando terminemos damos clic en el cheque verde (

). Al hacer esto nos aparecerá en la pantalla que hemos subido los archivos con éxito. Regresamos a la figura del paso 27, y ahora debemos seleccionar la opción New_Dir, esto nos servirá para poder crear la carpeta de imágenes de nuestro sitio. Al hacer esto aparecerá la siguiente ventana.

31. La creamos y nuevamente damos clic en el cheque verde y repetimos el paso 27

y 28 pero dentro de la carpeta imágenes hasta que subamos todas las imágenes.


32. Ahora regresamos a la carpeta public_html y eliminamos el archivo “default.php” tal como muestra la figura:

33. Para probar la pagina accedemos a su URL, en este caso es

http://msm115ues.net16.net/

34. Se debe de crear un botón en donde se acceda a otro sitio. Para ello en el botón del otro sitio deberá de poner la dirección del compañero en el vínculo del botón.

http://msm115ues.net16.net/

guia 5 bluegriffon 2013

Documents