ndice

Introduccin. 2
Objetivos. 3

2.1 Planificacin de trabajo

2.2 Informacin que tendr la web

Descripcin del men de acceso. 4

3.1 Distribucin de la web

3.1.1 Cabecera

3.1.2 Men

3.1.3 Central

3.2 Estructura del men de acceso

3.3 Estructura del espacio de ficheros fsico

Recursos informticos empleados. 10

4.1 La pgina web y lenguaje HTML

4.2 Dreamweaver

4.3 Paint Shop Pro

Conclusiones. 16

1. Introduccin

Cualquier persona en la actualidad utiliza Internet como medio de comunicacin, centro de ayuda o
simplemente para diversin en la que la informacin que busca se presenta en paginas webs. La web es la
herramienta privilegiada en Internet, debido a la posibilidad que ofrece de mostrar, vender, anunciar, cualquier
cosa, durante las 24 horas, los 365 das del ao. Pudiendo acceder a la misma desde cualquier lugar del
mundo.

La idea de crear una web para los alumnos, naci de manera totalmente involuntaria, porque al principio solo
se trataba de un paso ms en el crdito de informtica, en el que me ensearon el funcionamiento, la creacin
de pginas webs y el lenguaje HTML.

Al comunicarme que tenia que realizar un trabajo de investigacin y al saber que la web de nuestro Instituto
posee un espacio previsto para los alumnos, supe que seria la oportunidad para poder investigar ms cosas
sobre este mundo, porque mis conocimientos de diseo, realizacin de webs y el lenguaje de HTML eran muy
limitados.

1
As que tome esta iniciativa y la escog como mi Treball de Recerca, que consistira en disear y desarrollar la
Pgina Web de los Alumnos del IES Poblenou, contando con la colaboracin de los profesores y la de los
alumnos que es la ms importante. Este apartado integrado dentro de la web de nuestro instituto, nos permitir
expresarnos con la idea que sea un espacio dinmico e interactivo donde el alumnado participe activamente
proponiendo ideas y entusiasmo.

La idea de partida es que esta web, adems de tener una buena presencia utilizando los recursos informticos
necesarios para que tenga una buena presencia y distribucin, es que no sea solamente para los alumnos o ex
alumnos del instituto, si no que permitir a cualquier nter nauta acceder a esta informacin y ver nuestro
instituto desde nuestro punto de vista.

Este trabajo constar de una parte de bsqueda y recopilacin de informacin, y otra que consistir en la
prctica y aplicacin de los conocimientos aprendidos en lenguaje HTML y creacin de pginas web.

2. Objetivos y desarrollo de los contenidos

Para llegar a este desarrollo del trabajo he pasado por diferentes etapas, primero definir una planificacin, la
segunda es de adquirir habilidad en las aplicaciones informticas y la tercera ser de recopilar contenidos.

2.1 Planificacin de trabajo

Planificacin de un calendario de trabajo.

El flujo de trabajo, para la web deba de comenzar primero buscando informacin de otras webs de
alumnos que se encuentran en Internet, para tomar ideas de como podramos presentar la nuestra.

El desarrollo de la Web comenzara con el proceso de definicin de una estrategia y unos objetivos
del sitio.

Planificar y organizar cuidadosamente el sitio desde el primer momento para ahorrar tiempo ms
adelante.

Investigar los requisitos que deba cumplir la web para que tuviera una cierta coherencia interna,
segn el perfil de los usuarios y los objetivos del sitio.

Adems, tena que tener en consideracin requisitos tcnicos tales como la resolucin estndar de los
monitores de los potenciales usuarios y sus navegadores.

Finalmente completar el diseo, durante el cual se definira el aspecto y el funcionamiento del sitio
propuesto, y avanzar hasta la fase de produccin y desarrollo, durante la cual se creara el sitio y se
codificaran las pginas, la funcionalidad del sitio, se comprobara para ver si se cumplen los
objetivos establecidos y, seguidamente, se publicara el sitio (provisionalmente slo en la Intranet del
centro).

2.2 Informacin que tendr la web

Una de las pretensiones de las que parta al empezar el proyecto era que fuera el reflejo de la vida y el
entorno cotidiano del alumnado: nuestras actividades, inquietudes, sugerencias, etc, considerando
importante informar de manera sencilla y comprensible.

Para poder crear y presentar la informacin de la web tena que familiarizarme con varias
herramientas informticas de trabajo como: Dreamweaver, Paint Shop Pro y otros. Esto implicaba que

2
 deba buscar informacin del funcionamiento de estas aplicaciones.

La web deba contener varios apartados como revista, noticias, etc. Estos apartados deban ser
debidamente redactados.

Para los apartados que contienen informacin de los alumnos, antes de ser expuestos en la web haba
que contar primero con su aprobacin y tambin la de su tutor.

