Este documento describe una página web educativa dirigida al fortalecimiento de los conocimientos de Física, Electricidad y Magnetismo. La página incluye secciones sobre los capítulos de la materia, videos tutoriales, ejercicios resueltos, prácticas de laboratorio y referencias bibliográficas. El objetivo es promover el aprendizaje en línea de una manera didáctica y funcional mediante el uso de herramientas gratuitas como YouTube, Scribd y Bootstrap.

1. P´agina Web Educativa dirigida al fortalecimiento de los
conocimientos de F´ısica Electricidad y Magnetismo.
Universidad de Cuenca
Facultad de Ingenier´ıa
Abad L. Freddy L., Arias B. J. Sebastian.
∗(freddy.abadl,sebastian.arias)@ucuenca.edu.ec
Abstract—El crecimiento del uso del Internet en el diario vivir,
afecta todas las ´areas de la cotidianidad, la educaci´on es el ´area
que mayor impacto a recibido. A˜nadiendo a esta raz´on, que la
globalizacion de la informacion es un hecho que debe apoyarse
para generar cambios que involucren a la mayor´ıa poblaci´on
mundial. En el presente proyecto de aplicaci´on de conocimientos,
se realiza una p´agina web orientada al fortalecimiento de los
conocimientos de la materia de F´ısica, Electricidad y Mag-
netismo, presentando su maquetado, unificando los conocimientos
de programaci´on con los de la materia, definiendo como se
implementa la navegaci´on en la p´agina, adem´as de presentar
los resultados finales de la elaboraci´on del proyecto. En donde
luego de haber identificado la necesidad de realizar un proyecto
asi, se presentan recursos los cuales son accesibles, simples y
´optimos, que sirven como herramientas para el mejoramiento
y funcionamiento de la p´agina. Es un proyecto que puede auto
sustentarse, adem´as de brindar un apoyo y que trata de generar
un mayor inter´es por la materia dise˜nando la pagina de una
forma did´actica, a la vez que educativa y funcional.
Index Terms—F´ısica,, Electricidad, Magnetismo, Pagina Web,
Educaci´on
I. INTRODUCCI ´ON
Ante el requerimiento de ejecutar proyectos integradores
en determinadas materias, y con el ´animo de cambiar la
orientaci´on que se da a los proyectos de F´ısica, proponemos
la ejecuci´on de una P´agina Web Educativa.
Dicha P´agina Web Educativa tendr´a como tema primor-
dial, el estudio y repaso de la materia F´ısica: Electricidad
y Magnetismo. La realizaci´on de este proyecto est´a dirigida
a promover el e-Learning, posicionando al estudiante como
actor mayoritario de su Educaci´on Universitaria. Adem´as de
empoderar los conocimientos de F´ısica: Electricidad y Mag-
netismo, se promueve la cultura de la Investigaci´on, necesaria
en la situaci´on actual en el mercado Laboral.
II. CONTENIDO
La P´agina Web est´a maquetada de tal manera, que por
intuici´on el estudiante sabr´a que se tienen secciones de es-
tudio, cada sesi´on de estudio tendr´ıa determinado n´umero
de cap´ıtulos, cada cap´ıtulo determinado espacio de ejercicios
propuestos, adem´as de cada cap´ıtulo contener un Videotutorial
referente al tema (Opcional) y una pr´actica de Laboratorio
relacionada con el tema (Opcional).
Es decir, al ingresar a la p´agina web, el usuario tendr´a la
siguiente navegabilidad:
P´agina Principal →Secciones de Estudio → Cap´ıtulos → Ejer-
cicios Propuestos → Videotutorial → Pr´acticas de Laboratorio.
Para entender la secuencia de navegaci´on, ap´oyese en el
diagrama de maquetaci´on 1.
Fig. 1. Maquetado P´agina Web.
Los recuadros en la parte lateral izquierda, corresponde a es-
pacios de publicidad que se pueden ofertar, se puede hacer de
este proyecto autosustentable econ´omicamente( para que los
costos de host, dominio). Adem´as de que con estas pr´acticas
se aplica SEO. (Diagramas generados en Balsamiq Mockup.)
La publicidad puede integrarse mediante la herramienta de
Google AdSense.
III. HERRAMIENTAS
Para la elaboraci´on del proyecto se utilizaron diferentes
herramientas, tanto para la codificaci´on de la p´agina como
para la inclusi´on de videos y pdf’s dentro de la misma.
1) Photoshop
El contenido de im´agenes y/o videos se manipul´o, retoc´o
y gener´o mediante el uso de esta herramienta.
2) Mendeley
Es una herramiente que permite gestionar y compartir
referencias bibliogr´aficas.
3) GitHub
Es un sistema gestor de versiones, hostings gratuitos
para proyectos con fines educativos.
4) Librer´ıas de LatexWeb
Se utilizaron estas librear´ıas para poder administrar,
crear y editar formulas relativas al contenido de la
materia.
5) GoogleFonts
Es una librer´ıa con 800 fuentes licenciadas que pertenece
a Google. Sirve para programar interfaces para fuentes

