1

IINNSSTTIITTUUTTOO TTEECCNNOOLLÓÓGGIICCOO DDEE TTLLÁÁHHUUAACC IIII

TECNOWEB

ASIGNATURA:

TALLER DE INVESTIGACIÓN I

TRABAJO:

PROFESOR(A):

MELCHOR HORACIO MAGAÑA BRAVO

ALUMNO(A/S)

:

FECHA DE ENTREGA: 08- 12- 2014

CABALLERO GAYTÁN KAREN ISBETH MOLINA GONZALEZ BIANCA YESENIA VAZQUEZ AGUILAR MIGUEL ANGEL GONZALEZ ZEPED CESAR HADUEL

ISIDRO HENANDEZ HERIBERTO

2

Contenido

Introducción 2

Planteamiento del Problema 3

Necesidad 3

Objetivo General 3

Objetivos Específicos 3

Justificación 3

Alcance 4

Marco Teórico 4

Diseño Metodológico 8

Discusión de los resultados 9

Conclusiones 10

Glosario 10

Bibliografía 11

Anexos 12

Introducción

El diseño de una página Web es importante para ofrecer esa primera buena impresión a sus

clientes, pero no es lo único. Una Web de calidad necesita de otros requisitos para aumentar el

éxito de su servicio: Claridad, Facilidad de Uso, Velocidad de carga, etc., son factores

determinantes en la captación de las personas.

Para la realización de una página Web se deben de tener en cuenta un conjunto de elementos en

el diseño para poder lograr principalmente una interfaz amigable.

El nombre del proyecto surge de dos palabras

Tecno.- haciendo referencia a los Institutos Tecnológicos, donde nace la idea.

Web.- que es un vocablo inglés que significa “red”.

Antes de diseñar una página Web, debemos pensar cómo organizar la información y lo más

importante no olvidar que la finalidad es que llegue a los alumnos.

3

Planteamiento del problema.

Dificultad para obtener una atención ágil y hasta cierto punto personalizado, ya que al realizar

trámites que conlleven tiempo de demora, el servicio ante los docentes o secretaria a cargo se ve

afectado quitando así tiempo entre clases, y que en ocasiones suelen ser de solución rápida y

efectiva pero por saturación de alumnado esto se vuelve aburrido y tedioso de tramitar o aclarar.

Necesidad

Desarrollo, creación e implementación de una página web que identifique la problemática de los

alumnos al querer obtener información acerca de su estado en las materias (calificaciones) o la

necesidad de realizar algún trámite académico (Boleta, Acceso al Servicio Social, Tramite de

Titulación etc.).

Con el fin de dar una mayor habilidad en los trámites y ser crear un sistema más eficiente que

ayude al alumno a realizar y seguir los pasos mediante un medio electrónico sin necesidad de

encontrarse dentro del Instituto Tecnológico Tláhuac II.

Objetivo general.

Crear una página web útil para la comunidad tecnológica y atraer la atención de alumnos de nivel

medio superior y superior mediante contenido útil, para mejorar la imagen que se tiene acerca de

los institutos tecnológicos dentro de la zona.

Objetivos específicos.

Diseñar un prototipo de una página web que ayude a la comunidad tecnológica a realizar

procesos administrativos que actualmente son lentos y tediosos.

Minimizar los tiempos de atención al alumno dentro del Instituto Tecnológico de Tláhuac II

enmarcando que solo será en las oficinas académicas, logrando así la mayor eficiencia

posible y una significativa ganancia de tiempo dentro de las tareas y procesos académicos que

conlleve a atender a los alumnos al realizar los trámites de su interés e incumbencia.

Sofisticar un sistema que este a la vanguardia y a la altura de la gran demanda estudiantil que

implica un mayor número de solicitudes de atención al alumno, logrando así satisfacer cada

una de las necesidades particulares de los alumnos y proporcionando una respuesta clara y

precisa de la información requerida.

Justificación.

A incrementado considerablemente el índice de alumnos acreditados al Instituto, por tal motivo nos

hemos visto en la necesidad de poder diseñar una página web la cual permita entre otros aspectos

