Contenidos Locales BiblioRedes by Laboratorio de Los Andes

Contenidos Locales Programa de Capacitaci贸n del Programa BiblioRedes

Desarrollo de Sitios Web

Internet y Capacitaci贸n Gratis en tu Biblioteca P煤blica

Elaborado por: Coordinación de Capacitación Programa BiblioRedes Dirección de Bibliotecas, Archivos y Museos www.biblioredes.cl Nº Registro Propiedad Intelectual: xxxxxx Imprenta: xxxxxx Diseño: Designio Febrero 2007 Este material podrá ser reproducido para efectos de capacitación y/o de referencia con el consentimiento del Programa BiblioRedes y no podrá ser comercializado.

Programa BiblioRedes

Tabla de Contenidos Introducción Enfrentando un Proyecto Web Introducción 1. Mitos 2. Realidades 3. Objetivos de un Sitio Web 4. ¿Qué tipos de sitios se pueden crear? 5. Portal BiblioRedes Actividades de aprendizaje

Desarrollando un Proyecto Web de Contenido Local Introducción 1. Etapas de un Proyecto Web 1.1 Metodología de Desarrollo

2. Descripción del Proyecto 3. Definición Conceptual 4. Categorías a Registrar 5. Preguntas y Pautas de Entrevistas 5.1. ¿Para qué hacer una entrevista?

6. Recopilación de Material: Fotos, documentos de texto, video y audio 6.1. Selección de Textos 6.2. Selección de Imágenes

7. Mapa de Navegación 7.1. ¿Qué es un Mapa de Navegación? 7.2. ¿Cómo se arma un Mapa de Navegación? 7.3. Ejemplo de Mapa de Navegación

8. Construcción del Sitio 8.1. Diseño del Sitio 8.2. Ejemplos de Plantillas Disponibles 8.3. Datos Útiles

9. Actualización y Monitoreo Actividades de aprendizaje

Fundamentos Básicos del Diseño Web Introducción 1. Tipografía (fuentes) 1.1. Títulos

2. Teoría del Color 2.1. El Color y su Expansión 2.2. Armonía y Contraste 2.3. Significado del color 2.4. Espaciado y Composición 2.5. Búsqueda de Recursos para Diseñar

Actividades de aprendizaje

Construyendo su Sitio Web Introducción

7 8 8 8 8 9 9 12 13 14 14 14 14

15 15 15 16 16 16 17 17 18 18 18 18 19 19 20 20 20 21 22 22 22 22 23 23 24 24 25 26 26 27 27

1. Acceso al Portal www.biblioredes.cl 1.1. Acceso al Portal 1.2. Para usuarios/as registrados 1.3. Acceso Servicios de Publicación

2. Nosotros en Internet 2.1. Nosotros en Internet 2.2. Acceso Personalizado

3. Redacción en Cadena 3.1. Acceso Personalizado 3.2. ¿Cómo se sube un archivo? 3.3. Tipos de Archivos

4. Comenzando la Construcción de su Sitio Web 4.1. Crear Nuevo Sitio Web 4.2. Formulario para Nuevo Sitio

5. Pasos para Crear una Página Web 5.1. Página Nueva 5.2. Plantillas Prediseñadas 5.3. Contenedores (Placeholders) 5.4. Contenedor de Texto 5.5. Contenedor de Imagen

6. Cómo Insertar una Imagen 6.1. Pasos para Insertar Imagen 6.2. Recomendaciones 6.3. Visualizar la Imagen

7. Guardar y Publicar 7.1. Guarde su Trabajo 7.2. Publicar 7.3. Acceder a su Sitio Web

Modificando su Sitio Web 1. Modificar una Página Web Creada 1.1. Seleccione el sitio 1.2. Ver Menú de Edición

2. Tipos de Modificaciones 2.1. ¿Por qué hacer modificaciones? 2.2. ¿Qué modificaciones puedo hacer?

3. Editar e Hipervincular Texto 3.1. Editar Texto 3.2. Hipervincular Texto con Sitio Externo 3.3. Hipervincular Texto con Vínculo Interno

4. Editar e Hipervincular Imágenes 4.1. Editar Imágenes 4.2. Hipervincular Imagen con un Sitio Externo 4.3. Hipervincular Imagen con un Vínculo Interno

5. ¿Guardar, Salir o Publicar? 5.1. Guardar 5.2. Guardar y Salir 5.3. Publicar

6. Eliminar una Página 7. Cambiar Nombre de Sitio y/o Página

27 27 28 28 29 29 29 29 29 29 33 33 33 33 34 34 35 35 36 36 36 36 37 37 38 38 38 38 39 39 39 39 39 39 40 40 40 40 40 42 42 42 42 42 42 43 43 43 43

Programa BiblioRedes

7.1. Cambiar Nombre 7.2. Cambiar Nombre de Sitio 7.3. Cambiar Nombre de Página

Modificando Imágenes Introducción 1. Microsoft Photo Editor 2. Microsoft Publisher

Cómo Inscribir su Sitio en Motores de Búsqueda Motores de Búsqueda o Spiders 1. Google 2. Yahoo 3. Altavista 4. Todo.cl Actividades de aprendizaje:

Creación de un Libro de Visitas 1. Libro de Visitas 2. Creación de un Libro de Visitas Actividades de aprendizaje:

Uso Básico de Front Page 1. Iniciar la creación del sitio 2. Tablas 3. Componentes Web 4. Cómo insertarlos en la plantilla BiblioRedes Desafío:

Auto evaluación Enfrentando un Proyecto Web Desarrollando un Proyecto Web de Contenido Local Fundamentos Básicos del Diseño Web Construyendo su Sitio Web Modificando su Sitio Web Modificando Imágenes Cómo Inscribir su Sitio en Motores de Búsqueda Creación de un Libro de Visitas Uso Básico de Front Page

43 44 44 45 45 45 48 55 55 55 57 58 59 60 61 61 61 64 65 65 66 67 69 70 71 71 71 72 72 73 73 74 74 75

Programa BiblioRedes Programa Biblioredes

Introducción Si usted tiene en sus manos este manual es porque está interesado (a) en crear un sitio web. ¡Felicitaciones por hacer uso de la tecnología de manera innovadora, ya que, le beneficiará tanto a usted como a su comunidad! Este manual le guiará paso a paso para que usted logre el objetivo final: tener su propio sitio web, alojado en el portal www.biblioredes.cl, disponible para que todo el mundo lo visite. Es importante que usted y la organización a la que pertenece, planifiquen y discutan el propósito del sitio web que quieren crear, así como el público al que quieren llegar. Una vez tomada ciertas decisiones, para las cuales este manual le servirá de guía, usted podrá comenzar esta maravillosa aventura de mostrar su historia y/o cultura local, sus productos y/o servicios, su actividad económica, social, deportiva, turística, etc. Como ve las posibilidades son prácticamente infinitas. Con la ayuda y guía de este manual, y la orientación del capacitador o capacitadora de su biblioteca pública o Laboratorio Regional, usted podrá crear su sitio web con facilidad. Es decir, la tecnología y las herramientas disponibles a través de los servicios del Programa BiblioRedes se ponen a su disposición para lograr esta misión. La creación y construcción de un sitio web no es sólo para algunos; creemos firmemente que esta importante herramienta de comunicación y promoción debe estar al alcance de toda la población. Si usted es alguien que comenzó su aprendizaje tecnológico con nosotros o tiene conocimientos básicos de computación y procesador de texto, las herramientas disponibles en el portal BiblioRedes, que utilizará para construir su sitio web, son las apropiadas para su trabajo, ya que, podrá trabajar en base a plantillas prediseñadas. Eso sí, recuerde que al tener un sitio web, usted está adquiriendo un importante compromiso, por lo que deberá actualizarlo y responder cualquier comunicación que llegue a través de él. De esta manera, los usuarios y usuarias se sentirán motivados a visitar su sitio y éste podría ser visto por cientos y quizás miles de personas en Chile y el mundo.

¡Suerte y adelante con la creación y construcción de su sitio web!

Dirección de Bibliotecas, Archivos y Museos

Enfrentando un Proyecto Web

¿Qué sabré o qué podré hacer al finalizar esta sección? 1. Mitos y Realidades 2. Objetivos de un sitio web 3. Tipos de sitios que se pueden crear 4. Portal BiblioRedes www.biblioredes.cl

Introducción Para publicar una página en Internet debemos seguir algunos pasos, primero una planificación, luego la construcción de las páginas y, más tarde, la promoción y constante actualización de las páginas. En este capítulo vamos a ver cuáles son los pasos previos que debemos realizar para que nuestro esfuerzo y resultados sean lo más óptimos posibles, es decir, vamos a ver cuál es la planificación que hay que hacer antes de ponerse manos a la obra. Para eso, la idea es derribar algunos mitos que existen alrededor de la construcción y publicación de un sitio web.

1. Mitos • Sólo quienes tienen altos conocimientos tecnológicos pueden hacer sitios web. • Un sitio web debe comenzar con un buen diseño. • Un sitio web es útil sólo para quienes quieren vender algo; es decir, ofrecer un producto o servicio. • Para que el sitio web sea visto por otras personas hay que hacer publicidad cara.

