UNIDAD EDUCATIVA

“SEGUNDO REINALDO CHIRIBOGA RIVERA”

FIP: INFORMÁTICA
PROYECTO DEMOSTRATIVO
TEMA:

Desarrollo de una página web a través de programación HTML y CSS, sobre las
redes sociales más utilizadas indicando ventajas y desventajas.
PROYECTO DE GRADO PREVIO A LA OBTENCIÓN DEL TÍTULO DE BACHILLER EN
INFORMÁTICA

AUTORA:

García Mejía Ela Mabel

ASESORA:
Eco. Génesis Zambrano

FECHA DE ENTREGA:
Febrero, 10, 2021

PERIODO LECTIVO
2020-2021
 2

ÍNDICE DE CONTENIDOS

Contenido

ÍNDICE DE CONTENIDOS.........................................................................................2

Aprobación del tema para el proyecto final del Bachillerato Técnico en Aplicaciones
Informáticas................................................................................................................................4

PRIMERA PARTE........................................................................................................6

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

1.1 Identificación de contenidos o competencias a aplicar....................................6

1.1.1 Objetivos Específicos del Currículo...........................................................6

1.1.2 Competencia General del FIP.....................................................................6

1.1.3 Temas a desarrollarse y que se aplicarán en la resolución del caso

planteado. ....................................................................................................................7

1.1.3.1 Módulos asociados a las Unidades de Competencia...........................7

1.1.3.2 Tronco Común.....................................................................................7

1.2 Reconocimiento de temas a revisar o reforzar.................................................8

1.3 Planificación del trabajo.................................................................................10

SEGUNDA PARTE.....................................................................................................11

2 Desarrollo...............................................................................................................11

2.1 Resolución de las tareas del caso planteado...................................................11

2.2 Actualización de proyecto..............................................................................15

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

2.4 Importancia y aplicabilidad de la Figura Profesional.....................................16

2.4.1 Importancia...............................................................................................16

2.4.2 Utilidad.....................................................................................................16

2.4.3 Aplicación.................................................................................................16
 3

TERCER PARTE.........................................................................................................17

3 Reflexión................................................................................................................17

3.1 Explicación escrita del desarrollo...................................................................17

CUARTA PARTE........................................................................................................19

4 Sistematización......................................................................................................19

4.1 Organización del portafolio de trabajo...........................................................19

Anexos todos los documentos generados durante el desarrollo del caso planteado....19

4.2 Referencias bibliográficas..............................................................................21

 4

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:

García Mejía Ela Mabel Segundo Reinaldo Chiriboga Rivera
TEMA DEL PROYECTO:
Desarrollo de una página web a través de programación HTML y CSS, sobre las
redes sociales más utilizadas indicando ventajas y desventajas.
DESCRIPCIÓN Y TAREAS A DESARROLLAR:
En la realización de la página web, vamos a utilizar la herramienta Notepad ++, para
poder empezar a diseñar como queremos que sea el sitio web, al mismo tiempo ver cómo se
va a distribuir la información para cual se va crear el sitio web.
Dentro de los pasos a ejecutarse, enlistamos los siguientes:
 Buscar la herramienta de desarrollo web adecuada para poder trabajar en HTML
y CSS.
 Diseñar el sitio web, con las etiquetas y sus atributos en HTML, propiedades de
texto CSS, que me vayan a servir en el proceso.
 Seleccionar las imágenes adecuadas para el sitio web, también buscar la
información que se va a publicar.
 Buscar el alojamiento web o hosting, ya que es el espacio de almacenamiento que
necesitamos para guardar los archivos de la página web y que así pueda estar
visible en internet. También, dar el dominio, ya que es la dirección que los
usuarios van a poder escribir en el navegador y así identificar y acceder al sitio
web.
PREGUNTA OPCIÓN MÚLTIPLE:
¿A quién va dirigida la página web?
 A toda la sociedad en común
 A la comunidad estudiantil
 A los administrativos de las instituciones educativas
 A los que solo andan en los sitios web
