Introduccin

Para poder desarrollar este proyecto, el equipo utilizo el aprendizaje aprendido

anteriormente de las materias cursadas de programacin e implementando una
metodologa autodidacta. Con todo ello, se logr recopilar la suficiente informacin
necesaria para poder efectuar bien todo lo que conlleva realizar este trabajo.
Finalmente, todo esto concluyo para tener las bases necesarias para conseguir el
objetivo: poder crear una pgina de informacin sobre cmo hacer un prototipo" para
as, poder apoyar a presentes o futuros estudiantes que quieran realizar un prototipo
y adems, implementando los nuevos medios de comunicacin, llegar a ms
estudiantes y lograr nutrirles de conocimiento.

Planteamiento del problema

Antes que nada, debemos destacar que este proyecto est enfocado principalmente
hacia los estudiantes de cd. Victoria, Tamaulipas que cursan en el Centro de
Bachillerato Tecnolgico Industrial y de Servicios nmero 119, aunque esta
informacin igualmente puede ser enfocar hacia cualquier persona que quisiera
hacer un prototipo y que est dispuesta a seguir el procedimiento dictado por la
Secretaria de Educacin Publica.
Entendido esto, daremos pie al planteamiento de un gran problema que suele
presentarse ante los estudiantes Cmo hacer un Prototipo?
Las horas de estos estudiantes en dicha institucin se acortan, el tiempo para invertir
en el estudio de cmo hacer un prototipo es poco o nulo, si se requiere un estudio
de esta u clase extra, se tendran que sacrificar clases que son de importancia para
su actual para su desarrollo educativo. Adems de esto, cabe destacar que
lastimamente puede presentarse que los asesores puedan ejercer una mala o
psima supervisin y asesora en sus equipos.
Gracias a estos dos factores (o tan solo con uno)

se puede apreciar que los

proyectos son hechos inadecuadamente o en el peor de los casos, los estudiantes

desertan del trabajo y por ende, de su titulacin.

Justificacin
Para dar una verdadera, slida y funcional solucin a este problema, el equipo creo
una pgina web en la cual se darn los servicios necesarios a los estudiantes para
informarles, enriquecerles y proporcionarles una base, una gua de la elaboracin
de su propio prototipo. Donde se tratara de explicar detalladamente las dudas
principales que se presentan a medida de su elaboracin y profundizar en detalles
fundamentales como el planteamiento del problema, justificacin, hiptesis etc,..
En conclusin, con nuestra pgina web proporcionaremos un estupendo beneficio al
usuario (estudiante) dndole un gran medio por el que

pueda encontrar la

informacin necesaria para poder embargarse correctamente en su prototipo y por lo

tanto, crear adecuadamente este y no perderse o rendirse. Adems, gracias a la
implementacin de los host gratuitos y de calidad, el usuario podr acceder (con los
medios a su alcance) cuando quiera y donde quiera a nuestra pgina web, por lo
que el estudio es donde este dese y no requerir de clases extras.

Hiptesis
Buscamos un medio por el cual se pueda informar adecuadamente a los
estudiantes, sencilla y fcil de manejar. Se puede ver entonces como el sistema
html5 y css3 se ajusta a nuestras actuales necesidades, ya que crea una buena
combinacin para la elaboracin de pginas web estatica, cabe destacar que no
nos parece necesario adoptar un lenguaje de programacin de servidor pues no
necesitamos realizar una web dinmica, con una esttica basta y sobra.
No habr varias pginas, por el contrario, solamente habr una para que esta se
presente de manera directa y firme, con una estructura que empieza con el ttulo y
prosigue con sus temas de inters hasta llegar al final de la pgina y con ello al final
de la gua, adems de poseer algunas referencias que pueden ser de ayuda al
usuario.

Objetivos

El objetivo general de este proyecto fue lograr una buena implementacin e

estructuracin de la informacin y una buena elaboracin de la pgina web para
as poder crear un til recurso para los estudiantes.
Se debi estudiar perfectamente todo lo relacionado con el prototipo (su estructura
fundamentalmente), adems del lenguaje de etiquetas html5, as como tambin el
lenguaje css3 y un poco de JavaScript.
Por otra parte, se hizo una pequea investigacin del host utilizado para poder
evaluar cual convena mas utilizar.

Marco Terico
Una pgina web est compuesta por diferente tipo de tecnologa, en nuestro caso
usamos principalmente html5 y Css3 los cuales son metalenguaje.
Por su parte HTML5 (HyperText Markup Language, versin 5) es la quinta revisin
importante del lenguaje bsico de la World Wide Web, HTML y esta se encargada de
la estructura de la pagina web.Cabe decir que

como es una versin reciente, dota

de nuevas etiquetas creando una peculiar semntica en las pginas web. Por otro
lado esta CSS3 ( Hoja de estilo en cascada), quien al igual que html5 es la versin
ms reciente y est bajo la tutela del W3C, es un lenguaje usado para definir la
presentacin de un documento estructurado.
Estos dos lenguajes hacen la combinacin perfecta para lograr crear una pgina
web, sin embargo tambin hay que tener en cuenta otro factor, el diseo web. Esta
es una actividad que consiste en la planificacin, diseo e implementacin de sitios
web. Requiere