2. Realidades • Existen herramientas que no requieren grandes conocimientos tecnológicos para construir un sitio web: un ejemplo son las herramientas del portal www.biblioredes.cl. Acá usted podrá crear su sitio en base a plantillas prediseñadas. • Es recomendable dejar el diseño del sitio para una fase posterior. Un buen proyecto web comienza por una buena planificación o un análisis estratégico. • Los sitios web tienen variados usos, ya que, depende del propósito de su creador o creadora. • Un sitio web es útil para promover productos y/o servicios, pero por sobretodo es una herramienta de comunicación importante, económica y efectiva. • Muchas veces, la mejor publicidad es el boca a boca. No obstante, usted puede hacer otro tipo de publicidad dependiendo del propósito de su sitio y del público al

Programa BiblioRedes Programa Biblioredes

que quiere llegar. Además, BiblioRedes promociona los mejores sitios de contenido local de forma gratuita en el listado Los 10 Mejores.

3. Objetivos de un Sitio Web Una página o un sitio Web puede ser entendida como un Medio de Comunicación orientado a: • • • •

Entregar información Comunicar personas Proveer Servicios Facilitar transacciones

Un sitio web es la herramienta de comunicación, comercialización, interacción y alcance masivo más económica del mundo.

4. ¿Qué tipos de sitios se pueden crear? • Productos Audio-Visuales: Todo aquel material visual y sonoro que se haya construido en el territorio, ya sea en temáticas locales u otras.Tales como; películas, documentales, registros musicales de todo tipo, canciones, relatos históricos o literarios.

Sitio Web de la Biblioteca Municipal “Roberto Espinoza” Nº 292, de la comuna de los Angeles, VIII Región. www.biblioredes.cl/losangeles.cl Si selecciona este ícono, escuchará el Himno de la ciudad de Los Ángeles.

Dirección de Bibliotecas, Archivos y Museos

• Productos Editoriales: publicaciones en áreas como la literatura, la historia, diarios locales, política, arte, etc.

Sitio Web Leyendas de Aconcagua, creada por la biblioteca Pública Nº126 de San Felipe,V Región. www.biblioredes.cl/leyendasaconcagua.cl

• Productos Virtuales: Páginas Web, portales regionales, servicios públicos y privados, etc.

Sitio Web de la Agrupación de Trabajadores del Rock de Antofagasta II Región.. www.biblioredes.cl/atr.cl

Programa BiblioRedes Programa Biblioredes

• Carteleras Culturales: calendarios y/o cronogramas de actividades socio-culturales locales.

Sitio Web de la Biblioteca Pública Nº117 “Victor Domingo Silva”. Ovalle, IV Región. www.biblioredes.cl/btca.ovalle.cl

• Productos No Publicados Ni Editados: aquí se encuentran mayoritariamente trabajos de investigación o del género literario que no han querido o no han podido ser publicados, ya sea, por decisión de sus autores o por otras causas.

Sitio Web de los Vecinos Destacados de Peñalolén. Comuna de Peñalolén, Región Metropolitana. www.biblioredes.cl/vecinosdestacados.cl

• Productos de la economía básica de subsistencia: un elemento innovador, sería incorporar los aspectos culturales de la economía básica de subsistencia, generalmente emprendimientos familiares, como los artesanos de todo tipo, talleres laborales, hasta el pequeño comerciante que es exponente también de los aspectos socio-culturales del comercio diario del menudeo y que son parte importante de la identidad de formas de vida que conviven en las distintas comunidades.

Dirección de Bibliotecas, Archivos y Museos

Sitio Web de los Productores de Miel del Valle Central de la VII Región. www.biblioredes.cl/ciberapicola.cl

• Organizaciones Sociales y Redes Comunitarias: Alguno de los tipos a los que hacemos referencia son las organizaciones sociales y sus actividades, como son los clubes deportivos, las juntas de vecinos, organizaciones culturales, organizaciones políticas, instituciones gubernamentales y ONG’s, medios de comunicación (populares y formales), etc.

Sitio Web de la Agrupación de Familiares y Amigos de Personas Viviendo con el VIH “Caminemos Juntos” XI Región. www.biblioredes.cl/caminemosjuntos.cl

5. Portal BiblioRedes • Es importante familiarizarse con los servicios del portal donde estará alojado su sitio. Esta será la “casa” que lo acogerá.

Programa BiblioRedes Programa Biblioredes

! Actividades de aprendizaje • Haga una revisión de distintos tipos de sitios: por ejemplo, visite sitios de bibliotecas, revise los sitios destacados en el listado Los 10 Mejores. El revisar distintos tipos de sitios, le orientará mejor respecto de lo que su sitio debe y no debe contener. • Utilice el servicio Navegador, Cosecha BiblioRedes, donde podrá acceder a más sitios organizados por región. • Luego de ese recorrido, considere lo siguiente: • ¿Cuál es la razón por la cual quiere hacer un sitio web? • ¿Qué tipo de información debería contener su sitio? • ¿Tiene usted de dónde sacar información para complementar su sitio? • ¿Tiene usted fotos o imágenes que pueda mostrar en su sitio? • ¿Qué tipo de información es útil para la persona que visitará su sitio?

¿Qué temas podemos desarrollar? Temas Potenciales

Pasado: Presente: Futuro:

Historia Patrimonio Tradiciones Antepasados Desarrollo económico Desarrollo artístico-cultural Organizaciones Identidad Cultural Gente Proyectos Sueños Expectativas, etc.

Autoevalúe sus avances en la página 71.

Dirección de Bibliotecas, Archivos y Museos

Desarrollando un Proyecto Web de Contenido Local

¿Qué sabré o qué podré hacer al finalizar esta sección? 1. 2. 3. 4. 5. 6. 7. 8. 9.

Etapas de un proyecto Web Descripción del Proyecto Definición Conceptual Categorías a Registrar Preguntas y pauta de entrevistas Recopilación del material Creación del Mapa de Navegación Construcción del sitio web Actualización y Monitoreo

Introducción Usted ya tiene una mejor idea del alcance que tiene la Internet y la proyección que un sitio web puede llegar a tener. Además, tuvo una breve mirada a los servicios y las herramientas de publicación del portal www.biblioredes.cl, que le permitirán construir su propio sitio web sin muchas complicaciones. Ahora nos abocaremos al desarrollo de su proyecto web, el que finalmente se convertirá en su sitio de contenido local. Todo esto ocurrirá previo a la construcción de su sitio.

1. Etapas de un Proyecto Web 1.1 Metodología de Desarrollo Es el conjunto de actividades que se encadenan y/o fluyen entre sí, cuyo resultado final es la puesta en funcionamiento del sitio Web y su posterior actualización. Le sugerimos las siguientes etapas para desarrollar su proyecto Web: • • • • • • • 14

Descripción del Proyecto Definición Conceptual Determinación y definición de categorías a registrar. Elaboración de preguntas y pauta de la entrevista. Recopilación de fotos y documentos de texto, video y audio. Creación de mapa de navegación Creación de sitio Web.

Programa BiblioRedes Programa Biblioredes

2. Descripción del Proyecto Antes de comenzar, hágase las siguientes preguntas: • • • •

¿Cómo resumiría usted en qué consiste su organización, microempresa o proyecto? ¿Cuáles son la misión y los objetivos de su organización? ¿Para qué y a quién está orientado su proyecto? ¿Por qué quiere hacer este proyecto?

Luego, escriba extensamente la descripción de su proyecto, de manera que a usted y a su organización, en caso de representar a una, le quede claro el qué, para qué y por qué. Ejemplo: Mi proyecto (junta de vecinos) está relacionado con mejorar la calidad de vida de las familias que viven en mi barrio y pretende entregar datos respecto de dónde se puede encontrar información (física y/o virtual) de servicios básicos, como salud, vivienda, servicios sociales, etc.

3. Definición Conceptual Una vez hecha la descripción de su proyecto, destaque los conceptos más relevantes y defínalos. Ésta es la explicación de los conceptos que desea comunicar en su sitio. Para esto le sugerimos considerar lo siguiente: El usuario/a o público objetivo: • ¿A quién le hablamos? (Ciudadanía en general, estudiantes, adultos mayores, niños y niñas, dueñas de casa, etc.) • ¿Cómo hablarles? (De qué forma los abordará; lenguaje formal o informal, tipo de imágenes, por ejemplo). Su organización: • ¿Quién les habla? (Cómo nos presentamos) • ¿De qué deseamos hablarle? (Temas y sub-temas)

4. Categorías a Registrar Cada concepto se convertirá en una categoría a registrar, y por ende, los contenidos relacionados a este concepto también.

Dirección de Bibliotecas, Archivos y Museos

En esta etapa debe determinar cuáles son las categorías más importantes de su proyecto, las que quedarán registradas en su sitio. Es decir, cada categoría será una página distinta. Luego deberá definir los contenidos (información) para cada una de ellas. Ejemplo: “Categorías: salud, bienestar, alimentación, vestido, vivienda, asistencia médica, servicios sociales”. “Y dentro de la categoría Salud: descripción, lugares de ayuda, especialistas, sitios web en los que se puede hacer trámites en línea, etc.”

