Aprendiendo en Internet

Programa Compartel de Conectividad en Banda Ancha para Instituciones Pblicas

143

Diseo y Desarrollo de Pginas Web

Ya se ha realizado un recorrido por algunos de los servicios que ofrece Internet como fuente de informacin y aprendizaje, as como las posibilidades de comunicacin e interaccin que proporciona. Ahora, veremos cmo podemos organizar informacin para ser publicada en una pgina web. Al nalizar el captulo se habr:

Objetivos de Unidad
Valorado la importancia de planear y organizar previamente una pgina Web.

Identicado los pasos y planeacin de la construccin de una pgina web.

Diseado una pgina Web teniendo en cuenta todos sus elementos.

Las pginas web son excelentes medios de distribucin virtuales. Para su desarrollo es clave tener presente lo trabajado en la unidad 3 y 4, pues proporcionan los elementos pedaggicos y los criterios de bsqueda que permiten organizar una pgina web correctamente. Adems, es importante tener en cuenta los aspectos tcnicos bsicos de la constitucin de una pgina web trabajados en las Guas 1 y 2 de la Cartilla de iniciacin.

Programa Compartel de Conectividad en Banda Ancha para Instituciones Pblicas

145

Diseo y Desarrollo de Pginas Web

PARA APRENDER

En esta unidad se trabajar en torno a los siguientes conceptos:

Pgina web Documento electrnico de informacin, codificado para la red, que contiene vnculos a otras pginas y es accesible desde un navegador. Editores de HTML Programas que permiten el montaje de pginas sin que el usuario conozca el lenguaje HTML pues funcionan como procesadores de texto.

Diseo de pginas web Labor de organizacin, planeacin, diagramacin y montaje en la red de una pgina web. Lenguaje HTML Cdigos de etiquetas que permite configurar y montar una pgina web en a red.

CONCEPTOS GENERALES
Internet, adems de permitir la recepcin de informacin, acta como un medio de publicacin y difusin; por lo tanto, funciona como una plataforma en la que los usuarios pueden construir, producir y publicar contenidos propios (ideas, pensamientos y productos) que generen algn impacto en la poblacin a la vez que permitan compartir proyectos de vida. Esto resulta de gran importancia al constituirse como una herramienta que pretende facilitar y promover el aprendizaje. Ya se ha visto cmo los blogs son un medio para publicar informacin; las pginas Web tienen entre sus propsitos posibilitar la comunicacin entre personas al tiempo que les permite participar y entretenerse, y ofrece mayor nmero de opciones de publicacin y organizacin, por lo que es una manera ms completa de producir para la red.

146

Programa Compartel de Conectividad en Banda Ancha para Instituciones Pblicas

Diseo y Desarrollo de Pginas Web

Suele pensarse que, para disear una pgina web, lo nico que se necesitan son herramientas tcnicas. Pero, lo que se pasa por alto, es que de nada sirven los conocimientos de diseo web si no se cuenta con criterios para planear, organizar y proyectar la pgina web. Visite http://www.teacherxpress.com/. Este sitio pretende ser una herramienta de apoyo para docentes. Es evidente que, si bien la pgina es resultado de conocimiento tcnico sobre cmo disear una pgina y que, adems, cuenta con gran cantidad de informacin, la manera en que esta informacin est dispuesta resulta muy confusa por el nmero de vnculos y el tamao del texto. No basta con manejar el lenguaje de diseo y con tener la informacin, es necesario organizar todo esto de manera ecaz. De esta suerte, el enfoque estar, aqu, en el procedimiento para planear una pgina web y no en los aspectos tcnicos de diseo. Con este n, se revisarn los elementos bsicos a tener en cuenta en torno a las pginas web.

- QU ES UNA PGINA WEB?

Una Pgina Web es una fuente de informacin adaptada para la World Wide Web y accesible mediante un navegador de Internet. Las pginas Web se diferencian de los blogs y los foros pues son documentos electrnicos codicados que contienen enlaces a otros documentos. Una pgina Web contiene texto que se combina con imgenes para hacer que el documento sea dinmico; adems, los vnculos que presenta permiten que puedan ejecutarse diferentes acciones, una tras otra, a travs de la seleccin de texto remarcado o de las imgenes, accin que puede conducir a otra seccin del documento, abrir otra pgina Web, iniciar un mensaje de correo electrnico o transportar a otro sitio Web totalmente distinto.
Programa Compartel de Conectividad en Banda Ancha para Instituciones Pblicas

