Índice

Introducción … … … … … … … … … … … … … … … 2
Planteamiento … … … … … … … … … … … … … … 3
Justificación … … … … … … … … … … … … … … … 4
Objetivos … … … … … … … … … … … … … … …… 4
Hipótesis … … … … … … … … … … … … … … ……5
Marco Teórico… … … … … … … … … … … … … … 6
Referencias… … … … … … … … … … … … … … … 15
Anexos… … … … … … … … … … … … … … …… 16

Capítulo 1 tipos de lenguaje web

1.1 HTML
1.2 PHP
1.3 JavaScript
1.4 Java

Capítulo 2 Diseño de interfaz

2.1 Creación de base de datos
2.2 Estructura grafica
2.3 Compatibilidad de software
2.4 Requerimiento de hardware

Capítulo 3 Tipos de página web

3.1 Interactiva
3.2 Dinámica
3.3 Blogs
3.4 Estáticas

Capítulo 4 Propuesta de página web para la UPN

4.1 Oferta académica
4.2 Administración de datos
4.3 Plataforma educativa
4.4 Horarios

1
 Introducción

Plataforma educativa
Este proyecto tratara sobre el desarrollo de una página web educativa en la cual alumnos de la
universidad pedagógica nacional de maestros que estén por terminar su Licenciatura puedan hacer
su servicio social a distancia hacia las zonas aledañas del municipio los reyes la paz

Esta idea se hace con la finalidad de ayudar a gente que no tiene las mismas oportunidades que
otras, y para que así concluyan sus estudios para su mejor futuro. La página será creada para que
becarios que quieran liberar su servicio social acudan a ella y puedan poner sus datos y su nivel
académico para así impartan a dar clases dependiendo del nivel que quieran dar y de su
conocimiento.

Será un sitio en el cual el alumno podrá ver sus calificaciones, así como también la oferta
educativa, y el becario tendrá que actualizar los datos del alumnado en determinado tiempo.

También tendrá actividades didácticas, así como de investigación, para que el alumno tenga un
buen desarrollo y entienda mejor las clases impartidas.

Se hará eligiendo el mejor lenguaje de programación para llevar acabo la creación de la página y
seleccionando el mejor buscador que a la gente le atraiga de forma que puedan recomendarla ya
que este sitio web será muy interactivo y fácil de poder usar.

2
 Planteamiento

1. ¿Por qué utilizar HTML en lugar de otro lenguaje de programación?

2. ¿A quién o quienes beneficiara la página web?

3. ¿Qué oferta educativa existe?

4. ¿Cuál es el primer objetivo a cumplir?

5. ¿Qué interfaz tendrá el sitio web?

3
 Justificación

En México acceder a la educación superior aún es un reto, pues solo el 17% de los personas
de entre 6 y 25 años logran tener estudios. Esto coloca al país en los últimos lugares con la
proporción más baja entre los países de la OCDE, cuyo promedio es de 37%, según el estudio
Panorama de la Educación 2017 de la OCDE.

Aunque en el país la educación básica (Primaria y Secundaria) cada vez llega a mas lugares,
muchos jóvenes, por diversas razones, no asisten a la escuela y por lo tanto, algunos de ellos no
saben leer ni escribir.

En México, en 45 años el porcentaje de personas analfabetas de 15 y más años bajo de 25.8 en

1970 a 5.5% en 2015, lo que equivale a 4 millones 749 mil 057 personas que no saben leer ni
escribir.

2018
Objetivos

 Diseñar un prototipo de una página web para educar a distancia que le pueda ser útil a los
alumnos que presentan su servicio social en la UPN.
 Otorgar materiales de apoyo para el asesor y los alumnos del sitio.
 Crear una interfaz gráfica, atractiva y agradable para los usuarios

4
 Determinar que la utilización para el profesor y el alumno se realice de forma fácil y didáctica
 Utilizar lenguaje HTML para la creación de la página web