5. Preguntas y Pautas de Entrevistas Si quiere contar con testimonios, opiniones, datos duros (cifras o estadísticas), o presentar resultados, es importante realizar entrevistas y/o encuestas.

5.1. ¿Para qué hacer una entrevista? • Con el fin de obtener información específica orientada a mejorar la descripción del proyecto, la definición conceptual y a la ampliación de la información que entregará en su sitio, usted puede recurrir a una serie de técnicas de levantamiento de información. Las más importantes son: • Esta actividad, si desea realizarla, le agrega un carácter de peso en la veracidad de la información que entregue. • Es importante que elabore una pauta de preguntas o cuestionario para este fin. Ejemplo: La pauta es la que rige las preguntas y dirige la conversación del entrevistado/a. • Pauta: ¿Qué entiende usted por “servicio de salud de calidad”? • Pregunta: ¿Cree Ud. que el consultorio proporciona “atención de calidad”? ¿Por qué? • Pregunta: ¿Cree Ud. que el personal del consultorio reúne las condiciones para ofrecer un servicio calidad? • Pregunta: ¿Qué cambios le gustaría ver en el consultorio?

6. Recopilación de Material: Fotos, documentos de texto, video y audio Antes de comenzar a trabajar en la construcción del sitio, es importante que recopile la información que utilizará en él y haga una lista con la información que necesita. Es probable que no la utilice toda, pero el tenerla con anterioridad le permitirá tomar mejores decisiones respecto de cómo y con qué informará a su público objetivo.

Programa BiblioRedes Programa Biblioredes

Es importante que tenga fotos, imágenes, logotipos y texto (previamente revisada su redacción y su ortografía); le recomendamos trabajar sus textos en un procesador de texto (Word) que cuente con herramientas de corrección ortográfica. Si va a utilizar audio y/o video también es importante recopilarlo. Le recomendamos guardar todo en una carpeta del PC, en un CD, u otro dispositivo de almacenamiento externo (pen drive, disquette).

6.1. Selección de Textos

Forma y sentido del texto

Tipología de la fuente Claridad en lo Estas

que deseamos comunicar

Tamaño de la

decisiones

fuente

las puede modificar

Ir de lo general a lo particular

Color de la fuente

durante la

y del fondo

construcción de su sitio

Considere estas etapas al redactar sus textos

Destacar los títulos, frases o palabras de mayor importancia Revisar la redacción, coherencia del texto y ortografía

6.2. Selección de Imágenes

Imágenes de la organización.

Imágenes de la Sede Imágenes de actividades Imágenes de los integrantes Logo de la organización.

Verificar calidad de la imágen la resolución y el tamaño.

Revisar galería de imágenes del Portal, por ejemplo: imágenes de objetos, íconos de mail, etc.

Dirección de Bibliotecas, Archivos y Museos

7. Mapa de Navegación En este documento se detallan los principales factores para desarrollar un mapa de navegación. Entendamos por Mapa de Navegación, una estructura en niveles que proporciona un método o procedimiento que nos orienta en la ubicación de los contenidos de nuestro sitio Web.

7.1. ¿Qué es un Mapa de Navegación? Los mapas de navegación proporcionan una representación esquemática de la estructura del sitio, indicando los principales conceptos incluidos en el espacio de la información y las interrelaciones que existen entre ellos. Un mapa es, por ejemplo, una representación completa (o resumida) del sitio web para orientar al usuario durante el recorrido de éste o para facilitarle un acceso directo al lugar que le interese.

7.2. ¿Cómo se arma un Mapa de Navegación? Puntos básicos en la estructura: • Conceptualización del modelo comunicacional y gráfico. • Datos relevantes, como ubicación, horarios, nombre del sitio, foto o logotipo representativos que engloben todo el sitio. • Generación de un listado de contenidos que serán incluidos dentro del sitio y sus características (cantidad de fotos, textos, links). • Creación de un ordenamiento de estos factores de acuerdo a su nivel de importancia. • Impresión del Mapa de Navegación.

7.3. Ejemplo de Mapa de Navegación En el ejemplo que vemos a continuación, tenemos links (vínculos) y sub links que están jerarquizados por importancia y a su vez por orden dentro del sistema de navegación, dados por los conectores. Si hay una flecha doble es que hay entrada y salida, si tiene una sola es que tiene una flecha posee entrada y no salida. Es importante señalar que este paso es fundamental para poder crear un sistema de navegación amigable.

Programa BiblioRedes Programa Biblioredes

Página de inicio

Link principal 1

Sub-Link 1

Sub-Link 2

Link principal 1

Sub-Link 2

Sub-Link 3

Contenido

8. Construcción del Sitio 8.1. Diseño del Sitio Las herramientas de publicación del portal www.biblioredes.cl, le permiten ahorrarse el tener que diseñar su sitio, ya que, pone a sus disposición plantillas prediseñadas. Sin embargo, en esta etapa verá que se hace relevante tener claridad respecto a la distribución de su información; es decir, usted necesitará su mapa de navegación ahora más que nunca. Con el mapa de navegación claro, usted podrá decidir cuál de las plantillas le permitirá presentar y ordenar su información de la mejor manera.

Dirección de Bibliotecas, Archivos y Museos

8.2. Ejemplos de Plantillas Disponibles

8.3. Datos Útiles Durante la etapa de construcción de su sitio web, considere incluir lo siguiente: • • • • •

Información de contacto de la organización (¿Quiénes somos?) Galería de imágenes Vínculos (links) a sitios relacionados al suyo o de interés para su público (opcional). Si está citando o utilizando información de un tercero, no olvide citar la fuente. Una vez publicado su sitio, regístrelo en un motor de búsqueda.

9. Actualización y Monitoreo Al publicar su sitio queda inmediatamente disponible para ser visualizado en todo el mundo en el portal www.biblioredes.cl. Le recomendamos destinar un período de “marcha blanca” que le permita recoger sugerencias de sus usuarios y/o realizar una auto evaluación de su sitio para mejorarlo. Además, es importante que mantenga su sitio actualizado, por lo menos, en estos ámbitos: • Contenidos • Calendarios de actividades • Gráfica

Programa BiblioRedes Programa Biblioredes

! Actividades de aprendizaje Trabaje en las etapas de su proyecto, primero en papel y, luego, en el computador. Lo ideal es construir su sitio en grupo, ya que, siempre es bueno recibir ideas, sugerencias y aportes de varias personas. Recuerde que las etapas son las siguientes y cada una conlleva una tarea que realizar: 1. 2. 3. 4. 5. 6. 7. 8.

Descripción del Proyecto. Definición Conceptual. Categorías a Registrar. Preguntas y pauta de entrevistas. Recopilación del material. Creación del Mapa de Navegación. Construcción del sitio web. Actualización y Monitoreo.

Autoevalúe sus avances en la página 71.

Dirección de Bibliotecas, Archivos y Museos

Fundamentos Básicos del Diseño Web

¿Qué sabré o qué podré hacer al finalizar esta sección? 1. 2. 3. 4.

Tipografía Teoría del Color Espaciado y composición Búsqueda de recursos para diseñar.

Introducción Basta con navegar un poco para darse cuenta que diseñar un sitio web no es fácil, ya que, aunque se posea buen gusto no es suficiente, se necesita estudio y práctica. Para esto, en el siguiente capítulo explicaremos cómo ocupar distintas técnicas.

1. Tipografía (fuentes) En Internet las tipografías tienen sus propias reglas, no así cuando trabajamos en otros formatos. Cuando trabajamos los textos, los podemos separar en dos grupos: Títulos y cuerpos de Texto o mensajes.

1.1. Títulos Para los títulos necesitamos tipografías gruesas y detalladas. Es muy necesario que las tipografías escogidas para los títulos concuerden con el diseño de la página y su color también debe ser escogido con mucho cuidado, ya que, el color de los títulos expresa mucho, por ejemplo:

Programa BiblioRedes Programa Biblioredes

Las tipografías lisas son mucho más legibles en un monitor, porque al ser más rectas, son más factibles de dibujar por el monitor, en cambio las tipografías “con serif1” tienen muchos más detalles y en tamaños más pequeños se hace poco legible en una pantalla.

2. Teoría del Color Es importante tener en cuenta que los colores de los objetos nos transmiten emociones, a pesar de percibirlo a nivel conciente. Por ejemplo, los hospitales carecen de color rojo, porque se asocia con sangre o, por ejemplo, en las oficinas siempre predomina el color blanco que denota orden y pulcritud.

2.1. El Color y su Expansión La mayoría de las páginas en Internet son en fondo claro, esto se debe al carácter expansivo del color claro, no se ve igual un texto en fondo blanco que negro, de forma tal que no encierra los caracteres (y en consecuencia, no los achica).