Como complemento de informacin adicional para la web, me plante elaborar una encuesta que
permitiera obtener datos tales como la composicin del alumnado en el centro (por ejemplo para
conocer aspectos como la inmigracin) o tambin para conocer su nivel de integracin a nivel de
compaerismo, valoracin del centro como tal, etc.

A pesar de todo no hay que olvidar que el principal objetivo sera conseguir que esta iniciativa tuviera
continuidad, es decir, que pudiramos contar con un equipo de trabajo de alumnos del instituto que
quieran y les entusiasme mantener y buscar informacin para ir actualizando la web y que con el
tiempo dependera ya solo de este equipo.

3. Descripcin del men de acceso

3.1 Distribucin de la web

La web consta de un marco que se llama ndice, el mismo que a la vez est dividido en tres celdas, donde esta
toda la informacin y mens: cabecera, men y central.

3.1.1Cabecera

En esta parte del marco, la utilizaremos para colocar en nombre de la web, una direccin de correo electrnico
para las personas que quieran apartar ideas o criticar alguna clase de contenido que se expone en la web,
adems un botn que permitir regresar a la pgina principal donde se encuentra la presentacin.

3.1.2 Men

3
En esta seccin esta toda la informacin de la web, que en este caso est presentada en un men vertical, este
men seria como el mapa de la web que permite al usuario ver toda la informacin que contiene la web, cada
ventana tiene un titulo especfico que contiene un enlace con otro documento en el que se encuentra toda la
informacin. Esto permite que el usuario cada vez que quiera cambiar de archivo lo haga de una manera
sumamente fcil.

3.1.3 Central

4
Cada vez que el usuario presione un botn del men de la web, la informacin aparecer en esta celda, que
est en el centro del marco. Esta celda es la mas grande, esto permite que el usuario pueda

3.2 Estructura de la web

Noticias.

Espacio para relaciones personales (tabln de anuncios)

Propuestas y actividades extraescolares (ideas para el tiempo libre)

5
Radio macuto que ser una seccin de rumores

Foro.

Es un espacio para poder expresar sugerencias sobre aspectos varios del instituto.

Links.

Exponemos varias direcciones webs que puedan servir de ayuda o diversin para los alumnos. Por ejemplo:
biblioteca virtual (link xtecpergam)

Msica.

6
Avisos completos sobre conciertos que se realicen en Barcelona. En donde se expone el lugar, fecha y hora, y
lo complementando esta informacin con una breve resea de la vida y proyeccin del artista.

Actividades

Fotos de los profesores y alumnos (lbum de fotos con secciones)

Punto de informacin para los alumnos extranjeros (varios idiomas)

Radiografa

7
Para realizar este apartado en la web, realizamos una encuesta a todos los alumnos del instituto. Contena
varias preguntas como: nacionalidad, nacionalidad de los padres, idioma normalmente utilizado, etc.

Tambin incluimos un apartado en el que, si queran pertenecer a un equipo, que posteriormente se encargara
de la web actualizndola y mantenindola para que tenga continuidad y no desaparezca.

Tomando como base, los datos de la encuesta y con la ayuda del programa Excel los introducimos uno por
uno, los ordenamos y clasificamos. Escogiendo una serie de datos determinados con Excel pudimos hacer un
anlisis estadstico y representarla con grficos.

Somos todos

8
Esta parte consta de dos apartados uno para los alumnos y otro para los ex alumnos. En el apartado para los
alumnos he expuesto una fotografa por cada curso, y para los ex alumnos un espacio donde nos cuentan y
comparan su estado en la actualidad con su paso en el instituto. En lo que hemos hecho una entrevista a
Kashif Butt el da mircoles 09 de febrero de 2005 donde ha contestado nuestras preguntas.

3.3 Estructura del espacio de ficheros fsico

9
4. Recursos informticos empleados

4.1 La pgina web y lenguaje HTML

Una pgina web es una cantidad de informacin agrupada, fotos, dibujos, textos, que vinculados entre s
(linkeados diran muchos) comunican a los visitantes una cantidad de datos, que pueden servir para resaltar la
presencia de una Institucin o Empresa, generar oportunidades de negocios, interaccin con los visitantes, etc.

Una pagina en Internet, bien diseada y mantenida, por lo pronto genera cientos de visitas reales y
comprobables mensuales. Le posibilita generar una imagen de buena comunicacin con el mundo y una
oportunidad de presencia. Una pgina de Internet puede llevar texto, grficas, fotos, sonidos e inclusive videos
pequeos. El tramado de la pgina puede ser desde un texto sencillo hasta una presentacin publicitaria
completa utilizando cualquier combinacin de estos medios (Multimedia).