¿Por qué cambiar o crear el sitio web ahora?
 Conocer qué es lo que ha cambiado actualmente en las redes sociales
 Realizarlo solo por un pasatiempo, donde solo es ubicar información
 Por como la sociedad ha evolucionado en la tecnología

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

 5

Nombre y Apellido: Eco. Génesis Zambrano

Teléfono: __________________________________________

E-Mail: ____________________________________________
Firma docente responsable: Firma estudiante:

Fecha:
Fecha: 10 de febrero del 2021
 6

PRIMERA PARTE

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

Para la página web que deseamos desarrollar, vamos a utilizar la herramienta Notepad
++, la cual es un editor de código fuente gratuito (como en "libertad de expresión") y un
reemplazo del Bloc de notas que admite varios idiomas. Al ejecutarse en el entorno de MS
Windows, su uso se rige por la Licencia Pública General GNU.

Como se ha expresado, este editor no ayudara a cumplir con la propuesta del

proyecto, en otras palabras, publicar la información por el cual se va crear el sitio web, a fin
de que se conozca las redes sociales más utilizadas indicando ventajas y desventajas.

1.1 Identificación de contenidos o competencias a aplicar.

1.1.1 Objetivos Específicos del Currículo

 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.

 Realizar actividades relacionadas con la competencia de la figura profesional de

Informática en escenarios reales de trabajo, siguiendo los procedimientos
establecidos por la entidad colaboradora y aplicando las normas de salud,
seguridad e higiene correspondientes.

1.1.2 Competencia General del FIP

 Optimizar el tratamiento de la información mediante el procesamiento automático,
utilizando lenguajes de programación, bases de datos, herramientas ofimáticas,
redes informáticas, herramientas web, sistemas operativos y soporte técnico;
proponiendo soluciones creativas e innovadoras que respondan a los
requerimientos de los usuarios, aplicando procedimientos y metodologías
informáticas vigentes.
 7

1.1.3 Temas a desarrollarse y que se aplicarán en la resolución del caso planteado.

1.1.3.1 Módulos asociados a las Unidades de Competencia

 Diseño y desarrollo web

Conceptos básicos de web: HTML, Páginas web, Páginas dinámicas, Hojas de estilo,
Tablas, Plantillas (template), Marcos (frames), Hipervínculos locales y externos, Software de
edición de sitios web, Publicador de sitio web, Servidor, Dominio, Alojamiento y
publicación, Solución web, Plataforma web.

Aplicaciones de edición y diseño de soluciones web: Manejadores de contenidos de

imagen, audio y video, Software de edición de páginas web de ambiente privativo y libre.

Evaluación de soluciones web: Facilidad de uso, interactividad, diseño funcional,

tiempo de carga, número de visitantes, creatividad, contenido, Relación costo-beneficio,
Análisis del desempeño y disponibilidad del servidor, Análisis de ancho de banda, Derechos
de autor, Monitoreo de integridad y seguridad, Validación de la solución web.

 Competencias de Diseño y desarrollo web

- UC5 C5.1. Analizar los requerimientos de comunicación y difusión de la

información, considerando parámetros económicos y técnicos establecidos por la
organización o cliente.

- UC5 C5.3. Realizar pruebas de funcionamiento de la solución WEB, verificando

que se cumplen los requerimientos de la organización o cliente.

- UC5 C5.4. Publicar la información en la plataforma WEB, tomando en

consideración las normas éticas y legales vigentes, los requerimientos y
funcionalidades de la organización o cliente.

1.1.3.2 Tronco Común

 Lengua y Literatura

- Lectura y escritura

- Las referencias bibliográficas

- Normas de redacción

- Las normas APA

 8

Estos son todos los contenidos, competencias y destrezas que utilizare en el desarrollo
de mi proyecto demostrativo, los cuales darán veracidad a mi trabajo en el tiempo
programado.

1.2 Reconocimiento de temas a revisar o reforzar.

Los siguientes temas son los que necesito reforzar, ya que, en el transcurso de mi
preparación, son que menos pude entender.

Plantillas (template)

Como indica Yi Min Shum Xie (2019) que una plantilla es:

También conocido como template o theme, en inglés, es una base prediseñada a la

