SlideShare una empresa de Scribd logo
1 de 21
Evolució de la interfície
Mariona Grané. Laboratori de Mitjans Interactius.   @CAVUB
HARDWARE
  CONCEPCIÓ DE SISTEMES OPERATIUS

             SOFTWARE
         INTERFICIE GRÀFICA

      HYPERTEXT > HYPERMEDIA
XARXA > DESENVOLUPAMENT DE LA WWW

          INTERFÍCIES WEB
La interfície digital

 1945 > Vannevar Bush va posar la primera pedra del que havia de ser l’estructura
 de la informació digital.

 1963 > Douglas C. Engelbart, (Berkeley) va portar més enllà les idees de Bush i les
 va fer realitat amb un seguit d’invents que han permès els sistemes actuals



ENGELBART & ENGLISH
              Mouse
Augmentar l’home

Augmentation Research Institute al Stanford Research Institute.

Volia «augmentar les possibilitats de l’ésser humà per enfrontar-se amb problemes
complexos, aconseguir la comprensió per satisfer les necessitats particulars i
imaginar solucions per als problemes» (Engelbart, 1968).




Engelbar t considerava que, un cop
evolucionats els pr imers sistemes
d’interfícies amigables, canviaria el món, i
els homes serien «augmentats»
The Demo

Fall Joint Computer Conference de San Francisco del 9 de desembre del 1968

   > fita essencial en el desenvolupament tecnològic informàtic del segle XX




· el ratolí,
· un entorn de software basat en un
sistema de finestres,
· edició visual de textos,
· les pantalles per mapa de bits que
permetien tenir en pantalla textos i
gràfics utilitzant un sol monitor per a
les diferents tasques,
· el primer sistema d’hiper text
operatiu amb cerques integrades
(NLS, On Line System), ...
Knowledge Workshop

1968 > Engelbart: taller del coneixement i del treball en xarxa




                                        «Dues o més persones, separades
                                        físicament, però connectades
                                        electrònicament, podrien treballar
                                        conjuntament sobre un document i fer-hi
                                        els canvis que volguessin, que els seus
                                        interlocutors podrien percebre
                                        immediatament a la seva pantalla de
                                        l’ordinador. Totes les comprovacions,
                                        revisions o discussions sobre un document
                                        es podrien fer en temps real per dispers
                                        que fos, geogràficament parlant, el grup
                                        de treball» (Almiron, 2000, 19).


Quaranta anys abans que existís Google Docs
Sketchpad

Ivan Sutherland , MIT > desenvolupa el primer sistema de gràfics interactius per ordinador



Sketchpad - A Man-Machine Graphical Communication System (un sistema gràfic de
comunicacions entre home i màquina) el 1963.

Elements gràfics aplicant un llapis lluminós directament sobre la pantalla d’un potent
prototip informàtic del MIT (el TX-2).
Alan Key

Prototip > FLEX

Volia dissenyar un ordinador que fos tan quotidià que fins i tot els infants el
poguessin utilitzar.

Que utilitzés un llenguatge natural i fos «simpàtic i cordial»

1968 > SmallTalk i Dynabook




                                                      «La millor manera de predir el
                                                      futur és inventar-lo» (Key, 1970).
Alan Kay i la metàfora de l’escriptori

 1972, Alan Kay va començar a treballar al PARC (Palo Alto Research Center) de
 la Xerox, i va fundar el Learning Research Group



 Evolució de les finestres d’Engelbart a la metàfora de l’escriptori.

 Imaginava la interfície de l’ordinador com un escriptori on els usuaris treballaven
 amb fulls de paper que es podien sobreposar els uns als altres, i hi podien
 escriure, llegir i dibuixar.



 Alto
 el primer ordinador personal de la història

 Star
 la primera interfície grafica
 la integració del ratolí
 finestres
 icones
Xerox

