REPÚBLICA BOLIVARIANA DE VENEZUELA

MINISTERIO DEL PORDER POPULAR PARA LA

EDUCACIÓN UNIVERSITARIA CIENCIA Y
TECNOLOGÍA
INSTITUTO UNIVERSITARIO POLITÉCNICO
“SANTIAGO MARIÑO”
EXTENSIÓN MATURÍN

SITIO WEB DEDICADO AL CULTOR POPULAR JUAN ANTONIO “EL

INDIO” HERNÁNDEZ PARA PROMOVER EL FOLKLORE
VENEZOLANO EN EL INSTITUTO DE LA CULTURA
DEL ESTADO MONAGAS (ICUM)

Trabajo de Recuperación de Índice Presentado como Requisito Indispensable para

Optar al Título de Ingeniero de Sistemas

Autor: Br. Alfredo Brito

Tutora: Ing. María Aguilera

Maturín, febrero de 2018

 REPÚBLICA BOLIVARIANA DE VENEZUELA
MINISTERIO DEL PORDER POPULAR PARA LA
EDUCACIÓN UNIVERSITARIA CIENCIA Y
TECNOLOGÍA
INSTITUTO UNIVERSITARIO POLITÉCNICO
“SANTIAGO MARIÑO”
EXTENSIÓN MATURÍN

ACTA DE EVALUACIÓN DEL TRABAJO DE RECUPERACIÓN DE ÍNDICE

Quien suscribe, Ing. María Aguilera Titular de la Cédula de Identidad Nº 16670565,

en mi carácter de tutor académico del Informe final del trabajo de recuperación de

índice presentado por el bachiller Alfredo Brito, titular de la Cedula de Identidad Nº

XXXXXXXX, como requisito indispensable para optar al título de Ingeniero en la

especialidad de: Ingeniería de Sistemas. Título: Sitio Web dedicado al cultor popular

Juan Antonio “El Indio” Hernández para promover el folklore venezolano en el

Instituto de la Cultura del Estado Monagas (ICUM).

Después de haber realizado la evaluación correspondiente, considero que el mismo

resultó. ________________________.

En la ciudad de Maturín, a los _____ días del mes de _________________ de 2018.

Firma del Tutor Académico

C.I: __________________

ii
 ÍNDICE GENERAL

pp.

ACTA DE EVALUACIÓN ....................................................................................... ii

LISTA DE FIGURAS ........................................................................................... iv
RESUMEN ................................................................................................................... v
INTRODUCCIÓN ...................................................................................................... 1
EL PROBLEMA ......................................................................................................... 3
Planteamiento del Problema ...................................................................................... 3
Objetivos de la Investigación .................................................................................... 4
Objetivo General .................................................................................................... 4
Objetivos Específicos ............................................................................................ 5
RESULTADOS............................................................................................................ 6
Analizar los requerimientos concernientes a la información personal del cultor
popular ....................................................................................................................... 6
Diseño de la Estructura del Sitio Web....................................................................... 8
Creación del Sitio Web............................................................................................ 12
CONCLUSIONES ..................................................................................................... 14
RECOMENDACIONES ........................................................................................... 15
REFERENCIAS ........................................................................................................ 16
ANEXOS .................................................................................................................... 17
A. Sitio Web del Cultor Popular Juan Antonio “El Indio” Hernández ................... 18

iii
 LISTA DE FIGURAS

FIGURA pp.

1 Diagrama de contexto …………………………………………………………….8

2 Estructura hipertextual …………………………………………………………...9
3 Mapa navegacional del sitio web del Cultor Popular…………………………….9
4 Diseño navegacional del sitio web del Cultor Popular ………………………..…10
5 Wireframe del menú Inicio y Acerca De ………………………………………...11
6 Wireframe del menú Galería Fotográfica y Videoteca ………………………….11
7 Wireframe del menú Contacto …………………………………………………..12

iv
 REPÚBLICA BOLIVARIANA DE VENEZUELA
INSTITUTO UNIVERSITARIO POLITÉCNICO
“SANTIAGO MARIÑO”
EXTENSIÓN MATURÍN
INGENIERÍA DE SISTEMAS

SITIO WEB DEDICADO AL CULTOR POPULAR JUAN ANTONIO “EL

INDIO” HERNÁNDEZ PARA PROMOVER EL FOLKLORE
VENEZOLANO EN EL INSTITUTO DE LA CULTURA
DEL ESTADO MONAGAS (ICUM)