cual se puede personalizar la información básica, imágenes, colores, logotipo, ubicación de
los elementos visuales (….) son diseños realizados por empresas, diseñadores webs,
programadores o agencias; donde su objetivo es vender una especie de licencia de uso;
aunque hay algunas plantillas que son gratuitas, pero con funciones limitadas.1

Esta podria ser una opcion de trabajo rápido, donde solo debemos modificar las partes
que deseamos, como era un tema que no habia visto, el docente me reforzo con una
explicación, basandose a la fuente citada.

Publicador de sitio web

Este tema es indispensable para hacer conocer mi sitio web, por eso el docente me
reforzó el tema basando a la explicación de Mercurio.ugr.es (2021), en lo siguiente:

Una vez que hemos diseñado una página web llega el momento de publicarla en
Internet. Para ello hemos de encontrar alguien que nos aloje la web y que nos ofrezca
servicios adicionales (cuentas de correo, FTP, estadísticas, etc.).

El alojamiento web (en inglés web hosting) es el servicio que provee a los usuarios
de Internet un sistema para poder almacenar información, imágenes, vídeo, o cualquier
contenido accesible vía Web. (…..) Para empezar, es suficiente con registrarnos en
alojamientos gratuitos que nos ofrecen suficiente espacio, aunque cuentan con el
1

Yi Min Shum Xie (Social Media, Marketing, SEO, Marca Personal). (11 de 11 de 2019). ¿Qué es una
plantilla web o template? Obtenido de Yi Min Shum Xie: https://yiminshum.com/plantilla-web-template/
 9

inconveniente de que no nos conceden un nombre personalizado y que en la mayoría de los

casos introducen publicidad.

Si tenemos intenciones más "serias" con nuestra web, podemos registrar un nombre
de dominio y contratar alojamiento de pago (…) El alojamiento web se divide en seis tipos:
gratuitos, compartidos, revendedores, servidores virtuales, servidores dedicados y de
colocación. 2

Servidor, Dominio, Alojamiento y publicación

Este contenido está asociado al anterior, solo que enmarca otros puntos que se debe
tomar en cuenta como lo dice ARUME (DI) (2019) Alojamiento es el lugar donde está
ubicada nuestra página web”3 (pág. 1). Es decir normalmente es un pequeño espacio en el
disco duro de un computador o servidor, que está conectado a internet y esta información
colocada en él puede ser visitada desde cualquier sitio con acceso a la red.

Tambien ARUME (DI) (2019) nos dice que el “Dominio es un nombre fácil de
memorizar que identifica el lugar donde tenemos guardada nuestra página web” (pág. 1).

Solución web, Plataforma web

Una vez obtenida la página debemos saber cómo solucionar inconvenientes, es donde
mi guía me dio a conocer, a través del refuerzo informático, en la siguiente fuente como lo
dice Luisroc.com (2019) “Una plataforma web es más que una página web (…) incluye
elementos adicionales a la página web tales como aplicaciones, carritos de compras,
formularios, convertidores, instancias de aprobación y alguna otra solución específica para
la necesidad del cliente y el mercado”4 (pág. 1).

Mercurio.ugr.es. (1 de 1 de 2021). PUBLICACIÓN WEB. Recuperado el 5 de 2 de 2021, de

PUBLICACIÓN WEB: http://mercurio.ugr.es/pedro/tutoriales/web20/hosting/index.html
3

ARUME (DI). (1 de 4 de 2019). Dominio y alojamiento, ¿qué son? Obtenido de

arume@arumeinformatica.es: https://www.arumeinformatica.es/blog/dominio-alojamiento/
4

Luisroc.com. (19 de 3 de 2019). Plataformas web: soluciones a la medida. Obtenido de

luisroc@luisroc.com: https://luisroc.com/plataformas-web-soluciones-a-la-medida/#:~:text=Una%20plataforma
%20web%20es%20m%C3%A1s,del%20cliente%20y%20el%20mercado.
10
 11

1.3 Planificación del trabajo.

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 Primera parte: Planificación y análisis de                              

la situación planteada:

3 Identificación de contenidos o competencias                                  

a aplicar.

4 Selección de los contenidos y                                  

