Protocolo de Investigacion

INDICE
Introduccion ............................................................................................................. 1
1 Tipo de investigación ............................................................................................ 2
2 Rubros del perfil ................................................................................................... 2
3 Antecedentes: ...................................................................................................... 5
4 Problemática: ....................................................................................................... 7
5 Alcances: .............................................................................................................. 8
6 Limitaciones: ........................................................................................................ 8
7 Objetivo: ............................................................................................................... 9
8 Objetivo particulares: ............................................................................................ 9
9 Justificación ........................................................................................................ 10
10 Marco referencial .............................................................................................. 11
a. Marco histórico ......................................................................................... 11
b. Marco legal ............................................................................................... 13
c. Marco teórico............................................................................................ 17
d. Marco conceptual ..................................................................................... 18
e. Marco metodológico.................................................................................. 34
11 Desarrollo del proyecto, programación y resultados......................................... 37

diagrama relacional para el prototipo de la plataforma ...................................... 37
Interfaz de inicio ................................................................................................. 37
Interfaz de contenido ......................................................................................... 42
Interfaz de ejercicios .......................................................................................... 48
Interfaz de desafios............................................................................................ 53
Interfaz de registro ............................................................................................. 59
Interfaz ´para acceder ........................................................................................ 64
12 Cronograma ..................................................................................................... 69
13 Presupuesto ..................................................................................................... 71
Recurso humano ............................................................................................... 71
Recursos físicos y tecnológicos ......................................................................... 71
14 Fuentes consultadas ........................................................................................ 72

15 Conclusion........................................................................................................ 76
ÍNDICE DE FIGURAS
figura 1: Modelo relación ....................................................................................... 37

figura 2: Pantalla de inicio ..................................................................................... 38
figura 3: Contenido de la plataforma ..................................................................... 41
figura 4: Contenido del apartado de lenguajes de programación .......................... 42
figura 5: Interfaz de ejercicios................................................................................ 48
figura 6: Interfaz de desafíos prácticos .................................................................. 53
figura 7: Interfaz de registro................................................................................... 59
figura 8: Interfaz de acceso ................................................................................... 64
INTRODUCCION
El método más antiguo para evaluar a los estudiantes de cualquier nivel educativa
es la evaluación tradicional. Se caracteriza por que los parámetros tienden a ser
establecidos por el docente sin tener en cuenta criterios académicos y
profesionales, se brindan notas cuantitativas sin criterios claros que las justifiquen,
generalmente se hace con el fin de determinar quiénes aprueban o reprueban una
asignatura, tiende a centrarse más en las debilidades y errores que en los logros,
es establecida por el docente, sin tener en cuenta la propia valoración y participación
de los estudiantes, tiende a castigar los errores y no se asumen estos como motores
esenciales del aprendizaje, son escasas las oportunidades para el auto
mejoramiento, pues los resultados de las pruebas de evaluación son definitivos, sin
posibilidades de corrección o mejora, se asume como un instrumento de control y
de selección externo, se considera como un fin de sí misma, limitada a la
constatación de resultados, se centra en los estudiantes de manera general.
Es por ello que en el presente trabajo se muestra las etapas necesarias para el
desarrollo de la propuesta del proyecto la cual es el diseño de una plataforma web
para evaluar el proceso de la enseñanza y aprendizaje de los estudiantes del
Instituto Tecnológico de Tlalnepantla específicamente en la carrera de ingeniería
en tecnologías de la información y comunicaciones, a través de desafíos teóricos o
prácticos sobre temas relevantes de las materias más importantes en la carrera
con la finalidad que el estudiante pueda identificar la eficiencia así como la
deficiencia de las habilidades al igual que los conocimientos que va adquiriendo en
transcurso de los semestres . Por otro lado, son pocas las instituciones que se
apoyan de las herramientas que nos brindan las tecnologías de la información para
el desarrollo de conocimiento y habilidades de los estudiantes, es por ello que el
ITTLA podría ser uno de los pioneros al contar con alternativas mas eficientes para
evaluar la preparación que tiene sus estudiantes y que tan listos están para
enfrentar el mundo laboral.
pág. 1
1 TIPO DE INVESTIGACIÓN
La investigación aplicada se centra en la resolución de problemas en un contexto
determinado, es decir, busca la aplicación o utilización de conocimientos, desde una
o varias áreas especializadas, con el propósito de implementarlos de forma práctica
para satisfacer necesidades concretas. (UC, 2018)
Proporciona una solución a problemas del sector social o productivo, en este caso
será una solución de carácter tecnológico.
Ya que se aplicarán los conocimientos y habilidades adquiridas en distintas materias
a lo largo de la carrera para desarrollar una solución o dar respuesta ante la
problemática o deficiencia que sea han identificado en la universidad, es por ello
que se determinó que el proyecto de investigación es de tipo aplicativo ya que se
conoce el problema y se resolverá de manera práctica.
2 RUBROS DEL PERFIL

1) Diseñar, implementar y administrar redes de cómputo y comunicaciones, bajo
modelos y estándares internacionales, para satisfacer las necesidades de
información de los sistemas sociales, garantizando aspectos de seguridad y
calidad.
2) Diseñar, desarrollar y mantener sistemas de bases de datos asegurando la
integridad, disponibilidad y confidencialidad de la información almacenada.
3) Integrar las diferentes arquitecturas de hardware y administrar plataformas de
software para incrementar la productividad en las organizaciones.
4) Implementar sistemas de seguridad bajo políticas internas de las organizaciones
y estándares aceptados.
5) Observar los aspectos legales del uso y explotación de las Tecnologías de la
Información y Comunicaciones.
6) Desarrollar e implementar sistemas de información para el control y la toma de
decisiones utilizando metodologías basadas en estándares internacionales.
7) Analizar, diseñar y programar dispositivos con software empotrado.
8) Integrar soluciones basadas en sistemas de comunicaciones que involucren
tecnologías actuales y emergentes.
pág. 2
9) Utilizar tecnologías y herramientas actuales y emergentes acordes a las
necesidades del entorno.
10) Desempeñar funciones de consultoría y auditoría en el campo de las
Tecnologías de la Información y Comunicaciones.
11) Crear empresas en el ámbito de las Tecnologías de la Información y
Comunicaciones.
12) Administrar proyectos que involucren Tecnologías de la Información y
Comunicaciones en las organizaciones conforme a requerimientos establecidos.
Los rubros que se relacionan con el proyecto son los siguientes:

1) Diseñar, desarrollar y mantener sistemas de bases de datos asegurando la
integridad, disponibilidad y confidencialidad de la información almacenada.
Ya que la plataforma recolectará distinta información como calificaciones,

correos, información en general de los estudiantes, entre otras cosas, se hará
uso de una base de datos para alojar toda la información de sus usuarios, se
diseñará la arquitectura que tendrá nuestra base de datos de tipo relacional, la
cual constara de distintos diseños los cuales son:
• Diseño conceptual
• Diseño Lógico
• Diseño Físico
Implementar sistemas de seguridad bajo políticas internas de las organizaciones

y estándares aceptados.
2) La plataforma será diseña bajo guías de buenas prácticas de código seguro, ya
que se trata de un software orientado a la web podemos utilizar los recursos que
nos ofrece la organización OWASP para diseñar la plataforma altamente segura,
el diseño de la plataforma será orientado a mitigar todas las posibles
vulnerabilidades más comunes de una aplicación web.
3) Observar los aspectos legales del uso y explotación de las Tecnologías de la
Información y Comunicaciones.
la plataforma se regirá bajo las siguientes legislaciones:

• Aspectos de propiedad intelectual
pág. 3
• Derechos de autor en internet
• Ley de comercio electrónico
• Protección de datos de carácter personal
• Acceso ilícito a sistemas y equipos de informática
La plataforma contara con una política de términos y condiciones donde se le

detallara a los usuarios toda la información con respecto a cuáles son los datos
que recolectaremos, que se puede hacer en la plataforma, cuáles acciones son
penalizada o prohibidas dentro de la plataforma, cual es el propósito de tener
esos datos de igual manera tendrá una política de privacidad con toda la
información detallada apegada a la ley.
4) Utilizar tecnologías y herramientas actuales y emergentes acordes a las
necesidades del entorno.
La plataforma estará construida con los lenguajes de programación y

herramientas más actuales, tratándose de una aplicación orientada a la web, los
leguajes a utilizar son:HTML5, CSS3, Javascript, PHP y MYSQL
Frontend: React.js en caso de Javascript, Angular en caso de Typescript,
Boostrap, Materialize
Backend: Node.js en caso de Javascript, Laravel en caso de PHP, Sprint en caso
de Java
Se diseñará con la metodología de web responsive design ya que actualmente
los usuarios utilizan mas el navegador de sus dispositivos móviles. Para darle
un aspecto más atractivo a los usuarios y ofrecerles la mejor experiencia, la
plataforma será diseñada como una progressive web app.
5) Desarrollar e implementar sistemas de información para el control y la toma de
decisiones utilizando metodologías basadas en estándares internacionales.
Ya que la plataforma recolecta toda la información generada por cada