tener en cuenta la navegabilidad, interactividad, usabilidad,

arquitectura de la informacin y la interaccin de medios como el audio, texto,

imagen, enlaces y video.
Todo esto fue estudiado en unidades pasadas, aun que tamb ien fue necesario
implementar una metodologa autodidacta pues era necesario aprendes algunos
factores olvidado o no vistos.
Para finalizar, solo resta aclarar que la informacin de la pgina web (texto que se
presentara en ella) fue dada a base de la informacin brindada por la Secretaria de
educacin pblica del proyecto del prototipo. Con un fuerte anlisis, logramos
descifrarla y con ello, implementar bien la informacin.

Descripcin de planeacin y desarrollo de proyecto

Como en cualquier proyecto, la primera actividad fue estructurarlo bien, accionarnos
roles de acuerdo a nuestras capacidades e implantarnos un calendario para no
desperdiciar tiempo.
La primer labor seria dirigida a todo el equipo, con un tiempo alrededor de 2
semanas, era entender perfectamente cada punto del proyecto y despus hacer una
recopilacin de informacin sobre cmo hacer una pgina web. Alrededor de esta
semana se mostraron conflictos de tiempo, a pesar de ello se sigui trabajando y
gracias a los instrumentos cotidianos pudimos lograr este objetivo, hay que aclarar
que no se presentaron hasta ese momentos problemas de recursos econmicos,
materiales u humanos.
Despus de finalizar aquella etapa, seguimos con la siguiente, la cual era la etapa
de desarrollo. Es preciso aclarar que se empez a rellenar

los puntos de la

memoria tcnica conforme avanzbamos con la creacin de la pgina web.

Al principio de esta etapa, se plantearon los diseos que bamos a tomar en nuestra
pagina, como sera la navegabilidad, interactividad, usabilidad, arquitectura de la
informacin y la interaccin de medios; adems nos dimos a la tarea de investigar
dos puntos importantes: el alojamiento web (hosting), en este para no tener
conflictos econmicos, decidimos simplemente seleccionar uno gratuito(free). Y
investigar si era favorable para el proyecto implementar Responsive Web Design.
Ya tenido toda la informacin necesaria y con ello el diseo, dimos pie a crear y
elaborar la pagina. La principal herramienta utilizada fue nuestras computadoras de
escritorio y a los integrados en esta, los cuales son: el Sublime text2, gimp y algunos
servicios gratuitos alojados en internet (generador de gradient, editor de sombras y

bordes redondeados). Con estos se desarroll la pgina web;

mientras que el

proceso escrito de la elaboracin del prototipo fue echo con el programa Microsoft
Word.

El tiempo invertido fue extenso y algunas veces, dimos pautas por los

estudios.

Descripcin de grado de innovacin

Podemos ver como la tecnologa (y con ella el internet) ha ido a la par con el
ciudadano promedio en los ltimos aos. Es fcil ver actualmente a un nio jugar
con un telfono inteligente e interactuar con l. Por lo mismo, pensar en este medio
como herramienta de aprendizaje no es nada errneo y utilizarlo, sin fines de lucro
en esta ocasin,

ayudara a todos los estudiantes que quieran dar pie en la

elaboracin de su prototipo. Se puede observar que esta informacin no es tan

abundante en las redes pues el enfoque dado es diferente al que los estudiantes
requieren, adems de ser difcil o inconsistente.
Nuestro producto expone definidamente como hacer un prototipo conforme a los
puntos dados por nuestra institucin pero con la ventaja de que est adaptada e
enfocada a los estudiantes y con ello, lograr crear un mayor entendimiento con
estos y diferencindola satisfactoriamente de las dems.

Descripcin de grado de factibilidad

Vemos que, en un principio utilizamos un hosting gratuito, sin embargo si se desea
lograr un mayor alcance sera necesario, sin alguna duda, contratar un mejor
servicio.
Sin embargo, estos costos no fueron planeados para el proyecto y no se piensa
implantarlos por lo que en un principio se neg la idea pero si se fuese a realizar, se
implementaran algunas tcnicas para obtener una ganancia y con ello, lograr
mantener el sitio web sin problemas.
A parte de esto, lo dems es tranquilo, la pgina web no se hizo pensada para
actualizarse ni nada por el estilo as que no vemos ms dificultades que lo dicho
anteriormente.

Descripcin de impacto social o tecnolgico y/o desarrollo sustentable

Vemos principalmente un impacto en los estudiantes, quienes al tener los recursos y
el tiempo necesarios para elaborar un prototipo, se vern fuertemente beneficiados
al poder estudiar en cualquier momento y en cualquier medio que estos posean. Si
se sigue adecuadamente la gua, podra verse tambin un cambio radical en el
rendimiento acadmico ya que este trabajo llamado prototipo no es ms que un
complicado y elaborado ejercicio con el cual podr desarrollar sus capacidades, a tal
punto de fortalecerlas logrando una mejora lo suficientemente grande, para poder
convertirse en un formidable competir.
Igualmente, pueden llegar a afectarse a algunos Maestros econmicamente, ya que
el alumno promedio prefiere, obviamente,

