Informa Tecnico Santiago Jhonattan.pdf

1

Pte. 32 # 22, entre Prol. de Nte. 3 y Prol. de Madero Nte., C.P. 94310, Orizaba, Ver. www.itszongolica.edu.mx

LADA SIN COSTO: 01 (800) 227 22 82 TEL. Y FAX (272) 727 04 49

Dirección General de Educación

Superior Tecnológica

INSTITUTO TECNOLÓGICO SUPERIOR DE ZONGOLICA

[DISEÑO E IMPLEMENTACIÓN DE UN SISTEMA WEB]

INFORME TÉCNICO DE RESIDENCIA

PROFESIONAL

Presenta:

[SANTIAGO JHONATTAN XOCHICALE SOLIS]

[INGENIERIA EN SISTEMAS COMPUTACIONALES]

Zongolica, Ver [DICIEMBRE, 2014]

2



ÍNDICE

INTRODUCCIÓN ............................................................................................ 5

CAPITULO I. ASPECTOS GENERALES. .......................................................... 8

1.1 OBJETIVO ................................................................................................. 8

1.1.1 OBJETIVO GENERAL ............................................................................ 8

1.1.2 OBJETIVO ESPECIFICOS ..................................................................... 8

1.2 JUSTIFICACIÓN. ...................................................................................... 9

1.3 CARACTERIZACIÓN DEL ÁREA EN QUE SE PARTICIPO¡Error! Marcador no

definido.0

1.3.1 DATOS GENERALES DE LA EMPRESA¡Error! Marcador no definido.0

1.3.2 Ubicación general y específica de la empresa.¡Error! Marcador no definido.1

1.3.3 Giro de la empresa ............................... ¡Error! Marcador no definido.4

1.3.4 SERVICIOS QUE OFRECE ................. ¡Error! Marcador no definido.4

1.3.5 POLÍTICAS ............................................. ¡Error! Marcador no definido.

1.3.5.1 POLÍTICA DEL SISTEMA DE GESTIÓN INTEGRAL¡Error! Marcador no

definido.

1.3.5.2 POLÍTICA DE GÉNERO .................. ¡Error! Marcador no definido.

1.3.5.3 POLÍTICA DE CALIDAD ................ ¡Error! Marcador no definido.5

1.3.6 MISIÓN ................................................. ¡Error! Marcador no definido.6

1.3.7 VISIÓN ................................................. ¡Error! Marcador no definido.6

1.3.8 VALORES ............................................ ¡Error! Marcador no definido.6

1.3.9 ORGANIGRAMA .................................. ¡Error! Marcador no definido.7

1.4 PROBLEMAS A RESOLVER .................. ¡Error! Marcador no definido.8

1.4.1 ALCANSES ....................................................................................... 19

1.4.2 LIMITACIONES ................................................................................. 19

CAPITULO II. FUNDAMENTACION TEORICA ............................................. 20

2.1 MARCO REFERENCIAL ......................................................................... 20

2.1.1 ANTECEDENTES ............................................................................ 20

3



2.1.2 ¿QUE ES UNA PAGINA WEB? ........................................................ 21

2.1.3 CARACTERISTICAS DE UNA PAGINA WEB¡Error! Marcador no definido.1

2.1.4 TIPOS DE PAGINA WEB ................................................................ 22

2.2 MARCO TEORICO .................................................................................... 24

2.3 MARCO CONCEPTUAL ............................................................................ 30

2.4 MARCO CONTEXTUAL ............................................................................ 34

2.5 MARCO METODOLOGICO ....................................................................... 35

2.5.1 TIPO DE INVESTIGACION……… ........................................................... 35

2.5.2 TIPO DE APLICACIÓN DE SOFTWARE DISEÑADO ............................. 36

2.5.3 IMPLEMENTACION ............................................................................... 37

2.5.3.1 HTML Y XHTML ................................................................................... 37

2.5.3.2 CSS ..................................................................................................... 38

2.5.3.3 JAVAsCRIPT, JqUERY Y AJAX ....................................................... 38

2.5.3.4 AJAX .................................................................................................... 39

2.5.3.5 PHP ...................................................................................................... 39

2.5.3.6 SQL ..................................................................................................... 40

2.5.3.7 MYSQL ................................................................................................. 41

2.5.3.8 PHPMYADMIN .................................................................................... 41

2.5.3.9 STARUML ............................................................................................ 41

2.5.3.10 ADOBE DREAMWEAVER ................................................................. 41

2.5.3.11 DBDESIGNER .................................................................................. 42

CAPITULO III. PROCEDIMENTOS Y/O DESCRIPCION DE ACTIVIDADES

REALIZADAS……….………… 43

3.1 MODELO DE DESARROLLO ..................................................................... 43

3.1.1 MODELO EN CASCADA (BENNINGTOM 1956). ................................... 43

3.2 ANALISIS DE REQUERIMIENTOS ............................................................ 45

3.3 DISEÑO DE INTERFACES ....................................................................... 46

4



3.3.1 DISEÑO ................................................................................................... 47

3.3.2 CAPAS DE PRESENTACION ................................................................. 48

3.3.3 PROCESOS DISEÑO IMPLEMENTACIÓN SISTEMA WEB ................... 50

3.3.4 CAPA DE DISEÑO SISTEMA WEB EN SU APLICACIÓN ..................... 50

3.4 DISEÑO DEL PROGRAMA ....................................................................... 52

3.5 CODIFICACIÓN DEL SISTEMA ................................................................ 67

3.5.1 DESCRIPCIONDELPROYECTO………………………………….… .67 3.5.2 CAPA DE PRESENTACIÓN .................................................................... 67

3.5.3 XAMPP .................................................................................................... 78

3.5.4 FLASH ..................................................................................................... 79

3.5.5 ANALISIS DE DIAGRAMAS DE CLASES ............................................... 81

3.6 PRUEBA DEL…………………………………………………………………....82 SISTEMA……………..……………………………………………………….………83 3.7 ELABORACION DEL MANUAL DE VERIFICACION .................................. 83

3.8 ENTREGA DEL PROYECTO .................................................................... 83

RESULTADOS ................................................................................................ 84

CONCLUCIONES Y RECOMENDACIONES................................................... 85

RECOMENDACION ........................................................................................ 85

CONCLUCIÓN.................................................................................................. 86

ANEXOS ........................................................................................................... 87

REFERENCIAS BIBLIOGRAFICAS: .................. ¡Error! Marcador no definido.

5



INTRODUCCIÓN

En el presente documento se describe el trabajo realizado en el proyecto final de la

carrera Ingeniería Sistemas Computacionales. El proyecto consiste en el “Diseño

implementación de un Sistema Web para la administración Escolar”. En la dirección

de la escuela Primaria Urbana Estatal “Gral. Ignacio Zaragoza”. Situada en la localidad

Zongolica, Ver. Este Sistema web es para dar a conocer información completa sobre el

trabajo Escolar Docente y además disponer de enlaces a los servicios brindados a

profesores y alumnos por parte de autoridades educativas y gubernamentales, para

proporcionar un servicio al centro educativo.

A este Sitio Web puede accederse desde navegadores de internet como google Chrome,

Mozilla, Opera entre otros. Este sitio nos presenta la localización geográfica del centro

educativo, se presentan las actividades que se desarrollan en este a lo largo del ciclo

escolar, festivales, eventos artísticos, concursos académicos, deportes, galerías, avisos,

por mencionar algunos.

Para el docente la página tendrá varios tipos de enlaces; un apartado en el que los

docentes puedan acceder a su información personal a través de un login (inicio de

sesión) introduciendo un usuario y contraseña otorgadas por el administrador del sitio

web.

Para el desarrollo de la aplicación se realizó varias entrevistas con el director de la

escuela como se realizaría las tareas para ir después informarle adecuadamente. Las

decisiones funcionales del Sitio Web en la aplicación de nuestro asesor interno.

Una vez realizadas las reuniones con las directivas se implementó la situación de

distribución de desarrollo de Sitio Web en 2 partes: El diseño del Sistema Web, la Base

de datos para el docente y del administrador. Como residente del Instituto Tecnológico

Superior de Zongolica. En nuestras manos pone la directiva de la Institución “Gral. Ignacio

6



Zaragoza” La elaboración del proyecto de “DISEÑO IMPLEMENTACION DE UN

SISTEMA WEB PARA LA ADMINISTRACION ESCOLAR”.

En tanto seríamos los pioneros en cuanto se refiere a la modalidad del Servicio de los

docentes de esta institución para personal educativo “General Ignacio Zaragoza”.

Apegadas diferentes dependencias de la misma Comunidad de la SEV.

Referente al trabajo estará representado en un Sistema Web, Base de Datos, gráficos,

para la administración de la institución diseño de un análisis para implementar los

requerimientos necesarios tomando inicio del proceso del desarrollo del proyecto piloto

docentes, la información de contactar para el planteamiento de las necesidades del lugar

educativo fue de una plataforma de aprendizaje para el residente ya que se empleó las

características del proyecto a desarrollar bajo gestor del programa MySQL para la fácil

administración del personal de la primaria, usando los lenguajes de programación

HTMLY XHTML, JS, CSS, PH, MySQL, PhpMyAdmin. Secciones informáticas acerca de

la primaria, galería de las instalaciones, información del personal docente y sección de

contactos.

Se configuro en acuerdo de los docentes en el foro del uso que tenía que tener el sitio

web de esta página en discusión de los demás compañeros educativos así mismo el

manejo de funciones de avisos para el público en general, teniendo contar con enlaces a

los perfiles de Facebook, twitter, Base de Datos, enlace, Videos, Galerías, Contactos de la

Primaria “GRAL. IGNACIO ZARAGOZA”. Y estadísticas de visitas. Enlace al sitio de

páginas web edu. Mx. También se brinda recomendaciones para que en el futuro este

proyecto pueda ser mejorado por los docentes actualizando el Sistema Web.

El presente documento está dividido en una serie de capítulos que corresponden,

básicamente, a las distintas etapas que conforman el proceso de desarrollo del

proyecto. Estas etapas han sido:

Especificación de requisitos: Se redactó de una manera global una primera visión del

7



proyecto donde señalamos los requisitos que debía cumplir. La finalidad de esta etapa

es plasmar el acuerdo entre el desarrollador y el docente acerca de las funcionalidades

del proyecto. En nuestro caso el visto bueno nos lo dio el director del centro educativo

“Gral. Ignacio Zaragoza”.

Análisis: Se realizó el modelado conceptual de la futura solución mediante el uso de

diagramas (diagrama de clases y diagramas de casos de uso). Los modelos ayudan a

visualizar como es el sistema, proporcionando plantillas que sirven de guía en la

construcción de la aplicación. En esta etapa se especifica qué debe hacer la

aplicación pero no cómo debe hacerlo.

Diseño: Se utilizaron los elementos y modelos obtenidos durante el análisis para

transformarlos en mecanismos que puedan ser utilizados en un entorno web con las

características y condiciones que establecen este tipo de entornos. Se diseñaron todos

los niveles de los que consta la aplicación (nivel de presentación, nivel lógico y nivel de

persistencia).

Tanto la etapa del análisis como la del diseño están desprovistas de código. Un buen

análisis y un buen diseño son la mejor forma de llegar a producir software de calidad.

Implementación: Se utilizaron los elementos obtenidos en el diseño para permitir la

elaboración del producto o prototipo funcional, es decir, que puede ser puesto en

marcha y sometido a pruebas. Para ello se consideraron las diversas tecnologías que

han intervenido en la elaboración de dicho producto. Todo lo desarrollado en las etapas

del análisis y del diseño, se tradujo a código.

Evaluación y pruebas: Esta fase se centró en la comprobación del correcto

funcionamiento del producto desarrollado mediante una serie de pruebas.

Tras estas tareas pudimos dar por concluido el proyecto, por lo que en último lugar

mostramos las conclusiones obtenidas y listamos la bibliografía utilizada durante la

realización del mismo.

8



CAPITULO I. ASPECTO GENERALES.

1.1.1 OBJETIVO GENERAL

Diseñar e Implementar un Sistema Web para la Administración Escolar de la Escuela

Primaria General Ignacio Zaragoza, Mediante los requerimientos establecidos por la

administración y también la información proporcionada por ellos; para dar a conocer

mediante los medios sociales, información de interés de la escuela y documentos que

solo la administración maneja para los catedráticos.

1.1.2 OBJETIVOS ESPECIFICOS

1. Conocer qué tipo de programas y lenguajes de programación, hagan de mi sistema

algo innovador para los usuarios.

2. Utilizar que mi sistema web llegue a ser reconocido regional, nacional e

internacionalmente, para que el usuario pueda conocer las nuevas perspectivas de

la escuela primaria.

3. Estudiar la manera en que nuestro Sistema Web sea de fácil manejo para que el

administrador y el usuario pueda tener acceso sin ningún inconveniente a la

información.

4. Se caracterizara por medio de un nombre y una contraseña para cada usuario y

administrador, ya que se manejara información privada.

5. Otra de las características es que solo el administrador asignara nombres y

contraseñas.

6. Se identificara por una base de datos en la cual se almacenara la información.

7. Otra característica será el poder descargar, insertar, y cerrar el acceso a la

información.

9



1.2 JUSTIFICACIÓN.

El Proyecto se realizara en la “Escuela Primaria “Gral. Ignacio Zaragoza”, de acuerdo

al análisis que se realizó se llegó a la conclusión que el proyecto cumplirá las

necesidades, como llevar un buen control en la ficha de trabajo que la administración

maneja, donde los docentes de la Institución harán su llenado de información

personal, incluyendo una Base de datos, gráficos así como conocer la Escuela por

medio de esta página web, la cual dará a conocer las funciones, metas, y propósitos a

alcanzar para los alumnos de esta Institución.

De acuerdo a lo anterior se llegó a la determinación de crear un Sistema Web desde el

análisis del mismo hasta su mantenimiento, realizando una investigación de cómo quieren

el diseño de la Página Web y del llenado de la ficha de trabajo.

Este Sistema Web está enfocado en realizar un análisis en el área en el cual estará

diseñado, para implementar los requerimientos necesarios, ya que es un factor vital de

suma importancia en la Organización del proceso de desarrollo del proyecto.

También se realizó una pequeña evaluación de qué tipo de tecnología se está manejando

en la Institución, para ver si se puede hacer uso o no en la Implementación, y también

se llevó a cabo un diagnóstico de los requerimientos tecnológicos, que pueden ser

necesarios para que esté en marcha nuestro Sistema web.

Una de las cosas importantes radica en que la tecnología a utilizar, no necesita ningún

costo adicional a la institución, pero si en el hosting a utilizar y el dominio, ya que será

necesario un Servidor y un nombre propio en la internet, para que nuestro Sistema

almacene su información en una base de datos de un Servidor no local, sino privado

10



y de un nombre propio para nuestro Sistema Web.

1.3 CARACTERIZACIÓN DE LA EMPRESA EN QUE PARTICIPÓ

El área administrativa se realiza toda la documentación de los alumnos, maestros y