Trabajo de Recuperación de Índice

Autor: Br. Alfredo Brito

Tutora: Ing. María Aguilera
Mes, Año: Febrero, 2018

RESUMEN

.
El presente trabajo tiene como objetivo fundamental el desarrollo de un sitio web
como herramienta de apoyo a la difusión de información del cultor Popular “El Indio”
Hernández, a fin de poder promover el folklore venezolano por parte del Instituto de
Cultura del Estado Monagas, a fin de preservar el patrimonio y la memoria histórica de
la nación al potenciar las expresiones culturales del país y el estado. Es por ello que se
siguieron pasos básicos para la creación de sitios web, haciendo en un principio el
análisis correspondiente para luego proceder al diseño del portal estableciendo su
estructura hipertextual, diseño navegacional y de interfaz abstracta, posteriormente
producir el sitio con el uso del lenguaje HTML5, las hojas de estilo en cascada (CSS)
y JavaScript, obteniendo de este modo un elemento multimedia compuesto por textos
e imágenes de forma minimalista. A su vez el portal se creó teniendo en cuenta el
mobile first, en cual se da prioridad a la visualización de estos a través de dispositivos
móviles debido a su creciente demanda en la actualidad al igual que el social media,
empleando el responsive design, y de esta manera poder alcanzar una mayor difusión
de la información.

Descriptores: Portal Web, Mobile First, Social Media. HTML, CSS, Información

v
 INTRODUCCIÓN

Hablando de épocas pasadas, podemos mencionar que desde el año 1492 al año

1800, se dio con la apertura del “Nuevo Mundo” al comercio conducida por la

expansión técnica y militar de países europeos. Luego, en el año 1800 al 2000, se

produjo la integración global dirigida por empresas multinacionales, la máquina de

vapor y los ferrocarriles. Actualmente se está en una época en la cual los individuos

son la fuerza impulsora, y la tecnología definitoria es una red mundial de fibra óptica

que configura una plataforma para múltiples modos de compartir conocimiento y

trabajo sin consideraciones de tiempo, espacio, geografía e idioma.

En cada una de estas épocas, se establece que, la tecnología es la fuerza conductora,

es decir, la globalización es un subproducto del desarrollo tecnológico, y que este es el

factor que impulsa el desarrollo económico, bien sea de un país o de una organización;

entonces los avances tecnológicos han llevado a estas a surgir y desenvolverse de una

mejor manera, y así aumentar y desarrollar mejor su producción y economía.

Hoy día, las grandes organizaciones no son las únicas que han optado por la vía

global, también es cada vez mayor la cantidad de pequeñas empresas que lo hacen. La

globalización es el reconocimiento por parte de las organizaciones, de que estas deben

tener un enfoque global y no un enfoque local. También puede esta ser definida de

muchas maneras, dependiendo de qué nivel se desee analizar, se puede hablar de la

globalización del mundo entero, de un país, industrias específicas, empresas, hasta de

un modelo económico y político.

1
 Al ser los individuos, como se mencionó anteriormente el impulso para una mejor

tecnología, así como también para la administración de las mismas, es necesario señalar

que las grandes empresas e instituciones tanto publicas como privadas hoy día sin

tecnología avanzada, resultaría difícil y casi imposible su progreso, así como también,

sin un personal profesional eficiente y preparado que labore en sus departamentos y/o

áreas de desempeño.

Constituyendo estas las razones, en que las instituciones hacen mas uso cada vez de

la Web a medida que avanza la digitalización de la sociedad. Internet ha abarcado y

seguirá abarcando todos los aspectos de la vida cotidiana, pues la calidad y eficiencia

con la que se proveen los servicios implica necesariamente el uso intensivo e inteligente

de los medios digitales. Con base en esto, surge la necesidad de el Instituto de Cultura

del Estado Monagas de promover la preservación del arte cultural por medio del uso

de este potente medio como lo es Internet, al propiciar y estimular la creación de sitios

y/o portales digitales donde cada cultor pueda destacar sus habilidades y mostrarlas a

cibernautas que deseen ampliar sus conocimientos respecto al tema. Es por esta razón,

que se procede a emplear una serie de pasos y técnicas que permitieron producir un

sitio web personal para el Cultor Popular “El Indio” Hernández quien muestra su

talento con soporte fotográfico y audiovisual.

Por lo tanto, el presente informe, está constituido de las siguientes partes: el capítulo