«En el centre d’investigació de Palo Alto van néixer
les icones, les representacions gràfiques de les ordres
que podem donar a un ordinador; les finestres, les
àrees de treball que permeten delimitar zones a la
pantalla; i els gràfics, gràcies als mapes de bits, una
tecnologia que va permetre visualitzar gràfics a la
pantalla dels nostres ordinadors amb una gran
precisió»


                           «Però al PARC també es va utilitzar per primera
                           vegada, a més del teclat, el ratolí o el joystick com a
                           principal mecanisme de control de l’ordinador, un
                           invent heretat de Douglas Engelbart; va néixer la
                           xarxa Ethernet, la possibilitat de connectar entre si
                           els ordinadors personals; van sorgir les primeres
                           impressores làser que permetrien, posteriorment, el
                           naixement de l’autoedició; i també va veure la llum
                           la programació orientada a objectes mitjançant el
 (Almiron, 2000)           llenguatge SmallTalk (desenvolupat per Alan Kay)»
Apple

1979 > una delegació dels joves d’Apple visiten la seu del PARC

Steve Jobs & Steve Wozniak, van començar a treballar en un model que canviaria per
sempre la forma d’accedir a la informació i de treballar amb els ordinadors.
LISA

 1979 > inici projecte Macintosh

 1983 > LISA supera totes les fonts
Macintosh

1984 > es comercialitza a gran escla el Macintosh
un ordinador personal amb interfície humana
Interfícies dels 80

 Titol de la diapositiva
Titol de la diapositiva

 El que va ser titllat primerament de sistema de joguina pels experts informàtics de
 l’època es va convertir anys més tard en el sistema d’interfície que adoptaren totes
 les empreses del sector.
Interfícies actuals
Interfícies actuals
Aquesta va ser la primera fase d’extensió de la idea i dels treballs per al disseny d’una
interfície adient als usuaris.

Una segona fase per a aquest disseny neix amb l’eclosió de la World Wide Web.




                                                                       to be continued ...
leer no mata


 Almiron, N. (2001), De Vannevar Bush a la WWW. Una genealogia
 de la humanització de les tecnologies de la informació: els pares de la
 interfície gràfica. València: Editorial 3i4.
 Disponible a: http://www.almiron.org/vannevarbush.html

 Bush,V. (1945), «As We May Think» [versió electrònica], The Atlantic
 Montly, juliol del 1945.
 Disponible a: http://www.theatlantic.com/doc/194507/bush

 Levy, S. (1984), «Of mice and men» [versió electrònica], Popular
 Computing, 5, 84, p. 70-78.
 Disponible a http://www.guidebookgallery.org/articles/ofmiceandmen

 Nelson, T. (1987), Literary Machines. Watertown: Mindful Press &
 Eastgate Systems Inc.

Más contenido relacionado

La actualidad más candente

Panorama actual dels nous mitjans
Panorama actual dels nous mitjansPanorama actual dels nous mitjans
Panorama actual dels nous mitjansLaia Hidalgo
 
PAC 3 Origen i vigència de la Multimèdia
PAC 3 Origen i vigència de la MultimèdiaPAC 3 Origen i vigència de la Multimèdia
PAC 3 Origen i vigència de la MultimèdiaNúria Escudé
 
Pac3 Apartat1
Pac3 Apartat1Pac3 Apartat1
Pac3 Apartat1mjciudad
 
Paquita ribas presentacio_pac3
Paquita ribas presentacio_pac3Paquita ribas presentacio_pac3
Paquita ribas presentacio_pac3Paquita Ribas
 
Origen i vigència de la multimèdia
Origen i vigència de la multimèdiaOrigen i vigència de la multimèdia
Origen i vigència de la multimèdiaFrancesc Burgos
 
Marc venet millán_p3
Marc venet millán_p3Marc venet millán_p3
Marc venet millán_p3Enfil
 
Personatges i les seves aportacions
Personatges i les seves aportacionsPersonatges i les seves aportacions
Personatges i les seves aportacionsxiscogarcia
 
Principis dels nous mitjans
Principis dels nous mitjansPrincipis dels nous mitjans
Principis dels nous mitjansPaquita Ribas
 