Hipótesis

 Tener una página web para educación a distancia en la UPN para mejorar las posibilidades
de llegar a cualquier persona

 HTML es un lenguaje de programación que se utiliza para el desarrollo de páginas web ya

que es un lenguaje fácil de utilizar. Se trata de las siglas correspondientes a Hyper Text
Markup Languaje, es decir Lenguaje de Marcas de Hipertexto.

 La página va a satisfacer las necesidades de los usuarios en cualquier dispositivo.

 El software asistirá al usuario en cualquier momento necesario.

 Con la página web el sistema operativo no tendrá errores, buen mantenimiento y una buena
estabilidad

 La página web se centrara en los servicios de los estudiantes y no tanto en otros servicios.

 La página web tiene una plataforma que cuenta con unos tipos de aplicaciones y muchos
desarrolladores para crear contenido.

 La etapa de diseño se definirá en las características necesarias que el sistema tendrá que
se desarrollara la etapa de implementación.

 La página web beneficiara al becario y a los usuarios interesados para obtener conocimiento
educativo y los becaros puedan obtener su servicio social.

5
 Marco Teórico

Tipos de lenguaje web

Desde los inicios de Internet, fueron surgiendo diferentes demandas por los usuarios y se dieron
soluciones mediante lenguajes estáticos. A medida que paso el tiempo, las tecnologías fueron
desarrollándose y surgieron nuevos problemas a dar solución. Esto dio lugar a desarrollar lenguajes
de programación para las web dinámicas, que permitieran interactuar con los usuarios y utilizaran
sistemas de Bases de Datos.

Java

Java es un lenguaje de programación y una plataforma informática comercializada por primera

vez en 1995 por Sun Microsystems. Hay muchas aplicaciones y sitios web que no funcionarán a
menos que tenga Java instalado y cada día se crean más. Java es rápido, seguro y fiable. Desde
portátiles hasta centros de datos, desde consolas para juegos hasta súper computadoras, desde
teléfonos móviles hasta Internet, Java está en todas partes.

Como cualquier lenguaje de programación, el lenguaje Java tiene su propia estructura, reglas de
sintaxis y paradigma de programación. El paradigma de programación del lenguaje Java se basa
en el concepto de programación orientada a objetos (OOP), que las funciones del lenguaje
soportan.

(Oracle, S/A)

HTML

Desde el surgimiento de internet se han publicado sitios web gracias al lenguaje HTML. Es un
lenguaje estático para el desarrollo de sitios web (acrónimo en inglés de HyperText Markup
Language, en español Lenguaje de Marcas Hipertextuales). Desarrollado por el World Wide Web
Consortium (W3C). Los archivos pueden tener las extensiones (htm, html).

6
Sintaxis:

<html> (Inicio del documento HTML)

<head>

( Cabecera )

</head>

<body>

(Cuerpo)

</body>

</html>

<b> </b> Negrita

<p> </p> Definir parrafo

<etiqueta> Apertura de la etiqueta

</etiqueta> Cierre de la etiqueta

(S/A, 2015)

JAVASCRIPT

Este es un lenguaje interpretado, no requiere compilación. Fue creado por Brendan Eich en la
empresa Netscape Communications. Utilizado principalmente en páginas web. Es similar a Java,
aunque no es un lenguaje orientado a objetos, el mismo no dispone de herencias. La mayoría de
los navegadores en sus últimas versiones interpretan código Javascript.

El código Javascript puede ser integrado dentro de nuestras páginas web. Para evitar
incompatibilidades el World Wide Web Consortium (W3C) diseño un estándar denominado DOM
(en inglés Document Object Model, en su traducción al español Modelo de Objetos del Documento).

(Valdes, 2007)

7
 PHP

