Unidad Educativa Particular SOFOS

Proyecto Demostrativo de Grado

Tema: Elaboración de una página web para el fortalecimiento de un

estudio en base a una carrera informática

Trabajo de investigación previo a la obtención del título Bachiller en

Tecnico en Informática

Autor(A):

Tutor:

Guayaquil-Ecuador

2020

1
2
 Caso sugerido para el Proyecto Demostrativo para grado

Bachillerato Técnico en la Figura profesional

Informática

Período Costa 2020-2021

Institución Educativa:
Apellidos y nombres de los estudiantes:
Unidad Educativa Particular Sofos

TEMA DEL PROYECTO:

Elaboración de una página web para el fortalecimiento de un estudio en base a una carrera

informática.

DESCRIPCIÓN Y TAREAS PARA DESARROLLAR:

Objetivo General

Todos sabemos por lo que estamos pasando ahora por el tema del covid-19 y algunas personas necesitan

adquirir conocimientos sin querer salir de casa o aún lugar en específico y por eso son la existencia de las

páginas web.

Objetivos específicos

Desarrollar al Interfaz de nuestra página web mediante código de diseño web donde

realizaremos también una barra de navegación la cual podrá visitar distintas páginas en una sola.

Poner estilos css, como también utilizar Bootstrap para que la página tenga cosas dinámicas

como imágenes personalizadas como colores en las letras, tamaño etc.

Elaborar un bloc donde las personas puedan dar sus comentarios acerca de nuestra página web

para ver en que podamos mejorarlo

En este proyecto tengo las tareas de desarrollar una página web donde las personas tenga la facilidad
3
de conocer más sobre su carrera acerca de la Informática orientada al diseño web utilizando
PREGUNTA OPCIÓN MÚLTIPLE:

1.- En las circunstancias que estamos viviendo, frente al problema del COVIT-19, ¿Cuáles serán las

ventajas que nos permitirán elaborar páginas Webs?

1.- Es un trabajo que se puede hacer en casas

2.- Los materiales pueden ser descargados de internet

3.- El proceso de subir la página a internet es gratis

4.- La aplicación de temas e información puede ser sacada de nuestro conocimiento o de internet

PREGUNTA OPCIÓN SIMPLE:

2.- ¿Cuál de todos en el encabezado de un archivo Html?

1.- Html

2.-Body

3.-Title

4.-Head

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

Nombre y Apellidos: Lcdo. Guillermo Ronquillo

Teléfono: 0986883183

E-mail: guillermoleon89@gmail.com

Firma del docente responsable:

Nombre y Apellidos del Estudiante:
----------------------------------------
Fecha de entrega:
Fecha de entrega:
4
 Análisis de la Situación Planteada

Identificación de los contenidos o competencias a aplicar

Antecedente y justificación

En mi proyecto de grado lo que vamos a hacer es una página web que va a estar

orientada a los estudiantes de primero y segundo de Bachillerato, que han guiado por el

camino de la rama de la informática que necesitan ayuda en aprender y reforzar más temas

y así poder tener una base sólida cuando lleguen a la universidad.

Nuestro proyecto de página web se basará en los lenguajes enseñados en Bachillerato

pasados que son HTML, Java Script y el Css lenguajes de diseño web sencillo para poder

realizar nuestros primeros pasos en elaboraciones de páginas web.

Html es un lenguaje de marcado de Hipertexto que define el contenido de nuestra

página web donde se trata de un conjunto de etiquetas que nos servirán para proyectar y

definir el texto y otros elementos como imágenes y vídeos

La información que tendrá nuestra página web será contenidos asociados de la rama

informática que se esté necesite para el usuario final.

También debemos tener un gran conocimiento en nuestras ramas de lenguaje y

matemática para la elaboración de nuestra página web.

Ya que hay que tener en cuenta que nuestra página web es una página que quiere dar

información mediante texto ,debemos tener en cuenta la manera formal donde debemos

tener un diccionario de palabras avanzados y sin faltas ortográficas.Las matemáticas en