escuela, oficios de gestión, constancias y solicitudes. También en sus políticas

institucionales lo que realizan es el llenado de oficio, certificado, control de plantilla

escolar y control de los alumnos en estadísticas, inventarios, particulares y generales. Las

reglas que tiene el área administrativa para el personal, como entrega a tiempo de

documentos solicitada tanto como la superioridad educativa, registrar la asistencia

puntualmente, el uso de los materiales en forma correcta y el cuidado de los materiales.

1.3.1 Datos Generales de la Empresa EL Colegio primaria “GRAL. IGNACIO ZARAGOZA”. . Predio Urbano Ubicado en la Calle

Benito Juárez situada en la localidad de Zongolica, Ver. Imparte Educación Básica

(Primaria General), y es de control público estatal. Sus clases se imparten en horario

Matutino; Sus datos de contacto son: “GRAL IGNACIO ZARAGOZA" Dirección: Benito

Juárez S/N Zongolica, (Municipio Zongolica Estado Veracruz de Ignacio de la llave).

Código Postal: 95000. Teléfono: 2787326113. Predio que ocupa con una superficie de

2,000 metros cuadrados. Al Norte colinda con la calle Benito Juárez. 40,00 m2. Al Sur su

Colindante de propiedad de Bienes Nacionales (Parroquia San Francisco Asís) 40,00 m2.

Al Este Colinda con Sr. Enriqueta Huerta VDA. De Montiel 50.00 m2. Al Oeste Casa del

Campesino 50.00 m2. A una escala: 1: 250.

11



Fig. 1.1 Ubicación geográfica del municipio de Zongolica

Croquis institucional.

Dirección General. Cooperativa. Salones. Baños. Biblioteca. Explanada. Hasta Bandera. Salidas.

1.3.2 UBICACIÓN GENERAL Y ESPECÍFICA DE LA EMPRESA

La escuela “Gral. Ignacio Zaragoza” se ubica en una parte céntrica de esta Ciudad de

Zongolica proviene de las voces Nahuas Tzon-coliuhcan, que significan “Lugar de la

cabeza enmarañada” o “lugar de cabellos crespos” Durante la época prehispánica fue una

población nonoalca y en el siglo XVI era un pueblo sobresaliente, ya que formaba la

cabecera de una importante confederación de pueblos, entre los que se encontraban: Los

reyes, Tlaquilpa, Mixtla, Astacinga, Tehuipango, Texhuacan, Tezonapa, Coetzala y

Omealca.

El municipio de Zongolica está ubicado en la zona montañosa central del estado de

Veracruz, en los límites con el Estado de Puebla y Oaxaca, por la parte Sur tiene una

extensión territorial de 347.33Km2, siendo su topografía una de las más escabrosas, con

alturas hasta de los dos mil metros sobre el nivel del mar.

12



La Ciudad se ubica en el centro de la sierra Náhuatl de igual denominación, en la porción

centro occidental del municipio a 38 Km. de la Ciudad de Orizaba, su localización

geográfica es 20° 46’ 13” de latitud norte y 2° 48’ 20” de longitud Oeste de la Ciudad de

México, con una altura sobre el nivel del mar de 1252 metros.

CONFORMACION POLITICA DEL MUNICIPIO

El municipio se conforma por quince Congregaciones: Cotlaixco, Tlanecpaquila, San

Sebastián, Ixpaluca, San Jerónimo, Zomajapa, Macuilca, Coapa Pinopa, Aticpac, Ayojapa,

Zapatecatl, Tepánticpac, Tonalixco Grande y Tepetitlanapa, Totolacatla, donde cada una

de ellas cuenta con una autoridad denominada AGENTE MUNICIPAL, cuenta también

con 142 comunidades quien al frente de ellas está el SUB-AGENTE MUNICIPAL elegidos

de una manera democrática. Se cuenta también con 13 ejidos, dirigidos por su estructura

correspondiente.

EXTENSION

Tiene una superficie de 347.33km 2, cifra que representa un 0.48% del Estado de

Veracruz.

OROGRAFIA

El municipio se encuentra situado en la zona central montañosa del estado sobre las

estribaciones de la Sierra de Zongolica, siendo su topografía de las más escabrosas, con

alturas superiores a los 2000 metros sobre el nivel del mar.

HIDROGRAFIA

Al municipio lo riegan los ríos Altotolco, Moyo atempa, Santiago, todos tributarios del río

Tonto, importante afluente del río Papaloapan y ríos de menor arrastre como el Ayejapa y

Coscole.

13



CLIMA

Su clima es templado-húmedo-extremoso con una temperatura promedio de 17.4 °C, su

precipitación pluvial media anual es de 2, 270 mm.

Durante esta época la formación de comunidades indígena se venido evolucionando tanto

que la educación ha llegado a todos estos lugares para la construcción de su vida social.

La Ubicación del centro Educativo formado parte del esmero de contar con alumnos que

han terminado su escolaridad primaria ahora en esta Ciudad convierte con actividad

necesario de agrupar diferentes comunidades indígenas en la organización media

educacional para desarrollo de las tecnologías que actual se está viviendo de nuevas

generaciones hacia el futuro con dimensiones de extensión que el gobierno del estado de

Veracruz a propuesto en toda la Sierra que aprenda a leer, Sumar, Restar, Multiplicar y

no sean analfabetas si no sometan en los cambios de los Tics ambientando una

formación digna completa.

Fig. 2 Ubicación del Escuela “Gral. Ignacio Zaragoza “que se encuentra Zongolica, Ver.

14



1.3.3 GIRO DE LA EMPRESA

La Escuela Primaria “Gral. Ignacio Zaragoza” con clave 30EPR0604G, perteneciente a la

zona 024 del municipio de Zongolica, es una institución pública estatal, cuyo objetivo

general es la de fomentar en los alumnos el desarrollo de las capacidades, actitudes y

valores para aprender a lo largo de su vida, despertando habilidades superiores del

pensamiento para solucionar problemas, pensar críticamente, comprender y explicar

situaciones desde diversas áreas del saber, manejar información, innovar y creer en

distintos órdenes de la vida y esto ha logrado que tengan reconocimiento a nivel zona,

regional y estatal en los concursos de olimpiada de conocimiento, también en eventos

deportivos en las disciplinas, culturales, deportivas, artísticas También en los niveles,

zona y regional.

1.3.4 Servicios que ofrece.

La Escuela Primaria “Gral. Ignacio Zaragoza” proporciona solo algunos de los servicios

que permite cumplir con los establecidos en la ley y sobre todo brindan tranquilidad y

estabilidad a los trabajadores y sus familias ante cualquier situación imprevista. Algunos

de los servicios que ofrece a los alumnos, padres y profesores son los siguientes:

Para los alumnos primero es la educativa, de higiene y salud, de alimentación,

enciclopedia y baños.

Para los padres de familia, también es educativa, convivencia, atención con tiempo

y en forma, por medio de reuniones abiertas y programas. También cooperativa

escolar y comunicación directa.

Para los profesores: Enciclomedia, biblioteca, dirección efectiva con subdirector y

subdirectora, salones, baños, centro de cómputo y cooperativa.

15



1.3.5 POLÍTICAS

1.3.5.1 POLÍTICAS DEL SISTEMA DE GESTIÓN INTEGRAL

La Escuela Primaria “Gral. Ignacio Zaragoza” establece el compromiso un Servicio

Educativo de Calidad Mejorando Continuamente sus procesos de enseñanza a nivel

primaria para orientar con eficiencia a los alumnos al cumplimiento administrativos con el

objetivo de diseñar e implementar, difusión de un Sistema Web para el Centro escolar

Educativo. Y también la información sea manejada para los docentes mediante un

registro. Esta política sea comunicada a todo el personal y además de estar disponible en

la red para que sea visible a los medios de Comunicación.

1.3.5.2 Política de género

La Escuela Primaria “Gral. Ignacio Zaragoza” establece el compromiso de promover la

igualdad en el acceso y promoción de un Servicio Educativo para que el Sitio Web sea

mediante requerimientos establecidos administrativos de los docentes con el propósito de

mantener un ambiente de trabajo armonioso y favorecer equidad de género.

1.3.5.3 Política de Calidad

La Escuela Primaria “Gral. Ignacio Zaragoza” el compromiso de implementar todos los

procesos administrativos escolar de la escuela primaria orientándolos hacia la satisfacción

de sus alumnos en la calidad del Proceso Educativo. Y cumplir con los requerimientos del

Sitio Web conforme las normas de ISO.

16



1.3.6 Misión

Somos una institución comprometida a fortalecer y consolidar las bases del conocimiento

de las niñas y niños; dando prioridad a la lectura, escritura y las matemáticas; basada en

la organización pedagógica curricular, a través del desarrollo de competencias y valores

para la vida.

1.3.7 Visión

Ser una institución líder, forjadora de alumnos competentes, que potencialicen sus

habilidades lingüísticas, comunicativas y matemáticas; mediante el trabajo colaborativo

de los agentes involucrados en el proceso de aprendizaje.

1.3.8 VALORES

En esta institución educativa se propiciará un ambiente de trabajo colaborativo basado en

principios democráticos y valores: Justicia, honestidad, igualdad, respeto, solidaridad,

responsabilidad, tolerancia, compromiso.

17



1.3.8 ORGANIGRAMA

18



1.4 PROBLEMAS A RESOLVER

La problemática que se detecto es que no tienen un historial de la institución, sino que

solo cuentan con algunos fragmentos rezagados entre los archivos en hojas no digitales,

también no cuenta con antecedentes de la empresa, un Organigrama Institucional, giro

que la institución tiene, Servicio que ofrece y características de la administración.

Solo cuentan con formatos que se llenan a mano o, atreves de una computadora que

contienen datos rezagados.

Y también debido que las administraciones anteriores o errores del personal al momento

de llenar algún documento no lo almacenaban, sino que se perdía o que también la

información desaparecía por algún problema técnico, como no se sabía utilizar la

tecnología de aquel momento se borraba la información y es por ello que solo la

información que se ha obtenido es por medio de cuestionarios, preguntas o entre vistas

a nuestro asesor.

Por esta misma razón se llegó a establecer dentro de la institución la investigación de la

documentación para la realización del Sistema Web; dando a conocer que los programas

y diseños que utilizaríamos ya que serían de suma importancia, al realizar nuestro

sistema web. A través de los programas que utilizaremos su información que dará

establecida y guardada localmente o a través hosting y dominio de lo cual daría a

conocer a los docentes su información, y a los usuarios los servicios que ofrece la

institución y como es su elaboración interna y a través de esta sistema también los

administrativos puedan tener acceso a ella pero sobre todo que los docentes puedan

conocer más acerca de la tecnología que ofrecen los sistemas y como relacionarse no

solo en un ambiente estático, sino dinámico de nuestro sistema. Poniendo un apartado

dentro del sistema para realizar su llenado de datos personales y muy particulares de

ellos.

19



1.4.1 ALCANSES

Dentro de los alcances que tendremos será que la población estudiantil junto con los

padres de familia conocerán mas cuales son las funciones que realiza la escuela

educativa y si como conoces avisos, la historia, los docentes que laboran, misión, visión,

valores y servicios que ofrece la escuela, también como los docentes realizar el proceso

de llenado de información de ingreso a la escuela.

1.4.2 LIMITACIONES

Los factores o limitaciones que tuvimos fue que no tenían información, para realización el

llenado de nuestro sistema, por esa misma razón tuvimos que realizar la investigación.

Una de las restricciones que tendrá nuestro sistema será que solo el administrador asigne

al usuario la contraseña y nombre para que le dé acceso al proceso docente.

20



CAPITULO II. FUNDAMENTACION TEORICA

2.1 MARCO REFERNCIAL

2.1.1 ANTECEDENTES DE UNA PAGINA WEB.

En un principio las páginas web eran sólo texto, pero a medida que ha evolucionado la

tecnología, tanto los ordenadores como las redes de telecomunicaciones, se ha generado

nuevas formas de desarrollar la web.

La inclusión de imágenes fue la evolución más significativa, pero también debemos

mencionar el video y la animación, o los espacios 3D, lo que aporta valores estilísticos, de

diseño y de interactividad jamás imaginados antes.

El diseño de páginas web se ha desarrollado a medida que ha evolucionado Internet. En

1992 sólo había alrededor de 50 sitios web. Las últimas estadísticas nos confirmaban que

actualmente rondan los 8.000 millones de sitios web, a los que diariamente se les suma a

raíz de 4400 por día.

Rápidamente, su importancia alcanzará las mismas cotas que la televisión o el teléfono.

Datos recientes estiman que hay alrededor de 2 mil millones de páginas colgadas y se

espera que en los próximos años llegue a los 8 mil millones, excediendo el número de

habitantes del planeta. Sin embargo, sólo una fracción de este número es visitado

habitualmente por la mayoría de los usuarios (sólo alrededor de 15.000 sitios webs, el

0,4% del total).

A partir de estos datos se puede entender la necesidad de concentrar los esfuerzos para

atraer y mantener la atención de los usuarios. Junto con un desarrollo efectivo de la

estructura web y del contenido, el diseño y el uso del color son la llave para atraer y ser

identificado, formando vínculos en el subconsciente del usuario y generar esquemas para

captar y fidelizar a nuevos visitantes.

Al mismo tiempo que la evolución de los aparatos y de su introducción en los hogares,

también ha aumentado la calidad de las transmisiones a través internet y ha bajado su

21



precio. A medida que la tecnología ha solventado estas dificultades, ya no nos

encontramos con problemas de forma sino de contenido.

2.1.2 ¿QUÉ ES UNA PAGINA WEB?

Una página web (o página electrónica, según el término recomendado por la R.A.E.) es el

nombre de un documento o información electrónica capaz de contener texto, sonido,

vídeo, programas, enlaces, imágenes, y muchas otras cosas, adaptada para la llamada

Word Wide Web, y que puede ser accedida mediante un navegador. Esta información se

encuentra generalmente en formato HTML o XHTML, y puede proporcionar navegación

(acceso) a otras páginas web mediante enlaces de hipertexto. Las páginas web

frecuentemente también incluyen otros recursos como ser hojas de estilo en

cascada, guiones (scripts), imágenes digitales, entre otros.

Las páginas web pueden estar almacenadas en un equipo local o un servidor web remoto.

El servidor web puede restringir el acceso únicamente a redes privadas, por ejemplo, en

una intranet corporativa, o puede publicar las páginas en la Word Wide Web. El acceso a

las páginas web es realizado mediante una transferencia desde servidores, utilizando

el protocolo de transferencia de hipertexto (HTTP).

2.1.3 CARACTERISTICAS DE UNA PAGINA WEB

Una página web está compuesta principalmente por información (sólo texto y/o módulos

multimedia) así como por hiperenlaces; además puede contener o asociar hoja de estilo,

datos de estilo para especificar cómo debe visualizarse, y también aplicaciones

embebidas para así permitir interactiva.

Las páginas web son escritas en un lenguaje de marcado que provee la capacidad de