2. en p´aginas web. Cabe recalcar que esta herramienta es
de software libre.
6) Bootstrap
Es un conjunto de herramientas de c´odigo abierto para
dise˜no de sitios y aplicaciones web. Contiene plantillas
de dise˜no con tipograf´ıa, formularios, botones, cuadros,
men´us de navegaci´on y otros elementos de dise˜no
basado en HTML y CSS, as´ı como amplificaciones de
JavaScript adicionales.
7) Api de Scribd
Esta herramienta se utiliz´o para generar pdf’s embebidos
e insertarlos en p´agina web tanto los de las pr´acticas de
laboratorio como los de los ejercicios propuestos y re-
sueltos. Adem´as, brinda la manipulaci´on de dichos pdf’s
sin necesitar ser un programador solamente ingresando
con uneca cuenta y contrase˜na desde la p´agina web de
Scribd.
8) Api de YouTube
Se utiliz´o este instrumento para la creaci´on y manejo de
listas de reproducci´on sobre el contenido de la materia.
IV. RESULTADOS
A. Requisitos de Propuesta de Proyecto.
Al ser un Proyecto de una Educaci´on de 3er Nivel. se busca
y exige, que los est´andares sean de calidad. Adem´as de cumplir
con temas que colaboren con la soluci´on de una problem´atica
y/o cubran una necesidad. A˜nadiendo a su vez, la cobertura de
los temas de la materia tomada. Es por esto, que la realizaci´on
de una p´agina web educativa cumple con tales requerimientos:
• Cubren una necesidad (apoyo educativo bajo est´andares
de selecci´on altos)
• Solucionar una problem´atica (falta de herramientas ed-
ucativas generadas para el entorno de un estudiante local)
• Cubren, adem´as, un tema dif´ıcil: La Inclusi´on.
• La Inclusi´on se cumple al: Tener una herramienta como
est´a a la distancia de 5 clicks, apoya la educaci´on de
personas con determinada discapacidad o problema de
Salud.
• Existe una coyuntura del proyecto con la materia dictada
y la carrera de Sistemas.
• Provoca el inter´es de estudiantes de Ingenier´ıa Sistemas
en una materia dirigida m´as hacia otras ramas de la
Ingenier´ıa.
B. Resultados Totales Versi´on I.
Estos diagramas son maquetaciones en las que se busca
cumplir y/o variar dependiendo de los requerimientos de la
p´agina web, que siempre ser´a cambiante. Es por eso que, al
transformar en c´odigo HTML, CSS, JavaScript, puede variar
para una mejor ejecuci´on en tiempo y/o una mejor est´etica.
Es por esto que, al transformarlo en una p´agina web, hemos
obtenido estos resultados.
• Secci´on Inicio:
En la secci´on de inicio se informa sobre el contenido
general de la materia ,es decir conceptos sobre f´ısica,
electricidad y sobre magnetismo(ver fig.2), tambi´en se
implemento una secci´on con im´agenes que se deslizan
para mejorar el dise˜no de la secci´on (ver fig. 3).
Fig. 2. Secci´on Inicio.
Fig. 3. Imagenes Interactivas.
• Secci´on Cap´ıtulos:
En la secci´on cap´ıtulos se encuentran todo el contenido de
la materia resumida por cap´ıtulos enumerados, la mayor
parte se bas´o en el material proporcionado por el docente
asignado de la materia. En cada capitulo se trata de
mejorar la comprensi´on de la materia con im´agenes sobre
los temas tratados en dicho capitulo (ver fig.4).
Fig. 4. Secci´on Cap´ıtulos.
• Secci´on Videos:
En la secci´on videos en donde se utiliza la Api de
YouTube, cada capitulo cuenta con su lista de repro-
ducci´on. Tambi´en una breve informaci´on sobre de que
tratar´a cada lista de reproducci´on de cada cap´ıtulo, Los
videos se puede reproducir en la misma p´agina web o en
YouTube propiamente. (ver fig.5).