Pac3 g carbo
Pac3 g carboPac3 g carbo
Pac3 g carboGeocarbo
 
Fonaments i evolució de la multimèdia - Pac3 part1
Fonaments i evolució de la multimèdia - Pac3 part1Fonaments i evolució de la multimèdia - Pac3 part1
Fonaments i evolució de la multimèdia - Pac3 part1frequenac
 
Informàtica
InformàticaInformàtica
InformàticaSanndra16
 
Treball informatica2
Treball informatica2Treball informatica2
Treball informatica2belenizbe
 
Treball escrit projecte 1 (pdf)
Treball escrit projecte 1 (pdf)Treball escrit projecte 1 (pdf)
Treball escrit projecte 1 (pdf)belenizbe
 

La actualidad más candente (19)

Pac3
Pac3Pac3
Pac3
 
Panorama actual dels nous mitjans
Panorama actual dels nous mitjansPanorama actual dels nous mitjans
Panorama actual dels nous mitjans
 
PAC 3 Origen i vigència de la Multimèdia
PAC 3 Origen i vigència de la MultimèdiaPAC 3 Origen i vigència de la Multimèdia
PAC 3 Origen i vigència de la Multimèdia
 
Pac3 Apartat1
Pac3 Apartat1Pac3 Apartat1
Pac3 Apartat1
 
Paquita ribas presentacio_pac3
Paquita ribas presentacio_pac3Paquita ribas presentacio_pac3
Paquita ribas presentacio_pac3
 
Pac3 Apartat1
Pac3 Apartat1Pac3 Apartat1
Pac3 Apartat1
 
Origen i vigència de la Multimèdia
Origen i vigència de la MultimèdiaOrigen i vigència de la Multimèdia
Origen i vigència de la Multimèdia
 
Origen i vigència de la multimèdia
Origen i vigència de la multimèdiaOrigen i vigència de la multimèdia
Origen i vigència de la multimèdia
 
Marc venet millán_p3
Marc venet millán_p3Marc venet millán_p3
Marc venet millán_p3
 
Presentació autors pac3
Presentació autors pac3Presentació autors pac3
Presentació autors pac3
 
Personatges i les seves aportacions
Personatges i les seves aportacionsPersonatges i les seves aportacions
Personatges i les seves aportacions
 
Pac3
Pac3Pac3
Pac3
 
Principis dels nous mitjans
Principis dels nous mitjansPrincipis dels nous mitjans
Principis dels nous mitjans
 
Pac3 g carbo
Pac3 g carboPac3 g carbo
Pac3 g carbo
 
Pac 1 multimèdia pau
Pac 1 multimèdia pauPac 1 multimèdia pau
Pac 1 multimèdia pau
 
Fonaments i evolució de la multimèdia - Pac3 part1
Fonaments i evolució de la multimèdia - Pac3 part1Fonaments i evolució de la multimèdia - Pac3 part1
Fonaments i evolució de la multimèdia - Pac3 part1
 
Informàtica
InformàticaInformàtica
Informàtica
 
Treball informatica2
Treball informatica2Treball informatica2
Treball informatica2
 
Treball escrit projecte 1 (pdf)
Treball escrit projecte 1 (pdf)Treball escrit projecte 1 (pdf)
Treball escrit projecte 1 (pdf)
 

Destacado

Estetica
EsteticaEstetica
EsteticaiMona06
 
Usabilitat
UsabilitatUsabilitat
UsabilitatiMona06
 
Distribució visual
Distribució visualDistribució visual
Distribució visualiMona06
 
Models referents
Models referentsModels referents
Models referentsiMona06
 
Llegibilitat
LlegibilitatLlegibilitat
LlegibilitatiMona06
 
Org i visual
Org i visualOrg i visual
Org i visualiMona06
 
Simplicitat visual
Simplicitat visualSimplicitat visual
Simplicitat visualiMona06
 
Navegacio
NavegacioNavegacio
NavegacioiMona06
 