nuestro proyecto también son importantes ya que al momento de crear una página debe

tener una estructura igualdad y simétrica con las imágenes , para que se ha más amigable

para el usuario final donde tenga todo un orden para un mejor entendimiento ya que

cuando todo está ordenado y especificado llega la información a nuestro cerebro de una

mejor manera y aprender.

5
 Reconocimiento de temas que debe

Reforzar y/o revisar

Marco conceptual

Como ya hemos analizado cual va a hacer nuestro proyecto he tomado temas muy

importantes que hay que reforzar y no tener ningún problema más adelante.

Estilos Css: Saber cada código de diseño para que nuestra página web este bien

decorada y poder modificar los párrafos como el color, el tipo de letra y el

tamaño etc. Sé debe tener un gran conocimiento sobre los estilos css ya que

estos son lo que llevan toda la interfaz gráfica de una página web donde

aprenderemos más para reforzar el tema y al presentar nuestra página web no

tenga errores de diseño

Barras de Navegación <navbar>: Saber sobre el código de nuestra barra de

navegación es de suma importancia desde ahí estarán los subtítulos de los temas

que tendrán mi página web que llevaran las páginas principales y si no tiene una

buena codificación la página web tendría problemas en querer mostrar la otra

página y nos saldrá error y por eso reforzare ese tema.

Reforzar conocimiento sobre Bootstrap: Es una biblioteca multiplataforma o

conjunto de herramientas de código abierto para diseño de sitios y aplicaciones,

donde nosotros con ayuda de esto podremos emplear códigos como iconos,

emoticonos y formas geométricas para una personalización según a nuestro

gusto, pero de una manera más sencillas y sabiendo lo que estamos realizando.

Hosting: Es un alojamiento web es el servicio que provee a los usuarios de

Internet un sistema para poder almacenar información.

Habrá que reforzar estos temas en un común por que de aquí parte que nuestro proyecto

degrado salga bien y es donde las personas podrán ver nuestras páginas de un navegador

6
web para poder reforzar estos temas necesitaremos reforzar mediante bibliografías web o

mediante la ayuda de un profesor afiliado a la materia.

7
 Semana # 1 Semana# 2 Semana#3 Semana#4
Realización del Realización de la primera Realización de la segunda Realización de la tercera Realización de la cuarta
Proyecto parte parte
parte parte

Días en los que se L M M J V S D L M M J V S D L M M J V S D L M M J V S

desarrollaron
Se desarrollo y trabajo la
1ra Parte Identificaciones
contenidas a aplicar
Se desarrollo de pues en
Reconocimientos de
temas a reforzar dentro
de esta parte
Se realizo el orden de los
días de desarrollo.
Planificación de trabajo
Retroalimentación y
revisión de la Primera
Revisión
Segunda parte
Pregunta de opción
múltiple
Tercera parte, Detallar y
Reflexionar
Figura profesional
Refuerzo de docencia
para culminación de
proyecto
Segunda revisión
Parte cuatro
Reflexión o explicación de
elaboración de proyecto
detallado.

8
Planificación del Trabajo

9
 Parte 2: Desarrollo de la problemática

Pregunta Opción Múltiple:

¿Qué requisitos solicita el SRI para el registro de una razón? Ver anexo

- Cedula, planilla de servicio básico, correo electrónico y número celular

- Dfsjdfj

- Dsfsdf

- Sdfsd

¿Qué requisitos se necesita para establecer un local de negocios?

- Patentes municipales y permisos de funcionamiento

- Jdckbkdjf

- Fsdgsdfg

- Sdfgsdfg

¿En que escenarios la empresa esta en la capacidad de invertir?

- Cuando sus ingresos son mayores a sus egresos

- Cuando se genera utilidad bruta

- Cuando se genera utilidad neta

¿Qué es la utilidad de una compañía?

10
¿Qué es una microempresa?

- Es aquella que tiene 2 acciones

- Es aquella que tiene socios