manejar e insertar hiperenlaces, generalmente HTML.

El contenido de la página puede ser predeterminado (página web estática) o generado al

momento de visualizarla o solicitarla a un servidor web (página web dinámica). Las

páginas dinámicas que se generan al momento de la visualización, se especifican a través

de algún lenguaje interpretado, generalmente JavaScript, y la aplicación encargada de

visualizar el contenido es la que realmente debe generarlo. Las páginas dinámicas que se

http://es.wikipedia.org/wiki/R.A.E.

http://es.wikipedia.org/wiki/Documento

http://es.wikipedia.org/wiki/World_Wide_Web

http://es.wikipedia.org/wiki/Navegador_web

http://es.wikipedia.org/wiki/HTML

http://es.wikipedia.org/wiki/XHTML

http://es.wikipedia.org/wiki/Hiperv%C3%ADnculo

http://es.wikipedia.org/wiki/Hipertexto

http://es.wikipedia.org/wiki/Hojas_de_estilo_en_cascada

http://es.wikipedia.org/wiki/Hojas_de_estilo_en_cascada

http://es.wikipedia.org/w/index.php?title=Script_del_lado_del_cliente&action=edit&redlink=1

http://es.wikipedia.org/wiki/Imagen_digital

http://es.wikipedia.org/wiki/Servidor_web

http://es.wikipedia.org/wiki/Intranet

http://es.wikipedia.org/wiki/Servidor

http://es.wikipedia.org/wiki/Protocolo_de_transferencia_de_hipertexto

http://es.wikipedia.org/wiki/Aplicaci%C3%B3n_inform%C3%A1tica

http://es.wikipedia.org/wiki/Aplicaci%C3%B3n_inform%C3%A1tica

http://es.wikipedia.org/wiki/Lenguaje_de_programaci%C3%B3n_interpretado

http://es.wikipedia.org/wiki/JavaScript

22



generan, al ser solicitadas, son creadas por una aplicación en el servidor web que alberga

las mismas.

Respecto a la estructura de las páginas web, algunos organismos, en especial el W3C,

suelen establecer directivas con la intención de normalizar el diseño, y para así facilitar y

simplificar la visualización e interpretación del contenido.

http://definicion.de/pagina-web/

2.1.4 TIPOS DE PÁGINAS WEB

Una página web sirve para mostrar el trabajo de una persona, una empresa o una

organización y puede ser mediante una web de contenido estático o dinámico.

Un sitio web estático es uno que tiene contenido que no se espera que cambie

frecuentemente y se mantiene manualmente por alguna persona o personas que usan

algún tipo de programa editor. La información que contiene se actualiza anualmente y son

cambios sencillos, una foto o email.

Se utilizan programas editores donde se manipula y cambia el código de programación.

Un ejemplo de programa utilizado es el Adobe Dreamweaver.

Un sitio web dinámico es uno que puede necesitar que la información se cambie con

cierta frecuencia como sucede en los portales con ofertas y noticias. Cuando se entra en

este tipo de página web, se hace un "llamado" al servidor, que genera la página

automáticamente.

Existen distintos tipos de programación dinámica, entre los que destacan PHP, Active

Server Pagés (ASP), y Java Server Pagés (JSP). Parte del contenido se puede mostrar a

través de Flash.

Este tipo de sitios dinámicos suelen tener base de datos.

Si te ha interesado este tema, también te puede interesar leer las Tecnologías de Diseño

Web.

http://es.wikipedia.org/wiki/World_Wide_Web_Consortium


http://www.creaciondepaginaweb.net/tecnologias-paginas-web.htm

http://www.creaciondepaginaweb.net/tecnologias-paginas-web.htm

23



Beneficios y Aplicaciones

Una página web es en esencia una tarjeta de presentación digital, ya sea para empresas,

organizaciones, o personas, así como una tarjeta de presentación de ideas y de

informaciones y de teorías. Así mismo, la nueva tendencia orienta a que las páginas web

no sean sólo atractivas para los internautas, sino también optimizadas (preparadas) para

los buscadores a través del código fuente. Forzar esta doble función puede, sin embargo,

crear conflictos respecto de la calidad del contenido.

Si hablamos de posicionamiento web, una página web es la base para optimizar todo un

sitio web el cual es un conjunto de páginas web.

Definiciones, siglas y abreviaturas

Sitio web: Conjunto de archivos electrónicos y páginas web referentes a un tema en

particular que incluye una página inicial de bienvenida, con un nombre de dominio y

dirección en Internet específicos.

Interfaz: Parte del programa informático que permite el flujo de información

entre varias aplicaciones o entre el propio programa y el usuario.

Intranet: Parte privada de la aplicación donde sólo tendrán acceso a la información

los usuarios que estén registrados.

Navegador: Permite al usuario recuperar y visualizar páginas web a través de Internet.

Servidor web: Se trata de un programa que implementa el protocolo HTTP (Hipertexto

Transfer Protocol). Este protocolo está diseñado para transferir lo que llamamos

hipertextos, páginas web o páginas HTML: textos complejos con enlaces, figuras,

formularios, botones y objetos incrustados como animaciones o reproductores de

música.

Centro: Sitios donde se imparten los niveles de educación primaria.

Etapa educativa: Cada uno de los tramos en los que se estructura el sistema educativo

español.

24



2.2 MARCO TEORICO

Actualmente es importante reconocer la importancia y el auge de los Sitios Web para

dar a conocer y difundir los procesos EDUCATIVOS dentro de la comunicación que

se adelantan en las instituciones educativas de un pueblo, ciudad, país y el mundo,

como también para realizar a través de ellos intercambios educativos, culturales, entre

otros.

Un sitio web es un sitio (localización) en la World Wide Web que contiene documentos

(páginas web) organizados jerárquicamente. Cada documento (página web) contiene

texto y o gráficos que aparecen como información digital en la pantalla de un ordenador.

Un sitio puede contener una combinación de gráficos, texto, audio, vídeo, y otros

materiales dinámicos o estáticos.

Cada sitio web tiene una página de inicio (en inglés Home Page), que es el primer

documento que ve el usuario cuando entra en el sitio web poniendo el nombre del

dominio de ese sitio web en un navegador. El sitio normalmente tiene otros documentos

(páginas web) adicionales. Cada sitio pertenece y es gestionado y por un individuo, una

compañía o una organización.

Como medio, los sitios web son similares a las películas, a la televisión o a las

revistas, en que también crean y manipulan imágenes digitales y texto, pero un sitio web

es también un medio de comunicación. La diferencia principal entre un sitio web y los

medios tradicionales es que un sitio web está en una red de ordenadores (Internet) y

está codificado de manera que permite que los usuarios interactúen con él.

Todos los sitios web públicamente accesibles constituyen una gigantesca

"World Wide Web" de information.

Los sitios web están escritos en HTML (Hyper Text Markup Language), o dinámicamente

convertidos a éste y se acceden usando un software llamado navegador web, también

http://www.masadelante.com/faq-dominio.htm

http://www.masadelante.com/faq-que-es-un-navegador.htm

http://www.masadelante.com/faq-internet.htm


http://es.wikipedia.org/wiki/Navegador_web

25



conocido como un cliente HTTP. Los sitios web pueden ser visualizados o accedidos

desde un abanico de dispositivos con disponibilidad de Internet como computadoras

personales, computadores portátiles, PDAs y teléfonos móviles.

Un sitio web está alojado en una computadora conocida como servidor web, también

llamada servidor HTTP, y estos términos también pueden referirse al software que se

ejecuta en esta computadora y que recupera y entrega las páginas de un sitio web en

respuesta a peticiones del usuario. Apache es el programa más comúnmente usado

como servidor web (según las estadísticas de Netcraft) y el Internet Information

Services (IIS) de Microsoft también se usa comúnmente.

Un sitio web estático es uno que tiene contenido que no se espera que cambie

frecuentemente y se mantiene manualmente por alguna persona o personas que usan

algún tipo de programa editor. Hay dos amplias

Categorías de programas editores usados para este propósito que son:

Editores de texto como Notepad, donde el HTML se manipula

directamente en el programa editor o Editores WYSIWYG como por ejemplo

Microsoft FrontPage y Adobe Dreamweaver, donde el sitio se edita usando

una interfaz GUI y e HTML subyacente se genera automáticamente con el

programa editor WebSite.

Un sitio web dinámico es uno que puede tener cambios frecuentes en la información.

Cuando el servidor web recibe una petición para una determinada página de un sitio

web, la página se genera automáticamente por el software como respuesta directa a la

petición de la página; Por lo tanto abriendo muchas posibilidades incluyendo por

ejemplo: El sitio puede mostrar el estado actual de un diálogo entre usuarios,

monitorizar una situación cambiante, o proporcionar información personalizada de alguna

manera a los requisitos del usuario individual.

El contenido estático puede también ser generado de manera dinámica periódicamente o

si ocurren ciertas condiciones para la regeneración para evitar la pérdida de

rendimiento de iniciar el motor dinámico para cada usuario o para cada conexión.

Hay plugins disponibles para navegadores, que se usan para mostrar contenido activo

http://es.wikipedia.org/wiki/Alojamiento_web

http://es.wikipedia.org/wiki/Servidor_web

http://es.wikipedia.org/wiki/Software

http://es.wikipedia.org/wiki/Servidor_HTTP_Apache

http://es.wikipedia.org/w/index.php?title=Netcraft&action=edit&redlink=1

http://es.wikipedia.org/wiki/Internet_Information_Services

http://es.wikipedia.org/wiki/Internet_Information_Services

http://es.wikipedia.org/wiki/Microsoft

http://es.wikipedia.org/wiki/Editor_de_texto

http://es.wikipedia.org/wiki/Notepad

http://es.wikipedia.org/wiki/WYSIWYG

http://es.wikipedia.org/wiki/Microsoft_FrontPage

http://es.wikipedia.org/wiki/Adobe_Dreamweaver

http://es.wikipedia.org/wiki/Adobe_Dreamweaver

http://es.wikipedia.org/wiki/GUI

http://es.wikipedia.org/wiki/Plugin

26



como Flash, Shockwave o applets escritos en Java. El HTML dinámico también

proporciona para los usuarios interactividad y el elemento de actualización en tiempo real

entre páginas web , las páginas no tienen que cargarse o recargarse para efectuar

cualquier cambio), principalmente usando el DOM y JavaScript, el soporte de los cuales

está integrado en la mayoría de navegadores web modernos.

Últimamente, dado el compromiso social de las comunidades se recomienda que los

Sitios Web cumplan unas normas de accesibilidad para que éstos, puedan ser visitados

y utilizados por el mayor número de personas posibles independientemente de sus

limitaciones físicas o las derivadas de su entorno.

Existen muchas variedades de sitios web, cada uno especializándose en un tipo particular

de contenido o uso, y puede ser arbitrariamente clasificado de muchas maneras. para

este caso cabe destacar el sitio web educativos en el cual se promueven procesos

pedagógicos de formación a docentes, asistencia técnico pedagógica, permiten ver o

descargar políticas institucionales, eventos importantes del entorno educativo, donde los

docentes de la Institución harán su llenado de información personal, incluyendo una Base

de datos, gráficos así como conocer la Escuela por medio de esta página web, la cual

dará a conocer las funciones, metas, y propósitos a alcanzar para los alumnos de esta

Institución.

Para el diseño e implementación del sitio web, se utilizará la herramienta Adobe

Dreamweaver y Website que son editores WYSIWYG de páginas Web, creada por

Adobe (anteriormente por Macromedia). Es el programa de este tipo más utilizado en

el sector del diseño y la programación Web, por su Funcionalidades, su

integración con otras herramientas como Adobe Flash y, recientemente, por su soporte

de los estándares del World Wide Web Consortium. Su principal competidor es

Microsoft Expresión Web. Tiene soporte tanto para edición de imágenes como para

animación a través de su integración con otras herramientas.

No obstante, Adobe ha aumentado el soporte CSS y otras maneras de diseñar

páginas sin tablas en versiones posteriores de la aplicación. Dreamweaver y Website

permite al usuario utilizar la mayoría de los navegadores Web instalados en su

http://es.wikipedia.org/wiki/Macromedia_Flash

http://es.wikipedia.org/wiki/Macromedia_Shockwave

http://es.wikipedia.org/wiki/Applet

http://es.wikipedia.org/wiki/Lenguaje_de_programaci%C3%B3n_Java

http://es.wikipedia.org/wiki/HTML_din%C3%A1mico

http://es.wikipedia.org/wiki/Document_Object_Model

http://es.wikipedia.org/wiki/JavaScript

http://es.wikipedia.org/wiki/Sitio

http://es.wikipedia.org/wiki/WYSIWYG

http://es.wikipedia.org/wiki/P%C3%A1gina_web

http://es.wikipedia.org/wiki/Adobe

http://es.wikipedia.org/wiki/Macromedia

http://es.wikipedia.org/wiki/Adobe_Flash

http://es.wikipedia.org/wiki/World_Wide_Web_Consortium

http://es.wikipedia.org/wiki/Microsoft_Expression_Web

27



ordenador para pre visualizar las páginas Web. También dispone de herramientas de

administración de sitios dirigidas a principiantes como, por ejemplo, la habilidad de

encontrar y reemplazar líneas de texto y código por cualquier tipo de parámetro

especificado, hasta el sitio Web completo. El panel de comportamientos también permite

crear JavaScript básico sin conocimientos de código.

Un aspecto de alta consideración de Dreamweaver y Website es de arquitectura

extensibles. Es decir, permite el uso de "Extensiones". Las extensiones, tal y como se

conocen, son pequeños programas, que cualquier desarrollador Web puede escribir

(normalmente en HTML y JavaScript) y que cualquiera puede descargar e instalar,

ofreciendo así funcionalidades añadidas a la aplicación. Dreamweaver y WebSite goza

del apoyo de una gran comunidad de desarrolladores de extensiones que hacen posible

la disponibilidad de extensiones gratuitas y de pago para la mayoría de las tareas de

desarrollo Web, que van desde simple efectos ro llover hasta completas cartas de

compra.

Otra herramienta multimedia es Adobe FLASH (hasta 2005 Macromedia FLASH) o

FLASH se refiere tanto al programa de edición multimedia como al reproductor de SWF

(Shockwave FLASH) Adobe Flash Player, escrito y distribuido por Adobe, que

utiliza gráficos vectoriales e imágenes ráster, sonido, código de programa, flujo de

vídeo y audio bidireccional (el flujo de subida sólo está disponible si se usa

conjuntamente con Macromedia Flash Communication Server). En sentido estricto, Flash

es el entorno y Flash Player es el programa de máquina virtual utilizado para ejecutar los

archivos generados con Flash.

En versiones recientes, Macromedia ha ampliado Flash más allá de las animaciones

simples, convirtiéndolo en una herramienta de desarrollo completa, para crear

principalmente elementos multimedia e interactivos para Internet.

Entre tanto Un sitio Web (en inglés: website) es un conjunto de páginas Web,