Simplicitat interactiva
Simplicitat interactivaSimplicitat interactiva
Simplicitat interactivaiMona06
 
Ev disseny
Ev dissenyEv disseny
Ev dissenyiMona06
 
Los diseños del diseño interactivo
Los diseños del diseño interactivoLos diseños del diseño interactivo
Los diseños del diseño interactivoiMona06
 
Briefing interactivo
Briefing interactivoBriefing interactivo
Briefing interactivoiMona06
 
Disseny formatiu
Disseny formatiuDisseny formatiu
Disseny formatiuiMona06
 
pla-pres
pla-prespla-pres
pla-presiMona06
 

Destacado (15)

Estetica
EsteticaEstetica
Estetica
 
Usabilitat
UsabilitatUsabilitat
Usabilitat
 
Distribució visual
Distribució visualDistribució visual
Distribució visual
 
Models referents
Models referentsModels referents
Models referents
 
Llegibilitat
LlegibilitatLlegibilitat
Llegibilitat
 
Atencio
AtencioAtencio
Atencio
 
Org i visual
Org i visualOrg i visual
Org i visual
 
Simplicitat visual
Simplicitat visualSimplicitat visual
Simplicitat visual
 
Navegacio
NavegacioNavegacio
Navegacio
 
Simplicitat interactiva
Simplicitat interactivaSimplicitat interactiva
Simplicitat interactiva
 
Ev disseny
Ev dissenyEv disseny
Ev disseny
 
Los diseños del diseño interactivo
Los diseños del diseño interactivoLos diseños del diseño interactivo
Los diseños del diseño interactivo
 
Briefing interactivo
Briefing interactivoBriefing interactivo
Briefing interactivo
 
Disseny formatiu
Disseny formatiuDisseny formatiu
Disseny formatiu
 
pla-pres
pla-prespla-pres
pla-pres
 

Similar a Evolucio interface

Origen i vigència de la Multimèdia
Origen i vigència de la MultimèdiaOrigen i vigència de la Multimèdia
Origen i vigència de la Multimèdiavictoorlh
 
Exposició powerpoint
Exposició powerpointExposició powerpoint
Exposició powerpointjajodom
 
Exposició powerpoint
Exposició powerpointExposició powerpoint
Exposició powerpointjajodom
 
PAC 3 Fonaments i evolució multimèdia
PAC 3  Fonaments i evolució multimèdiaPAC 3  Fonaments i evolució multimèdia
PAC 3 Fonaments i evolució multimèdiaLluís Comet
 
Que es la informàtica?¿
Que es la informàtica?¿Que es la informàtica?¿
Que es la informàtica?¿jonathanmoya14
 
Fonaments i evolució de la multimèdia
Fonaments i evolució de la multimèdiaFonaments i evolució de la multimèdia
Fonaments i evolució de la multimèdiagatopardu
 
Història de l'internet
Història de l'internetHistòria de l'internet
Història de l'internetaap1995
 
Informàtica
InformàticaInformàtica
Informàticachispi16
 
UOC- Fonaments i evolució de la multimèdia PAC3 Victor_garcia
UOC- Fonaments i evolució de la multimèdia PAC3 Victor_garciaUOC- Fonaments i evolució de la multimèdia PAC3 Victor_garcia
UOC- Fonaments i evolució de la multimèdia PAC3 Victor_garciaVictorGT11
 
Informática
InformáticaInformática
Informáticasandra_gf
 
PAC1 Presentació visual cap.1 L.Manovich
PAC1 Presentació visual cap.1 L.ManovichPAC1 Presentació visual cap.1 L.Manovich
PAC1 Presentació visual cap.1 L.Manovichvictor
 
Creació de l’internet
Creació de l’internetCreació de l’internet
Creació de l’internetkuadrus_77
 

Similar a Evolucio interface (15)

Origen i vigència de la Multimèdia
Origen i vigència de la MultimèdiaOrigen i vigència de la Multimèdia
Origen i vigència de la Multimèdia
 