competencias que van ser indispensables
dentro del proceso del proyecto.

5 Reconocimiento de temas a revisar o                                

reforzar.

6 Planificación del trabajo.                                

7 Segunda parte: Desarrollo                                

8 Resolución de las tareas del caso planteado.                                    

9 Se procedió a trabajar en el diseño de la                                  

página.

10 Actualización de proyecto.                                    

11 Respuesta a pregunta teórica, opción

múltiple
 12

12 Importancia y aplicabilidad de la Figura

Profesional

13 Tercera parte: Reflexión

14 Explicación escrita del desarrollo

15 Desarrollo teórico sobre lo que se hizo

durante el proyectó paso a paso.

16 Cuarta parte: Sistematización

17 Organización del portafolio de trabajo

18 Anexos

19 Referencias

20 Presentación del proyecto de grado al

docente guía
 13

SEGUNDA PARTE

2 Desarrollo

2.1 Resolución de las tareas del caso planteado

En las tareas planteadas desde el inicio de mi proyecto, detallando las descripciones

que realice en la ficha de aprobación del tema, lo primero es haber seleccionado un programa
que me ayude a desarrollar el sitio web o página web, donde me de las comodidades
necesarias. Como resultado de la búsqueda opte por el editor Notepad ++ 7.8.8, que está
escrito en C ++ y utiliza puramente Win32 API y STL, lo que garantiza una mayor velocidad
de ejecución y un tamaño de programa más pequeño.

Anexo 1 Descarga del editor Notepad++ 7.8.8

Al seguir los pasos en la descarga del programa y la instalación, la cual por llevar
algunos que no son complicados, pero por no extender mucha esta explicación, se dejara una
fuente.
FUENTE: https://notepad-plus-plus.org/downloads/v7.8.8/
FUENTE: https://www.youtube.com/watch?v=TRo0MzcSnhA
Una vez instalo el programa en nuestro computador, al momento de ejecutarlo, nos
mostrara una primera hoja ya abierta con el nombre change.log.

Anexo 2 Primera interfaz con el programa

 14

Ya estando dentro del editor de Notepad++, debemos comenzar a trabajar con nuestra
página, pero como antes habíamos mencionado que existen páginas que nos pueden facilitar
plantillas gratuitas, pero con funciones limitadas. Aquí mostramos una página que nos va
ayudar a encontrar la adecuada.

Anexo 3 Sitio de https://html5up.net/

Una vez encontrada la plantilla adecuada, procedemos a descargarla y montarla en el

editor de Notepad++, para poder hacer los cambios que necesitamos y así reflejar lo que al
usuario le va llamar atención.

Anexo 4 Página JÓVENES Cautious

En la realización del sitio web, basándonos en la programación HTML5 y CSS,

pudimos darle la estructura al espacio, con 4 temas sobre las Redes Sociales: Introducción,
 15

Tipos, Ventajas y desventajas de las Redes Sociales. Este trabajo no fue fácil, pero tampoco
imposible, a continuación, les mostramos una la mesa de trabajo (editor HTML).

Anexo 5 Páginas principales dentro del editor Notepad++

También mostramos las divisiones con información dentro de la página.

Anexo 6 Opciones el sitio web

Todo esto lleva un sin número de atributos, etiquetas, que se mostraran en la

Explicación escrita del desarrollo, pero les mostramos las demás partes del Sitio web
“JÓVENES Cautious”.
 16

Anexo 7 Introducción

Anexo 8 Tipos

Anexo 9 Ventajas y Desventajas

 17

2.2 Actualización de proyecto.

En el transcurso que duro este proyecto, la docente guía, siempre estuvo pendiente de
lo que hacía, guiándome en la explicación de la estructura, en los conceptos que se me hacía
difícil de entender, mostrándome donde poder consultar, para poder llenar ese vacío de
conocimientos.

En la supervisión de las partes, tuve correcciones de escritura y ortografía, pero se

pudo solucionar con la buena configuración de Microsoft Word, en la cual se puede utilizar la
herramienta de Ortografía y gramática. Para finalizar agradezco mucho la asesoría de mi
Guía de Proyecto.

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