poder estar al tanto de calificaciones, documentos de interés y todo lo relacionado a nuestro perfil

estudiantil, ya que al ser un sistema restringido que solo se es posible acceder dentro del Instituto,

se vuelve un proceso lento y que demanda mucha pérdida de tiempo al esperar que el centro de

cómputo sea desalojado por los demás compañeros.

4

Alcance.

Por el momento el servicio se proporcionara solo al Instituto Tecnológico de Tláhuac II, ya que de

ser una prueba piloto tomaremos como referencia la eficacia que este implemento al sistema nos

dé, así como la recolección de datos estadísticos de la comunidad estudiantil. Ya que el desarrollo

del proyecto está en proceso, se implementara su uso al ciclo escolar 2015-2016, sin antes hacer

una recolección de encuestas que nos ayuden a tomar en cuenta la participación de la comunidad

perteneciente al Instituto Tecnológico de Tláhuac II y enfocarnos en la problemática que ellos

encuentren aunado al desarrollo e implementación de estas tecnologías.

Marco Teórico

Un sitio web es un sitio (localización) en la Word 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.

Sin embargo a nuestro parecer la página de nuestro instituto carece de utilidad y se ha

aprovechado muy poco su potencial, y creemos que comparte con las otras instituciones una falta

de atracción hacia sus usuarios por lo que nos enfocaremos en que nuestro proyecto sea lo más

atractivo y funcional posible para satisfacer las necesidades de los usuarios y que obtengan el plus

que hará que se difunda más rápidamente nuestra utilización.

¿Qué es página Web?

Una Página Web es una fuente de información adaptada para la World Wide Web y accesible

mediante un navegador de Internet. Ésta información se presenta generalmente en formato HTML

y puede contener hiperenlaces a otras páginas Web, constituyendo la red enlazada de la World

Wide Web.

Una página de Internet o página Web es un documento electrónico que contiene información

específica de un tema en particular y que es almacenado en algún sistema de cómputo que se

encuentre conectado a la red mundial de información denominada Internet, de tal forma que este

documento pueda ser consultado por cualquier persona que se conecte a esta red mundial de

comunicaciones y que cuente con los permisos apropiados para hacerlo.

Las páginas Web pueden ser cargadas de un ordenador local o remoto, llamado Servidor Web. El

servidor Web puede restringir las páginas a una red privada, por ejemplo, una intranet, o puede

publicar las páginas en el World Wide Web. Las páginas Web son solicitadas y transferidas de los

servidores usando el Protocolo de Transferencia de Hipertexto (HTTP - Hypertext Transfer

Protocol)1.

1 PEP: An Extension Mechanism for HTTP. Cita: "For experimental purposes, PEP-compatibility is equated

with HTTP

5

Las páginas Web pueden consistir en archivos de texto estático, o se pueden leer una serie de

archivos con código que instruya al servidor cómo construir el HTML2 para cada página que es

solicitada, a esto se le conoce como Página Web Dinámica3.

Elementos de una página Web

Una página Web tiene contenido que puede ser visto o escuchado por el usuario final. Estos

elementos incluyen, pero no exclusivamente:

· Texto: El texto editable se muestra en pantalla con alguna de las fuentes que el usuario tiene

instaladas (a veces se utiliza una tecnología de fuentes incrustadas, con lo que vemos en el

monitor una fuente que realmente no poseemos, pero es poco frecuente.) El texto editable puede

marcarse con el ratón o el teclado y copiarse a otra aplicación, como el bloc de notas (muchos de

los elementos textuales de las páginas, en especial los títulos, botones de navegación, etc. son

realmente gráficos, y su texto no es editable.)

· Imágenes: Son ficheros enlazados desde el fichero de la página propiamente dicho. Se puede

hablar de tres formatos casi exclusivamente: GIF, JPG y PNG.

· Audio, generalmente en MIDI, WAV y MP3.

· Adobe Flash.

· Adobe Shockwave.

· Gráficas Vectoriales (SVG - Scalable Vector Graphics).

· Hipervínculos, Vínculos y Marcadores.

· La página Web también puede traer contenido que es interpretado de forma diferente

