Informática

Aplicación y diseño del sitio web

Compartir 0 Me sirvió 0 No me sirvió

DEDICATORIA

Con toda mi fe y esfuerzo

primero que nada le dedico esta labor a mi Dios que

siempre me guía y me la sabiduría

a mis padres y a las personas que han colaborado...

AGRADECIMIENTO

A Dios por darme la Vida, por poner en el camino a personas lindas y maravillosas y por las bendiciones y los regalos que recibo días tras días.

A mi FAMILIA, por sus consejos y apoyo incondicional, con la mayúscula que se han ganado, cada uno de ellos por estar conmigo en los momentos difíciles de mi vida, por dedicarme momentos de paz en la elaboración de esta monografía.

ÍNDICE

Tabla de Contenido Pág.

DEDICATORIA 1

AGRADECIMIENTO 2

ÍNDICE 3

1. MARCO INDUCTIVO 5

1.1. Introducción 5

1.2. Objetivo general 6

1.3. Objetivo especifico 6

1.4. Delimitación de la Investigación 7

1.5. Limitaciones y restricciones 7

2. MARCO TEÓRICO 8

2.1. Reseña Histórica 8

2.2. Objetivo de la Institución 9

2.3. Misión 9

2.4. Visión 9

2.5. ORGANIGRAMA DE LA ESCUELA 10

3. MARCO METODOLÓGICO 12

3.1. Antecedentes 12

3.2. Definición 12

3.3. Propuesta de diseño de la página web 13

3.4. Supuestos Generales 13

3.5. Presentación de Propuesta de la Página web 14

 Usos de la Página Web 14

3.6. Otros 15

4. PRESENTACIÓN DE LA PROPUESTA 16

4.1. Diseño de la Página web 16

4.2. Programa utilizado 17

4.3. Especificaciones 19

4.4. Diseño paso a paso 20

 Cabecera de la web 20

 Menú 20

 Central 21

 Estructura de la Web 22

4.5. Manual de Usuario 25

4.6. Otros 26

5. CONCLUSIONES 30

6. RECOMENDACIONES 31

1.MARCO INDUCTIVO

Introducción

Mi dedicación en el campo de la computación como estudiante de informática en el interés y curiosidad de programas me ha hecho sentir la necesidad de laborar y escoger esta monografía de página web, con el fin de contribuir al proceso de enseñanza propio y de otros interesados en el área de informática. Con todo mi esfuerzo y dedicación, he enlazado mis conocimientos académicos con el propósito de que este proceso cada vez más eficiente y a la vez este más a tono con las nuevas técnicas y con la exigencia del medio ambiente.

Me he propuesto que esta monografía sea mas practica, visual y concreta que teórica con el fin de facilitar la comprensión del uso de página web de una manera más amena, interesante y sencilla.

En este trabajo final, verán la creación de una página web con todos los datos suministrados por una empresa como su reseña histórica, objetivos, misión y visión, y un organigrama, datos personales e interconsultas, a fin de que los dueños de la empresa o usuarios autorizados mantengan esquematizados documentos importantes ofreciendo mayor facilidad y organización en su búsqueda e investigación.

Objetivo general

Crear la página web para de la escuela Preescolar las Estrellitas para facilitar al usuario una obtención más fácil y rápida de información de sus acudidos

Objetivo especifico

Analizar los procesos de la empresa para lograr plasmar la parte practica.
Crear una página web para mostrar requisitos esenciales en el proceso de inscripción y permanencia en el centro educativo.
Facilitar a través de la página al padre de familia documentos importantes como; impresión del formulario de matricula para agilizar los trámites de ingreso del alumno, así como visualizar de una manera didáctica actividades y función de la escuela, además de conocer la bibliografía de la misma. Ofreciéndole así a personas externas o alumnos una información actualizada de lo realizado.
Coordinar, monitorear y poner en ejecución el programa en el preescolar Las Estrellitas
Orientar y apoyar las acciones que los dueños de la escuela desean alterar.

Delimitación de la Investigación

La investigación tiene una fase cuyo desarrollo comprende un período de unos 4 meses, se inicia en Abril de 2009 y finalizará en Agosto de 2009, como lo señala el reglamento, y se hará para la escuela preescolar las Estrellitas.

Limitaciones y restricciones

La obtención de datos escasos ofrecidas por la escuela por la confiabilidad hacia los estudiantes
La falta de dinero para transporte investigación, entre otros.
otras responsabilidades ya obtenidas, como trabajo y familia.

2.MARCO TEÓRICO

