Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Proyecto Grado 2020 Tecnico Informatico
Proyecto Grado 2020 Tecnico Informatico
Alumna:
Tutora:
Eco. Génesis Zambrano
Periodo Lectivo:
2020-2021
ÍNDICE DE CONTENIDOS
Contenido
ÍNDICE DE CONTENIDOS.........................................................................................
PRIMERA PARTE........................................................................................................
SEGUNDA PARTE.....................................................................................................
2 Desarrollo...............................................................................................................
2.4.1 Importancia......................................................................................17
2.4.2 Utilidad............................................................................................18
2
2.4.3 Aplicación........................................................................................18
TERCER PARTE.........................................................................................................
3 Reflexión................................................................................................................
CUARTA PARTE........................................................................................................
4 Sistematización......................................................................................................
Anexos todos los documentos generados durante el desarrollo del caso planteado........
21
3
Aprobación del tema para el proyecto final del Bachillerato Técnico en
Aplicaciones Informáticas
Período 2020-2021
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.
4
¿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
E-Mail: ____________________________________________
5
PRIMERA PARTE
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.
6
1.1.3 Temas a desarrollarse y que se aplicarán en la resolución del
caso planteado.
7
1.3 Tronco Común
Lengua y Literatura
- Lectura y escritura
- Normas de redacción
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.
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.
8
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
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
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.
2
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/
9
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).
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).
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
1.5 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 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
11
SEGUNDA PARTE
2 Desarrollo
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.
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 instalado el programa en nuestro computador, al momento de ejecutarlo, nos
mostrara una primera hoja ya abierta con el nombre change.log.
12
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.
13
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, 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).
14
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”.
Anexo 7 Introducción
Anexo 8 Tipos
15
Anexo 9 Ventajas y Desventajas
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.
16
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.
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.
2.4.1 Importancia
17
2.4.2 Utilidad
2.4.3 Aplicación
TERCER PARTE
3 Reflexión
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.
18
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.
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.
19
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.
https://danvas03.000webhostapp.com/JovenesCautious/
Muchas Gracias
20
CUARTA PARTE
4 Sistematización
21
Anexo 13 Aprobación del tema de Proyecto Demostrativo
Anexo 14 Guia-Normas-APA-7ma-edicion
22
Anexo 15 Jornadas de trabajo
23
ARUME (DI). (1 de 4 de 2019). Dominio y alojamiento, ¿qué son? Obtenido de
arume@arumeinformatica.es: https://www.arumeinformatica.es/blog/dominio-
alojamiento/
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
24