manual inicial habitat

Ensistemas Soluciones Empresariales Soluciones en Gestión Empresarial Manual de Capacitación

1 | P á g i n a

PROYECTO SITIO WEB HABITAT

MANUAL DE CAPACITACION

AREA DE SOLUCIONES EN GESTION EMPRESARIAL

ENSISTEMAS S.A.

BOGOTA, ENERO DE 2009


2 | P á g i n a

CONTENIDO

INTRODUCCION ................................................................................................................................... 4

INFORMACION DE VIDEOS .................................................................................................................. 5

• 01‐CrearSitioWEB.avi .............................................................................................................. 5

• 02‐CrearPagina.avi .................................................................................................................. 5

• 03‐FormatosDeFuente.avi ....................................................................................................... 6

• 04‐CrearOtrasPaginas.avi ........................................................................................................ 6

• 05‐PublicarImagenes.avi ......................................................................................................... 6

• 06‐PropiedadesDePagina.avi: ................................................................................................. 6

• 07‐Hipervinculos.avi: ............................................................................................................... 7

• 08‐CrearBotonesDinamicos.avi: .............................................................................................. 7

• 09‐CrearEncabezados.avi: ....................................................................................................... 7

• 10‐AreaEditabledelEncabezado.avi: ........................................................................................ 7

• 11‐EstablecerEncabezadoSobrePagina.avi: ............................................................................ 7

• 12‐EditarBarras.avi: ................................................................................................................. 8

• 13‐AdicionarFotos.avi: ............................................................................................................ 8

• 14‐CrearFormularios.avi: ......................................................................................................... 8

PARTES DEL WEB ................................................................................................................................. 9

COMO EMPEZAR A EDITAR EL SITIO WEB DESDE FRONT PAGE …………………………………………………….10

COMO HACER O EDITAR EL MENU DESPLEGLABLE EN DREAMWEAVER .......................................... 10

COMO EDITAR EL CONTADOR DE VISITAS DEL SITIO WEB ................................................................ 18

COMO EDITAR UN FORMULARIO DEL SITIO WEB ............................................................................. 20

COMO REALIZAR LA GALERIA DE FOTOS CON LA GALERIA GRATUITA AUTOVIEWER ...................... 21


3 | P á g i n a

COMO REALIZAR UNA VENTANA POP‐UP PARA EL CASO DE PROYECTOS ....................................... 24

COMO EDITAR EL MAPA QUE MUESTRA LAS OFICINAS DE HABITAT EN COLOMBIA ....................... 26

COMO MODIFICAR LOS BOTONES EN FLASH…………………………………………………………………………………29


4 | P á g i n a

INTRODUCCION

La tecnología ha abarcado varios campos de nuestra organización. En ese orden de ideas, las páginas en internet se han convertido en una herramienta estratégica de trabaja para la gran mayoría de las organizaciones con el objetivo de ampliar los límites de mercado, facilitar el acceso de los clientes a servicios y reducir costos de mercadeo almacenando información en sitios de virtuales conocidos con el nombre de “Hosting de Dominios”.

Aprovechando todos los beneficios que provee la tecnología, se ha actualizado la página de la organización Habitat para brindar un diseño más liviano, agradable y confiable con cada una de las personas que accedan al sitio en internet.

Todas éstas bondades, acompañadas de un buen plan de promoción inicial de la página (Por ejemplo a través de tarjetas o correos electrónicos masivos) puede llevar a que la página sea uno de los sitios más visitados y sea mejorado con la visión no solo de la organización a nivel interno, sino también con los datos y la información de los usuarios que se encuentran visitando diariamente nuestro portal.


5 | P á g i n a

INFORMACION DE VIDEOS

Para el proceso de capacitación y aprovechando las bondades de la tecnología, se han adicionado varios videos con el fin de mostrar de forma gráfica algunas de las características para que un usuario que no posea NINGUN conocimiento en la herramienta pueda manipular el sitio de publicación, e incluso, pueda llegar a generar un nuevo sitio en internet si así lo considera necesario, partiendo de los conceptos básicos que posee la aplicación.

A continuación se establecerá el glosario de productos con el fin de explicar la funcionalidad de cada uno de los videos.