típicamente comunes a un dominio de Internet o subdominio en la World Wide

Web en Internet Una página Web es un documento HTML/XHTML accesible

generalmente mediante el protocolo HTTP de Internet. Cada sitio Web contiene una

página de inicio (en inglés Home Page) que es el primer documento que ve el usuario

http://es.wikipedia.org/w/index.php?title=Shockwave_FLASH&action=edit

http://es.wikipedia.org/wiki/Adobe_Flash_Player

http://es.wikipedia.org/wiki/Adobe_Systems_Incorporated

http://es.wikipedia.org/wiki/Gr%C3%A1fico_vectorial

http://es.wikipedia.org/wiki/Imagen

http://es.wikipedia.org/wiki/Macromedia_Flash_Communication_Server

http://es.wikipedia.org/wiki/Programa

http://es.wikipedia.org/wiki/M%C3%A1quina_virtual

http://es.wikipedia.org/wiki/Idioma_ingl%C3%A9s


http://es.wikipedia.org/wiki/Dominio_de_Internet



http://es.wikipedia.org/wiki/Internet


http://es.wikipedia.org/wiki/HTML

http://es.wikipedia.org/wiki/Protocolo_de_red

http://es.wikipedia.org/wiki/Internet

28



cuando entra en el sitio Web poniendo el nombre del dominio de este sitio Web en un

navegador.

Al Ministerio de Comunicaciones le corresponde ejercer las funciones de planeación,

regulación y control de los servicios del sector de las telecomunicaciones, en los

servicios informáticos y de telemática, de los servicios especializados de

telecomunicaciones o servicios de valor agregado, de los servicios postales etc. de

acuerdo al numeral 1 de la Ley 72 de 1989 hasta días de hoy la Tecnología educacional.

En Zongolica, Ver. S i t i o W e b es acceso y uso de los mensajes de datos y

el comercio electrónico están regidos legalmente por la ley. A partir de 1990 se

establece de manera obligatoria para las instituciones educativas, adoptar la informática

en sus programas de estudio actualmente es una exigencia por parte del Ministerio de

Educación Nacional la implementación de los sitios web en las instituciones

educativas como medio de comunicación interactiva en los procesos de formación

integral.

La comunicación puede definirse como un fenómeno de carácter social que comprende

todos los actos mediante los cuales los seres vivos se comunican con sus semejantes

para transmitir o intercambiar información. Comunicar significa poner en común e implica

compartir.

La comunicación inicia con el surgimiento de la vida en nuestro planeta y su desarrollo

ha sido simultáneo al progreso de la humanidad. Se manifestó primero a través de un

lenguaje no verbal, evolucionando y complejizándose conforme el hombre mismo

evolucionaba.

Todos los días los seres vivos se comunican de diferentes maneras, pero sólo los

seres humanos podemos hacerlo racionalmente; llevando a cabo infinidad de

actividades, tales como: conversar, reír, llorar, leer, callar, ver televisión entre otras;

por ello se dice que la comunicación humana es un proceso:

29



Dinámico: porque está en continuo movimiento y no se limita a una

relación Emisor--->Receptor estático, pues los roles se intercambian.

Inevitable: Pues es imposible no comunicar, incluso el silencio

comunica.

Irreversible: porque una vez realizada, no puede regresar, borrarse o

ignorarse.

Bidireccional: porque existe una respuesta en ambas direcciones.

Verbal y no verbal: porque implica la utilización de ambos lenguajes - en

algunos casos.

La comunicación constituye una dimensión clave de la existencia humana. Casi

podríamos decir que la totalidad de nuestras actividades o son comunicación directa o se

asientan sobre algún hecho de comunicación.

Todo proceso de formación parte de un proceso de comunicación, por lo tanto la

formación pedagógica de una institución educativa debe estar cimentada en

instrumentos interactivos que permitan cambios en la forma de trasmitir y recibir

información y abra nuevas posibilidades de desarrollo individual y colectivo supliendo

necesidades de la comunidad y adecuando a sus miembros al ritmo que marca la

sociedad.

Se debe tener la convicción de que la escuela deber ser un espacio movilizador de la

capacidad intelectual, de la creatividad y del sentido

Innovador de sus conocimientos generados en ella al medio social en el que se halla

inserta.

30



Promover la utilización del sitio Web, como herramienta tecnológica con una finalidad

esencialmente pedagógica y de promoción , orientadora del "saber" con el objeto de

contribuir con el mejoramiento de la calidad de la Educación, que permita a la persona,

mediante el manejo de las nuevas tecnologías, entender el mundo en que vive,

comunicarse con él ,adaptarse activamente a la sociedad y conscientes de que la

comunicación es dinamizadora del crecimiento y herramienta fundamental para el

cambio y la transformación social.

A través del sitio web se logra tener una comunicación dinámica e interactiva donde el

usuario pueda tener acceso e informarse rápida y eficazmente acerca de los procesos

que suceden en el interior de una comunidad.

2.3 MARCO CONCEPTUAL.

El sitio web que se diseñó como herramienta de comunicación interactiva para

promocionar y fortalecer los procesos de formación DOCENTE de la Institución

Educativa Escuela “Gral. Ignacio Zaragoza” utilizando Herramienta Dreamweaver,

Website y estará conformado por:

a. Una página de inicio o home page. Que a su vez incluye un sub menú:

Un módulo desarrollado a través un banner dinámico, donde se presenta el nombre

de la institución, el escudo institucional educativo docentes al igual que imágenes con

efectos de flash relacionadas con muestras de la población estudiantil y en la parte

inferior enlaces con entidades oficiales como:

Educativa Escuela “Gral. Ignacio Zaragoza”.

En el menú principal aparecerán las opciones:

Chat.

Blogs institucional.

Calendario académico.

31



Un módulo desarrollado a través un banner dinámico, donde se presenta el nombre

de la institución, el escudo institucional educativo docentes al igual que imágenes con

efectos de flash relacionadas con muestras de la población estudiantil y en la parte

inferior enlaces con entidades oficiales como:

Escuela Primaria “Gral. Ignacio Zaragoza”. Zona Escolar 024-Zongolica, Ver.

En el menú inicio principal aparecerán las opciones:

Inicio Avisos Importantes (Reuniones de padres de familia).

Un primer módulo donde aparecerán los link o enlaces que son elementos de un

documento electrónico, que hace referencia a otros recursos. Estos se desarrollan así:

En el menú institucional nosotros aparecerán los enlaces que muestran:

Historia

Docentes

Organigrama institucional

Dirección y Servicios.

Visión

Misión

Valores.

En el primer enlace de este link (Reseña histórica de la institución) se desarrolla un

archivo de texto e imágenes con movimientos de los cambios ocurridos en los

espacios físicos de la institución.

En el segundo enlace (Docentes) se utiliza un archivo de texto educativo a la misión

institucional acompañado con imágenes de la misma.

En el tercero enlace (Organigrama Institucional) se utiliza un archivo de texto a lo

laboral de las actividades de cada docente acompañado con imágenes de la guarda.

En el Cuarto enlace (Dirección y Servicios) se utiliza un archivo de texto actividades

del líder organizacional a las prestaciones que lo requieren acompañado con imágenes

de la misma.

32



En el Quito enlace (Visión) se desarrolla mediante un archivo de texto e imágenes de

maestros en formación en sus actividades de práctica pedagógica.

En el Sexto enlace (misión) se utiliza un archivo de texto alusivo a la misión

institucional acompañado con imágenes de la misma.

En el Séptimo (valores) enlace se describirán los valores institucionales mediante un

archivo de texto con imágenes que guían el actuar de la comunidad normalista.

El segundo contenido se desarrolla mediante un archivo de texto complementado con

imágenes de transparencia. Aquí se describe a groso modo la intención pedagógica

del mismo y las disciplinas que de él hacen parte:

En el Segundo menú institucional Eventos aparecerán los enlaces que muestran:

Culturales

Deportivos

Artísticos

Cívicos

En el tercer contenido (Galerías) se utiliza un archivo de texto acompañado con

imágenes con efectos de movimiento y donde se esboza de manera general el fin de

este núcleo.

Galerías

El Cuarto menú o enlace se dedica a la educación docente, donde se encuentra e l

P roceso docen tes la Institución Educativa Escuela “Gral. Ignacio Zaragoza” Este se

desarrolla utilizando hipervínculos constituidos por archivos de textos e imágenes con

efectos de transparencia en PDF. Estos hipervínculos son:

Base de Datos.

33



El Sistema web de la Institución Educativa Escuela “Gral. Ignacio Zaragoza” además de

buscar la promoción y el fortalecimiento de los procesos de formación DOCENTE de

la comunidad educativa está orientado hacia el mejoramiento de los procesos de

comunicación en el contexto de las relaciones académicas, sociales, pedagógicas y

culturales de los estamentos educativos que lo integran, por lo que es claro que la

comunicación se constituye en parte importante de la base organizativa de la sociedad

actual y fortalece La calidad de vida de las personas que pertenecen a ese entorno. A

través de los medios interactivos de comunicación se genera o se trasmite variada e

interesante información que circula por el mundo. El proceso de comunicación como tal

necesita de medios que puedan hacerla efectiva y llegue la información a lugares

lejanos de forma inmediata Los medios de comunicación de igual manera, hacen

posible que muchas relaciones personales se mantengan unidas o, por lo menos, no

desaparezcan por completo. La Institución Educativa Escuela Normal “Gral. Ignacio

Zaragoza” está iniciando su proceso de comunicación interactiva utilizando medios de

comunicación digitales a través de los cuales ha hecho aportes significativos a la

comunidad académica desde su el enfoque pedagógico, enriqueciendo los procesos de

enseñanza- aprendizaje, pero sería de mayor impacto en la sociedad si utiliza

adecuadamente los medios tecnológicos y de comunicación interactiva y capacita a los

miembros de su comunidad para el perfeccionamiento de la aplicación en el campo

donde se desenvuelven, como lo contempla el decreto condiciones básicas de calidad

establecidas en el decreto del Ministerio de Educación Nacional.

34



2.4 MARCO CONTEXTUAL La Institución educativa Escuela Normal “Gral. Ignacio Zaragoza” es un establecimiento

público que ofrece los niveles de Educación Especial, Primaria básica,

Computación, ciclo complementario de formación docente, administrada por la secretaría

de educación Estado, ubicada en la siguiente dirección: Calle Miguel Hidalgo S/N.

La Escuela primaria “Gral. Ignacio Zaragoza” es una institución educativa que atiende

formación inicial de maestros para el ejercicio de la docencia en el nivel de Educación

Especial y el ciclo de básica primaria, Computación desarrolla su proceso educativo

fundamentado en la pedagogía con orientación crítico – social,

En el año 1973 la escuela Normal “Gral. Ignacio Zaragoza” Zongolica, Ver. Fue creada

por la ordenanza de la asamblea de equipo de trabajo maestros, padres de familias para

dar inicio sus labores 1982 abre sus puertas en esta ciudad. Como institución formada de

maestros, alumnos.

Época de transición acomodación organizacional, cambio de problemas económicos,

ocurren en los hechos de vital importancia para la institución: Primero se logró con ayuda

de las autoridades y padres de familia la autorización de la ubicación del terreno de fundo

legal, segundo fue la Clave de la docencia en la Secretaria de gobierno del estado

Veracruz. Tercero de contar con los espacio en el ámbito de la formación de maestros,

alumnos en la instalaciones locativas.

Los procesos de restructuración año 1982. De la escuela “Gral. Ignacio Zaragoza” donde

se favorecido la integración pedagógica de alcanzar la excelencia académica, idea que ha

tomado fuerza que la educación tenga la producción de saberes educativas que permita

la formación del maestro acorde con las exigencias y desarrollo educativo de la región y la

nación.

La institución cuenta 18 docentes, directores, Educación Especial, Computación del

personal administrativo. Para el desarrollo de este proyecto cuenta con recursos

tecnológicos como: Sala de informática con 22 computadoras, dotadas del servicio de

internet las 24 horas, Aula enciclomedia, con una fuente de alimentos, también se cuenta

35



con el apoyo del consejo directivo para el dominio del desarrollo del proyecto del Sistema

Web interesados en la publicación de la página Web de los cuales alimentaran

posteriormente el Sitio Web en su activación.

2.5 MARCO METOLOGICO

2.5.1 TIPO DE INVESTIGACIÓN

En la línea de investigación en el desarrollo de este proyecto consiste en el “Diseño

implementación de un Sistema Web para la administración Escolar”. Es la

investigación tecnológica aplicada entendida para que genere conocimientos métodos

dirigidos educativos preste un servicio ya que con el enlace de esta página Web. Mejora

con el fin de hacerlo productivo eficiente de obtener competitividad de la escuela “Gral.

Ignacio Zaragoza para resolver problemas de la vida cotidiana. Además es un

instrumento para poder resolver problema de la sociedad, ciencia tecnológica informática

tiene como causas las necesidades de que el ser humano viva con más comunidad y

seguridad. Por todo lo anterior este tipo de investigación es necesario para impulsar el

desarrollo Sistema Web en su localidad.

La idea del Diseño Sistema Web es de la utilidad del conocimiento considerado que la

función elemental en el organismo va estrechado asociado a sus necesidades

subsistencia mediante mecanismo de adaptación al medio y control del Sitio Web. Aunque

en la utilidad como criterio máximo adquiere nuevos conocimientos orientados a

conseguir un logro específico practico en particular. Dado a Los resultados de esta

investigación tienen como fin ser válidos para la realización de Configurar un Sistema

Web para dar origen a una innovación del proceso “Diseño implementación de un

Sistema Web para la administración Escolar”. Mediante la aplicación de la

investigación aplicada en las posibilidades de crear nuevas ideas de la docencia que

aportan significativos a la docencia desde cualquier ámbito administrativo.

36



2.5.2 TIPO DE APLICACIÓN DE SOFTWARE DISEÑADO

El tipo de aplicativo a desarrollar a través de éste proyecto es el sitio web. A través de la

implementación de esta aplicación se pretende promocionar y fortalecer los procesos de

formación docente que suceden en el interior de la Institución “Gral. Ignacio Zaragoza”

en el “Diseño implementación de un Sistema Web para la administración

Escolar”para darla a conocer no solo en el ámbito regional sino también en el nacional,

además mejorar los procesos de comunicación mediante el uso del medio

tecnológico como lo es la internet.

El diseño de este sitio está enfocado al uso de la comunidad educativa, la comunidad

circundante y el país en general.

Para el desarrollo de esta aplicación se utilizará la herramienta Adobe Dreamweaver,

WebSite de la cuál será útil para la creación de este sitio, ya que proporciona una

combinación de herramientas visuales y auditivas que hacen que éste sea más

llamativo. La versión es FLASH CS4, El software de ésta herramienta pertenece a

Adobe Systems y su tipo de licenciamiento es no libre.

Esta herramienta será utilizada:

En la Creación de Hipervínculos.

En el diseño gráfico de las interfaces.

En la aplicación Web Dinámicas.

