WEB: Diseño e Interaccióndesignblog.uniandes.edu.co/blogs/dise2525/files/2013/02/...WEB: Diseño e...
Transcript of WEB: Diseño e Interaccióndesignblog.uniandes.edu.co/blogs/dise2525/files/2013/02/...WEB: Diseño e...
![Page 1: WEB: Diseño e Interaccióndesignblog.uniandes.edu.co/blogs/dise2525/files/2013/02/...WEB: Diseño e Interacción DISE-2525 Primer Semestre del 2013 Martes 22 Enero Universidad de](https://reader035.fdocuments.mx/reader035/viewer/2022062602/5ede2b2ead6a402d66697834/html5/thumbnails/1.jpg)
WEB: Diseño e Interacción
DISE-2525
Primer Semestre del 2013
Martes 22 Enero
Universidad de los Andes Facultad de Arquitectura y Diseño
Departamento de Diseño
![Page 2: WEB: Diseño e Interaccióndesignblog.uniandes.edu.co/blogs/dise2525/files/2013/02/...WEB: Diseño e Interacción DISE-2525 Primer Semestre del 2013 Martes 22 Enero Universidad de](https://reader035.fdocuments.mx/reader035/viewer/2022062602/5ede2b2ead6a402d66697834/html5/thumbnails/2.jpg)
Clase – Taller:
Martes 7:00 am 9:50
Andrés Burbano
Y 110 A
http://designblog.uniandes.edu.co/blogs/dise2525/
![Page 3: WEB: Diseño e Interaccióndesignblog.uniandes.edu.co/blogs/dise2525/files/2013/02/...WEB: Diseño e Interacción DISE-2525 Primer Semestre del 2013 Martes 22 Enero Universidad de](https://reader035.fdocuments.mx/reader035/viewer/2022062602/5ede2b2ead6a402d66697834/html5/thumbnails/3.jpg)
‘Historia’
La Internet
![Page 4: WEB: Diseño e Interaccióndesignblog.uniandes.edu.co/blogs/dise2525/files/2013/02/...WEB: Diseño e Interacción DISE-2525 Primer Semestre del 2013 Martes 22 Enero Universidad de](https://reader035.fdocuments.mx/reader035/viewer/2022062602/5ede2b2ead6a402d66697834/html5/thumbnails/4.jpg)
Desarollo de Internet Necesidad: Solución:
![Page 5: WEB: Diseño e Interaccióndesignblog.uniandes.edu.co/blogs/dise2525/files/2013/02/...WEB: Diseño e Interacción DISE-2525 Primer Semestre del 2013 Martes 22 Enero Universidad de](https://reader035.fdocuments.mx/reader035/viewer/2022062602/5ede2b2ead6a402d66697834/html5/thumbnails/5.jpg)
Desarollo de Internet Necesidad: Un sistema de comunicación que pueda sobrevivir a un ataque nuclear. Solución:
![Page 6: WEB: Diseño e Interaccióndesignblog.uniandes.edu.co/blogs/dise2525/files/2013/02/...WEB: Diseño e Interacción DISE-2525 Primer Semestre del 2013 Martes 22 Enero Universidad de](https://reader035.fdocuments.mx/reader035/viewer/2022062602/5ede2b2ead6a402d66697834/html5/thumbnails/6.jpg)
Desarollo de Internet Necesidad: Un sistema de comunicación que pueda sobrevivir a un ataque nuclear. Solución: Enviar la información en paquetes que lleven la información de cómo re ensamblarse (Packet Switching).
![Page 7: WEB: Diseño e Interaccióndesignblog.uniandes.edu.co/blogs/dise2525/files/2013/02/...WEB: Diseño e Interacción DISE-2525 Primer Semestre del 2013 Martes 22 Enero Universidad de](https://reader035.fdocuments.mx/reader035/viewer/2022062602/5ede2b2ead6a402d66697834/html5/thumbnails/7.jpg)
Desarollo de la WEB Necesidad: Solución:
![Page 8: WEB: Diseño e Interaccióndesignblog.uniandes.edu.co/blogs/dise2525/files/2013/02/...WEB: Diseño e Interacción DISE-2525 Primer Semestre del 2013 Martes 22 Enero Universidad de](https://reader035.fdocuments.mx/reader035/viewer/2022062602/5ede2b2ead6a402d66697834/html5/thumbnails/8.jpg)
Desarollo de la WEB Necesidad: Un medio para compartir la información científica Solución:
![Page 9: WEB: Diseño e Interaccióndesignblog.uniandes.edu.co/blogs/dise2525/files/2013/02/...WEB: Diseño e Interacción DISE-2525 Primer Semestre del 2013 Martes 22 Enero Universidad de](https://reader035.fdocuments.mx/reader035/viewer/2022062602/5ede2b2ead6a402d66697834/html5/thumbnails/9.jpg)
Desarollo de la WEB Necesidad: Un medio para compartir la información científica Solución: Un protocolo que permita que el contenido de los documentos pueda vincularse mutuamente (HTTP), un lenguaje para crear documentos de tal tipo (HTML).
![Page 10: WEB: Diseño e Interaccióndesignblog.uniandes.edu.co/blogs/dise2525/files/2013/02/...WEB: Diseño e Interacción DISE-2525 Primer Semestre del 2013 Martes 22 Enero Universidad de](https://reader035.fdocuments.mx/reader035/viewer/2022062602/5ede2b2ead6a402d66697834/html5/thumbnails/10.jpg)
La Internet
Es una red de redes informáticas interconectadas de acceso público a nivel mundial
![Page 11: WEB: Diseño e Interaccióndesignblog.uniandes.edu.co/blogs/dise2525/files/2013/02/...WEB: Diseño e Interacción DISE-2525 Primer Semestre del 2013 Martes 22 Enero Universidad de](https://reader035.fdocuments.mx/reader035/viewer/2022062602/5ede2b2ead6a402d66697834/html5/thumbnails/11.jpg)
La Internet en 1962…
Packet Switching
Una colaboración entre universidades (MIT, UCLA, Stanford y otras) y el Departamento de Defensa (Defense Advanced Research Projects Agency) de los EEUU. Si un ‘nodo’ de la red es destruido la información es todavía capaz de llegar a su destino. La solución fue una red basada en la idea de ‘packet switching’.
![Page 12: WEB: Diseño e Interaccióndesignblog.uniandes.edu.co/blogs/dise2525/files/2013/02/...WEB: Diseño e Interacción DISE-2525 Primer Semestre del 2013 Martes 22 Enero Universidad de](https://reader035.fdocuments.mx/reader035/viewer/2022062602/5ede2b2ead6a402d66697834/html5/thumbnails/12.jpg)
UCSB fue el tercer nodo de Internet
La Internet en 1969 ARPANET (Advanced Research Projects Agency Network of the United States Department of Defense)
![Page 13: WEB: Diseño e Interaccióndesignblog.uniandes.edu.co/blogs/dise2525/files/2013/02/...WEB: Diseño e Interacción DISE-2525 Primer Semestre del 2013 Martes 22 Enero Universidad de](https://reader035.fdocuments.mx/reader035/viewer/2022062602/5ede2b2ead6a402d66697834/html5/thumbnails/13.jpg)
Memex “As We May Think”, Vannevar Bush 1945
![Page 14: WEB: Diseño e Interaccióndesignblog.uniandes.edu.co/blogs/dise2525/files/2013/02/...WEB: Diseño e Interacción DISE-2525 Primer Semestre del 2013 Martes 22 Enero Universidad de](https://reader035.fdocuments.mx/reader035/viewer/2022062602/5ede2b2ead6a402d66697834/html5/thumbnails/14.jpg)
Theodore Nelson (1937), Xanadu 1963
‘Hipertexto’ e‘Hipermedia’
![Page 15: WEB: Diseño e Interaccióndesignblog.uniandes.edu.co/blogs/dise2525/files/2013/02/...WEB: Diseño e Interacción DISE-2525 Primer Semestre del 2013 Martes 22 Enero Universidad de](https://reader035.fdocuments.mx/reader035/viewer/2022062602/5ede2b2ead6a402d66697834/html5/thumbnails/15.jpg)
La World Wide Web - 1990
La WEB fue concebida y desarrollada por Tim Berners-Lee en el CERN (Suiza) en 1989. Estaba relacionado con Xanadu y con el Memex La invención de Berner-Lee incluía: • HTTP - Hyper Text Transfer Protocol Una forma espacífica de enviar información en la Internet. • HTML - Hyper Text Markup Language Un lenguaje que permite vincular documentos e imágenes. Los primeros navegadores fueron (Mosaic 1993) y Netscape (1994)
![Page 16: WEB: Diseño e Interaccióndesignblog.uniandes.edu.co/blogs/dise2525/files/2013/02/...WEB: Diseño e Interacción DISE-2525 Primer Semestre del 2013 Martes 22 Enero Universidad de](https://reader035.fdocuments.mx/reader035/viewer/2022062602/5ede2b2ead6a402d66697834/html5/thumbnails/16.jpg)
Douglas Engelbart, Stanford Research Institute
The first Mouse 1964
Un computador temprano con teclado y mouse 1966
![Page 17: WEB: Diseño e Interaccióndesignblog.uniandes.edu.co/blogs/dise2525/files/2013/02/...WEB: Diseño e Interacción DISE-2525 Primer Semestre del 2013 Martes 22 Enero Universidad de](https://reader035.fdocuments.mx/reader035/viewer/2022062602/5ede2b2ead6a402d66697834/html5/thumbnails/17.jpg)
The Personal Computer
Macintosh 128K de Apple 1984 Primer computador con interface gráfica Desarrollado por Xerox PARC and Apple
![Page 18: WEB: Diseño e Interaccióndesignblog.uniandes.edu.co/blogs/dise2525/files/2013/02/...WEB: Diseño e Interacción DISE-2525 Primer Semestre del 2013 Martes 22 Enero Universidad de](https://reader035.fdocuments.mx/reader035/viewer/2022062602/5ede2b2ead6a402d66697834/html5/thumbnails/18.jpg)
Anuncio comercial del primer computador con interface gráfica - 1984
![Page 19: WEB: Diseño e Interaccióndesignblog.uniandes.edu.co/blogs/dise2525/files/2013/02/...WEB: Diseño e Interacción DISE-2525 Primer Semestre del 2013 Martes 22 Enero Universidad de](https://reader035.fdocuments.mx/reader035/viewer/2022062602/5ede2b2ead6a402d66697834/html5/thumbnails/19.jpg)
TALLER HTML
1. Crear carpeta: nombre_apellido (minúsculas separadas por _)
2. Crear 3 sub carpetas: html, imagenes, video (todo en minúsculas)
![Page 20: WEB: Diseño e Interaccióndesignblog.uniandes.edu.co/blogs/dise2525/files/2013/02/...WEB: Diseño e Interacción DISE-2525 Primer Semestre del 2013 Martes 22 Enero Universidad de](https://reader035.fdocuments.mx/reader035/viewer/2022062602/5ede2b2ead6a402d66697834/html5/thumbnails/20.jpg)
TAGS
abrir y cerrar
<html> </html>
<html>
</html>
![Page 21: WEB: Diseño e Interaccióndesignblog.uniandes.edu.co/blogs/dise2525/files/2013/02/...WEB: Diseño e Interacción DISE-2525 Primer Semestre del 2013 Martes 22 Enero Universidad de](https://reader035.fdocuments.mx/reader035/viewer/2022062602/5ede2b2ead6a402d66697834/html5/thumbnails/21.jpg)
<html>
<head>
(invisible)
</head>
<body>
(visible)
</body>
</html>
![Page 22: WEB: Diseño e Interaccióndesignblog.uniandes.edu.co/blogs/dise2525/files/2013/02/...WEB: Diseño e Interacción DISE-2525 Primer Semestre del 2013 Martes 22 Enero Universidad de](https://reader035.fdocuments.mx/reader035/viewer/2022062602/5ede2b2ead6a402d66697834/html5/thumbnails/22.jpg)
<html> </html>
<head> </head>
<body> </body>
<h1></h1> ... <h6></h6> = headers
<p> </p> = párrafo
<br> = espacio
<a href=”nombre.html”> click aquí</a> = link
<img src=”imagenes/nombre.jpg”> = cargar imagen
![Page 23: WEB: Diseño e Interaccióndesignblog.uniandes.edu.co/blogs/dise2525/files/2013/02/...WEB: Diseño e Interacción DISE-2525 Primer Semestre del 2013 Martes 22 Enero Universidad de](https://reader035.fdocuments.mx/reader035/viewer/2022062602/5ede2b2ead6a402d66697834/html5/thumbnails/23.jpg)
<html> <head> <title> nombre + curso web </title> </head> <body> <h1>título</h1> <p> texto bienvenida</p> <img src=”imagenes/foto.jpg”> <a href=”personal.html”> personal </a> <a href=”tutoriales.html”> tutoriales </a> <a href=”ejercicios.html”> ejercicios </a> <a href=”proyecto.html”> proyecto </a> <p> texto despedida</p> </body> </html>