estudiante, como las calificaciones de sus ejercicios prácticos, sus avances, su
deficiencia, cuantos estudiantes existen, entre otras cosas. Toda esta
información puede ser procesa y analizada para generar algún tipo de reporte,
graficas, para presentar o consultar información importante.
pág. 4
3 ANTECEDENTES:
El desarrollo de software es una de las profesiones más demandadas a nivel
mundial, es porque ello que los profesionistas siempre tienen que estar en constante
aprendizaje y se apoyan de diversas herramientas o plataformas que existen en
internet, existen plataformas en las cuales se ofertan cursos de todo tipo las más
conocidas son Udemy y Coursera, aunque existen una infinidad, pero existen otro
tipo de plataformas las cuales no se enfocan en enseñarte la teoría si no en evaluar
tus habilidades y conocimientos como desarrollador a través de ejercicios,
problemas, desafíos y concursos de programación.
Algunas de las más conocidas a nivel mundial son: Codesignal, CoderByte,
HackerRank, TopCoder, LeetCode, Coderforces
Las plataformas mencionadas anteriormente tienen todo su contenido en inglés,
esto puede presentar una barrera para la mayoría de estudiantes de habla hispana,
el punto más importante de estas plataformas es que tiene niveles desde lo más
básico hasta retos lanzados por empresas líderes en tecnología como Google o
Uber por mencionar algunas, esto quiere decir que muchas empresas reclutan a
través de este tipo de plataformas. Otro punto a considerar que la mayoría de las
plataformas ofrecen planes para acceder a sus servicios.
El método más antiguo para evaluar a los estudiantes de cualquier nivel educativa
es la evaluación tradicional.
La evaluación tradicional se caracteriza por que los parámetros tienden a ser
establecidos por el docente sin tener en cuenta criterios académicos y
profesionales, se brindan notas cuantitativas sin criterios claros que las justifiquen,
generalmente se hace con el fin de determinar quiénes aprueban o reprueban una
asignatura, tiende a centrarse más en las debilidades y errores que en los logros,
es establecida por el docente, sin tener en cuenta la propia valoración y participación
de los estudiantes, tiende a castigar los errores y no se asumen estos como motores
esenciales del aprendizaje, son escasas las oportunidades para el auto
mejoramiento, pues los resultados de las pruebas de evaluación son definitivos, sin
posibilidades de corrección o mejora, se asume como un instrumento de control y
pág. 5
de selección externo, se considera como un fin de sí misma, limitada a la
constatación de resultados, se centra en los estudiantes de manera general.
La educación y las formas de evaluar nace del modelo prusiano, basado en castas
y clases, que buscaba crear súbditos obedientes preparados para la guerra. De este
modelo copiamos muchas nociones de la escuela actual, como las calificaciones;
los exámenes; el sistema de castigos y premios; los alumnos vistos como meros
números, donde el sistema se centra en una escalada de notas que deben obtener
los estudiantes para determinar si son aptos para continuar con los siguientes
niveles de estudio o ser desechados por no alcanzar los “objetivos esperados”. La
educación se enfocaba en crear un proceso mecánico y administrativo, la escuela
era un lugar para crear trabajadores donde tuvieran el mismo conocimiento, las
mismas habilidades.
La innovación la radica en ofrecerle al estudiante una alternativa de evaluación para
conocer cuestiones importantes de su desarrollo profesional, las cuales un examen
escrito no puede identificar.
La plataforma identificara la eficiencia y deficiencia de los estudiantes en las
materias más importantes de la carrera que cursa. Permitirá que cada estudiante
sea evaluado, para que conozca sus fortalezas y debilidades de su aprendizaje,
proponiendo estrategias de solución a sus resultados y que coadyuven a fortalecer
sus competencias no alcanzadas. Es adaptable a las necesidades del usuario
acorde a lo que busque evaluar, ya sea el estatus académico del estudiante
actualmente y a futuro contendrá la evaluación del estatus del docente e institución.
Dada la complejidad y la insuficiente información que exista de nuestros egresados
a nivel nacional, la plataforma recabara la información más relevante de cado uno
de los estudiantes con la finalidad de tener un registro y una forma de contactarlos.
Este mapeo y seguimiento permitirá a la institucion contar con información confiable
y permitirá observar la ruta que emprenden sus estudiantes desde el primer
semestre hasta una vez que egresan. Y así servir como referencia para la toma de
decisiones, actualización de planes y programas de estudio, apertura de nuevas
carreras, entre otras cosas.
pág. 6
4 PROBLEMÁTICA:
En el Instituto Tecnológico de Tlalnepantla, específicamente en la carrera de
Ingeniería en Tecnologías de la información y comunicaciones la forma en que
evalúan la mayoría de los profesores en materias relacionadas a desarrollo de
software es a través de una evaluación tradicional esto quiere decir que se enfocan
en exámenes que califican cuanta información a memorizado el estudiante, pero al
tratarse de una carrera relacionada al ámbito tecnológico se deben plantear
exámenes que evalúen las habilidades prácticas y teóricas del estudiante con
casos de uso orientados a un ejemplo real, desafortunadamente los profesores
asignan los mismo proyectos año con año sin tomar en cuenta diferentes factores,
por ejemplo los lenguajes de programación mas demandados, las herramientas que
se utilizan en la actualidad, las metodologías de desarrollo entre otras cosas. Si
dichos proyectos pueden servir para desarrollar e identificar las habilidades que
hasta el momento tiene el estudiante y las cuales le permitan a futuro desenvolverse
en un ambiente laboral. Los estudiantes deben estar practicando constantemente,
consultando información actualizada y en muchas ocasiones las materias no
pueden servir mucho por diversos factores, por ejemplo, el temario es viejo y no
abarca temas actuales, el profesor esta desactualizado o tiene poca experiencia en
las tecnologías actuales. Es por ello que los estudiantes deben hacer uso de una
plataforma la cual le ofrezca contenido relevante, como “desafíos”, practicas o
proyectos que se presenten en un trabajo real.
pág. 7
5 ALCANCES:
• Los estudiantes podrán hacer uso de la plataforma a través de dispositivos
móviles o computadora personal.
• La plataforma contara con dos tipos de usuarios (estudiantes y administrador)
• La plataforma permitirá visualizar desafíos “reales” de un ambiente
tecnológico
• Actualizaciones semestrales de la plataforma sobre contenido nuevo.
• La plataforma mostrara el progreso cuantitativo del estudiante
semestralmente
• El proyecto estará apegada al plan curricular de la carrera de TICS.
6 LIMITACIONES:
• Uso exclusivo para los estudiantes de la carrera de ITIC’S del ITTLA
• La plataforma solo contendrá temas en relación a áreas de desarrollo de
software
o Programación Web
o Programación Móvil
o Base de datos
• Será un complemento en la evaluación de la enseñanza y aprendizaje en las
materias, en ningún momento pretenderá ser un sustituto en la forma de
medir el aprendizaje de los estudiantes
• El estudiante debe poseer un mínimo de conocimiento teórico y prácticos de
los diferentes temas ya visto en su carrera.
• Los usuarios deben tener acceso disponible permanente a los medios de
acceso tecnológicos (conexión a internet)
• Los estudiantes deben tener autodisciplina, autocontrol, automotivación y ser
autodidactas durante el proceso de aprendizaje.
pág. 8
7 OBJETIVO:
Diseñar una plataforma que evalué el proceso de enseñanza aprendizaje de los
estudiantes del ITTLA, en la carrera de TIC’S, mediante desafíos teóricos y prácticos
para que el estudiante pueda identificar su grado de conocimiento actual en las
materias más importantes de la carrera.
8 OBJETIVO PARTICULARES:
• Estudiar las diferentes plataformas que existen en el mercado y que son
similares al proyecto propuesto
• Diseñar las interfaces amigables que faciliten a los usuarios el manejo y
utilidad del prototipo de la plataforma.
• Diseñar la base de datos que contendrá toda la información de los usuarios.
• Estudiar métricas que permitan medir la eficiencia y deficiencia del estudiante
• Proponer una escala cuantificable sobre los resultados obtenidos
• Clasificar la información recolectada
• Analizar la información recolectada
• Proponer contenido gratuito para que el estudiante pueda reforzar o ampliar
sus habilidades y conocimiento.
pág. 9
9 JUSTIFICACIÓN
Se realizará una plataforma web que permita dar solución a la problemática que
atraviesa el Instituto Tecnológico de Tlalnepantla, específicamente en el área de
sistemas con respecto a la forma en que identifican las habilidades y conocimientos
de los estudiantes a lo largo de su plan de estudios, en materias relacionadas al
área de desarrollo de software. Hasta el momento el departamento de sistemas no
cuenta una plataforma desarrollada exclusivamente para la carrera de TIC´S y que
brinde las características propuestas en el presente proyecto.
La importancia del proyecto radica en diseñar alternativas para medir el proceso de
enseñanza y aprendizaje de los estudiantes, se sabe que los métodos actuales de
evaluación de la institución no son suficientes para determinar las habilidades y
conocimientos del estudiantes , tampoco se brinda una retroalimentación sobre los
temas con menor dominio, es muy importante que los estudiantes en áreas de
tecnología estén continuamente midiendo sus capacidades, conocimiento y
habilidades ya que esta área de conocimiento sufre constantes cambios día con día
y resulta imposible que las universidades se puedan adaptar a dichos cambios.
Beneficios:
• Conocer con exactitud el número de estudiantes usando la plataforma
• Registrar los avances de los estudiantes
• Conocer en términos cuantitativos las habilidades de los usuarios
• Identificar los estudiantes con mayores o menores habilidades y
conocimientos
• Organización y buen control de la información de los usuarios
• Identificar y detectar las necesidades de capacitación de los estudiantes
• Los estudiantes conocerán de manera clara las expectativas que demanda
un perfil profesional con respecto a las competencias que ha desarrollado
hasta el momento
pág. 10
10 MARCO REFERENCIAL
A. MARCO HISTÓRICO
Desde épocas antiguas, específicamente dos milenios antes de nuestra era, se
afirma que el examen surgió como instrumento de selección de personal en la
burocracia China, apareciendo de nuevo en la universidad medieval para ser
aplicado en el ámbito educativo con los fines de admisión, graduación y la
determinación de las condiciones de los estudiantes
Posterior a esos períodos, hasta la mitad del siglo pasado, la evaluación existió en
la educación sin profundizar mucho en su análisis, con funciones sociales en las
que dominaban el acceso a la educación, la certificación de niveles alcanzados, el
desarrollo de instrumentos de evaluación como los test; y su alcance se sujetaba a
la medición del aprendizaje de los alumnos, con énfasis en el resultado final y la
cuantificación de los saberes. (Barriga Arceo & Hernandez Rojas, 2002).
La evaluación tradicionalmente estuvo vinculada con el concepto de medida del
rendimiento académico de los contenidos disciplinares (valoración de los
resultados), manteniendo una visión examinadora y de control, y restringida al
aprendizaje de los alumnos. El examen constituyó la técnica principal utilizada para
valorar el trabajo de los alumnos individualmente. Entonces, ni siquiera se planteaba
la posibilidad de someter a evaluación los demás componentes del currículum.
Sin duda, uno de los avances más significativos ha sido la consideración de que
existen elementos que se escapan de lo "real", que no son cuantificables. Estos
componentes se han convertido en los factores innovadores de los procesos
evaluativos, constituyendo todo un desafío para la elaboración de instrumentos que
posibiliten su empleo cotidiano en la práctica docente (Dias Noguera, 1995)
El examen tradicional sigue siendo la técnica de evaluación per excelencia y aunque
se incluyen otros elementos, en todo caso, éstos tienen siempre un menor peso en
la calificación global. La evaluación, que muchas veces es sinónimo de examen, es
diseñada e implementada no para cumplir funciones pedagógicas (orientadora y
retroalimentador), sino para satisfacer necesidades burocrático–administrativas y
de rendición de cuentas.
pág. 11
El profesorado continúa empleando la evaluación en el aula como un mecanismo
de control del comportamiento de los alumnos (lo que genera conflictos y
enfrentamientos con ellos) quienes, en general, asumen una postura pasiva y poco
crítica. Según la percepción del profesorado, el alumno es el responsable de su bajo
rendimiento académico o, al menos, eso se le ha hecho creer, algunas de las causas
a las que se atribuye el fracaso escolar son la deficiente formación escolar previa,
la mayoría de los alumnos trabajan y no tienen tiempo de estudiar, problemas
personales, falta de vocación, etcétera. Esto revela cierta incapacidad de autocrítica
del profesorado, lo que seguramente le impide mejorar su enseñanza e incorporar
en el aula prácticas más participativas y democráticas como la autoevaluación y la
coevaluación, que demandan un ambiente de apertura y confianza, que no de
autoritarismo. (Moreno Olivos, 2009)
El profesor sigue siendo el protagonista del proceso, en el aula el alumno es objeto
y nunca sujeto de la evaluación. El docente más que evaluar, lo que hace es
examinar y calificar, con lo que el examen pasa de ser un medio a convertirse en un
fin en sí mismo. En la práctica la atención se centra y se limita a las calificaciones,
que concretan los resultados y dan por cerrado un proceso que debe permanecer
abierto e inacabado. Lo anterior confirma cómo, a medida en que se avanza en los
niveles del sistema educativo, la evaluación se pervierte, perdiendo su carácter
formativo, por lo que urge recuperar el sentido natural de la evaluación como un
elemento integrado al proceso de enseñanza aprendizaje.
En la actualidad en el Instituto Tecnológico de Tlalnepantla se siguen empleando
los mismos mecanismos de evaluación que marca la educación tradicional, ya que
se centran principalmente en dos formas de evaluar, la primera es el examen
tradicional en papel y la segunda es el desarrollo de un proyecto en la materia,
pocos son los docentes que se apoyan de las herramientas que ofrecen las TICS.
pág. 12
B. MARCO LEGAL
Los puntos más importantes que se deben aplicar a la plataforma educativa son los
siguientes:
• Contar con políticas de privacidad, aviso legal y cookies
• Seguir el principio de licitud, lealtad y trasparencia
• Minimización de datos, los datos son almacenados con fines determinados
• Integridad y confidencialidad de los datos
• Licencia y condiciones de uso
• Responsabilidad de la información
• Recabar solo los datos necesarios
• Consentimiento al momento de solicitar información
• Copyright
LEY FEDERAL DE PROTECCIÓN DE DATOS. CAPÍTULO II: DE LOS
PRINCIPIOS DE PROTECCIÓN DE DATOS PERSONALES
Artículo 6.- Los responsables en el tratamiento de datos personales, deberán
observar los principios de licitud, consentimiento, información, calidad, finalidad,
lealtad, proporcionalidad y responsabilidad, previstos en la Ley.
Artículo 7.- Los datos personales deberán recabarse y tratarse de manera lícita
conforme a las disposiciones establecidas por esta Ley y demás normatividad
aplicable.
Artículo 11.- El responsable procurará que los datos personales contenidos en las
bases de datos sean pertinentes, correctos y actualizados para los fines para los
cuales fueron recabados.
Artículo 15.- El responsable tendrá la obligación de informar a los titulares de los
datos, la información que se recaba de ellos y con qué fines, a través del aviso de
privacidad.
Principios básicos para un reglamento de protección de datos en aplicaciones
web
• Principio de licitud, lealtad y transparencia: los datos serán recogidos de
manera lícita, leal y transparente.
• Principio de limitación de la finalidad: los datos serán recogidos con fines
determinados. Esto significa que, si recoges datos con una finalidad
pág. 13
determinada, no puedes utilizar posteriormente los datos con una finalidad
diferente.
• Principio de minimización de datos: se trata de que recojas los datos
estrictamente necesarios en relación con los fines para los que son tratados.
Y eso significa los mínimos posibles
• Principio de integridad y confidencialidad: los datos serán tratados de tal
manera que se garantice una seguridad adecuada de los datos personales,
algo que ya exige la actual Ley de protección de datos
Obligaciones básicas para cumplir con la ley
• Contar con un Aviso de Privacidad en sus diferentes formatos y contenidos;
así como ponerlo a la disposición de los titulares de los datos personales al
momento del primer contacto antes de que sean recolectados sus datos.
• Dar a conocer el Aviso de Privacidad a los titulares de los datos personales
contenidos en las bases de datos presentes y anteriores que obran en poder
del responsable, así como informarles a los titulares sobre las finalidades y
uso que se le dará a su información personal.
• Designar a una persona física o a un departamento como Encargado de los
Datos Personales, que funja como responsable de la guarda y custodia de
los mismos, y que atienda las solicitudes de acceso, rectificación,
cancelación y oposición de los titulares.
• Contar con el Consentimiento tácito o expreso, otorgado por los titulares para
el uso correcto y tratamiento de sus datos personales.
• Respetar y aplicar en todo momento y lugar los Principios de los Datos
Personales.
ISO 27000 Gestión de la seguridad
Contiene un conjunto de buenas prácticas para el establecimiento, implementación,
mantenimiento y mejora de Sistemas de Gestión de la Seguridad de la Información.
Un Sistema de Gestión de la Seguridad de la Información es un conjunto de políticas
y procedimientos que sirven para estandarizar la gestión de la Seguridad de la
Información.
pág. 14
• Establecimiento de una metodología de gestión de la seguridad clara y
estructurada.
• Reducción del riesgo de pérdida, robo o corrupción de información.
• Los clientes tienen acceso a la información a través medidas de seguridad.
• Los riesgos y sus controles son continuamente revisados.
• Confianza de clientes y socios estratégicos por la garantía de calidad y
confidencialidad comercial.
• Las auditorías externas ayudan cíclicamente a identificar las debilidades del
sistema y las áreas a mejorar.
• Continuidad de las operaciones necesarias de negocio tras incidentes de
gravedad.
• Conformidad con la legislación vigente sobre información personal,
propiedad intelectual y otras.
• Confianza y reglas claras para las personas de la organización.
• Reducción de costes y mejora de los procesos y servicio. (iso27000.es, 2016)
ISO 31000 Gestión de riesgos
Sistemas de Gestión de Riesgos: La ISO 31000 es una norma internacional que
ofrece las directrices y principios para gestionar el riesgo de las organizaciones.
El estándar ISO 31000:2009 está estructurado en tres elementos claves para una
efectiva gestión de riesgos:
• los principios para la gestión de riesgos: para una mayor eficacia, la gestión
del riesgo en una organización la estructura de soporte o marco de Trabajo.
• El objetivo de este elemento es integrar el proceso de gestión de riesgos con
la dirección, para que esta adquiera un fuerte compromiso con la
implantación de la Gestión del Riesgo.
• En este caso la norma establece una serie de órdenes que debe cumplir la
gerencia para asegurar la efectividad de la gestión de riesgos el proceso de
gestión de riesgos: este proceso consta de tres etapas: establecimiento del
contexto, valoración de riesgos y tratamiento de los mismos. (ISOTools,
2019)
pág. 15
ISO 27001 Sistemas de gestión de la seguridad de la información
Es una norma internacional que permite el aseguramiento, la confidencialidad e
integridad de los datos y de la información, así como de los sistemas que la
procesan.
El estándar ISO 27001:2013 para los Sistemas Gestión de la Seguridad de la
Información permite a las organizaciones la evaluación del riesgo y la aplicación de
los controles necesarios para mitigarlos o eliminarlos.
la implementación de norma ISO 27001 tiene como resultados:
• La armonización con normas de sistemas de gestión como ISO 9001 e ISO

14001.
• El énfasis en la mejora continua de procesos del sistema de gestión de
seguridad de la información.
• La claridad en los requisitos de documentación y registros.
• Procesos de evaluación y gestión de los riesgos involucrados mediante el
modelo del proceso Planificar, Hacer, Verificar, Actuar (PDCA, por sus siglas
en inglés).
• La protección de los activos de la empresa, desde la información digital, los
documentos y activos físicos (computadoras y redes) hasta los
conocimientos de los empleados (EXCELENCIA, 2019).
pág. 16
C. MARCO TEÓRICO
Software para la evaluación de aprendizajes a través de Internet: el caso de
Percepción
A partir de una extensa revisión de bibliografía, Internet y de listas de correo
electrónico (Lara, 2001, 2003) se han encontrado gran cantidad de investigaciones
y de herramientas, en continuo desarrollo, para gestionar la evaluación a través de
tecnología web. A nivel superficial, se pudo observar que estos programas
informáticos que sirven para evaluar el rendimiento de los alumnos a través de
Internet se pueden clasificar en tres categorías básicas:
• Entornos virtuales de formación (web-based trining), que ayudan al profesor