dependiendo del navegador y generalmente no es mostrado al usuario final.

· Scripts, generalmente Java Script.

· Meta tags.

· Hojas de Estilo (CSS4 - Cascading Style Sheets).

2 Index of elements in HTML. World Wide Web Consortium (24 de diciembre de 1999). Consultado el 8 de

abril de 2007.

3 M. Domínguez-Dorado. Todo Programación. Nº 12. Págs. 48-51. Editorial Iberprensa(Madrid). DL M-13679-

2004. Septiembre, 2005. Bases de datos en el cliente con JavaScript DB.

4 W3C CSS2.1 specification for rule sets, declaration blocks, and selectors. World Wide Web Consortium.

Consultado el 20-06-2009. Especificaciones para el CSS2.1(en inglés)

6

¿Qué es la WWW?

World Wide Web5, o simplemente Web, es el universo de información accesible a través de

Internet, una fuente inagotable del conocimiento humano.

El componente más usado en el Internet es definitivamente la Web. Su característica sobresaliente

es el texto remarcado, un método para referencias cruzadas instantáneas. En la mayoría de los

Sitios Web, ciertas palabras aparecen en texto de otro color diferente al resto del documento. Por

lo general, este texto es subrayado. Al seleccionar una palabra o frase, uno es transferido al sitio o

página relacionada a esa frase. En algunas ocasiones hay botones, imágenes, o porciones de

imágenes que pueden activarse mediante un clic.

Usando la Web, se tiene acceso a millones de páginas de información. La exploración en la Web

se realiza por medio de un software especial denominado Browser o Explorador. La apariencia de

un Sitio Web puede variar ligeramente dependiendo del explorador que use. Así mismo, las

versiones más recientes disponen de una funcionalidad mucho mayor tal como animación, realidad

virtual, sonido y música.

Funcionamiento de la Web

Una vez que el usuario está conectado a Internet, tiene que instalar un programa capaz de acceder

a páginas Web y de llevarte de unas a otras siguiendo los enlaces.

El programa que se usa para leer los documentos de hipertexto se llama "navegador", el "browser",

"visualizador" o "cliente" y cuando seguimos un enlace decimos que estamos navegando por la

Web.

Así, no hay más que buscar la información o la página deseada y comenzar a navegar por las

diferentes posibilidades que ofrece el sistema.

Navegar es como llaman los usuarios de la red a moverse de página en página por todo el mundo

sin salir de su casa.

Mediante los Navegadores modernos podemos, acceder a hojas de cálculo, base de datos, vídeo,

sonido y todas las posibilidades más avanzadas. Pero el diseño de páginas debe mantener un

equilibrio entre utilizar todas las capacidades y la posibilidad de ser leídas por cualquier tipo de

Navegador.

El visualizador nos presentará perfectamente cualquier página ".txt" generada por cualquier editor y

los links entre documentos sólo requieren un simple y sencillo comando. Y aun así podremos

conseguir el tipo y tamaño de letra y colores de texto y fondo que queramos, simplemente

configurando el visualizador.

5 Quittner, Joshua (29 de marzo). «Tim Berners Lee – Time 100 People of the Century». Time Magazine.

Consultado el 17 de mayo de 2010. «Él tejió la World Wide Web y creó un medio de comunicación para el

siglo 21. La World Wide Web es Berners-Lee es el único. Él lo diseñó. Él soltó en el mundo. Y más que nadie

ha luchado para mantenerlo abierto, no propietario y libre

7

Etapas de Desarrollo de un proyecto de sitio Web

El desarrollo de un proyecto de sitio Web puede dividirse en tres etapas principales:

Prediseño,

Diseño,

Instalación y prueba.

El punto de vista desde el cual se analiza el proceso de diseño no es desde la interrelación

usuario-tecnología, sino como interacción humana, mediatizada por la tecnología. Es decir,

entender a la Web como medio de comunicación entre personas. Esto nos debe ayudar a pensar

permanentemente en "el otro", la persona invisible y desconocida para quien hacemos la página

Web.

De todas las palabras que utilizamos al hablar de Internet, la que más deben tener en cuenta los

