ndice

1. Introduccin.

2. Objetivos.
2.1 Planificacin de trabajo
2.2 Informacin que tendr la web

3. Descripcin del men de acceso.

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
4. Recursos informticos empleados.
4.1 La pgina web y lenguaje HTML
4.2 Dreamweaver
4.3 Paint Shop Pro

10

5. 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.
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 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

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

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

Inicio

Noticias

Foro

Links

Msica

Actividades

Radiografa

Somos T.
Direcciones
Informaci
Conciertos
Datos
Revista
Fotos y
descripcin
de
grficos
webs
n
Alumnos y
ex alumnos
Radio
Macuto

Noticias.

Espacio para relaciones personales (tabln de anuncios)

Propuestas y actividades extraescolares (ideas para el tiempo libre)
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 xtec-pergam)
Msica.

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

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

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

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 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>IESPoblenou-Web Alumnes</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</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
un espai din&agrave;mic, on l'alumnat hi participi activament proposant
idees i entusiasme. Aix&iacute; doncs esteu tots convidats a fer-me
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.
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:

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

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.

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/ies-miquel-tarradell/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.