a gestionar un módulo o curso de enseñanza completo a través de la red
(distribución de contenidos, intercambios con los alumnos a través de correo
electrónico, foros de discusión o chats y evaluación de los alumnos).
Ejemplos de este tipo: WebCT, Learning Space, Edustance, etc.
• Herramientas de autor, consisten en software destinado a su vez a la
creación de programas a modo de ejercicios o tareas. Ejemplos de este tipo
son: Hot Potatoes, Quia!, Clic, etc.
• Software específico más complejo (requiere manejo de servidor), que permite
poner en la red a toda la institución, tanto para la creación y publicación de
los exámenes, como para recoger los resultados de los estudiantes.
Ejemplos de este software son: Perception y Quiz Facto. (Rodriguez Conde,
2019)
pág. 17
D. MARCO CONCEPTUAL
INGENIERIA DE SOFTWARE
La ingeniería de software es una disciplina de ingeniería que se interesa por todos
los aspectos de la producción de software, desde las primeras etapas de la
especificación del sistema hasta el mantenimiento del sistema después de que se
pone en operación.
La ingeniería de software no sólo se interesa por los procesos técnicos del
desarrollo de software, sino también incluye actividades como la administración del
proyecto de software y el desarrollo de herramientas, así como métodos y teorías
para apoyar la producción de software. (Sommerville, 2011)
Sistema de información
Un conjunto de elementos o componentes interrelacionados para recolectar
(entradas), manipular (procesamiento) y diseminar (salidas) datos e información,
que cuenta además con un mecanismo de retroalimentación para el cumplimiento
de un objetivo. (Montoyo, 2012)
Un conjunto de elementos o componentes interrelacionados para recolectar
(entradas), manipular (procesamiento) y diseminar (salidas) datos e información,
que cuenta además con un mecanismo de retroalimentación para el cumplimiento
de un objetivo. (Edmundo, 2014)
Aplicación
(Application). Programa informático que permite a un usuario utilizar una
computadora con un fin específico. Las aplicaciones son parte del software de una
computadora, y suelen ejecutarse sobre el sistema operativo. (ESPINOSA &
CAMPOS, S.A. MCGRAW-HILL)
Una aplicación de software suele tener un único objetivo: navegar en la web, revisar
correo, explorar el disco duro, editar textos, jugar (un juego es un tipo de aplicación),
etc. Una aplicación que posee múltiples programas se considera un paquete.
(Leandro, 2010)
pág. 18
SISTEMA OPERATIVO
Sistemas operativos
El Sistema Operativo es el programa maestro que controla todo el trabajo que
realiza una computadora, (incluyendo el control de la misma computadora y la
ejecución de los diferentes programas), que para ser funcional debe proporcionar al
usuario una interfaz que le permita interactuar fácilmente con la computadora.
Es el software que se ejecuta en modo kernel (además de que esto no siempre es
cierto). Parte del problema es que los sistemas operativos realizan dos funciones
básicas que no están relacionadas: proporcionar a los programadores de
aplicaciones (y a los programas de aplicaciones, naturalmente) un conjunto
abstracto de recursos simples, en vez de los complejos conjuntos de hardware; y
administrar estos recursos de hardware. (TANENBAUM, 2009).
Tipos de sistemas operativos
Sistemas operativos de mainframe
Están profundamente orientados hacia el procesamiento de muchos trabajos a la
vez, de los cuales la mayor parte requiere muchas operaciones de E/S. Por lo
general ofrecen tres tipos de servicios: procesamiento por lotes, procesamiento de
transacciones y tiempo compartido. (Stallings, 2005)
Sistemas operativos de servidores
Se ejecutan en servidores, que son computadoras personales muy grandes,
estaciones de trabajo o incluso mainframes. Dan servicio a varios usuarios a la vez
a través de una red y les permiten compartir los recursos de hardware y de software.
Los servidores pueden proporcionar servicio de impresión, de archivos o Web.
(Stallings, 2005)
Sistemas operativos de multiprocesadores
Dependiendo de la exactitud con la que se conecten y de lo que se comparta, estos
sistemas se conocen como computadoras en paralelo, multicomputadoras o
multiprocesadores. Necesitan sistemas operativos especiales, pero a menudo son
variaciones de los sistemas operativos de servidores con características especiales
para la comunicación, conectividad y consistencia. (Stallings, 2005)
pág. 19
Sistemas operativos de computadoras personales
Su trabajo es proporcionar buen soporte para un solo usuario. Se utilizan
ampliamente para el procesamiento de texto, las hojas de cálculo y el acceso a
Internet, son enfocados a usuarios en general que no cuenten con un amplio
conocimiento en informática pero que de igual manera puedan utilizarlo. (Perez,
2001)
Sistemas operativos de tarjetas inteligentes
Los sistemas operativos más pequeños operan en las tarjetas inteligentes, que son
dispositivos del tamaño de una tarjeta de crédito que contienen un chip de CPU.
Tienen varias severas restricciones de poder de procesamiento y memoria. Algunas
tarjetas inteligentes funcionan con Java. Lo que esto significa es que la ROM en la
tarjeta inteligente contiene un intérprete para la Máquina virtual de Java (JVM).
(Perez, 2001)
Sistemas Operativos en Dispositivos Móviles
Un sistema operativo móvil o SO móvil es un sistema operativo que controla un
dispositivo móvil al igual que las Computadoras más grandes utilizan Windows,
Linux o Mac OS entre otros. Sin embargo, los sistemas operativos móviles son
mucho más simples y están más orientados a la conectividad inalámbrica, los
formatos multimedia para móviles y las diferentes maneras de introducir información
en ellos. (Wolf, Ruiz, & Bergero, 2015)
SISTEMA OPERATIVO A UTILIZAR
El sistema operativo que se utilizara para el desarrollo del proyecto es actualmente
el más utilizado a nivel mundial por diversos usuarios ya sea casa, trabajo y
escuelas.
Se llama Windows 10 a la última versión producida por Microsoft de su sistema
operativo para sistemas informáticos ‘Windows’. Este nuevo programa fue
anunciado en septiembre de 2014 y lanzado a la venta el 29 de julio del año
siguiente.
Características generales
UI y Escritorio: Windows 10 está diseñado para adaptar la interfaz de usuario en
el tipo de dispositivo que está siendo utilizado y los métodos de entrada disponibles.
pág. 20
Ofrece dos modos de interfaz de usuario diferentes: un modo tableta optimizado
para su uso con pantallas táctiles, y uno optimizado para el ratón y el teclado.
(Caracteristicas de Windows 10, 2019)
Sistema y seguridad: Windows 10 incorpora tecnología de autenticación en
factores múltiples, basada en normas elaboradas por la alianza FIDO. El sistema
operativo también incluye soporte mejorado para la autenticación biométrica a
través de Windows Hello y las plataformas de Passport, es así que algunos
dispositivos con cámaras soportadas (que requieren de infrarrojos de iluminación)
permitirán el inicio de sesión a través del servicio reconocimiento facial, de forma
similar al Kinect. Asimismo, los dispositivos con sensor de huella digital permitirán
el inicio de sesión a través del mismo. (Microsoft, 2019)
Servicios de Internet y funcionalidad: Windows 10 introduce un nuevo navegador
web predeterminado, Microsoft Edge. Cuenta con herramientas de anotación e
integración con otras plataformas de Microsoft presentes en Windows 10.
Multimedia y juegos: Windows 10 ofrece mayor integración con el ecosistema de
Xbox, teniendo una aplicación donde permite a los usuarios navegar por su
biblioteca de juegos y Game DVR también está disponible mediante un atajo de
teclado, lo cual permite a los usuarios guardar los últimos 10 segundos de juego
como un vídeo que se puede compartir mediante Xbox Live, OneDrive o algún otro
servicio de streamming (Microsoft, 2019)
Intuitivo para todo tipo de usuario: Todos los usuarios son capaces de emplear
las diversas funciones que se encuentran implementadas en el sistema operativo
gracias a lo intuitivo que resulta. Innegablemente la integración de Cortana ha sido
de gran ayuda. Puesto que con comandos de voz tienes la posibilidad de llevar a
cabo varias acciones ahorrándote clics y tecleos innecesarios. (Microsoft, 2019)
Requisitos de instalación
Estos son los requisitos básicos para instalar Windows 10 en una PC. Si tu
dispositivo no cumple estos requisitos, es posible que no disfrutes de una
experiencia óptima con Windows 10 y quizás podrías pensar en comprar una nueva
PC.
pág. 21
Procesador: Procesador a 1 GHz o más rápido o sistema en un chip (SoC)
RAM: 1 GB para 32 bits o 2 GB para 64 bits
Espacio en disco duro:16 GB para SO de 32 bits; 32 GB para SO de 64 bits
Tarjeta gráfica: DirectX 9 o posterior con controlador WDDM 1.0
Pantalla: 800x600
Conexión a Internet: Para realizar las actualizaciones y aprovechar algunas
características se requiere conexión a Internet. Windows 10 Pro en modo S,
Windows 10 Pro Education en modo S, Windows 10 Education en modo S y
Windows 10 Enterprise en modo S requieren una conexión a Internet durante la
configuración inicial del dispositivo (OOBE) así como una cuenta de Microsoft (MSA)
o una cuenta de Azure Activity Directory (AAD). El cambio fuera de Windows 10 en
modo S también requiere conexión a Internet. (Microsoft, 2019)
MANEJADOR DE BASE DE DATOS
Manejador de base de datos: Un sistema manejador de bases de datos (SGBD,
por sus siglas en inglés) o DataBase Management System (DBMS) es una colección
de software muy específico, cuya función es servir de interfaz entre la base de
datos, el usuario y las distintas aplicaciones utilizadas.
Como su propio nombre indica, el objetivo de los sistemas manejadores de base de
datos es precisamente el de manejar un conjunto de datos para convertirlos
en información relevante para la organización, ya sea a nivel operativo o
estratégico. (ELMASRI, 2007)
Archivo: Los archivos de bases de datos almacenan datos en formato estructurado,
organizados en tablas y campos que permiten su localización y acceso más rápido.
Las entradas individuales dentro de una base de datos se llaman registros. Una
base de datos es una colección de registros relacionados lógicamente, las bases de
datos se utilizan para el almacenamiento de datos referenciados por aplicaciones
de software o por sitios web dinámico (ELMASRI, 2007)
Registro: Un registro es una fila de una base de datos, una agrupación horizontal
de datos. El contenido de estos campos es único para esa fila, básicamente, una
fila que contiene datos únicos en cada uno de los campos. (ELMASRI, 2007)
pág. 22
Campo: Un campo es una unidad sencilla de datos que es única dentro de la
entrada o fila, pero la categoría de datos general es común a todas las entradas
(Silberschatz, 2002)
Tabla: Las tablas son objetos de base de datos que contienen todos sus datos. En
las tablas, los datos se organizan con arreglo a un formato de filas y columnas,
similar al de una hoja de cálculo. Cada fila representa un registro único y cada
columna un campo dentro del registro. (Silberschatz, 2002)
Llave: La clave o llave primaria es un campo, o grupo de campos que identifica en
forma única un registro. Ningún otro registro puede tener la misma llave primaria.
La llave primaria se utiliza para distinguir un registro con el fin de que se pueda tener
acceso a ellos. (Silberschatz, 2002)
Campo llave: es el campo que nos permite identificar un registro determinado
dentro de un archivo de manera univoca, es decir sin error a confundir el
registro. también es conocida como Primary Key y se dice que es muy importante.
(ELMASRI, 2007)
Relación: Las relaciones en una base de datos son el pilar fundamental en la
construcción de bases de datos relacionales, permite establecer las concordancias,
asignaciones y relación entre las entidades o tablas, así mismo permite garantizar
la integridad referencial de los datos. (DATE, 2001)
Tipos de relaciones
1:1 Uno a uno: En este tipo de relación se enlazan los campos establecidos como
Primary Key de ambas tablas (DATE, 2001)
1:N Uno a muchos: definimos una relación uno a muchos cuando un campo
establecido como llave primaria (Primary Key) hace referencia a varios registros en
otra tabla de un campo establecido como llave foránea. (DATE, 2001)
N:N Muchos a muchos: Se basan en que ninguno de los campos relacionados son
establecidos como llave primaria), normalmente la práctica usada al momento de
encontrar relaciones muchos a muchos o varios a varios es crear tablas intermedias
que nos permitan dividir una relación muchos a muchos por dos relaciones uno a
muchos. (DATE, 2001)
pág. 23
Diccionario de datos: Un diccionario de datos contiene las características lógicas
de los datos que se van a utilizar en el sistema que estamos programando,
incluyendo nombre, descripción, alias, contenido y organización.
Estos diccionarios se desarrollan durante el análisis de flujo de datos y ayuda a los
analistas que participan en la determinación de los requerimientos del sistema, su
contenido también se emplea durante el diseño del proyecto. (DATE, 2001)
MANEJADOR DE BASE DE DATOS A UTILIZAR
Para el desarrollo del proyecto utilizaremos un gestor de base de datos muy utilizado
por la comunidad tecnológica
MySQL es un sistema de gestión de base de datos relacional (RDBMS) de código
abierto, basado en lenguaje de consulta estructurado (SQL).
MySQL se ejecuta en prácticamente todas las plataformas, incluyendo Linux, UNIX
y Windows. A pesar de que se puede utilizar en una amplia gama de aplicaciones,
MySQL se asocia más con las aplicaciones basadas en la web y la publicación en
línea y es un componente importante de una pila empresarial de código abierto
llamado LAMP. LAMP es una plataforma de desarrollo web que utiliza Linux como
sistema operativo, Apache como servidor web, MySQL como sistema de gestión de
base de datos relacional y PHP como lenguaje de programación orientado a objetos
(GILFILLAN, 2012)
Características generales
• Uso de transacciones ACID (Atomic, Consistent Isolated, Durable): Para
construir aplicaciones más seguras mediante commit, rollback, crash
recovery y bloqueo por registro.
• Store Procedures: Para mejorar la programación.
• Triggers: Para mejorar las reglas del negocio.
• Vistas: Para que la información sensible sea más segura.
• Information Schema: Para un fácil acceso a los metadatos.
• Transacciones Distribuidas(XA): Para soportar transacciones entre múltiples
ambientes de bases de datos (GILFILLAN, 2012)
pág. 24
Características Técnicas:
Arquitectura Flexible
• Open Source
• Multi-threaded
• Pluggable Storage-Engine Architecture
o MyISAM
o InnoDB
o Merge
o Memory
o Archive
o Cluster (GILFILLAN, 2012)
Respaldos
• Auto-Restart/Recovery
• Backup and Point-in-Time Recovery
• Logical Online Hot-Backup
• Physical Online Hot-Backup (available separately)
Seguridad
• SSL Support
• Built-in Data Encryption/Decryption
• Granular External Security Control Fine Grained Object Privileges
• View Support
• Triggers for auditing
• Query Logs for auditing
• Archive Storage Engine for auditing (DBASupport, 2016)
Requisitos de instalación
Requerimientos básicos para MySQL:
• 512 Mb de memoria Ram
• 1024 Mb máquina virtual
• 1 GB de espacio de disco duro
• Sistema operativo: Windows, Linux y Unix
• Arquitectura del sistema 32/64 bit (MySql, 2019)
pág. 25
HERRAMIENTAS DE PROGRAMACION
Lenguajes de programación
Son básicamente programas con la habilidad, mediante una serie de reglas
sintácticas y semánticas compuestas por palabras, números y expresiones
matemáticas, de crear el llamado código fuente, el cual una vez compilado, se
convertirá en un programa o software y podrá ser ejecutado en nuestra computadora
sin necesidad de que el usuario lleve a cabo ningún otro paso. Su nombre se debe
a que comprende un lenguaje formal que está diseñado para organizar algoritmos
y procesos lógicos que serán luego llevados a cabo por un ordenador o sistema
informático, permitiendo controlar así su comportamiento físico, lógico y su
comunicación con el usuario humano. (JOYANES, 2008)
Tipos de lenguajes
Normalmente se distingue entre los siguientes tipos de lenguaje de programación:
Lenguajes de bajo nivel. Se trata de lenguajes de programación que están
diseñados para un hardware específico y que por lo tanto no pueden migrar o
exportarse a otros computadores. Sacan el mayor provecho posible al sistema para
el que fueron diseñados, pero no aplican para ningún otro.
Dentro de los lenguajes de bajo nivel están:
• El lenguaje máquina, es el que da órdenes a la máquina, que son las
operaciones fundamentales para su funcionamiento.
El ordenador sólo entiende un lenguaje conocido como código binario o
código máquina, consistente en ceros y unos, que son las ordenes, y que
sean fáciles de entender por el hardware de la máquina.
Este lenguaje es mucho más rápido que los lenguajes de alto nivel.
La desventaja es que son bastantes difíciles de manejar y usar, además de
tener códigos fuente enormes donde encontrar un fallo es casi imposible.
• El lenguaje ensamblador, es un derivado del lenguaje máquina y está
formado por abreviaturas de letras y números.
Con la aparición de este lenguaje se crearon los programas traductores para
poder pasar los
programas escritos en lenguaje ensamblador a lenguaje máquina.
pág. 26
Como ventaja, es que los códigos fuentes eran más cortos y los programas
creados ocupaban menos memoria.
Las desventajas de este lenguaje siguen siendo prácticamente las mismas
que las del lenguaje ensamblador, añadiendo la dificultad de tener que
aprender un nuevo lenguaje difícil de probar y mantener. (JOYANES, 2008)
Lenguajes de alto nivel. Se trata de lenguajes de programación que aspiran a ser
un lenguaje más universal, por lo que pueden emplearse indistintamente de la
arquitectura del hardware, es decir, en diversos tipos de sistemas. Los hay de
propósito general y de propósito específico.
Dentro de esta clasificación existen subclasificaciones de lenguajes dependiendo
sus características.
• Lenguaje compilado: Como la palabra lo dice un lenguaje que es
compilado necesita un compilador si o si, este compilador podríamos decir
que es el que se encarga de entender todo lo que estamos escribiendo.
• Lenguaje interpretado: El intérprete podemos decir que tiene un proceso
mucho más sencillo, el intérprete lo que hace es leer el archivo y hacer la
traducción(interpretar) lo que entiende, normalmente lo hace línea por línea.
• Lenguaje fuertemente tipado: Aquí es en donde indicamos el tipo de dato
al declarar la variable. Dicho tipo no puede ser cambiado nunca. Y no
podemos operar entre distintos tipos.
• Lenguaje débilmente tipado: La mayoría de veces, el tipado débil es en
donde no indicamos el tipo de variable al declararla. La verdadera
diferencia es que podemos asignar, por ejemplo, un valor entero a una
variable que anteriormente tenía una cadena. (JOYANES, 2008)
Los lenguajes más utilizados por la comunidad de desarrolladores a nivel
mundial son los siguientes:
• JAVA: Comenzamos con JAVA que sigue desde hace muchos años
siendo el lenguaje programación más usado, quizás sea por su gran
legibilidad y simplicidad. Actualmente cuenta con más de 9 millones
desarrolladores que lo usan y está presente en más de 7 mil millones de
dispositivos en todo el mundo.
pág. 27
• C: El lenguaje de programación C fue creado entre 1969 y 1972 en los
Laboratorios Bell, es uno de los más utilizados en el mundo. Lo utilizan
la mayoría de los sistemas operativos lo cual hace que sea un lenguaje
muy flexible
• C++: es un lenguaje de programación orientado a objetos y una
evolución del lenguaje C. Es un lenguaje muy utilizado para desarrollar
programas y paquetes como por ejemplo el paquete de programas de
Adobe.
• Python: es un lenguaje de programación multiplataforma y
multiparadigma. Es muy fácil de utilizar lo cual lo hace un lenguaje de
programación ideal para principiantes.
• Visual Basic .NET: te da la posibilidad de automatizar sus propios
procesos y crear sus propias aplicaciones web. Es uno de los lenguajes
más amigables para los principiantes de programación, sobre todo a
comparación de C#.
• PHP: El lenguaje de programación PHP fue creado en 1994 por el
programador canadiense Rasmus Lerdorf. Es de fácil acceso para
nuevos programadores y a su vez ofrece a los más experimentados
muchas posibilidades.
• Javascript: es un lenguaje de programación que puede ser utilizado
para crear programas que son integrados a una página web o dentro de
aplicaciones más grandes.
• SQL: es un lenguaje específico del dominio utilizado en programación; y
diseñado para administrar sistemas de gestión de bases de datos
relacionales (Yáñez, 2014)
pág. 28
HERRAMIENTAS DE PROGRAMACION A UTILIZAR
Los dos lenguajes que utilizaremos para desarrollar el proyecto serán HTML, CSS,
Javascript y PHP
Características del HTML
Es un lenguaje de marcado que nos permite indicar la estructura de nuestro
documento mediante etiquetas. Este lenguaje nos ofrece una gran adaptabilidad,
una estructuración lógica y es fácil de interpre-tar tanto por humanos como por
máquinas
• Puede ser creado y editado con cualquier editor básico de textos.
• Es multiplataforma, o sea, puede ser visualizado por cualquier navegador de
cualquier sistema operativo.
• No diferencia entre mayúsculas y minúsculas.
• Utiliza etiquetas o marcas, que consisten en breves instrucciones de
comienzo y final, mediante las cuales se determina la forma en la que debe
aparecer en su navegador el texto, así como también las imágenes y demás
elementos en la pantalla del ordenador.
• Cada elemento de un documento HTML consta de una etiqueta de comienzo,
un bloque de texto y una etiqueta de fin.
• Lenguaje estático.
• Es utilizado para la creación de páginas web.
• Los documentos HTML son documentos de hipertexto que aparecen
enlazando a otros documentos.
• Es un estándar reconocido por todo el mundo y cuyas normas define un
organismo sin animo de lucro llamado World Wide Web Consortium, más
conocido como W3C
pág. 29
Características de CSS
CSS se refieren a un lenguaje de programación que se utiliza para definir el diseño
visual de páginas web y otras aplicaciones programadas en HTML o XHTML
El modo de funcionamiento de CSS consiste en definir, mediante una sintaxis
especial, la forma de presentación que le aplicaremos a:
• Un web entero, de modo que se puede definir la forma de todo el web de una
sola vez.
• Un documento HTML o página, se puede definir la forma, en un pequeño
trozo de código en la cabecera, a toda la página.
• Una porción del documento, aplicando estilos visibles en un trozo de la
página.
• Una etiqueta en concreto, llegando incluso a poder definir varios estilos
diferentes para una sola etiqueta. Esto es muy importante ya que ofrece
potencia en nuestra programación. Podemos definir, por ejemplo, varios tipos
de párrafos: en rojo, en azul, con márgenes.
Características de Javascript
• Es Liviano.
• Multiplataforma, ya que se puede utilizar en Windows, Linux o Mac o en el
navegador de tu preferencia.
• Es Imperativo y estructurado, mediante un conjunto de instrucciones indica
al computador qué tarea debe realizar.
• Prototipado, debido a que usa prototipos en vez de clases para el uso de
herencia.
• Orientado a objetos y eventos.
• Es Interpretado, no se compila para poder ejecutarse
Ventajas
• Velocidad. Al ser client-side, JavaScript es muy rápido y cualquier función
puede ser ejecutada inmediatamente en lugar de tener que contactar con el
servidor y esperar una respuesta.
• Simplicidad. JavaScript es relativamente simple de aprender e implementar.
pág. 30
• Versatilidad. JavaScript encaja perfectamente con otros lenguajes y puede
ser usado en una gran variedad de aplicaciones. Al contrario de PHP o
scripts SSI, JavaScript puede insertarse en cualquier página
independientemente de la extensión del fichero. JavaScript puede también
ser usado dentro de scripts escritos en otros lenguajes como Perl y PHP.
• Carga del servidor. Al ejecutarse del lado del cliente reduce la carga en el
servidor de la página web.
Desventajas
• Seguridad. A razón de que el código se ejecuta en la computadora del
usuario en algunos casos puede ser explotado con propósitos
malintencionados.
• Confianza en el usuario. JavaScript es, algunas veces, interpretado diferente
dependiendo en el navegador que sea ejecutado. Mientras que un código
server-side siempre producirá el mismo resultado, código client-side puede
ser un poco impredecible. No te preocupes demasiado por esto -mientras
pruebes tu código en los navegadores más populares estarás a salvo.
Características de PHP
• PHP es un lenguaje de propósito general que se ejecuta en el lado del
servidor.
• Se desarrolló en el año 1994.
• Sirve sobre todo para realizar sitios dinámicos, interactuando con HTML y
con bases de datos.
• Es gratuito, se puede descargar desde su página web sin ningún coste.
• Es multiplataforma, se puede instalar en cualquier sistema, ya sea Windows,
Linux o Mac.
• Es fácil de instalar.
• Tiene una curva de aprendizaje baja, ya que se aprenden los comandos
rápidamente y su sintaxis es sencilla de utilizar.
• La interacción entre PHP y HTML es muy sencilla.
pág. 31
• Es un lenguaje muy sólido y maduro, lleva muchos años en el mercado y se
ha ido perfeccionando. A partir de la versión 7 se han introducido grandes
cambios que permite un trabajo más sólido.
• Se puede separar fácilmente la estructura de PHP de los proyectos en el
modelo vista-controlador con el que trabajan los frameworks.
• Hay una gran demanda laboral, ya que es muy utilizado y está presente en
la mayoría de las páginas webs existentes.
• Tiene un fácil acceso al software de terceros, porque quién quiera publicar
APIs o aplicaciones que quieran trabajar con ellas, tienen ejemplos
desarrollados en PHP.
Ventajas
• Lenguaje totalmente libre y abierto.
• Posee una curva de aprendizaje muy baja.
• Los entornos de desarrollo son de rápida y fácil configuración.
• Fácil de instalar: existen paquetes autoinstalables que integran PHP
rápidamente.
• Fácil acceso e integración con la base de datos.
• Posee una comunidad muy grande.
• Es el lenguaje con mayor usabilidad en el mundo.
• Es un lenguaje multiplataforma.
• Completamente orientado al desarrollo de aplicaciones web dinámicas y/o
páginas web con acceso a una Base de Datos.
• El código escrito en PHP es invisible al navegador ya que se ejecuta al lado
del servidor y los resultados en el navegador es HTML.
• Posee una versatilidad para la conexión con la mayoría de base de datos que
existen en la actualidad.
Desventajas
• Para poder ver y testear las páginas que vayamos creando es necesario
disponer de un servidor web que soporte PHP.
• Al ser interpretado en el servidor, es más fácil que se colapse cuando el
número de peticiones de descarga de páginas aumenta.
pág. 32
• Parte del contenido de las páginas puede no ser accesible a los navegadores,
dificultando el posicionamiento de las páginas.
• Como es un lenguaje que se interpreta en ejecución para ciertos usos puede
resultar un inconveniente que el código fuente no pueda ser ocultado. La
ofuscación es una técnica que puede dificultar la lectura del código, pero no
la impide y, en ciertos casos, representa un costo en tiempos de ejecución
• El lugar más seguro para ejecutar una aplicación es en un servidor propio,
por lo cual, si un cliente o usuario requiere su código en su pc, tendríamos
que dejar su código, sin manera de ocultarlo, aunque hay muchas
aplicaciones que nos ayuda a encriptar el código fuente
• Debes saber cuándo menos HTML para poder hacer un trabajo
medianamente funcional
• Si no lo configuras correctamente dejas abiertas muchas brechas de
seguridad
• Se necesita instalar un servidor web.
Características de VisualStudio Code
• Colores de la sintaxis: Algunos elementos de la sintaxis de los archivos de
código y marcado están coloreados de forma distinta para distinguirlos
• Marcas de errores y advertencias: Al agregar código y compilar su solución,
puede que vea (a) que aparecen subrayados ondulados de diferentes colores
o (b) bombillas en el código.
• Coincidencia de llaves: Cuando el punto de inserción se coloca en una llave
de apertura en un archivo de código, tanto esta como la llave de cierre se
resaltan.
• Visualizador de estructura: Las líneas de puntos conectan las llaves que
coinciden en los archivos de código, lo que hace que sea más fácil ver los
pares de llaves de apertura y cierre.
• Números de línea: Se pueden mostrar números de línea en el margen
izquierdo de la ventana de código. No se muestran de forma predeterminada.
• Seguimiento de cambios: El color del margen izquierdo le permite realizar un
seguimiento de los cambios realizados en un archivo.
pág. 33
E. MARCO METODOLÓGICO
La metodología que se utilizará para el desarrollo de la plataforma será la
metodología Scrum
¿Qué es?
Scrum es una metodología ágil y flexible para gestionar el desarrollo de software,
cuyo principal objetivo es maximizar el retorno de la inversión para su empresa
(ROI). Se basa en construir primero la funcionalidad de mayor valor para el cliente
y en los principios de inspección continua, adaptación, autogestión e innovación.
(Martel, 2016)
¿Cuándo se utiliza?
Con la metodología Scrum el cliente se entusiasma y se compromete con el
proyecto dado que lo ve crecer iteración a iteración. Asimismo, le permite en
cualquier momento realinear el software con los objetivos de negocio de su
empresa, ya que puede introducir cambios funcionales o de prioridad en el inicio de
cada nueva iteración sin ningún problema.
Esta metódica de trabajo promueve la innovación, motivación y compromiso del
equipo que forma parte del proyecto, por lo que los profesionales encuentran un
ámbito propicio para desarrollar sus capacidades. (Martel, 2016)
Beneficios
• Cumplimento de expectativas: El cliente establece sus expectativas
indicando el valor que le aporta cada requisito / historia del proyecto, el
equipo los estima y con esta información el Product Owner establece su
prioridad. De manera regular, en las demos de Sprint el Product
Owner comprueba que efectivamente los requisitos se han cumplido y
transmite se feedback al equipo.
• Flexibilidad a cambios: Alta capacidad de reacción ante los cambios de
requerimientos generados por necesidades del cliente o evoluciones del
mercado. La metodología está diseñada para adaptarse a los cambios de
requerimientos que conllevan los proyectos complejos.
pág. 34
• Reducción del Time to Market: El cliente puede empezar a utilizar las
funcionalidades más importantes del proyecto antes de que esté finalizado
por completo.
• Mayor calidad del software: La metódica de trabajo y la necesidad de
obtener una versión funcional después de cada iteración, ayuda a la
obtención de un software de calidad superior.
• Mayor productividad: Se consigue entre otras razones, gracias a la
eliminación de la burocracia y a la motivación del equipo que proporciona el
hecho de que sean autónomos para organizarse.
• Maximiza el retorno de la inversión (ROI): Producción de software
únicamente con las prestaciones que aportan mayor valor de negocio gracias
a la priorización por retorno de inversión.
• Predicciones de tiempos: Mediante esta metodología se conoce la
velocidad media del equipo por sprint (los llamados puntos historia), con lo
que consecuentemente, es posible estimar fácilmente para cuando se
dispondrá de una determinada funcionalidad que todavía está en el Backlog.
• Reducción de riesgos: El hecho de llevar a cabo las funcionalidades de más
valor en primer lugar y de conocer la velocidad con que el equipo avanza en
el proyecto, permite despejar riesgos eficazmente de manera anticipada.
(Metodología Scrum para desarrollo de software, 2018)
Etapas de la metodología SCRUM
1. Planificación del sprint
Si entendemos el significado del sprint como un mini proyecto dentro del proyecto
principal, cada uno de ellos tiene un objetivo en particular. Por ejemplo, el primer
intervalo puede ser plantear cuál será el presupuesto general a utilizar, por lo que
se necesitará de un equipo de profesionales expertos en el tema económico.
En la primera reunión del equipo se definirán aspectos como la funcionalidad,
objetivos, riesgos del sprint, plazos de entrega, entre otros. Posteriormente se
realiza una junta entre el equipo y el jefe del proyecto para explicar cómo se
desarrollará cada punto del intervalo. Aquí se evaluarán cambios, toma de
decisiones, mejoras y más factores.
pág. 35
2. Etapa de desarrollo
Cuando el trabajo del sprint está en curso, los encargados deben garantizar que no
se generen cambios de último momento que puedan afectar los objetivos del mismo.
Además, se asegura el cumplimiento de los plazos establecidos para su término.
3. Revisión del sprint
Al final del desarrollo del intervalo, es posible analizar y evaluar los resultados. Si
es necesario, todo el equipo colaborará para saber qué aspectos necesitan ser
cambiados. En esta fase se fomenta la colaboración y retroalimentación entre todos.
Se incluyen los siguientes puntos:
• Colaboración entre equipos, supervisores, jefes y dueños de productos.
• Se admiten análisis externos como forma de complementación.
• El equipo de trabajo responde qué es lo que se ha desarrollado y qué
carencias han tenido.
• En base a ello, se puede regresar a la etapa de planificación para evaluar
cómo mejorar el siguiente sprint.
• La revisión incluye cómo, hasta ahora, el producto podría generar más valor.
• Se analizan las capacidades del equipo, la línea de tiempo, entre otros
detalles, para saber qué potenciar.
4. Retroalimentación
Los resultados pueden ser entregados para recibir un feedback no solo por parte de
los profesionales dentro del proyecto, sino también de las personas que utilizarán
directamente lo que se desea lograr; es decir, los clientes potenciales. Las lecciones
aprendidas durante esta etapa permitirán que el siguiente sprint pueda ser mucho
más efectivo y ágil. (Etapas de la metodologia SCRUM, 2018)
pág. 36
11 DESARROLLO DEL PROYECTO, PROGRAMACIÓN Y
RESULTADOS
DIAGRAMA RELACIONAL PARA EL PROTOTIPO DE LA PLATAFORMA

