UNIDAD EDUCATIVA

“JOSÉ RAMÓN ZAMBRANO BRAVO”

PROYECTO DE GRADO PREVIA OBTENCIÓN DE:

Título de Bachiller Técnico - Informática

TEMA DE ESTUDIO
Creación de una página web para informar sobre la utilización de las
herramientas ofimáticas libres y privativas.

ESTUDIANTE
Zambrano Cedeño Melanie Salomé

DOCENTE GUÍA
Ángela María Solórzano Ávila

FECHA DE ENTREGA:
Febrero, 10, 2021

EL CARMEN – MANABÍ- ECUADOR

2020 - 2021
ÍNDICE DE CONTENIDOS

Pág.
ÍNDICE DE CONTENIDOS ............................................................................................................................... 1
1. Planificación y análisis de la situación planteada ............................................................................. 3
1.1. Identificación de contenidos o competencias a aplicar ............................................................ 3
1.1.1. Aplicaciones ofimáticas locales y en línea ......................................................................................... 3
1.1.2. Programación y bases de datos .......................................................................................................... 3
1.1.3. Diseño y desarrollo web...................................................................................................................... 3
1.1.4. Lengua y literatura .............................................................................................................................. 3
1.1.5. Matemática ......................................................................................................................................... 4
1.1.6. Educación cultural y artística .............................................................................................................. 4
1.1.7. Emprendimiento y gestión.................................................................................................................. 4
1.1.8. Historia ................................................................................................................................................ 4
1.2. Reconocimiento de temas a revisar o reforzar ......................................................................... 4
1.2.1. Aplicaciones ofimáticas locales y en línea ............................................................................ 4
1.2.2.Programación y bases de datos ........................................................................................................... 5
1.2.3.Diseño y desarrollo web ...................................................................................................................... 6
1.3. Planificación del trabajo............................................................................................................ 7
1.3.1. Cronograma semanal de elaboración de proyecto de grado ............................................... 7
2 Desarrollo .......................................................................................................................................... 8
2.1 Resolución de las tareas del caso planteado ............................................................................ 8
2.1.1 Esquema del sitio Web.......................................................................................................... 8
2.1.2 Esquema de contenido ......................................................................................................... 8
2.1.3Titulares Ilustración página principal e ilustración paginas secundaria ............................................... 9
2.1.4 Código programable y validación.......................................................................................... 9
2.1.6 Pruebas de navegación y revisión ...................................................................................................... 10
2.3. Respuesta a pregunta teórica, opción múltiple ........................................................................... 10
2.4. Importancia y aplicabilidad de la Figura Profesional ................................................................... 11
3 Reflexión ......................................................................................................................................... 12
3.1 Explicación escrita del desarrollo ................................................................................................ 12
4 Sistematización ............................................................................................................................... 15
4.1. Organización del portafolio de trabajo ........................................................................................ 15
4.2. Bibliografía ................................................................................................................................... 20
 2

Aprobación del tema para el proyecto final del Bachillerato Técnico

en Aplicaciones Informáticas
Período 2020-2021

Apellidos/Nombre del estudiante: Institución Educativa:

ZAMBRANO CEDEÑO MELANIE UNIDAD EDUCATIVA “JOSÉ RAMÓN
SALOMÉ ZAMBRANO BRAVO”
TEMA DEL PROYECTO:
Creación de una página web para informar sobre la utilización de las herramientas
ofimáticas libres y privativas.
DESCRIPCIÓN Y TAREAS A DESARROLLAR:
Las herramientas ofimáticas están distribuidas a todo el que quiera utilizarlas además de
su bajo costo es imprescindible al momento de manejar documentos tanto en el trabajo como en
el uso personal. Es por ello que se va a desarrollar una página interactiva que muestre las formas
prácticas de usarla.
1. Aplicar un lenguaje de programación para su creación
2. Desarrollar la estructura de la pagina
3. Aplicar los programas de diseño y complemento
4. Arrancar pruebas y errores
5. Subirla a un servidor Hosting
PREGUNTA OPCIÓN MÚLTIPLE:
MARQUE CON UNA X LA REPUESTA CORRECTA
Microsoft Access es una Herramienta para:
( ) Enviar Correos Electrónicos
( ) Informa de errores en el sistemas
( ) Es el espacio físico donde puedes guardar toda la información de tu página web
Responsable del acompañamiento al proyecto por parte de la institución educativa:
Nombre y Apellido: ÁNGELA MARÍA SOLÓRZANO ÁVILA
Teléfono: 099 690 9127
E-Mail: angelam.solorzano@educacion.gob.ec
Firma docente responsable: Firma estudiante:

Fecha: Fecha:
 3

1. Planificación y análisis de la situación planteada

1.1. Identificación de contenidos o competencias a aplicar

Para la solución del proyecto descrito anteriormente se enlista las siguientes asignaturas

que se desarrollaron en clases desde primer año hasta tercer año de bachillerato en la figura

profesional “Informática”.

1.1.1. Aplicaciones ofimáticas locales y en línea

Procesar información de diferente tipo, utilizando técnicamente las herramientas

ofimáticas locales y/o en línea según los requerimientos establecidos por el usuario.

1.1.2. Programación y bases de datos

Desarrollar sistemas informáticos con lenguajes de programación y base de datos,

aplicando diferentes metodologías según los requerimientos de funcionalidad.

1.1.3. Diseño y desarrollo web

Diseñar y construir soluciones web de nivel intermedio con interfaz amigable, empleando

herramientas multimedia que permitan promocionar la información e imagen de una

organización y/o cliente.

1.1.4. Lengua y literatura

Seleccionar textos, demostrando una actitud reflexiva y crítica con respecto a la calidad y

veracidad de la información disponible en diversas fuentes para hacer uso selectivo y sistemático

de la misma.
 4

1.1.5. Matemática

Producir, comunicar y generalizar información, de manera escrita, verbal, simbólica,

gráfica y/o tecnológica, mediante la aplicación de conocimientos matemáticos y el manejo

organizado, responsable y honesto de las fuentes de datos, para así comprender otras disciplinas,

entender las necesidades y potencialidades de nuestro país, y tomar decisiones con

responsabilidad social.

1.1.6. Educación cultural y artística

Utilizar medios audiovisuales y tecnologías digitales para el conocimiento, el disfrute y la

producción de arte y cultura.

1.1.7. Emprendimiento y gestión

Incentivar el espíritu emprendedor del estudiante desde diferentes perspectivas y áreas

del emprendimiento: comunitario, asociativo, empresarial, cultural, deportivo, artístico, social,

etc.

1.1.8. Historia

Identificar el valor y la pertinencia de las diversas fuentes de información, incluyendo

recursos multimedia, empleadas en la construcción de las narraciones históricas, utilizando

medios de comunicación y TIC, diferenciando la construcción intelectual, de la realidad.

1.2. Reconocimiento de temas a revisar o reforzar

1.2.1. Aplicaciones ofimáticas locales y en línea

• Realizar cálculos matemáticos, estadísticos, lógicos y bases de datos, mediante

procesos y uso de las funciones de una hoja de cálculo.

 5

Análisis

Para la realización de cálculos como son sumas, restas, multiplicación y división se puede

realizar con Microsoft Excel además de poder realizar funciones específicas para la oficina

donde se incluyen comandos especiales para cálculos estadísticos además se informa que

muchas empresas utilizan este programa para llevar el control de facturas así como el control de

personal tanto de sociedades, compañías y hasta instituciones educativas.

• Buscar información en páginas web, utilizando los navegadores más comunes y

aplicando criterios preestablecidos de búsqueda.

Análisis

En este apartado se establecerá soluciones sobre la base que búsquedas donde los

usuarios del sistema Ubutun busquen información en su navegador y que estas queden grabadas

par futuras presentaciones

1.2.2. Programación y bases de datos

• Seleccionar las técnicas adecuadas para solucionar problemas mediante la

codificación y representación de algoritmos y programas.

Análisis

La programación es la forma de resolver problemas matemáticos, de estructura, de

variedad o compromisos cotidianos simplificando de una manera automática los trabajos

encomendados, para esto es necesario una codificación la cual esta cimentada desde sus inicios

con representación gráfica llamados algoritmos que nos ayudan a esquematizarlo y con ello

hacer un borrador de la futura programación; esta programación se realiza con algoritmos una
 6

forma de escritura en código que un programa de computadora reconoce para convertirlo en

resultados visuales y hasta físico posteriormente.

1.2.3. Diseño y desarrollo web

• Utilizar diferentes herramientas multimedia para la generación de procesos de

animación y edición, en concordancia con los requerimientos que se establezcan.

Análisis

En la creación de una página web además de la programación e información contenida para

su visualización también se agregan otras partes que en los actuales momentos se utilizan bastante

además de que su uso llama la atención de los internautas, estas son herramientas adicionales o

conjuntos de programas que incluyen animación, efectos visuales y edición de imágenes para estos

encontramos algunas aplicaciones tanto libre como privativas y que son un complemento perfecto