El texto sobre fondo blanco es más legible y, por lo tanto, el lector/a debe forzar menos la vista. Esto también lo podemos ver en colores claros y oscuros, no es algo que suceda únicamente en blanco y negro.

En este dibujo parece que el de la izquierda tiende a expandirse y a hacerse más grande, todo lo contrario que en el de la derecha. Esto es debido a que el color comprime la figura del medio. Estas técnicas las usaremos cuando queramos que una parte de nuestra web quede cerrada o abierta.

Dirección de Bibliotecas, Archivos y Museos

2.2. Armonía y Contraste • Armonía: Crear una escala de colores que podamos aplicar en nuestra Web que esté compuesta por colores de la misma escala de colores o tonos.

• Contraste: Combinar diferentes colores para crear una escala de tonos como, por ejemplo, claros y oscuros, cálidos y fríos, etc.

Es obvio que en esta imagen cada casilla nos está expresando una idea diferente.

2.3. Significado del color Esta es una de las cosas más relevante a la hora de construir nuestro sitio web. El color no depende únicamente de los gustos, muy por el contrario, por el significado que les asignamos. Éstos pueden expresar emociones, ideas, conceptos, etc. Ahora bien, dependiendo de la cultura en que estemos, éstos pueden tener distintos significados o significados contrapuestos. Esta es una recopilación de diferentes significados extraídos de algunas páginas web.

Blanco: Es un color latente por su capacidad de potenciar los otros colores vecinos. El blanco puede expresar santidad, claridad, activo, puro e inocente. El blanco es el fondo universal de la comunicación gráfica. Negro: Es el símbolo del silencio, del misterio, muerte y, en ocasiones, puede significar impuro y maligno. Confiere nobleza y elegancia, sobre todo cuando es brillante. Gris: Simboliza la indecisión y la ausencia de energía, expresa duda y melancolía. Los colores metálicos dan impresión de frialdad, pero también dan sensación de brillantez, lujo, elegancia, por su asociación con los metales preciosos.

Programa BiblioRedes Programa Biblioredes

Amarillo: Es el color más luminoso, más cálido, ardiente y expansivo. Es el color del sol, de la luz y del oro, y como tal es violento, intenso y agudo. No es recomendable usarlo como color principal de nuestra página, pues tiene demasiada fuerza y tiende a cansar al visitante.

Naranja: Posee fuerza activa, radiante y expansiva. Tiene un carácter acogedor, cálido, estimulante y una cualidad dinámica muy positiva y energética.

Rojo: Significa la vitalidad, es el color de la sangre, de la pasión, de la fuerza bruta y del fuego. Está ligado al principio de la vida, expresa la sensualidad, la virilidad, la energía; es jovial y agresivo. El rojo es el símbolo de la pasión ardiente y desbordada, de la sexualidad y el erotismo.

Azul: Es el símbolo de la profundidad. Inmaterial y frío, suscita una predisposición favorable. La sensación de placidez que provoca el azul es distinta de la calma o reposo terrestres, propios del verde. Expresa armonía, amistad, fidelidad, serenidad, sosiego... y posee la virtud de crear la ilusión óptica de retroceder. Cuanto más se clarifica más pierde atracción y se vuelve indiferente y vacío. Cuanto más se oscurece más atrae hacia el infinito.

Violeta: Es el color de la templanza, de la lucidez y de la reflexión. Es místico, melancólico y podría representar también la introversión. En sus tonos más claros se vuelve un poco triste, en los más oscuros representa grandeza. Verde: Es el color más tranquilo y sedante. Evoca la vegetación, el frescor y la naturaleza. Es el color de la calma indiferente: no transmite alegría, tristeza o pasión. Cuando algo reverdece suscita la esperanza de una vida renovada.

Marrón: Es un color masculino, severo, confortable. Es evocador del ambiente local otoñal y da la impresión de gravedad y equilibrio. Es el color realista, tal vez porque es el color de la tierra que pisamos.

2.4. Espaciado y Composición Es importante tener una diagramación, en el texto, que sea fácil de leer, por esto, es importante darle descanso a la vista. Por Ejemplo:

Dirección de Bibliotecas, Archivos y Museos

Este es un buen ejemplo para que los textos no sean pesados a la vista. También es importante saber que el espaciado entre líneas suele ser de 20% superior al tamaño de la letra, por ejemplo, para un tamaño de letra de 10 puntos pondremos 12 puntos de interlineado.

2.5. Búsqueda de Recursos para Diseñar Es importante buscar la foto exacta que represente nuestras ideas o quizás encontrar la tipografía que mejor identifique el nombre de mi sitio. Aquí hay algunos datos útiles donde podrá encontrar recursos diversos: •

Tipografías (Fuentes) http://www.1001freefonts.com/ http://www.acidfonts.com/ http://www.1001fonts.com/

•

Fotografías http://www.tonystone.com http://creative.gettyimages.com/source/home/home.aspx http://www.chilephoto.cl/

• Íconos http://www.wincustomize.com/index.aspx http://www.iconfactory.com/

! Actividades de aprendizaje • Ahora, y de acuerdo a los fundamentos que acaba de aprender, seleccione los colores, diseños y fotos que mejor se adapten a lo que quiera expresar en su sitio web.

• Revise los sitios web que se sugieren, pueden darle buenas ideas para incorporarlas en su página web. Autoevalúe sus avances en la página 71.

Programa BiblioRedes Programa Biblioredes

Construyendo su Sitio Web

¿Qué sabré o qué podré hacer al finalizar esta sección? 1. 2. 3. 4. 5. 6. 7.

Acceso a portal www.biblioredes.cl Nosotros en Internet Redacción en Cadena Comenzando la construcción de su sitio web Pasos para crear una página web Cómo insertar una imagen Guardar vs. Publicar

Introducción El momento que estaba esperando ha llegado. Ahora podrá comenzar a plasmar en su sitio web las ideas y contenidos que ha generado hasta ahora. Esto será posible con las herramientas de creación y publicación de sitios Web: Nosotros en Internet y Redacción en Cadena, servicios que le permitirán concretar su proyecto.

1. Acceso al Portal www.biblioredes.cl 1.1. Acceso al Portal Para ingresar a las herramientas de publicación del portal BiblioRedes, ingrese a Internet y coloque la URL (dirección Web) del portal: www.biblioredes.cl. Para acceder a estos servicios deberá estar registrado como usuario, si no lo está, diríjase a la opción Regístrate e ingrese los datos que se le piden; si ya lo está, haga clic en la opción Login, ubicado en la barra superior.

Dirección de Bibliotecas, Archivos y Museos

1.2. Para usuarios/as registrados Al hacer clic en la opción Login, deberá ingresar su nombre de Usuario (RUT sin código verificador) y contraseña para acceder a los servicios de publicación y creación de sitios web.

Sin embargo, si está accediendo desde el Escritorio Virtual de BiblioRedes, no será necesario realizar este proceso, ya que, estará automáticamente registrado.

1.3. Acceso Servicios de Publicación Al ingresar al portal, usted tendrá la opción de acceder a las herramientas de publicación a través del menú izquierdo del Home (Página de Inicio) del portal o desde el ícono ubicado en la parte superior de éste. En esta primera parte, nos concentraremos en la herramienta de publicación “Nosotros en Internet”.

Programa BiblioRedes Programa Biblioredes

2. Nosotros en Internet 2.1. Nosotros en Internet Al seleccionar el servicio Nosotros en Internet, se despliega la página de inicio del servicio. Esta página está personalizada con su nombre y le entrega información sobre los MB (mega bytes) disponibles. Cada usuario tiene un total de 15 MB disponibles. Esta es la puerta de entrada a la creación de su sitio.

2.2. Acceso Personalizado Al hacer clic en la opción Ver Contenidos en Edición, se desplegarán las opciones Crear Nuevo Sitio Web o Eliminar Sitio Web.

Podrá, además, visualizar todos los sitios creados por usted.

3. Redacción en Cadena Otro de los servicios disponibles es Redacción en Cadena, a través del cual, usted puede subir a Internet distintos tipos de archivos, reflejando una gran variedad de contenidos y finalmente una vitrina del Chile multicultural. Para acceder al servicio, haga clic en el botón Redacción en Cadena en el menú Comunidad.

3.1. Acceso Personalizado Al ingresar al servicio Redacción en Cadena, se encontrará con una pantalla personalizada y las opciones para publicar su archivo, a los cuales podrá ingresar una vez publicados, para modificar o eliminar. Igualmente podrá conocer la cantidad de espacio de que dispone para la publicación.

3.2. ¿Cómo se sube un archivo? Seleccione la opción Ver menú de Edición. Al desplegarse las nuevas opciones, haga clic en Subir Archivo.

Dirección de Bibliotecas, Archivos y Museos

Aparecerá un formulario donde hay datos importantes que deberá completar antes de proceder con la acción de subir un archivo. Llene los campos con su información y un descriptor de su archivo. Luego, haga clic en el ícono Agregar o Editar Archivo.

Cuando haga clic en el ícono Agregar o Editar Archivo, aparecerá una nueva ventana. Si desea insertar un archivo propio, deberá seleccionar la opción Insertar adjunto local.

