Descripción:
Con este ejercicio se aprendió a realizar y editar una pagina web HTML, ninguna función fue preestablecida con el fin de que se pudiese manejar y crear todos los gráficos colocados en el sitio, la página no tiene un propósito especifico ya que se desea explorar primero la técnica.
A continuación la navegación de este sitio.
Diagrama inicial del proyecto:
 |
| Clic para agrandar imagen |
Proyecto
pagina web: Hacer compras
Explicación:
El consumismo es una problemática actual que deriva de la
expansión de las empresas en trasnacionales y el neoliberalismo, surge como
estrategia de mercado donde se hacen productos poco durables o actualizables en
poco tiempo, con el fin, de que el periodo de vida útil de este sea corto y se
genere la necesidad de adquirir uno nuevo, dicho proceso, origina una mayor
ganancia en capital para las empresas al aumentar la oferta y la demanda. Las
empresas venden sus artículos a territorios tercermundistas, a cambio de,
recibir materia prima barata, tal hecho, se constituye en uno de los obstáculos
que hacen que estas naciones se hagan cada vez más pobres y dependientes de
otras, opuesto de las naciones capitalistas que cada vez adquieren más dinero y
consolidan un imperialismo en todos los ámbitos: político, económico, social y
cultural.
Con las anteriores afirmaciones, el proyecto aborda la
temática de crítica al consumismo, en un contexto actual colombiano donde
existe una brecha social amplia entre ricos y pobres y un poco conciencia
acerca de la transculturización que nos afecta.
Objetivos:
·
Generar intriga en el espectador con el test
y los sonidos.
·
Influenciar en las respuestas del espectador
en algunas partes de la página.
·
Hacer de la web una interfaz interactiva.
·
Elaborar una narración de estructura no
lineal.
·
Expresar coherentemente con el contenido de
la web, la crítica hacia el consumismo.
Descripción:
La narración del proyecto se da en una estructura no
lineal, evidenciada como una historia que no posee un comienzo ni un fin
específico, que evidencia una extensa interacción del visitante con la página y
diversas conclusiones.
En el índex se encuentran cuatro opciones que desarrollan
la idea del proyecto desde tres puntos de vista distintos (en la última opción
se muestran los créditos), representados en imágenes que son la repetición de
la figura de una hamburguesa, donde el público puede elegir cualquier ítem,
accediendo a una historia diferente según el que haya elegido.
En la primera alternativa (hamburguesa superior izquierda)
se presenta una visión realista que es exagerada, con el fin de impactar para ocasionar
una reflexión propia a cada uno de los diferentes espectadores que visiten la
web, se hace uso de preguntas a manera de test donde el visitante se ve
influenciado por el contenido de media para responder, no obstante, existe una
contrariedad entre lo que se desea responder y lo que según la ética y/o moral
de cada quien, debería responder, encontrando links que devuelven a la pregunta
para tomar otra opción y continuar, y links que llevan a determinadas
preguntas, respuestas y textos donde algunos de estos se repiten.
La segunda alternativa (hamburguesa superior derecha)
muestra con sátira una forma graciosa de ver el consumismo y sus efectos,
ridiculizando algunos de sus componentes y símbolos de multinacionales,
funciona también a manera de test pero ya no se buscara influenciar al
visitante, sino originar intriga por la respuesta y/o pregunta que aparecerá
después, algunos links se repiten y llevan a otro camino de diferente opción a
la revisada.
Finalmente la tercera (hamburguesa inferior izquierda) es
una página de mayor interacción donde se usa un referente poco común pero no alejado
del consumismo (en este caso) como lo es el juego, el cual distrae pero no
posee un propósito claro, así como el control que ejercen las trasnacionales
sobre el cliente para comprar y comparar sin un porque determinado, esta
dinámica es para dar a entender la obsesión por el comprar con la analogía del
tiempo que se emplea para jugar y cómo podemos continuar con este sin
importarnos mucho lo que significa.
La pagina consta de un recurso audiovisual amplio,
existen links continuos, algunos repetidos y otros vacios, sin embargo, el contenido
se describe en imágenes, las cuales varias fueron hechas y las restantes
alteradas para respetar derechos de autor; animaciones propias, realizadas en
flash; sonidos para generar mayor atención hacia la web y tablas con textos
correspondientes a las preguntas y opciones de respuestas.
Desarrollo:
La idea del test surge para involucrar de una manera
activa la atención del individuo frente a la web, ocasionando una participación
continua. El test a manera de encuesta se hacia monótono según el criterio de
las personas consultadas, esto condujo a modificar el test y su estructura
principal, con el objetivo de hacer algo explicito pero sin afectar
negativamente a las personas (en el caso de la primera opción), no obstante,
los consultados manifestaron también, un deseo de sátira y metáfora dentro de
los componentes de la web, por lo cual se incluyo este factor. A las imágenes y
sonidos se les agrego el mismo principio de los objetivos de los test. Los
consultados fueron familiares y amigos.
Metodología:
Proceso de elaboración de una imagen (alterar
imágenes):
Esta es la imagen original, la cual es modificada en el
programa photoshop.
1. Se
retira el fondo con la herramienta borrador mágico y se obtiene así la
transparencia de este.
2. Se
hace uso de una segunda imagen, en la que un elemento de aquella, irá en la
primera imagen.
3. A la
imagen anterior, igualmente, se eliminara el fondo y otros componentes
exceptuando la pistola, ya que dicho elemento es el que se copiara.
4. Se
modifica el tamaño de la imagen para lograr su correcto acoplamiento con la inicial.
5. Se
selecciona la imagen con la herramienta marco de selección.
Clic para agrandar imagen
Proceso de creación de pagina HTML:
1.
Se
crea una página nueva en el sitio definido, (en guardar como se da el nombre a
esta)
2. Se
inserta la imagen de fondo en propiedades de la página y se agrega la opción
repeat.
3. Con
el fondo, en insertar se elige la opción elementos de diseño, DIV PA.
4. Dentro
del recuadro, se inserta la imagen de la hamburguesa.
5. Se
escribe el nombre alternativo para la imagen.
6. Se
selecciona la imagen y se añade el vínculo en las propiedades, el vínculo debe
ser una página ya existente y escrito correctamente para su acceso.
A continuación se muestra un vídeo de la navegación del ejercicio, posee errores debido a que no se terminaron algunas paginas y algunos enlaces. En este enlace descarga el vídeo para verlo en alta definición.
https://mega.co.nz/#!IIhQXQTa!ZW3Pb10PDCqLpORZ2n9og1kF45tfNa1HQyihVIWE8-k
Clic para agrandar imagen
A continuación se muestra un vídeo de la navegación del ejercicio, posee errores debido a que no se terminaron algunas paginas y algunos enlaces. En este enlace descarga el vídeo para verlo en alta definición.
https://mega.co.nz/#!IIhQXQTa!ZW3Pb10PDCqLpORZ2n9og1kF45tfNa1HQyihVIWE8-k
No hay comentarios:
Publicar un comentario