CARRERA:

INGENIERÍA EN TECNOLOGÍAS DE LA INFORMACIÓN

TEMA:

INFOGRAFÍA DE HCI – PROYECTO INTEGRADOR

DOCENTE:

ING. VERONICA MARTINEZ

NIVEL:

CUARTO “A”

ESTUDIANTE:

MOLINA JHOSEPH

MONTEROS KEVIN

PUCO ALDAIR

FECHA:

03/11/2019

SANTO DOMINGO – ECUADOR

Índice

1. Introducción 3

2. Objetivos 3

2.1. Objetivos Específicos 3

3. Desarrollo 3

3.1. ¿Qué es infografía? 3

3.2. ¿Para qué sirve una infografía? 3

3.3. Herramientas de prototipado 4

3.3.1. ¿Qué es Canva? 4

3.4. Distribución de contenido 5

3.4.1. Niveles 5

3.4.1.1. Nivel 1 5

3.4.1.2. Nivel 2 6

3.4.1.3. Nivel 3 7

3.4.2. Talleres 7

3.4.2.1. Ejercicios 7

3.4.2.2. Completar Código 8

3.4.2.3. Corregir Errores 8

4. Conclusión 9

5. Bibliografía 9
 1. Introducción

El desarrollo de herramientas que ayuden a difundir la importancia del proyecto, y una

breve presentación del mismo hace que este tenga un mejor reconocimiento, pues la
importancia de un proyecto siempre estará calificada por los usuarios y sin su
conocimiento del mismo, será de mucha dificultad determinar qué tan buena es su
funcionalidad.
Tomando en cuenta que el proyecto está dirigido plenamente hacia los usuarios que
deseen aprender programación desde 0, el público principal radica entre los jóvenes de
15 a 17 años, quienes están cursando sus primeros años de bachillerato técnico en
informática.
2. Objetivos

Desarrollar una infografía que detalle la funcionalidad del proyecto usando la

información más destacada del mismo, para así lograr obtener un diseño llamativo e
informativo dirigido al público.
2.1. Objetivos Específicos

● Extraer información importante y principal del proyecto

● Seleccionar la herramienta a utilizar para su desarrollo
● Aplicar consistencia, orden y una distribución adecuada en la estructura
● Respaldar su desarrollo mediante un informe teórico-explicativo
3. Desarrollo
3.1. ¿Qué es infografía?

Una infografía es una representación gráfica que respalda una información y permite
traducirla en algo que todo el mundo puede entender a simple vista. Es una herramienta
de comunicación increíblemente útil, ya que, al tener un formato visual, es procesada por
el ojo humano mucho más rápido (40defiebre, 2018).
3.2. ¿Para qué sirve una infografía?

Nos puede servir para mejorar nuestra estrategia de contenidos porque tiene ventajas
significativas frente a otros formatos. Bien construida, simplifica la información que
queremos comunicar y hace más accesible los temas que a priori pueden resultar
complejos de entender (neoattack, 2017).
Es un recurso que es fácil de compartir a través de redes sociales, correo, etc. Las
principales características de una infografía son:
 ● Significado propio: Se utilizan para completar información o para explicar
puntos concretos, sin embargo, toda la infografía debe ser entendible por sí sola.
● Texto reducido: Como he aclarado en la definición, se trata de un recurso gráfico.
No debe llevar grandes párrafos o una gran explicación.
● Coherencia gráfica: La parte gráfica es la más importante en una infografía, por
eso hay que trabajarla bien y de manera conjunta.
● Legibilidad: Aunque tenga poco texto, el que se incluya debe ser fácilmente
entendible tanto en términos de legibilidad como en tipo de lenguaje.
● Linealidad: No quiere decir que se tenga que leer en un sentido concreto, pues
depende del tipo de información que vayas a incluir y de la cantidad de conceptos
(Alba, 2017).
3.3. Herramientas de prototipado

Las herramientas de prototipado son una parte integral del proceso de diseño, ya que
permiten la revisión de los conceptos básicos del proyecto en la etapa inicial de su
desarrollo y compartir opiniones con el resto del equipo.
Para el desarrollo de esta infografía vamos utilizar la herramienta de Canva, esta es
muy usada para el diseño de infografías.

3.3.1. ¿Qué es Canva?

Es un sitio web de herramientas de diseño gráfico simplificada, con una interfaz

atractiva y fácil de usar para cualquier persona, un sitio web con diversas funcionalidades
en la que puedes diseñar posters, infografías, presentaciones, documentos, collages,
portadas, etc (LUCAS, 2017).
 3.4. Distribución de contenido

En esta sección, se detallarán los contenidos que va a tener la infografía. Esto nos sirve
para tener una mejor distribución del contenido a conocer. Esto significa de forma simple
amplificar nuestro contenido para llegar a gente que no conoce sobre la programación
básica, para contarle a partir de contenidos cosas interesantes para ellos.