Programa BiblioRedes Programa Biblioredes

Las opciones para insertar un archivo son muy similares a las que utiliza para adjuntar un archivo a un correo electrónico. Para hacerlo, primero deberá hace clic en el botón Examinar, para descargarlo del lugar donde esté almacenado.

Se abrirá la ventana Elegir Archivo, similar a otras aplicaciones Microsoft. Luego de elegir el archivo, haga clic en el botón Abrir.

Dirección de Bibliotecas, Archivos y Museos

Una vez adjunto el archivo, deberá asignarle una extensión si éste no la tiene. Si lo desea, puede escribir un breve texto descriptor en el cuadro Desplegar Texto. Luego haga clic en el botón Insertar.

Si se fija en el círculo rojo, el archivo quedó adjuntado. Para guardar este archivo, haga clic en la opción Guardar. Si desea cambiar el archivo que adjuntó, haga clic en el ícono Eliminar y comience nuevamente el proceso.

Además verá la sección Opciones, con la opción Ver Contenidos en Edición al lado izquierdo y al lado derecho, la sección Mis Archivos, con los archivos que usted ha publicado.

Programa BiblioRedes Programa Biblioredes

3.3. Tipos de Archivos Puede subir cualquier tipo de archivo, es decir, Word (procesador de texto), Excel (planilla de cálculo), PowerPoint (presentaciones en diapositivas), Publisher (publicaciones), Access (bases de datos), MP3 (audio), archivos de video, imágenes, sonido, etc. Sin embargo, debe tener conciencia del peso de los archivos que suba, para que no copen el espacio que tiene disponible.

4. Comenzando la Construcción de su Sitio Web 4.1. Crear Nuevo Sitio Web Una vez ingresado en el servicio Nosotros en Internet, encontrará dos paneles: Opciones y Mis Sitios. Haga clic en la opción Crear Nuevo Sitio Web, en panel Opciones, para comenzar a trabajar.

Si la opción Crear Nuevo Sitio Web no está disponible, debe hacer clic en Ver Menú de Edición.

4.2. Formulario para Nuevo Sitio Llene los campos del formulario con la información solicitada.

Dirección de Bibliotecas, Archivos y Museos

• Nombre del Canal: Es el nombre de la carpeta donde queda guardado el proyecto. • Nombre Corto de Acceso: Es el nombre corto del sitio Web que se está creando (ejemplo: www.biblioredes.cl/nombrecorto.cl). Debe tenerse en cuenta que este nombre no debe ir en mayúsculas ni debe colocarse tilde a las palabras. • Región: Es la región dónde se encuentra al momento de crear el sitio Web. • Comuna: Es la comuna dónde se encuentra al momento de crear el sitio Web. • Descriptor: Corresponde al tipo de agrupación o institución a quien pertenece el sitio Web: • Agrupaciones de Amigos • Agrupaciones Folklóricas • Biblioteca • Junta de Vecinos • Organizaciones no Gubernamentales • Otros. Luego, hacer clic en Guardar. Al presionar este botón, el sistema le avisará si el nombre del sitio y/o acceso ya existen, si es así, deberá cambiarlo por otro.

5. Pasos para Crear una Página Web 5.1. Página Nueva Una vez aceptada la información de su sitio, se desplegará la página Sitio en Construcción. Para comenzar, seleccione la opción Nueva Página.

Una vez creada nuestra primera página la guardamos como Inicio, para que reconozca que es la primera página que se va desplegar cuando entren a nuestro sitio.

Programa BiblioRedes Programa Biblioredes

Las páginas siguientes se crean de la misma manera y, automáticamente, se genera el link hacia las otras.

5.2. Plantillas Prediseñadas Al ingresar a Nueva Página pasará a la galería de plantillas; en ella podrá seleccionar la que más le guste por su diseño y/o por su distribución.

5.3. Contenedores (Placeholders) Al seleccionar la plantilla, se abrirá la que ha seleccionado y podrá comenzar a trabajar en ella para la construcción de su página Web.

Dirección de Bibliotecas, Archivos y Museos

Contenedor de Texto Contenedor de Imagen

5.4. Contenedor de Texto Para trabajar con el texto, recuerde utilizar la barra de herramientas, parecida a la de otras aplicaciones Microsoft. Por ejemplo, puede seleccionar y cambiar el tipo y tamaño de la fuente. Además, puede cambiar el fondo y el color del texto.

5.5. Contenedor de Imagen Para insertar una imagen, haga clic en el botón Agregar o Editar imagen. Se desplegará una ventana donde tendrá que seleccionar la fuente (lugar desde dónde está obteniendo la imagen).

6. Cómo Insertar una Imagen 6.1. Pasos para Insertar Imagen Para insertar una imagen propia, guardada en el computador, o en un CD o disquete, haga clic en la opción Insertar Imagen Local.

Programa BiblioRedes Programa Biblioredes

Luego, se desplegará una ventana donde tendrá que hacer clic en el botón Examinar para buscar y seleccionar su imagen. Es recomendable indicar el tipo de archivo de la imagen; lo ideal es subir imágenes en formato JPEG. La opción Vínculo le permitirá vincular la imagen con un sitio web. La opción Texto Alternativo permitirá que aparezca un breve texto cada vez que el puntero del mouse se pose en la imagen. Una vez realizada la acción deberá hacer clic en el botón Insertar.

6.2. Recomendaciones Recuerde que usted tiene 15 MB disponibles tanto para el servicio de creación de sitios web, como para el de almacenamiento de archivos. Cuide que sus fotos estén originalmente guardadas en formatos JPEG o GIF, ya que, estos formatos tienen buena resolución y son más livianos. Si pone fotos muy pesadas en su sitio, la descarga del sitio será muy lento. Si saca fotos con una cámara digital o escanea imágenes, trabaje las imágenes previamente (recortar, aclarar, etc), ya sea en Photo Editor, Publisher (disponibles el los PCs de las bibliotecas y laboratorios) o un programa similar.

6.3.Visualizar la Imagen Para visualizar la imagen antes de guardarla, haga clic en la opción Vista Previa para visualizarlas en el sitio. Luego, no olvide hacer clic en Guardar.

Dirección de Bibliotecas, Archivos y Museos

7. Guardar y Publicar 7.1. Guarde su Trabajo Al finalizar el trabajo en la primera página: • Haga clic en Vista Previa para visualizarla antes de Guardarla. • Luego, seleccione la opción Guardar. En la ventana Grabar Página, tiene dos opciones: • Nombre: Nombre con el que se va a archivar. • Si es la primera página debe llamarse Inicio.

7.2. Publicar Al Guardar su sitio, aparece una serie de nuevas opciones, Nueva Página, Editar, Eliminar, Publicar, etc.

¡Una vez que está listo su sitio, publíquelo para que su trabajo esté disponible en www.biblioredes.cl para todo el mundo!

7.3. Acceder a su Sitio Web Una vez que su página o sitio ha sido publicado, usted puede acceder a él a través del panel Mis Sitios. Desde ahí, usted puede acceder a su sitio para actualizarlo, agregarle páginas y/o editarlo. Solo haga clic en el nombre del sitio; luego seleccione la opción Editar o Nueva Página del Menú de Edición. Autoevalúe sus avances en la página 71.

Programa BiblioRedes Programa Biblioredes

Modificando su Sitio Web

¿Qué sabré o qué podré hacer al finalizar esta sección? 1. 2. 3. 4. 5. 6. 7.

Modificar una página Web creada Tipos de modificaciones que se pueden realizar Editar e Hipervincular Textos Editar e Hipervincular Imágenes ¿Guardar, Salir o Publicar? Eliminar páginas. Cambiar nombre al sitio y/o página.

1. Modificar una Página Web Creada 1.1. Seleccione el sitio Ingrese al servicio Nosotros en Internet y seleccione el sitio que desea modificar. No seleccione la opción Editar, ya que, esta opción es para modificar el nombre corto (la URL) de su sitio.

1.2.Ver Menú de Edición Una vez seleccionada la página, haga clic sobre la opción Ver Menú de Edición. Aparecerá una serie de opciones. Para modificar la página, deberá seleccionar la opción Editar. Si su sitio se compone de varias páginas, deberá seleccionar la página que desea modificar primero, y luego realizar los pasos anteriores.

2. Tipos de Modificaciones 2.1. ¿Por qué hacer modificaciones? Las modificaciones se pueden realizar por distintas razones, por ejemplo: • el sitio está en construcción, • una vez publicado, se dio cuenta que hay elementos que faltan o que quiere cambiar, • algún usuario que visitó su sitio le hizo una sugerencia, • quiere actualizar la información publicada.

Dirección de Bibliotecas, Archivos y Museos

2.2. ¿Qué modificaciones puedo hacer? Usted puede: • • • •

Editar texto e imágenes. Hipervincular texto e imágenes. Eliminar páginas. Cambiar el nombre al sitio y/o páginas.