diseñadores es la que designa al acto de instalar un sitio, pensar en el público, pensar en cómo

piensa el público.

Prediseño

A la etapa de prediseño o conceptualización podemos dividirla en cinco componentes: Objetivos,

público, contenidos, estructura y visualización. Estos interactúan entre sí y se condicionan

mutuamente.

Objetivos: Este es uno de los elementos más importantes que determina a los otros. Hay que

responder a la pregunta: ¿para qué se pública este sitio?; ¿qué quiero que suceda raíz de mi

publicación en la Web?

Público: Al hablar de público no nos referimos a cualquier persona que recorriendo la red llegue a

nuestra página, sino a aquella parte de la población a la que pretendemos alcanzar e influir con el

mensaje. Esto está estrechamente vinculado con los objetivos establecidos y la naturaleza del sitio

que nos proponemos.

Contenidos: Se debe listar la información que se desea incluir en la Web. Esta información debe

ser significativa y útil para el público. Teniendo en cuenta lo que a ellos les interesa, no lo que a

nosotros nos gustaría que nos interese. En el caso de que existan otras formas de acceso a

información disponible para esas mismas personas, el contenido de la Web deberá ser superador

de esos otros materiales. Es decir que si los clientes de una firma reciben un folleto en el que se

describen los servicios que se prestan, el sitio Web al que accederán luego no puede repetir

simplemente lo que allí se dice. Información, no textos redundantes sobre la importancia de esa

información.

Estructura: La organización de la información es un tema clave para asegurar un buen

funcionamiento de un sitio. El primer elemento organizador son las páginas. Conviene incluir en

cada una de ellas una unidad de información autónoma, completa. En el caso de que el volumen

sea excesivo para ello, dividir esa unidad de información en sub unidades más pequeñas,

coherentes, completas cada una en sí misma. Una unidad de información es un tema o un sub

tema.

8

Las relaciones de las páginas entre sí configuran la estructura del sitio. A partir de la página

principal o home page se vinculan mediante links el resto de las páginas. Esto es bastante sencillo

de implementar en lenguaje HTML, pero es más complicado decidir de qué manera, en qué orden,

con qué configuración se establecerá la cadena de vínculos.

Visualización: Debe adecuarse a los gustos y preferencias de los responsables del sitio.

Diseño

La tarea de diseño de páginas Web convoca por lo menos tres especialidades diferentes:

comunicación (humana), programación (HTML, CGI, Java), diseño gráfico y multimedia. Ninguna

de estas especialidades tiene en sí misma todos los recursos para llevar a cabo proyectos de Web

exitosos.

En los proyectos de sitios Web no participan sólo los especialistas contratados o designados para

ello. La empresa o institución que origina la demanda tiene diversos grados de responsabilidad y

compromiso con la publicación del sitio.

Instalación y Pruebas

En esta etapa nos encargamos de la puesta en marcha, correcciones y ajustes finales.

Se debe hacer que todo funcione. Debemos hacer la prueba de todos los enlaces o links,

corroborar el correcto funcionamiento de todos los elementos de multimedia y del funcionamiento

de formularios, e-mail, buscadores, etc.

La transferencia de archivos a la Web, se realiza a través de FTP (File Transfer Protocol),

generalmente, se necesita un nombre de usuario y una clave de acceso.

Diseño Metodológico

Esta es una investigación de tipo aplicativa ya que es un trabajo aplicado a la realidad.

Recopila la información histórica del pasado reciente en la vida universitaria que a nivel regional

alcanza los 20 años en la dura lucha por proveer del servicio educativo en Educación Superior.

Para abordar el presente estudio se propuso como universo de análisis a los estudiantes del

Instituto Tecnológico de Tláhuac II del turno matutino que en total son aproximadamente 500

alumnos con el propósito de obtener criterios de aceptación y validación de nuestra página Web.

Tomamos como muestra de dicho universo el 10% de la población que equivale a cincuenta

alumnos a los cuales se les aplico la prueba piloto.

Nuestra población estuvo directamente vinculada a las unidades de análisis, diseño e

implementación de páginas Web.

El diseño del sitio Web debe estar orientado al usuario, organizando y estructurando la información