- Es aquella que por lo general tiene una formación familiar

¿Qué es un activo?

¿Cuál es la diferencia entre costo y gasto?

¿Cuál es la importancia de un reporte financiero?

- Declarar impuestos

- Conocer el estado de la empresa

- Conocer los ingresos y gastos

- Conocer los valores a invertir

¿Qué es analfabetismo digital?

- Desconocimiento de sistemas operativos

- Desconocimiento de herramientas tecnoloigcas

¿Bajo que artículo de la ley está amparado la devolución de IVA hacia cierto grupo

de personas?

A. Constitución Art ….

B. Ley Orgánica …

C. Registro triburtario…

11
Respuesta: C

Bajo el articulo … de la reforma de… se establñecio … desde el año .,.. el benfficiop …

Un documento Html se compone de 4 partes las cuales tienen un orden en si para todas las

páginas web para que se tenga un control en nuestra página web, donde Html es el inicio y

fin de una página ,head es el encabezado, title es el título y body todo el cuerpo o

desarrollo de la página web.

¿Cómo se conoce al código de menú o barra de navegación en Html?

A. Navbar

B. Background

C. Bgcolor

Respuesta: A

Navbar: Representa una sección de nuestra página web la cual proporcionar los enlaces de

navegación. dentro de nuestra página web actual y poder movernos mediante enlaces en la

misma página web a otra esto nos ayuda mucho ya que funciona como como un

organizador de temas donde podremos ver diferentes cosas a la vez para que las personas

sientan un poco más de interés en el tema y no tengan problemas con buscar los temas.

12
 Tercera Parte Reflexión

Justificación de su proyecto – Con un enfoque en su carrera

Comentario sobre la importancia de la figura profesional

El diseño web , es una rama de la informática que con cada año se hace más popular ,

porque elegí hacer una página web con el fin de que puedo mediante mis conocimientos

adquiridos en primero y segundo de bachillerato realizar un página web y así ayudar a

personas que quieren aprender , donde esto es muy bueno para la comunidad ya que

pueden adquirir e aprender conocimiento o querer solucionar un problema solamente con

buscar la información en un navegador web , muchas empresas como negocios están

realizando sus sitios web para poder dejar información o hacer publicidades en esta misma

y aquí entro yo alguien con conocimientos sobre el diseño web y elaboración de páginas y

ayudar a clientes o usuarios finales para que las persona que quieren saber más sobre algo

lo pueden hacer mediante un navegador web que puede ser usado en un ordenador o un

teléfono móvil sin la necesidad de salir de sus hogares o residencias y esa es la

importancia que tiene las páginas web hoy en día tendrán un gran impacto en esta nueva

generación donde no solo empresas grandes tendrán sus páginas web si no microempresa ,

colegios , hospitales .

Descripción de la aplicación real de la figura profesional

En mi proyecto de grado que estoy realizando un sitio web me está ayudando mucho en mi

camino a la carrera en la informática como una formación en la vida profesional ya que

me está formando a aprender y desenvolverme más en todas las ramas que está se estudian,

esta rama está ayudándome a desempeñarme un poco mejor en cada proyecto realizando

cosas creativas como imágenes , iconos en movimiento , videos tutoriales que hacen

sentir como si estuviera ya en un ámbito profesional o laboral así hacer más creativos con

las cosas que se están detallando . Optimizar la búsqueda el tratamiento de la información

y comunicación mediante el desarrollo de páginas web es muy útil para todas las personas

13
ya que puedes aplicar cualquier detalle a estos mismo , puedes proponer muchas cosas

innovadoras como creativas que pueden ayudar a distintos tipos de personas como por

ejemplos : estudiante de bachillerato, profesores, o personas que quieren aprender más

sobre un tema en concreto donde te le puedes brindar toda esta información al espectador

mediante las páginas web.

14
 Cuarta Parte

Redacción clara de sobre lo que se realizó en cada actividad

Mi proyecto de grado va a estar basado e compilado en un código de programación de