PHP es un lenguaje de script interpretado en el lado del servidor utilizado para la generación de
páginas web dinámicas, embebidas en páginas HTML y ejecutadas en el servidor. PHP no necesita
ser compilado para ejecutarse. Para su funcionamiento necesita tener instalado Apache o IIS con
las librerías de PHP. La mayor parte de su sintaxis ha sido tomada de C, Java y Perl con algunas
características específicas. Los archivos cuentan con la extensión (php).

Sintaxis:

La sintaxis utilizada para incorporar código PHP es la siguiente:

<?

$mensaje = “Hola”;

Echo $mensaje;

(Latinoamericana, S/A)

Diseño de interfaz
La interfaz web son elementos gráficos que permiten al usuario acceder a los contenidos, navegar
e interactuar. Para lograr que un usuario se quede y vuelva, el diseño de la interfaz es importante.
Para que un diseño web sea efectivo, debe lograr que los usuarios del sitio puedan acceder con
facilidad a los contenidos, interactuar con eficacia con todos los componentes y sentirse cómodo
en forma permanente, y todo ello sin siquiera pensarlo.
El elemento que consigue que esto sea posible es la interfaz, en cuya preparación y diseño se
debe poner especial atención.
Una parte importante de los éxitos o fracasos de los sitios depende en gran medida de este
elemento fundamental del diseño. Además, el diseño de interface debe perseguir hacer webs
usables.

8
 Creación de base de datos

Este servicio permite que nuestros usuarios (dominio @uv.es), puedan crear y mantener bases
de datos desde su navegador WEB. Los datos almacenados serán consultables también a través
del navegador, mediante formularios HTML generados automáticamente.
Las bases de datos soportadas son tablas sencillas, no relacionadas, de múltiples campos (sin
limitación en el número de éstos).

El tamaño máximo de una tabla se fija en 5 Mbytes (suma total de todos los caracteres de todos
los campos de todos los registros); unos 10.000 registros cortos, 2.500 con abundante texto.
Automáticamente se generan múltiples formularios de búsqueda: búsqueda sencilla por palabras,
búsqueda avanzada con múltiples criterios, formatos de salida y de ordenación. Navegación en los
resultados con y sin frames. También automáticamente y con sólo definir los campos, se generan
los formularios de introducción de datos.

La base de datos puede estar operativa con sólo definir los campos que va a tener. No obstante,
existe la posibilidad de afinar considerablemente, tanto en consulta como en introducción de datos.
Para cada campo se pueden definir ayudas y descripciones, así como variadas condiciones de
validación ("empieza por", "contiene", "es número”, “obligatorio",...). Existen 9 tipos posibles
campos (línea, texto, opciones, URL, e-mail, imagen, lista, fecha, raya separadora) (nota: el tipo
imagen estará sujeto a severas limitaciones de tamaño). Se pueden controlar las dimensiones de
los campos en los formularios de introducción y definir campos cuyos valores pueden ser uno o
varios valores de una lista de opciones. Los campos pueden ser repetitivos y pueden tener valor
por defecto.
(Gomez, 2018)

9
 Estructura grafica

(Fernandez, 2018)
Compatibilidad de software

La compatibilidad es la condición que hace que un programa y un sistema, arquitectura o

aplicación logren comprenderse correctamente tanto directamente o indirectamente (mediante un
algoritmo). A este algoritmo que hace que un programa logre ser comprendido por un sistema,
arquitectura o aplicación se lo denomina emulador por el hecho de que es un intérprete entre el
programa y el sistema, arquitectura o aplicación.

10
 Requerimientos del hardware

Estar diseñado para servir el contenido de HTTP.

Esta principalmente diseñado para servir contenido estático, aunque la mayoría de los servidores
web tienen plugino.

Están bien adaptados para el contenido estático y servidores de aplicaciones de contenido

dinámico.

Se identifica con contenido dinámico solicitud y transparente de los reenvía al servidor de la

aplicación.

(alegsa.com.er, 2018)

Tipos de página web