• 01CrearSitioWEB.avi: Como primer medida, independiente que un sitio en Internet se encuentre creado o no, siempre hay que crear una carpeta en nuestro computador con dos objetivos: el primero para tener un respaldo de la información que estamos manipulando en nuestro sitio en Internet y segundo para poder realizar cambios de forma rápida sin que esto pueda afectar lo que tenemos en nuestro sitio a menos que nos encontremos seguros de la información que vamos a colocar. Vale la aclaración: No es obligatorio, pero sin duda es una gran práctica que al usuario le puede salvar la vida en caso que existan problemas de funcionamiento sobre el mismo.

• 02CrearPagina.avi: La información no puede quedar en un sitio de Internet. En realidad, toda la información siempre queda en página de Internet las cuales quedan almacenadas en un sitio de Internet (O varios sitios en Internet), el procedimiento es muy sencillo y éste es uno de los procedimientos para poder generarlo. En otros videos se


6 | P á g i n a

puede visualizar otras formas de crear páginas de Internet acompañados con otros temas.

• 03FormatosDeFuente.avi: Es importante crear páginas en internet con el objetivo de tener la información completa de la organización de la información. La variedad es un elemento que se encuentra a la orden del día y parte de la variedad es conocer la forma en la cual nosotros podemos modificar la fuente, estilo, tamaño, color y efectos que puede poseer la fuente de escritura de la página de Internet. Si la persona maneja Word, muy posiblemente va a poder manejar estas opciones si ningún tipo de inconveniente. En caso que no conozca la forma para modificar la fuente, el video le dará una guía de cómo realizarlo.

• 04CrearOtrasPaginas.avi: Los sitios en Internet están acompañados no solo de una página sino por muchas páginas. Junto con el primer video, aquí se muestran otras formas en las cuales, con un par de ejemplos sencillos podemos visualizar la información de la creación de nuevas páginas en Internet.

• 05PublicarImagenes.avi: Las imágenes acompañan, adornan y dan vida a nuestras páginas de Internet. Aquí mostramos cómo ingresar imágenes desde la galería de imágenes y adicional, se visualiza cómo se puede insertar una imagen que se encuentra almacenada en el computador.

• 06PropiedadesDePagina.avi: Las propiedades de página ayudan a definir el bosquejo que puede tener un documento en Internet tales como fondo, tipos de fuente que se van a manejar, palabras claves de búsqueda para los localizadores de Internet entre otros. Aquí mostramos algunos de los cambios y cómo estos pueden afectar la página.


7 | P á g i n a

• 07Hipervinculos.avi: Los hipervínculos ayudan a las páginas de Internet a comunicarse entre sí. Son de gran ayuda en el momento que un usuario desea llegar a un sitio de forma rápida y eficiente. Los hipervínculos nacieron casi al tiempo que el http y se constituyen en el elemento diferenciador entre una página sencilla y fácil de acceder o una página compleja y dispendiosa de conocer. Aquí se mostrarán las formas en las cuales se pueden generar vínculos a otras páginas ya sea desde una imagen o desde un texto.

• 08CrearBotonesDinamicos.avi: Una forma de hipervínculo con características novedosas son los botones dinámicos. Estos visualizarán el botón con diferentes formas según como se encuentre el cursor del mismo.

• 09CrearEncabezados.avi: Si se desea optimizar algunos elementos de la página de información, normalmente esto se diseñará o empezará a partir de la página de encabezado, página de pie o de la barra lateral que se encargará de mostrar en todas las páginas que lo indiquemos la información de Internet que establezcamos por defecto. Aquí veremos cómo crearlo adicionando una gran utilidad que se llama la barra de exploración de páginas de Internet.

• 10AreaEditabledelEncabezado.avi: Para poder establecer los elementos que comentábamos en el documento anterior, es fundamentan, después de guardar establecer una hoja que posea una información editable y esto será lo que se visualizará en la hoja destino.

• 11EstablecerEncabezadoSobrePagina.avi: Aquí se indicará como podemos adicionarle un encabezado de página a nuestra página en Internet sin que ello modifique o afecte el contenido de la presentación principal.


8 | P á g i n a