Para reproducir imágenes en Flash.

En la reproducción de audio.

En la reproducción de imagen con transparencia.

Técnicas De Recolección De La Información

Para recolectar la información que permitiera la validación de esta propuesta se utilizó

la encuesta, la cual consiste en obtener información de los sujetos de estudio,

proporcionada por ellos mismos, sobre opiniones, actitudes o sugerencias. Hay dos

maneras de obtener información con este método: la entrevista y el cuestionario,

aplicando en este caso el segundo de manera individual, para la que se elaboró una

encuesta como instrumento de estudio.

http://www.monografias.com/trabajos5/psicoso/psicoso.shtml#acti

http://www.monografias.com/trabajos12/recoldat/recoldat.shtml#entrev

http://www.monografias.com/trabajos15/disenio-cuestionarios/disenio-cuestionarios.shtml

37



2.5.3 IMPLEMENTACIÓN

TECNOLOGIAS UTILIZADAS EN EL DESARROLLO DEL CONOCIMENTO

2.5.3.1 HTML y XHTML

HTML, siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es

el lenguaje de marcado predominante para la elaboración de páginas web. Es usado

para describir la estructura y el contenido en forma de texto, así como para

complementar el texto con objetos tales como imágenes. HTML se escribe en forma de

"etiquetas", rodeadas por corchetes angulares (<,>).

El lenguaje HTML es un estándar reconocido en todo el mundo y cuyas normas define

un organismo sin ánimo de lucro llamado World Wide Web Consortium, más conocido

como W3C. Como se trata de un estándar reconocido por todas las empresas

relacionadas con el mundo de Internet, una misma página HTML se visualiza de forma

muy similar en cualquier navegador de cualquier sistema operativo. El propio W3C

define el lenguaje HTML como "un lenguaje reconocido universalmente y que permite

publicar información de forma global".

Por convención, los archivos de formato HTML usan la extensión .htm o .html.

XHTML es el sucesor de HTML. XHTML, acrónimo inglés de eXtensible Hypertext

Markup Language (lenguaje extensible de marcado de hipertexto), es el lenguaje de

marcado pensado para sustituir a HTML como estándar para las páginas web. XHTML

es la versión XML de HTML, por lo que tiene, básicamente, las mismas funcionalidades,

pero cumple las especificaciones, más estrictas, de XML.

XHTML tiene como objetivo avanzar en el proyecto del W3C de lograr una web

semántica, donde la información, y la forma de presentarla estén claramente

separadas. En este sentido, XHTML serviría únicamente para transmitir la información

que contiene un documento, dejando para hojas de estilo y JavaScript su aspecto y

diseño en distintos medios.

38



2.5.3.2 CSS

Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje formal

usado para definir la presentación de un documento estructurado escrito en HTML o

XML (y por extensión en XHTML). El W3C es el encargado de formular la especificación

de las hojas de estilo que servirá de estándar para los agentes de usuario o

navegadores.

La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un

documento de su presentación. La información de estilo puede ser adjuntada tanto como

un documento separado o en el mismo documento HTML. En este último podrían

definirse estilos generales en la cabecera del documento o en cada etiqueta particular

mediante el atributo "style". Las ventajas de utilizar CSS (u otro lenguaje de estilo) son:

Control centralizado de la presentación de un sitio web completo, con lo que se agiliza

de forma considerable la actualización del mismo.

Los navegadores permiten a los usuarios especificar su propia hoja de estilo local que

será aplicada a un sitio web remoto, con lo que aumenta considerablemente la

accesibilidad. Una página puede disponer de diferentes hojas de estilo según el

dispositivo que la muestre. El documento HTML en sí mismo es más claro de entender y

se consigue reducir considerablemente su tamaño.

2.5.3.3 JavaScript, jQuery y AJAX

JavaScript es un lenguaje interpretado utilizado principalmente en páginas web, con una

sintaxis semejante a la del lenguaje Java. Sin embargo, al contrario que Java, JavaScript

no es un lenguaje orientado a objetos propiamente dicho, ya que no dispone de herencia.

Es más bien un lenguaje basado en prototipos, ya que las nuevas clases se generan

clonando las clases base (prototipos) y extendiendo su funcionalidad.

Todos los navegadores interpretan el código JavaScript integrado dentro de las páginas

web. Para interactuar con una página web se provee al lenguaje JavaScript de una

implementación del DOM (Modelo de Objetos del Documento). JavaScript se ejecuta en

el agente de usuario al mismo tiempo que las sentencias van descargándose junto con el

código HTML.

39



jQuery es una biblioteca o framework de JavaScript que permite simplificar la manera de

interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos,

desarrollar animaciones y agregar interacción con la tecnología AJAX a páginas web.

jQuery, al igual que otras bibliotecas, ofrece una serie de funcionalidades basadas en

JavaScript que de otra manera requerirían de mucho más código, es decir, con las

funciones propias de esta biblioteca se logran grandes resultados en menos tiempo y

espacio.

2.5.3.4 AJAX

Acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es una

técnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet

Applications). Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de

los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo

plano. De esta forma es posible realizar cambios sobre las páginas sin necesidad de

recargarlas, lo que significa aumentar la interactividad, velocidad y usabilidad en las

aplicaciones.

2.5.3.5 PHP

PHP es un lenguaje interpretado de propósito general ampliamente usado, diseñado

especialmente para desarrollo web y que puede ser incrustado dentro de código HTML.

Generalmente se ejecuta en un servidor web, tomando el código en PHP como su

entrada y creando páginas web como salida. Puede ser desplegado en la mayoría de los

servidores web y en casi todos los sistemas operativos y plataformas sin costo alguno.

PHP se encuentra instalado en más de 20 millones de sitios web y en un millón de

servidores. Es también el módulo Apache más popular entre las computadoras que

utilizan Apache como servidor web.

El gran parecido que posee PHP con los lenguajes más comunes de programación

estructurada, como C y Perl, permiten a la mayoría de los programadores crear

aplicaciones complejas con una curva de aprendizaje muy corta. También les permite

involucrarse con aplicaciones de contenido dinámico sin tener que aprender todo un

nuevo grupo de funciones.

Aunque todo en su diseño está orientado a facilitar la creación de página web, es

40



posible crear aplicaciones con una interfaz gráfica para el usuario, utilizando la

extensión PHP-Qt o PHP-GTK. También puede ser usado desde la línea de órdenes,

de la misma manera como Perl o Python pueden hacerlo; a esta versión de PHP se la

llama PHP-CLI (Command Line Interface).

Cuando el cliente hace una petición al servidor para que le envíe una página web, el

servidor ejecuta el intérprete de PHP. Éste procesa el script solicitado que generará el

contenido de manera dinámica (por ejemplo obteniendo información de una base de

datos). El resultado es enviado por el intérprete al servidor, quien a su vez se lo envía al

cliente. Mediante extensiones es también posible la generación de archivos PDF, Flash,

así como imágenes en diferentes formatos.

Permite la conexión a diferentes tipos de servidores de bases de datos tales como

MySQL, Postgres, Oracle, ODBC, DB2, Microsoft SQL Server, Firebird y SQLite. PHP

también tiene la capacidad de ser ejecutado en la mayoría de los sistemas operativos,

tales como UNIX (y de ese tipo, como Linux o Mac OS X) y Windows, y puede

interactuar con los servidores de web más populares ya que existe en versión CGI,

módulo para Apache, e ISAPI. PHP es una alternativa a las tecnologías de Microsoft

ASP y ASP.NET, a ColdFusion de la compañía Adobe, a JSP/Java de Sun Microsystems,

y a CGI/Perl.

2.5.3.6 SQL

El lenguaje de consulta estructurado (SQL Structured Query Language) es un lenguaje

declarativo de acceso a bases de datos relacionales que permite especificar diversos

tipos de operaciones sobre las mismas. Una de sus características es el manejo del

álgebra y el cálculo relacional permitiendo lanzar consultas con el fin de recuperar de

una forma sencilla información de interés de una base de datos, así como también hacer

cambios sobre la misma.

2.5.3.7 MySQL

MySQL es un sistema de gestión de base de datos relacional, multihilo y multiusuario

con más de seis millones de instalaciones. MySQL AB desarrolla MySQL como software

libre en un esquema de licenciamiento dual. Por un lado se ofrece bajo la GNU GPL

para cualquier uso compatible con esta licencia, pero para aquellas empresas que

41



quieran incorporarlo en productos privativos deben comprar a la empresa una licencia

específica que les permita este uso. Está desarrollado en su mayor parte en ANSI C.

MySQL es muy utilizado en aplicaciones web como MediaWiki, Amazon, Yahoo, Flickr o

Drupal; en plataformas (Linux/Windows-Apache-MySQL-PHP/Perl/Python), y por

herramientas de seguimiento de errores como Bugzilla. Su popularidad como aplicación

web está muy ligada a PHP.

2.5.3.8 PhpMyAdmin

PhpMyAdmin es una herramienta escrita en PHP con la intención de manejar la

administración de MySQL a través de páginas web, utilizando Internet. Actualmente

puede crear y eliminar bases de datos, crear, eliminar y alterar tablas, borrar, editar y

añadir campos, ejecutar cualquier sentencia SQL, administrar claves en campos,

administrar privilegios, exportar datos en varios formatos y está disponible en 50

idiomas. Se encuentra disponible bajo la licencia GPL.

2.5.3.9 StarUML

StarUML es un proyecto de software libre que intenta reemplazar las herramientas de

UML comerciales tales como Rational Rose. Se ha utilizado para desarrollar el

diagrama de clases y los diagramas de casos de uso en la etapa de análisis del

proyecto. Debido a su interfaz intuitiva, se trata de una herramienta fácil de manejar

para el usuario.

2.5.3.10 Adobe Dreamweaver

Adobe Dreamweaver es una aplicación en forma de estudio enfocada a la construcción y

edición de sitios y aplicaciones web basadas en estándares. Es el programa de este tipo

más utilizado en el sector del diseño y la programación web, por sus funcionalidades, su

integración con otras herramientas como Adobe Flash y, recientemente, por su soporte de

los estándares del W3C. Su principal competidor es Microsoft Expression Web y tiene

soporte tanto para edición de imágenes como para animación a través de su integración

con otras. Las versiones originales de la aplicación se utilizaban como simples editores

WYSIWYG. Sin embargo, versiones más recientes soportan otras tecnologías web como

CSS, JavaScript y algunos frameworks del lado servidor. Esta aplicación está disponible

tanto para la platafoma MAC como para Windows, aunque también se puede ejecutar en

42



plataformas basadas en UNIX utilizando programas que implementan las API's de

Windows, tipo Wine.

2.5.3.11 DBDesigner

DBDesigner es un sistema totalmente visual de diseño de bases de datos, que

combina características y funciones profesionales con un diseño simple, muy claro y

fácil de usar, a fin de ofrecer un método efectivo para gestionar una base de datos.

Permite administrar la base de datos, diseñar tablas, hacer peticiones SQL manuales,

ingeniería inversa en MySQL, Oracle, MSSQL y otras bases de datos ODBC, modelos

XML y soporte para la función drag-and-drop.

43



CAPITULO III. PROCEDIMENTOS Y/O DESCRIPCION DE ACTIVIDADES

REALIZADAS

3.1 MODELO DE DESARROLLO

3.1.1 MODELO EN CASCADA (BENNINGTOM 1956)

El más conocido, está basado en el ciclo convencional de una ingeniería, el paradigma del

ciclo de vida abarca las siguientes actividades:

Ingeniería y Análisis del Sistema: Debido a que el software es siempre parte de un

sistema mayor el trabajo comienza estableciendo los requisitos de todos los elementos

del sistema y luego asignando algún subconjunto de estos requisitos al software.

Análisis de los requisitos del software: el proceso de recopilación de los requisitos se

centra e intensifica especialmente en el software. El ingeniero de software (Analistas)

debe comprender el ámbito de la información del software, así como la función, el

rendimiento y las interfaces requeridas.

Diseño: el diseño del software se enfoca en cuatro atributos distintos del programa: la

estructura de los datos, la arquitectura del software, el detalle procedimental y la

caracterización de la interfaz. El proceso de diseño traduce los requisitos en una

representación del software con la calidad requerida antes de que comience la

Ingeniería y Análisis

del Sistema

Análisis de los

Requisitos

Diseño

Codificación

Prueba

Mantenimiento

44



codificación.

Codificación: el diseño debe traducirse en una forma legible para la máquina. El paso de

codificación realiza esta tarea. Si el diseño se realiza de una manera detallada la

codificación puede realizarse mecánicamente.

Prueba: una vez que se ha generado el código comienza la prueba del programa. La

prueba se centra en la lógica interna del software, y en las funciones externas, realizando

pruebas que aseguren que la entrada definida produce los resultados que realmente se

requieren.

Mantenimiento: el software sufrirá cambios después de que se entrega al cliente. Los

cambios ocurrirán debido a que hayan encontrado errores, a que el software deba

adaptarse a cambios del entorno externo (sistema operativo o dispositivos periféricos), o

debido a que el cliente requiera ampliaciones funcionales o del rendimiento.

Según Wikipedia el desarrollo en cascada, también llamado modelo en cascada, es el

enfoque metodológico que ordena rigurosamente las etapas del proceso para el desarrollo

de software, de tal forma que el inicio de cada etapa debe esperar a la finalización de la

etapa anterior.

Un ejemplo de una metodología de desarrollo en cascada es:

1. Análisis de requisitos.

2. Diseño del Sistema.

3. Diseño del Programa.

4. Codificación.

5. Pruebas.

6. Implantación.

7. Mantenimiento.

De esta forma, cualquier error de diseño detectado en la etapa de prueba conduce

necesariamente al rediseño y nueva programación del código afectado, aumentando los

costos del desarrollo. La palabra cascada sugiere, mediante la metáfora de la fuerza de la

gravedad, el esfuerzo necesario para introducir un cambio en las fases más avanzadas de

un proyecto. http://es.wikipedia.org/wiki/Desarrollo_en_cascada

http://es.wikipedia.org/wiki/Proceso_para_el_desarrollo_de_software

http://es.wikipedia.org/wiki/Proceso_para_el_desarrollo_de_software

http://es.wikipedia.org/wiki/Desarrollo_en_cascada

45



3.2 ANALISIS DE REQUERIMIENTOS

Definiremos los requisitos de las necesidades de los usuarios finales para desarrollar el Software

y determinar qué los objetivos específicos y el objetivo general se cumpla, por ello partimos desde

un análisis de como querían ellos que realizáramos su proyecto con una serie de entrevistas,

preguntas, cuestionarios, comentarios y sugerencias de parte de nosotros de cómo se podría

realizar de varias maneras y después de congeniar con nuestros cliente, desarrollar una bueno

conclusión de como seria.

Por ello requerimos que los Asesores y Personal, nos dieran el tiempo y facilidades para

requerir todas las especificaciones que ellos quieren que se obtengan en la realización del

Proyecto.

Unas de las preguntas que realizamos fueron estas.