- Página Web Estática: Las páginas web estáticas son aquellas realizadas en HTML que pueden
mostrar en alguna parte de la página objetos en movimiento tales como banners, gifs animados,
videos, etc.

- Página Web Animada: Las páginas web animadas son aquellas que se realizan con la tecnología
FLASH, ésta permite que una página web presente el contenido con ciertos efectos y animaciones
en algunos de los sectores de la página o bien puede estar toda la página hecha en este lenguaje.
El uso de esta tecnología permite diseños más vanguardistas, modernos y creativos.

- Página Web Dinámica: Existen muchos lenguajes de programación que son la base para la
mayoría de páginas web dinámicas. Las que destacamos aquí son los lenguajes PHP y ASP. Estos
lenguajes permiten una perfecta estructuración del contenido. Por una parte crearíamos la
estructura de las páginas web, y por otra almacenaríamos el contenido en determinados archivos.

- Portal: Es un sitio web que en su página principal permite el acceso a múltiples secciones que,
por lo general, son foros, chats, cuentas de correo, buscador, acceso registrado para obtener ciertas
ventajas, las últimas noticias de actualidad… un sinfín de recursos para brindar al usuario la mejor
experiencia de búsqueda para una temática en particular o para una temática muy amplia.

11
- Tienda virtual o Comercio electrónico: Como su nombre indica, se trata de un sitio web que
publica los productos de una tienda en particular en Internet. Permite la compra on-line a través de
VISA, domiciliación bancaria o transferencia por norma general. Ofrece al administrador un panel
de gestión para poder subir los productos, actualizarlos, eliminarlos, etc.Página Web con
- Gestor de Contenidos: Se trata de un sitio web cuyo contenido se actualiza a través de un panel
de gestión por parte del administrador del sitio. Este panel de gestión suele ser muy intuitivo y fácil
de usar. En aquellas páginas web que requieran una actualización constante se suele incorporar
este panel de gestión para que pueda controlarse día a día por parte del cliente.
- Sitio weblog (o blog): Nace de la definición de un diario, en donde la persona inserta información
a través del tiempo, solo que esto se hace público y las demás personas pueden acceder a este y
comentar sobre lo que leen. Este diario se encuentra acomodado de tal forma que lo primero que
aparece es lo último que se publicó. Ejemplos: Blogger, Xanga. [[LiveJournal], [[WordPress],
www.x0101.com.
- Sitio de empresa: usado para promocionar una empresa o servicio.Sitio de comunidad virtual: un
sitio donde las personas con intereses similares se comunican con otros, fomentando de esta forma
la comunicación digital y la cultura digital. Por ejemplo: MySpace, Facebook, Hi5, Multiply, Orkut.

- Sitio de desarrollo: un sitio el propósito del cual es proporcionar información y recursos

relacionados con el desarrollo de software, diseño web, etc.

- Sitio de descargas: estrictamente usado para descargar contenido como software, demos de
juegos o fondos de escritorio: Download, Tucows, Softonic, Baulsoft. En algunos de los casos estos
sitios solamente se encargan de recopilar la información pero los enlaces son externos y por lo
general apuntan a la página WEB del creador (o proveedor) de la descarga.

- Sitio de juego: un sitio que es propiamente un juego o un “patio de recreo” donde mucha gente
viene a jugar, como MSN Games, Pogo.com y los MMORPGs VidaJurasica, Planetarion y Kings of
Chaos.

- Sitio de noticias: Es un sitio dedicado a mostrar noticias y comentarios. Este tipo de sitio WEB
promete ser el reemplazo de los periódicos y noticieros, debido a la facilidad de acceso y a la alta
interacción con el usuario final.

12
- Sitio pornográfico (porno): muestra imágenes y vídeos de contenido sexual.

- Sitio buscador: un sitio que proporciona información general y está pensado como entrada o
búsqueda para otros sitios. Un ejemplo puro es Google, y el tipo de buscador más conocido es
Yahoo!

- Sitio shock: incluye imágenes u otro material que tiene la intención de ser ofensivo a la mayoría
de visitantes. Ejemplos: rotten.com, [ratemypoo.com].

- Sitio personal: Mantenido por una persona o un pequeño grupo (como por ejemplo familia) que
contiene información o cualquier contenido que la persona quiere incluir.

- Sitio Web 2.0: un sitio donde los usuarios son los responsables de mantener la aplicación viva,
usando tecnologías de última generación: pikeo, flickr

- Sitio wiki: un sitio donde los usuarios editan colaborativamente (por ejemplo: Wikipedia). Este
usuario se basa en la idea de que sean el usuario quienes alimenten y mejoren los contenidos
almacenados en el sitio.

- Sitio político: un sitio web donde la gente puede manifestar su visión política. Ejemplo: New
Confederacy.

- Sitio de Rating: un sitio donde la gente puede alabar o menospreciar lo que aparece.

- Sitios Educativos: promueven cursos presenciales y a distancia, información a profesores y

estudiantes, permiten ver o descargar contenidos de asignaturas o temas.

- Sitio Spam: sitio web sin contenidos de valor que ha sido creado exclusivamente para obtener
beneficios y fines publicitarios, engañando a los motores de búsqueda.

Propuesta de página web para la UPN.

Las propuestas se suelen presentar al final de tu embudo de ventas, el último paso necesario,
justo antes de que el cliente firme en la línea punteada.

Aunque si bien las ventas son un juego de números, de alguna forma, enviarle propuestas a
clientes que no van a compaginar con el negocio, no necesariamente dará como resultado más
ventas.

13
 Plataforma de calificaciones

Se entiende por plataforma educativa como un sitio en la web, que permite al becario contar con
un espacio virtual en internet donde sea capaz de colocar todos los materiales de su curso, enlazar,
otros, incluir foros, wikis, recibir tareas de sus alumnos, desarrollar tests, promover debates, chats,
obtener estadísticas de evaluaciones y uso, entre otros recursos que crea necesarios.

(S/A, 2016)

Oferta academia

Tal y como su nombre lo indica permite definir la oferta académica, entendiendo por oferta
académica la composición de los planes de estudio y de las asignaturas que el preescolar, primaria
y secundaria está en disposición de impartir docencia.

(Ledezma, 2015)

Horarios

Los horarios para nuestra página web son a cualquier hora, ya que los alumnos pueden entrar a
nuestra página web en cualquier instante y desde cualquier sitio para que no se les dificulte, o por
si sucede algún problema con sus equipos de cómputo.

Administración de datos.

Los administradores de sitios web son los responsables de los sitios web de internet.

Se aseguran de que la información del sitio web es correcta, segura y está actualizada. Trabaja
estrechamente con diseñadores y programadores y con los departamentos de ventas y marketing.

Algunos administradores también diseñan y configuran los sitios. Se los conoce también como
administradores web o webmasters.

(S/A, S/A)

14
Referencias
alegsa.com.er, 2018. Alegsa. [En línea]
Available at: http://www.alegsa.com.ar/Dic/requerimiento_de_hardware.php
[Último acceso: 18 diciembre 2018].
Fernandez, A., 2018. la Webera.es. [En línea]
Available at: https://www.lawebera.es/diseno-web/estructura-de-una-pagina-web-estructura-del-diseno.php
[Último acceso: 18 diciembre 2018].
Gomez, S., 2018. lawebdetuvida. [En línea]
Available at: https://lawebdetuvida.com/que-es-una-base-de-datos/
[Último acceso: 18 diciembre 2018].
Latinoamericana, R. G., S/A. Red Grafica. [En línea]
Available at: http://redgrafica.com/El-lenguaje-de-programacion-PHP
[Último acceso: 18 dicembre 2018].
Ledezma, D., 2015. SlideShare. [En línea]
Available at: https://es.slideshare.net/dianaledezma330/qu-es-una-oferta-educativa-metodologia-44335773
[Último acceso: 18 diciembre 2018].
Oracle, S/A. oracle corporation. [En línea]
Available at: https://www.java.com/es/download/faq/whatis_java.xml
[Último acceso: 18 diciembre 2018].
Porto, J. P., 2012. definicion.de. [En línea]
Available at: https://definicion.de/horario/
[Último acceso: 18 diciembre 2018].
S/A, 2015. La Revista Informatica.com. [En línea]
Available at: http://www.larevistainformatica.com/Lenguaje-programacion-HTML.htm
[Último acceso: 18 dicembre 2018].
S/A, 2016. aprende en linea. [En línea]
Available at: http://aprendeenlinea.udea.edu.co/lms/moodle/mod/page/view.php?id=62246
[Último acceso: 18 diciembre 2018].
S/A, 2018. GoDaddy. [En línea]
Available at: https://mx.godaddy.com/help/compatibilidad-en-sistemas-operativos-y-aplicaciones-de-
instalacion-rapida-de-alojamiento-1733
[Último acceso: 18 diciembre 2018].
S/A, S/A. cidecame. [En línea]
Available at:
http://cidecame.uaeh.edu.mx/lcc/mapa/PROYECTO/libro21/12_definicin_de_administrador_de_base_de_d
atos_dba.html
[Último acceso: 18 diciembre 2018].
Valdes, D. P., 2007. Maestros del Web. [En línea]
Available at: http://www.maestrosdelweb.com/que-es-javascript/
[Último acceso: 18 diciembre 2018].

15
 ENCUESTA A 100 PERSONAS
120

100

80

60

40

20

0
¿Le parece bien
la idea de crear
una pagina web ¿Le gustaria
¿Necesitas un ¿Conoce a
para la editar de ¿Considera ¿Crees que
buscador ¿Recomendaria alguien que
educación a manera sencilla innovadora este tenga futuro
dentro de una este sitio web? necesite de esta
personas de documentos de proyecto? este proyecto?
pagina web? pagina web?
bajos recursos apoyo?
sin ningun
costo?
Si 73 80 66 100 12 71 77
No 27 20 34 0 88 29 23

90 60
80 50
70
60 40
50 30
40 20
30
10
20
10 0
¿Prefieres una pagina web sencilla o
0 interactiva?
¿Prefieres una URL corta o larga?
Corta 84 Sencilla 44

Larga 16 Interactiva 56

100
90
80
70
60
50
40
30
20
10
0
¿Qué buscador prefiere Google o Bing?
Google 89
Bing 12

16
 Encuesta
1. ¿Necesitas un buscador dentro de una página web?

2. ¿Le parece bien la idea de crear una página web para la educación a personas de bajos
recursos sin ningún costo?

3. ¿Le gustaría editar de manera sencilla documentos de apoyo?

4. ¿Recomendaría este sitio web?

5. ¿Conoce a alguien que necesite esta página web?

6. ¿Considera innovador este proyecto?

7. ¿Crees que tenga futuro este proyecto?

8. ¿Prefieres una URL corta o larga?

9. ¿Prefieres una página web sencilla o interactiva?

10. ¿Qué buscador prefiere Google o Bing?

17
 Entrevista
1. ¿Cuál es el mejor lenguaje para hacer una página web?

2. ¿Qué lenguajes conoce para crear páginas web?

3. ¿Cada cuánto tiempo debe darle mantenimiento a una página web?

4. ¿Cuánto cobran aprox. por crear una página web?

5. ¿Qué buscador es más recomendable tener en una página web?

6. ¿Cómo se le hace mantenimiento a una página web?

7. ¿Cree que las páginas web son un medio de comunicación?

8. ¿Cree que la página web llegue al público deseado?

9. ¿Mejoraría algo de los lenguajes que se utilizan para hacer páginas web?

10. ¿Cómo se imagina las páginas web en 20 años?

18