3. Editar e Hipervincular Texto 3.1. Editar Texto Seleccione el texto que desea modificar, como se hace en la aplicación Word. Puede cambiar el tipo y tamaño de la fuente; puede utilizar las herramientas copiar, cortar, y pegar transformar su texto; como por ejemplo, copiar información de algún documento adicional y pegarla en su página web. También puede cambiar el color del texto y el color del fondo (aunque sólo de la parte del texto que seleccione).

3.2. Hipervincular Texto con Sitio Externo El texto puede vincularse con otro sitio o una página de su mismo sitio. Para esto deberá ingresar al modo de Edición, seleccionar el texto que desea vincular, y hacer clic en el ícono Editar Vínculo. Seleccionamos el texto que queremos hipervincular. Luego, al hacer clic en el ícono Editar Vínculo, se desplegará la ventana donde deberá ingresar la URL del sitio al que quiere vincular el texto. Una vez realizada y guardada la acción, verá que el texto seleccionado cambió de color. Al hacer clic con el mouse sobre el texto, se desplegará el sitio al que lo vinculó. Lo que ingrese en la barra de texto Ayuda, aparecerá cada vez que el mouse se pose sobre el texto que vinculó.

3.3. Hipervincular Texto con Vínculo Interno Usted puede vincular sus páginas entre sí o vincular texto a algún archivo que haya subido al servicio Redacción en Cadena.

Programa BiblioRedes Programa Biblioredes

Primero seleccione el texto que desea vincular, puede ser una palabra, frase o, si el contenedor lo permite, el título de la página. 1. Haga clic en el botón Mis Páginas. 2. Luego, aparecerá el listado de páginas y documentos creados por usted. Seleccione la dirección interna del vínculo y cópiela en la barra de texto Dirección. 3. Copie la dirección en la barra de texto. 4. Es importante que escoja la opción New Unnamed Window en vínculo interno, ya que, esto permitirá que el vínculo se abra como una página adicional. 5. Para terminar, presione el botón OK. 6. Como con todo vínculo, al hacer clic se desplegará la página o documento que al que vinculó el texto. 7. En este ejemplo, se ve como se abre una segunda página, independiente del sitio original. Esto le permite al usuario, trabajar en la página nueva, cerrarla y/o continuar visitando el sitio.

Dirección de Bibliotecas, Archivos y Museos

4. Editar e Hipervincular Imágenes 4.1. Editar Imágenes Los íconos de edición del contenedor de imágenes son: • Agregar o Editar Imagen: que le permite cambiar la imagen actual por otra. • Editar propiedades de imagen: le permite vincular la imagen a un sitio web o agregar texto alternativo (el texto que aparece al posar el mouse en la imagen). • Quitar imagen.

4.2. Hipervincular Imagen con un Sitio Externo • Una imagen también puede ser la “puerta de entrada” a otro sitio u otra página de su mismo sitio. Para esto deberá hipervincularla. • Al hacer clic en el ícono Editar Propiedades de la imagen, se desplegará una ventana donde debe ingresar la URL del sitio. • Una vez realizado el cambio, al pasar el mouse por la imagen podrá visitar el sitio al cual está vinculada.

4.3. Hipervincular Imagen con un Vínculo Interno Una imagen que está publicada en un contenedor de imagen puede ser vinculada con un sitio interno haciendo clic en el ícono Editar Imagen y, luego, en el botón Browse (Buscar). Pero es importante que usted sepa el nombre (o parte de él) para hacer la búsqueda interna. Sin embargo, las imágenes que se han insertado en un contenedor de texto, con propiedades para aceptar imágenes, son las que conllevan un procedimiento distinto, parecido al proceso para vincular texto a un vínculo interno. Seleccione la imagen que quiere hipervincular, haga clic en la función Editar Vínculo. Seleccione la página interna a la quiere vincular la imagen y copie la dirección en la barra de texto Dirección. No olvide seleccionar la opción New Unnamed Window y hacer clic en OK.

5. ¿Guardar, Salir o Publicar? 5.1. Guardar Una vez realizada cualquier modificación en una página (creada anteriormente), ésta se debe Guardar.

Programa BiblioRedes Programa Biblioredes

La opción Guardar, guarda el cambio realizado y permanece en él la función Editar para que pueda seguir haciendo cambios. Si quiere ver sus cambios antes de seguir, puede seleccionar la opción Vista Previa.

5.2. Guardar y Salir En cambio la función Guardar y Salir, guarda los cambios y sale de la función Editar y le amplía las opciones. Si quiere seguir haciendo cambios, deberá seleccionar la función Editar nuevamente. Si solo presiona Salir, perderá los cambios que haya hecho.

5.3. Publicar Todo cambio que usted haga no valdrá de nada si no lo publica. Es importante Publicar si quiere que se visualicen los cambios inmediatamente. Recuerde que la última página modificada y/o publicada siempre será la primera página en abrirse la próxima vez que visite su sitio. Para evitar esto, ante de cerrar el proceso de modificación, seleccione la página de inicio y publíquela.

6. Eliminar una Página Primero debe seleccionar y abrir el sitio en el que va a trabajar. Luego, haga clic en la página del sitio que va a eliminar. Una vez seleccionada la página que quiere eliminar, deberá hacer clic en la opción Eliminar. Al hacer clic en la opción Eliminar, se abrirá una ventana de advertencia. Si está seguro que quiere eliminar la página, sólo haga clic en Aceptar. La página quedará automáticamente eliminada y podrá crear una nueva página si lo desea.

7. Cambiar Nombre de Sitio y/o Página 7.1. Cambiar Nombre Otras modificaciones importantes que usted puede hacer son cambiar el nombre de una página del sitio o del sitio en general. Si desea cambiar el nombre del sitio, es importante que lo piense bien antes de tomar la decisión, ya que, su publicidad o número de visitas se podría ver afectada.

Dirección de Bibliotecas, Archivos y Museos

7.2. Cambiar Nombre del Sitio Para cambiar el nombre, seleccione la opción Cambiar nombre del sitio y complete el formulario que aparecerá. En el formulario aparecerá el nombre que originalmente le dio al sitio y el nombre corto, bórrelo y cámbielo por el nuevo. Deberá hacer clic en el botón Guardar Cambios.

7.3. Cambiar Nombre de Página Si desea cambiar el nombre de una página, primero deberá seleccionar (abrir) la página que desea modificar. Una vez abierta la página podrá hacer clic en la opción Cambiar Nombre de Página y seguir el mismo procedimiento anterior. Recuerde que deberá Guardar y Publicar el cambio.

Programa BiblioRedes Programa Biblioredes

Modificando Imágenes

¿Qué sabré o qué podré hacer al finalizar esta sección? 1. Ajustar tamaño de imágenes con Microsoft Photo Editor. 2. Ajustar tamaño de imágenes con Publisher.

Introducción En el caso de necesitar ajustar el tamaño de su foto a la medida de un contenedor de imagen, puede hacerlo utilizando dos programas disponibles en los computadores de las Bibliotecas Públicas: Microsoft Photo Editor y Publisher. En este ejemplo, el contenedor de imagen que queremos utilizar tiene las siguientes dimensiones: 246 x 151 píxeles.

1. Microsoft Photo Editor Abra la aplicación Microsoft Photo Editor y seleccione la foto con la que desea trabajar. En el ejemplo, la foto seleccionada es de gran tamaño; fíjese que el zoom está en sólo un 25%.

Dirección de Bibliotecas, Archivos y Museos

Luego, seleccione el menú Edición y luego, la opción Seleccionar todo. Verá que la foto tendrá un marco con una línea discontinua como señal de que está seleccionada.

Ahora seleccione el menú Imagen y luego, la opción Cambiar tamaño.

Aparecerá una ventana al centro de la foto. Cambie la unidad de medida a píxeles; esto le facilitará cambiarla a la medida más cercana a la que necesita.

Programa BiblioRedes Programa Biblioredes

Luego, cambie la medida (en este caso, el ancho) y el alto se ajustará automáticamente; asegúrese que la opción Suavizar está seleccionada. Observe que la foto original ocupa toda la pantalla al 100%.

Al cambiar el tamaño, usted puede ver inmediatamente el cambio (observe que el zoom sigue estando al 100% pero la imagen ocupa sólo un espacio de la pantalla). Al guardar la imagen es importante que lo haga en formato JPEG, ya que, así quedará más liviana.

Dirección de Bibliotecas, Archivos y Museos

Inserte la imagen en el contenedor de su sitio.

2. Microsoft Publisher Ingrese a la aplicación Publisher y abra un nuevo documento.

Luego, vaya a Herramientas ∆ Opciones, para dejar el sistema de medición en Puntos (Píxeles).

Programa BiblioRedes Programa Biblioredes

Inserte la imagen que quiere trabajar igual como lo haría en Word, por ejemplo, desde un archivo suyo (en el PC o un dispositivo externo).

Una vez insertada la imagen, nos colocamos en el manejador que sale señalado (ver círculo blanco en la imagen) y apretando la tecla Shift + botón izquierdo del mouse (para que no se desforme) la reducimos al tamaño que deseemos.

Dirección de Bibliotecas, Archivos y Museos