Se ha diseñado un borrador de la base de datos que tendrá el prototipo de la
plataforma, la cual por el momento solo cuenta con 4 tablas posteriormente se irán
integrando con más detalle las tablas faltantes
Figura 1: Modelo relación
INTERFAZ DE INICIO
En esta sección se muestra contenido en general de lo que contiene la plataforma
como los temas de diversas áreas que se ofrecerán, las distintas opciones que se
ofrecerán en la plataforma.
pág. 37
Figura 2: Pantalla de inicio
pág. 38
CÓDIGO FUENTE
<!DOCTYPE html>
<html lang="es-MX">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
<title>Proyecto Final</title>
<link rel='dns-prefetch' href='//fonts.googleapis.com' />
<link rel='dns-prefetch' href='//s.w.org' />
<link rel="alternate" type="application/rss+xml" title="Proyecto Final » Feed" href="http://local
host/proyectoTaller/feed/" />
<link rel="alternate" type="application/rss+xml" title="Proyecto Final » RSS de los comentario
s" href="http://localhost/proyectoTaller/comments/feed/" />
img.wp-smiley,
img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 .07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
</style>
<link rel='stylesheet' id='astra-theme-css-css' href='http://localhost/proyectoTaller/wp-
content/themes/astra/assets/css/minified/style.min.css?ver=2.1.3' media='all' />
<body itemtype='https://schema.org/WebPage' itemscope='itemscope' class="home page-template-