según los modelos definidos por él.

9

Muestra

Tomamos un 10% de nuestra población, es decir 50 estudiantes a los cuales se les aplicó la

encuesta final. Para elegir a los 50 estudiantes de la población utilizamos el muestreo aleatorio

simple.

Instrumentos

Aplicamos como instrumento una encuesta a estudiantes del Instituto Tecnológico de Tláhuac II.

Los instrumentos de recolección de datos en la encuesta fueron validados en una fase previa a la

recolección de los mismos.

Durante el ejercicio de validación, fueron considerados criterios básicos los siguientes:

Estructura interna de la encuesta

Comprensión del significado de las preguntas

En la parte final del ejercicio de validación se llevó a cabo un análisis a cada una de las preguntas

para cubrir todas las posibles respuestas.

Procesamiento de los datos

En el procesamiento de los datos, los de tipo numérico se tabularon agrupándolos en intervalos y

luego se construyeron los cuadros estadísticos (aquí son las preguntas en las cuales los usuarios

contestaron sí o no)

Otro bloque de preguntas es de selección múltiple donde el usuario puede escoger las respuestas

que desee. Un ejemplo es: ¿Qué aspectos te gustaría que mejoráramos en la página Web?

Discusión de los resultados

Los siguientes son los resultados obtenidos del estudio:

1- La mayoría de los encuestados estaban de acuerdo con los colores, tamaño de letra que

presentaba el menú, formato y tamaño de letra que presentaba.

2- La mayoría de los encuestados les interesaba buscar información académica ya que es la que

les ayuda a orientarse más sobre lo que ofrece la universidad.

4- La mayoría de los encuestados tenían conocimientos básicos sobre lo que es el diseño de la

página Web por lo que sus respuestas en la encuesta es de gran valor para nosotros como

diseñadores

Entre los aspectos que se debían de mejorar en la página según los encuestados eran:

Que la interfaz sea más atractiva

Animación del logotipo

10

Enlaces a otras páginas ya sea otros centros regionales universitarios o páginas de interés.

Conclusiones

En el análisis de la página se hizo una lista de los requerimientos tales como: la información que se

desea incluir tomando en cuenta que esta debe ser clara, concisa y precisa.

Se decidió que el diseño tenía que ser adecuado ya que la Web es de una institución universitaria,

sin muchas animaciones, con una interfaz amigable y fácil de navegar.

Los resultados obtenidos en la encuesta van a servir para mejorar la estructura de la información y

el diseño de la página ya que la encuesta fue realizada a personas que sabían sobre el diseño de

páginas Web.

Glosario.

Página Web: Es una fuente de información adaptada para la World Wide Web y accesible

mediante un navegador de Internet

Internet: El Internet algunas veces llamado simplemente "La Red", es un sistema mundial

de redes de computadoras, un conjunto integrado por las diferentes redes de cada país del

mundo, por medio del cual un usuario en cualquier computadora puede, en caso de contar

con los permisos apropiados, accesar información de otra computadora y poder tener

inclusive comunicación directa con otros usuarios en otras computadoras.

Sitio Web: Es un conjunto de archivos electrónicos y páginas Web referentes a un tema en

particular que incluye una página inicial de bienvenida, generalmente denominada home

page, con un nombre de dominio y dirección en Internet específicos. Es un conjunto de

páginas Web, típicamente comunes a un dominio de Internet o subdominio en la World

Wide Web

Hipertexto: Son datos que contienen enlaces (links) a otros datos.

Dirección IP (IP Adress): Una dirección numérica compuesta de cuatro números de 8 bits

que identifica en forma única a una computadora de una red.

DNS: Servidor de Nombre de Dominio; un sistema que puede resolver una dirección IP con

un nombre.

FTP: Protocolo de transferencia de archivos (Transferer File Protocol); una protocolo para

transferir archivos hacia y desde computadoras remotas.

Hipervínculo (hyperlink): Un elemento de HTML que, cuando se hace clic en él, permite

que las personas pasen a otros documentos, imágenes, sonidos o películas.

JPEG: Grupo Unido de Expertos en Fotografía(Join Photografhic Experts Group).Formato