Exposició powerpoint
Exposició powerpointExposició powerpoint
Exposició powerpoint
 
Exposició powerpoint
Exposició powerpointExposició powerpoint
Exposició powerpoint
 
PAC 3 Fonaments i evolució multimèdia
PAC 3  Fonaments i evolució multimèdiaPAC 3  Fonaments i evolució multimèdia
PAC 3 Fonaments i evolució multimèdia
 
Que es la informàtica?¿
Que es la informàtica?¿Que es la informàtica?¿
Que es la informàtica?¿
 
Fonaments i evolució de la multimèdia
Fonaments i evolució de la multimèdiaFonaments i evolució de la multimèdia
Fonaments i evolució de la multimèdia
 
Història de l'internet
Història de l'internetHistòria de l'internet
Història de l'internet
 
Evolució del software.
Evolució del software.Evolució del software.
Evolució del software.
 
La informatica
La informatica La informatica
La informatica
 
La informatica
La informaticaLa informatica
La informatica
 
Informàtica
InformàticaInformàtica
Informàtica
 
UOC- Fonaments i evolució de la multimèdia PAC3 Victor_garcia
UOC- Fonaments i evolució de la multimèdia PAC3 Victor_garciaUOC- Fonaments i evolució de la multimèdia PAC3 Victor_garcia
UOC- Fonaments i evolució de la multimèdia PAC3 Victor_garcia
 
Informática
InformáticaInformática
Informática
 
PAC1 Presentació visual cap.1 L.Manovich
PAC1 Presentació visual cap.1 L.ManovichPAC1 Presentació visual cap.1 L.Manovich
PAC1 Presentació visual cap.1 L.Manovich
 
Creació de l’internet
Creació de l’internetCreació de l’internet
Creació de l’internet
 