Reseña Histórica

El centro educativo particular las estrellitas ubicada en calle 4ta diagonal a la panadería santana.

Hace 5 años, un grupo de personas graduadas en estimulación temprana tuvieron la iniciativa de crear el centro preescolar al cual, le pusieron el nombre de Las Estrellitas, debido a que en este centro los niños que se matricularan serian especiales.

Actualmente el preescolar brinda atención a niños de nivel primario de apresto, este programa tiene como objetivo lograr que el estudiante adquiera destrezas y conocimientos de Lenguaje, Ayuda Propia, Aprestamiento, Diario Vivir, Hábitos de Trabajo, Seguridad y Destrezas pre-académicas, encaminándolo hacia un grupo que desarrolle destrezas académicas hasta su nivel más alto de funcionamiento.

Los niños reciben clases de informática con conexión a internet, ingles, valores, educación física cada uno con su maestro particular idóneo, además se brinda atención a niños con necesidades especiales y discapacidad.

Se realizó un cambio y la escuela ofrece un servicio de guardería para los padres de los niños que trabajan en el turno matutino.

Objetivo de la Institución

Optimizar el uso de la infraestructura para mejorar la imagen de la escuela y brindar servicios de calidad.

Misión

Formar a nuestros estudiantes con una oferta educativa de vanguardia proyectada hacia el futuro, para hacer de ellos profesionales y ciudadanos responsables, capaces de atender la forma eficaz todos los aspectos de actividad humana en un contesto globalizado y de continua cambio.
Contribuir a proteger los valores sociales proporcionando perspectivas criticas y objetivas que proporciones opciones estratégicas para el fortalecimiento de nuestra sociedad y sus valores éticos

Visión

Hacer de la escuela una entidad educativa líder en la formación de formación integral de profesionales de cultura humanística y científica con capacidad para desempeñarse eficaz, eficiencia y cualitativamente, en los campos sociales, laboral, e investigativo, nacionales e internacionales.

ORGANIGRAMA DE LA ESCUELA

Organigrama Estructural

ESCUELA LAS ESTRELLITAS

ASAMBLEA DE ASOCIACION

CONSEJO DIRECTIVO

DIRECCIÓN

PERSONAL ADMINISTRATIVO Y SERVICIO

PERSONAL ADMINISTRATIVO

ALUMNOS

PERSONAL DOCENTE

El nombre de la institución escogida es escuela las estrellitas, consta de cierta jerarquía; en primer lugar se encuentra la asamblea de asociación la cual se divide en el consejo directivo y la dirección de la escuela.

La función del consejo directivo es fijar la política general del preescolar, y la dirección de la escuela dirigir y supervisar las diferentes funciones y actividades de las áreas que integran el consejo directivo.

Este a su vez se divide en personal administrativo y servicio, los cuales tienen a su cargo la responsabilidad directa del logro de los objetivos que la organización se ha propuesto.

El último lugar en esta jerarquía lo ocupan el personal administrativo, personal docente y alumnos.

3.MARCO METODOLÓGICO

Antecedentes

La escuela preescolar las estrellitas no cuenta en este momento con un sitio web para mostrar todas las actividades que se realizan.

Definición

Una página web es un documento creado en formato HTML (Hypertext Markup Language) que es parte de un grupo de documentos hipertexto o recursos disponibles en el World Wide Web. Una serie de páginas web componen lo que se llama un sitio web.

Los documentos HTML, que estén en Internet o en el disco duro del ordenador, pueden ser leídos con un navegador. Los navegadores leen documentos HTML y los visualizan en presentaciones formateadas, con imágenes, sonido, y video en la pantalla de un ordenador.

Las páginas web pueden contener enlaces hipertexto con otros lugares dentro del mismo documento, o con otro documento en el mismo sitio web, o con documentos de otros sitios web. También pueden contener formularios para ser rellenados, fotos, imágenes interactivas, sonidos, y videos que pueden ser descargados. (1)

Propuesta de diseño de la página web

Con los métodos que se han expuesto, el diseño de una página web a seguir, puede crearse tomando como punto de partida escoger y organizar los datos de los alumnos seleccionados, tomando en cuenta las restricciones al acceso de cierta información por la confidencialidad exigida por los padres de familia y profesores.

Por otra parte, el diseño de la página ofrece un formularios para facilitar el proceso de matricula, el cual puede ser impreso por cualquier usuario que tenga acceso a la internet.

La página web consta de siete vínculos: inicio, matricula, contacto, actividades, y nosotros. En cada uno de estos vínculos podrá encontrar detalladamente la información que busque acerca de la escuela donde estudia su hijo.