de archivo usado para imágenes comprimidas que usa un índice más alto de compresión y

más colores que GIF.

11

URL: Localizador Uniforme de Recursos (Uniform Resource Locator); el medio para

localizar una página de inicio de Web.

Red: En términos de tecnologías de información, una red es una serie de puntos o nodos

interconectados por algún medio físico de comunicación. Las redes pueden interconectarse

con otras redes y contener sub-redes.

BIBLIOGRAFÍA:

• Alba, Fernando. (1987). El Desarrollo de la Tecnología. México: FCE.

• Bernal, T. Cesar Augusto. (2006). Metodología de la Investigación para la

• Administración y Economía- 2ª Ed- México: Editorial Prentice Hall.

• García De Alba, Pompeya. (2000). Metodología de la Investigación. México: Porrúa

OTRAS FUENTES:

• http://www.creaciondepaginasweb.net/informacion-pagina-web.htm

• http://www.desarrolloweb.com/articulos/436.php

12

ANEXOS

1.1 Plan de Trabajo

INTEGRANTES. ACTIVIDAD A REALIZAR.

CABALLERO GAYTAN

KAREN ISBETH Y

MOLINA GONZALEZ

BIANCA YESENIA

Realizara en cuestas a la comunidad estudiantil

recabando información necesaria que avale el proyecto

al menos en las instalaciones del Tecnológico.

Crearan el prototipo de la página WEB

Estarán a cargo del soporte técnico

ISIDRO HERNÁNDEZ

HERIBERTO

Coordinara y organizara todas las posibles entradas de

información que beneficien al desarrollo del proyecto,

argumentando ser precavido en la recolección y

adjunción de información.

Elaborará contenido útil para la comunidad

Promocionara el proyecto en otras instituciones

VÁZQUEZ AGUILAR

MIGUEL ÁNGEL

Ayudará a la realización de encuestas y datos

estadísticos sobre ¿Qué es lo que piensan los alumnos

del proyecto? Generando así incentivos para los demás

integrantes y para el desarrollo de nuestro proyecto,

fundamentando carecer de sistemas que ayuden a

abastecer las necesidades académicas-informativas del

plantel.

Elaborará contenido útil para la comunidad

Promocionara el proyecto en otras instituciones

GONZÁLEZ ZEPEDA

CÉSAR HADUEL

Estará al tanto de los avances que el proyecto tenga e

ira anexándolos al protocolo para así poder estructuras

de manera adecuada y ordenada la información, datos

estadísticos etc., recopiladas.

Elaborará contenido útil para la comunidad

Promocionara el proyecto en otras instituciones

13

1.2 Encuesta

1. ¿Qué opinas de los trámites que se realizan en el tecnológico?

2. ¿Te ha pasado que no tienes tiempo de realizar tus tramites (encuesta e

inscripción)?

3. ¿Cuánto tiempo y dinero utilizas en realizar un trámite escolar por día?

4. ¿Sabes utilizar internet? ¿Te gustaría realizar tus trámites desde un

dispositivo móvil con acceso a internet?

5. ¿Estarías dispuesto a pagar para realizar el trámite desde tu casa a un

costo menor?

1.3 Análisis de Información

1. ¿Qué opinas de los trámites que se realizan en el tecnológico? Teniendo los siguientes resultados. Bueno =18 Regular= 6 Malo=1

2. ¿Te ha pasado que no tienes tiempo de realizar tus tramites (encuesta e

inscripción)?

Teniendo los siguientes resultados.

Si =19

No=6

14

3. ¿Cuánto tiempo y dinero utilizas en realizar un trámite escolar por día?

Teniendo los siguientes resultados.

Tiempo. Dinero.

3 horas= 16 $20= 6

4 horas= 4 $30= 10

5 horas=5 $50= 9

4. ¿Te gustaría realizar tus trámites desde un dispositivo móvil con acceso a

internet?

Teniendo los siguientes resultados.

Si= 25

15

5. ¿Estarías dispuesto a pagar para realizar el trámite desde tu casa a un

costo menor?

Teniendo los siguientes resultados.

Si= 23

No= 2