147

Diseo y Desarrollo de Pginas Web

- CUL ES LA UTILIDAD DE UNA PGINA WEB?

La utilidad de las pginas web en procesos de comunicacin se evidencia en la oportunidad que proporcionan de presentar informacin a muchas personas en cualquier lugar del mundo, haciendo de stas un espacio de consulta y entretenimiento. La posibilidad de proyectarse mediante un sitio Web resulta tentadora para las entidades tanto como para los individuos. Para las instituciones ofrece la oportunidad de promocionar su marca, productos, servicios y crea la posibilidad de incrementar sus negocios y vincular clientes potenciales que incluso podrn comprar de forma virtual. Para las personas el hecho de ser conocidos en la red, que puedan dar a conocer su imagen, proyectos, ideales y que otras personas se puedan vincular y relacionar con ellos resulta muy productivo. No es slo la posibilidad de conocer personas, sino de compartir proyectos de vida que puedan redundar en soluciones de impacto comunitario y social. Una Institucin Educativa puede apropiarse de este lugar virtual para otorgar acceso pblico a sus proyectos, acciones, historia, protagonistas, y su gestin en general. Una pgina del establecimiento educativo abre las puertas para que todos los miembros de su comunidad, as como los usuarios externos, puedan enterarse de todos los procesos acadmicos, pedaggicos y convivenciales que han desarrollado.

TALLER No. 24: Utilidad de los recursos tecnolgicos

Objetivo: Reexionar sobre la utilidad y caractersticas de una pgina de una institucin educativa. Renase con sus compaeros, respondan y debatan las siguientes preguntas: 1. Cmo podra su institucin educativa aprovechar los recursos tecnolgicos ofrecidos en Internet como apoyo a la gestin administrativa y acadmica? 2. Sera importante y productivo para su institucin publicar un sitio en Internet? Por qu?

148

Programa Compartel de Conectividad en Banda Ancha para Instituciones Pblicas

Diseo y Desarrollo de Pginas Web

3. Qu informacin de su institucin le gustara que apareciera en la red? 4. Qu tipo de visitantes cree que entraran a su sitio? 5. Visite las siguientes pginas de instituciones educativas. http://www.ccb.edu.co/ http://www.colegiochampagnat.edu.co/ http://www.angloamericanobogota.edu.co/ Qu informacin publican? Qu benecios cree usted que trae para la institucin hacer esta informacin pblica? No olvide registrar sus conclusiones en su blog

- QU TIPOS DE PGINAS WEB EXISTEN?

En la web hay diferente tipo de pginas: aquellas que ofrecen informacin de una empresa, de una institucin estatal o educativa, las que venden productos, las personales, entre otras. Identicar o denir el gnero de su pgina Web es tan importante como la denicin del objetivo de quien la crea y, a partir de ah, surgir la base de un buen diseo.

TALLER No. 25: Identicando diferentes tipos de pginas Web

Objetivo: Realizar comparaciones entre pginas web para identicar los componentes y objetivo los diferentes tipos de sitios web. 1. Observe las siguientes direcciones: www.sandwichcubano.com www.mineducacion.gov.co www.trucoswindows.net www.javeriana.edu.co www.ejercito.mil.co www.eduteka.org
Programa Compartel de Conectividad en Banda Ancha para Instituciones Pblicas

149

Diseo y Desarrollo de Pginas Web