¿A quién va dirigida la página web?

 A toda la sociedad en común

 A la comunidad estudiantil
 A los administrativos de las instituciones educativas
 A los que solo andan en los sitios web

Por qué es el significado de la respuesta

Si decimos que el origen de internet, o más bien su materialización, fueron los sitios
web ¿Por qué no hacer uso de ellos en vez de mal gastar esa oportunidad que nos brinda la
Informática?

Actualmente tenemos a nuestra disposición algunas herramientas digitales más que

hace 25 años, y el mejor ejemplo de ello son las redes sociales. Pero nos hacemos esta
interrogante, ¿Te has dado cuenta de qué es lo que une a todas ellas? Como respuesta
tenemos La comunicación dirigida a una página web.

Como va dirigida a la Sociedad y la mayoría considera a Facebook la primera red

social, porque ya había otras antes. Facebook consiguió representar al concepto de “social”, y
lo que no sabemos es que esta hasta esta red empezó siendo página web, en conclusión, todas
lo son en esencia.

Lo importante es que la sociedad podrá informase dentro de esta página web, sobre
las redes sociales, sus ventajas y desventajas, que estos sitios nos ofrecen.
 18

2.4 Importancia y aplicabilidad de la Figura Profesional

2.4.1 Importancia

El cambio acelerado, debido a esta revolución teleinformática, nos confunde, cambia

nuestro ritmo y estilo de vida, genera conflictos y nos lleva a situaciones desafiantes.

En el mundo de hoy y del futuro próximo la importancia de los desarrollos

tecnológicos es notoriamente creciente. Cada día dependemos más de nuevas tecnologías y
esto nos confunde porque a veces erróneamente le damos demasiada importancia a las
tecnologías, vivimos para ellas, cuando en realidad son producto de la cultura de nuestra
época, un producto de los humanos para su propio bienestar.

Por lo tanto, la importancia de saber de tecnología puesto que es un mundo lleno de

nuevos y amplios conocimientos que tanto en la vida personal y profesional, cualquier
individuo debe de tener conocimiento ya que facilitara nuestro ritmo de vida, tanto educativo,
profesional, personal, cultural.

2.4.2 Utilidad

Como estudiantes es una opción válida y útil si deseamos o necesitamos

incorporarnos tempranamente al mundo laboral; sin embargo, como egresados en este
bachillerato también estamos preparados para trabajar en sectores priorizados y formar parte
de las agendas zonales de desarrollo.

2.4.3 Aplicación

Los estudiantes que ingresan al mercado laboral, pueden iniciar actividades de

emprendimiento social o económico. Al mismo tiempo durante el proceso formativo,
podemos incorporarnos al campo laboral de forma independiente, asociativa o en relación de
dependencia; y aportar, en su nivel, en las cadenas de producción de bienes y/o servicios de
los diferentes sectores productivos.
 19

TERCER PARTE

3 Reflexión

3.1 Explicación escrita del desarrollo

Para empezar, aclarar como fue el proceso de desarrollo del sitio web, primeramente,
indicar que trabajar en el desarrollo web, no es complicado, solo hay que dedicarse a
investigar, dando fluidez a la curiosidad de este campo de la informática, sin más preámbulo,
empezamos.

Primeramente, se debe buscar una plataforma o editor de código HTML, que pueda
ser útil y a la vez fácil de manejar, ya que dentro de su interfaz debe darnos seguridad y
comodidad, en este caso se escogió el editor Notepad++ versión 7.8.8, por sus referencias.

Una vez obtenida la herramienta, debemos saber que vamos a utilizar Etiquetas y
atributos, e incluso tener a la mano manuales de ¿Cómo crear una página web?, porque será
de mucha utilidad, mostrare unas tablas de algunas de ellas.

Anexo 10 Atributos básicos

Atributo Descripción
Establece un identificador único a cada elemento dentro de una página
id = "texto"
HTML
class = "texto" Establece la clase CSS que se aplica a los estilos del elemento
style = "texto" Establece de forma directa los estilos CSS de un elemento
Establece el título a un elemento (mejora la accesibilidad y los navegadores
title = "texto"
lo muestran cuando el usuario pasa el ratón por encima del elemento)