1. ¿En qué año empezó a fungir la Escuela General Ignacio Zaragoza? 2. ¿Jefe o Director de la Escuela? 3. ¿Personal interno con el que cuenta, y que función desempeñan dentro de las

Aulas? 4. ¿Cuántos son los alumnos que estudian y cuál es su desempeño? 5. ¿Con cuántos profesores cuenta en la escuela donde se imparte la educación, y de

dónde provienes? 6. ¿Cuál es la historia de la Escuela y cómo fue su evolución? 7. ¿Misión, Visión, y Valores que tiene como Escuela? 8. ¿Cuáles son los logros que han tenido? 9. ¿La información que ustedes manejan está de forma clasificada y ordenada?

SI__, NO__ ¿Por qué?

10. ¿Tiene a alguien encargado de toda esta información que se está almacenando día con día? SI__, NO__. ¿Quién es esta persona y cuál es su función?

11. ¿Tiene alguna programa donde almacenan su de información? SI __, NO__. ¿Por qué?

12. Tienen alguna página web oficial, para ser reconocidos socialmente. SI__, NO__. ¿Por qué?

13. Le gustaría a usted que se desarrollara una página web, para que se dé a conoces la Escuela y así implementarle es esta página un apartado para realizar el proceso que tienen con docentes.

46



SI__, NO__. ¿Por qué?

14. ¿Que desearía que tuviera esta página como inicio y que funciones usted le gustaría que hiciera en unas breves palabras?

A través de esta preguntar partimos para empezar a realizar nuestro sistema y que funcionalidades tendrían y como seria su diseño, que más adelante hablaremos de ellos; también de cual serían los programas que ocuparíamos y si tendría un alojamiento y donde estaría si de manera local o ellos nos proporcionarían el pago de su alojamiento.

3.3 DISEÑO DE INTERFACES.

Estas parte se definieron la descripción que llevara nuestro Sistema Web y la estructuración, así

como la especificación de cada una de sus partes y lo que realizaran y como se combinaran entre

ellas.

Lo primero que se realizará como objetivo, el conjunto de funciones que van a estar asociadas y

sus relaciones.

Lo que primero que realizamos fue los diagramas de caso de uso lo cual nos daría como realizar

el diseño.

Mostraremos los diagramas de Caso de Uso figura (1.1).

Figura (1.1)

47



Muestra la Conexión para la base de datos Figura (1.2).

Figura (1.2)

3.3.1 Diseño

El diseño en el proceso que extiende, se organiza los aspectos detectados en el proceso del modelado para generar una especificación rigurosa del Sistema de información siempre orientado a la obtención de la solución del Sistema Web.

Para el Diseño del Sistema Web se ha escogido una arquitectura de tres capas

(presentación (Usuario), Docentes y administradores). Para la utilización de esta

arquitectura figura (1.3) de sus distintos niveles que sean independientes en sus interface

y comportamiento de las clases en el nivel de aplicación sin que ello influya en las otras

capas.

ESQUEMA BÁSICO DE LA ARQUITECTURA DE TRES CAPAS PARA DOCENTES.

figura (1.3)

48



3.3.2 Capa de presentación

La Capa de presentación se puede definir con el conjunto de componentes Software que implementación la interacción con los usuarios a través de una representación visual de la aplicación, proporcionando a los usuarios una forma de acceder y controlar los datos y los servicios de los objetos. A partir de la interfaz gráfica, el usuario podría navegar por las distintas páginas para poder obtener toda la información que desee, o apartarla en caso de ser necesario.

A continuación se muestra el Sistema Web de la página de Inicio (figura (1.5)) también se mostrara la Pagina de Home, Figura (1.6) en anexos se presentaran todas las páginas.

Figura (1.5)

49



Figura (1.6).

50



3.3.3 PROCESOS DISEÑO IMPLEMENTACIÓN SISTEMA WEB. Figura (1.7)

3.3.4 CAPA DE DISEÑO SISTEMA WEB EN SU APLICACIÓN.

La capa docentes se puede definir como el conjunto de componentes Software que complementa el diseño de la clase del dominio especificado en la fase del modelado conceptual Sistema Web. En los Niveles de presentación no accede a la BD. Directamente sino que se comunica a la capa de servicio deseado aplica la comunicación de la capa persistente para la recopilación información de enlace usuario, docente, Administrado.

Figura (1.8) Capa del proyecto

51



Representa en las diferentes clases docentes que corresponde a las clases, con los ficheros del diagrama tipos de estructura en los elementos del sistema Web. Los elementos son Administrador, usuario, Profesor, administrador, Nivel, que tienen la siguiente estructura:

Atributos: Define la propiedades del docente.

- Método constructor: Crea una instancia del elemento y da valor a sus atributos. - Métodos get y set: Devuelven o establecen el valor de los atributos del elemento. - Método leer: Dado un identificador, recupera de la base de datos las propiedades del elemento con ese identificador. - Método insertar: Inserta en la base de datos un elemento con los atributos que se supone se han establecido previamente con llamadas a métodos set docentes. - Método modificar: Modifica en la base de datos un elemento con los atributos que se supone se han establecido previamente con llamadas a métodos set. - Método eliminar: Dado un identificador, elimina de la base de datos el elemento con ese identificador. - Método visualizar: Muestra el valor de los atributos de un elemento. Los elementos son usuarios, Profesores, Administradores y tienen la siguiente estructura: - Atributos: Define las propiedades de la colección de elementos. - Método constructor: Crea una instancia de la “rellena “con los elementos que toque en función del valor de los parámetros que se le han pasado. - Método obtener Lista: Devuelve docentes en la BD. - Método cantidad Elementos: Devuelve la cantidad de elementos.

- Método visualizar: Realiza la llamada al método visualizar sobre los distintos elementos que conforman la colección y devuelve una tabla con los datos. La capa de persistencia o datos docentes.

La capa de persistencia se puede definir como el conjunto de componentes del Software que proporcionan los servicios que permiten los objetos del dominio interactuar con su repositorio permanente asociado. En el Diseño Del Sistema Web en la capa de persistencia corresponde con la base de datos de la aplicación y las distintas tablas que lo confirman. En el Administrador, Muestra en el diagrama Entidad y Relación implementación de la base de datos de

nuestro Sistema Web.

52



3.4 DISEÑO DEL PROGRAMA.

Se buscaran todas las herramientas que se involucraran en nuestro sistema así como las

peticiones de los usuarios, ya que la problemática de los usuarios es no saber cómo manipular un

Sistema, por ello se buscaran facilidades de operar el Sistema de Datos personales.

Por esta razón se realizar algoritmos necesarios para el cumplimiento de los requerimientos del

usuario así como también el análisis necesario para saber que herramientas utilizar en la etapa de

Codificación.

Por esta misma razón se realizaron a través de los casos de uso la descripción de como seria su

desarrollo de nuestro Sistema Web.

Casos de Uso del lado de los Usuarios

(Usuario, Maestro y Administrador) Sistema Web Escolar Usuario,

Maestro y Administrador– Sistema Web Escolar CASO DE USO CU1-001

Sistema Web Escolar (Escuela Primaria Gral. Ignacio Zaragoza)

ACTOR Usuario, Maestro, Administrador

DESCRIPCIÓN El usuario, maestro o administrador. Decide entrar al Navegador Web e ingresa el nombre del dominio del sistema web escolar, por lo cual el usuario conocerá las funciones que se realizan en la institución, pero el profesor aparte de conocer el sistema podrá acceso al proceso de docentes donde llenara su información. Y el administrador se encargara de sustentar todo el sistema

PRECONDICIÓN 1. Que el maestro o usuario entre a al navegador web 2. Ingresar al nombre del dominio de la institución, en la

barra del explorador de la web.

CURSO NORMAL ACTOR

SISTEMA

1. entra a al navegador web 2. Ingresa el nombre de dominio

3. aparece el inicio del Sistema Web Escolar

CURSO ALTERNATIVO ACTOR

SISTEMA

POSCONDICIONES 1. Encabezado, 2. Pie de página, 3. Enlaces, 4. Noticias, 5. Mensajes Importantes, 7. Noticias, 8. Imágenes, 9. Videos.

53



Usuario, Maestro y Admistrador - Nosotros

CASO DE USO CU2-000 Nosotros

ACTOR Usuario, Maestro o Administrador

DESCRIPCIÓN Es un Botón, y el usuario, maestro o Administrador pueden dar clip y entra a los despliegues que tiene.

PRECONDICIÓN 1. Entrar al sistema web escolar

CURSO NORMAL ACTOR

SISTEMA

1 Entra al inicio y da clip al botón Nosotros

2. despliega botones o pestanas que me lleva a otras ventanas.


SISTEMA

1.Botón regresar 2. regresa a CU1

POSCONDICIONES Lleva a las paginas de misión, visión y valores, dirección, Docentes y Organigrama institucional

Usuario, Maestro y Admistrador – Organigrama Institucional

CASO DE USO CU2-001 Organigrama Institucional

ACTOR Usuario, Maestro Administrador

DESCRIPCIÓN Es botón nos lleva a conocer como está conformada la institución internamente y que personal está laborando.

PRECONDICIÓN Entra al Sistema Web Dar clip al botón nosotros

CURSO NORMAL ACTOR

SISTEMA

1 Entra al inicio y da clip al botón Nosotros 3. da clip en el botón Organigrama Institucional

2. despliega botones de acceso de sistema 4. Nos despliega la venta.


SISTEMA

1.Botón regresar Sistema regresa a CU1

POSCONDICIONES La ventana se mostró correctamente

54



Usuario, Maestro y Admistrador – Dirección y Servicios

CASO DE USO CU2-002 Dirección y Servicios


DESCRIPCIÓN Es botón nos lleva a que personas están trabajando dentro de la dirección y como está conformada, también que servicios ofrece la institución.


CURSO NORMAL ACTOR

SISTEMA

1 Entra al inicio y da clip al botón Nosotros 3. da clip en el botón Dirección y Servicios



SISTEMA



Usuario, Maestro y Admistrador – Docentes

CASO DE USO CU2-003 Docentes


DESCRIPCIÓN Es botón nos lleva a que personas están trabajando dentro de toda la institución y que cargo tienen, desde el que está en la dirección hasta los de mantenimiento.


CURSO NORMAL ACTOR

SISTEMA

55



1 Entra al inicio y da clip al botón Nosotros 3. da clip en el botón Dirección y Docentes



SISTEMA



Usuario, Maestro y Admistrador – Misión, Visión y Valores

CASO DE USO CU2-003 Misión, Visión y Valores

ACTOR Usuario, Maestro y Administrador

DESCRIPCIÓN Es botón nos lleva a conoces los principales fundamentos por los cuales, esta institución brinda sus servicios.


CURSO NORMAL ACTOR

SISTEMA

1 Entra al inicio y da clip al botón Nosotros 3. da clip en el botón Misión, Visión y Valores



SISTEMA



Usuario, Maestro y Admistrador – Eventos

CASO DE USO CU3-000 Eventos

ACTOR Usuario, Maestro y Administrador

DESCRIPCIÓN Es un Botón, y el usuario, maestro o administrador puede dar clip y entrar a los despliegues que tiene que son 5

PRECONDICIÓN Entes debe de entrar a la internet Ingresar el dominio de la institución

56



CURSO NORMAL ACTOR

SISTEMA

1. Entra al inicio 2. da clip al botón Eventos

2. despliega botones de acceso de sistema


SISTEMA


POSCONDICIONES Lleva a los despliegues, culturales, Deportivos, artesanales, Cívicos, Sociales.

Usuario, Maestro y Admistrador – Culturales

CASO DE USO CU3-001 Culturales


DESCRIPCIÓN Conoceremos que eventos sean realizado en la institución y los logros que han tenido a través de dicho evento cultural

PRECONDICIÓN Entra al Sistema Web Dar clip al botón Eventos

CURSO NORMAL ACTOR

SISTEMA

1 Entra al inicio y da clip al botón Eventos 3. da clip en el botón Culturales



SISTEMA

1.Botón regresar 2. el Sistema regresa a CU1

POSCONDICIONES La venta se debe de mostrar correctamente.

Usuario, Maestro y Admistrador – Deportivos

CASO DE USO CU3-002 Deportivos


57



DESCRIPCIÓN Se conocerá que tipo de deportes se están desarrollando y también cuales se lleva a concursar, Y los logros obtenidos


CURSO NORMAL ACTOR

SISTEMA

1 Entra al inicio y da clip al botón Eventos 3. da clip en el botón Deportivos



SISTEMA



Usuario, Maestro y Admistrador – Artesanales

CASO DE USO CU3-003 Artesanales


DESCRIPCIÓN Se conocerá que tipos de materiales artesanales han hecho, y que concursos han Ganado.


CURSO NORMAL ACTOR

SISTEMA

1 Entra al inicio y da clip al botón Eventos 3. da clip en el botón Artesanales



SISTEMA



Usuario, Maestro y Admistrador – Cívicos

58



CASO DE USO CU3-004 Cívicos


DESCRIPCIÓN Se conocerá que actos cívicos sean hechos.


CURSO NORMAL ACTOR

SISTEMA

1 Entra al inicio y da clip al botón Eventos 3. da clip en el botón Cívicos



SISTEMA



Usuario, Maestro y Admistrador – Galerías

CASO DE USO CU4-000 Galerías


DESCRIPCIÓN En este botón al dar clip, se mostrara las imágenes no solo de eventos sino demás cosas.

PRECONDICIÓN

CURSO NORMAL ACTOR

SISTEMA

1 Entra al inicio y da clip al botón Galerías

2. El sistema muestra

las imágenes del mes y también las pasadas.


SISTEMA


POSCONDICIONES

59



Casos de Uso del lado de los Usuarios (Maestro y Administrador)

Maestro y Admistrador – Proceso Docentes CASO DE USO CU5-000

Proceso Docentes

ACTOR Maestro, Administrador

DESCRIPCIÓN Botón: da acceso a la ficha de Datos Personales de la Escuela Ignacio Zaragoza

PRECONDICIÓN 1. Entrar al Sistema web de la Escuela 2. Ir a la barra de cinta de opciones

CURSO NORMAL ACTOR

SISTEMA

1.- Va a la cinta de opciones

2.- da clip en la pestaña de Proceso Docente

2 Muestra que opción deseada 4 Muestra la opción de ingresar contraseña y nombre.


SISTEMA

POSCONDICIONES ingresar contraseña y password para iniciar sistema

Maestro y Admistrador – Fecha límite

CASO DE USO CU5-001 Fecha limite

ACTOR Maestro y Administrador

DESCRIPCIÓN Nuestro sistema mostrara una fecha límite para el llenado del proceso docente.

PRECONDICIÓN Conocer nuestro sistema para estar informado del límite de acceso.

CURSO NORMAL ACTOR

SISTEMA

60



3.- debe entra al Sistema Web

1.- Muestra fecha limite 2.- Si la fecha límite llega, ya no dejará entrar al sistema.


SISTEMA