I denominado El Problema, donde se detalla la situación estudiada y los objetivos de la

investigación. El capítulo II, denominado Resultados, en el cual se muestra el

desarrollo de cada uno de los objetivos específicos indicados en el capítulo anterior.

Finalmente, Conclusiones, Recomendaciones y Anexos.

2
 CAPÍTULO I

EL PROBLEMA

Planteamiento del Problema

La cultura popular, considerada como un conjunto de patrones culturales,

manifestaciones artísticas y literarias creadas preferentemente por las clases populares,

emanada directamente del sistema de creencias, valores y tradiciones de un pueblo,

surge en cada individuo de manera espontanea y libre sin previa instrucción académica

contrapuesta a una cultura académica y oficial centrada en expresiones culturales

oficiales. Esta es promovida en su mayoría por asociaciones o instituciones publicas

que dan su apoyo para estimular la tradición de una nación.

En Venezuela existen diversos organismos responsables de generar y proyectar los

lineamientos y políticas culturales del estado, además de proteger, rescatar, difundir y

conservar el patrimonio cultural e histórico del país. Dentro de estos se encuentra el

Instituto de la Cultura del Estado Monagas (I.C.U.M), el cual es el órgano rector de las

políticas culturales del estado Monagas adscrito a la gobernación del mismo. Este por

medio que diversas asociaciones del gremio folklorista ha podido coadyuvar al

desarrollo humano en la localidad de manera integral, llegando así a los diversos

cultores populares esparcidos en el estado.

3
 Ahora bien, actualmente se sabe que las Tecnologías de la Información y la

Comunicación han evolucionado en gran medida, y toda la información manejada por

las instituciones u organismos es mostrada a través de la web con fines diversos. De

esta manera se ha entrado en una era donde todo está digitalizado y se puede acceder a

la información en cuestión de segundos siempre y cuando se posea una conexión a

Internet. Con base en esto, resulta de utilidad que todos los datos e información

referentes a un cultor particular puedan ser mostrados por medio de la Web, sirviendo

como medio de difusión masiva que fortalezca la emisión y circulación de este tipo de

información, y así profundizar el sentido de identidad nacional al potenciar las

expresiones culturales del país y la memoria histórica de la nación.

Por lo antes expuesto, se propone realizar un sitio web dedico al cultor popular Juan

Antonio “El Indio” Hernández, quien forma parte de la Asociación de Folklorista del

Estado Monagas (A.S.O.F.O.R.M.O), cuyo talento espera ser promovido y apoyado

por el ICUM quien promueve el uso y aplicación de estas herramientas tecnológicas

para expandir por medio digital la cultura popular venezolana.

Objetivos de la Investigación

Objetivo General

Desarrollar un sitio web dedicado al cultor popular Juan Antonio “El Indio”

Hernández” para promover el folklore venezolano en el Instituto de la Cultura del

Estado Monagas (ICUM)

4
 Objetivos Específicos

1. Analizar los requerimientos concernientes a la información personal del cultor

popular, a modo de que se establezca lo que se comunica a través del sitio web.

2. Diseñar la estructura del sitio web para que se posicionen de forma adecuada los

elementos de navegación en relación a la interfaz del usuario.

3. Crear el sitio web que permita publicar la información personal del cultor popular

Juan Antonio “El Indio” Hernández y así promover el folklore venezolano en el

Instituto de la Cultura del Estado Monagas (ICUM).

5
 CAPÍTULO II

RESULTADOS

Según lo planteado en el capítulo anterior, el objetivo del presente trabajo radica en

desarrollar un sitio web para el del cultor popular Juan Antonio “El Indio” Hernández

y de este modo promover el folklore venezolano por medio de la publicación de

información on-line sobre su vida cultural y artística cuyo medio informativo y de

comunicación presenta está a través de diversos elementos multimedia.

Analizar los requerimientos concernientes a la información personal del cultor

popular

Es necesario tener presente que, desde tiempos pasados la difusión de la información

ha sido de gran ayuda en el mundo de los negocios, cuyo objetivo principal es el de

anunciar al mundo que una determinada organización o empresa cuenta con algo

interesante que ofrecer, es decir, que esta difusión no es más que una forma de

comunicación. En lo que respecta, se debe explotar al máximo esta labor para así poder

tener la mayor base de usuarios posibles y prosperar más en la ejecución de sus

actividades, garantizando así un servicio de calidad que deje a los beneficiarios