• 12EditarBarras.avi: Y si conocer la forma para ingresar las barras en nuestras páginas también debemos conocer la forma en la cual nosotros podemos movilizarnos entre las diferentes vista de nuestro sitio en Internet y modificar las barras de manejo para ajustarlas a la necesidad que se llegue a presentar.

• 13AdicionarFotos.avi: Podemos agregar imágenes en nuestra página de Internet con el fin de hacerla un poco llamativa, pero poseemos de una herramienta de galería de imágenes que nos puede ayudar a mejorar el aspecto de nuestro sitio en Internet en forma significativa.

• 14CrearFormularios.avi: Si queremos que nuestros usuarios o clientes nos envíen información de algún comentario, se inscriban a través de nuestro sitio, o sencillamente contesten una serie de preguntas, podemos crear una página de Internet en la cual se recolecte toda la información y ésta se almacene en un archivo de texto, en otro documento o en una base de datos.

9 | P á g i n a

PARTES DEL WEB

Presentación del inicio, puede ser una animación o una imagen estática.

Menú Desplegable

Contador de Visitas

Logo Registro Donaciones

Botones Flash Aliados

Idioma

Menú Principal

Hipervínculos Publicaciones

Dirección y Enlace a Facebook

Consulta de correo y Mapa del sitio

Oficinas y Proyectos

10 | P á g i n a

COMO EMPEZAR A EDITAR EL SITIO WEB DESDE FRONT PAGE 1. Abrir el programa de edición del sitio Web, en este caso, abrir Front Page, hacer clic en Archivo ‐ Abrir sitio y buscar la ubicación de nuestro sitio web,

hay que tener en cuenta que para editar la pagina de español se abre el sitio general y para editar la pagina en ingles se abre otro sitio que está dentro del general, esta carpeta se llama “english”.

11 | P á g i n a

2. Los archivos están nombrados de manera que reflejan el contenido. Por ejemplo contactenos.htm tiene el formulario de contáctenos, quehacemos.htm tiene la información sobre la labor de Hábitat para la Humanidad Colombia, etc. El archivo index.htm es el inicio de la pagina. Existe un index en la página de español y un index en la de ingles.

A continuación detallaremos la estructura del sitio web con el fin de tener claro el contenido del sitio y su organización, este mapa es también una ruta al momento de editar la información publicada en el sitio web.

Esta ruta se encuentra también en el sitio web como una guía de navegación para el visitante: http://www.hphcolombia.org/mapa_sitio.htm

InicioAcerca de Hábitat Historia

Mision y VisionQue hacemosBeneficiarios

Únete a Hábitat VoluntariadoComo participarPerfil del voluntarioInscripción

Programas Soluciones HabitacionalesServicios FinancierosMovilización ComunitariaDefensa de la Causa

Donde Construimos OficinasEje CafeteroAntioquiaValle del CaucaCaucaCosta Atlántica

Contáctenos

Estructura Web Habitat

12 | P á g i n a

Donaciones beneficios

donaciones en efectivo

registrarse

Aliados

Publicaciones Descarga documentos HPH

Testimonios

Fotografias

Videos

Noticias

Correo

Proyectos ProyectosConstruccion

PROYECTO LA COLOMBIANITAPROYECTO MONTE–HERMÓN, LA UNIÓN –ANTIOQUIA

PROYECTO CALOTO, CAUCA

URBANIZACIÓN ALTOS DE SAN REMO, SINCELEJO

URBANIZACIÓN VILLAQUELA

PROYECTO CONVENIO CON ALCALDÍA DE GÉNOVA

MANANTIAL DE VIDA

PROYECTO MANOS TRABAJANDO UNIDAS

Microcrédito

PROGRAMA DE MEJORAMIENTO DE VIVIENDA CON LA ASOCIACIÓN DE MUJERES

URBANIZACIÓN LAS REINAS, MUNICIPO DE BUENAVENTURA

PROYECTO BARRIO SIMÓN BOLÍVAR, CARTAGENA

Capacitación

PROYECTO PILOTO VIVIENDA SALUDABLE