Una vez insertada la imagen, creamos un rectángulo de cualquier tamaño, con el que podamos trabajar, él que nos servirá para modificar la imagen. Es decir, el rectángulo es nuestra plantilla para tener una referencia del espacio para trabajar, después se puede borrar. En este ejemplo vamos a hacer un encabezado de 780 x 100 píxeles. Para esto, creamos el rectángulo y luego vamos a la paleta de medición, que se encuentra en la parte inferior derecha (ver círculo rojo en la imagen), haciendo un doble clic.

Programa BiblioRedes Programa Biblioredes

Seleccionado el rectรกngulo, cambie las medidas, ancho 781 y en el alto 100 (sรณlo de ejemplo).

Coloque la imagen sobre el rectรกngulo. Si quiere, puede verificar las medidas del contenedor de imagen dentro de la plantilla antes de continuar.

Dirección de Bibliotecas, Archivos y Museos

Seleccione la imagen con el mouse y verá una paleta o pequeña ventana llamada Imagen (ver círculo rojo) y seleccione la función Recortar.

Verá que aparecen unos manejadores con los cuales recortará la imagen para que calce con el rectángulo que hizo. Es importante que recorte la imagen desde las esquina, ya que, así podrá ir midiéndola de mejor manera. Además, debe estar consiente que al recortar la imagen, perderá parte de ella. Una vez terminado el recorte, mídale contra el rectángulo.

Si lo desea, puede agregar texto dentro de la imagen (vea el ejemplo):

Programa BiblioRedes Programa Biblioredes

Antes de Guardar la imagen, deberรก Agrupar su trabajo. De esta manera se guardarรก como una sola pieza. Podrรก copiarla y pegarla o insertarla en su sitio con tranquilidad. Para esto, seleccione la imagen, haga clic con el botรณn derecho del mouse y seleccione la opciรณn Agrupar.

Para finalizar, guarde la imagen con el formato que desee: JPG, GIF, BMP, etc.

Dirección de Bibliotecas, Archivos y Museos

Vea el resultado:

Autoevalúe sus avances en la página 71.

Programa BiblioRedes Programa Biblioredes

Cómo Inscribir su Sitio en Motores de Búsqueda

¿Qué sabré o qué podré hacer al finalizar esta sección? 1. 2. 3. 4. 5.

Qué son los Motores de Búsqueda. Inscribir un sitio web en www.google.cl Inscribir un sitio web en www.yahoo.com Inscribir un sitio web en www.altavista.cl Inscribir un sitio web en www.todocl.cl

Motores de Búsqueda o Spiders Los llamados motores de búsqueda son especies de índices de la web y en su a la mayoría corresponden a los grandes buscadores internacionales que comúnmente usamos y conocemos. Los motores de búsqueda recorren los sitios web recopilando información sobre los contenidos de sus páginas. Principalmente, el texto que en ellas aparece. Cuando buscamos una información en los motores, ellos consultan su base de datos con la información que han recogido de las páginas, y nos la presentan clasificados por su relevancia.

1. Google Para acceder a Google tiene que ir a http://www.google.cl/.

1.1. En la parte inferior, haga clic en “Todo acerca de Google”. (Ver círculo rojo).

Dirección de Bibliotecas, Archivos y Museos

1.2. Luego, como muestra la imagen, haga clic en la opción Agregue/ quite su URL.