Fuente: https://uniwebsidad.com/libros/xhtml/capitulo-2/etiquetas-y-atributos

Esta es solo una de las cuantas tablas que contienen muchos atributos para
poder trabajar en el diseño del sitio web.

Anexo 11 Fragmentos de texto

Etiqueta Descripción

<strong> Fragmento de texto importante o palabras clave.

<em> Fragmento de texto enfatizado respecto a la frase que lo contiene.

 20

<mark> Fragmento de texto resaltado, simulando estar marcado con rotulador amarillo.

<i> Fragmento de texto con voz o tono alternativo al resto.

<b> Fragmento de texto sin importancia destacable (fines utilitarios).

<u> Fragmento de texto para nombres propios o escritura incorrecta intencionada (sic).

<s> Fragmento de texto inexacto o que ya no es relevante. (errores o inexactitudes)

<span> Fragmento de texto sin significado (útil para seleccionar).

<cite> Fragmento de texto con el título de un trabajo creativo: obras, libros...

Fuente: https://lenguajehtml.com/html/semantica/etiquetas-html-de-
texto/#fragmentos-de-texto

Así como esta tabla de etiquetas, existen muchas más, en las cuales nos sustentamos
en todo el trabajo. Pero que se hizo para que este trabajo no sea muy tedioso, en las fuentes
antes consultas, se pudo aprender que existen páginas que nos puede facilitar plantillas de
varios diseños, en otras palabras, nos ayudaría un 50% de trabajo, ya que se tiene que ver las
partes que se deben modificar.

De este modo, se resolvió a descargar una plantilla básica para empezar, observando
toda su codificación por partes, y así no poder confundirse. Cuando trabajamos con una
plantilla, esta se encuentra compuestas de varios archivos .html y carpetas que contienen
imágenes, clases, etc., todo esto es para para saber dónde está cada cosa.

Dentro de este orden de ideas, indicamos que se cambiaron títulos, tamaño de letras,
párrafos, imágenes, para lograr mostrar la información que propusimos con nuestro proyecto.

Finalmente se subió la página a un hosting gratuito, que también ya habíamos

explicado anteriormente que es un sitio donde podemos subir todo lo que hicimos, donde se
genera un dominio, con el cual las personas podrán conocer la página, pero demos saber que
como es gratuito, tiene delimitaciones.

Aquí le dejamos el link mi pagina web:

https://danvas03.000webhostapp.com/JovenesCautious/

Muchas gracias
21
 22

CUARTA PARTE

4 Sistematización

4.1 Organización del portafolio de trabajo.

Vamos a mostrar los documentos generados durante el desarrollo del proyecto

demostrativo.

Anexos todos los documentos generados durante el desarrollo del caso planteado
Anexo 12 Estructura del Proyecto Demostrativo

Anexo 13 Aprobación del tema de Proyecto Demostrativo

 23

Anexo 14 Guia-Normas-APA-7ma-edicion

Anexo 15 Jornadas de trabajo

 24

4.2 Referencias bibliográficas

ARUME (DI). (1 de 4 de 2019). Dominio y alojamiento, ¿qué son? Obtenido de

arume@arumeinformatica.es: https://www.arumeinformatica.es/blog/dominio-
alojamiento/

Luisroc.com. (19 de 3 de 2019). Plataformas web: soluciones a la medida. Obtenido de

luisroc@luisroc.com: https://luisroc.com/plataformas-web-soluciones-a-la-
medida/#:~:text=Una%20plataforma%20web%20es%20m%C3%A1s,del%20cliente
%20y%20el%20mercado.

Mercurio.ugr.es. (1 de 1 de 2021). PUBLICACIÓN WEB. Recuperado el 5 de 2 de 2021, de

PUBLICACIÓN WEB:
http://mercurio.ugr.es/pedro/tutoriales/web20/hosting/index.html

Yi Min Shum Xie (Social Media, Marketing, SEO, Marca Personal). (11 de 11 de 2019).
¿Qué es una plantilla web o template? Obtenido de Yi Min Shum Xie:
https://yiminshum.com/plantilla-web-template/