We're sorry but this page doesn't work properly without JavaScript enabled. Please enable it to continue.
Feedback

Reviving le Minitel

00:00

Formal Metadata

Title
Reviving le Minitel
Subtitle
How web technologies make it easy to emulate Minitel
Title of Series
Number of Parts
490
Author
License
CC Attribution 2.0 Belgium:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor.
Identifiers
Publisher
Release Date
Language

Content Metadata

Subject Area
Genre
Abstract
Using web technologies, one can easily emulate the Minitel ecosystem, not only the iconic french terminal but also its servers. This easiness has been made possible due to ES6 and websockets. Brief history of the Minitel Minitel + VideoTex + X25 vs Browser + HTML + TCP/IP Technical aspects of Minitel emulation (ES6 + websockets) Creation of a VideoTex page (live demo) Surfing on Minitel (live demo)
33
35
Thumbnail
23:38
52
Thumbnail
30:38
53
Thumbnail
16:18
65
71
Thumbnail
14:24
72
Thumbnail
18:02
75
Thumbnail
19:35
101
Thumbnail
12:59
106
123
Thumbnail
25:58
146
Thumbnail
47:36
157
Thumbnail
51:32
166
172
Thumbnail
22:49
182
Thumbnail
25:44
186
Thumbnail
40:18
190
195
225
Thumbnail
23:41
273
281
284
Thumbnail
09:08
285
289
Thumbnail
26:03
290
297
Thumbnail
19:29
328
Thumbnail
24:11
379
Thumbnail
20:10
385
Thumbnail
28:37
393
Thumbnail
09:10
430
438
Projective planeCuboidSoftware developerComputer animation
Web pageDemo (music)ModemVideoconferencingMetreWater vaporLevel (video gaming)FamilyWeb browserComputer animation
Quality of serviceSystem callLine (geometry)Point (geometry)Multiplication signComputer animation
Operator (mathematics)Inheritance (object-oriented programming)System callTrailPlanningInheritance (object-oriented programming)Barrelled spaceSystem callOperator (mathematics)Computer animation
Decision theoryDirection (geometry)TelecommunicationCommutative propertyComputer networkDecision theoryTelecommunicationSpectrum (functional analysis)DissipationTransport Layer SecurityMultiplication signSoftwareAutomationComputer animation
Computer networkBit rateModemDirected setDigital electronicsVirtual realityLink (knot theory)Connected spaceMultiplication signPoint (geometry)DistanceBeat (acoustics)2 (number)Bit rateBitModemComputer animation
Asynchronous Transfer ModeVirtual machineLink (knot theory)Computer networkTask (computing)VideoconferencingRadical (chemistry)Chemical equationSoftwareTask (computing)TouchscreenKeyboard shortcutNeuroinformatikMikrocomputerVirtual machineModemComputer animation
Web pageDirectory serviceTelecommunicationInstallation artSoftware maintenanceMaxima and minimaSoftware maintenanceMetreRadical (chemistry)TelecommunicationComputer animation
PlastikkarteDirectory serviceTelecommunicationPoint (geometry)Different (Kate Ryan album)Computer animation
Server (computing)Internet service providerComputer networkDigital electronicsPoint (geometry)Server (computing)NumberView (database)Internet service providerVirtual machineSoftwareConstraint (mathematics)Table (information)Directory serviceCubeVideoconferencingTelecommunicationAnalogyModemComputer animation
Bit rate2 (number)TouchscreenRule of inferenceRadical (chemistry)Keyboard shortcutCubeBit rateVideoconferencingPixelBit
Clique-widthForcing (mathematics)Musical ensembleTouchscreenVideoconferencingGraph (mathematics)Data miningVideo gameDifferent (Kate Ryan album)Complex (psychology)Doubling the cubeDimensional analysisPixelComputer fontRadical (chemistry)Clique-widthKeyboard shortcutLimit (category theory)Standard deviationSet (mathematics)Computer animation
Attribute grammarInversion (music)VideoconferencingPhotographic mosaicLevel of measurementTouchscreenExtreme programmingSpacetimeAttribute grammarBeat (acoustics)Semiconductor memoryWeightComplex (psychology)Set (mathematics)VideoconferencingRevision controlCodePhotographic mosaicAlphabet (computer science)Inversion (music)Computer animation
Normal (geometry)Clique-widthCursor (computers)TouchscreenStreaming mediaDoubling the cubeAreaGraph coloringCursor (computers)Clique-widthVideoconferencingStreaming mediaTouchscreenNeuroinformatikSystem callComputer animation
PeripheralComputer hardwareGame controllerVideoconferencingEEPROMVideoconferencingWeb 2.0NeuroinformatikDifferent (Kate Ryan album)Video cardComputer programmingCoprocessorGame controllerComputer animation
Duplex (telecommunications)Client (computing)Presentation of a groupContent (media)Flow separationContinuous functionHyperlinkComputer hardwareCross-site scriptingSequenceSystem callState of matterWave packetClient (computing)Shift operatorServer (computing)Different (Kate Ryan album)Lattice (order)Web 2.0Game theoryPhysical systemView (database)PlastikkartePoint (geometry)Content (media)Presentation of a groupAnalytic continuationGame controllerVideoconferencingHyperlinkComputer hardwareFlow separationStreaming media
Computing platformMereologyTelecommunicationGeometric primitiveInterpreter (computing)VideoconferencingGame controllerInterpreter (computing)MereologyVideoconferencingMetreTelecommunicationGeometric primitiveComputing platformServer (computing)Computer animation
Element (mathematics)Computer programmingKeyboard shortcutNetwork socketRing (mathematics)Functional (mathematics)Computer programmingTouchscreenDigital electronicsKeyboard shortcutComputer animation
Arc (geometry)Read-only memoryCellular automatonClique-widthInversion (music)Vertical directionPhotographic mosaicService (economics)MetrePresentation of a groupTouchscreenSpacetimeSemiconductor memoryFraction (mathematics)Photographic mosaicExecution unitComputer animation
Bit error rateExecution unitElectronic visual displayVideoconferencingInversion (music)Computer chessAttribute grammarLine (geometry)Computer programmingSemiconductor memory2 (number)Graph coloringAuditory maskingVideoconferencingMultiplication signRow (database)Computer animation
Computer animation
Web browserText editorWeb pageComputerHome pageAbsolute valueStreaming mediaBlock (periodic table)BootingLocal GroupStandard deviationPhotographic mosaicCursor (computers)Content (media)Extension (kinesiology)TouchscreenParameter (computer programming)Row (database)Graph (mathematics)String (computer science)Lattice (order)Web pageTouchscreenContent (media)Computer animation
Network topologyTouchscreenClique-widthInversion (music)Home pageText editorCursor (computers)Graph (mathematics)String (computer science)Content (media)IterationPhotographic mosaicStandard deviationSound effectAbsolute valueRow (database)Greatest elementDiscrete element methodOrder (biology)Integrated development environmentSequenceServer (computing)Line (geometry)Inversion (music)Computer animation
Block (periodic table)Inversion (music)Text editorHome pageCursor (computers)TouchscreenLocal GroupStreaming mediaString (computer science)Row (database)Graph (mathematics)Standard deviationContent (media)Scalable Coherent InterfaceText editorTouchscreenKeyboard shortcutPixelComplete metric spaceGreen's function19 (number)Cellular automatonGraph coloringComputer animationDiagram
Text editorHome pageString (computer science)Graph (mathematics)Block (periodic table)Cursor (computers)Standard deviationTouchscreenLocal GroupInversion (music)Uniform resource locatorStreaming mediaContent (media)Maxima and minimaComputer animation
DialectFile formatSoftware bugCodierung <Programmierung>Computer clusterProgram flowchartComputer animation
String (computer science)Graph (mathematics)Text editorLocal GroupTouchscreenStandard deviationCursor (computers)Inversion (music)Content (media)Maxima and minimaStreaming mediaNetwork topologyUniform resource locatorVideoconferencingConnected spaceRight angleState of matterBit rateText editorComputer animation
TouchscreenPolygon meshString (computer science)Cursor (computers)Home pageStandard deviationInversion (music)Local GroupWell-formed formulaService (economics)Electronic program guideSuite (music)Computer fontField (computer science)WeightFlow separationQuery languageInteractive kioskServer (computing)Real numberType theoryMobile appComputer animation
Suite (music)Common Intermediate LanguageCodeElectronic program guideService (economics)Server (computing)Type theoryComputer animation
LoginTape driveElectronic program guideDialectSuite (music)Instance (computer science)TouchscreenComputer animation
LoginPlastikkarteElectronic program guideModemSuite (music)Tape drivePolygon meshWebsiteExecution unitServer (computing)NumberGoodness of fitInteractive kioskWebsiteComputer animationLecture/Conference
Electronic program guideSuite (music)Bulletin board systemGame theoryType theoryCode
Electronic program guideSuite (music)Sound effectComputer animation
Cloud computingElectronic program guideVideoconferencingRevision controlMedianFluxComputer animation
EmailComputer-generated imageryDemo (music)Polygon meshForm (programming)Internet forumComputer animation
Radio-frequency identificationHacker (term)Polygon meshSuite (music)Electronic program guideTape driveComputer-generated imageryAsynchronous Transfer ModePoint cloudFacebookOpen sourceComputer animation
Transcript: English(auto-generated)
So, I'm Frédéric Bisson. I'm a French developer. I work for the city of Rouen, but this project
is on my pastime. It began when my employer gave away, started to give away its old French little boxes. So, yes, some of what I will say will be very ironic. First, we will see
our friends conquer the world. Next, we will see how it works and how HTML5 and ES6 can be used to emulate Minitel in a browser, in a modern web browser. And then we will have
two live demos, one which will be creating a video text page, and the second we will be surfing on Minitel. So, the French technology conquered the world, but in the late 60s,
we were quite a bit late. In the USA, 90% of the household had a phone line. In France,
it was only 15%. In the USA, at the same time, you would need three days to have a phone line at home. In France, it was three years. And I'm not joking. Really, three years. The last operator worked until 1978. I was born in 1974. My parents had known this. But the
first automatic switch was tested in 1912, 66 years before. It employed up to 30,000
operators, which makes every call super expensive. But France has a super plan to take all over
the world. In the late 60s, the government made a decision. And in 1972, the telecommunication
became the first investor in France. In 1978, less than 10 years after, the PSTN was complete. The PSTN is the Public Switched Telephone Network. It's an automated telephone network. And at the same time, Transpac was born. Transpac is the French packet-switched network
based on X25, which is a technology so much better than TCPIP. You know it. So Transpac here worked from 50 bits per second, yes, because of telex, to 64,000 bits per second.
It was heterogeneous because you could access it directly or via a modem or via telex. But its very innovative point was the billing, the pricing, because before, you paid against
the distance. With Transpac, you paid on rate and connection time. At that time, you
could do B2B applications, like linking agencies for balance insurance, connecting ATA machine, and have payment terminal. For the B2C applications, it was the Minitel. Minitel, it's a video
text screen with a keyboard connected to the network with an internal modem. So you have
all this in this machine. But the main task was to get it adopted by the French because if in the USA, the microcomputing was very present, in France, it was a desert
because microcomputing is hard to grasp. It was also expensive and networks, nobody dreams of them. So the great French mind knew what to do. The Minitel was a plug-and-play
terminal with zero configuration, zero maintenance, but you could not update it. There was one killer app, the electronic telephone directory, which was free.
And also, the Minitel was free, like in free beer. So you just have to sign a paper and you could get your Minitel at home. But it means that the French government entirely paid
all the Minitels. Minitel cost 260 euros to build. It's 260 euros today. It was 1,000 francs in 1980. On this map, you have 750 million euros
of Minitel. In 1993, there were 6.5 millions of Minitels.
So the French government needed to get the money back. But how it worked? The Minitel network, at home, you had a Minitel and a phone. The phone was used to dial the number because
the modem inside the Minitel was very basic. The France Telecom network was an analog network on which was connected the video text access point, or Pavi in French.
On this machine, you had the electronic telephone directory. You also had all the billing. And it connected the analog network and the digital network. The service provider
had its servers connected to Transpac. But it could also have servers connected directly to the PSTN, but with the constraint that you would have less lines available. The Minitel, it's a Minitel 2. It's a little cube.
It was a black and white passive terminal, which communicates in 7-bit video text. Screens are composed of 40 columns for 25 rows, which gives us 320 by 250 pixels.
It could display 8 colors, though nearly all the Minitel were black and white. And it downloads at 1200 bits per second and uploads at 75 bits per second,
because 75 is only for the keyboard. 75 gives you approximately 7 characters per second.
This keyboard is quite good. To overcome the limitation of text screens, because it's a terminal text screen, video text has 64 special characters, the mosaic character,
which divides each character in 2 by 3 pixels. Graphically, you would have 80 pixels by 72 pixels. And the graphist would have to use
standard characters, like here, where you have an outline to represent a button. Here, you have an anti-slash with a double width dimension and a slash in its normal size. You have also a very complex set of attributes,
because each character is coded as 16-bit in the Minitel memory. But with this, you could encode 449 characters, so you have all that is necessary to have exempted characters.
You have RGB for the foreground, RGB for the background. You have blinking attributes.
Here, you say if you want to have alphabetic characters or mosaic characters, you can say that you have underlined, etc. You also have a video inversion.
So what the video text stream looks like, to display FOSDEM20, you would first start with VOC, which clears screens, and which puts the cursor
on the upper left area. 1F for C4C, you go to row 12, column 12. 1B for F, you set double width and double height. 1B for T3, you set foreground color to yellow. 46, etc., it's only ASCII characters to write FOSDEM. 1B for E, 1B for T6, ZOB.
To have this screen, you need approximately 20, 25 characters.
The Minitel inside, it's like a small computer. The processor is a medical controller, an 8032. You have all the programs in aneprom, a chipset for the modem,
a speaker, a connector to the screen, the video controller, and the RAM, which was directly connected to the video controller. The difference between the web before HTML5
and Minitel, the web, the client initiates the request. The server cannot initiate the request. While with Minitel, the server and the client can communicate at any time.
In the web, you have no state, while the Minitel is a continuous stream. You have a separation of content and presentation with HTML, while Minitel is only a sequence of either a character or a control code.
The main feature of the web is its hyperlink system, while there is absolutely nothing like that with Minitel. HTML is also hardware agnostics, while Minitel is completely tied to hardware.
For the web, you have HTML, CSS, JavaScript, but you have only video text for Minitel. What's needed to emulate Minitel? A widely available platform with some specific capabilities.
It must be able to do asynchronous communication, to have graphic primitives, and it is divided into three parts, the video interpreter, the video controller,
and a Minitel service to connect to. Actually, with HTML5 and ES6, all we need is there, because we can draw the Minitel screen with Canvas, we can do keyboard click with audio,
and the main capability is the WebSocket, which can do full-duplex communication. Also, ES6 brings lots of programming facilities, like premises, like functional approach, etc.
So once you have the dots, it's very simple to represent a screen. A screen is made of cells, which can be either character, mosaic character, or denominator. The denominator is
the space. The video display unit written in JavaScript reads the video memory 50 times per second. It will draw modified rows and also blinking characters. It will draw this with
the foreground and background color, with video inversion, with underline, with size, with mask, but when you start underline, it will be taken into account just after the character. But when
you use other attributes, it will be taken into account immediately. So there are very, very small problems that can arise with this technology. So I will be showing you
the Minitel page editor. It's available online. So first, we clear the screen.
We write content. If you want to have a double-size character, you can move
the double size, and here you have the first problem with the Minitel. You cannot double size
the first line. So you have to go through the second line, and also every absolute move
resets all attributes. So you have to put the sequence in the right order. You can blink.
The marquee was made by the server. You can do video inversion. You can also
draw something. You must be aware that I have a mouse, but in 1980 and 1990,
it was entirely made at keyboard. Yes, so your question was how you can have all these colors?
How many colors on the screen at the same time? Eight. And it's also the complete palette. It's because it's encoded in three bits, red, green, and blue. So you have black, red, green,
blue, cyan, magenta, yellow, and white. Yes, because though you see pixels, in fact,
they are characters. You have here apparently more than two colors
in a cell. It's only because you are in an editor. If you save graphics,
so you can draw the thing at the minute speed. You can also record your animation in a GIF
format. The GIF encoder was entirely made in JavaScript. Maybe it's a bug.
So this is for the editor. What is the letter on the top right?
The letter on the top right indicated the state of the connection. Yes, no.
The editor works entirely locally. Yes, I will show you with the next demo because
here's the killer app of the Minitel. So, for example, if I type my name, I will do
sweet is next. So you go to the next field. Next. And what is send? For this, you have to
thank Christian Quest because I did the font and he did the server.
Yes, they are real numbers because the server Christian Quest made online just queries the 118, 712. So that's why they have 10 digits.
Yes, but these are data.
When you use the Minitel, you would do a 3615. This is the kiosk. And you would type the name of the service, for example.
So this is only the looking screen. Behind it, you have a Mastodon instance.
It's okay. So on the emulator, you can set the speed. So it's a teaser. It was a service
you could access either by the kiosk or by the standard numbers. So depending on your Minitel,
you would use one of these numbers. Sorry. Like a special site in which I can search for the kiosk to keep the exact name. Yes. Sorry.
Yes. And the items were selected by typing the characters. So for example, for the museum,
you would type star M-U-S. You could use code to make special effects,
et cetera. You also have a love story.
Do you have any questions?
Ah, it's only a forum.