1.3. Lea con atención la explicación; luego, donde dice URL: coloque la dirección, el nombre corto de su sitio. (Ejemplo: http://www. biblioredes.cl/artesania.cl). En Comentario: Escriba una frase lo más extensa posible describiendo su sitio, donde ocupe todos los temas relacionados a su sitio, para que el buscador tenga la mayor cantidad de posibilidades para encontrarlo. Por ejemplo: “BiblioRedes el sitio de bibliotecas públicas y laboratorios, conectados a todo Chile por Internet, con capacitadores y ayuda para toda las regiones de Chile.” Al finalizar, deberá hacer clic en el botón Añadir URL.

Programa BiblioRedes Programa Biblioredes

2. Yahoo Ingrese a Yahoo: http://www.yahoo.com (en inglés). Si no está registrado como usuario de Yahoo, tendrá que registrarse. Uno de los mismos pasos se lo pedirá.

2.1. En la parte inferior izquierda de la pantalla, haga clic en la opción How to Suggest a Site (cómo sugerir un sitio) (ver flecha roja).

2.2. Deberá hacer clic en la opción Submit your site (Envíe su sitio).

Si está registrado, ingrese su nombre de usuario y contraseña. Si no está registrado, haga clic en el botón Sign in y regístrese.

Dirección de Bibliotecas, Archivos y Museos

2.3. Una vez registrado, agregue la dirección completa de su sitio (vea ejemplo: www.biblioredes.cl/artesaniapilar.cl) y luego, haga clic en el botón Submit Feed (envíe información).

3. Altavista Para acceder a Altavista tiene que ir a http://www.altavista.cl/.

3.1. Luego, haga clic en Enviar un sitio. (Ver flecha roja)

Programa BiblioRedes Programa Biblioredes

3.2. Haga clic en el tercer título: Envío Básico, en el vínculo “Haga clic aquí”.

3.3. Cómo verá, la página que se despliega es la misma del motor de búsqueda de Yahoo, ya que, Altavista y Yahoo trabajan juntos. Siga las mismas indicaciones para el registro de sitios en Yahoo. 4. Todo.cl Vaya a la dirección http://www.todocl.cl

4.1. En la parte inferior de la página de inicio, haga clic en el vínculo Inscribir Sitio (ver flecha roja).

Dirección de Bibliotecas, Archivos y Museos

4.2. Luego complete el formulario y haga clic en el botón Enviar.

! Actividades de aprendizaje • Inscriba su sitio web en alguno o varios de los motores de búsqueda disponibles, eso le permitirá llegar con su información a mucho más público en todo el mundo. Autoevalúe sus avances en la página 71.

Programa BiblioRedes Programa Biblioredes

Creación de un Libro de Visitas

¿Qué sabré o qué podré hacer al finalizar esta sección? • Qué es un libro de visitas. • Crear un libro de visitas.

1. Libro de Visitas Un libro de visitas es una herramienta que nos permite registrar opiniones o comentarios en un sitio web, ya sea del sitio mismo o de su contenido.

2. Creación de un Libro de Visitas Para crear un libro de visitas es bueno tener un e-mail o correo electrónico dispuesto en forma exclusiva para este fin, puede ser en Gmail, Hotmail u otro. Ingrese en la siguiente dirección http://www.melodysoft.com/ y regístrese como usuario/a (en el círculo blanco) llenando el formulario que se despliega después de aceptar las condiciones de servicio.

Dirección de Bibliotecas, Archivos y Museos

En el campo de registro en que se pide el código postal de su comuna, por ejemplo, Los Ángeles, se puede obtener en el sitio web de Correos de Chile www.correos.cl.

Una vez completado y enviado el formulario, se recibirá una confirmación (e-mail) al correo que se registró. Junto con él, llegará un link que servirá para darse de alta.

Al ingresar a esa dirección (link) aparecerá una nueva ventana en la que debemos seleccionar el ícono de Libros de Visitas.

Programa BiblioRedes Programa Biblioredes

Y luego, seleccionar el botón Crear nuevo libro.

Aparecerá un nuevo formulario que debe llenarse con los datos del libro y, luego, una nueva dirección a través de la cual se puede acceder al libro recién creado. Además, le llegará un nuevo mensaje con información acerca de las opciones para modificar o seleccionar diseños de libros.

Dirección de Bibliotecas, Archivos y Museos

La dirección que ahí aparece puede vincularse a una imagen, foto o texto, según las indicaciones en el capítulo Modificando su Sitio Web.

! Actividades de aprendizaje • Agréguele un libro de visitas a su sitio web; de esta manera sus usuarios podrán contactarse con usted, dejarle mensajes, sugerencias, comentarios, etc. Es un buen elemento para promover la interactividad entre los usuarios de su sitio y usted. Autoevalúe sus avances en la página 71.

Programa BiblioRedes Programa Biblioredes

Uso Básico de Front Page

¿Qué sabré o qué podré hacer al finalizar esta sección? 1. 2. 3. 4.

Iniciar la creación de un sitio en plantillas libres Crear y modificar tablas con Front Page Insertar componentes web Aplicar Front Page a las plantillas libres

En el caso que usted prefiera trabajar con las plantillas (templates) libres que se encuentran en Nosotros en Internet, puede trabajar con las herramientas de la plantilla misma o con el programa Front Page, que fue creado para desarrollar sitios web en un lenguaje llamado Html, pero sin necesidad de aprenderlo.

1. Iniciar la creación del sitio Para comenzar, debe seguir los mismos pasos que para construir un sitio en Nosotros en Internet (ver capítulo Construyendo su Sitio Web), pero deberá elegir una plantilla blanca o negra.

Dirección de Bibliotecas, Archivos y Museos

Luego, abra una hoja en blanco en el programa Front Page.

En ella se trabaja de manera muy similar al procesador de texto Word, se puede escribir, cambiar la fuente, el color del texto, insertar tablas, imágenes, etc., utilizando las mismas herramientas. Sin embargo, encontramos algunas otras opciones que describiremos a continuación.

2. Tablas Para insertar una tabla, seleccione el menú Insertar Tabla o haga un clic sobre el ícono de tablas, ahí podrá marcar la cantidad de filas y columnas que necesite.

Programa BiblioRedes Programa Biblioredes

Para cambiar sus características, debe hacer un clic sobre ella con el botón derecho del mouse; se abrirá una ventana en la que puede seleccionar Propiedades de página, Propiedades de tabla o Propiedades de celda, según sea el segmento cuyas características quiere cambiar. Veamos el ejemplo con Propiedades de Tabla: En esta ventana usted puede modificar el diseño de la tabla (alineación, ancho, alto, etc.), los bordes (tamaño y colores) y el fondo (color o colocar una imagen de fondo de la página).

3. Componentes Web

Dirección de Bibliotecas, Archivos y Museos

Al seleccionar la opción Componente Web, ya sea desde el menú Insertar o haciendo clic en el ícono señalado con la flecha roja, aparecerá la siguiente ventana, que nos permitirá agregar algunos elementos a nuestro sitio web, que lo harán más dinámico.

Basta con seleccionar el elemento que queremos agregar, luego, hacer clic en el botón Finalizar, e inmediatamente aparecerá en su hoja. Por ejemplo, puede agregar: • Botón Activable: Un botón que contiene un link o hipervínculo a otra página. • Marquesina: Hace que el texto se desplace horizontalmente por la pantalla. • Administrador de Titulares: Crea un titular que muestra imágenes en una secuencia programada. • Búsqueda en la web: Inserta un formulario de búsqueda en la página. • Hoja de cálculo y gráficos: Puede mostrar una hoja de cálculo, un gráfico o una tabla dinámica. • Contador de visitas: Inserta un contador que cuente y muestre el número de veces que se ha visitado el sitio. • Galería de fotografías: Organiza horizontalmente un grupo de fotos en una página y les agrega un texto descriptivo.

Programa BiblioRedes Programa Biblioredes

4. Cómo insertarlos en la plantilla BiblioRedes Si usted se fija en la parte inferior de su página nueva de Front Page, hay 3 opciones:

• Normal: Es la hoja de trabajo. • Html: Le muestra el código Html de lo que hemos hecho en su hoja de trabajo. • Vista Previa: Le presenta la página, tal como se vería, ya publicada en la web. Para traspasar su trabajo a la plantilla negra o blanca de BiblioRedes debe trabajar en la hoja de trabajo, en vista normal, luego ir a la vista HTML y copiar el código que está ubicado entre la palabra <body> (cuerpo). Vaya a su plantilla en blanco, borre todo lo que esté escrito, seleccione el botón HTML, luego, copie el código Html desde Front Page y vuelva a seleccionar el botón Html, para visualizar lo que ha hecho. Ejemplo: Para insertar una marquesina en una página vaya a Insertar, Componente Web. Se abrirá la siguiente ventana, donde debe establecer el texto que desea desplegar, la dirección en que éste se desplazará, el color en que aparecerá escrito, etc.

Dirección de Bibliotecas, Archivos y Museos

Luego, acepte, cambie el tipo de fuente y vaya a vista HTML. Seleccione el código entre la palabra <body>, cópielo y péguelo en su plantilla.

Y, finalmente, seleccione el botón HTML, así podrá ver lo que ha diseñado.

El mismo procedimiento se ocupa para cualquier elemento que quiera agregar en su página web; solo tiene que trabajar en una hoja de Front Page y, luego, copiar el código Html en su plantilla blanca o negra. No olvide ir grabando su trabajo y, una vez que esté listo, recuerde Publicar. Nota: En el caso de haber insertado una imagen en Front Page, ésta no se verá en la plantilla BiblioRedes. Para que aparezca en su página, bórrela (después de copiarla en la plantilla), y siga el proceso de inserción de imágenes como se explica en el capítulo de construcción del sitio. Desafío: Ahora ya conoce las herramientas básicas para diseñar páginas web, sin embargo, la creatividad, el contenido, la actualización y la difusión dependen de Usted.

Programa BiblioRedes Programa Biblioredes

Auto evaluación A medida que complete cada contenido, es importante que usted vaya monitoreando su propio proceso de avance. De esta manera, usted podrá determinar si necesita más tiempo para trabajar y/o solicitar apoyo en alguno de los contenidos. Revise mediante esta pauta de evaluación cuáles son los pasos que sí ha ido desarrollando para la construcción de su sitio web y cuáles aún no ha completado. Es bueno que antes de empezar una nueva sesión revise los pasos que quedaron pendientes, luego ajuste sus tiempos, determine cómo proseguir y convérselo con su capacitador o capacitadora.

Enfrentando un Proyecto Web Acciones Desarrolladas

Sí

Tengo claro el objetivo general de mi sitio web. Sé qué tipo de sitio quiero crear. Ya sé qué tipo de información debería contener mi sitio. Tengo claro de dónde sacar la información que necesito. Sé que tipo de información es útil para las personas que visitarán mi sitio.

¿Y ahora, cómo sigo? Marque la opción que más le acomode o recomiéndese algo diferente. ® Cumplí con todo y puedo continuar avanzando. ® Debo reunirme con algún compañero, compañera o mi capacitador o capacitadora para aclarar dudas. ® Otro...............................................................................................................................................

Desarrollando un Proyecto Web de Contenido Local Acciones Desarrolladas

Tengo listo el resumen de mi proyecto. Tengo la misión y el objetivo de mi organización. Sé para qué voy a desarrollar mi proyecto web. Sé a quién está orientado mi proyecto. Seleccioné los conceptos relevantes. Definí los conceptos relevantes. Determiné las categorías más relevantes del proyecto. Recopilé opiniones, testimonios, datos duros, encuestas y/o entrevistas. Recopilé el material que necesito: fotos, documentos de texto, audio y/o video. Seleccioné y revisé los textos. Seleccioné y revisé las imágenes. Construí el mapa de navegación.

Dirección de Bibliotecas, Archivos y Museos

Fundamentos Básicos del Diseño Web Acciones Desarrolladas

Definí la(s) fuente(s) que voy a utilizar en mi sitio. Seleccioné el color de fondo de mis páginas. Seleccioné los colores que voy a utilizar en mi sitio.

Construyendo su Sitio Web Acciones Desarrolladas Puedo acceder al Portal BiblioRedes. Estoy registrado/a como usuario/a en el Portal BiblioRedes. Puedo acceder a Nosotros en Internet. Puedo acceder a Redacción en Cadena. Subí a Redacción en Cadena los archivos que necesito. Completé y guardé sin problemas el formulario para “Nuevo Sitio” Comencé la creación de la página de inicio. Seleccioné una plantilla acorde con mis necesidades. Agregué información en los contenedores de texto. Pude insertar y visualizar imágenes en mi página. Guardé mi página. Publiqué mi página. Pude acceder nuevamente a mi página.

Programa BiblioRedes Programa Biblioredes

Modificando su Sitio Web Acciones Desarrolladas

Edité los textos. Hipervinculé, al menos un texto, con un sitio externo. Hipervinculé, al menos un texto, con un vínculo interno (Redacción en Cadena). Pude agregar y eliminar imágenes. Hipervinculé, al menos una imagen, con un sitio externo. Hipervinculé, al menos una imagen, con un vínculo interno. Guardé los cambios que le hice a mi página. Publiqué los cambios que le hice a mi página. Sé cómo eliminar una página. Sé cómo cambiar el nombre del sitio. Sé cómo cambiar el nombre de una página.

Modificando Imágenes Acciones Desarrolladas

Cambié el tamaño de una imagen con Microsoft Photo Editor. Cambié el formato de una imagen a “jpeg” para alivianarla. Modifiqué el tamaño de una imagen con Microsoft Publisher.

Dirección de Bibliotecas, Archivos y Museos

Cómo Inscribir su Sitio en Motores de Búsqueda Acciones Desarrolladas

Sé lo que son los Motores de Búsqueda o Spiders. Registré mi sitio en Google. Registré mi sitio en Yahoo. Registré mi sitio en Altavista. Registré mi sitio en Todocl.

Creación de un Libro de Visitas Acciones Desarrolladas

Aprendí qué es un libro de visitas. Creé un nuevo correo electrónico para uso exclusivo del libro de visitas. Me registré en www.melodysoft.com Recibí el link para darme de alta. Vinculé el libro de visitas a un texto o imagen de mi sitio web.

Programa BiblioRedes Programa Biblioredes

Uso Básico de Front Page Acciones Desarrolladas

Agregué o creé una página en una plantilla libre. Abrí una hoja en el programa Front Page. Inserté una tabla. Modifiqué las propiedades de la tabla. Identifico, al menos 4 componentes web. Inserté un componente web. Visualicé el código HTML de lo que diseñé en mi hoja de Front Page. Copié el código HTML en la plantilla libre. Visualicé, en mi plantilla libre, lo diseñado en Front Page.