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