satisfechos en gran medida.

6
 Con base en lo anterior, se determina que la información a comunicar por medio del

portal debe ser de interés. Es por ello que está orientada a la vida personal del cultor

pudiendo expresar aquí su trayectoria artística por medio de fotografías y videos según

sus conocimientos y habilidades adquiridos sin instrucción académica, cuyo talento

innato es divulgado por medio de la herramienta desarrollada. Así pues, se definió que

los aspectos esenciales que contiene el sitio on-line, deben estar conformados por una

biografía del cultor, un compendio de fotografías y videos del mismo, por último,

información de contacto y ubicación actual.

Con respecto a esto, se facilita otra fórmula que permite un contacto de mayor

calidad con el público en general, ya que cualquiera puede acceder al sitio por medio

de la web. A su vez se amplían los límites informativos, al poder llegar a cualquier

parte del mundo la información sobre la vida cultural de este artista popular. De igual

modo, se enlazo el sitio a las redes sociales que maneja este, alcanzando así un mayor

rango de difusión de la información.

Según lo antes expuesto se estableció que la creación del sitio se enfoca a mostrar

información permanente. Por lo tanto, y según las necesidades identificadas se pudo

precisar que este sería de tipo estático, donde los cibernautas por medio de un

navegador pueden acceder a este con el uso de un Localizador Uniforme de Recursos

(URL) que no es más que una dirección de internet que al ser encontrada y visualizada

por un navegador muestra un recurso de información al usuario que solicita la

búsqueda, sirviendo como enlace entre el servidor web y la Interfaz Gráfica de Usuario

(GUI). Esto puede apreciarse en el siguiente diagrama de contexto que muestra un

panorama básico de la situación analizada. (Ver figura 1).

7
 Figura 1. Diagrama de Contexto

Diseño de la Estructura del Sitio Web

Una vez representada la funcionalidad del sitio web propuesto se procede a definir

su estructura hipertextual, dicha estructura se refiere a la forma de organización

presentada por los elementos que formarán parte del nuevo medio de difusión, tales

como nodos, los cuales son unidades básicas contentivas de información; enlaces, cuya

función es interconectar los nodos; y los anclajes encargados de marcar el inicio y

destino de cada enlace. La estructura de un hipertexto puede plasmarse mediante una

representación gráfica a fin de facilitar su comprensión, análisis y estudio, además de

ser un instrumento indispensable en las etapas de diseño. Entre los tipos de

organización de información de un hipertexto se encuentran secuenciales, reticulares y

jerárquicas para este diseño se tomó el estilo jerárquico. (Ver figura 2).

8
 Figura 2. Estructura Hipertextual Jerárquica

Mediante esta actividad, se pudo diseñar el mapa de navegación, siendo éste el

modelo del producto a ser desarrollado o una especie de plano del sitio, generando una

lista de las páginas de forma ordenada, teniendo como resultado los enlaces entre los

nodos que conforman los distintos menús de la aplicación. A esto se le conoce también

como mapa del sitio, o para otros efectos carta estructurada. (Ver figura 3).

Figura 3. Mapa Navegacional del Sitio Web del Cultor Popular

La navegabilidad se refiere a la facilidad con la que un usuario puede desplazarse

por todas las páginas que componen un sitio Web, para lograr este objetivo es necesario

proporcionar un conjunto de recursos y estrategias a fin de conseguir un resultado

óptimo en la localización de la información y en la orientación para el usuario. A lo

9
largo de esta actividad se establecieron los distintos componentes que formarán parte

del portal, los vínculos entre ellos y las rutas que habilitarán la navegación por el

hipertexto, para lo cual, se representó mediante un modelo la forma y momento de

visualización de los temas, subtemas y contenidos constitutivos del sitio. (Ver figura

4).

Posteriormente, se procedió a realizar el prototipo o wireframe para representar de

forma sencilla y esquemática la estructura visual del sitio, derivado de cada objeto

previamente identificado, procurando capturar los elementos más importantes a tener

en cuenta para desarrollar la interfaz definitiva. Por lo tanto, el resultado del desempeño

de esta actividad se evidencia en la siguiente imagen, en la cual se muestra la interfaz

abstracta especificando cada elemento detallado en la actividad anterior propia del

diseño navegacional. (Ver figura 5-7, p.15).

Inicio Galería
Acerca De Videoteca Contacto
Fotográfica