default page page-id-550 ehf-footer ehf-template-astra ehf-stylesheet-astra-child ast-desktop ast-
page-builder-template ast-no-sidebar astra-2.1.3 ast-header-custom-item-inside ast-single-post ast-
inherit-site-logo-transparent ast-theme-transparent-header elementor-default elementor-
page elementor-page-550">
<div
class="hfeed site" id="page">
<a class="skip-link screen-reader-text" href="#content">Skip to content</a>
<header
class="site-header ast-primary-submenu-animation-fade header-main-layout-1 ast-primary-
menu-enabled ast-menu-toggle-icon ast-mobile-header-
inline" id="masthead" role="banner" itemtype="https://schema.org/WPHeader" itemscope="itemsco
pe" >
<div class="main-header-bar-wrap">
<div class="main-header-bar">
<div class="ast-container">
<div class="ast-flex main-header-container">
<div class="site-branding">
<div
class="ast-site-
identity" itemtype="https://schema.org/Organization" itemscope="itemscope" >
<div class="ast-site-title-wrap">
<h1 class="site-title" itemprop="name">
<a href="http://localhost/proyectoTaller/" rel="home" itemprop="url" >
Proyecto Final
pág. 39
</a></h1><p class="site-description" itemprop="description">
</p> </div> </div>
</div>

<div class="ast-mobile-menu-buttons">
<div class="ast-button-wrap">
<button type="button" class="menu-toggle main-header-menu-toggle ast-mobile-menu-
buttons-fill " aria-controls='primary-menu' aria-expanded='false'>
<span class="screen-reader-text">Main Menu</span>
<span class="menu-toggle-icon"></span> </button>
</div>
</div>
<div class="ast-main-header-bar-alignment"><div class="main-header-bar-
navigation"><nav class="site-navigation" id="site-
navigation" itemtype="https://schema.org/SiteNavigationElement" itemscope="itemscope" class="as
t-flex-grow-1 navigation-accessibility" aria-label="Site Navigation"><div class="main-
navigation"><ul id="primary-menu" class="main-header-menu ast-nav-menu ast-flex ast-justify-
content-flex-end submenu-with-border astra-menu-animation-fade "><li id="menu-item-
655" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-
children menu-item-
655"><a href="http://localhost/proyectoTaller/contenido/">Contenido</a><button class="ast-menu-
toggle" role="button" aria-expanded="false"><span class="screen-reader-
text">Menu Toggle</span></button>
<ul class="sub-menu">
<li id="menu-item-697" class="menu-item menu-item-type-post_type menu-item-object-
page menu-item-697"><a href="http://localhost/proyectoTaller/ejercicios-de-
javascript/">Ejercicios de Javascript</a></li>
page menu-item-747"><a href="http://localhost/proyectoTaller/conceptos-
basicos/">Conceptos básicos</a></li>
page menu-item-746"><a href="http://localhost/proyectoTaller/desafio-
frontend/">Desafió 1 de Frontend</a></li>
page menu-item-782"><a href="http://localhost/proyectoTaller/desafio-2-de-
</ul>
</li>
<li id="menu-item-613" class="menu-item menu-item-type-post_type menu-item-object-page menu-
item-613"><a href="http://localhost/proyectoTaller/registro/">Registro</a></li>
item-614"><a href="http://localhost/proyectoTaller/acceder/">Acceder</a></li>
item-612"><a href="http://localhost/proyectoTaller/editar-perfil/">Editar perfil</a></li>
</ul></div></nav></div></div> </div>
<div class="elementor-element elementor-element-af367fa elementor-column elementor-
col-33 elementor-inner-column" data-id="af367fa" data-element_type="column">
<div class="elementor-column-wrap elementor-element-populated">
<div class="elementor-widget-wrap">
<div class="elementor-element elementor-element-30e2661 elementor-widget elementor-
widget-heading" data-id="30e2661" data-element_type="widget" data-
widget_type="heading.default">
<div class="elementor-widget-container">
<h5 class="elementor-heading-title elementor-size-default">Temas</h5> </div>
</div>
pág. 40
<div class="elementor-element elementor-element-a9d0947 elementor-icon-list--layout-
traditional elementor-widget elementor-widget-icon-list" data-id="a9d0947" data-
element_type="widget" data-widget_type="icon-list.default">
<ul class="elementor-icon-list-items">
<li class="elementor-icon-list-item" >
<span class="elementor-icon-list-icon">
<i aria-hidden="true" class="fas fa-minus"></i> </span>
<span class="elementor-icon-list-
text">Lenguajes de programación</span>
</li>
<span class="elementor-icon-list-text">Base de datos</span>
</li>
<span class="elementor-icon-list-text">Estructura de datos</span>
</li>
</ul>
</div>
</body>
</html>
La plataforma contiene 8 páginas, de las cuales existe una para el registro de los
usuarios, una interfaz para acceder a la plataforma y una opción para editar el perfil
del usuario
Las demás paginas son referentes a contenidos de los diversos temas que tendrá
la plataforma como programación, ejercicios, entre otras cosas.
Figura 3: contenido de la plataforma
pág. 41
INTERFAZ DE CONTENIDO
En este apartado se mostrarán las secciones con respecto a las materias o temas
que ofrece la aplicación web, para este prototipo solo colocamos los lenguajes de
programación más usados para entornos web
Figura 4: Contenido del apartado de lenguajes de programación
CODIGO FUENTE
<!DOCTYPE html>
<html lang="es-MX">
<head>
<title>Contenido – Proyecto Final</title>

<body itemtype='https://schema.org/WebPage' itemscope='itemscope' class="page-template page-
template-elementor_header_footer page page-id-653 ehf-footer ehf-template-astra ehf-stylesheet-
astra-child ast-desktop ast-page-builder-template ast-no-sidebar astra-2.1.3 ast-header-custom-
item-inside ast-single-post ast-inherit-site-logo-transparent elementor-default elementor-template-
full-width elementor-page elementor-page-653">
pág. 42
<p class="profile-description elementor-profile-description-wrapper">JavaScript
Nuestra colección de ejercicios y sesiones prácticas te guían mientras trabajas en el proceso de cr
eación de tu propio código JavaScript.
Así que diviértete y diviértete mientras completas este curso

</p>
<div class="profile-icons">

<div class="elementor-social-icons-wrapper">
<br />
<b>Warning</b>: Invalid argument supplied for foreach() in <b>C:\xampp\htdocs\proyectoTaller\wp
-content\plugins\card-elements-for-elementor\include\profile-card\elementor-profile-card-
4.php</b> on line <b>15</b><br />
</div>
</div>
</div>
</div>
 </div>
</div>
<div class="elementor-element elementor-element-6642e85 elementor-align-
center elementor-widget elementor-widget-button" data-id="6642e85" data-
element_type="widget" data-widget_type="button.default">
<div class="elementor-button-wrapper">
<a href="http://localhost/proyectoTaller/ejercicios-de-javascript/" class="elementor-button-
link elementor-button elementor-size-sm elementor-animation-shrink" role="button">
<span class="elementor-button-content-wrapper">
<span class="elementor-button-text">Ir a los ejercicios</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-af1534c elementor-column elementor-
col-25 elementor-top-column" data-id="af1534c" data-element_type="column">
<div class="elementor-element elementor-element-a08c223 elementor-widget__width-
initial elementor-shape-rounded elementor-widget elementor-widget-profile-card-elementor-
widget" data-id="a08c223" data-element_type="widget" data-widget_type="profile-card-elementor-
widget.default">