Además presenta imágenes diseñadas e interesantes realizadas con mucha creatividad para llamar la atención del usuario y mantener su acceso, ayudando así a la institución en publicidad y a comunicarse con el mundo.

Supuestos Generales

El diseño y modelaje de Página Web cumple un papel muy importante en la tarea del manejo de información, brindándole a los usuarios y dueños de la información la capacidad de tener buena información en el momento preciso para la toma de decisiones.

Presentación de Propuesta de la Página web

El sistema ha realizar trabajará de una forma rápida y eficaz de acuerdo a las necesidades, cumpliendo con lo ya expuesto logrando así sus objetivos principales.

Usos de la Página Web

Los alumnos de la escuela son las principales entidades de esta página web ya que resulta muy importante que la información sobre estas sea accesible y fácil de manejar.

A la hora de diseñar mi página web, cuadre "perder" algo de tiempo en pensar sobre estas cosas:

¿Qué información necesito de cada tipo de la Escuela?
¿Cómo quiero extraer la información una vez introducida?

Ya que teniendo las cosas claras estos puntos ahorraré mucho esfuerzo posterior en reformas continuas de la página web.

Para poder crear y presentar la información de la web tenía que familiarizarme con varias herramientas informáticas de trabajo como: Dreamweaver, Photoshop CS3 y flash CS3. Todos de Adobe

Otros

Dentro de los programas utilizados para confeccionar y diseñar la página web también se utilizo el programa adobe photoshop CS3 ya que contiene herramientas que nos serán útiles para pintar, editar y retocar imágenes, así como un examinador que nos facilitará la organización de archivos. Photoshop CS3 dispone del potencial suficiente para el profesional y de la facilidad de uso para el principiante. Tanto para la creación diaria u ocasional de gráficos como para la creación de páginas impresas o de Web.

También es usado Adobe flash CS3 que es básicamente un programa que se inició para hacer animaciones, tanto para websites como para películas. Su lenguaje es el ActionScript, pero se pude realizar animaciones dibujadas sin mayores conocimientos de dicho lenguaje. Ya que se utilizò para crear el Slideshow para las imágenes que se encuentra en la pàgina de actividades en donde se utilizò un tutorial de Flash Slideshow Image Gallery (2)

Para ver una película/animación realizadas en este programa se necesita el FlashPlayer que es absolutamente gratuito.

4.PRESENTACIÓN DE LA PROPUESTA

Diseño de la Página web

Una página web es una cantidad de información agrupada, como, textos, fotos, que vinculados entre sí comunican a los visitantes una cantidad de datos, que pueden servir para resaltar la presencia de una Institución o Escuela, generar oportunidades de venta, aumento de matricula, interacción con los visitantes, etc.

Una página en Internet, diseñada y mantenida, por lo pronto genera cientos de visitas reales y comprobables mensuales. Le ayuda a generar una imagen de buena comunicación con el mundo y una oportunidad de presencia. Una página de Internet puede llevar texto, gráficas, fotos, sonidos e inclusive videos pequeños. El tramado de la página puede ser desde un texto sencillo hasta una presentación publicitaria completa utilizando cualquier combinación de estos medios.

Esta es estática, hay que actualizar la información contenida en ella periódicamente. Estos cambios pueden reflejar ofertas sobre productos, lanzamiento de productos, promociones en la matricula y mensualidades, cambios en la estructura de la escuela o simplemente cambios estéticos para no aburrir al cliente. Y puede ser visitada ene la dirección http://lasestrellitas.webcindario.com/Inicio.htm

Programa utilizado

El programa utilizado para la confección de la página web es Dreamweaver Cs3 ya que incluye un eficaz conjunto de herramientas que ayudaran a comenzar a realizar el seguimiento de la información, a elaborar vínculos basados en la misma y a compartirla con rapidez. Además, permiten crear rápidamente atractivas y funcionales aplicaciones de seguimiento mediante la personalización de una de las muchas plantillas predefinidas. Gracias a Dreamweaver Cs3, resulta sencillo adaptar aplicaciones en página web a las cambiantes necesidades de esta. Dreamweaver nos permite ponernos manos a la obra rápidamente y nos facilita herramientas útiles para mejorar la experiencia en diseño Web. (3)

La ayuda de Dreamweaver contiene información para usuarios de distintos niveles.

El área de trabajo de Dreamweaver puede adaptarse a distintas formas de trabajar y a diversos niveles de experiencia.