desarrollo web Html, java script, con estilos css y utilizando algunas herramientas mas de

Bootstrap.

Complementar con su marco conceptual el desarrolla de sus actividades

Investigar Instituciones financieras que brindan servicios en línea

Realización de encuestas a grupo específico (Ver anexo 1) Fotos

Se realizaron 10 encuestas en la tercera semana a personas del sector de mucho lote (de la

tercera edad) a personas de entre 18 a 35 años ……

Se le realizaron las siguiente preguntas con el fin de :

Pregunta 1: Ver anexo 2 (El gráfico de pastel de la encuesta tabulada)

Pregunta 2

Análisis del reporte financiero

Análisis de factibilidad para conocer si es rentable la creación de un negocio de desayunos

Análisis para conocer si la empresa está en capacidad de una reinversión

Análisis para conocer si la empresa está en capacidad de una comprar nuevos activos

15
Pregunta 1

Según los datos obtenidos se obtuvo que el 70 % no está de acuerdo con …..

Conocer el estado de ingresos y egresos de la compañía

Buscaron empresa a la cual elaborar el informe financiero

Investigación de requisitos para devolución de IVA

Investigación de informe financiero

Barra de Navegación

Mi sitio web se presentará con un menú o barra de navegación para que se mucho más

dinámica a la vista y hora de buscar los temas que deseas aprender ya que son varias

páginas de códigos Html en una, los códigos que se propusieron para la realización de esta

primera parte fueron:

16
Explicare los siguientes códigos para ver el comprendimiento de mi análisis en la página

web.

Primer Codigo a analizar

<div id="navbar" class="navbar-collapse collapse"> Este el código principal de nuestra

base para la formación de nuestra interfaz de la barra de navegación como el tamaño,

ancho, nuestro tipo de letra, colores etc.

Estas secciones o subdivisiones cumplen la función de orientar a nuestro usuario(a)

conocer y saber como esta distribuida nuestra barra de navegación y puede aprender o

guiarse según sus preferencias.

Por favor visualizar y observar el grafico #1 de la parte de Anexos para tener un mayor

entendimiento sobre los temas a analizar.

li= Este código representa a un ítem en una lista, ya sea ordenada (elemento ol) o no
ordenada (elemento ul)
A href=Que nos permite este es a href, que se utiliza para indicar la URL a la que apunta el

enlace donde utilizaremos nuestras páginas webs.

Esto sería una de las cuatro pestañas que tendrán las cuales servirán para que puedan

comunicarme conmigo si algo que necesite nuestro usuario final o un error ocurrido dentro

de nuestro sitio web.

Por favor visualizar y observar el grafico #3 de la parte de Anexos para poder ver el

resultado final aplicado den este mismo.

En el siguiente código nos ayuda a realizar una sección donde se podrá seleccionar más

casillas como ejemplo un tema donde salgan más subtemas.

Por favor visualizar y observar el grafico # 4 de la parte de Anexos para saber y cuál es el

código que se está aplicando

Repasemos otros codigos

17
Para que sirve los data: Son atributos personalizados los cuales pueden ser creados por un

desarrollador web para aplicarle una funcionalidad o interacción con Javascript o un estilo

mediante CSS.

Pasamos a la introducción de nuestra página web donde daremos conceptos cortos con

imágenes las cuales se la puedan mover con un clic donde las |personas pueden interactuar

un poco más con nuestra página web para la realización de esta misma analizaremos lo

siguientes comando para la elaboración de este caso planteado.

role = "listbox”: Este código nos permite que la personas que este revisando la parte de la

introducción pueda seleccionar uno o más elementos de la lista de.

<Img class="first-slide" src="Img/01.jpg" alt="First slider">

En este código se detalla todo el proceso de la información y las imágenes las cuales sus

significados son los siguientes:

Img: Img representa una imagen en el documento y src es el atributo que indica dónde se

encuentra alojada la imagen que queremos mostrar ya se su nombre como su ubicación

Ubicaremos un breve concepto la cual acompañará con la imagen esto se lo puede hacer el