<div class="profile-card-style-4 text-center" style="background-image:url();">
<img src="http://localhost/proyectoTaller/wp-
content/uploads/2019/11/2f9c11f9e55efbf1791f12c06d60729b.jpg" style="width: 300px; height: px"
class="img img-responsive">
<div class="profile-content elementor-content-background-color-wrapper">
<div class="profile-bg elementor-content-background-color-wrapper"></div>
<div class="profile-name elementor-profile-name-wrapper"> <p class="profile-
position elementor-profile-position-wrapper"></p>
</div>
pág. 43
<p class="profile-description elementor-profile-description-
wrapper">Python , uno de los lenguajes de programación más demandados en la actualidad, mide
tus conocimientos con los siguientes ejercicios</p>
<br />
</div>
</div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-6269def elementor-align-
center elementor-widget elementor-widget-button" data-id="6269def" data-
<a href="#" class="elementor-button-link elementor-button elementor-size-sm elementor-
animation-shrink" role="button">
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-6de0dc5 elementor-
column elementor-col-25 elementor-top-column" data-id="6de0dc5" data-element_type="column">
<div class="elementor-element elementor-element-5c1086c elementor-widget__width-
widget" data-id="5c1086c" data-element_type="widget" data-widget_type="profile-card-elementor-
widget.default">
content/uploads/2019/11/6T8eGecQ0XXvTHOvic4ba8mlQXmSEW3vrI7jenmv.png" style="width: 30
0px; height: px" class="img img-responsive">
</div>
<p class="profile-description elementor-profile-description-wrapper">PHP
PHP le permite crear páginas web dinámicas, desarrollar sitios web y generar contenido dinámico.
También podrás abrir archivos; escribir contenido en archivos; y cree formularios de contacto, foros
, blogs, galerías de imágenes, encuestas, redes sociales y mucho más
pág. 44
</p>
<br />
</div>
</div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-076874d elementor-align-
center elementor-widget elementor-widget-button" data-id="076874d" data-
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-f5fb5cb elementor-column elementor-
col-25 elementor-top-column" data-id="f5fb5cb" data-element_type="column">
<div class="elementor-element elementor-element-6453ee2 elementor-widget__width-
inherit elementor-shape-rounded elementor-widget elementor-widget-profile-card-elementor-
widget" data-id="6453ee2" data-element_type="widget" data-widget_type="profile-card-elementor-
widget.default">
<img src="http://localhost/proyectoTaller/wp-content/uploads/2019/11/2019-11-27-22_30_02-
base-de-datos-logo-Buscar-con-Google-1.png" style="width: 300px; height: px" class="img img-
responsive">
</div>
<p class="profile-description elementor-profile-description-wrapper">Base de Datos
Aprenda y practique SQL inmediatamente, crear, acceder y manipular bases de datos. Al mismo tie
mpo, acumula puntos, desbloquea niveles y logros
Ya sea que desee convertirse en el próximo diseñador de bases de datos más grande, o simpleme
nte le gustaría tener la capacidad de consultar bases de datos desde el código</p>
pág. 45
<br />
</div>
</div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-e63ad6d elementor-align-
center elementor-widget elementor-widget-button" data-id="e63ad6d" data-
</span>
<section class="elementor-element elementor-element-5cf145b elementor-section-
boxed elementor-section-height-default elementor-section-height-default elementor-
section elementor-top-section" data-id="5cf145b" data-element_type="section">
<div class="elementor-container elementor-column-gap-default">
<div class="elementor-row">
<div class="elementor-element elementor-element-d0aa3ce elementor-
column elementor-col-33 elementor-top-column" data-id="d0aa3ce" data-element_type="column">
<div class="elementor-column-wrap">
</div>
</div>
</div>
<div class="elementor-element elementor-element-fbb1638 elementor-column elementor-
col-33 elementor-top-column" data-id="fbb1638" data-element_type="column">
<div class="elementor-element elementor-element-c75aef4 elementor-widget__width-
widget" data-id="c75aef4" data-element_type="widget" data-widget_type="profile-card-elementor-
widget.default">
content/uploads/2019/11/giphy.gif" style="width: 300px; height: px" class="img img-responsive">
</div>
<p class="profile-description elementor-profile-description-wrapper">Retos de programación:
En esta sección encontraras una serie de retos de distintas ramas del desarrollo de software, habrá
n retos en áreas como desarrollo web (Frontend y Backend) , desarrollo móvil
pág. 46
programación orientada a objetos
</div>
</li>
</li>
</li>
</ul>
</div>
</div>
<div class="elementor-element elementor-element-34c76c4 elementor-icon-list--layout-
traditional elementor-widget elementor-widget-icon-list" data-id="34c76c4" data-
<i aria-hidden="true" class="fas fa-map-marker-alt"></i> </span>
<span class="elementor-icon-list-text">Tlanepantla Centro</span>
</li>
<i aria-hidden="true" class="fas fa-phone"></i> </span>
<span class="elementor-icon-list-text">52+ 5540756374</span>
</li>
<i aria-hidden="true" class="fas fa-envelope-open"></i> </span>
text">etzahumendoza@gmail.com</span>
</li>
</ul>
</section>
</body>
</html>
pág. 47
INTERFAZ DE EJERCICIOS
En esta sección será donde el estudiante podrá realizar diversos ejercicios los
cuales le ayudaran a medir el nivel de conocimientos con los que cuentan, vendrán
ejercicios desde teóricos hasta prácticos.
Figura 5: Interfaz de ejercicios

CODIGO FUENTE
<!DOCTYPE html>
<html lang="es-MX">
<head>
<title>Conceptos básicos – Proyecto Final</title>

</style>
pág. 48
<link rel='stylesheet' id='wppb_stylesheet-css' href='http://localhost/proyectoTaller/wp-
content/plugins/profile-builder/assets/css/style-front-end.css?ver=3.0.6' media='all' />