al momento de la presentación.
 1.3. Planificación del trabajo

1.3.1. Cronograma semanal de elaboración de proyecto de grado

N° ENERO FEBRERO

Sem
3
Semana 4 Semana 5 Semana 1 Semana 2
ACTIVIDADES
V L M Mi J V L M Mi J V L M Mi J V L M Mi

15 18 19 20 21 22 25 26 27 28 29 1 2 3 4 5 8 9 10

1 Inducción y selección del

ámbito, tema y estudio de
caso
2 Esquema del sitio Web y
Wire-frames

3 Esquema de contenido
4 Ilustración página principal
e ilustración paginas
secundaria

5 Código programable y
validación

6 Colocación de contenido
7 Aplicación de ilustración y
diseños invertido

8 Pruebas de navegación y
revisión
9 Lanzamiento y envíos de
motores de búsqueda
10 Revisión
2 Desarrollo

2.1 Resolución de las tareas del caso planteado

2.1.1 Esquema del sitio Web

El propósito de este, es enfocarnos en primer lugar en la planificación y creación de un

sitio, aclarando múltiples dudas y preguntas que se realizaran a lo largo de esta investigación. La

idea principal es la creación de un sitio es el adoptar un enfoque para el diseño de este.

Vamos a crear un sitio como en un enfoque, fresco sin elementos que contrasten entre sí

para la mayor comodidad del visitante con el proceso de poder utilizar todas las herramientas

expuestas de una manera Partes del proceso de diseño que deben ser planeadas.

• Colores

• Logotipo

• Eslóganes

eficaz y con un rendimiento óptimo y fácil de manejar.

2.1.2 Esquema de contenido

Llegó el momento de colocar la información disponible. Tienes el material, fotografías,

estilos, pero ¿de cuántas páginas estamos hablando? El mapa nos servirá de guía para mantener

controlado el desarrollo y mantenimiento del sitio web. El estilo del mapa de web podría verse

así:

• Página principal

• Quiénes Somos

• Productos y Servicios
 9

▪ División Diseño Gráfico

• División Informática

• Noticias o Contacto

2.1.3 Titulares Ilustración página principal e ilustración paginas

secundaria

El principal elemento que dará coherencia al sitio web es utilizar un único estilo para

desarrollar los menús de navegación y titulares. De esta forma, al usuario le será más agradable

navegar por tu web y reconocer en donde se ubica dando un enfoque a la página principal donde

vamos a retornar para comenzar a navegar nuevamente.

2.1.4 Código programable y validación

La creación de nuestro sitio se crea a partir de las aplicaciones de programación orientada

a objectos una programación más amigable y fácil de usar tanto por su diseño como por su

código fuente.

2.1.5 Colocación de contenido

En este punto se realiza la capacidad para organizar todos los archivos de un sitio, la

ubicación de sus páginas e imágenes, elementos de biblioteca, planillas y para conectar con el

servidor principal, que finalmente va a instalar su sitio; cuando carga su sitio, se duplica la

estructura del sitio creado locamente, incluye la organización de páginas e imágenes

individuales, siendo esta tan importante en su sitio: lo datos locales y los datos del servidor

remoto.
 10

2.1.6 Pruebas de navegación y revisión

Con la publicación de la misma. Se debe tener una persona (un web master), que sea la

responsable de redirigir información de los usuarios a otras áreas, y a la vez se encargue de

corregir posibles errores, y de publicar nuevos contenidos, manteniendo la página web

actualizada.

2.3. Respuesta a pregunta teórica, opción múltiple

Pregunta opción múltiple:

Marque con una x la repuesta correcta

Microsoft Access es una Herramienta para:

a) ( ) Enviar Correos Electrónicos

b) ( ) Informa de errores en el sistema
c) ( x ) Es el espacio físico donde puedes guardar toda la información de tu página web
d) ( ) Se utiliza para como editor de texto.

Análisis
Una página web necesita de un sistema de almacenamiento donde se guarde los reportes
solicitudes e información para buscarla de forma ordenada y confiable. Dentro de este podemos
observar que hay algunas herramientas para este procedimiento en la relación a los sitios web los
cuales sirven para:
• Para organizar la información de manera fácil y sencilla dentro de un entorno colaborativo.
• Para mantener las bases de datos integradas a las herramientas de segmentación y envíos
masivos de comunicaciones.
• Para controlar el flujo de información que los usuarios pueden manejar a través de grupos
de visualización.
• Para generar listas o reportes que puedan ser utilizados en las estrategias comunicacionales
de la empresa o en la emisión de resultados y métricas para la toma de decisiones.
• Para llevar un control de las actividades realizadas en la base de datos a través del Log de
Auditoría.
 11