3.4.1. Niveles

3.4.1.1. Nivel 1

A. ALGORITMIA
a. Definición y características de Algoritmos
Un algoritmo es una secuencia lógica y finita de pasos que permite solucionar un
problema o cumplir con un objetivo (aprende.colombiaaprende, 2018).
Las características fundamentales de un algoritmo son:
● Un algoritmo debe ser preciso e indicar el orden de realización de cada paso.
● Un algoritmo debe estar definido. Si se sigue un algoritmo dos veces, se debe
obtener el mismo resultado cada vez.
● Un algoritmo debe ser finito. el algoritmo se debe terminar en algún momento; o
sea, debe tener un número finito de pasos.
● Un algoritmo debe ser legibles: El texto que lo describe debe ser claro, tal que permita
entenderlo y leerlo fácilmente.
b. Estructura
La estructura de un algoritmo sirve para organizar a los elementos que aparecen en él. En
pseudocódigo, todos los algoritmos tienen la misma estructura, la cual viene definida por
tres secciones:
● Cabecera
● Declaraciones
● Cuerpo (carlospes, 2019).
c. Importancia
Nos permiten diseñar programas o crear diferentes soluciones a ciertos problemas
inicialmente planteados, pues un algoritmo al ser un conjunto de normas o reglas nos
permiten llegar a un resultado si seguimos este proceso (almoritmic, 2012).
 d. Estrategias para solucionar problemas de programación.
Este proceso exige los siguientes pasos:
● Análisis del problema.
● Diseño o desarrollo de un algoritmo.
● Transformación del algoritmo en un programa (codificación).
● Ejecución y validación del programa.
e. Fases en la resolución de problemas.
En esta fase hay los siguientes pasos:
1. Identificar el problema.
2. Describir el problema.
3. Analizar la causa.
4. Soluciones opcionales.
5. Toma de decisiones.
6. Plan de acción.

3.4.1.2. Nivel 2

A. DIAGRAMAS DE FLUJO

a. ¿Qué es un diagrama de flujo?

Describe un proceso, sistema o algoritmo informático. Se usan ampliamente en
numerosos campos para documentar, estudiar, planificar, mejorar y comunicar procesos
que suelen ser complejos en diagramas claros y fáciles de comprender (wiki, 2017).
b. Diseño Algoritmos mediante Diagramas de Flujo y Pseudocódigo
 3.4.1.3. Nivel 3

B. C++
a) Introducción
Es un lenguaje de programación que proviene de la extensión del lenguaje C para que
pudiese manipular objetos.
b) Variables
Es un espacio en la memoria, se puede asignar un valor determinado por el tipo de dato
que el lenguaje de programación va soportar, para declararla es necesario saber qué tipo
de dato la contiene (Aguilar, 2014).
c) Constantes
Son todos aquellos que tienen un valor fijo durante toda la ejecución del programa.
d) Operadores lógicos
Se llaman operadores relacionales o de comparación a aquellos que permiten comparar
dos valores evaluando si se relacionan cumpliendo el ser menor uno que otro, mayor uno
que otro, igual uno que otro, etc.

3.4.2. Talleres

3.4.2.1. Ejercicios

En esta sección va a encontrarse ejercicios para que el usuario pueda interactuar con la

página. Estos van aumentando dependiendo del nivel, en el siguiente ejemplo podemos

ver un ejercicio básico para tener una introducción a un algoritmo.

 3.4.2.2. Completar Código

Aquí se va a centrar en completar código, es decir, en la resolución de este tema se va a

plantear funciones que el usuario debe completar de acuerdo a los requerimientos pide

el problema.

3.4.2.3. Corregir Errores

Aquí se va encontrar códigos a medio hacer, en los cuales el usuario que ya haya

alcanzado este nivel deberá completar los códigos de acuerdo a la sintaxis que

corresponda.
 4. Conclusión

El uso de la infografía como representación para procedimientos informáticos, es de

gran importancia ya que nos permite divulgar información detallada de un proyecto, o

algún otro tipo de investigación en general, al hacer uso de las infografías, logramos

presentar y dar a conocer nuestra propuesta a la población, tomando en cuenta que en

este caso nuestro campo de estudio está definido por ciertas condiciones como lo son

edades, y carreras de secundaria que estén ligadas a las ramas de informática,

5. Bibliografía

40defiebre. (2018). Obtenido de 40defiebre: https://www.40defiebre.com/que-

es/infografia

Aguilar, F. L. (30 de Agosto de 2014). michelletorres. Obtenido de michelletorres:

https://blog.michelletorres.mx/que-es-una-variable-y-como-se-declaran-en-c/