Esta no es esttica, hay que actualizar la informacin contenida en ella peridicamente. Estos cambios pueden
reflejar ofertas sobre productos, lanzamiento de productos, cambios en la estructura de la empresa o
simplemente cambios estticos para no aburrir al cliente. Todas las paginas web estan formadas en formato

10
HTML que son las siglas en ingls de HyperText Markup Language, que en espaol viene a ser algo as como
Lenguaje de Marcacin de Hipertexto.

Por ejemplo esta es una representacin en lenguaje HTML.

<html>

<head>

<title>IESPoblenouWeb Alumnes</title>

<meta httpequiv="ContentType" content="text/html; charset=iso88591">

</head>

<body bgcolor="#33FFFF" text="#000000">

<table border="0" width="100%" height="100%">

<tr>

<td background="fotos web/Colinas azules.jpg" bgcolor="#000000" bordercolor="#000000" height="319">

<div align="left"></div>

<div align="center"> <b><font face="Comic Sans MS" size="7" color="#FF0000">La

nostra web</font></b>

<div align="left">

<p align="center"><b><font face="Comic Sans MS" size="5" color="#FF0000">El

creador</font></b> <img src="fotos%20web/pc1%5B1%5D.gif" width="107" height="98"><b></b></p>

</div>

<div align="left">

<p><font face="Comic Sans MS" color="#FFFF00">La idea de partida &eacute;s

de oferir un espai de comunicaci&oacute; i informaci&oacute; per el

alumnat del centre. Aquesta secci&oacute; de la web de l'institut

no solament hauria de servir pels alumnes actuals sin&oacute; que

l'objectiu &eacute;s d'ajudar a totes les persones que volen con&egrave;ixer

el nostre institut des del nostre punt de vista.</font></p>

<p><font face="Comic Sans MS" color="#FFFF00">La idea es de que sigui

11
un espai din&agrave;mic, on l'alumnat hi participi activament proposant

idees i entusiasme. Aix&iacute; doncs esteu tots convidats a ferme

arribar les vostres sugerencies i, per que no, tamb&eacute; les critiques.</font></p>

</div>

</div>

</td>

</tr>

</table>

</body>

</html>

Aqu lo tenemos representado como se ve en Internet normalmente.

El HTML no es un lenguaje de programacin propiamente dicho, aunque tiene algunas caractersticas de

stos, como lo es una sintaxis bien definida. Tal como lo dice su nombre, este lenguaje consiste en marcar
partes de un texto para que stas adquieran cierto formato o cumplan con cierta funcin lo que convierte a tal
texto en hipertexto.

12
Un documento en hipertexto es aquel en el que ciertas palabras o frases presentan un formato diferente
(tpicamente color distinto y subrayado) que las distingue del resto del texto y que pueden ser seleccionadas
para desplegar un nuevo documento. Dicha seleccin se lleva a cabo, en los ambientes grficos como
Windows, por medio de un "clic" del ratn en la palabra o frase marcada, y en los ambientes basados en texto,
por medio de las flechas del teclado y la barra espaciadora o la tecla [Enter].

Las partes del texto marcadas se conocen como links o vinculos y al ser activadas pueden llevarnos a
diferentes prrafos dentro del mismo documento, a diferentes documentos o a partes especficas en diferentes
documentos. Ejemplos clsicos de hipertexto, son los sistemas de ayuda de algunos programas y sistemas
operativos, como Windows.

La navegacin por la WWW (World Wide Web) est basada en hipertexto que no slo nos puede llevar a
otros documentos sino a dar verdaderos saltos a computadoras situadas a miles de kilmetros de donde nos
encontramos. Las ligas no necesariamente son texto, tambin se incluyen imgenes que pueden ser marcadas
como ligas.

4.2 Macromedia Dreamweaver

Macromedia Dreamweaver es un editor de cdigo HTML profesional para el diseo visual y la administracin
de sitios y pginas Web. Como si preferimos controlar manualmente el cdigo HTML como si preferimos
trabajar en un entorno de edicin visual, Dreamweaver nos permite ponernos manos a la obra rpidamente y
nos facilita herramientas tiles para mejorar la experiencia en diseo Web. La ayuda de Dreamweaver
contiene informacin para usuarios de distintos niveles.

El rea de trabajo de Dreamweaver puede adaptarse a distintas formas de trabajar y a diversos niveles de
experiencia. Cuando iniciemos Dreamweaver, se abrirn los siguientes elementos del rea de trabajo:

13
 La ventana de documento muestra el documento actual mientras lo est creando y editando.

El panel Objetos contiene iconos en los que puede hacer clic para insertar objetos en el documento y
para cambiar su forma de trabajar en el documento.

Dreamweaver proporciona numerosos paneles flotantes, como el panel Estilos HTML y el inspector
de cdigo, que le permiten trabajar con otros elementos de Dreamweaver.