Las características que definen a Dreamweaver son:

Versatilidad. Permite realizar muchas mas operaciones que otros editores.

Potencia. Permite integrar elementos realizados con otras herramientas, como son imágenes procedentes de Photoshop, secuencias animadas procedentes de Flash, bases de datos, hojas de cálculo, etc.

Facilidad de uso. Una vez que se conoce bien su funcionamiento es muy fácil de usar, explotando los recursos que ofrece. Además de contar con una buena herramienta de ayuda y distintas opciones que facilitan aún mas su uso.

Dreamweaver es una herramienta imprescindible para todo webmaster que se precie. Así como a aquellos otros que, estando ya introducidos quieren poder contar con una buena herramienta de trabajo. Dreamweaver no es solo un editor de páginas web; es un completo gestor de sitios que ofrece una amplísima gama de posibilidades incluyendo, como no, las mayores facilidades a la hora de publicar nuestro sitio. El funcionamiento de Dreamweaver se explica aquí desde el principio, por lo que no se suponen conocimientos previos al respecto; sin embargo, si supongo que, si estás en este oficio, conoces perfectamente HTML, DHTML y JavaScript, al menos. Lógicamente también te encuentras familiarizado con los conceptos básicos del Web, así como con el uso fundamental de Windows. Dreamweaver es una herramienta que puede operar bajo entorno Windows o Macintosh pero, por ser el primero más popular y de uso más extendido, deberás contar con un editor de imágenes para crear las que necesites.

Especificaciones

La página web está optimizada para las siguientes características:

Navegador Internet Explorer o Mozilla Firefox.
Resolución de Pantalla de 1024x768 o superior.
Navegador con Plugin Macromedia Flash Player.

No obstante, se ha testeado con resultados óptimos en las siguientes plataformas:

Lista de Navegadores Testeados en entorno Windows
- Internet Explorer
- Opera
- Mozilla
Lista de Navegadores Testeados en entorno Macintosh:
- Safari
- Netscape Navigator

Diseño paso a paso

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 información y menús: cabecera, menú y central.

Cabecera de la web

En esta parte del marco, la utilizaremos para colocar en nombre de la web.

Menú

En esta sección esta toda la información 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 información que contiene la web, cada ventana tiene un titulo específico que contiene un enlace con otro documento en el que se encuentra toda la información. Esto permite que el usuario cada vez que quiera cambiar de archivo lo haga de una manera sumamente fácil.

Central

Cada vez que el usuario presione un botón del menú de la web, la información aparecerá en esta celda, que está en el centro del marco. Esta celda es la más grande, esto permite que el usuario pueda visualizar mejor la información.

Estructura de la Web

Nosotros

Matricula

Actividades

Contacto

Inicio

Inicio

La página de INICIO es el espacio para describir las funciones de la escuela.

Nosotros

Es un espacio en donde el lector puede ver la misión y la visión de la escuela

Matricula

Aquí exponemos en donde los lectores interesados en matricular a sus hijos en la escuela pueden ver los requisitos para entrar en la misma.

Actividades.

Avisos completos de las actividades realizadas y por realizar en la escuela y fuera de ella con sus respectivos padres y maestros.asi también como imágenes y fotos

Contacto

En esta página tendrán el vínculo del correo electrónico de la escuela para colocar sus sugerencias o inquietudes

Manual de Usuario

Acceso a la aplicación

Url: http://lasestrellitas.webcindario.com/Inicio.htm

Para el manejo y uso de la página web creada, se debe accesar a la página de inicio donde se encuentra el menú de desplazamiento en el lado izquierdo, que consta de inicio, nosotros, contactos, actividades y matricula.

Cada uno de estos se encuentra vinculado a sus respectivos enlaces para facilitar la información requerida y solicitada por el usuario.

Otros

Representación de lenguaje HTML de la página inicio

<HTML><HEAD><TITLE>Inicio</TITLE>

<!--

function MM_swapImgRestore() { //v3.0

var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

}

function MM_preloadImages() { //v3.0

var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

}

function MM_swapImage() { //v3.0

var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}

function MM_findObj(n, d) { //v4.01

var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

if(!x && d.getElementById) x=d.getElementById(n); return x;

}

//-->

</script>

<P>

<TBODY>

<TR>

<TD align=middle bgColor=#aaaaaa colSpan=2 height=70 vAlign=center

width=600>

<TABLE bgColor=#ffffff border=0 cellPadding=0 cellSpacing=0 height=68

width=594>

<TBODY>

<TR>