APOYO PSICOSOCIAL DE RECUPERACIÓN CON NIÑOS Y NIÑAS EN SITUACIÓN DE DESPLAZAMIENTO FORZADOALFABETIZACIÓN FINANCIERA, INVESTIGACIÓN Y DISEÑO DE NUEVOS PRODUCTOS DE MICROFINANZAS PARA VIVIENDA

13 | P á g i n a

En ingles…

Home index.htmAbout Habitat History history.htm

Mission and vission mission.htmWho we are? who_we_are.htmBeneficiaries beneficiaries.htm

Volunteer Program Volunteer Program volunteers.htmWhy take part take_part.htmVolunteer's Profile volunteer_profile.htmInscription inscription.htm

Programs Housing Solutions housing_solutions.htmFinancial Services financial_services.htmCommunity Mobilization movilization.htmAdvocacy advocacy.htm

Where We Build Our Offices offices.htmNational Office national_office.htmEje Cafetero eje_cafetero.htmAntioquia antioquia.htmValle del Cauca valle.htmCauca cauca.htmAtlantic Coast atlantic_coast.htm

Contact Us contact_us.htm

14 | P á g i n a

ProyectsDonations Benefits donations.htm

Cash Donations cash_donations.htmGratitude to our donors gratitude_donors.htmRegistration donations_register.htm

Partnerships

Publications Download HPH Articles publications.htmTestimonies publications.htmPhoto gallery publications.htmVideo gallery publications.htmHPH news publications.htm

Mail

Teniendo claro el contenido del sitio web, cada vez que se necesite actualizar una pagina se hace clic en FrontPage sobre el archivo a modificar.

En general el sitio web esta compuesto por tablas con texto, imágenes, animaciones en flash e hipervínculos que son fácilmente modificables en la vista de diseño:

15 | P á g i n a

Vista de Código

Vista de Diseño

16 | P á g i n a

COMO HACER O EDITAR EL MENU DESPLEGLABLE EN DREAMWEAVER 1. Sobre la ventana “etiqueta” situada al lado derecho del programa se pueden añadir comportamientos a los objetos de la página. En el caso de

Habitat el menu despleglable esta dado sobre una pestaña que tiene dos comportamientos, el de intercambiar imagen (para que la imagen quede verde) y el de mostrar el menu emergente.

17 | P á g i n a

2. Este menu desplegable se puede editar con el programa Dreamweaver haciendo dobleclic sobre mostrar menu emergente, alli con los botones “+” y “‐“ se pueden añadir o quitar elementos del menú, también se pueden editar otras cosas como el aspecto, la posición, el espaciado entre las celdas, los bordes, el color de relleno y de borde, el tipo y tamaño de letra, entre otras cosas.

18 | P á g i n a

COMO EDITAR EL CONTADOR DE VISITAS DEL SITIO WEB

19 | P á g i n a

Al hacer doble clic sobre el área del contador de visitas, nos aparece una ventana para establecer las propiedades del contador, la imagen que se estableció para el web esta en:

images/contador.gif

Se puede establecer también el número fijo de dígitos para el contador.

20 | P á g i n a