La barra del lanzador contiene botones para abrir y cerrar los inspectores y los paneles utilizados con
mayor frecuencia.

El inspector de propiedades muestra propiedades del objeto o texto seleccionado y permite modificar
dichas propiedades. Las propiedades que aparecen en el inspector dependen del objeto o texto
seleccionado activamente en el documento.

Adems, podemos trabajar con la vista de Diseo de Dreamweaver de dos formas distintas: en la vista de
Disposicin y en la vista Estndar. Podemos seleccionar estas vistas en la categora de vistas del panel
Objetos.

4.3 Paint Shop Pro 5

14
Paint Shop Pro 5 contiene herramientas que nos sern tiles para pintar, editar y retocar imgenes, as como
un examinador que nos facilitar la organizacin de archivos. Paint Shop Pro 5 dispone del potencial
suficiente para el profesional y de la facilidad de uso para el principiante. Tanto para la creacin diaria u
ocasional de grficos como para la creacin de pginas impresas o de Web. Al inicio de cada sesin con Paint
Shop Pro 5 aparece la siguiente ventana con sus herramientas:

La Barra de estado aparece en la parte inferior de la Ventana principal. Esta barra muestra la
informacin acerca de las animaciones, caractersticas y procedimientos. Cuando situemos el cursor
sobre una de las opciones o sobre un control, la barra de estado mostrar una breve descripcin. Con
una imagen activa, mostrar el tamao en pixels y la memoria RAM requerida por la imagen, as
como las coordenadas del cursor.

Espacio de trabajo como su nombre lo indica, es el lugar donde trabajamos.

15
 La barra de herramientas consiste de diecinueve botones de comandos diferentes que ofrecen acceso a
algunos de los comandos ms frecuentemente usados en los mens.

La Barra de colores contiene herramientas y la seleccin de color, muestra la informacin sobre los
colores.

En el sistema de programacin de ventanas, las ventanas de imgenes se llaman "ventanas sucesoras

MDI" o "ventanas de documentos". MDI es la abreviatura de "Multiple Document Interface" Interfaz
de documentos mltiples, lo cual significa que la aplicacin puede abrir ms de un archivo a la vez.
Las ventanas sucesoras estn subordinadas y controladas por otra ventana. Una ventana que tenga
"ventanas sucesoras" se llama ventana de origen".

5. Conclusiones

Al comenzar con la planificacin del calendario de trabajo, me pareci contar con mucho tiempo para poder
realizar mi trabajo de bsqueda, pero al comenzar, comprend que no contaba con mucho tiempo.

Una vez solucionado el problema del calendario del trabajo, otra dificultad fue encontrar webs de otros
centros, en la que contengan un apartado para los alumnos, ya que muchas de las webs de estos centros son
muy antiguas o simplemente no la tienen. Con las webs visitadas para tener una referencia para nuestra web
encontr:

http://www.jaumebalmes.net/alumnes/index.asp

En la web del instituto Jaime Balmes obtuve la idea de tener un espacio para que los ex alumnos del instituto
se expresen con su antiguo instituto.

http://www.xtec.es/iesmiqueltarradell/index5.htm

En esta web observ que tenan una seccin en donde exponan fechas de conciertos, por lo tanto, creamos un
apartado de msica que no solo expondramos la fecha y el lugar si no tambin la trayectoria artstica y vida
de los artistas.

Para tener un control completo sobre la apariencia de la pgina web, adems de ver varias, fue aprender a usar
programas informticos y comprender el lenguaje HTML, ya nunca antes haba hecho nada parecido y mis
conocimientos de diseo y valoracin de HTML eran muy limitados.

Esto me permiti poder comprender como funciona una pgina web. La creacin de la estructura de la pgina
web, comenz con una prueba tras otra y as hasta cinco pruebas para poder crear la definitiva y la que
utilizaramos para exponerla.

En la planificacin del trabajo me encontr que no era tan fcil encontrar informacin para publicar en la web,
en lo que opt por pedir ayuda a otros alumnos en la encuesta para as poder formar un equipo de alumnos
mantenga la web y a conseguir que exista continuidad.

Al principio a los alumnos le ilusion poder participar pero poco a poco se fueron dando cuenta que les
costaba trabajo y ocupa mucho tiempo, pero si vuelven a tener esa ilusin la web se mantendr activa.
Tambin otra solucin para mantenerla activa es trabajar en conjunto con los profesores exponiendo trabajos
de los alumnos.

Inicio

16
Links

Foro

Noticias

Alumnos y ex alumnos

Radiografa

Actividades

Msica

Somos T.

Radio Macuto

Datos y grficos

Fotos y descripcin

Conciertos

Direcciones de webs

Revista

Informacin

17