POSCONDICIONES El Proceso Docente, se cerrara en la fecha indicada.

Maestro y Admistrador – Identificación CASO DE USO CU5-002

Identificación


DESCRIPCIÓN Ingresa el nombre del usuario y contraseña, sirve para dar acceso al sistema docente

PRECONDICIÓN 1. Ir a la barra de cinta de opciones en proceso docente.

2. Solo el administrador podrá asignar nombre y contraseña.

CURSO NORMAL ACTOR

SISTEMA

1.- en opciones dar clip en Proceso docente 3.- Escribe nombre correcto y contraseña.

2.- Muestra cuadro de texto 4.- valida si el nombre y contraseña es correcto o incorrecto.


SISTEMA

Puede regresar al inicio Ingresa el nombre correcto

1.-Si el nombre y contraseña, no es correcto muestra error en nombre. 2.-Si el nombre y contraseña es correcto sigue su curso.

POSCONDICIONES Si es correcto, ingresa al sistema para el registro de documentación.

Docente – Validación Asignación

CASO DE USO CU5-003 Validación y Asignación

ACTOR Docente

61



DESCRIPCIÓN El administrador se encarga de gestionar a los usuarios, (docente, administrador) una Validación y Asignación en sus nombres y contraseñas (que solo sea única y difícil de modificar) lo cual dará acceso al Sistema Web. Esto estará almacenado en la bases de datos.

PRECONDICIÓN Dar nombre y contraseña al administrador

CURSO NORMAL ACTOR

SISTEMA

1.- ingresa nombre y contraseña de docente.

2.- valida si el nombre es correcto o errónea. 3.- valida si la contraseña es correcta o errónea 4.- si es correcto el nombre y la contraseña, ingresa al Sistema Docente

CURSO ALTERNATIVO

ACTOR

SISTEMA

Busca en la base de datos la información de las validaciones.

Maestro y Admistrador – Acceso Sistema Docente

CASO DE USO CU5-004 Acceso Sistema Docente


DESCRIPCIÓN En este sistema el usuario al ingresar todos los pasos correspondientes, crea un archivo PDF, que tendrá información confidencial, este archivo podrá ser modificarlo, guardado y salir de él, si el usuario así lo desea.

PRECONDICIÓN Que la información que se ingresara al sistema sea la correcta, para que el usuario pueda llenar correctamente cada cuadro de texto y subir las imágenes recortadas en formato pdf.

CURSO NORMAL ACTOR

SISTEMA

1.- ingresa contraseña y password correcto. 3.- elige que hacer

2.- Muestra el sistema y opciones a realizar 4.- permite realizar la acción requerida

CURSO ALTERNATIVO

ACTOR

SISTEMA

Puede salir del sistema

Le indicara si desea salir

POSCONDICIONES Podrá realizar la opción que desee que el sistema muestra.

62



Maestro y Admistrador – Crear Documento

CASO DE USO CU5-005 Crear Documento


DESCRIPCIÓN En el caso de uso crear documento, lo que debe realizar el actor será, adjuntar la imagen rostro y documento, llenado de datos particulares, llenado de datos personales.

PRECONDICIÓN 1.- Que los datos sean los correctos para que el usuario no tenga dificultades. 2.- Tener las imágenes en una memoria USB y que sean de formato jpg recortadas.

CURSO NORMAL ACTOR

SISTEMA

1.- Da clip en crear documento 3.- ingresa la información de datos Particulares 4.- ingresa la información de datos personales. 5.- adjunta imagen rostro y documentos

2.- despliega líneas de cuadro de texto 6.- guarda la información ingresada

Al guardar la información que da almacenada en una Base de Datos que creara un Archivo PDF.

ACTOR

SISTEMA

Debe de verificar la información si esta correcta antes de salir

POSCONDICIONES Al guardar la información, podrá ser modificada

Maestro y Admistrador – Modificar documento

CASO DE USO CU5-006 Modificar documento


DESCRIPCIÓN Este caso de uso indica que si el actor desea modificar las imágenes o los datos particulares o datos personales.

PRECONDICIÓN Tener datos correctos a cambiar.

CURSO NORMAL ACTOR

SISTEMA

63



1.- Da clip en Modifica su información

2.- permite que se modifique su información 3.- el sistema guarda la información recién modificada

CURSO ALTERNATIVO

ACTOR

SISTEMA

1.- Si termina de modificar. 3.- Si desea salir

2.- El sistema preguntara si desea que el guarde su información 4.- Dejará salir

POSCONDICIONES Puede salir y regresar al menú principal

Maestro y Admistrador – crea un Documento PDF

CASO DE USO CU5-007 Crea un Documento PDF


DESCRIPCIÓN Al guardar la información que asido creada o modificada. Nuestro sistema crear un documento PDF, que se almacenara en una base de datos, donde nuestro administrador tendrá acceso y hacer uso del documento.

PRECONDICIÓN 1.- Llenar Documentos Particulares 2.- Llenar Documentos Personales 3.- Adjuntar Imágenes Rostro y Documentos

CURSO NORMAL ACTOR

SISTEMA

1.- Llenar documentos Particulares, Personales y adjuntar imágenes.

2.- Guarda la información 3.- Crea Documento PDF.


SISTEMA

1.- Guarda la información 2.- guarda la información ingresada en una base de datos. 3.- crea un archivo y se almacena en una base de datos

POSCONDICIONES El documento queda en una base de datos, que solo el administrador podrá manipularlo.

Casos de Uso del lado del Docente (Bases de Datos)

Docentes - Base de datos

CASO DE USO CU6-001 Adjuntar imagen rostro y Documento

ACTOR Docentes

64



DESCRIPCIÓN El maestro se encarga de adjuntar sus imágenes en formato jpg. De las cuales las imágenes previamente deben de estar recortadas (bien definidas para que queden establecidas correctamente).

PRECONDICIÓN Tener almacenadas sus imágenes en una memoria USB. Recortar y predefinir sus imágenes en formato jpg.

CURSO NORMAL ACTOR

SISTEMA

1.-Debe ingresar la memoria a la computadora. 2.- Ser reconocido por las entradas USB.

3.- Muestra botón adjuntar imagen rostro. 4.- Muestra botón adjuntar imagen documentos

CURSO ALTERNATIVO

ACTOR

SISTEMA

1.- Debe de guardar documento

2.- Se almacenan las imágenes en la bases de datos.

POSCONDICIONES Si las imágenes son correctas se crear el archivo.

Docentes - Datos Particulares

CASO DE USO CU6-002 Datos Particulares

ACTOR Docentes

DESCRIPCIÓN Datos particulares más confidenciales del maestro.

PRECONDICIÓN Tener los documentos a la mano, para ingresar los al sistema. Verificar que sean los correctos.

CURSO NORMAL ACTOR

SISTEMA

1.- ingresar sus datos particulares del Maestro en los cuadros de texto.

2.- almacena los datos y guarda la información.

CURSO ALTERNATIVO

ACTOR

SISTEMA


2.- se almacenan en la base la datos

POSCONDICIONES Si los datos son correctos se crea el archivo.

Docentes – Datos Personales

65



CASO DE USO CU6-003 Datos Personales

ACTOR Docentes

DESCRIPCIÓN Datos personales del maestro.

PRECONDICIÓN Tener los documentos a la mano, para ingresar los al sistema. Verificar que sean los correctos.

CURSO NORMAL ACTOR

SISTEMA

1.- ingresar los datos personales del maestro, en los cuadros de texto.

2.- almacena los datos y guarda la información.

CURSO ALTERNATIVO

ACTOR

SISTEMA


2.- se almacenen en la base de datos.

POSCONDICIONES Si los datos son correctos se crea el archivo.

Maestro y Admistrador – Guarda el documento

CASO DE USO CU5-006 Guarda el Documento


DESCRIPCIÓN Este caso de uso, cuando ya la información asido llenada o modificada y terminada. Guardara todo en una base de datos y creará un archivo PDF.

PRECONDICIÓN La información debe de ser verificada por el actor si esta correcta y si termino de llenar todos los cuadros de texto

CURSO NORMAL ACTOR

SISTEMA

1.- llena cuadros de texto

2.- informa que su documento fue guardado con éxito


SISTEMA

POSCONDICIONES Al guardar su información podrá modificar el documento, salir y regresar al menú principal

Maestro y Admistrador – Salir de Sistema

CASO DE USO CU5-007 Salir de sistema


66



DESCRIPCIÓN Puede salir de sistema en el momento que lo desee

PRECONDICIÓN 1.- Terminar de crear o modificar documento 2.- Si la información no es guardada se borrara todo.

CURSO NORMAL ACTOR

SISTEMA

1.- dar clip en icono salir

2.- informa si desea salir 3.- sale del sistema


SISTEMA

POSCONDICIONES Regresa al CU5 - 000

67



3.5 CODIFICACIÓN DEL SISTEMA.

Lo que se realizara en esta parte es la codificación de nuestro Sistema Web, haciendo el uso de

prototipos así como de pruebas y ensayos para corregir errores.

Por ello dependiendo también del tipo de lenguaje de programación a ocupar y los tipos de

programas será un proceso más fácil, si se emplean los correctos.

3.5.1 DESCRIPCIÓN DEL PROYECTO Las páginas Web que componen la aplicación están implementadas siguiendo una estrategia basada en contenidos, es decir, las páginas Web se estructuran en zonas (divs) donde cada una es responsable de proporcionar cierta información sobre un contenido en concreto. A continuación va a procederse a hacer una descripción del proyecto siguiendo el esquema por capas que se ha seguido para implementarlo. Para cada capa, se ha elegido un fichero de los que la conforman para explicar su estructura, ya que el número de zonas o divs es siempre el mismo. 3.5.2 CAPA DE PRESENTACIÓN A continuación se muestra el contenido de uno de los ficheros que conforman la capa presentación. Para poder explicarlo mejor. He divido el fichero y he añadido un breve texto explicativo antes de cada Una de las partes en las que ha sido dividido. En la cabecera del documento se “importan el fichero CSS que define el estilo de la página y el script Java Script que nos permitirá hacer la presentación de la Web más dinámica y amigable.

Anexaremos parte de la codificación, lo demás estará en la parte de anexos.

La primer parte que anexaremos será la parte del inicio donde el código será guardado en .php.

<!DOCTYPE html>

<html lang="es" dir="ltr">

<head>

<title>Página de bienvenida - Ignacio Zaragoza</title>

<meta charset="utf-8" />



<meta name="description" content="El Colegio GRAL. IGNACIO ZARAGOZA es

una Escuela de PRIMARIA Situada en la localidad de Zongolica. Imparte EDUCACION BASICA

(PRIMARIA GENERAL), y es de control PÚBLICO (ESTATAL).<br

68



/>Las clases se imparten en horario MATUTINO. Cuenta con un grupo de profesores de los

cuales imparten ciertas materias, así también con un Supervisor y también con una Dirección

General.<br />" />

<meta name="keywords" content="Escuela Primaria "Gral. Ignacio

Zaragoza"" />

<meta name="author" content="Honorio Gonzalez Temoxtle" />

<meta name="viewport" content="width=750" />

<link rel="icon" href="favicon.png" type="image/png" />

<link rel="stylesheet" type="text/css" href="style/reset.css" media="screen,print" />

<link rel="stylesheet" type="text/css" href="style/print.css" media="print" />

<link rel="stylesheet" type="text/css" href="style/style.css" media="screen,print" />



<link rel="stylesheet" type="text/css" href="pcss/index.css" media="screen" />

<script type="text/javascript" src="res/jquery.js?24"></script>

<script type="text/javascript" src="res/x5engine.js?24"></script>

<script type="text/javascript">

x5engine.boot.push(function () {

x5engine.bgStretch('images/FondoVerdeFuerte-1-.jpg', true); });

</script>

</head>

<body>

<div id="imHeaderBg"></div>

<div id="imFooterBg"></div>

<div id="imPage">

<div id="imHeader">

69



<h1 class="imHidden">Página de bienvenida - Ignacio

Zaragoza</h1>



</div>

<a class="imHidden" href="#imGoToCont" title="Salta el menu

principal">Vaya al Contenido</a>

<a id="imGoToMenu"></a><p class="imHidden">Menu Principal:</p>

<div id="imMnMn" class="auto">



</div>

<div id="imContentGraphics"></div>

<div id="imContent">

<a id="imGoToCont"></a>

<div style="width: 960px; float: left;">

<div style="float: left; width: 130px;">

<div style="height: 370px;"> </div>

</div>


<div id="imCell_1" class="imGrid[0, 0]"><div

id="imCellStyleGraphics_1"></div><div id="imCellStyle_1"><a href="home.php"><img

id="imObjectImage_1" src="images/6789.jpg" title="" alt="" height="358" width="660"

/></a></div></div>

</div>


<div style="height: 370px;"> </div>

</div>

70



</div>

<div style="width: 960px; float: left;">

<div id="imCell_2" class="imGrid[1, 1]"><div

id="imCellStyleGraphics_2"></div><div id="imCellStyle_2"><div id="imHTMLObject_2"

class="imHTMLObject" style="height: 10px; overflow: auto; text-align: center;"><script

type="text/javascript">x5engine.boot.push("x5engine.mediaPlayer({'target': '#imCellStyle_2', 'url':

'sounds/El-Raton-Vaquerowmv.mp3', 'width': 1, 'height': 1, 'loop': true, 'autoplay': true, bgColor:

'transparent' })");</script></div></div></div>

</div>

<div class="imClear"></div>

</div>

<div id="imFooter">



</div>

</div>

<span class="imHidden"><a href="#imGoToCont" title="Lea esta página de

nuevo">Regreso al contenido</a> | <a href="#imGoToMenu" title="Lea este sitio de

nuevo">Regreso al menu principal</a></span>

<script type="text/javascript">

var align = function () {

var top = _jq( window ).height() - _jq( '#imCell_1' ).outerHeight();

if ( _jq('#imCell_2').length > 0 )

top -= _jq( '#imCell_2' ).outerHeight();

_jq( '#imContent' ).css( 'marginTop', (top < 0 ? 0 : top / 2) );

};

align();

_jq( window ).resize( align );

71



</script><script type="text/javascript">






};

align();








};

align();








};

72



align();








};

align();








};

align();







73




};

align();








};

align();








};

align();





74






};

align();








};

align();








};

align();



75








};

align();








};

align();








};

align();

76










};

align();








};

align();








77



};

align();


</script>

</body>

</html>

78



3.5.3 XAMPP

Cada código que se realizo fue con una amplia prueba a través de XAMPP que es

un servidor independiente de plataforma, software libre, que consiste principalmente en la

base de datos MySQL, el servidor web Apache y los intérpretes para lenguajes de

script: PHP y Perl. El nombre proviene del acrónimo de X (para cualquiera de los

diferentes sistemas operativos), Apache, MySQL, PHP,Perl.

El programa está liberado bajo la licencia GNU y actúa como un servidor web libre, fácil

de usar y capaz de interpretar páginas dinámicas como también realizar Baese de Datos

