lambdaway :: ted

1 | list | login |load

| |

{div {@ style="text-align:center; font-size:0.5em; border-bottom:1px solid #888; margin-bottom:20px;"}Cette page wiki est réalisée à partir des informations du site [[http://emassart.free.fr/ber/MiniSite| http://emassart.free.fr/ber/MiniSite/]].}

{div {@ style="font-size:4.0em; text-align:center;"}HYPERTEXTE} 
{div {@ style="font-size:1.0em; text-align:center;"}1965 : invention et programmation{br}du concept d'hypertexte{br}par Ted Nelson }

{{title}

_h2 Ted Nelson...
}{{content}

{img {@ src="http://xanadu.com.au/ted/tednobg.gif" width="100%" title="Ted Nelson"}}

_p  Theodor Holm Nelson né en 1937 est considéré comme l'inventeur du terme hypertexte en 1965.
_p En 1960 à 27 ans il imagine une machine qui permettrait de stocker des données et de les mettre à disposition de tous. Il invente le concept d'hypertexte.
_p Après ses étude à Harvard en 1963, il est un sociologue américain et fait des recherches sur les technologies de l'information, les ordinateurs et les interfaces homme-machine.
_p Les ordinateurs de l'époque sont encore rudimentaires. Ils sont lents, encombrants, rares, et chers, et souvent dépourvus d'écrans.
_p Il met en place le projet [[Xanadu|https://fr.wikipedia.org/wiki/Projet_Xanadu]] et tente, de développer ce qu'il nomme . « [[le projet original de l'hypertexte|http://xanadu.com/HISTORY/]] »
_p Le principe de l'hypertexte a été repris et a inspiré de nombreux pionniers de l'informatique, comme :

_ul [[Douglas Engelbart|https://fr.wikipedia.org/wiki/Douglas_Engelbart]] pour mettre au point une interface homme-machine dans les années 1960,
_ul [[Bill Atkinson|https://fr.wikipedia.org/wiki/Bill_Atkinson_(informaticien)]] chez Apple, pour développer HyperCard,
_ul [[Tim Berners-Lee|https://fr.wikipedia.org/wiki/Tim_Berners-Lee]] en 1989, pour définir les bases du World Wide Web. (aidé par l'ingénieur et informaticien belge Robert Cailliau)

_p Ted Nelson est aujourd'hui professeur à l'université d'Oxford en Angleterre.
}

{{title}
_h2 Histoire des ordinateurs de 1960 à 1980...
}{{content}
_p Lorsque Ted Nelson commence ses recherches sur les technologies de l'information, les ordinateurs ne sont encore pas très évolués. Le concept qu'il invente nécessite du matériel qui sera développé plus tard dans les années 70.

_ul 1953 : IBM lance l'IBM 650, ordinateur réalisé à partir de tubes à vide
_ul 1960 : Le Bull Gamma 60, premier ordinateur multitâches et l'un des premiers multiprocesseurs
_ul La SEA présente son mini-ordinateur
_ul 1962 : Invention du mot informatique
_ul 1963 : Invention de la souris par Douglas Engelbart
_ul 1973 : Commercialisation du Micral, premier micro-ordinateur français
_ul 1977 : Apple II et Motorola 6502A couleurs
_ul 1981 : L'IBM PC
_ul 1982 : Définition du mot Internet

_h3 Liens
_ul [[site/linformatiquelesnuls/ordinateur-de-1960|site/linformatiquelesnuls/ordinateur-de-1960]]
_ul [[wikipedia/Histoire_des_ordinateurs#(1957-1965)|wikipedia/Histoire_des_ordinateurs#(1957-1965)]]
}

{{title}
_h2 Le premier site web...
}{{content}

_p Tim Berners-Lee en 1989, travaillant au CERN, s'est appuyé sur les travaux de Ted Nelson pour poser les bases du World Wide Web. (aidé par l'ingénieur et informaticien belge Robert Cailliau)
_p À partir de 1990, ils développent les trois principales technologies du Web : les adresses web (URL), l'Hypertext Transfer Protocol (HTTP) et l'Hypertext Markup Language (HTML). Pour favoriser cette mise en commun généralisée dans un espace créatif, ils développent aussi le premier navigateur web10, éditeur web (dénommé WorldWideWeb et développé sur NeXTSTEP) et serveur HTTP.

_h3 Liens
 
_ul [[TheProject|https://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html]] 1ère page Web publiée sur Info.cern.ch (reconstitution)
_ul [[1er document de Tim Berners-Lee sur le Mesh|https://www.w3.org/History/1989/proposal]] : Information Management: A Proposal
_ul [[home of the first website|http://info.cern.ch/]]
_ul [[Browse the first website using the line-mode browser simulator|http://line-mode.cern.ch/www/hypertext/WWW/TheProject.html]]

_h3 Information Management : A Proposal
_p Schémas proposé par Tim Berners-Lee pour présenter son projet soit le concept du wwww

_img https://www.w3.org/History/1989/Image1.gif

}

{{title} 
_h2 Sitographie...
}{{content}

_h3 Les recherches : Hypertext et Xanadu

_ul [[wikipedia.org/Ted_Nelson|https://fr.wikipedia.org/wiki/Ted_Nelson]]
_ul [[wikipedia.org/Hypertexte|https://fr.wikipedia.org/wiki/Hypertexte]]
_ul [[wikipedia.org/Xanadu|https://fr.wikipedia.org/wiki/Projet_Xanadu]]
_ul [[le projet original de l'hypertexte|http://xanadu.com/HISTORY/]]
_ul [[persee.fr/La fausse évidence du lien hypertexte|https://www.persee.fr/doc/colan_0336-1500_2004_num_140_1_3266%20persee.fr]]

_h3 Les pionniers

_ul [[Douglas Engelbart|https://fr.wikipedia.org/wiki/Douglas_Engelbart]]
_ul [[Bill Atkinson|https://fr.wikipedia.org/wiki/Bill_Atkinson_(informaticien)]]
_ul [[Tim Berners-Lee|https://fr.wikipedia.org/wiki/Tim_Berners-Lee]]
_ul [[1er_site_web|http://emassart.free.fr/ber/MiniSite/1er-site-web.htm]]

_h3 Les sites de Ted Nelson

_ul [[http://ted.hyperland.com|http://ted.hyperland.com/]]
_ul [[Books by Ted Nelson|https://www.thriftbooks.com/a/ted-nelson/217151]]
_ul [[Instagram|https://www.instagram.com/travelingted]]
_ul [[www.xanadu.com.au/ted|http://www.xanadu.com.au/ted/]]
_ul [[TheTedNelson Channel Youtube|https://www.youtube.com/user/TheTedNelson]]
_ul [[vidéo de 48 minutes en anglais|https://www.youtube.com/watch?v=mmfjM-SGlGs]] A summary of my life and work,Here I Stand, at Age 80.

}

{{title} 
_h2 Quizz...
}{{content}

_h3 Répondez aux questions sur l'hypertexte ci-dessous.

{pre {@ style="margin-left:50px;"}
En quelle année a été inventé l'hypertexte ? 
{input {@ type="text" value="" placeHolder="année ?" id="rep_0"}} Réponse : {span {@ id="sol_0"}...}
Qui a inventé l'hypertexte ? 
{input {@ type="text" value="" placeHolder="qui ?" id="rep_1"}} Réponse : {span {@ id="sol_1"}...}
En quelle année a été inventé la souris ?  
{input {@ type="text" value="" placeHolder="année ?" id="rep_2"}} Réponse : {span {@ id="sol_2"}...}
Que signifie l'appelation "www" ?  
{input {@ type="text" value="" placeHolder="quoi ?" id="rep_3"}} Réponse : {span {@ id="sol_3"}...}
Par qui cette technologie est elle créée ?  
{input {@ type="text" value="" placeHolder="qui ?" id="rep_4"}} Réponse : {span {@ id="sol_4"}...}

{input {@ type="button" value="valider" onclick="valider()"}} {span {@ id="note"}...}
}
}

{center 
 [[Instagram|https://www.instagram.com/travelingted]] | 
[[Mentions légales|http://emassart.free.fr/ber/MiniSite/mentions-legales.htm]] | 
{a {@ href="mailto:berenger.massart@gmail.com"}Contactez-moi}}

{div {@ style="text-align:center; font-size:0.5em; border-top:1px solid #888;"}Cette page wiki est réalisée à partir des informations du site [[http://emassart.free.fr/ber/MiniSite| http://emassart.free.fr/ber/MiniSite/]].}

;; the following coder's corner should be externalized in a library:

;; 1) lambdatalk functions:

{{hide}

{def title div
 {@ class="title"
    onclick="
 this.nextSibling.style.transform=
(this.nextSibling.style.transform==='scale(0)')? 'scale(1)' : 'scale(0)';
 this.nextSibling.style.height=
(this.nextSibling.style.height==='0px')? 'auto' : '0px';"}}

{def content div
 {@ style="transform:scale(0); height:0px; transition:all 0.5s;"}}

;; {uncover data/tednobg.gif  50 500}

{def uncover
 {lambda {:im :h1 :h2}
  {img {@ src=":im"
          style="width: 100%;
                 height: :h1px;
                 object-fit: cover;
                 -webkit-transition: all 0.5s;  
                    -moz-transition: all 0.5s;  
                      -o-transition: all 0.5s;  
                         transition: all 0.5s;"
        onclick="this.style.height=
                (this.style.height===':h1px')? ':h2px' : ':h1px'"}}}}
}

;; 2) javascript code:

{script ;; 
  function valider() {
    var note = 0;
    var solutions = ["1965","Ted Nelson","1963","World Wide Web","Tim Berners-Lee"];

for (var i=0; i < solutions.length; i++) {
      document.getElementById("sol_"+i).innerHTML = solutions[i];
      if (document.getElementById("rep_"+i).value === solutions[i]) note++;
    }
    document.getElementById("note").innerHTML = "Note = " + note + "/5"  
  }
}

;; 3) CSS rules

{style ;; 
@import url(https://fonts.googleapis.com/css?family=Quicksand);

body {
 background:#888; 
}

#page_frame {
 width:800px;
 background:transparent;
 border:0;
}

#page_content {
 font-family: Quicksand;
 font-size:1.3em;
 background:#ffe;
 padding:0 30px;
}

.page_menu { 
 background:transparent;
 box-shadow:0 0 0; 
 font-size:1.0em; 
}
.page_menu a { color:#00f; }

#page_foot {
 font-size:1.0em; 
}
#page_foot a { color:#00f; }

h2 { 
 text-indent:0;
 text-align:center; 
 color:#400;
}
h2 { color:blue; }
h2:hover { cursor:grab; color:red; }
}

{center {input {@ type="button" value="HTML CODE" onclick="htmlcode()"}}}
{textarea {@ id="htmlcode" style="display:none; width:100%; height:2000px; border:0; "}}
{script ;; 
  function htmlcode() {
    var code = document.getElementById('page_textarea').value;
    var id = document.getElementById('htmlcode');
    id.innerHTML = LAMBDATALK.evaluate(code).val;
    id.style.display = (id.style.display === 'none')? 'block' : 'none'
  };
}