<TD align=left bgColor=#ffffff height=68 vAlign=center

width=594><img src="Imagen Web/logo.gif" width="238" height="28"></TD>

<TD align=right bgColor=#ffffff

vAlign=center></TD>

</TR>

</TBODY>

</TABLE>

</TD>

</TR>

<P>

<TD height=20 align=left vAlign=center><FONT

color=#330066 face=arial size=1>  </FONT></TD>

<p></P>

</TR>

<P>

<TR>

<P>

<TBODY>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

</TBODY>

</TABLE>

</TD>

<TBODY>

<TR>

</TR>

<TR>

<TBODY>

<TR>

<TD align=left vAlign=top> <font color="#222222" face="arial" size="2">-

- - - - - - - - - - -</font>

<ul>

<li type=square> <font size="2" face="Arial, Helvetica, sans-serif">El centro educativo particular las estrellitas ubicada en calle 4ta diagonal a la panadería santana.<br>

Hace 5 años, un grupo  de personas graduadas en estimulación temprana Tuvieron la iniciativa de crear el centro preescolar al cual, le pusieron el nombre de Las Estrellitas, debido a que en este centro los niños que se matricularan serian especiales.<br>

Actualmente el preescolar  brinda atención a niños de nivel primario de apresto.</font><font size="2" face="Arial, Helvetica, sans-serif" color="#222222">.</font>

</ul>

<ul>

<li>

<font size="2" face="Arial, Helvetica, sans-serif">Los niños reciben clases de informática con conexión a internet, ingles, valores, educación física cada uno con su maestro particular idóneo, además se brinda atención a niños con necesidades especiales y discapacidad. Se realizó un cambio y la escuela ofrece un servicio de guardería para los padres de los niños que trabajan en el turno matutino.</font>

</ul>

<p><font color="#222222" face="arial" size="2">- - - - - - -

- - - - -</font> </p>

</TD>

</TR>

<TR>

</TR>

</TBODY>

</TABLE>

<br>

<div align="center"><b><font face="Verdana, Arial, Helvetica, sans-serif" color="#94c5c5" size="2">Inicio </font> <font face="Verdana, Arial, Helvetica, sans-serif" size="2">-<a href="Nosotros.htm"> Nosotros</a> - <a href="Matricula.htm">Matricula</a>

- <u><a href="Actividades.htm">Actividades</a></u> - <a href="Contacto.htm">Contacto</a></font></b></div>

</TR>

</TBODY>

</TABLE>

<br>

<tr>

<div align="center"><font color="#99CCCC"><b><font face="Arial" size="1">Copyright

</a>Boreman</font></b></font></div>

</div></td>

</tr>

</table>

</TABLE>

5.CONCLUSIONES

Al inicio tuve dificultad para escoger que datos colocar dentro de la página web, después para organizar la apariencia de la página web, deseaba una página que llamara y mantuviera la atención de los usuarios, aunque mis conocimientos de diseño sean limitados.

Hice uso del programa Photoshop para la creación de la plantilla web mostrada en el explorador de internet.

La creación de la estructura de la página web, comenzó con un ensayo tras otro y así hasta poder crear el definitivo y el que usaría para exponer.

En la planificación del trabajo me encontré que no era tan fácil encontrar información para publicar en la web, por la confidencialidad exigida por los padres de familia y escuela.
En esta monografía espero ser de ayuda a la escuela, tanto para publicidad de la misma y para que los padres de familia obtengan la información deseada de sus acudidos.

6.RECOMENDACIONES

Considero de suma importancia ofrecer algunas recomendaciones e indicaciones respecto al uso de la página web con el fin de que se obtenga de él, el mayor beneficio posible.
Lo importante es crear una página web bien diseñada, con una cantidad de información agrupada interesante y didáctica, con una imagen que resalte la presencia de la escuela siendo una oportunidad de comunicación con el mundo y así atraer publico pare generar negocios y aumentar su matricula.
Es indispensable utilizar toda la imaginación y creatividad para llamar la atención del comprador y mantener activa la página web.

Bibliografía

http://www.pergaminovirtual.com.ar/definicion/Página_web.html
http://www.layersmagazine.com/flash-slideshow-image-gallery.html
http://www.pri.jovenclub.cu/jc/pr/index.php?option=com_content&task=view&id=14&Itemid=29
Escuela Las Estrellitas – David.

Descargar

Enviado por:	Boreman
Idioma:	castellano
País:	Panamá

Palabras clave:

Proyecto creación de una página web para una escuela

Te va a interesar