<script src='http://localhost/proyectoTaller/wp-content/plugins/wp-file-
upload/js/wordpress_file_upload_functions.js?ver=5.3'></script>
<script src='http://localhost/proyectoTaller/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp'></script>
<script src='http://localhost/proyectoTaller/wp-includes/js/jquery/jquery-
migrate.min.js?ver=1.4.1'></script>
<script src='http://localhost/proyectoTaller/wp-includes/js/jquery/ui/core.min.js?ver=1.11.4'></script>
<script src='http://localhost/proyectoTaller/wp-
includes/js/jquery/ui/datepicker.min.js?ver=1.11.4'></script>
<script>
jQuery(document).ready(function(jQuery){jQuery.datepicker.setDefaults({"closeText":"Cerrar","curre
ntText":"Hoy","monthNames":["enero","febrero","marzo","abril","mayo","junio","julio","agosto","septie
mbre","octubre","noviembre","diciembre"],"monthNamesShort":["Ene","Feb","Mar","Abr","May","Jun"
,"Jul","Ago","Sep","Oct","Nov","Dic"],"nextText":"Siguiente","prevText":"Previo","dayNames":["domin
go","lunes","martes","mi\u00e9rcoles","jueves","viernes","s\u00e1bado"],"dayNamesShort":["dom","l
un","mar","mi\u00e9","jue","vie","s\u00e1b"],"dayNamesMin":["D","L","M","X","J","V","S"],"dateForma
t":"d MM, yy","firstDay":1,"isRTL":false});});
</script>
<script src='http://localhost/proyectoTaller/wp-content/plugins/wp-file-upload/vendor/jquery/jquery-
ui-timepicker-addon.min.js?ver=5.3'></script>
<script src='http://localhost/proyectoTaller/wp-content/plugins/elementor/assets/lib/font-
awesome/js/v4-shims.min.js?ver=2.7.5'></script>
<script src='http://localhost/proyectoTaller/wp-content/plugins/ultimate-member/assets/js/um-
gdpr.min.js?ver=2.1.1'></script>
<link rel='https://api.w.org/' href='http://localhost/proyectoTaller/wp-json/' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost/proyectoTaller/xmlr
pc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost/proyectoTaller/wp
-includes/wlwmanifest.xml" />
<meta name="generator" content="WordPress 5.3" />
<link rel='shortlink' href='http://localhost/proyectoTaller/?p=724' />
<link rel="alternate" type="application/json+oembed" href="http://localhost/proyectoTaller/wp-
json/oembed/1.0/embed?url=http%3A%2F%2Flocalhost%2FproyectoTaller%2Fconceptos-
basicos%2F" />
<link rel="alternate" type="text/xml+oembed" href="http://localhost/proyectoTaller/wp-
json/oembed/1.0/embed?url=http%3A%2F%2Flocalhost%2FproyectoTaller%2Fconceptos-
basicos%2F&format=xml" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="s
ha384-
hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anony
mous">
<style type="text/css">
.request_name {
display: none !important;
}
pág. 49
</style>
<style>.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</st
yle></head>

astra-child ast-desktop ast-separate-container ast-two-container ast-right-sidebar astra-2.1.3 ast-
header-custom-item-inside ast-single-post ast-inherit-site-logo-transparent ast-normal-title-
enabled elementor-default elementor-template-full-width elementor-page elementor-page-724">
<div
<header
pe" >
<div
class="ast-site-
<span class="site-title" itemprop="name">
Proyecto Final
</a>
</span>
<p class="site-description" itemprop="description">
</p> </div> </div>
</div>
<span class="menu-toggle-icon"></span> </button>
</div>
</div>div>
655" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-
ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-
children menu-item-
pág. 50
page current-menu-item page_item page-item-724 current_page_item menu-item-
747"><a href="http://localhost/proyectoTaller/conceptos-basicos/" aria-
current="page">Conceptos básicos</a></li>
</ul>
</li>
</div>
</div> 
</div> 
</header>
<div id="content" class="site-content">

<div data-elementor-type="wp-page" data-elementor-
id="724" class="elementor elementor-724" data-elementor-settings="[]">
<div class="elementor-inner">
<div class="elementor-section-wrap">
<section class="elementor-element elementor-element-2cdeeca elementor-
section-boxed elementor-section-height-default elementor-section-height-default elementor-
section elementor-top-section" data-id="2cdeeca" data-element_type="section">
<div class="elementor-element elementor-element-06c98d0 elementor-
column elementor-col-100 elementor-top-column" data-id="06c98d0" data-element_type="column">
<div class="elementor-element elementor-element-a449711 elementor-widget elementor-
widget-heading" data-id="a449711" data-element_type="widget" data-
<h2 class="elementor-heading-title elementor-size-
default">Un examen de conocimientos básicos te permite medir tu preparación en conceptos funda
mentales del lenguaje de programación</h2> </div>
</div>
</div>
</div>
</div>
pág. 51
</div>
</div>
</section>
<section class="elementor-element elementor-element-7423e561 elementor-section-
section elementor-top-section" data-id="7423e561" data-element_type="section">
<div class="elementor-element elementor-element-258fd5cf elementor-
column elementor-col-100 elementor-top-column" data-id="258fd5cf" data-element_type="column">
<div class="elementor-element elementor-element-15d83389 elementor-
widget elementor-widget-text-editor" data-id="15d83389" data-element_type="widget" data-
widget_type="text-editor.default">
<div class="elementor-text-editor elementor-clearfix">

<div id="um_upload_single" style="display:none"></div>
<div id="um_view_photo" style="display:none">
</body>
</html>
pág. 52
INTERFAZ DE DESAFIOS
Como su nombre lo indica en esta sección se mostrarán una serie de desafíos
prácticos para que el estudiante pueda practicas sus habilidades adquiridas en
distintas áreas en el desarrollo de software, al terminar el estudiante de hacer el
código necesario procederá a enviar el archivo para que posteriormente se evalué
si cumplió con los puntos establecidos en el desafío.
Figura 6: Interfaz de desafíos prácticos
CODIFO FUENTE
<!DOCTYPE html>
<html lang="es-MX">
<head>
pág. 53
<title>Desafió 1 de Frontend – Proyecto Final</title>

astra-child ast-desktop ast-page-builder-template ast-no-sidebar astra-2.1.3 ast-header-custom-
item-inside ast-single-post ast-inherit-site-logo-transparent elementor-default elementor-template-
full-width elementor-page elementor-page-743">
<div
<header
pe" >
<div
class="ast-site-
Proyecto Final
</a>
</span>
</p>
</div> </div>
</div>

<span class="menu-toggle-icon"></span>
</button>
</div>
</div>
pág. 54
655" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-
ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-
children menu-item-
746"><a href="http://localhost/proyectoTaller/desafio-frontend/" aria-
current="page">Desafió 1 de Frontend</a></li>
</ul>
</li>

<div data-elementor-type="wp-page" data-elementor-

<section class="elementor-element elementor-element-c5967ad elementor-
section elementor-top-section" data-id="c5967ad" data-element_type="section">
<div class="elementor-element elementor-element-e68d356 elementor-
column elementor-col-100 elementor-top-column" data-id="e68d356" data-
element_type="column" data-
settings="{"background_background":"classic"}">
pág. 55
<div class="elementor-element elementor-element-33ea419 elementor-widget__width-
inherit elementor-widget elementor-widget-heading" data-id="33ea419" data-
element_type="widget" data-widget_type="heading.default">
default"> Desafío de Desarrollo Web - Maquetar una Página Web Profesional con base al diseño</
h2> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="elementor-element elementor-element-62b0b37 elementor-section-
section elementor-top-section" data-id="62b0b37" data-element_type="section">
<div class="elementor-element elementor-element-7dce3c7 elementor-
column elementor-col-50 elementor-top-column" data-id="7dce3c7" data-element_type="column">
<div class="elementor-element elementor-element-549f3b3 elementor-widget elementor-
widget-text-editor" data-id="549f3b3" data-element_type="widget" data-widget_type="text-
editor.default">
<div class="elementor-text-editor elementor-clearfix"><p style="margin-
bottom: 1em; line-height: 1.6em; color: #273b47; font-family: Lato, sans-serif; font-size: 20px; font-
style: normal; font-
weight: 400;">Alinear elementos donde realmente los quieres puede ser una tarea sumamente com
plicada. Afortunadamente, CSS nos permite hacer páginas impresionantes con muy poco esfuerzo.
El secreto está en conocer muy bien sus propiedades y funciones.</p><p style="margin-
top: 1em; margin-bottom: 1em; line-height: 1.6em; color: #273b47; font-family: Lato, sans-serif; font-
size: 20px; font-style: normal; font-
weight: 400;">En este desafío debemos convertir un diseño web en una página 100% profesional. ¡
Debe quedar igualita! No basta con que se parezca un poquito. Debe ser una réplica exacta que de
muestre nuestras capacidades y hable bien de nuestro trabajo.</p></div>
</div>
<form action="/proyectoTaller/desafio-frontend/#wpcf7-f792-p743-o1" method="post" class="wpcf7-
form" enctype="multipart/form-data" novalidate="novalidate">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="792" />
<input type="hidden" name="_wpcf7_version" value="5.1.5" />
<input type="hidden" name="_wpcf7_locale" value="es_MX" />
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f792-p743-o1" />
<input type="hidden" name="_wpcf7_container_post" value="743" />
</div>
<section class="elementor-element elementor-element-c718137 elementor-section-
section elementor-top-section" data-id="c718137" data-element_type="section">
<div class="elementor-element elementor-element-7617020 elementor-
column elementor-col-100 elementor-top-column" data-id="7617020" data-element_type="column">
pág. 56
<div class="elementor-element elementor-element-75adfd8 elementor-widget elementor-
widget-image" data-id="75adfd8" data-element_type="widget" data-widget_type="image.default">
<div class="elementor-image">
<img width="566" height="342" src="http://localhost/proyectoTaller/wp-
content/uploads/2019/11/2019-11-27-23_41_29-juandc_web-unicorn-challenge_-Reto-para-el-
Curso-Profesional-de-Desarrollo-Web-e.png" class="attachment-large size-
large" alt="" srcset="http://localhost/proyectoTaller/wp-content/uploads/2019/11/2019-11-27-
23_41_29-juandc_web-unicorn-challenge_-Reto-para-el-Curso-Profesional-de-Desarrollo-Web-
e.png 566w, http://localhost/proyectoTaller/wp-content/uploads/2019/11/2019-11-27-23_41_29-
juandc_web-unicorn-challenge_-Reto-para-el-Curso-Profesional-de-Desarrollo-Web-e-
300x181.png 300w" sizes="(max-width: 566px) 100vw, 566px" /> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="elementor-element elementor-element-e5db770 elementor-

column elementor-col-50 elementor-top-column" data-id="e5db770" data-element_type="column">
<div class="elementor-element elementor-element-432ea3b elementor-widget elementor-
widget-heading" data-id="432ea3b" data-element_type="widget" data-
default">Para aprobar este desafío debes seguir las siguientes instrucciones:<br></h3> </div>
</div>
<div class="elementor-element elementor-element-d805fcf elementor-widget elementor-
widget-text-editor" data-id="d805fcf" data-element_type="widget" data-widget_type="text-
editor.default">
<div class="elementor-text-editor elementor-
clearfix"><ul><li>Programar una página web 100% replica del diseño.</li><li>Hacer deploy de tu pá
gina web para que todos podamos ver el resultado en internet. Puedes usar <strong>Github Pages
</strong>, <strong>Zeit Now</strong>, <strong>Heroku</strong> o la herramienta que más te gust
e.</li><li>Mandar un <a href="https://github.com/juandc/web-unicorn-
challenge/issues" target="_blank" rel="nofollow noopener">Issue</a> al repositorio del desafío indic
ando dónde podemos encontrar tu solución: la URL, el código y una imágen.</li></ul></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="elementor-element elementor-element-dc1b08c elementor-
column elementor-col-50 elementor-top-column" data-id="dc1b08c" data-element_type="column">
pág. 57
<div class="elementor-element elementor-element-4fce837 elementor-widget elementor-
widget-heading" data-id="4fce837" data-element_type="widget" data-
default">Para demostrar que tu solución es la más creativa puedes intentar ganar aún más puntos
de la siguiente manera:</h3> </div>
</div>
<div class="elementor-element elementor-element-15734b0 elementor-widget elementor-
widget-text-editor" data-id="15734b0" data-element_type="widget" data-widget_type="text-
editor.default">
clearfix"><ul><li>Modificar o añadir secciones del diseño, puedes hacer todos los cambios que quie
ras SIEMPRE y cuando el resultado de tu página web sea 100% basado en tu nuevo diseño.</li><li
>Diseñar y programar la versión móvil de tu página web.</li><li>Añadir animaciones y transiciones
de todo tipo.</li><li>Mejorar la experiencia de los usuarios en tu sitio web con <a style="color: #079
1e6;" href="https://platzi.com/cursos/optimizacion-
web/" target="_blank" rel="nofollow noopener">WPO: Optimización de Carga de Sitios Web</a>.</li
><li>Utilizar <a style="color: #0791e6;" href="https://platzi.com/cursos/css-grid-
layout/" target="_blank" rel="nofollow noopener">CSS Grid</a> para la estructura de tu página web
</li><li>Utilizar compiladores y procesadores de CSS y JavaScript como <a style="color: #0791e6;"
href="https://platzi.com/cursos/webpack" target="_blank" rel="nofollow noopener">Webpack</a>, <
a style="color: #0791e6;" href="https://platzi.com/cursos/diseno-
desarrolladores/" target="_blank" rel="nofollow noopener">Gulp</a>, <a style="color: #0791e6;" hre
f="https://platzi.com/cursos/sass/" target="_blank" rel="nofollow noopener">Sass</a>, <a style="col
or: #0791e6;" href="https://platzi.com/cursos/less" target="_blank" rel="nofollow noopener">Less</a
>, <a style="color: #0791e6;" href="https://platzi.com/cursos/stylus" target="_blank" rel="nofollow no
opener">Stylus</a> o <a style="color: #0791e6;" href="https://platzi.com/cursos/postcss" target="_b
lank" rel="nofollow noopener">PostCSS</a>.</li></ul></div>
</div>
</body>
</html>
pág. 58
INTERFAZ DE REGISTRO
Para que se lleve un mejor control de la información que tendrá la plataforma es
necesario que los estudiantes se registren con ciertos datos importantes para poder
darles un mejor seguimiento en el uso de la plataforma.
Figura 7: Interfaz de registro
CÓDIGO FUENTE
<!DOCTYPE html>
<html lang="es-MX">
<head>
<title>Registro – Proyecto Final</title>

astra-child ast-desktop ast-separate-container ast-two-container ast-right-sidebar astra-2.1.3 ast-
header-custom-item-inside ast-single-post ast-inherit-site-logo-transparent ast-normal-title-
enabled elementor-default elementor-template-full-width elementor-page elementor-page-80">
<div
<header
pe" >
pág. 59
<div
class="ast-site-
Proyecto Final
</a>
</span>
</p>
</div> </div>
</div>
</button>
</div>
</div>
children menu-item-
</ul>
</li>
pág. 60
613"><a href="http://localhost/proyectoTaller/registro/" aria-current="page">Registro</a></li>
<div data-elementor-type="wp-page" data-elementor-id="80" class="elementor elementor-
80" data-elementor-settings="[]">
<section class="elementor-element elementor-element-4e6860a4 elementor-
section elementor-top-section" data-id="4e6860a4" data-element_type="section">
<div class="elementor-element elementor-element-407c2e71 elementor-
column elementor-col-100 elementor-top-column" data-id="407c2e71" data-
<div class="elementor-element elementor-element-5c2519cb elementor-
widget elementor-widget-text-editor" data-id="5c2519cb" data-element_type="widget" data-
<div class="elementor-text-editor elementor-clearfix">
<form enctype="multipart/form-data" method="post" id="wppb-register-user" class="wppb-
user-forms wppb-register-user wppb-user-logged-
out" action="http://localhost/proyectoTaller/registro/#wppb_form_general_message">
<ul><li class="wppb-form-field wppb-default-name-heading" id="wppb-form-element-
1"><h4>Nombre</h4><span class="wppb-description-delimiter "></span></li><li class="wppb-form-
field wppb-default-username" id="wppb-form-element-2">
<label for="username">No.Control<span class="wppb-
required" title="This field is required">*</span></label>
<input class="text-
input default_field_username " name="username" maxlength="70" type="text" id="username" value
="" required /></li><li class="wppb-form-field wppb-default-first-name" id="wppb-form-element-3">
<label for="first_name">Nombre</label>
<input class="text-
input default_field_firstname " name="first_name" maxlength="70" type="text" id="first_name" value
="" /></li><li class="wppb-form-field wppb-default-last-name" id="wppb-form-element-4">
<label for="last_name">Apellidos</label>
<input class="text-
input default_field_lastname " name="last_name" maxlength="70" type="text" id="last_name" value
="" /></li><li class="wppb-form-field wppb-default-e-mail" id="wppb-form-element-8">
<label for="email">Correo electronico<span class="wppb-
pág. 61
<input class="text-
input default_field_email " name="email" maxlength="70" type="email" id="email" value="" required
/></li><li class="wppb-form-field wppb-default-password" id="wppb-form-element-12">
<label for="passw1">Contraseña<span class="wppb-
<input class="text-
input " name="passw1" maxlength="70" type="password" id="passw1" value="" autocomplete="off"
required /><span class="wppb-description-delimiter"> </span></li><li class="wppb-form-field wppb-
default-repeat-password" id="wppb-form-element-13">
<label for="passw2">Repetir contraseña<span class="wppb-
<input class="text-
input " name="passw2" maxlength="70" type="password" id="passw2" value="" autocomplete="off"
required /></li></ul><ul><li class="wppb-form-field wppb-send-credentials-
checkbox"><label for="send_credentials_via_email"><input id="send_credentials_via_email" type="
checkbox" name="send_credentials_via_email" value="sending"/>Send these credentials via email.
</label></li></ul> <p class="form-submit" >
<input name="register" type="submit" id="register" class="submit butt
on" value="Register" />
<input name="action" type="hidden" id="action" value="register" />
<input name="form_name" type="hidden" id="form_name" value="unspecified" />
</p>
<input type="hidden" id="register_unspecified_nonce_field" name="register_unspecified_no
nce_field" value="80b658f885" /><input type="hidden" name="_wp_http_referer" value="/proyectoT
aller/registro/" /> </form>
</div>

</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div> 
</div>

<footer itemtype="https://schema.org/WPFooter" itemscope="itemscope" id="colophon" r
ole="contentinfo">
<div class='footer-width-fixer'> <div data-elementor-type="wp-post" data-elementor-
<section class="elementor-element elementor-element-45fa046a elementor-
section-content-top elementor-section-boxed elementor-section-height-default elementor-section-
height-default elementor-section elementor-top-section" data-id="45fa046a" data-
element_type="section" data-
<div class="elementor-background-overlay"></div>
<div class="elementor-container elementor-column-gap-no">
pág. 62
<div class="elementor-element elementor-element-f82c7b1 elementor-column elementor-
col-100 elementor-top-column" data-id="f82c7b1" data-element_type="column">
<section class="elementor-element elementor-element-1d4a7e0 elementor-section-
section elementor-inner-section" data-id="1d4a7e0" data-element_type="section">
<div class="elementor-element elementor-element-2a1c675 elementor-
column elementor-col-33 elementor-inner-column" data-id="2a1c675" data-
element_type="column">
<div class="elementor-column-wrap">
</div>
</div>
</div>
<div class="elementor-element elementor-element-af367fa elementor-column elementor-
col-33 elementor-inner-column" data-id="af367fa" data-element_type="column">
<div class="elementor-element elementor-element-30e2661 elementor-widget elementor-
widget-heading" data-id="30e2661" data-element_type="widget" data-
<h5 class="elementor-heading-title elementor-size-default">Temas</h5> </div>
</div>
</li>
</li>
</li>
</ul>
</div>
</div>
</body>
</html>
pág. 63
INTERFAZ ´PARA ACCEDER
Una vez que el usuario se registra con todos sus datos podrá acceder al contenido
disponible en la plataforma es por ello que se debe crear un formulario de acceso
donde el usuario deberá meter su numero de control y la contraseña que puso en el
formulario de registro.
Figura 8: Interfaz de acceso

CÓDIGO FUENTE
<!DOCTYPE html>
<html lang="es-MX">
<head>
<title>Acceder – Proyecto Final</title>
astra-child ast-desktop ast-plain-container ast-right-sidebar astra-2.1.3 ast-header-custom-item-
inside ast-single-post ast-inherit-site-logo-transparent ast-normal-title-enabled elementor-
default elementor-template-full-width elementor-page elementor-page-78">
<div
<header
pe" >
pág. 64
<div
class="ast-site-
Proyecto Final
</a>
</span>
</p>
</div> </div>
</div>
</button>
</div>
</div>
children menu-item-
</ul>
</li>
pág. 65
614"><a href="http://localhost/proyectoTaller/acceder/" aria-current="page">Acceder</a></li>
<div data-elementor-type="wp-page" data-elementor-id="78" class="elementor elementor-
78" data-elementor-settings="[]">
<section class="elementor-element elementor-element-5c4d5fc2 elementor-
section elementor-top-section" data-id="5c4d5fc2" data-element_type="section">
<div class="elementor-element elementor-element-6fb0843d elementor-
column elementor-col-100 elementor-top-column" data-id="6fb0843d" data-
<div class="elementor-element elementor-element-1f89aa79 elementor-
widget elementor-widget-text-editor" data-id="1f89aa79" data-element_type="widget" data-
<div class="elementor-text-editor elementor-clearfix">
<div id="wppb-login-wrap" class="wppb-user-forms">
<form name="loginform" id="loginform" action="http://localhost/proyectoTaller/acceder/" metho
d="post">
<p class="login-username">
<label for="user_login">Username</label>
<input type="text" name="log" id="user_login" class="input" value="" size="20" />
</p>
<p class="login-password">
<label for="user_pass">Contraseña</label>
<input type="password" name="pwd" id="user_pass" class="input" value="" size="20" />
</p>
<p class="login-
remember"><label><input name="rememberme" type="checkbox" id="rememberme" value="foreve
r" /> Recuérdame</label></p>
<p class="login-submit">
<input type="submit" name="wp-submit" id="wppb-submit" class="button button-
primary" value="Acceder" />
<input type="hidden" name="redirect_to" value="http://localhost/proyectoTaller/acceder/" /
>
</p>
<input type="hidden" name="wppb_login" value="true"/>
<input type="hidden" name="wppb_form_location" value="page"/>
pág. 66
<input type="hidden" name="wppb_request_url" value="http://localhost/proyectoTaller/acced
er/"/>
<input type="hidden" name="wppb_lostpassword_url" value=""/>
<input type="hidden" name="wppb_redirect_priority" value=""/>
<input type="hidden" name="wppb_referer_url" value="http://localhost/proyectoTaller/registr
o/"/>
<input type="hidden" id="CSRFToken-wppb" name="CSRFToken-
wppb" value="e27cbe4a0f" /><input type="hidden" name="_wp_http_referer" value="/proyectoTaller
/acceder/" />
<input type="hidden" name="wppb_redirect_check" value="true"/>
</form></div>
<div class="elementor-element elementor-element-34c76c4 elementor-icon-list--layout-

traditional elementor-widget elementor-widget-icon-list" data-id="34c76c4" data-
<i aria-hidden="true" class="fas fa-map-marker-alt"></i> </span>
<span class="elementor-icon-list-text">Tlanepantla Centro</span>
</li>
<i aria-hidden="true" class="fas fa-phone"></i> </span>
<span class="elementor-icon-list-text">52+ 5540756374</span>
</li>
<i aria-hidden="true" class="fas fa-envelope-open"></i> </span>
text">etzahumendoza@gmail.com</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="elementor-element elementor-element-c241230 elementor-section-
section elementor-inner-section" data-id="c241230" data-element_type="section">
<div class="elementor-element elementor-element-6d3a534 elementor-
column elementor-col-50 elementor-inner-column" data-id="6d3a534" data-
element_type="column">
<div class="elementor-element elementor-element-2280436 elementor-widget elementor-
widget-text-editor" data-id="2280436" data-element_type="widget" data-widget_type="text-
editor.default">
pág. 67
clearfix"><p>Copyright © 2019 Etzahu Hernandez Mendoza</p></div>
</div>
</div>
</div>
</div>
<a href="javascript:void(0);" data-action="um_remove_modal" class="um-modal-

close"><i class="um-faicon-times"></i></a>
<div class="um-modal-body photo">

<div class="um-modal-photo"></div>
</div>
</div>
</body>
</html>
pág. 68
12 CRONOGRAMA
pág. 69
pág. 70
13 PRESUPUESTO
RECURSO HUMANO
El recurso humano empleado para el desarrollo del presente proyecto tiene
conocimientos necesarios para el desarrollo y cumplimiento de los objetivos del
proyecto
Recurso humano Nombre Conocimientos
Estudiante Etzahu Hernández Desarrollo web (básico)
Mendoza
RECURSOS FÍSICOS Y TECNOLÓGICOS

Los recursos físicos y tecnológicos empleados como apoyo para el
almacenamiento, escritura, redacción, consulta, gestión de la documentación y
demás aspectos necesarios para el desarrollo y termino del proyecto del muestran
a continuación.
Recurso Cantidad Descripción Precio
Laptop 1 HP Serie 15- $5500
bs000, procesador
corei3, disco duro
240GB, Ram 8GB
Escritorio 1 Escritorio de $2000
Y silla madera para
computadora
personal
Paquetería de 1 Microsoft Office $1299
ofimática 2016
Internet 5 (meses) Servicio de $900
internet con IZZI
Servidor 1 Servidor local $0
creado con
XAMPP
Dominio 1 Dominio para la $0
plataforma web
Total $9699
Las herramientas y lenguajes de programación que se utilizaran para el desarrollo

de la plataforma web, todos son open source es por ello que no generan algún costo
adicional al proyecto
pág. 71
14 FUENTES CONSULTADAS
Schwaber, K., & Sutherland, J. (2013). La Guía Definitiva de Scrum.

(2018). Obtenido de Que es INDAUTOR: https://idconline.mx/juridico/2015/06/01/-
qu-es-el-indautor-y-cmo-me-ayuda
(2018). Obtenido de Metodología Scrum para desarrollo de software:
https://www.softeng.es/es-es/empresa/metodologias-de-
trabajo/metodologia-scrum.html
(2018). Obtenido de Etapas de la metodologia SCRUM:
https://www.esan.edu.pe/apuntes-empresariales/2018/10/las-etapas-del-
scrum-como-aplicar-este-metodo/
(Mayo de 2019). Obtenido de IMPI:
https://es.wikipedia.org/wiki/Instituto_Mexicano_de_la_Propiedad_Industrial
(2019). Obtenido de INDAUTOR: https://indautor.gob.mx/tramites-y-
requisitos/registro/registro_obras.html
Barriga Arceo, F. D., & Hernandez Rojas, G. (2002). Estrategias docentes para un
aprendizaje significativo. Mexico,DF: Inter Americana Editores.
Biggs, J. (2004). Calidad del aprendizaje universitario. Madrid: Narcea.
Caracteristicas de Windows 10. (Abril de 2019). Obtenido de
https://www.caracteristicas.co/windows-10/
ComputerHoy. (Noviembre de 2018). Obtenido de Pros y contras de Windows 10:
https://computerhoy.com/noticias/software/pros-contras-actualizar-windows-
10-merece-pena-30191
DATE, C. J. (2001). Introducción a los sistemas de base de datos. Madrid: Pearson.
DBASupport. (2016). DBASupport. Obtenido de Caracteristicas de MySql:
https://www.dbasupport.com.mx/index.php/bases-de-datos/mysql/mysql-
administracion/132-caracteristicas-de-mysql
Dias Noguera, D. (1995). Participacion, evaluacion, reflexion y etica en el desarrollo
de las organizaciones educativas. MCEP, 28.
Edmundo, C. (2014). Analisis y Diseño de Sistemas de informacion.
pág. 72
ELMASRI, R. (2007). Fundamentos de Sistemas de Bases de Datos. Madrid:
Pearson.
ESPINOSA, A. P., & CAMPOS, B. P. (S.A. MCGRAW-HILL). CONCEPTOS DE
INFORMATICA SCHAUM. ESPAÑA: 2010.
EVALART. (2019). Obtenido de PLATAFORMA DE PRUEBAS EN LINEA:
https://evalart.com/es/
EXCELENCIA, P. T. (11 de Noviembre de 2019). Norma iso 27001. Obtenido de
ISO Tools: https://www.isotools.org/normas/riesgos-y-seguridad/iso-27001/
GILFILLAN, I. (2012). LA BIBLIA DE MYSQL. ANAYA MULTIMEDIA.
Gili, E. G. (2004). Psicología del color. Gustavo Gili.
iso27000.es. (2016). Sistema de Gestión de la Seguridad de la informacion.
Obtenido de Iso27000: http://www.iso27000.es/download/doc_sgsi_all.pdf
ISOTools. (2019). ISO 31000 Sistemas de Gestión de Riesgos y Seguridad.
Obtenido de ISOTools: https://www.isotools.org/normas/riesgos-y-
seguridad/iso-31000/
JOYANES, L. (2008). FUNDAMENTOS DE PROGRAMACION. MCGRAW-HILL
INTERAMERICANA.
Leandro, A. (03 de Junio de 2010). Alegsa. Obtenido de Definicion de Aplicacion:
http://www.alegsa.com.ar/Dic/aplicacion.php
LÜSCHER, M. (2000). TEST DE LOS COLORES: TEST DE LÜSCHER. PAIDOS
IBERICA.
Martel, A. (2016). Desarrollo de Software Agil Para El Scrum Master. Createspace
Independent Publishing Platform.
METTL. (2019). Obtenido de MERCER: https://mettl.com/es/
Microsoft. (Mayo de 2019). Microsoft. Obtenido de Actualizaciones de Windows 10:
https://www.microsoft.com/es-mx/windows/features
Montoyo, M. (2012). Sistemas de informacion. Departamento de Lenguajes y
Sistemas de informarcion.
Moodle Docs. (2018). Obtenido de Acerca de Moodle:
https://docs.moodle.org/all/es/Acerca_de_Moodle
pág. 73
Moreno Olivos, T. (2009). La evaluación del aprendizaje en la universidad:
tensiones, contradicciones y desafíos. Revista mexicana de investigacion
educativa, 20.
MySql. (Mayo de 2019). MySql. Obtenido de Requisitos de instalacion:
https://www.mysql.com/downloads/
PAWLIK, J. (2012). TEORIA DEL COLOR. PAIDOS.
Perez, J. C. (2001). Sistemas Operativos: Una vision aplicada. España: Concepcion
Fernandez Madrid.
Rodriguez Conde, M. (20 de Octubre de 2019). Aplicación de las TIC a la evaluación
de alumnos universitarios. Teoría de la Educación. Educación y Cultura en la
sociedad de la informacion. Obtenido de Redalyc:
https://www.redalyc.org/pdf/2010/201021055002.pdf
Sabin Wilson, L. (2017). WordPress For Dummies. Sons Inc.
SCRUMstudy. (2016). Una guía para el cuerpo de conocimiento de Scrum. Phoenix,
Arizona: VMEdu, Inc.
Silberschatz, A. (2002). FUNDAMENTOS DE BASES DE DATOS. Madrid:
INTERAMERICANA DE ESPAÑA.
Sommerville, I. (2011). INGENIERÍA DE SOFTWARE NOVENA EDICION. Mexico:
PEARSON EDUCATION.
Stallings, W. (2005). Sistemas Operativo: Aspectos principales e internos. España:
Pearson.
TANENBAUM, A. (2009). SISTEMAS OPERATIVOS MODERNOS. Mexico:
PEARSON EDUCACION.
TropicalServer. (2019). Obtenido de ¿Qué es Moodle?:
https://www.tropicalserver.com/ayuda/que-es-moodle/#Caracteristicas-de-
Moodle-y-para-que-sirve
UC, B. D. (2018). ¿Cuál es el propósito de la Investigación Aplicada? . Obtenido de
Duoc UC: http://www.duoc.cl/biblioteca/crai/definicion-y-proposito-de-la-
investigacion-aplicada
Waka. (2018). Obtenido de Teoria de los colores:
https://www.somoswaka.com/blog/2017/09/significado-de-los-colores/
pág. 74
Wolf, G., Ruiz, E., & Bergero, F. (2015). Fundamentos de Sistemas Operativos.
Mexico.DF: Universidad Nacional Autonoma de Mexico.
Yáñez, L. H. (2014). Fundamentos de la programación. Facultad de Informática
Universidad Complutense.
pág. 75
15 CONCLUSION
El mercado laboral para las áreas de tecnología siempre ha sido muy exigente en
cuanto a las habilidades y conocimientos que debe tener un profesionista del área
esto implica que la persona debe estar en constante aprendizaje con respecto a
lenguajes de programación, metodologías de desarrollo, herramientas para
desarrollo de software, frameworks de distintos lenguajes y un sin fin de tecnologías
que está continuamente cambiando por otro lado pocas son las universidades
capaces de ajustar las materias, retícula o contenidos ofrecidos en las carreras
relacionadas a áreas de tecnología encima las formas de evaluar siguen siendo
siempre las mismas apoyándose del modelo educativo tradicional lo que ocasiona
es que los egresados salgan y no cuenten con las habilidades o conocimientos
necesarios que demandan las empresas por tanto para disminuir dicha problemática
es fundamentas que las instituciones a nivel superior implementen nuevas formas
de medir el progreso de conocimientos técnicos de los estudiantes, para la era
actual en que vivimos no sirven de nada que las personas solo memoricen cada
tema de las materias o que el único modo de evaluar sea a través de un examen
teórico que en muchas de las ocasiones no existen una retroalimentación si la
calificación fue deficiente .
Finalmente se puede concluir que el objetivo de este proyecto será cumplir primero
con identificar las formas en que una empresa puede evaluar las habilidades de un
profesionista, identificar cuáles son los temas con mayor relevancia para las
empresas, acoplar el contenido que tendrá la plataforma en relación a los lenguajes
de programación y todo el ecosistema que los rodea ya sea herramientas,
framework, metodologías entre otras cosas.
El proyecto que se realizó contribuirá de una manera muy significativa a la institución
ya que recabara información cuantitativa de los estudiantes como el proceso de
conocimiento, el número de usuarios, el número de estudiantes con mayor o menor
deficiencia, toda esta información será de gran apoyo para que la institución
identifique las necesidades reales que tiene los estudiantes del tecnológico y así
proponer nuevas estrategias de aprendizaje.
pág. 76

Protocolo de Investigacion

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Protocolo de Investigacion

Încărcat de

Drepturi de autor:

Formate disponibile

INDICE

b. Marco legal ............................................................................................... 13

d. Marco conceptual ..................................................................................... 18

11 Desarrollo del proyecto, programación y resultados......................................... 37

Interfaz de inicio ................................................................................................. 37

Interfaz de contenido ......................................................................................... 42

Interfaz de ejercicios .......................................................................................... 48

Interfaz de registro ............................................................................................. 59

Interfaz ´para acceder ........................................................................................ 64

Recursos físicos y tecnológicos ......................................................................... 71

14 Fuentes consultadas ........................................................................................ 72

figura 1: Modelo relación ....................................................................................... 37

2 RUBROS DEL PERFIL

Los rubros que se relacionan con el proyecto son los siguientes:

Ya que la plataforma recolectará distinta información como calificaciones,

Implementar sistemas de seguridad bajo políticas internas de las organizaciones

la plataforma se regirá bajo las siguientes legislaciones:

La plataforma contara con una política de términos y condiciones donde se le

La plataforma estará construida con los lenguajes de programación y

Ya que la plataforma recolecta toda la información generada por cada

• La armonización con normas de sistemas de gestión como ISO 9001 e ISO

• Entornos virtuales de formación (web-based trining), que ayudan al profesor

DIAGRAMA RELACIONAL PARA EL PROTOTIPO DE LA PLATAFORMA

Figura 1: Modelo relación

<body itemtype='https://schema.org/WebPage' itemscope='itemscope' class="home page-template-

Figura 3: contenido de la plataforma

Figura 4: Contenido del apartado de lenguajes de programación

<title>Contenido &#8211; Proyecto Final</title>

Así que diviértete y diviértete mientras completas este curso

Figura 5: Interfaz de ejercicios

<title>Conceptos básicos &#8211; Proyecto Final</title>

<body itemtype='https://schema.org/WebPage' itemscope='itemscope' class="page-template page-

<div class="ast-flex main-header-container">

<div id="content" class="site-content">

<button type='button' class='fca_qc_button fca_qc_start_button'>Start Quiz</button>

<div class='flip-container fca_qc_quiz_div' style='display: none;'>

</div>

Figura 6: Interfaz de desafíos prácticos

<title>Desafió 1 de Frontend &#8211; Proyecto Final</title>

<div class="ast-flex main-header-container">

</header>

<div data-elementor-type="wp-page" data-elementor-

<div class="elementor-element elementor-element-e5db770 elementor-

Figura 7: Interfaz de registro

<title>Registro &#8211; Proyecto Final</title>

</div>

</div>

</div>

Figura 8: Interfaz de acceso

<div class="elementor-element elementor-element-34c76c4 elementor-icon-list--layout-

<a href="javascript:void(0);" data-action="um_remove_modal" class="um-modal-

<div class="um-modal-body photo">

RECURSOS FÍSICOS Y TECNOLÓGICOS

Las herramientas y lenguajes de programación que se utilizaran para el desarrollo

Schwaber, K., & Sutherland, J. (2013). La Guía Definitiva de Scrum.

S-ar putea să vă placă și

<title>Contenido – Proyecto Final</title>

<title>Conceptos básicos – Proyecto Final</title>

<title>Desafió 1 de Frontend – Proyecto Final</title>

<title>Registro – Proyecto Final</title>