código <div> o <p> pero en mi caso utilice div ya que define una división. Esta etiqueta

permite agrupar varios elementos de bloque (párrafos, encabezados, listas). Y así

culminamos lo que nuestra interfaz de la introducción en nuestra página web.

Por favor visualizar y observar el grafico # 6 de la parte de Anexos para poder ver el

resultado final aplicando este mismo

Después de haber realizado nuestra interfaz con los comandos enseñados anteriormente

llegamos a la parte donde ubicaremos todo lo esencial que debe saber una persona que

quiera seguir una carrera en informática se realizara en base lo aprendido en años

anteriores y con ayuda de video en grados anteriores como por ejemplo se analizaran

conceptos como y muchos más:

18
H1: es el elemento HTML utilizado, de manera habitual, para identificar la cabecera más

importante en una página web.

P: Es el código más aplicado para la distribución de párrafos.

Font: Este indica el tamaño, color, o fuente del texto que contiene. Sus etiquetas son:

<font> y </font> (ambas obligatorias).

Class: Es una lista de las clases del elemento separada por espacios

Hr: Para separar un texto de otro o podemos utilizar una línea horizontal de un tamaño o un

grosor determinado por yo.

Pasamos a las demás pestañas de mi proyecto web la cual es las curiosidades donde las

personas podrán ver y analizar cosas que uno puede aprender si quiere saber más de lo

normal donde se dan preguntas que personas no conocen y que son importantes conocer.

Por favor visualizar y observar el grafico # 9 de la parte de Anexos para poder ver el

resultado final aplicando este mismo

En la otra sección hablaremos un poco mas sobre mi porque elegí esta carrera mi biografía

y algo mucho más importante en una sección donde los usuarios que quieran visitar mi

página web puedan opinar y poder solucionar algunos inconvenientes que tenga o dudas

sobre la página web.

Por favor visualizar y observar el grafico # 10 y grafico# 11 de la parte de Anexos para

poder ver el resultado final aplicando este mismo

19
 Anexos 1

Gráfico 1

Elaborado por Cristhian Santacruz //Fuente Cristhian Santacruz

Gráfico 2

20
 Elaborado por Cristhian Santacruz //Fuente Cristhian Santacruz

Gráfico 3

Elaborado por Cristhian Santacruz //Fuente Cristhian Santacruz

Gráfico 4

21
 Elaborado por Cristhian Santacruz //Fuente Cristhian Santacruz

Gráfico#5

Elaborado por Cristhian Santacruz //Fuente Cristhian Santacruz

Gráfico#6

22
Elaborado por Cristhian Santacruz //Fuente Cristhian Santacruz

Gráfico#7

Elaborado por Cristhian Santacruz //Fuente Cristhian Santacruz

Gráfico#8

23
Elaborado por Cristhian Santacruz //Fuente Cristhian Santacruz

Gráfico#9

Elaborado por Cristhian Santacruz//Fuente Cristhian Santacruz

Gráfico#10

24
Elaborado por Cristhian Santacruz//Fuente Cristhian Santacruz

Gráfico#11

Elaborado por Cristhian Santacruz//Fuente Cristhian Santacruz

Gráfico#11

Ejemplo de lo que hará en cada uno de los subtemas

25
 Elaborado por Cristhian Santacruz//Fuente Cristhian Santacruz

Anexos 2

Resolución de las tareas planteadas

Una de las tareas planteadas en mi proyecto de grado que se basa en una página web es la

realización de una barra de navegación para esto necesitamos retroalimentación con el

docente, donde se nos explicó el caso que teníamos en duda y con ayudas de videos pude

reforzar más aún mi tema ..

Actualización del proyecto de grado

En la actualización de nuestro proyecto de grado vamos a aplicar la correcciones o

consejos que nuestros docentes nos han dado en a las retroalimentaciones de estos mismo:

Uno de ellos era el título de nuestro proyecto de grado lo cual ya lo he actualizado y en

base a esto he corregido otras cosas como la buena escritura.

