CENTRO DE BACHILLERATO TECNOLÓGICO

INDUSTRIAL Y DE SERVICIOS #4.

MANUAL: ESTRUCTURA Y FUNCIONES DE SITIO E-

Learning.

INTEGRANTES:

ESTRADA AGUIRRE EMANUEL

GARCÍA MORQUECHO ABRAHAM ANTONIO
HERNÁNDEZ ALANIZ MARLEN
RAMÍREZ ZARATE ALBERTO
REZA ALVAREZ JOSUÉ
RUIZ SANDOVAL GERARDO

28/Mayo/2020
El sito E-Learning cuenta con 14 archivos .php, 3 archivos .css, 4 archivos .js y 5
plugins que mantienen el optimo funcionamiento de la plataforma. Debido a que se
necesita base de datos para que el sitio funciones, se necesitan cambiar las extensiones
de los archivos .html por .php, para que pueda ser reconocido el código de .php al
conectar a la BD y hacer consultas, aún así el código .html no se ve afectado.

ESTRUCTURA DE DISEÑO Y APARIENCIA.

Página de “index.php”
La página principal siempre debe ser llamada index, sabiendo eso, se presenta la
siguiente estructura de un formulario escrito en código html.
Seguido del código css que es lo que le da la apariencia y diseño que se presenta:
Todas esas líneas de código dan como resultado lo siguiente:

Página de “registrar”
Al igual que el index, ésta página presenta un formulario para registrar datos de un
nuevo usuario, con la siguiente estructura html:
Presenta los mismos estilos css utilizados en la página de index ya que así se decidió,
ya que utiliza los mismos elementos. Teniendo el siguiente resultado:
Menú pegajoso.
El menú “pegajoso”, se encuentra en casi todas las páginas del sitio web, su
funcionamiento es por medio de código js, css y html.

Diseño responsive para celular o dispositivos con resolución de pantalla

menores a 1220px:
Html:

css:
js:
Lo que hace funcionar al botón de menú en dispositivos móviles o con una resolución de
pantalla menor a 1220px se encuentra en el archivo .js llamado menuResponsive.js.
Diseño responsive para dispositivos con resolución de pantalla mayor a
1220px:

El código html es el mismo, no difiere en lo absoluto, el cambio se hace solamente

desde css, el ícono y menú de navegación de perfil se queda tal cual.
Página de “inicio”.
La página de inicio está principalmente diseñada por plugins y css.
Html:
La página de inicio está en su totalidad diseñada desde el archivo style.css en la
carpeta calami dentro de la carpeta llamada css.
css:
En cuanto a JavaScript, animaciones y funciones cabe aclarar que se usan los plugins
de la carpeta calami\plugins.
El resultado es el siguiente:
Páginas de cursos (curso_clase1.php, curso_clase2.php, curso_clase3.php,
curso_clase4.php, curso_clase5.php).

Estas páginas guardan mucho en común, y es que su desarrollo es el mismo,

cambiando solo datos como párrafos y enlaces, así como el video del curso.
Html
css
Como se mencionó antes, todas las páginas de cursos tienen el mismo diseño, variando
solamente los datos que la página tiene.
Menú de navegación de las páginas de cursos.
Las páginas de cursos cuentan con un menú de navegación desplegable para navegar
entre las 5 clases disponibles por medio de un botón, para que funcione se requiere de
programación en JavaScript, se encuentra en menuResponsive.js.
Html

css
js
Lo que se hace en JavaScript es llamar según su ID a los elementos que conforman el
menú y se quieran cambiar, para que de ésta manera remover clases y añadir nuevas
según se de click en el botón, de está manera se dará el efecto deseado, véase en las
imágenes:
Pagina de “examen.php”.
Esta parte del sitio web tiene la peculiaridad de tener una método de preguntas y
respuestas, ya que es el examen del curso, por medio de formularios y JavaScript,
dándole diseño con css.
Html
css
js
El truco del examen es similar al de los menús, ocultando y mostrando clases al
presionar un botón, pero usando más la lógica de la programación orientada a objetos,
el archivo .js llamado examen_mecanica.js que hace funcionar al examen está en la
carpeta js.
El examen tiene la siguiente apariencia:
El comando “alert()” es un mensaje de alerta como su nombre lo indica, que
utilizamos para indicar si la respuesta es correcta o incorrecta.
Al momento de dar aceptar, por medio de js oculta la pregunta y las respuestas y
cambia a la siguiente.

Por medio de un formulario en la misma página “examen.php” registro la calificación

final del examen (el input que recibe la calificación está oculto), calculada con
JavaScript, para que de esta manera se registre en la base de datos.