En qu se diferencian los dominios de estas direcciones? 2. Ingrese a cada una de las direcciones y registre las caractersticas del autor y tema de cada una de ellas. 3. Cul es el propsito de la pgina? (vender, informar, educar, entretener, etc.? 4. Qu podemos deducir de la relacin que tiene la escritura de la direccin con la informacin que contiene la pagina visitada? Haga una lista de los dominios que revis y explique brevemente el tipo de pginas al que obedece. 5. Busca un ejemplo diferente de direcciones para cada uno de los tipos de dominio (.com, .gov, .net, .edu, .mil, .org). Registre sus conclusiones. No olvide publicar sus respuestas en su blog.

- DISEO DE UNA PGINA WEB

Para desarrollar una pgina Web se requiere denir ciertas metas: qu piensa lograr con el sitio Web? Vender ms, mejorar la imagen de una empresa, darla a conocer en el exterior, posicionarse como un experto en algn tema o armar un grupo de amigos con intereses comunes? Aqu hay decisiones bsicas y fundamentales que se deben tomar, tales como, qu se va a promocionar?, qu visin se quiere fortalecer hacia la comunidad? Estas preguntas llevan a pensar que realizar el proyecto de una pgina Web es un trabajo colaborativo que integra el compromiso de un equipo y abarca un perodo largo de tiempo, que exige la organizacin de reas de responsabilidad.

- PLANEACIN
Este proceso consiste en la primera reexin que se lleva a cabo en torno a la pgina que se va a crear. Propsito de la pgina Establecer el objetivo de una pgina Web es el primer paso para darle un sentido a la informacin que se va a exponer. Hay que pensar en qu se busca con la pgina que se va a crear? Las respuestas pueden oscilar entre informar, entretener, comunicar o vender, entre otros. Sin un objetivo claro es casi imposible organizar la informacin de manera ecaz y la pgina perder su rumbo y no ser de utilidad para quienes la visiten.
150
Programa Compartel de Conectividad en Banda Ancha para Instituciones Pblicas

Diseo y Desarrollo de Pginas Web

Las decisiones para crear una pgina Web en la escuela giran en torno a la pregunta qu se quiere mostrar de la escuela? En torno a la respuesta puede construirse un propsito claro y concreto que sirva como base para la seleccin de contenidos. Contenido Una vez claro el propsito, debe llevarse a cabo una seleccin de los contenidos de la pgina. No se trata de incluir el mayor nmero de datos y, tampoco, crear una pgina con informacin insuciente, sino de presentar aqullos que sean relevantes y tiles para los usuarios. Un sitio de un colegio debe representar en forma muy clara la razn de ser de la institucin y, por lo tanto, debe concebirse como una puerta de acceso al reconocimiento e interaccin con la comunidad educativa. Qu se va a mostrar de la escuela? Hay que pensar en su historia, sus proyectos pedaggicos, los trabajos de los alumnos, los trabajos de los docentes de las distintas reas, experiencias signicativas, talleres constructivos, actividades extracurriculares, espacios escolares, caractersticas del edicio, logros de gestin institucional, jornadas institucionales y lineamientos de la institucin. En cuanto a las imgenes, se sugiere que incluya la fachada en primer plano para la imagen principal que se ubicar en el encabezado. Tambin pueden utilizarse imgenes de estudiantes o del interior de la institucin como imagen secundaria junto al contenido. Distribucin de responsabilidades

En el caso de una pgina que no sea personal, es de gran utilidad conformar un grupo de trabajo que garantice mejores resultados. Los miembros de este grupo pueden distribuirse las tareas asociadas con la creacin de un sitio web institucional como son:

Programa Compartel de Conectividad en Banda Ancha para Instituciones Pblicas

151

Diseo y Desarrollo de Pginas Web

Recopilacin de informacin: Es necesario buscar los documentos, imgenes y videos que se incluirn en la pgina. Hay que recurrir a los archivos institucionales y al personal docente, directivo y administrativo para recoger todos los datos necesarios. Digitalizacin de la informacin: En ocasiones, la informacin que se consigue est impresa y no se conservan archivos de los documentos y fotos. Por esto, es necesario digitar los textos, escanear fotos y digitalizar videos, de manera que queden en formatos que puedan ser incluidos en la pgina. Organizacin de la pgina: Antes de construir la pgina en Internet es necesario realizar una organizacin previa que anticipe la cantidad de pginas que son necesarias, la manera en que se relacionan, los mens que las agruparn, etc. Diagramacin de la pgina: Una vez organizada la informacin, es necesario diagramar la pgina, es decir, decidir qu colores se utilizarn para el fondo, para los textos, que fuentes se usarn para los documentos, donde irn las fotos, los videos, etc. Esta labor es de vital importancia pues, aunque contemos con una excelente organizacin de la informacin, si usamos colores inapropiados o fondos muy coloridos, los textos sern ilegibles y nuestra pgina no cumplir sus objetivos. Diseo virtual de la pgina: Una vez se tiene toda la informacin necesaria digitalizada, organizada y diagramada, puede procederse a cargar todo esto en la web. ste es el ltimo paso en la creacin de un sitio web; si no se cumplen las fases anteriores, se gasta ms tiempo y se corre el riesgo de obtener una pgina mal organizada o planeada. Mantenimiento de la pgina: Una vez se ha creado una pgina del colegio es necesario mantenerla actualizada; esto implica designar una o ms personas encargadas de recopilar la informacin reciente (noticias, eventos, anuncios) y publicarla peridicamente. La funcionalidad de una institucin educativa radica en mantenerla al da y que tenga un verdadero efecto en la comunidad educativa. Cronograma Todo el grupo de trabajo debe estar al tanto de la labor de planeacin para poder cumplir de manera exitosa con su tarea particular. Una vez repartidas las responsabilidades es necesario establecer un cronograma de actividades que especique en que fecha se harn las bsquedas de informacin, cundo se espera tener la informacin en archivos, cundo se tendr la organizacin y diagramacin de la pgina y cundo se tendr montada en Internet; por ltimo, se establece cada cunto se actualizar esta pgina.
152
Programa Compartel de Conectividad en Banda Ancha para Instituciones Pblicas

Diseo y Desarrollo de Pginas Web

El cronograma debe incluir:

TALLER No. 26: Planeando la pgina web de nuestra institucin

Objetivo: Realizar una planeacin de la pgina web institucional. Responda y discuta con sus compaeros las siguientes preguntas: 1. Reexione en torno a la utilidad de una pgina web en su institucin. Utilice las conclusiones que obtuvo en el taller No. 24. 2. Qu signicado pedaggico tiene realizar este proyecto para los alumnos y docentes involucrados? 3. Qu compromisos pedaggicos se exigen a los alumnos y docentes que van a trabajar en la pgina? 4. Desarrolle los siguientes ejercicios: a. Redacte el propsito de una pgina web en su institucin. Utilice como base la respuesta de la pregunta 1. b. Establezca los contenidos que incluira la pgina: Visin, misin, PEI, informacin de los docentes, de los directivos, de los administrativos, noticias, proyectos, etc. c. Establezca cuntas personas se requieren para llevar a cabo cada tarea (ver Distribucin de responsabilidades). Si es posible, designe los responsables respectivos. d. Disee el cronograma de la construccin de la pgina web. Consigne esta informacin en su blog de modo que sirva como referencia futura.

Programa Compartel de Conectividad en Banda Ancha para Instituciones Pblicas

153

Diseo y Desarrollo de Pginas Web

- ORGANIZACIN
En el momento de organizar los textos, imgenes y videos, ya contamos con la informacin seleccionada y digitalizada. No hay que olvidar que los textos deben tener una redaccin clara, sencilla y con un lenguaje adecuado para un pblico de varias edades. Cuide al mximo la calidad de los textos, evitando los prrafos muy largos y cuidando con detalle la correccin gramatical y ortogrca. No hay que olvidar que esta informacin debe ser actualizada permanentemente. Es importante que da tras da, o como mnimo semana tras semana, se aadan textos o imgenes nuevas. Esto har que los visitantes quieran regresar para ver qu hay de nuevo. Para comenzar, es necesario agrupar la informacin por ncleos temticos. A continuacin se muestra un ejemplo:
Informacin institucional - Misin - Visin - Smbolos - Historia - Reconocimientos - Uniforme - Publicaciones - Normatividad - Perl de estudiante Informacin acadmica - PEI - Plan de estudios - Fundamentos - Lista de tiles - reas y asignaturas Servicios - Admisiones - Instalaciones - CafeteraQ - Transporte - Enfermera, Salud Comunidad

- Estudiantes - Padres - Exalumnos - Directivos - Proyectos

Organizacin - Organigrama - Directorio - Calendario

Noticias

- Eventos - Anuncios

154

Programa Compartel de Conectividad en Banda Ancha para Instituciones Pblicas

Diseo y Desarrollo de Pginas Web

Teniendo en cuenta esta agrupacin, se disea la estructura y nmero de pginas que tendr el sitio. Es recomendable usar un diagrama para representar la manera en que se organizarn los mens.

ESTRUCTURA DE UN SITIO WEB

PAGINA DE INICIO

PAGINA DE SECCIN 1

PAGINA DE SECCIN 2

PAGINA DE SECCIN 3

PAG. DE CONTENIDO 1.1

PAG. DE CONTENIDO 2.1

PAG. DE CONTENIDO 3.1

PAG. DE CONTENIDO 1.2

PAG. DE CONTENIDO 2.2

PAG. DE CONTENIDO 3.2

PAG. DE CONTENIDO 1.3

PAG. DE CONTENIDO 2.3

PAG. DE CONTENIDO 2.4

Esta estructura puede tener tantas divisiones y subdivisiones como sea conveniente. Siempre es importante tener en cuenta: 1. Siempre incluir slo informacin til y relevante. El exceso de datos puede causar confusin y evitar que el sitio cumpla su objetivo. 2. Denir los niveles de informacin: Dentro del ttulo genrico de la pgina pueden ir denindose una serie de puntos secundarios, dentro de stos otros terciarios, y as sucesivamente. Puede pensarse el ttulo principal como el tronco de un rbol, los ttulos secundarios las ramas principales y los temas terciarios y sucesivos diferentes ramicaciones. As, la idea es estructurar la informacin de forma que lo ms importante aparezca en primer lugar.

Programa Compartel de Conectividad en Banda Ancha para Instituciones Pblicas

155

Diseo y Desarrollo de Pginas Web

3. Tambin ayuda a enriquecer la estructura de la pgina denir claramente qu es cada elemento: prrafos, listas de puntos, tablas de datos, anotaciones, etc.; es decir, es clave jerarquizar la informacin, hacerla ms cmoda de comprender y, por lo tanto, ms efectiva. 4. La navegacin a travs del sitio web ha de ser fcil gracias a una estructura sencilla y coherente. El navegante debe saber dnde se encuentra en cada momento. Para ello se han de proporcionar, al mismo tiempo, pistas para informar el lugar especco en que se halla, como una indicacin en algn margen o, tambin, un vnculo permanente al home o pgina principal. 5. Actualizar la informacin y eliminar partes caducas. La informacin ms actual o las secciones nuevas deben localizarse rpidamente. 6. El texto ha de ser conciso, bien estructurado y fcil de leer. No hay que olvidar que la lectura en pantalla no es tan agradable como en el papel.

TALLER No. 27: Organizando la pgina web de una institucin

Objetivo: Realizar la organizacin de la pgina web institucional. 1. Un buen modo de obtener ideas para crear una pgina es revisar las pginas que ya estn publicadas. Acceda a las siguientes pginas: http://www.gimnasioaltair.com/ http://www.colegionuevayork.edu.co/ http://www.sanpedro.edu.co/ http://www.berchmans.edu.co/es/
156
Programa Compartel de Conectividad en Banda Ancha para Instituciones Pblicas

Diseo y Desarrollo de Pginas Web

Responda de cada una: a. Observe cmo est organizada la informacin. Qu secciones tiene la pgina? b. Considera que esta organizacin es clara, til y coherente? Explique c. Navegue un poco por la pgina, considera que la organizacin facilita la ubicacin del usuario en todo momento? Explique d. Toda la informacin que incluye la pgina es relevante y til? 2. Con base en las conclusiones del punto 1: a. Cmo agrupara la informacin que ha seleccionado para su pgina? Realice una tabla como la sugerida. b. Qu estructura tendra su pgina? Realice una representacin grca de las divisiones y subdivisiones como se sugiri. No olvide registrar las respuestas en su blog para futura referencia. cumplimiento del cronograma realizado en el Taller. No. 26. Verique el

DISEO Cuando ya se tiene toda la informacin en los archivos apropiados y se ha establecido cmo se organizar, se procede a diagramarla y, ya terminado todo el proceso, el ltimo paso es montarla en la red. Diagramacin La diagramacin es la labor arquitectnica de la informacin. Aqu se toman las decisiones respecto de los colores que se usarn, dnde se ubicarn las imgenes, la inclusin de animaciones, la posicin de los mens, etc. La diagramacin es un punto muy importante en la construccin de un sitio web porque de su xito depende la legibilidad y cohesin de las pginas.

Programa Compartel de Conectividad en Banda Ancha para Instituciones Pblicas

157

Diseo y Desarrollo de Pginas Web

En el momento de diagramar es claro cuenta que se cuenta con dos elementos: - El contenido: Es la informacin en forma de texto que alberga la pgina y que es su base. Debe estar bien estructurada, es decir, debe haber una jerarqua clara y coherente entre los diferentes elementos. Tambin las imgenes pueden considerarse contenido, siempre que acompaen al texto y no sean un mero adorno. Lo mismo se aplica al contenido multimedia como video o animaciones ash. - La presentacin: Es la disposicin grca del contenido. Presenta el texto en colores, con diferentes tipografas, tamaos, posiciones y con imgenes decorativas. Lo ideal es que la presentacin realce la estructura del documento, que cree el ambiente adecuado para el contenido, y no que perturbe al lector con demasiado ornamento. Cuando se diagrama una pgina no es buena idea crear un esquema de navegacin muy ramicado, porque confunde a muchos visitantes. Para Webs muy extensas es preferible una portada sin demasiado detalle porque tambin puede despistar; es preferible enlazar las pginas pequeas con las principales secciones y desde stas, ir detallando la estructura. En general, pueden considerarse tres niveles bsicos de diagramacin: la portada (pgina inicial), las secciones o subsecciones (pginas secundarias) y los artculos (pginas terciarias y siguientes). El siguiente grco determina las caractersticas de cada nivel:

158

Programa Compartel de Conectividad en Banda Ancha para Instituciones Pblicas

Diseo y Desarrollo de Pginas Web

Este grco representa la relacin entre las variables espacio disponible en la pantalla, uso del color y libertad en la disposicin de los elementos, contenido y grado de detalle en los enlaces. Se deduce que mientras la portada debe ser ms general, con elementos visuales y libertad en el uso del color, se sugiere que para los artculos se restrinja el uso de color e imgenes y se aumente en espacio. Ahora, naturalmente, debe haber coherencia y lgica en el estilo grco y tipogrco de los tres niveles: no ha de parecer que, ms que niveles distintos, sean webs distintas. Con el n de dar cohesin y legibilidad a todas las pginas del sitio, es importante tener siempre en cuenta: - Utilizar el color con moderacin, de forma consistente y razonable. Hay que tener especial cuidado con los colores elegidos, para que el texto sea fcilmente legible. - Manejar la tipografa con atencin. No mezclar muchos tipos de letra y tamaos en cada pgina. La informacin esencial ha de estar presente en forma de texto editable, no en forma de grcos. - Tener en cuenta el tamao y formato de las imgenes. Utilizarlas de forma pertinente, no como simple ornamentacin. - Las imgenes de fondo pueden ser vistosas e interesantes, y dar un toque distintivo, pero debe evitarse hacer difcil la lectura del texto, o interferir con el resto del diseo. - Disear las pginas pensando en todos los usuarios, no slo aquellos que tienen los mejores monitores, computadores y programas. Debe evaluarse el diseo a diferentes resoluciones y vericar su validez. - Utilizar las animaciones con prudencia; pueden llegar a ser molestas y poco agradables, de modo que slo debern emplearse por un motivo justicado.

TALLER No. 28: Diagramando la pgina web de nuestra institucin

Objetivo: Diagramar la pgina web de la institucin. 1. Siempre es muy til comparar los diseos de otras pginas para determinar qu elementos son tiles para la diagramacin de la pgina que usted quiere crear. Ingrese a las siguientes pginas:

Programa Compartel de Conectividad en Banda Ancha para Instituciones Pblicas

159

Diseo y Desarrollo de Pginas Web

http://www.colmerced.com/ http://www.colsanjose.edu.co/es/ http://www.colegioamericano.edu.co/ http://www.colsalle.edu.co/ De cada una responda: a. Navegue un poco por la pgina. Visite, adems de la portada, algunas secciones y artculos. Considera que la presentacin grca del sitio es coherente? Explique. b. Respecto del uso de colores y tipografas, Considera que el texto es legible y su lectura es cmoda? Es el sitio agradable visualmente? Explique. c. En relacin con el tamao y disposicin de texto e imgenes, Es apropiado para cumplir el objetivo de la pgina? Es excesivo o moderado el uso de elementos visuales como imgenes, iconos o animaciones? Explique. 2. Con base en las conclusiones del punto 1: a. Establezca la combinacin de colores que utilizar en las pginas (fondo, mens y texto) b. Dena la disposicin de los mens. Determine las imgenes que usar y la ubicacin que tendrn. c. No olvide consignar sus respuestas en su blog para futura referencia. Verique el cumplimiento del cronograma de actividades.

Montaje Si se han seguido todos los pasos ya debe tenerse lista la pgina, excepto por el paso nal que es montarla en Internet. Este ltimo procedimiento es el que hace que toda la planeacin y organizacin se haga efectiva. Si bien es cierto que se necesitan algunos conocimientos bsicos para montar un sitio web, actualmente existen muchas herramientas que facilitan este trabajo. El montaje de la pgina en la red puede hacerse de varias maneras: - La versin bsica de los sitios web es su escritura en cdigos HTML. Este mtodo tiene la ventaja de que el diseador puede disponer de todas las herramientas de
160
Programa Compartel de Conectividad en Banda Ancha para Instituciones Pblicas

Diseo y Desarrollo de Pginas Web

diseo, pero tiene la desventaja de que requiere que el usuario tenga muy buenos conocimientos de etiquetas HTML para poder usarlas. Una vez se ha diseado el sitio en HTML hace falta un host o servidor que proporcione el espacio para ubicar nuestra pgina en la red; hay varios servicios de hosting gratuitos, por ejemplo: www.miarroba.com, www.fortunecity.es, www.unlugar.com o es.geocities.com. Todos estos lugares permiten un registro gratuito y ofrecen al usuario es espacio en la red para que cargue sus archivos. - Microsoft ofrece la posibilidad de crear pginas sin necesidad de conocer el cdigo HTML y es el programa Microsoft Publisher, que viene en el paquete Ofce. Las pginas que se diseen en este programa tambin necesitan de un host, de modo que hay que buscar el espacio para cargas los archivos. - Dreamweaver es un Software de Macromedia. Uno de los ms usados en el mundo para hacer sitios Web pues permite utilizar mltiples herramientas de diseo sin conocer los cdigos HTML. Tiene la desventaja de que requiere de licenciamiento para descargarlo. Adems, tambin requiere que se tenga un host para las pginas diseadas. - La opcin que resulta ms completa son los sitios web que, adems de contar con un editor de HTML, es decir, herramientas con las que pueden disearse directamente sin conocer los cdigos, tambin ofrecen el hosting directamente. Dos opciones posibles son: pages.google.com y www.gratisweb.com. Las pginas creadas tendrn una URL asignada dependiendo el host que la albergue. Si, por ejemplo, se carga la pgina con geocities, su direccin ser es.geocities.com/ mipagina, si se utiliza gratisweb la direccin ser www.gratisweb.com/mipagina o, si se elige googlepages, ser mipagina.googlepages.com.

Si se desea que la pgina tenga un dominio especco, como www.mipagina.edu.co, es necesario pagar los servicios de un host que provea esa URL.

Programa Compartel de Conectividad en Banda Ancha para Instituciones Pblicas

161

Diseo y Desarrollo de Pginas Web

TALLER No. 29: Aprendiendo a usar Google Pages

Objetivo: Conocer los elementos bsicos del montaje de un sitio web en Google Pages. 1. Ingrese a pages.google.com 2. Para ingresar necesita una cuenta en Gmail; si ya la tiene, ingrese con su nombre de usuario. De lo contrario, regstrese.

3. Una vez haya ingresado recibir una introduccin a los servicios que ofrece Google Pages. Haga clic en Im ready to create my pages (Estoy listo para crear mis pginas).

162

Programa Compartel de Conectividad en Banda Ancha para Instituciones Pblicas

Diseo y Desarrollo de Pginas Web

4. Se le solicitar que acepte las normas de privacidad y publicacin. Marque el cuadro de aceptar e ingrese. 5. Ingresar a su pgina portada. El sitio le asigna un diseo predeterminado que usted podr cambiar despus.

6. En la parte superior de la pgina cuenta con un men de administracin que tiene los siguientes elementos:

- Back to Site Manager: Lo lleva al administrador de su sitio - Publish: Publica los cambios efectuados en la pgina. - Preview: Le permite previsualizar la pgina que est modicando. - Change Look: Cambia el aspecto (colores y tipografas) del sitio. - Change Layout: Cambia la disposicin de los elementos (columnas).

Programa Compartel de Conectividad en Banda Ancha para Instituciones Pblicas

163

Diseo y Desarrollo de Pginas Web

7. Tiene una barra de diseo con los botones:

- Undo: Deshacer - Redo: rehacer - Image: Insertar imagen. Puede hacerlo desde su equipo o desde la red. - Link: Insertar hipervnculo a otra pgina en la red. - Heading: Cambia el ndice de ttulos. - B: Pone el texto en negrilla. - I: Pone el texto en cursive. - T (text color): Cambia el color del texto. - T (text backround): Cambia el fondo del texto. - Font: Cambia la fuente del texto. - T Size: Cambia el tamao del texto. - Numbered list: Inserta una lista numerada. - Bulleted list: Inserta una lista con vietas. - Indent less: Disminuye la sangra. - Indent more: Aumenta la sangra. - Align left: Alinea el texto a la izquierda. - Align center: Alinea el texto al centro. - Align rigth: Alinea el texto a la derecha.

164

Programa Compartel de Conectividad en Banda Ancha para Instituciones Pblicas

Diseo y Desarrollo de Pginas Web

8. Tiene una zona de edicin de texto, donde basta hacer clic para escribir.

9. Ahora, si ingresamos al administrador del sitio, encontramos varias opciones:

Programa Compartel de Conectividad en Banda Ancha para Instituciones Pblicas

165

Diseo y Desarrollo de Pginas Web

1. - La direccin de su sitio web. 2. - Las acciones que puede tomar con la pgina seleccionada. Aqu puede enviar una invitacin a sus amigos, eliminar la pgina seleccionada, no publicarla o descartar los cambios realizados. 3 .- Al hacer clic aade una pgina a su sitio. 4. - Las pginas que contiene su sitio. Puede seleccionarlas una a una o todas. 5. - El espacio disponible en la red que tiene su sitio y el que ha usado. 6. - Los archivos que ha cargado en su sitio desde su computador. 10. Si, desde la edicin de una pgina, hace clic en Change Look, podr cambiar los colores de su pgina, seleccionando uno de los diseos predeterminados.

11. Si, desde la edicin de una pgina, hace clic en Chage Layout, podr cambiar la disposicin del texto en columnas

166

Programa Compartel de Conectividad en Banda Ancha para Instituciones Pblicas

Diseo y Desarrollo de Pginas Web

12. Ahora le toca a usted. Puede usar Google Pages para crear su pgina personal o para poner en la red una primera versin de la pgina de su institucin. 13. Una vez haya creado su pgina, enve un correo a sus conocidos e invtelos a conocerla. Incluya la direccin de su pgina en su blog.

1. Disee una pgina personal de un tema de su inters. Tmese el tiempo de planear, organizar y disear. Una vez la tenga hecha, enve el link a sus contactos.

Programa Compartel de Conectividad en Banda Ancha para Instituciones Pblicas

167

Diseo y Desarrollo de Pginas Web

EVIDENCIAS DE APRENDIZAJE
UNIDAD 5
Al nal de esta unidad, usted ha aprendido a planear, organizar y montar una pgina web. Como soporte de su progreso tiene: 1. Reexin sobre la utilidad de una pgina web en una institucin educativa del Taller No. 24. 2. Identicacin de los tipos de pginas web del Taller No. 25. 3. Planeacin de la pgina web de la institucin del Taller No. 26. 4. Organizacin de la pgina web institucional del Taller No. 27. 5. Diagramacin de la pgina web institucional el Taller No. 28. 6. Pgina web creada en Google Pages del Taller No. 29. NO OLVIDE SUBIR ESTE RESULTADO AL PORTAFOLIO DE EVIDENCIAS.

168

Programa Compartel de Conectividad en Banda Ancha para Instituciones Pblicas