MINISTERIO DE EDUCACIÓN
UNIDAD EDUCATIVA A DISTANCIA
“ELOY ALFARO”
PROYECTO DEMOSTRATIVO
FIGURA PROFESIONAL DE “INFORMÁTICA”
TEMA:
Diseño y desarrollo de una página web de entretenimiento.
Informe de proyecto demostrativo previo a la obtención del título Bachiller Técnico en
INFORMÁTICA
AUTOR/A:
David Alexander Carranza Meza
DOCENTE GUÍA:
ING. JUAN CARLOS POLO
FECHA DE ENTREGA:
Sábado, 06 de febrero del 2022
El Carmen - Ecuador
2020
ÍNDICE DE CONTENIDOS
1 PLANIFICACIÓN Y ANÁLISIS DE LA SITUACIÓN PLANTEADA..........................4
1.1 Identificación de contenidos o competencias a aplicar...............................................4
1.2 Reconocimiento de temas a revisar o reforzar............................................................5
1.3 Planificación del trabajo..............................................................................................6
2 DESARROLLO..................................................................................................................6
2.1 Resolución de las tareas del caso planteado................................................................6
2.2 Actualización del proyecto..........................................................................................7
2.3 Respuesta a preguntas teórica, opción múltiple..........................................................7
2.4 Importancia y aplicabilidad de la figura profesional...................................................7
3 REFLEXIÓN......................................................................................................................7
3.1 Explicación escrita del desarrollo................................................................................7
4 SISTEMATIZACIÓN........................................................................................................8
4.1 Organización del portafolio de trabajo........................................................................8
5 REFERENCIAS..................................................................................................................8
ORTADA APROBACION DEL TEMA PARA PROYECTO FINAL DE BACHILLERATO
TECNICOAÑO LECTIVO 2020-2021
APELLIDOS Y NOMBRE DEL INSTITUCION EDUCATIVA:
ESTUDIANTE: UNIDAD EDUCATIVA A DISTANCIA
David Alexander Carranza Meza “ELOY ALFARO”
TEMA DEL PROYECTO:
Desarrollo y diseño de página web de entretenimiento.
DESCRIPCIÓN:
Se desea diseñar y desarrollar una web sencilla que contenga información específica sobre una
plataforma gamer, la cual se realizará de la siguiente manera:
1) Definir el objetivo de tu página web
2) Crear un mapa del sitio web
3) Definir la plataforma donde se creará la web
4) Estructurar la información y crear los contenidos de la página web
Pregunta de opción múltiple:
¿Cuáles son las ventajas que ofrece las páginas web?
Mayor alcance ya que la página web está diseñada para ser vista en cualquier lugar del
mundo en el que haya Internet.
Se puede crear fácilmente sin necesidad de ningún tipo de programación especial
Su diseño es vistoso ya que incluye imágenes y el texto con el cual queremos informar
a los navegantes.
Responsable de seguimiento del proyecto por parte de la institución educativa:
Nombre y apellido: Ing. Juan Carlos Polo Mantuano
Teléfono: 0969801848
Email: juan-mns2010@[Link]
Firma docente responsable: Firma estudiante:
--------------------------------------------------- ---------------------------------------------------
Firma de aprobación Firma del estudiante
Fecha: Fecha:
1 PLANIFICACIÓN Y ANÁLISIS DE LA SITUACIÓN PLANTEADA
1.1 Identificación de contenidos o competencias a aplicar
Para el presente proyecto se desea diseñar una web sencilla sobre una comunidad dedicada a
los juegos, la cual contenga una tienda virtual y foros con permisos en función a roles
establecidos.
Para la realización de este proyecto “Diseño y desarrollo de página web de
entretenimiento “Se utilizó los siguientes módulos formativos de la figura profesional de
informática:
Módulo 2: Sistemas operativos y redes
Módulo 3: Programación y Bases de Datos
Módulo 4: Soporte técnico
Módulo 5: Diseño y Desarrollo WEB
Los módulos presentados abarcan todo lo que se va a ver en el proyecto empezando sobre los
diferentes sistemas operativos y redes que se usaran, la programación debida con el tipo de
lenguaje en el que se encontrara y la base de datos que se ocupara, así mismo el soporte
técnico es muy esencial en este proyecto ya que además de hacer la página web se dará
soporte a la misma de los posibles errores que presente mientras que al final vendrá la parte
de diseño y de qué manera se va a desarrollar tal página web.
Así mismo dentro de los módulos de las asignaturas del tronco común que están vinculados
con el presente proyecto se puede encontrar los siguientes:
En el área de lengua y literatura con los temas: el acento, como hacer búsqueda eficiente en
internet, el uso de normas APA y desarrollo argumental. Mientras que en el área de
emprendimiento y gestión se dará uso de la delimitación del tema planteado.
1.2 Reconocimiento de temas a revisar o reforzar
Dentro de las temáticas optadas para este proyecto se puede observar dificultad en el tema de
desarrollo argumental porque en si para la estética del proyecto se debe usar un lenguaje más
técnico con palabras entendibles para la persona que va a revisar el proyecto que tenga gran
variedad de términos entendibles para todos o en tal caso la explicación de cada uno de ellos
es la principal dificultad de ahí por el tema de las normas APA revisar un poco para dar unas
adecuadas citas del tema que se va a redactar, además reforzar con las reglas gramaticales de
tal manera evitar repetir palabras en un solo texto o que el texto no sea entendible o pierda
sentido común de la idea principal.
1.3 Planificación del trabajo
4-8 de 11-15 de 18-22 de 25-29 de 1-6 de
Actividad enero enero enero enero febrero
Primera parte: Planificación y análisis de la situación planteada
Identificación de contenidos o
competencias a aplicar
Reconocimiento de temas a revisar o
reforzar
Planificación del trabajo
Segunda parte: Desarrollo
Resolución de las tareas del caso
planteado
Actualización de proyecto
Respuesta a preguntas teóricas, opción
múltiple
Importancia y aplicabilidad de la
figura profesional
Tercera parte: Reflexión
Explicación escrita del desarrollo
Cuarta parte: Sistematización
Organización del portafolio de trabajo
Presentación del proyecto final
DESARROLLO
1.4 Resolución de las tareas del caso planteado
El presente estudio de caso muestra el diseño de una página web desde como es creada hasta
su diseño incorporado en torno al tema planteado de la creación para una comunidad gamer la
cual debe constar con un sistema de tienda, foros y respectivos roles en base a la jerarquía de
autoridad, la cual permitirá manejarse con mayor rendimiento a este grupo de jugadores
quienes iniciaron con una comunidad de servidores de varios juegos para otros jóvenes y así
pueden comprar cosas directamente de la página web e interactuar con los demás miembros,
de tal manera permitiendo contribuir con información que permita el desarrollo y nuevas
ventajas del trabajo en red. Las limitaciones que presenta el proyecto es que al ser un estudio
en el cual se presentara dos tipos de programación en parte avanzada muchos temas serán un
poco complejos de desarrollarlos tales como la implementación de aplicaciones ya que como
se conoce usa un lenguaje conocido como “JavaScript” mientras que la página web “HTML”
A continuación, se muestran elementos relacionados ha ¿qué es una página web? Tipos de
páginas web. Se indicará las herramientas existentes para el desarrollo de una página web.
Finalmente, se muestra la estructura (tema), mapa del sitio y contenido que tendrá la página
en función del tema demostrativo planteado.
¿Qué es una página web?
Podríamos llamar página web al conjunto de información que esta muestre al público en un
espacio creado por un desarrollador.
“Una página de Internet o página Web es un documento electrónico adaptado
particularmente para el Web, que contiene información específica de un tema en particular y
que es almacenado en algún sistema de cómputo que se encuentre conectado a la red
mundial de información denominada Internet, de tal forma que este documento pueda ser
consultado por cualesquier persona que se conecte a esta red mundial de comunicaciones y
que cuente con los permisos apropiados para hacerlo.” (milenium, 2022)
En base a la cita la página web es una red la cual mediante de cierta información específica es
presentada a un público la cual puede ser a nivel mundial como solo para cierto país o sector
determinado.
Tipos de páginas web
Existe una variedad de tipos de páginas web tales como: informativas, de wiki, de juegos,
entretenimiento, sitio web blog, sitio de comunidad virtual, sitios institucionales, entre otros.
Para el estudio de caso se va a usar un tipo de página de comunidad virtual y juegos.
“Un sitio o portal social donde las personas con intereses similares se comunican unos con
otros, normalmente por chat o foros o simples mensajes.” (Migueles, 2022)
Se conoce que un sitio de comunidad virtual es donde las personas pueden interactuar con
otras personas con gustos o actividades similares, como por ejemplo el de nuestro proyecto
los videojuegos.
Herramientas para la creación de páginas web
En la actualidad existe muchas herramientas con las cuales tu puede trabajar para de tal
manera poder realizar el código de una página web además de software que facilitan el
trabajo entre las herramientas más comunes podemos encontrar:
Notepad++: es un software similar a un block de notas, pero con este podrás diferenciar tu
código que estes realizando de tal manera puedes ir guiándote al momento de desarrollar ya
sea la plantilla de la página web con HTML como para el diseño con CSS.
“…es que es una herramienta versátil para la búsqueda y reemplazo fragmentos de texto;
además, es fácil identificar tu código con colores e incluso sugerencias de autocompletar en base
al lenguaje que escojas en tu menú de desarrollo…” (SolucionesCDI, 2022)
Invision Community: Este pertenece a ser un software completo que brinda un panel para
desarrolladoras privado desde donde se realizan los cambios que se vayan a implementar a
una página web, aunque cabe resaltar que es un software pagado.
Estructura y contenido de la página web
Encabezado: en el Header ira un banner de fondo referente al tema de la página (videojuegos)
con la implementación de la ilustración 1.
Ilustración 1 Banner para el encabezado de la página web
Cuerpo: Se implementará varios foros con diferente propósitos y funciones en específicos
como se puede observar en la ilustración 2
Ilustración 2 ejemplo de foros a implementar
Pie de página: en esta parte como diseño se pondrá la ilustración 3 además de redes sociales
de la comunidad y miembros conectados.
Ilustración 3 imagen de fondo de la página web
Extra: ya dividido el tema de la estructura como se tiene planeado hacer también se
incorporará otras aplicaciones y plugin que facilite el uso de la página web para las demás
personas.
1.5 Página web
Para la realización de este proyecto se a tomado en cuenta varios módulos los cuales ya
fueron presentados anteriormente tales como el sistema operativo:
La página web se encuentra en una VPS (Computadora virtual o tipo como un cloud server)
en el cual los datos de este equipo son de 250 de memoria solidad, una memoria RAM de
4GB, FastDll para que las personas se les pueda descargar instantáneamente los archivos
visibles y con referencia a la base de datos la página web trabaja juntamente con PhP Admin
y MySQL para que se puedan guardar cuentas de todos los nuevos usuarios que ingresen a la
plataforma.
Ilustración 4 Información del sistema y base de datos
La implementación del software Invision Comunnity se realiza hacia la raíz
/home/altafruta/[Link], después de ser implementada se podrá cargar un panel para
desarrolladores desde donde nosotros iremos armando la página web con todo lo necesario y
el aspecto de la página se vería como está representado en la ilustración 5 y 6.
Ilustración 5 encabezado default
Ilustración 6 Panel de control para desarrolladores
Y instalado la parte del sistema tocaría revisar la parte de aplicaciones que se van a usar en la
pagina web de tal manera facilite la fluides del mismo por ende se va instalando uno por uno
cada aplicación que se desea incorporar como se puede observar en la ilustración 7 y aquí es
donde interviene el JavaScript con el HTML.
Ilustración 7 Panel de aplicaciones
Y como último punto vendría a ser el código para la plantilla y el diseño web que se le va a
dar para ello lo dividiremos en dos partes en TEMPLATES y CSS como se puede observar en
la ilustración 8. El primero sirve para dar la función que va a realizar cuya opción o
aplicación en la página web al igual de las palabras el orden en el que van a ir ubicadas, las
imágenes títulos entre otros mientras que el CSS es más para lo estético para la parte de
limitar hasta dónde irán ciertas cosas y como estará ordenado o si hay cuadrados de colores
serán o tamaños de las cosas
Ilustración 8 Código del diseño
1.6 Respuesta a preguntas teórica, opción múltiple
¿Cuáles son las ventajas que ofrece las páginas web?
Las ventajas que ofrece la página web es la de realizar compras de artículos virtuales de
manera eficiencia y segura ya que cuenta con un sistema de comprobación y verificación de
datos como se puede observar en la ilustración 9, para que de tal manera tanto el vendedor
como el comprador no salgan perjudicados además de un sistema de foros dependiente del
rango que tenga (según la jerarquía con la que se manejan más beneficios de accesos para
unos que para otros). La página web tiene un alcance global es decir cualquier persona de
cualquier parte del mundo puede acceder a ella e interactuar por que la pagina tiene varios
idiomas implementados. En torno a su diseño es llamativo para todo ese grupo interesado en
la comunidad de videojuegos en línea.
Ilustración 9 sistema de confirmación y verificación
1.7 Importancia y aplicabilidad de la figura profesional
Importancia de la informática en la sociedad red
Una sociedad red en si es construida en base a redes de información (internet) por ende la
informática juega un papel muy importante ya que gracias a esta se puede desarrollar este
tipo de sociedad e ir explorando muchos más ámbitos, pero es cierto muchas personas no
están aún en este grupo y no están muy familiarizados con el internet, mediante la informática
se ha logrado romper barreras tecnológicas, muchos nuevos avances, entre otros.
“…Pero en lo esencial, esto significa que Internet es ya y será aún más el medio de
comunicación y de relación esencial sobre el que se basa una nueva forma de sociedad que ya
vivimos, que es lo que yo llamo la sociedad red. Pese a ser tan importante, Internet es tan
reciente que no sabemos mucho sobre ella…” (Castells, 2001)
Campos de las ciencias donde está inmersa la informática
Como se había mencionado anteriormente la informática es muy importante y esto se puede
ver en la medicina donde a impactado positivamente gracias a los avances tecnológicos que
brindo y de tal manera se pudo desarrollar la salud un ejemplo claro son los “rayos X” no
hubieran sido posibles estos avances sin la informática. De tal manera en el sistema
automotriz en los avances que se han realizado y como se han hecho todo esto gracias a la
informática ya que ayudo a desarrollar la tecnología.
“El desarrollo actual de los sistemas de gestión de la información y el conocimiento para la
dirección en salud, requiere, tanto de los sistemas de información y de las NTIC como de un
profesional, que integre el equipo del primer nivel de dirección en cada entidad, capaz de
administrarlas. El conocimiento no se gerencia sino las condiciones en que éste se comparte y él
debe estar accesible y disponible en forma rápida y segura; sólo así un directivo obtendrá la
eficiencia y eficacia necesaria para su gestión.” (Vidal, 2022)
Beneficios de aprender informática en el siglo XXI
Informática en este siglo abarca muchos ámbitos en general y en si estamos viviendo muchos
cambios tecnológicos por ende aprender informática es comunicarte con todos y esto lo
podemos ver con el internet que mediante él se puede aprender más cosas e ir desarrollando
nuevas ideas tecnológicas además que las nuevas personas que siguen carreras para su vida
verán como ya todo es tecnológico por ende para adaptarse a esta nueva realidad en la que
vivimos.
2 REFLEXIÓN
2.1 Explicación escrita del desarrollo
El proyecto demostrativo desarrollado responde a la figura profesional de informática. Por
tanto, dentro de esa línea se eligió un tema específico que permitió demostrar lo aprendido
durante la etapa de formación media. Dentro de los módulos a elegir estaban: aplicaciones
ofimáticas locales y en línea, Sistemas Operativos y Redes, Programación y bases de Datos,
Soporte Técnico y Diseño y Desarrollo de páginas web.
Por lo expuesto, y en función del tema de este proyecto se eligieron los módulos de sistema
operativos y redes, programación y base de datos, soporte técnico y diseño y desarrollo de
páginas web dado que se creo una pagina desde cero y se siguió todos los módulos desde la
búsqueda de un host para la pagina web hasta el diseño grafico de la misma y por ende se
logró llegar a la temática cumpliendo con los objetivos planteados.
Por otro lado, dentro de las materias del tronco común se consideraron temas como:
redacción y argumentación, acento y las normas APA de las áreas de Lenguaje/literatura y
Gestión Empresarial.
3 SISTEMATIZACIÓN
3.1 Organización del portafolio de trabajo
Figura profesional de informática
Ilustración 10 Figura Profesional de Informática
Materias del tronco común
Ilustración 11 Materias del tronco común
Mapa de la página web
Ilustración 12 Encabezado
Ilustración 13 Foros y aplicaciones
Ilustración 14 Pie de página / footer
4 REFERENCIAS
5 Referencias
Bryan08. (29 de 01 de 2022). Slideshares. Obtenido de SlideShares:
[Link]
Castells, M. (2001). Internet y la sociedad red.
Migueles, M. (27 de 01 de 2022). Mario. Obtenido de Mario:
[Link]
[Link]
milenium. (26 de 01 de 2022). Milenium . Obtenido de Milenium :
[Link]
SolucionesCDI. (27 de 01 de 2022). Solucionescdi. Obtenido de solucionescdi:
[Link]
Vidal, A. D. (29 de 01 de 2022). Scielo. Obtenido de Scielo: [Link]
script=sci_arttext&pid=S0864-34662006000300015