Lo cual que el titulo antes era: Diseño de una página web para una base informática.

Y ahora: Elaboración de una página web para el fortalecimiento de un estudio en base a

una carrera informática.

La cual se ve que tiene un mayor detalle de lo que vamos a realiza y un mejor

entendimiento.

En cuanto mi proyecto web se han actualizado algunas cosas como la implementación de la

barra de navegación y un bloc estos fue gracias a las retroalimentaciones que mis docentes

26
me han dado ya que la verdad mi página web iba hacer un poco más simple solo poniendo

el contenido en si ya creemos que es tos concejo fueron muy buenos para que mi proyecto

tenga un evolución o actualización en este mismo.

Antes

Ahora

27
 Retroalimentación con el docente

La Retroalimentaciones que he tenido con mis docentes son para el progreso de mi

proyecto de web como también proyecto demostrativo:

-Mi docente del área informática me ha dado algunas retroalimentaciones sobre unos

códigos en página web lo cual me ayuda mucho con mi progreso ya que conozco más

sobre el tema y lo poder desarrollar más rápido

-También me dieron reatrolimentancion en algunos fallos que tiene mi proyecto de grado

la cual era este el tema ya que no está bien planteado a lo que en verdad queríamos realizar

ya que desde un título la gente se puede dar una idea de cómo va a hacer nuestro proyecto.

-El siguiente punto que me mandaron a corregir fue en el análisis de la situación planteada

el primer tema que es identificación de los contenidos o competencias aplicar donde

explicaba mi proyecto de forma desordenada y con palabras mal utilizadas como también

demasiado averíos repetidos como, por ejemplo: ahora, mas, etc.

Y escribíamos todo en un solo párrafo que cuando uno va a leerlo no capta muy bien lo que

en verdad estamos planteando y describiendo lo que la docente me indico es que cada cosa

que quisiera explicar o argumentar que lo dividiera en secciones o párrafos para que las

personas que vallan a leerlo tengan un buen orden en la explicación y desarrollo del tema

que se está analizando. Ya que es más fácil para el espectador captar los conceptos.

Otro punto que la miss me aclaro en la retroalimentación es como realizar nuestra

planificación de trabajo de como tenemos que ir organizando las cosas que vamos

realizando en nuestro proyecto demostrativo como también anotar las retroalimentaciones

dadas por el docente o sea todos los refuerzos de cómo vamos avanzando como también la

realización de un cronograma de estudio.

28
 Dirección Distrital #7 - Vergeles

UNIDAD EDUCATIVA PARTICULAR

“SOFOS”
Dirección: Mucho Lote I 7ma. Etapa Mz. 2422 S.2
Email: centroeducativosofos@hotmail.com
Telf. 2 894 - 643
Guayaquil – Ecuador

DICTAMEN DE APROBACIÓN DEL PROYECTO DE GRADO

(ESTUDIO DE CASO)

Los abajo suscritos, miembros del jurado dictaminador del Proyecto de Investigación (estudio de
caso) presentado por el alumno: con C.C.: -7 del Tercer Año de Bachillerato, especialidad Tecnico
Informática

Titulado:
………………………………………………………………………………………………………
………………………………………………………………………………………………………
……………………………………………………………………………………………………

Qué, habiendo levantado las observaciones y seguido el procedimiento estipulado para la

aprobación, los miembros del jurado aprueban el proyecto de investigación (Proyecto de Grado)
con nota de ………………. ( ), habilitando al estudiante para continuar con el proceso de
incorporación como Bachilleres de la República.

Dando de este resultado firman: presidente, secretario y vocal, miembros del Jurado Calificador del
proyecto.

 Psic. Eliana Segura Martínez __________________________________

Presidente Jurado Firma

 MSc. Damián Chenche Balladares __________________________________

Secretario Firma

 Econ. Darwin Martínez Zapata __________________________________

Vocal Firma

29
Dado en Guayaquil, a los ………. del mes de……………………………………….... de 20……

30