Download - Introducción al entorno digital
![Page 1: Introducción al entorno digital](https://reader036.vdocumento.com/reader036/viewer/2022081505/58e7b9521a28ab65578b5721/html5/thumbnails/1.jpg)
Antecedentes del entorno digital
1900-1980.
![Page 2: Introducción al entorno digital](https://reader036.vdocumento.com/reader036/viewer/2022081505/58e7b9521a28ab65578b5721/html5/thumbnails/2.jpg)
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.
![Page 3: Introducción al entorno digital](https://reader036.vdocumento.com/reader036/viewer/2022081505/58e7b9521a28ab65578b5721/html5/thumbnails/3.jpg)
Sobre lo que podría ser el Entorno Digital
INFOESFERA
CIBERESPACIO y CIBERCULTURA
ECOSISTEMA DIGITAL
ENTORNO VIRTUAL.
![Page 4: Introducción al entorno digital](https://reader036.vdocumento.com/reader036/viewer/2022081505/58e7b9521a28ab65578b5721/html5/thumbnails/4.jpg)
Lo digital –COMO- desde la cibercultura.
![Page 5: Introducción al entorno digital](https://reader036.vdocumento.com/reader036/viewer/2022081505/58e7b9521a28ab65578b5721/html5/thumbnails/5.jpg)
Lo digital –COMO- desde la cibercultura.
![Page 6: Introducción al entorno digital](https://reader036.vdocumento.com/reader036/viewer/2022081505/58e7b9521a28ab65578b5721/html5/thumbnails/6.jpg)
Lo digital –COMO- desde la cibercultura.
![Page 7: Introducción al entorno digital](https://reader036.vdocumento.com/reader036/viewer/2022081505/58e7b9521a28ab65578b5721/html5/thumbnails/7.jpg)
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.
![Page 8: Introducción al entorno digital](https://reader036.vdocumento.com/reader036/viewer/2022081505/58e7b9521a28ab65578b5721/html5/thumbnails/8.jpg)
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
![Page 9: Introducción al entorno digital](https://reader036.vdocumento.com/reader036/viewer/2022081505/58e7b9521a28ab65578b5721/html5/thumbnails/9.jpg)
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
?
?
![Page 10: Introducción al entorno digital](https://reader036.vdocumento.com/reader036/viewer/2022081505/58e7b9521a28ab65578b5721/html5/thumbnails/10.jpg)
Jerarquía entre información y conocimiento
VOLVER AL DIAGRAMA
![Page 11: Introducción al entorno digital](https://reader036.vdocumento.com/reader036/viewer/2022081505/58e7b9521a28ab65578b5721/html5/thumbnails/11.jpg)
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
![Page 12: Introducción al entorno digital](https://reader036.vdocumento.com/reader036/viewer/2022081505/58e7b9521a28ab65578b5721/html5/thumbnails/12.jpg)
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
![Page 13: Introducción al entorno digital](https://reader036.vdocumento.com/reader036/viewer/2022081505/58e7b9521a28ab65578b5721/html5/thumbnails/13.jpg)
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
![Page 14: Introducción al entorno digital](https://reader036.vdocumento.com/reader036/viewer/2022081505/58e7b9521a28ab65578b5721/html5/thumbnails/14.jpg)
“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.
![Page 15: Introducción al entorno digital](https://reader036.vdocumento.com/reader036/viewer/2022081505/58e7b9521a28ab65578b5721/html5/thumbnails/15.jpg)
Imágenes tomadas de http://www.youtube.com/watch?v=9hIQjrMHTv4
Internet: redes que lo conformaron
Internet
![Page 16: Introducción al entorno digital](https://reader036.vdocumento.com/reader036/viewer/2022081505/58e7b9521a28ab65578b5721/html5/thumbnails/16.jpg)
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
![Page 17: Introducción al entorno digital](https://reader036.vdocumento.com/reader036/viewer/2022081505/58e7b9521a28ab65578b5721/html5/thumbnails/17.jpg)
¿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
![Page 18: Introducción al entorno digital](https://reader036.vdocumento.com/reader036/viewer/2022081505/58e7b9521a28ab65578b5721/html5/thumbnails/18.jpg)
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
![Page 19: Introducción al entorno digital](https://reader036.vdocumento.com/reader036/viewer/2022081505/58e7b9521a28ab65578b5721/html5/thumbnails/19.jpg)
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
![Page 20: Introducción al entorno digital](https://reader036.vdocumento.com/reader036/viewer/2022081505/58e7b9521a28ab65578b5721/html5/thumbnails/20.jpg)
Anatomía del un objeto webFront-End
Vista de usuarioBack-End
Vista de administrador Vista de desarrollador
![Page 21: Introducción al entorno digital](https://reader036.vdocumento.com/reader036/viewer/2022081505/58e7b9521a28ab65578b5721/html5/thumbnails/21.jpg)
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
![Page 22: Introducción al entorno digital](https://reader036.vdocumento.com/reader036/viewer/2022081505/58e7b9521a28ab65578b5721/html5/thumbnails/22.jpg)
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
![Page 23: Introducción al entorno digital](https://reader036.vdocumento.com/reader036/viewer/2022081505/58e7b9521a28ab65578b5721/html5/thumbnails/23.jpg)
Mapa del sitio o mapa de navegación
![Page 24: Introducción al entorno digital](https://reader036.vdocumento.com/reader036/viewer/2022081505/58e7b9521a28ab65578b5721/html5/thumbnails/24.jpg)
Arquitectura de información
![Page 25: Introducción al entorno digital](https://reader036.vdocumento.com/reader036/viewer/2022081505/58e7b9521a28ab65578b5721/html5/thumbnails/25.jpg)
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
![Page 26: Introducción al entorno digital](https://reader036.vdocumento.com/reader036/viewer/2022081505/58e7b9521a28ab65578b5721/html5/thumbnails/26.jpg)
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
![Page 27: Introducción al entorno digital](https://reader036.vdocumento.com/reader036/viewer/2022081505/58e7b9521a28ab65578b5721/html5/thumbnails/27.jpg)
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
![Page 28: Introducción al entorno digital](https://reader036.vdocumento.com/reader036/viewer/2022081505/58e7b9521a28ab65578b5721/html5/thumbnails/28.jpg)
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
![Page 29: Introducción al entorno digital](https://reader036.vdocumento.com/reader036/viewer/2022081505/58e7b9521a28ab65578b5721/html5/thumbnails/29.jpg)
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
![Page 30: Introducción al entorno digital](https://reader036.vdocumento.com/reader036/viewer/2022081505/58e7b9521a28ab65578b5721/html5/thumbnails/30.jpg)
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/
![Page 31: Introducción al entorno digital](https://reader036.vdocumento.com/reader036/viewer/2022081505/58e7b9521a28ab65578b5721/html5/thumbnails/31.jpg)
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/
![Page 32: Introducción al entorno digital](https://reader036.vdocumento.com/reader036/viewer/2022081505/58e7b9521a28ab65578b5721/html5/thumbnails/32.jpg)
{ 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
![Page 33: Introducción al entorno digital](https://reader036.vdocumento.com/reader036/viewer/2022081505/58e7b9521a28ab65578b5721/html5/thumbnails/33.jpg)
{ ELEMENTOS DE LA INFOGRAFÍA }
1 CO
NTEN
IDOS
![Page 34: Introducción al entorno digital](https://reader036.vdocumento.com/reader036/viewer/2022081505/58e7b9521a28ab65578b5721/html5/thumbnails/34.jpg)
{ ELEMENTOS DE LA INFOGRAFÍA }2
ViIS
UAL
![Page 35: Introducción al entorno digital](https://reader036.vdocumento.com/reader036/viewer/2022081505/58e7b9521a28ab65578b5721/html5/thumbnails/35.jpg)
ACCIÓNPARA
INVITARA LA
EXPERIENCIA
3. A
porta
r al
con
ocim
ient
o
![Page 36: Introducción al entorno digital](https://reader036.vdocumento.com/reader036/viewer/2022081505/58e7b9521a28ab65578b5721/html5/thumbnails/36.jpg)
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/
![Page 37: Introducción al entorno digital](https://reader036.vdocumento.com/reader036/viewer/2022081505/58e7b9521a28ab65578b5721/html5/thumbnails/37.jpg)
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