Date post: | 07-Apr-2017 |
Category: |
Education |
Upload: | andrea-cuenca |
View: | 271 times |
Download: | 3 times |
Antecedentes del entorno digital
1900-1980.
Sobre lo que podría ser el Entorno Digital
Entorno digital = Digital Environment
Digital Environment: es un “lugar” simulado a través de la computación,
Digital Communication Environments: redes computacionales
Digital social enviroment: DSE es conocido como redes sociales, social networking
Otros: entornos digitales inmersivos, realidad virtual, realidad aumentada.
Sobre lo que podría ser el Entorno Digital
INFOESFERA
CIBERESPACIO y CIBERCULTURA
ECOSISTEMA DIGITAL
ENTORNO VIRTUAL.
Lo digital –COMO- desde la cibercultura.
Lo digital –COMO- desde la cibercultura.
Lo digital –COMO- desde la cibercultura.
Lo digital –COMO- desde la cibercultura, una mirada de Pierre Levy.
El uso de los dedos para interactuar con el afuera
•Referencia a un sistema de representación binaria, es decir de dos dígitos.
Los números (dígitos) y los objetos que los expresan. Reloj Digital
Señales que son discretas y cuantificadas de forma binaria para convertirlas en información
Sistema de transformación de señales análogas a digitales (discretización)
Plataformas, redes y soportes de información que permiten la aplicación de la lógica y la aritmética binaria para su procesamiento y uso por parte del humano, interviniendo
fenómenos electromagnéticos para su sustento.
Adjetivo usado en la sociedad de la información y el conocimiento para denotar la naturaleza intangible, binaria, cibercultural, hipertextual, de funcionamiento electrónico,
de interfaces en pantalla.
Cibercultura, desde la mirada de Pierre Levy
La cultura que emerge del uso de las Tecnologías de la Información en la vida cotidiana; en la comunicación, en el entretenimiento, en la economía, en el
mercadeo.
Sus características (desde el autor Pierre Levy) INTERACTIVIDAD
HIPERTEXTUALIDADCONECTIVIDAD
Tambien es llamada la tercera Era de la Comunicación:Primera era: LA ORALIDAD
Segunda era: LA ESCRITURATercera era: LA DIGITAL
VOLVER AL DIAGRAMA
Sobre lo que podría ser el Entorno DigitalLa interrelación entre tecnología, economía, arte, ciencia y cultura, en la sociedad de la información.
Sociedad de la información y las comunicaciones
Tecnologías de la información y las comunicaciones
Economías de la información
Ciber-cultura
Medios/ecosistemas digitales de comunicación global
?
?
Jerarquía entre información y conocimiento
VOLVER AL DIAGRAMA
Un vistazo en 9 minutos de los avances tecnológicos desde 1920 a 1980
www.youtube.com/watch?v=kXewcY6l_VA
El entorno, antes del E. Digital
1960
AntecedentesTecnológicos
Antecedentesculturales
AntecedentesTeóricos
cientifícos
19001910 1920 1930 1940 1950 1970 1980
1800
Televisión en blanco y negro Televisión a color
VCR, video grabador en casette Primer editor de textowalkman daguerrotipo Primer computador comercial
El transistor
La pila voltaica Telégrafo El hipertexto
El cable submarinoEl satélite
Los fenómenos electromagnéticosEl futurismo
Transmisión VHF/UHF
Teléfono
La maquina de Jackard Video JuegoCharles Babbage Pop art
El teletipokinestocopio
Un vistazo en 7 minutos del proceso de creación conjunta de la world wide web
www.youtube.com/watch?v=9hIQjrMHTv4
El surgimiento de internet
“La World Wide Web (WWW) o Red informática, web, es un sistema de distribución de documentos de hipertexto o
hipermedios interconectados y accesibles vía Internet. Con un navegador web, un usuario visualiza sitios web compuestos
de páginas web que pueden contener texto, imágenes, vídeos u otros contenidos multimedia, y navega a través de esas
páginas usando hiperenlaces”
Internet y world wide web no son lo mismo
“Internet es un conjunto de ordenadores, computadores, dispositivos moviles, consolas de videojuego, conectados
entre sí a través de una red” no central, que son unidos por medio de diversos protocolos TCP /IP, convergiendo en una
sola red mundial interconectada”
Tomado de Enciclopedia wikipedia y El audiovisual online: vídeo digital interactivo en Internet, Programa de Posgrado Online en Artes Mediales.
Imágenes tomadas de http://www.youtube.com/watch?v=9hIQjrMHTv4
Internet: redes que lo conformaron
Internet
Objetos de la web
Micrositio
+3
Sitio webPágina web
P. aterrizajeLanding
page
+1
+10
Portal webSede web
+20
{ - Red social -}
{ Plataformas E-learnign, RV, video, audio, streaming}
{ Servicios en la nube }
{ Aplicaciones en línea (software) }
{ Buscadores }
{ web Personales }
{ blogs }
SecciónLos Mejores “Sitios” Web
www.awwwards.com
¿Cómo evaluar un sitio web?Comprendiéndolo como objeto,
desde el diseño emocional, de Donald Norman
1. Impresión emocional= Mira y siente/look and Feell
2. Impresión Experiencial.= Hazlo, Vívelo, pruébalo, úsalo
3. Impresión Reflexiva= Deja pasar un momento y piensa en la
impresión emocional que tuviste, la impresión al experimentarlo y lo
que de eso te queda
Suma de criterios de diseño con arquitectura de información de Louis
Rosenfeld y Peter Morville
1. Usabilidad- Que sea usable, que llegues a donde quieres llegar, que encuentres el teléfono o el contacto
dentro del sitio
2. Contenidos- Cumpla la promesa de información mínima, actualizada,
resumida y completa
3. Diseño Unidad visual: que su apariencia sea atractiva y clara
4. Creatividad. No es fácil medirla
Las alternativas de producción webLenguajes Desarrollo web Aplicaciones para
facilitar el desarrollo webHTML – Hipertext media language
PHP -
JavaScript -
Action Script –- ASP (microsoft)
- Pyton
- Ruby
Gestores de contenidos (drupal, word press, joomla….)
Aplicaciones online para crear sitios (wix)
Librerias para desarrollo como Jquery
Anatomía del un objeto webFront-End
Vista de usuario Back-EndVista de
administradorVista de
desarrollador- Secciones (Mapa de
navegación)- IGU/GUI interfaz
- Arquitectura de la información- Dominio URL (nombre o
uniform resource locator)- Contenidos multimedia
- Versión movíl o pc (friendly mobile o responsive)
- Gestor de contenidos
- Directorio de carpetas con:
- El INDEX: archivo de entrada o
portada del sitio - Servidor
- IP
- Base de datos- Código del sitio
- Accesos FTP/SSH
Anatomía del un objeto webFront-End
Vista de usuarioBack-End
Vista de administrador Vista de desarrollador
Ejercicio Final I Corte
Introducción a la creación de sitios web:
OBJETIVO = DISEÑAR UN SITIO WEB, PARTIENDO DE UN SITIO EXISTENTE, EVALUADO CON LOS CRITERIOS DE
EVALUACIÓN VISTOS EN EL MARCO DE ARQUITECTURA DE INFORMACIÓN Y DISEÑO EMOCIONAL
1. Escoger un sitio web que encuentre relacionado con publicidad, analicen las fallas según los criterios vistos y llenen el formulario en línea CLICK AQUÍ.
2. Creen en 20 minutos máximo a mano : los siguientes productos
(cada integrante va trabajando simultáneamente en cada uno)
Mapa Navegación, Arquitectura de información, Recopilación contenidos y textos , Look and Feell diseño-estilo para la unidad grafica:
tipografía, paleta de color, estilo de fotos, uso de sombras, logos
Pasos
Mapa del sitio o mapa de navegación
Arquitectura de información
Look and Feell: diseño-estilo para la unidad grafica de la IGU - GUI
Tipografía: descargar o escoger desde word las del sistemaspaleta de color: entrar a Adobe Kulerestilo de fotos: ilustraciones, fotos realistas, renders, B y N
Crear una cuenta de correo para el grupo, y luego con ella, crear una en wix: http://es.wix.com/website/templates/html/blank/ En WIX, ingresar a plantilla en blanco Y escoger el dispositivo para el que se quiere mostrar PC o Móvil
Dar Click en la opción editar
Adicionar las secciones o páginas con la opción PAGES de acuerdo con el mapa de navegación o mapa del sitio
Continúen con las ediciones de diseño y configuración en la opción DESIGN
Añadan contenidos a cada sección
Luego de crear la página y las secciones, cada uno empieza a trabajar en una sección en bajar o crear los contenidos, editar textos, buscar videos, etc.
Para opciones personalizadas de contenidos header slider tooltips, se pueden encontrar en el APP MARKET, algunas son gratuitas otras no.
Pasos
Herramientas de publicación y “edición básica” Cada 5 minutos dar la opción SAVE para guardar
Para revisar el sitio, dar click PREVIEW
Para aplicar los cambios aplicados en línea dar PUBLISH
Para navegar entre secciones ver el menú PAGES
Pasos
PARA PUBLICAR EL SITIO:
Escoger el nombre o dominio del sitio revisando en GODADDY si el nombre esta disponible. www.co.godaddy.com
Para dominios .co, edu..co y gov,co que son nacionales ur a: www.cointernet.com.co
En el caso de wix, es predeterminado a menos que se tenga uno propio y para esto se tiene que tener una cuenta no gratuita
Pasos
PARA DEFINIR EL POSICIONAMIENTO ORGANICO SEO(google)
Escoger una descripción del sitio para búsquedas y palabras claves con las que se puede asociar contenidos
Meta-Tags. Son etiquetas HTML que se incorporan al header o encabezado y son invisibles pero sirven para que los buscadores la encuentren.
Son datos de referencia: autor, nombre, fecha, palabras clave, descripción,
<head><meta name="description" content="Free Web tutorials"><meta name="keywords" content="HTML,CSS,XML,JavaScript"><meta name="author" content="Hege Refsnes"><meta charset="UTF-8"></head>
Pasos
EJERCICIO INTRODUCCIÓN CORTE 1I. Diseño de infografías
En grupos de 3:
Escoger una temática de los antecedentes como
{ MOVIMIENTO ARTE } { PERSONAJE } { TEORIA} { DISPOSITIVO}
del 1900 a 1980 que influenciaron el entorno digital y encontrar ejemplos concretos, (culturales, sociales, económicos, tecnológicos)
EJEMPLOS DE INFOGRAFIAS www.behance.net/gallery/Imaginary-Factory/8067551www.pinterest.com/goodmagazine/good-infographics/
http://ernestoolivares.com/services/infographics/
La infografía: objeto de comunicación
digital
IMAGEN + INFORMACIÓN + PARA CONTAR UN HISTORIA
Visualización de datosNarrativas visuales {visual
storrystelling}
http://ernestoolivares.com/infographics/smartphones-brands-on-indian-social-networks/
{ ELEMENTOS DE LA INFOGRAFÍA }
Escoger el tema, la idea a contarDescribir la secuencia narrativa (inicio/climax/descenlace)o los pasos de la Idea
(story board)Pensar la narrativa (secuencia) en el espacio (boceto del espacios)
Buscar y escribir contenidos, estadisticas, cifras las referencias
--- Definir Color por tema o para un tipo de contenido
Escojer un fondo acorde al recorrido visualCrear esquemas, graficas, Iconos de referencia>> para relacionar datos
---EVOLUCIONAR: dato > información > conocimiento
-contextualizar con ejemplos, citas y deducciones al observador { del dato a la información}
-invitar al usuario a la experiencia: reflexionar, a experimentar o a probar { de la info al conocimiento}
1 CO
NTEN
IDOS
2 Vi
ISUA
L3.
Apo
rtar a
l c
onoc
imie
nto
{ ELEMENTOS DE LA INFOGRAFÍA }
1 CO
NTEN
IDOS
{ ELEMENTOS DE LA INFOGRAFÍA }2
ViIS
UAL
ACCIÓNPARA
INVITARA LA
EXPERIENCIA
3. A
porta
r al
con
ocim
ient
o
HERRAMIENTAS PARA CREAR INFOGRAFÍAS
ADOBE FLASHPREZZI
VISUALIZA-MECANVA.COMPicktoChart
+ MAS HERRAMIENTAS INFOGRÁFICASwww.creativebloq.com/infographic/tools-2131971
www.usertesting.com/blog/2012/10/23/the-ultimate-wireframing-tools-guide/
El arquitecto de información
ESQUEMA DE TRABAJO
1. Crear un mapa conceptual sobre la evolución de la Web 1.0 a la Web 2.0.
2. Realizar cada una de las acciones del proceso de diseño de infografía.
El copy
Crear textos
El compositor digital
Maqueta la infografía
en el software
Busca los ejemplos
conceptos los ubica en el
espacio