figura (1.9).

http://es.wikipedia.org/wiki/Servidor

http://es.wikipedia.org/wiki/Plataforma_(inform%C3%A1tica)

http://es.wikipedia.org/wiki/Software_libre

http://es.wikipedia.org/wiki/MySQL

http://es.wikipedia.org/wiki/Servidor_HTTP_Apache

http://es.wikipedia.org/wiki/PHP

http://es.wikipedia.org/wiki/Perl

http://es.wikipedia.org/wiki/GNU

79



3.5.4 Flash

Información general sobre publicación

De forma predeterminada, el comando Publicar crea un Flash archivo SWF y un

documento HTML que inserta el contenido de Flash en una ventana del navegador. El

comando Publicar también crea y copia archivos de detección para Macromedia Flash 4

de Adobe y versiones posteriores. Si cambia la configuración de publicación, Flash guarda

los cambios con el documento. Los perfiles de publicación creados se pueden exportar y

utilizar, ya sea en otros documentos o por otros usuarios que trabajen en el mismo

proyecto. Flash® Player 6 y las versiones posteriores son compatibles con la codificación de

texto Unicode. Unicode permite a los usuarios ver el texto en varios idiomas, sea cual sea

el que utilice el sistema operativo que ejecuta el reproductor. Puede publicar el archivo

FLA en formatos de archivo alternativos (GIF, JPEG, PNG y QuickTime®) con el código

HTML necesario para mostrarlos en la ventana del navegador. Los formatos alternativos

permiten que un navegador muestre la interactividad y la animación de su archivo SWF a

usuarios que no tengan instalado Adobe Flash Player. Cuando publique un documento de

Flash (archivo FLA) en cualquiera de los formatos de archivo alternativos, la configuración

para cada uno de éstos se almacenará junto con el archivo FLA. Puede exportar el

archivo FLA en distintos formatos, al igual que los archivos FLA se publican en distintos

formatos de archivo, con la excepción de que la configuración de cada formato no se

guarda con el archivo FLA. También puede crear un documento HTML personalizado con

cualquier editor de HTML e incluir las etiquetas necesarias para mostrar un archivo SWF.

Para comprobar cómo funciona el archivo SWF antes de publicarlo, utilice Probar película

(Control > Probar película) y Probar escena (Control > Probar escena).

mostraremos un poco sobre la codificación que utilizamos en la realización flash

que hicimos para el uso de una vista panorámica de la escuela primaria.

80



81



3.5.5 ANALISIS DE DIAGRAMA DE CLASES Para realizar el análisis de esta aplicación web se ha optado por seguir las

recomendaciones definidas por UML (Unified Modeling Language o Lenguaje Unificado de

Modelado en castellano). Este modelo dispone de multitud de diagramas que ayudan a

comprender la complejidad del futuro sistema, permitiéndonos plasmar en un lenguaje

estándar aquellas funcionalidades, requisitos y demás características que hemos

detectado en el sistema. Aunque UML define una gran cantidad de diagramas para

representar los distintos aspectos del desarrollo de la aplicación, en nuestro caso nos

hemos centrado en dos tipos de diagramas: el diagrama de clases y el diagrama de casos

de usos.

Diagramas de Clases.

El diagrama de clases (figura 2) describe la estructura del sistema mostrando las

relaciones (asociación, agregación y composición) entre los distintos elementos que

conforman la aplicación, expresados estos como clases con sus atributos. A continuación

describiremos brevemente dichas clases:

Colegio: Representa al colegio público “Gral. Ignacio Zaragoza”.

Alumno: Representa Ciclo de Vida Escolar.

Docentes: Representa a los profesores que imparten docencia en el centro. Pueden

acceder a la intranet de la aplicación a través de su login y contraseña.

Administrador: Representa al administrador del sistema. Puede acceder a la

intranet de la aplicación a través de su login y contraseña.. Es el encargado de la

gestión de la base de datos.

Nivel: Contendrá la información necesaria para identificar a los distintos grupos de

alumnos que conforman el escuela. El nivel puede ser infantil o primaria y

dependiendo de este el curso puede ser 3, 4 o 5 años para los de infantil o 1º, 2º, 3º,

4º, 5º o 6º para los de primaria.

82



Asignatura: Representa las materias que se imparten en el centro y a las que asisten

los alumnos y que son impartidas por los profesores del centro.

Horario: Contiene la información acerca del horario en el que se imparte una asignatura.

Nota: Representa la nota de un docente a alumno en una asignatura.

Falta de asistencia: Permite identificar las ausencias de los alumnos en horario escolar,

ya sean sin justificar o justificadas. De esta forma se podrá llevar un control de las

asistencias de los alumnos a clase y que podrá ser consultado por sus padres o tutores.

INGRESAR IMAGEN……………………………………

83



3.6 PRUEBA DEL SISTEMA.

El Sistema Web debe de ser probado primeramente al equipo de trabajo para su evaluación y

rectificación de características; así mismo para verificar las especificaciones establecidas en el

Análisis y Diseño para ver si fueron respetadas por el desarrollador. Una vez detectado lo fallos

u omisiones, se debe de volver a retomar la implantación del diseño de las modificaciones

realizadas, creando una nueva versión.

3.7 ELABORACIÓN DEL MANUAL Y VERIFICACIÓN.

Se elaborara los requerimientos del Sistema Web, documentando todas las características de

su manejo, Instalación y Operación, para que el personal encargado de Operar el Sistema

tenga la facilidad de manejar y realizar cualquier característica de la Página Web; así como

también la verificación de nuestro sistema, donde en la creación del mismo se espera haber

implementado los Código de Investigación y Pruebas del mismo.

3.8 ENTREGA DEL PROYECTO.

Presentar la Página Web final, al personal indicado como Asesores Externo e Interno

primeramente y por ultimo a la Escuela Primaria GRAL. IGNACIO ZARAGOZA Para llevar a cabo

la prueba final del uso del Sistema Web y Análisis de los resultados de la implementación del

Sistema.

84



3.9 RESULTADOS En las actividades realizadas para sus pasos de construcción los resultados se

obtuvieron para Diseño del Sistema Web.

PLANEACION A DISEÑAR UN SISTEMA WEB.

TAREA ACTIVIDADES RESPONSABILIDADES FECHA DE EJECUCION

DIAGNOSTICOS

ENCUESTA

SERAFIN MARIANO XOCHICALE TELLO. SANTIAGO JONATTHAN XOCHICALE SOLIS.

9 SEPTIEMBRE 2013. EN ESPACO EDUCATIVO 10 DE OCTUBRE 2013.

IDENTIFICACION Y REQUERIMIENTOS DE LA COMUNIDAD EDUCATIVA.

TABULACION DE LA INFORMACION

SERAFIN MARIANO XOCHICALE TELLO. SANTIAGO JONATTHAN XOCHICALE SOLIS

REPRESENTACION GRAFICA DEL SITIO WEB.

DISEÑO DEL MAPA DEL CONTENIDO. DISEÑO MAPA NAVEGACION. DISEÑO Interfaces y guiones Informe del proyecto Diseño Sistema Web.

SERAFIN MARIANO XOCHICALE TELLO. SANTIAGO JONATTHAN XOCHICALE SOLIS

15 de Nov. 2013 al 19 de Dic.2013. 2 de Enero la Informe Técnico Residencial

Resultados del Sistema Web.

En la fase de los Resultados de los recursos de Implementación para la interfaz de las

aplicaciones que se llegaron en la prueba de validación de la administración del Sistema

Web. Para ello fue en la realización de la dirección de la página Web.

(http://www.ignaciozaragozazongolica024.hol.es/proceso- docentes.php). En dominio de

validar el resultado del desarrollo de Información recomendada en las hojas de estilo que

tiene como propiedades en los bordes del Sistema Web en sus divs se puedan ver en

los navegadores Web Google, Chrome, Opera, Ask. Utilizar las herramientas para

verificar de vínculos del programa Dreamweaver, Website. Dicho Software que verificara

los enlace de páginas ya existentes del sistema web. Vista Panorámica en esta fase el

resultado es en la visualización de la aplicación que debería de optimizar gráficos para

http://www.ignaciozaragozazongolica024.hol.es/proceso-%20docentes.php

85



los elementos en espera de la aplicación adecuada. Los procesos docentes son

importantes para el usuario ya que visualiza en los navegadores Web. La aplicación que

ha sido implementada para entrada del usuario, contraseña. Para el llenado de la Base de

Datos probada con éxito en Microsoft Internet Explorer (57.08% de cuota de mercado),

Firefox (22.81%), Chrome (9.98%), Safari (5.89%) y Opera (2.23%). Para ello he utilizado

las herramientas programas de complemento para la terminación Software., así mismo

que permite visualizar navegadores web de forma que puedes visualizar la página web

sobre cualquier navegador sin necesidad de instalarlo.

3.10 CONCLUSIONES Y RECOMENDACIONES 3.10.1 Recomendaciones en acceso de la Administración del Sistema Web.

Para entrar en la zona de administración de la aplicación Web, El usuario se recomienda

entrar o acceder a través de la

URL.(http://www.ignaciozaragozazongolica024.hol.es/proceso- docentes.php).

Situada en el sector proceso docentes página para el divisor seleccionada en el tipo de

usuario administrador e introduciendo “validación o un nombre de usuario y contraseña

correctos. Los datos enviados a la validación “Validación Usuario php, HTML que redirige

a la página de inicio de la parte especifica del administrador, si los datos son incorrectos

devuelve un mensaje de error, si sucede algunas de las situaciones el usuario no ha

escrito el login correcto; el usuario deberá de escribir la clave correcta en la base de

datos; si esto el login accederá de forma inmediata a la base de datos que permitirá al

administrador tener la información organizada del Sistema Web para la escuela “Gral.

Ignacio Zaragoza” en lo que corresponde a la docencia de documentos que solo maneja

administración de los catedráticos.

http://www.ignaciozaragozazongolica024.hol.es/proceso-%20docentes.php

86



3.10.2 CONCLUSIONES

A continuación hare un resumen. El primer paso que tome fue establecer los requisitos

que debería cumplir el sistema reuniéndome con el director del centro educativo “Gral.

Ignacio Zaragoza” sugiriendo la participación subdirector, docentes del mismo centro

educativo. Segundo lugar, realice una encuesta del diseño del Sistema Web

aprovechando modelo UML para que me sirvieran de guía durante la implementación.

Como escogí utilizar la arquitectura de tres capas, el diseño de las distintas capas que

conforman la aplicación fue del siguiente paso. a continuación lleve a cabo la etapa a la

que más tiempo dedique, la implementación del prototipo. En esta última etapa podría

distinguir el diseño de la web (primera aproximación de la hoja de estilo), la de la

Implementación de la intranet del administrador, la de la implementación del Sistema Web

del usuario docente. Por último y para comprobar el correcto funcionamiento de todo el

Sistema, lleve a cabo las pruebas de la aplicación.

Validación del trabajo realizado

Durante la realización del Diseño Sistema Web del proyecto se ha podido de comprobar la

utilidad que son los conocimientos adquiridos durante la carrera en asignaturas durante la

carrera I.S.C. Para Ingeniera del Software, Base de Datos, Diseño de base datos y la

Programación

Considero que el diseño Sistema Web me ha aportado una visión profesional ya que

tenido de tratar con director de la escuela “Gral. Ignacio Zaragoza” bajo la presión, en el

sentido de cumplir ciertos plazos de entrega. Cabe destacar de un prototipo de

funcionalidad de la aplicación Web puede ser completa. Muchas mejoras y aplicaciones,

como las que citan en el alcance del diseño por su duración y extensión. Sin embargo,

las funciones describen en la especificación de los requisitos están implementadas. Luego

en mi punto de vista, se trata de un trabajo realizado satisfactoriamente.

Posibles ampliaciones A continuación se podrá Implementar sobre el prototipo Sistema

Web con mantenimiento adecuado al Sistema Web

4 Gestionará en apoyo técnico de la renovación del sistema Web.

5 Mejorará los anuncios y sección de noticias.

6 Calendario anual, Notas exámenes, avisos por los docentes

7 Hacer segura la trasmisión de datos en la aplicación como puede ser la contraseña y

el cambio de docentes que pertenezcan en la encriptación de datos de renovación.

87



3.11 ANEXOS

ANEXO A

Propósito de recolectar la Información de la escuela “Gral. Ignacio Zaragoza” entre los

miembros de la comunidad Educativa que permita realizar sobre la necesidades que tiene

la Institución de diseñar Sistema Web e Implementar un Sitio Web como Instrumento en

la utilización tecnológica usuario, docente, administrador para mejorar la comunicación en

un llenado de base de datos .

POBLACIÓN estará dirigida a directivo docentes, del nivel básico de la Institución

Educativa Escuela “Gral. Ignacio Zaragoza”. Donde el asesor externo calificara la

realización del proyecto Sistema Web.

MUESTRA: Sera aplicada al 100%. De los directivos docentes. Miembros de la

comunidad de la escuela “Gral. Ignacio Zaragoza”. En la calidad de mejorar la información

del Sistema Web a los medios de la red Social.

MARGEN DE ERROR. La disposición del docente en los tiempos de los antecedentes de

la Institución en la investigación del desarrollo organizado en el control para realización

del Sistema Web. Será 1 Y 5%.

Fecha de aplicación de los tiempos que el docente dio inicio a la página ya que la

Institución por la problemática de la reforma Educativa se encontraba cerrada la

Institución. En el avance que se tuvo fue elaboración del Sistema Web. El Informe se

realizó en el mes de diciembre 2013, A Enero 2014. Para la terminación del Sistema

Web.

3.12 REFERENCIAS BIBLIOGRÁFICAS

http://es.wikipedia.org/wiki/P%C3%A1gina_web http://definicion.de/pagina-web/ http://www.tiposde.org/internet/172-tipos-de-paginas-web/ http://es.wikipedia.org/wiki/Desarrollo_en_cascada https://www.google.com.mx/url?sa=t&rct=j&q=&esrc=s&source=web&cd=7&ved=0CEsQFjAG&url=http%3

A%2F%2Fcarolina.terna.net%2Fingsw2%2FDatos%2FCascada-ModeloV.doc&ei=AQrGUvbCOKOp2QXh14CQAg&usg=AFQjCNH_6oqBfPomy0btvhBsgJRqHN1s7w



http://www.tiposde.org/internet/172-tipos-de-paginas-web/

http://es.wikipedia.org/wiki/Desarrollo_en_cascada

https://www.google.com.mx/url?sa=t&rct=j&q=&esrc=s&source=web&cd=7&ved=0CEsQFjAG&url=http%3A%2F%2Fcarolina.terna.net%2Fingsw2%2FDatos%2FCascada-ModeloV.doc&ei=AQrGUvbCOKOp2QXh14CQAg&usg=AFQjCNH_6oqBfPomy0btvhBsgJRqHN1s7w



Informa Tecnico Santiago Jhonattan.pdf

Documents

Transcript of Informa Tecnico Santiago Jhonattan.pdf