Alba, T. (30 de Agosto de 2017). webempresa. Obtenido de webempresa:

https://www.webempresa.com/blog/que-es-una-infografia.html

almoritmic. (5 de Octubre de 2012). Obtenido de almoritmic:

http://almoritmic.blogspot.com/

aprende.colombiaaprende. (2018). Obtenido de aprende.colombiaaprende:

http://aprende.colombiaaprende.edu.co/sites/default/files/naspublic/curriculos_e

x/n1g10_fproy/nivel1/programacion/unidad1/leccion1.html

carlospes. (2019). Obtenido de carlospes:

http://www.carlospes.com/curso_de_algoritmos/07_00_estructura_de_un_algori

tmo.php

LUCAS, P. (10 de Febrero de 2017). wearemarketing. Obtenido de wearemarketing:

https://www.wearemarketing.com/es/blog/que-es-canva-design-y-como-puedes-

usarlo-para-tu-empresa.html
neoattack. (2017). Obtenido de neoattack: https://neoattack.com/neowiki/infografia/

wiki. (2017). Obtenido de wiki: https://diagramas-de-

flujo.fandom.com/es/wiki/Diagramas_de_Flujo

6. Anexos
 JAK
SI PUEDES IMAGINARLO.
PUEDES PROGRAMARLO

INICIATIVA JAK

NUESTRO PROYECTO
CONSISTE EN LA CREACIÓN DE
IMPLEMENTACIÓN
UN SITIO WEB PARA LA
5
ENSEÑANZA DE
PROGRAMACIÓN BÁSICA,
ORIENTADA A JÓVENES DE 15
A 17 AÑOS QUE ES ESTÉN
CURSANDO SU NIVEL DE
BACHILLER EN UNIDADES
EDUCATIVAS.

PRUEBAS
4

DESARROLLO
3

DISEÑO
2
ANÄLISIS
1

KEVIN MONTEROS

KJMONTEROS@ESPE.EDU.EC
0990767295
ESTUDIANTE DE LA UNIVERSIDAD DE LAS FUERZAS ARMADAS ESPE SD
EN LA CARRERA DE ITIN,

JHOSEPH MOLINA

JAMOLINA11@ESPE.EDU.EC
0992143749
ESTUDIANTE DE LA UNIVERSIDAD DE LAS FUERZAS ARMADAS ESPE SDEN LA
CARRERA DE ITIN,

ALDAIR PUCO

AIPUCO@ESPE.EDU.EC
0939870959
ESTUDIANTE DE LA UNIVERSIDAD DE LAS FUERZAS ARMADAS ESPE SDEN LA
CARRERA DE ITIN,

JAK HTTPS://UAR.ESPE.EDU.EC/
 JAK

RELACIONADO CON EL
PROYECTO
Temática, objetivos, problemática y

población

¿DE QUE TRATA EL

PROYECTO?
El proyecto consiste en orientar a las personas por el
camino de la programación, llevándolos por un
aprendizaje llamativo e interactivo.

¿POR QUÉ SE LO REALIZA?

En muchas ocasiones el estudiar programación al
inicio, puede parecer una tarea difícil. La existencia
de sitios que contengan cursos sobre esta rama
ayudaría a la comprensión de la temática de una
mejor manera que la tradicional.

RELEVANCIA DE LA IDEA
Es importante que existan páginas web, que
permitan instruirse desde la comodidad de
cualquier dispositivo móvil o de escritorio que
contenga información acerca de lo que deseamos
aprender.

¿PARA QUIÉN ESTA

DIRIGIDO EL SITIO?
La principal población a la que deseamos llegar, es a
jóvenes entre los 15 y 17 años que estén empezando
a cursar el nivel de bachillerato, que deseen
aprender programación básica.
 DISTRIBUCIÓN
DEL

CONTENIDO
SI PUEDES IMAGINARLO PUEDES PROGRAMARLO

NIVELES TALLERES

Nivel 1: ALGORITMIA CORREGIR ERRORES

En esta sección se Aquí se encuentran
encuentra ejercicios con errores
información sobre, que requieren ser
cual es el proceso reparados.
para resolver un
problema
secuencialmente,
desde su inicio a su
fin.

NIVEL 2: DIAGRAMAS COMPLETAR CÓDIGO

DE FLUJO En esta parte hay
En este apartado se ejercicios
presenta incompletos que
detalladamente el requieren ser
proceso para diseñar completados.
un diagrama de flujo.

NIVEL 3: C++ EJERCICIOS

En el ultimo nivel, se Este es el último reto
enseña a programar del sitio y consiste en
en lenguaje C++, resolver problemas
aplicando los planteados desde su
conocimientos inicio a su fin.
adquiridos en los
anteriores niveles.