• Para optimizar procesos comunicacionales.

Lo cual ante lo mencionado podemos decir que la respuesta correcta a esta pregunta es: Es el
espacio físico donde puedes guardar toda la información de tu página web

2.4. Importancia y aplicabilidad de la Figura Profesional

La informática tiene múltiples usos, se aplica en todas partes y es la parte elemental para

el uso de las tecnologías a nivel global, pero por supuesto también hacemos uso de ella a nivel

personal en nuestro día a día, Actualmente la informática se utiliza en muchísimas áreas de

nuestra vida diaria: desde las empresas hasta los hogares se utiliza la informática desde gestionar

una compañía hasta hacer la tarea de los estudiantes.

Piensa que todo lo que requiera el uso de un ordenador, por simple que este sea, ya está

haciendo uso de la informática para funcionar esta funciona en el móvil, Tablet, tv, equipo de

música, pulsera de actividad, reuter etc.

La informática también nos ayuda a gestionar las actividades diarias sin la necesidad de

que las personas estén presentes en el lugar como son el control de las luces de los semáforos, y

todo aquello que requiera de la informática para su funcionamiento. Muchos campos científicos

y ámbitos profesionales de todo tipo utilizan con frecuencia tecnologías informáticas que les

permiten avanzar con rapidez en sus estudios como, por ejemplo: La biología, las matemáticas,

la arquitectura, la medicina, la astronomía, la física, la química, la meteorología, las ingenierías,

la geología y la economía, entre otros.

La informática ha comprendido en los distintos sectores de la sociedad y en sus

quehaceres cotidianos. La población adulta, los estudiantes y hasta los niños adoptaron nuevas
 12

aptitudes y actitudes como consecuencia del impacto de la cultura digital en cada una de las

profesiones y labores, en las tareas del hogar y hasta en el sistema educativo.

Las computadoras están en todos lados, y en muchos lugares ya forman parte del paisaje

cotidiano. Así ocurre en terminales, aeropuertos, bancos, supermercados, escuelas y hasta en los

hospitales. Su enorme precisión para procesar y acumular la información las ha convertido en

herramientas indispensables en la mayoría de las actividades del ser humano.

Este último año los estudiantes de mi instrucción y de todo el país hemos dado un paso

gigantesco hacia la forma de como recibir clases pasando de la escritura en el cuaderno y la

presentación de clases presenciales hacia la educación virtual debido a las restricciones de

movilidad, mis compañeros y yo ahora nos vemos por video llamadas y conversamos por

mensajes de voz todo aquello no podría haber sido posible si no estuviera la informática como un

medio oportuno en nuestras vidas la informática ha evolucionado y seguirá evolucionando

haciendo que nuestra forma de vida sea más fácil y al mismo tiempo más dinámica.

3 Reflexión

3.1 Explicación escrita del desarrollo

La creación de la página web se desarrollará en 7 faces modulares que son encaminadas

en forma descendente desde lo básico cruzando por la programación hasta llegar a la

presentación.

Para esto el primer punto se refiere a creación de un esquema que sea fácil de verificar

para que su contenido sea entendible para los visitantes; primeramente, se trabajara en la

aplicación LucidChart donde haremos un mapa de la pagina desde la entrada hasta la salida con

ayuda de diagramas que serán dibujos y conectores, en el siguiente modulo (esquema de

 13

contenido) se diseña la estructura de la página donde se ubica el sentido de la cabecera que será

en forma descendente para esto recurriremos al diseño y con la ayuda de Illustrator Draw una

aplicación que al final nos da un folleto de la combinación de colores forma y escala de la

presentación de nuestra pagina web, el principal diseño y esquema que tenemos en mente es la

ubicación de la pagina principal detonando que en todo es el elemento seguro donde los

visitantes van a captar la atención de su escala de exposición.

Una vez terminado los esquemas y la presentación final de las paginas vamos a

programarlas con la ayuda de JavaScript una programación amigable orientada a objectos POO

que nos ayuda a ser realidad los planificado en los puntos anteriores, esto requiere un

conocimiento medio alto de sistematización con lo cual este módulo estaría alrededor de cuatro

días de codificación para que las entradas y salidas de la paginas estén terminadas no sin antes

denotar las pruebas para los errores de programación priorizarlos para su arreglo, hay que

establecer que solo se esta programando las ventanas del esquema además de la presentación,

pasado este punto se realiza la recolección de información, los cuales vamos a encontrarlos de