Banner Banner Banner Banner Banner

Facebook Facebook Facebook Facebook

Facebook

Figura 4. Diseño Navegacional del Sitio Web del Cultor Popular

10
 Figura 5. Wireframe del menú Inicio y Acerca De

Figura 6. Wireframe del menú Galería Fotográfica y Videoteca

11
 Figura 7. Wireframe del menú Contacto

En las figuras anteriores, puede apreciarse el posicionamiento de cada elemento

dentro de la interfaz gráfica de usuario, teniendo presente que para el menú de Inicio y
Acerca De, el contenido será netamente textual, para la Galería Fotográfica y la
Videoteca, elementos multimedia (Figuras 5,6). El menú contacto contendrá texto y la
imagen de ubicación extraída de Google Maps (Figura 7). El pie de pagina estará
compuesto de enlaces a redes sociales, en este caso Facebook ya que el cultor no
maneja algún otra, además del webmaster.

Creación del Sitio Web

Para el desarrollo del sitio web, se empleó el lenguaje HTML, CSS y JavaScript.

Teniendo en cuenta que la misma se debe ajustar para una buena visualización en

dispositivos móviles como tablets y teléfonos inteligentes, pensando de este modo en

el diseño centrado en el mobile first y otro eje fundamental como lo es el del social

12
media. A su vez, se debe definir el almacenamiento del portal en un servidor web. El

resultado de esta labor se aprecia en el Anexo A. cuyos elementos están íntimamente

relacionados al wireframe que se diseño con anterioridad.

13
 CONCLUSIONES

1. El análisis de los requerimientos concernientes a la difusión de la información

del cultor popular permitió establecer el contenido que debía ser presentado por medio

del sitio, concluyendo también que este seria estático ya que debía proveer de

información permanente por medio de internet, representando mediante un Diagrama

de Flujo de Datos (DFD) de nivel uno, también conocido como diagrama de contexto

la funcionalidad del sitio.

2. El diseño de la estructura hipertextual, navegacional y prototipado de la

interfaz, permitió determinar la manera en cómo se navegaría a través de la misma y

que elementos aparecerían en cada enlace, así como también la forma en que

aparecerán y cual nodo se entrelaza con otro nodo, posicionando estos de forma

apropiada y coherente.

3. La creación del portal se llevó a cabo con el uso del Lenguaje HTML5, CSS3 y

JavaScript, ya que el sitio web requería que sus elementos fuesen mostrados de forma

estática para proporcionar información elemental del Departamento en conjunto con

sus actividades y de esta manera tratar de proveer otro método de difusión de la

información proporcionando así un medio más fácil para conocer las labores de este.

Esto se ve apoyado a su vez en el uso del social media y el mobile first donde se da

prioridad a los dispositivos móviles y redes sociales, el tener en cuenta un diseño

responsivo y adaptativo.

14
 RECOMENDACIONES

1. Estar constantemente en contacto con el Cultor Popular a modo de poder

actualizar la información que este desea mostrar por medio del sitio, y así incluir de ser

posible otros elementos de interés.

2. Revisar el diseño del sitio a modo de poder proveer nuevos esquemas

estructurales o elementos navegacionales que permitan tenerlo funcionando de forma

eficiente y se mantener su calidad informativa.

3. Incentivar a este personaje a que haga uso de otras redes sociales que puedan

ser incorporadas a su portal, al igual que la revisión constante de algún correo

electrónico de modo que pueda contactarse directamente por este medio a través del

sitio web.

4. Añadir una sección de noticias sobre eventos culturales donde el Cultor decida

participar.

15
 REFERENCIAS

Alejandro García (s/f). Clomputech.com. [Página Web en Línea], Diferencias entre

páginas web estáticas y dinámicas, Disponible:
http://www.clomputech.com/paginas-estaticas-vs-dinamicas.html

Instituto Universitario Politécnico “Santiago Mariño”. (2015). Manual para la

Elaboración del Trabajo de Grado (5taed.). Caracas, Venezuela.

Portalhuarpe.com (s/f). Diseño navegacional. [Página Web en Línea], Disponible:

http://www.portalhuarpe.com.ar/medhime20/Navegacional.html

Pressman, R (2002). Ingeniería del software un enfoque práctico. (5aed). Madrid: Mc Graw
Hill.

16
ANEXOS

17
 ANEXO A

Sitio Web del Cultor Popular Juan Antonio “El Indio” Hernández

18