Evolucio interface

  • 1. Evolució de la interfície Mariona Grané. Laboratori de Mitjans Interactius. @CAVUB
  • 2. HARDWARE CONCEPCIÓ DE SISTEMES OPERATIUS SOFTWARE INTERFICIE GRÀFICA HYPERTEXT > HYPERMEDIA XARXA > DESENVOLUPAMENT DE LA WWW INTERFÍCIES WEB
  • 3. La interfície digital 1945 > Vannevar Bush va posar la primera pedra del que havia de ser l’estructura de la informació digital. 1963 > Douglas C. Engelbart, (Berkeley) va portar més enllà les idees de Bush i les va fer realitat amb un seguit d’invents que han permès els sistemes actuals ENGELBART & ENGLISH Mouse
  • 4. Augmentar l’home Augmentation Research Institute al Stanford Research Institute. Volia «augmentar les possibilitats de l’ésser humà per enfrontar-se amb problemes complexos, aconseguir la comprensió per satisfer les necessitats particulars i imaginar solucions per als problemes» (Engelbart, 1968). Engelbar t considerava que, un cop evolucionats els pr imers sistemes d’interfícies amigables, canviaria el món, i els homes serien «augmentats»
  • 5. The Demo Fall Joint Computer Conference de San Francisco del 9 de desembre del 1968 > fita essencial en el desenvolupament tecnològic informàtic del segle XX · el ratolí, · un entorn de software basat en un sistema de finestres, · edició visual de textos, · les pantalles per mapa de bits que permetien tenir en pantalla textos i gràfics utilitzant un sol monitor per a les diferents tasques, · el primer sistema d’hiper text operatiu amb cerques integrades (NLS, On Line System), ...
  • 6.
  • 7. Knowledge Workshop 1968 > Engelbart: taller del coneixement i del treball en xarxa «Dues o més persones, separades físicament, però connectades electrònicament, podrien treballar conjuntament sobre un document i fer-hi els canvis que volguessin, que els seus interlocutors podrien percebre immediatament a la seva pantalla de l’ordinador. Totes les comprovacions, revisions o discussions sobre un document es podrien fer en temps real per dispers que fos, geogràficament parlant, el grup de treball» (Almiron, 2000, 19). Quaranta anys abans que existís Google Docs
  • 8. Sketchpad Ivan Sutherland , MIT > desenvolupa el primer sistema de gràfics interactius per ordinador Sketchpad - A Man-Machine Graphical Communication System (un sistema gràfic de comunicacions entre home i màquina) el 1963. Elements gràfics aplicant un llapis lluminós directament sobre la pantalla d’un potent prototip informàtic del MIT (el TX-2).
  • 9. Alan Key Prototip > FLEX Volia dissenyar un ordinador que fos tan quotidià que fins i tot els infants el poguessin utilitzar. Que utilitzés un llenguatge natural i fos «simpàtic i cordial» 1968 > SmallTalk i Dynabook «La millor manera de predir el futur és inventar-lo» (Key, 1970).
  • 10. Alan Kay i la metàfora de l’escriptori 1972, Alan Kay va començar a treballar al PARC (Palo Alto Research Center) de la Xerox, i va fundar el Learning Research Group Evolució de les finestres d’Engelbart a la metàfora de l’escriptori. Imaginava la interfície de l’ordinador com un escriptori on els usuaris treballaven amb fulls de paper que es podien sobreposar els uns als altres, i hi podien escriure, llegir i dibuixar. Alto el primer ordinador personal de la història Star la primera interfície grafica la integració del ratolí finestres icones
  • 11.
  • 12. Xerox «En el centre d’investigació de Palo Alto van néixer les icones, les representacions gràfiques de les ordres que podem donar a un ordinador; les finestres, les àrees de treball que permeten delimitar zones a la pantalla; i els gràfics, gràcies als mapes de bits, una tecnologia que va permetre visualitzar gràfics a la pantalla dels nostres ordinadors amb una gran precisió» «Però al PARC també es va utilitzar per primera vegada, a més del teclat, el ratolí o el joystick com a principal mecanisme de control de l’ordinador, un invent heretat de Douglas Engelbart; va néixer la xarxa Ethernet, la possibilitat de connectar entre si els ordinadors personals; van sorgir les primeres impressores làser que permetrien, posteriorment, el naixement de l’autoedició; i també va veure la llum la programació orientada a objectes mitjançant el (Almiron, 2000) llenguatge SmallTalk (desenvolupat per Alan Kay)»
  • 13. Apple 1979 > una delegació dels joves d’Apple visiten la seu del PARC Steve Jobs & Steve Wozniak, van començar a treballar en un model que canviaria per sempre la forma d’accedir a la informació i de treballar amb els ordinadors.
  • 14. LISA 1979 > inici projecte Macintosh 1983 > LISA supera totes les fonts
  • 15. Macintosh 1984 > es comercialitza a gran escla el Macintosh un ordinador personal amb interfície humana
  • 16. Interfícies dels 80 Titol de la diapositiva
  • 17. Titol de la diapositiva El que va ser titllat primerament de sistema de joguina pels experts informàtics de l’època es va convertir anys més tard en el sistema d’interfície que adoptaren totes les empreses del sector.
  • 20. Aquesta va ser la primera fase d’extensió de la idea i dels treballs per al disseny d’una interfície adient als usuaris. Una segona fase per a aquest disseny neix amb l’eclosió de la World Wide Web. to be continued ...
  • 21. leer no mata Almiron, N. (2001), De Vannevar Bush a la WWW. Una genealogia de la humanització de les tecnologies de la informació: els pares de la interfície gràfica. València: Editorial 3i4. Disponible a: http://www.almiron.org/vannevarbush.html Bush,V. (1945), «As We May Think» [versió electrònica], The Atlantic Montly, juliol del 1945. Disponible a: http://www.theatlantic.com/doc/194507/bush Levy, S. (1984), «Of mice and men» [versió electrònica], Popular Computing, 5, 84, p. 70-78. Disponible a http://www.guidebookgallery.org/articles/ofmiceandmen Nelson, T. (1987), Literary Machines. Watertown: Mindful Press & Eastgate Systems Inc.