un mejor servicio y que sea barato o

gratis y lastimamente, un maestro no se puede dar el lujo de dar sus clases

gratuitamente pero, adems de esto puede ser que este no este capacitado para la
competencia (nuestra paguina web, como por ejemplo) y por lo que es muy posible
que su alumno prefiera leer y estudiar por su cuenta gracias al recurso que le
proporcionamos a gastar dinero por una clase defectuosa,

Anlisis de resultado

Alumnos

Me gusto
No me gusto

Podemos observar en la grfica de pastel el porcentaje de alumnos, del grado de 5L

del cbtis 119, si le gusto o no les gusto la pgina web en general.
Con esto, podemos ver que a la mayora le intereso y les atrajo la pgina web. Sin
embargo, vemos que algunos otros no les gusto del todo, en otras graficas se
muestran la razn, pero hay que destacar que estas no critican el contenido, por lo
que el propsito principal fue obtenido, proporcionarles una buena informacin.

Conclusiones:
Podemos ver como a nuestros compaeros de clases se beneficiaron con la
informacin, ya que el contenido fue suficiente para satisfacerlos. Pero aun as, no
hay que dejar

de lado que el diseo tuvo algunas crticas pero es normal, las

opiniones son variadas y suele presentarse estos tipos de desconformidades en un

proyecto. Tambin comprobamos que utilizar el mtodos Responsive Web Design
es muy eficaz para llegar al pblico que queremos, hay que recordar que este
proyecto fue enfocado hacia los estudiantes y las encuestas dictan que,
irremediablemente, el celular es el dispositivo ms usado para navegar en la red.

En general el proyecto rindi buenos fruto,, el tiempo invertido fue bueno, no fue
utilizado muchos recursos econmicos y el aprendizaje por este fue estupendo para
el equipo.

Anexos
En esta parte del escrito, se presentaran las siguientes graficas que fueron hechas
a base de la informacin obtenida de las encuestas realizadas a 43 personas del
grupo 5L del cbtis 119.

Grafica 1
50
45
40

Num. Personas

35
30
25

Buena

20

Mala

15
10
5
0
Navegacion

Usabilidad

Arquitectura de la info.

Presentacion

2 Grafica de pastel: Que te disgusto mas de la

presentacion
El icono (mono)
Color de fondo
Tipografia
Otros..

1 grafica de pastel-Medios utilizados para

navegar en internet

Celulares
Descktop
Laptop
No utiliza

Gracias a la siguiente encuesta logramos hacer la grfica nmero 1 y la primera

grafica de pastel
NOMBRE DEL ALUMNO:

____________________________________________

Qu te pareci la navegacin de la pgina?

Buena ( ) MALA ( )

Qu te pareci la usabilidad de la pgina?

Buena ( ) MALA ( )

Qu te pareci la arquitectura de la info. De la Buena ( ) MALA ( )

pgina?
Qu te pareci la presentacin de la pgina?

Buena ( ) MALA ( )

Qu medio utiliza ms para navegar en internet?

Al descubrir que a una mayora le disgusto la presentacin, hicimos la siguiente

pequea encuesta para poder hacer la tercera grafica de pastel:
NOMBRE DEL ALUMNO:

____________________________________________

Qu te disgusto ms de la presentacin?

Bibliografa:
Diseo web (2007, 07) de noviembre; Wikipedia, La enciclopedia libre. Fecha de
consulta:

Noviembre

20,

2014

from

http://es.wikipedia.org/wiki/Dise%C3%B1o_web#V.C3.A9ase_tambi.C3.A9n.
Hoja de estilos en cascada (2014, 12) de octubre; Wikipedia, La enciclopedia libre.
Fecha

de

consulta:

Noviembre

20,

2014

from

http://es.wikipedia.org/wiki/Hoja_de_estilos_en_cascada.
World Wide Web Consortium (2014, 17) de octubre; Wikipedia, La enciclopedia libre.
Fecha

de

consulta:

Noviembre

20,

2014

from

http://es.wikipedia.org/wiki/World_Wide_Web_Consortium.
HTML5 (2014, 14) de noviembre; Wikipedia, La enciclopedia libre. Fecha de
consulta: Noviembre 20, 2014 from http://es.wikipedia.org/wiki/HTML5.
apredneraprogramar (2006-2014); aprenderaprogramar.com. Fecha de consulta:
Noviembre 20, 2014 from http://aprenderaprogramar.com.
J. D. Gauchat . (2012 ). El gran libro de HTML5, CSS3 y Javascript . Gran Via de les
Corts Catalanes, 594 08007 Barcelona : MARCOMBO.

http://guiaprototipo.herobo.com/