COMO EDITAR UN FORMULARIO DEL SITIO WEB El sitio web de hábitat cuenta con tres formularios: Contáctenos, Inscripción de voluntarios y Registro en donaciones ( http://www.hphcolombia.org/contactenos.htm, http://www.hphcolombia.org/inscripcion.htm, http://www.hphcolombia.org/donaciones_registrarse.htm )

Cada uno de los formularios puede ser editado en FrontPage, haciendo clic derecho sobre el formulario y seleccionando las Propiedades de formulario. Allí se pone la dirección del destinatario de correo electrónico y en opciones se puede configurar la línea de asunto, la pagina de confirmación y los campos que se van a guardar.

21 | P á g i n a

COMO REALIZAR LA GALERIA DE FOTOS CON LA GALERIA GRATUITA AUTOVIEWER

22 | P á g i n a

Los archivos y carpetas sombreados sobre la imagen son los que manejan la galería de fotos Autoviewer que se puede conseguir gratuita en Internet.

El archivo gallery.xml tiene los códigos que deben editarse para dar la ubicación de las imágenes y para poner los textos que muestra cada imagen.

23 | P á g i n a

En el caso de esta imagen el código que llama la imagen es

<image>

<url>images/colombianita004.jpg</url> ESTA ES LA RUTA Y EL NOMBRE DE LA IMAGEN

<caption>Listos para la labor.</caption> AQUÍ VA EL TEXTO

<width>1024</width> AQUÍ VA EL TAMAÑO DEL LA IMAGEN

<height>768</height>

</image>

Para realizar una nueva galería, creo una nueva carpeta y pego los archivos mencionados anteriormente. Copio las nuevas imágenes en una carpeta que se llame “images” y edito el archivo gallery.xml

24 | P á g i n a

COMO REALIZAR UNA VENTANA POPUP PARA EL CASO DE PROYECTOS En el Sitio Web, existe una página encargada de la descripción de los proyectos, este índice es un flipmenu que clasifica en tres categorías cada proyecto: Construcción, Microcrédito y Capacitación. Se debe tener cuidado al editar estos menús porque están dentro de un lenguaje javascript que si es modificado puede no mostrar el contenido correctamente. Al hacer clic sobre cada uno de los proyectos sale una ventana con un tamaño determinado, sin posibilidades de navegación, esta ventana es una ficha, con la descripción del proyecto.

25 | P á g i n a

Esta ficha se obtiene con el siguiente código sobre el vínculo:

<a href="#1" class="Estilo31" onClick="MM_openBrWindow('proyecto_sanandres.htm','cert1','width=515,height=550')">

Y si quisiéramos que tuviera barras para desplazarse horizontal o verticalmente le ponemos al código scrollbars=yes:

<a href="#1" class="Estilo31" onClick="MM_openBrWindow('proyecto_sanandres.htm','cert1','width=515,height=550, scrollbars=yes')">

En este código esta llamando la función MM_openBrWindow , por esta razón hay que verificar que al inicio del código de la pagina se encuentre la función :

}

function MM_openBrWindow(theURL,winName,features) { //v2.0

window.open(theURL,winName,features);

}

26 | P á g i n a

COMO EDITAR EL MAPA QUE MUESTRA LAS OFICINAS DE HABITAT EN COLOMBIA

El mapa que muestra las oficinas de Hábitat fue hecho sobre una plantilla creada en Fireworks, los archivos editados en este programa tienen la extensión *.png, y son entregados en un cd que contiene el sitio web y el material utilizado para su desarrollo.

El archivo se encuentra en una carpeta ubicada en esta ruta: Habitat\Material\png\mapacolombia.png

Este archivo tiene unas divisiones determinadas para cada sitio donde se encuentra una oficina de Hábitat, una vez hechos los cambios se debe exportar como HTML e imágenes:

27 | P á g i n a

Cuando se exporte el mapa hay que tener en cuenta el incluir las areas sin divisiones y colocar las imágenes en una subcarpeta que se establece al darle Examinar…

En el programa Dreamweaber se edita la página “oficinas.htm” y se inserta el objeto de imagen así: Insertar, Objetos de imagen, HTML de Fireworks.

28 | P á g i n a

Una vez insertado el contenido de Fireworks, a cada división del mapa se le ponen dos comportamientos:

1. Intercambiar imagen esta por esta

2. Mostrar menú emergente

Añadir Comportamientos

29 | P á g i n a

COMO MODIFICAR LOS BOTONES EN FLASH

En el material entregado en la carpeta Material\Flash hay un archivo que se llama botones_aliados.fla este archivo contiene la película editable que se reproduce en el inicio del sitio Web. Estos botones tienen un clip principal sobre el que se pone cada botón y una acción que podemos ver en la pestaña de acciones:

Pestaña Acciones Pestaña Acciones

Clip Principal

30 | P á g i n a

Al hacer dobleclic sobre el Clip Principal nos muestra los botones donde están las fotos (los logos) y los fondos, como vemos cada botón tiene en la pestaña de acciones una acción para ir a una URL que es el sitio Web del Aliado, para modificar se deben reemplazar la imagen y en el código la dirección de la página del aliado. Luego se exporta la película como Pelicula Flash (*.swf) y se guarda en la carpeta del sitio web llamada “Clips”.

manual inicial habitat

Documents