3. Fig. 5. Secci´on Videos.
• Secci´on Laboratorio:
En la secci´on laboratorio se utiliza la Api de Scribd,
donde se generaron los pdf’s embebidos de los informes
de la pr´actica, estos est´an divididos en subsecciones
para cada n´umero de pr´actica, se informa el t´ıtulo de
la pr´actica, los objetivos y que conceptos se reforzar´an.
(ver fig.6).
Fig. 6. Secci´on Laboratorio.
• Secci´on Equipo:
En la secci´on de equipo se encuentra un pdf embebido de
Scribd con todas las referencias usadas para la realizaci´on
del proyecto. (ver fig.7).
Fig. 7. Secci´on Equipo.
• Secci´on Ejercicios:
En esta secci´on tambien se utiliza la Api de Scribd, donde
los ejercicios se dividen en cada par de cap´ıtulos con
sus respectiva soluciones, Son ejercicios obtenidos de los
propuestos por el docente de la materia.(ver fig. 8).
Fig. 8. Secci´on Ejercicios.
• Barra de Navegaci´on: :
Esta barra brinda ayuda al usuario para interactuar y
navegar de una mejor forma en la pagina (ver fig.9).
Fig. 9. Barra de Navegaci´on.
V. CONCLUSI ´ON
Este proyecto en general nos ha servido para unificar
nuestros conocimientos como estudiantes de Ingenier´ıa de
Sistemas con F´ısica, Electricidad y Magnetismo, mediante
una p´agina web sencilla pero funcional, moderna, que utiliza
todos los recursos asequibles y gratuitos, que est´an a nuestro
alcance por pertenecer a la comunidad universitaria que no
son aprovechados en su mayor´ıa, debido al desconocimiento
de los mismos.
Este tipo de proyectos es un desaf´ıo para los programadores
ya que pone en pr´actica nuestros conocimientos adquiridos,
nos ayuda a seguirlos fortaleciendo, mejorando y aprendiendo
con la ejecuci´on, teniendo fallos y aciertos, de dicho proyecto.
Presentando as´ı el resultado final de haber aplicado el mayor
esfuerzo y empe˜no en realizarlo.
Este proyecto de una u otra manera es un proyecto piloto
para las materias que deseen innovarse en la forma de llegar a
los estudiantes, brind´andoles mas oportunidades de fortalecer
los conocimientos adquiridos durante las horas en el aula, que
pueden estar a su alcance por medio de un par de clics.

4. REFERENCES
[1] Recursos para Dise nadores, Desarrolladores y Creadores de la Web.
[2] J. G´omez Campomanes, Circuitos el´ectricos. Servicio de Publicaciones
[3] J. Gonz´alez P´erez, Montaje y mantenimiento de m´aquinas el´ectricas
rotativas : montaje y mantenimiento de instalaciones el´ectricas de baja
tensi´on (uf0897). Ic Editorial, 2012.
[4] J. C. M. Castillo, Componentes pasivos (Electr´onica). Editex, 2017.
[5] J. C. Maxwell, A treatise on electricity and magnetism. Dover Publica-
tions, 1954.
[6] F. A. R. M. U. d. C. Rolando Delgado Castillo, Ideas f´ısicas en el
Medioevo.
[7] M. Fowler, Isaac Newton. 1995.
[8] N. P. D. d. F. T. UAM), Biof´ısica y el cerebro.
[9] G. Y. (UAM), F´ısica del Espacio.
[10] P. J. Hern´andez, La nueva cosmolog´ıa. 2003.
[11] P. D. Group, La aventura de las part´ıculas. 1999.
[12] M. J. G. I. d. F. T. UAM), Part´ıculas elementales.
[13] S. Hacyan, Relatividad para principiantes. Fondo de Cultura
Econ´omica,1995.
[14] F. O. Minotti, Apuntes de Mec´anica Cl´asica. 2004.
[15] F. A. R. M. U. d. C. Rolando Delgado Castillo, La f´ısica del siglo XX.
[16] F. A. R. M. U. d. C. Rolando Delgado Castillo, Nuevo Paradigma
electromagn´etico en el siglo XIX.
[17] F. A. R. M. U. d. C. Rolando Delgado Castillo, La f´ısica del siglo XVIII.
[18] F. A. R. M. U. d. C. Rolando Delgado Castillo, De Arist´oteles a
Ptolomeo.
[19] S. Hacyan, Relatividad para principiantes. Fondo de Cultura Econ´omica,
1989.