diferentes formas.

Una forma de buscar información es en el internet el cual nos proveerá de imagines

audios y videos de las herramientas de ofimáticas tantos privativas como libres toda esta

información la guardaremos en nuestra computadora personal en el disco duro con la opción de

disco D o respaldo para una mayor seguridad en caso de falla del sistema y la distribuimos en

carpetas con los mismos nombres de sus tipos de extensiones. Otra forma de recolectar

información es atreves de libros técnicos especializado en herramientas ofimáticas los cuales son

usados para la colocación de información y como referencia de investigación además de darle un

punto sustancial de veracidad a los que se expone dentro de las páginas. Siguiendo el proceso de
 14

desarrollo de la pagina se sustenta los pasos finales con la colocación de animación estos son

efectos que dan un visto armonioso y actual, estos se colocan con aplicaciones variadas como

son: Bannersnack, Mixeek, Google Web Designer, Hippo Animator los cuales usamos

dependiendo de la animación que necesitamos para cada página pero que en su mayoría usamos

Mixeek ya que es una herramienta gratuita para crear animaciones con HTML y aplicaciones

web animadas interactivas. Se basa exclusivamente en JavaScript, CSS3 y HTML5. Se puede

considerar una alternativa buena, ligera y fácil de usar a las herramientas de animación de pago

bien conocidas.

Una vez que nuestra página web está terminada se comienza con el proceso de

compilación y pruebas de errores que es la fase para detectar los fallos en la programación lo

cual a base de consecuentes replicas vamos componiendo para define lo que queremos que

mostrar al público y finalmente una y como ultima etapa del trabajo consecutivo de este proyecto

se publica con el hosting que tenemos a nuestra disposición además de ubicar las palabras que

coinciden con el tema de herramientas ofimáticas libres y privativas para que los motores de

búsqueda puedan ubicarla cuando se tecleen las palabras.

 15

4 Sistematización

4.1. Organización del portafolio de trabajo

Normas APA (Asociación Americana de Psicología)

 16

APROBACIÓN DEL TEMA PARA EL PROYECTO FINAL DEL BACHILLERATO

TÉCNICO EN APLICACIONES INFORMÁTICAS
Período 2020-2021

Apellidos/Nombre del estudiante: Institución Educativa:

UNIDAD EDUCATIVA “JOSÉ RAMÓN
ZAMBRANO BRAVO”
TEMA DEL PROYECTO:

DESCRIPCIÓN Y TAREAS A DESARROLLAR:

PREGUNTA OPCIÓN MÚLTIPLE:

MARQUE UNA X EN LA PREGUNTA CORRECTA

Responsable del acompañamiento al proyecto por parte de la institución educativa:

Nombre y Apellido:
Teléfono:
E-Mail:

Firma docente responsable: Firma estudiante:

Fecha:
Fecha:

Formato de aprobación del tema para los proyectos técnicos

 17

Guía formativa en la estructura de proyectos

18
 19

Formato de aprobación del tema para los proyectos técnicos

Trabajando en el proceso educativo

 20

4.2. Bibliografía

(Neosystems, 2004)

(Universidad de Murcia , 2012)

(Movidagrafica, Movidagrafica, 2020)

(Movidagrafica, Movidagrafica, 2021)

(tecnoinformatic.com, 2014)

(MINEDUC, s.f.)

(MINEDUC, Secretaria de educación , s.f.)

AMINEDUC. (s.f.). Secretaria de educación . Obtenido de https://educacion.gob.ec/bachillerato-tecnico-

curriculo/

MINEDUC. (s.f.). Secretaria de educación . Obtenido de https://educacion.gob.ec/curriculo-bgu/

Movidagrafica. (2020). Movidagrafica. Obtenido de https://blog.movidagrafica.co/articulo-que-es-un-

esquema-de-contenidos

Movidagrafica. (2021). Movidagrafica. Obtenido de https://blog.movidagrafica.co/articulo-quiero-

vender-publicidad-en-mi-pagina-web

Neosystems. (2004). Neosystems. Obtenido de http://www.neosystems.es/noticias/desarrollo-web-6-

fases-para-el-desarrollo-de-un-proyecto

tecnoinformatic.com. (14 de 05 de 2014). tecnoinformatic.com. Obtenido de

https://tecnoinformatic.com/c-informatica-basica/partes-de-una-pagina-web/

Universidad de Murcia . (2012). Obtenido de https://www.um.es/docencia/barzana/DAWEB/2017-

18/daweb-tema-1-introduccion-html-css.html