onebigear
/
text_archaeology
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

added labels like museum tags for items.

Browse Source
master
onebigear 3 years ago
parent 946c0cc505
commit 4c716dab96
3 changed files with 368 additions and 5 deletions
Show Stats Download Patch File Download Diff File

354
publication/index.html
Unescape Escape View File

@ -3,13 +3,13 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title> media archaeology jp multimedia playlist Test</title> <title> text archaeology Test</title>
<link rel="stylesheet" type="text/css" href="static/style.css"> <link rel="stylesheet" type="text/css" href="static/style.css">
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div class ="heading"> <div class ="heading">
<h1 class = "title">media archaeology jp multimedia playlist</h1> <h1 class = "title">text archaeology</h1>
</div> </div>
<div class="gallery"> <div class="gallery">
@ -17,172 +17,522 @@
<img src="img/" alt="Big in japan"> <img src="img/" alt="Big in japan">
</a> </a>
<div class = "label-container">
<div class ="title"> <p> Title: Big in japan</p></div>
<div class ="type"> <p> Category: </p></div>
<div class ="content"> <p> Content: </p></div>
<div class ="annotation"> <p> Annotation: unknown</p></div>
</div>
<a class = "" href="https://www.youtube.com/watch?v=k8ozVkIkr-g"> <a class = "" href="https://www.youtube.com/watch?v=k8ozVkIkr-g">
<img src="img/" alt="残酷な天使のテーゼ"> <img src="img/" alt="残酷な天使のテーゼ">
</a> </a>
<div class = "label-container">
<div class ="title"> <p> Title: 残酷な天使のテーゼ</p></div>
<div class ="type"> <p> Category: </p></div>
<div class ="content"> <p> Content: </p></div>
<div class ="annotation"> <p> Annotation: neuro text</p></div>
</div>
<a class = "print" href="https://archive.org/details/famicom-manga/page/n1/mode/2up"> <a class = "print" href="https://archive.org/details/famicom-manga/page/n1/mode/2up">
<img src="img/famicon_manga.png" alt="Nintendo Famicom user manual manga"> <img src="img/famicon_manga.png" alt="Nintendo Famicom user manual manga">
</a> </a>
<div class = "label-container">
<div class ="title"> <p> Title: Nintendo Famicom user manual manga</p></div>
<div class ="type"> <p> Category: print</p></div>
<div class ="content"> <p> Content: Nintendo Famicom user manual in manga format.</p></div>
<div class ="annotation"> <p> Annotation: famicon games displays text</p></div>
</div>
<a class = "audio" href="https://www.nicovideo.jp/watch/sm2380352"> <a class = "audio" href="https://www.nicovideo.jp/watch/sm2380352">
<img src="img/nifty_serve.png" alt="????NIFTY-Serve"> <img src="img/nifty_serve.png" alt="????NIFTY-Serve">
</a> </a>
<div class = "label-container">
<div class ="title"> <p> Title: ????NIFTY-Serve</p></div>
<div class ="type"> <p> Category: audio</p></div>
<div class ="content"> <p> Content: A melancholic song written for NIFTY Serve, a telecommunications services in Japan active from 1987 to 2006. The lyrics in Japanese goes:
真夜中すぎに目が醒めて
君のくれたメ～ル読み返す
まだ見ぬ　その笑顔
僕の中で膨らむ
夢はモデムに託すもの
ハ～ドディスクは愛のＬＯＧだらけ
ふたりを　つないでる
赤いモジュラ～ケ～ブル
チャットしていたい　Ａｈ－
君と朝が来るまで
あふれる文字　時を止める
燃えるハ～ト抑えきれずに
悲しみの　NIFTY-Serve
逢いたいけれど　君の
住む街はとても遠く
悲しみの　NIFTY-Serve
PAGE 送るよ　今日も
スクラコ～ドは　ふたりのイニシャルさ チャットしていたい　Ａｈ－
空が白くなるまで
ながれる文字　時を止める
燃える課金払いきれずに
悲しみの　NIFTY-Serve
スラユ～しても　君は
知らないだれかとト～ク
悲しみの　NIFTY-Serve
ダイヤルするよ　今日も
君のハ～トは　Host cleard the call
NIFTY-Serve
逢いたいけれど　君の
住む街はとても遠く
悲しみの　NIFTY-Serve
ダイヤルするよ　今日も
君のハ～トは　Host cleard the call The auto-translation goes: I woke up after midnight and read back the mail you gave me
The smile I haven't seen yet swells in me
Dreams are left to the modem Her hard disk is full of love LOG
She connects the two with a red modular I want to chat Ah- until the morning comes with you
Overflowing characters Stop the time Burning hearts I can't control
NIFTY-Serve of sadness I want to meet you, but the city you live in is very far away
I'll send you the NIFTY-Serve PAGE of sadness.
I want to chat Ah-until the sky turns white
Characters that flow Stop time Burning charges I can't pay
Sadness NIFTY-Serve Surayu-But you don't know who you are
Sadness NIFTY-Serve I'll dial you today
Your heart is Host cleared the call
NIFTY-Serve I want to meet you, but the city you live in is very far away
Sadness NIFTY-Serve I'll dial you today
Your heart is Host cleared the call</p></div>
<div class ="annotation"> <p> Annotation: writing text in the Nifty serve network, textual networks </p></div>
</div>
<a class = "" href="https://archive.org/details/cd_laventurier_indochine/disc1/01.+Indochine+-+L'Aventurier.flac"> <a class = "" href="https://archive.org/details/cd_laventurier_indochine/disc1/01.+Indochine+-+L'Aventurier.flac">
<img src="img/" alt="L’aventurier"> <img src="img/" alt="L’aventurier">
</a> </a>
<div class = "label-container">
<div class ="title"> <p> Title: L’aventurier</p></div>
<div class ="type"> <p> Category: </p></div>
<div class ="content"> <p> Content: </p></div>
<div class ="annotation"> <p> Annotation: unknown</p></div>
</div>
<a class = "audio" href=" <a class = "audio" href="
https://archive.org/details/neuromancer-william-gibson/1+of+2.mp3"> https://archive.org/details/neuromancer-william-gibson/1+of+2.mp3">
<img src="img/neuromancer.png" alt="neuromancer"> <img src="img/neuromancer.png" alt="neuromancer">
</a> </a>
<div class = "label-container">
<div class ="title"> <p> Title: neuromancer</p></div>
<div class ="type"> <p> Category: audio</p></div>
<div class ="content"> <p> Content: Chiba city blues, razor girl, console cowboy, and the matrix.</p></div>
<div class ="annotation"> <p> Annotation: text is the matrix; sadie plant writing on zeros and ones, text, textile, matrix, networked text, annotation as peripheral text but can be potentially subversive.</p></div>
</div>
<a class = "video" href="https://archive.org/details/ToshibaPasopiaIQMSX_1985"> <a class = "video" href="https://archive.org/details/ToshibaPasopiaIQMSX_1985">
<img src="img/toshiba_msx.png" alt="toshiba msx advertisement in 1985"> <img src="img/toshiba_msx.png" alt="toshiba msx advertisement in 1985">
</a> </a>
<div class = "label-container">
<div class ="title"> <p> Title: toshiba msx advertisement in 1985</p></div>
<div class ="type"> <p> Category: video</p></div>
<div class ="content"> <p> Content: Advertisement featuring kanji input.</p></div>
<div class ="annotation"> <p> Annotation: advertisement of a text processor</p></div>
</div>
<a class = "video" href="https://archive.org/details/Timothy_Leary_Archives_239"> <a class = "video" href="https://archive.org/details/Timothy_Leary_Archives_239">
<img src="img/" alt="timothy leary in japan"> <img src="img/" alt="timothy leary in japan">
</a> </a>
<div class = "label-container">
<div class ="title"> <p> Title: timothy leary in japan</p></div>
<div class ="type"> <p> Category: video</p></div>
<div class ="content"> <p> Content: Timothy Leary interviewed in japan. watch with caution.</p></div>
<div class ="annotation"> <p> Annotation: </p></div>
</div>
<a class = "game" href="https://archive.org/details/NESLongplay918AmericaDaitouryouSenkyo"> <a class = "game" href="https://archive.org/details/NESLongplay918AmericaDaitouryouSenkyo">
<img src="img/america_pre.png" alt=" <img src="img/america_pre.png" alt="
NES Longplay [918] America Daitouryou Senkyo "> NES Longplay [918] America Daitouryou Senkyo ">
</a> </a>
<div class = "label-container">
<div class ="title"> <p> Title:
NES Longplay [918] America Daitouryou Senkyo </p></div>
<div class ="type"> <p> Category: game</p></div>
<div class ="content"> <p> Content: A longplay of an NES game of the American presidential election.</p></div>
<div class ="annotation"> <p> Annotation: unknown</p></div>
</div>
<a class = "" href="https://archive.org/details/artificial-intelligence-on-the-commodore-64/page/n33/mode/2up"> <a class = "" href="https://archive.org/details/artificial-intelligence-on-the-commodore-64/page/n33/mode/2up">
<img src="img/" alt="Artificial intelligence on the Commodore 64 : make your micro think"> <img src="img/" alt="Artificial intelligence on the Commodore 64 : make your micro think">
</a> </a>
<div class = "label-container">
<div class ="title"> <p> Title: Artificial intelligence on the Commodore 64 : make your micro think</p></div>
<div class ="type"> <p> Category: </p></div>
<div class ="content"> <p> Content: </p></div>
<div class ="annotation"> <p> Annotation: </p></div>
</div>
<a class = "" href=""> <a class = "" href="">
<img src="img/yaruo_text.png" alt="yaruo text"> <img src="img/yaruo_text.png" alt="yaruo text">
</a> </a>
<div class = "label-container">
<div class ="title"> <p> Title: yaruo text</p></div>
<div class ="type"> <p> Category: </p></div>
<div class ="content"> <p> Content: </p></div>
<div class ="annotation"> <p> Annotation: ASCII text memetic network</p></div>
</div>
<a class = "archive" href="https://gogoyaru.blogspot.com/"> <a class = "archive" href="https://gogoyaru.blogspot.com/">
<img src="img/yaruo.png" alt="Afternoon yaruo time"> <img src="img/yaruo.png" alt="Afternoon yaruo time">
</a> </a>
<div class = "label-container">
<div class ="title"> <p> Title: Afternoon yaruo time</p></div>
<div class ="type"> <p> Category: archive</p></div>
<div class ="content"> <p> Content: </p></div>
<div class ="annotation"> <p> Annotation: ASCII text memetic network</p></div>
</div>
<a class = "archive, initiative, folkscanomy" href="http://azeria.jp/index.php"> <a class = "archive, initiative, folkscanomy" href="http://azeria.jp/index.php">
<img src="img/aa_archive_portal.png" alt="AA/ASCIIART archive"> <img src="img/aa_archive_portal.png" alt="AA/ASCIIART archive">
</a> </a>
<div class = "label-container">
<div class ="title"> <p> Title: AA/ASCIIART archive</p></div>
<div class ="type"> <p> Category: archive, initiative, folkscanomy</p></div>
<div class ="content"> <p> Content: </p></div>
<div class ="annotation"> <p> Annotation: ASCII text </p></div>
</div>
<a class = "archive, initiative, folkscanomy" href="https://lolicore.net/"> <a class = "archive, initiative, folkscanomy" href="https://lolicore.net/">
<img src="img/lolicore.jpg" alt="Lolicore music archive"> <img src="img/lolicore.jpg" alt="Lolicore music archive">
</a> </a>
<div class = "label-container">
<div class ="title"> <p> Title: Lolicore music archive</p></div>
<div class ="type"> <p> Category: archive, initiative, folkscanomy</p></div>
<div class ="content"> <p> Content: </p></div>
<div class ="annotation"> <p> Annotation: </p></div>
</div>
<a class = "archive" href="https://museum.ipsj.or.jp/en/computer/device/printer/0079.html"> <a class = "archive" href="https://museum.ipsj.or.jp/en/computer/device/printer/0079.html">
<img src="img/oki_wiredot.png" alt="Oki wiredot printer"> <img src="img/oki_wiredot.png" alt="Oki wiredot printer">
</a> </a>
<div class = "label-container">
<div class ="title"> <p> Title: Oki wiredot printer</p></div>
<div class ="type"> <p> Category: archive</p></div>
<div class ="content"> <p> Content: </p></div>
<div class ="annotation"> <p> Annotation: wire controlled dot matrix printer</p></div>
</div>
<a class = "archive" href="https://web.archive.org/web/20150319073438/http://www.toragiku.com/kopa/pyuta4.htm"> <a class = "archive" href="https://web.archive.org/web/20150319073438/http://www.toragiku.com/kopa/pyuta4.htm">
<img src="img/pyuuta.png" alt="Pyuuta"> <img src="img/pyuuta.png" alt="Pyuuta">
</a> </a>
<div class = "label-container">
<div class ="title"> <p> Title: Pyuuta</p></div>
<div class ="type"> <p> Category: archive</p></div>
<div class ="content"> <p> Content: </p></div>
<div class ="annotation"> <p> Annotation: </p></div>
</div>
<a class = "archive" href="https://www.floodgap.com/retrobits/tomy/pyuuta/pyuuta1.html"> <a class = "archive" href="https://www.floodgap.com/retrobits/tomy/pyuuta/pyuuta1.html">
<img src="img/pyuuta_text.jpg" alt="Pyuuta text"> <img src="img/pyuuta_text.jpg" alt="Pyuuta text">
</a> </a>
<div class = "label-container">
<div class ="title"> <p> Title: Pyuuta text</p></div>
<div class ="type"> <p> Category: archive</p></div>
<div class ="content"> <p> Content: </p></div>
<div class ="annotation"> <p> Annotation: </p></div>
</div>
<a class = "archive" href="https://www.floodgap.com/retrobits/tomy/pyuuta/pyuuta1.html"> <a class = "archive" href="https://www.floodgap.com/retrobits/tomy/pyuuta/pyuuta1.html">
<img src="img/pyuuta_text_color.jpg" alt="Pyuuta text color"> <img src="img/pyuuta_text_color.jpg" alt="Pyuuta text color">
</a> </a>
<div class = "label-container">
<div class ="title"> <p> Title: Pyuuta text color</p></div>
<div class ="type"> <p> Category: archive</p></div>
<div class ="content"> <p> Content: </p></div>
<div class ="annotation"> <p> Annotation: </p></div>
</div>
<a class = "text, mathematics, anecdote" href=""> <a class = "text, mathematics, anecdote" href="">
<img src="img/recursion_monk.png" alt="Recursion monk text"> <img src="img/recursion_monk.png" alt="Recursion monk text">
</a> </a>
<div class = "label-container">
<div class ="title"> <p> Title: Recursion monk text</p></div>
<div class ="type"> <p> Category: text, mathematics, anecdote</p></div>
<div class ="content"> <p> Content: </p></div>
<div class ="annotation"> <p> Annotation: </p></div>
</div>
<a class = "archive" href=""> <a class = "archive" href="">
<img src="img/text_flip.png" alt="Text flip demo"> <img src="img/text_flip.png" alt="Text flip demo">
</a> </a>
<div class = "label-container">
<div class ="title"> <p> Title: Text flip demo</p></div>
<div class ="type"> <p> Category: archive</p></div>
<div class ="content"> <p> Content: Graphical approach to manipulating textual glyphs.</p></div>
<div class ="annotation"> <p> Annotation: </p></div>
</div>
<a class = "artifact" href="http://www.wangma.net.cn/prodetail.aspx?sm=2&p=3"> <a class = "artifact" href="http://www.wangma.net.cn/prodetail.aspx?sm=2&p=3">
<img src="img/wang_ma_mouse.jpg" alt="Wang Code Mouse Keyboard 王码键字通"> <img src="img/wang_ma_mouse.jpg" alt="Wang Code Mouse Keyboard 王码键字通">
</a> </a>
<div class = "label-container">
<div class ="title"> <p> Title: Wang Code Mouse Keyboard 王码键字通</p></div>
<div class ="type"> <p> Category: artifact</p></div>
<div class ="content"> <p> Content: 单手打字的“王码打字微电脑”——王码键字通 "Wang Code Typing Microcomputer" for One-handed Typing - Wang Code Mouse Keyboard</p></div>
<div class ="annotation"> <p> Annotation: </p></div>
</div>
<a class = "archive, interview" href="https://zhuanlan.zhihu.com/p/37715470"> <a class = "archive, interview" href="https://zhuanlan.zhihu.com/p/37715470">
<img src="img/f_basic_yuxing.png" alt="F Basic Yuxing"> <img src="img/f_basic_yuxing.png" alt="F Basic Yuxing">
</a> </a>
<div class = "label-container">
<div class ="title"> <p> Title: F Basic Yuxing</p></div>
<div class ="type"> <p> Category: archive, interview</p></div>
<div class ="content"> <p> Content: </p></div>
<div class ="annotation"> <p> Annotation: </p></div>
</div>
<a class = "archive" href=""> <a class = "archive" href="">
<img src="img/cec_demo_comp_beijing.png" alt="首届儿童中华学习机表演赛北京赛区剪影 Photos From The First China Educational Computer Demo Competition In Beijing"> <img src="img/cec_demo_comp_beijing.png" alt="首届儿童中华学习机表演赛北京赛区剪影 Photos From The First China Educational Computer Demo Competition In Beijing">
</a> </a>
<div class = "label-container">
<div class ="title"> <p> Title: 首届儿童中华学习机表演赛北京赛区剪影 Photos From The First China Educational Computer Demo Competition In Beijing</p></div>
<div class ="type"> <p> Category: archive</p></div>
<div class ="content"> <p> Content: </p></div>
<div class ="annotation"> <p> Annotation: </p></div>
</div>
<a class = "archive" href=""> <a class = "archive" href="">
<img src="img/cec_demo_comp_award_3.png" alt="首届儿童中华学习机表演赛北京赛区剪影 Photos From The First China Educational Computer Demo Competition In Beijing"> <img src="img/cec_demo_comp_award_3.png" alt="首届儿童中华学习机表演赛北京赛区剪影 Photos From The First China Educational Computer Demo Competition In Beijing">
</a> </a>
<div class = "label-container">
<div class ="title"> <p> Title: 首届儿童中华学习机表演赛北京赛区剪影 Photos From The First China Educational Computer Demo Competition In Beijing</p></div>
<div class ="type"> <p> Category: archive</p></div>
<div class ="content"> <p> Content: </p></div>
<div class ="annotation"> <p> Annotation: </p></div>
</div>
<a class = "archive" href=""> <a class = "archive" href="">
<img src="img/cec_demo_comp_award_2.png" alt="首届儿童中华学习机表演赛北京赛区剪影 Photos From The First China Educational Computer Demo Competition In Beijing"> <img src="img/cec_demo_comp_award_2.png" alt="首届儿童中华学习机表演赛北京赛区剪影 Photos From The First China Educational Computer Demo Competition In Beijing">
</a> </a>
<div class = "label-container">
<div class ="title"> <p> Title: 首届儿童中华学习机表演赛北京赛区剪影 Photos From The First China Educational Computer Demo Competition In Beijing</p></div>
<div class ="type"> <p> Category: archive</p></div>
<div class ="content"> <p> Content: </p></div>
<div class ="annotation"> <p> Annotation: </p></div>
</div>
<a class = "archive" href=""> <a class = "archive" href="">
<img src="img/cec_demo_comp_award.png" alt="首届儿童中华学习机表演赛北京赛区剪影 Photos From The First China Educational Computer Demo Competition In Beijing"> <img src="img/cec_demo_comp_award.png" alt="首届儿童中华学习机表演赛北京赛区剪影 Photos From The First China Educational Computer Demo Competition In Beijing">
</a> </a>
<div class = "label-container">
<div class ="title"> <p> Title: 首届儿童中华学习机表演赛北京赛区剪影 Photos From The First China Educational Computer Demo Competition In Beijing</p></div>
<div class ="type"> <p> Category: archive</p></div>
<div class ="content"> <p> Content: </p></div>
<div class ="annotation"> <p> Annotation: </p></div>
</div>
<a class = "archive" href=""> <a class = "archive" href="">
<img src="img/cec_duo_2.png" alt="Cover from China Educational Computer Magazine, July 1990"> <img src="img/cec_duo_2.png" alt="Cover from China Educational Computer Magazine, July 1990">
</a> </a>
<div class = "label-container">
<div class ="title"> <p> Title: Cover from China Educational Computer Magazine, July 1990</p></div>
<div class ="type"> <p> Category: archive</p></div>
<div class ="content"> <p> Content: </p></div>
<div class ="annotation"> <p> Annotation: </p></div>
</div>
<a class = "archive" href="https://archive.org/details/zhonghuaxuexiji-90-06/mode/2up"> <a class = "archive" href="https://archive.org/details/zhonghuaxuexiji-90-06/mode/2up">
<img src="img/duo_child_mother_cec.png" alt="Illustration from China Educational Computer Magazine"> <img src="img/duo_child_mother_cec.png" alt="Illustration from China Educational Computer Magazine">
</a> </a>
<div class = "label-container">
<div class ="title"> <p> Title: Illustration from China Educational Computer Magazine</p></div>
<div class ="type"> <p> Category: archive</p></div>
<div class ="content"> <p> Content: </p></div>
<div class ="annotation"> <p> Annotation: </p></div>
</div>
<a class = "archive" href=""> <a class = "archive" href="">
<img src="img/cec_demo_comp.png" alt="Newspaper Clip Five Institutes To Host Children’s China Education Computer Demo Contest"> <img src="img/cec_demo_comp.png" alt="Newspaper Clip Five Institutes To Host Children’s China Education Computer Demo Contest">
</a> </a>
<div class = "label-container">
<div class ="title"> <p> Title: Newspaper Clip Five Institutes To Host Children’s China Education Computer Demo Contest</p></div>
<div class ="type"> <p> Category: archive</p></div>
<div class ="content"> <p> Content: Transcript in Chinese Auto-translation in English The Ministry of Machinery and Electronics, the Ministry of Health, the State Science and Technology Commission, the China Association for Science and Technology, and the All-China Women's Federation entrusted the China Learning Machine Popularization Association to hold the "Children's Chinese Learning Machine Exhibition Competition" in Beijing, Tianjin, Shanghai and regions on the eve of "June 1". Since the mid-1980s, 110,000 Chinese Educational Computers have entered primary and secondary schools, families and some social groups. In the summer camps, winter camps and some activities held every year, various competitions of Chinese learning machines are indispensable. The age limit for participating in this exhibition competition is 3 to 8 years old. The content of the demo competition is based on educational software, and examines the keystroke method, boot sequence, input speed, etc. The judges will rate according to the age group. The performance time in Beijing is scheduled for May 27.</p></div>
<div class ="annotation"> <p> Annotation: Institutional support and organization for the CEC computer models and computer literacy for children held before the International Children’s Day. Rubric based exam-like competition that cover computer skills that crucially deals with being capable with using text in the computer system: keyboard striking, input speed. The software the competition was using were referred to as “intellectually beneficial software”(????). Note the red ribbon attire worn by a participating child in the photograph. Certainly, there are performative and demonstrative aspects to the event. It is critically and culturally worth to explore the differences between CEC demo competitions, and its Western “counterparts”: live coding and demoscene. It is jawbreaking to draw such a comparison, as live coding and demoscene derive from much less bureaucratic contexts that lean towards artistry and creative expression. To begin with, I argue that based on my personal experience and archival research, the computer literacy project embodied in the lineage that CEC is in, had hinted the vibes of rigorosity and elitism (selection and problem solving agendas as opposed to exploration open to all and open minded: info olympiads, problem sets in magazines). There is a vital potential to subvert this particular version of history of computer literacy. </p></div>
</div>
<a class = "archive" href="https://archive.org/details/cec199004/page/n51/mode/2up"> <a class = "archive" href="https://archive.org/details/cec199004/page/n51/mode/2up">
<img src="img/ccc_2.png" alt="Advertisement of Weifang Computer Company’s CCC (Computers, Communication, Chinese Character Processing) agenda featured in China Educational Magazine"> <img src="img/ccc_2.png" alt="Advertisement of Weifang Computer Company’s CCC (Computers, Communication, Chinese Character Processing) agenda featured in China Educational Magazine">
</a> </a>
<div class = "label-container">
<div class ="title"> <p> Title: Advertisement of Weifang Computer Company’s CCC (Computers, Communication, Chinese Character Processing) agenda featured in China Educational Magazine</p></div>
<div class ="type"> <p> Category: archive</p></div>
<div class ="content"> <p> Content: </p></div>
<div class ="annotation"> <p> Annotation: </p></div>
</div>
<a class = "archive" href="https://archive.org/details/cec199004/page/n51/mode/2up"> <a class = "archive" href="https://archive.org/details/cec199004/page/n51/mode/2up">
<img src="img/ccc_1.png" alt="Advertisement of Weifang Computer Company’s CCC (Computers, Communication, Chinese Character Processing) agenda featured in China Educational Magazine"> <img src="img/ccc_1.png" alt="Advertisement of Weifang Computer Company’s CCC (Computers, Communication, Chinese Character Processing) agenda featured in China Educational Magazine">
</a> </a>
<div class = "label-container">
<div class ="title"> <p> Title: Advertisement of Weifang Computer Company’s CCC (Computers, Communication, Chinese Character Processing) agenda featured in China Educational Magazine</p></div>
<div class ="type"> <p> Category: archive</p></div>
<div class ="content"> <p> Content: </p></div>
<div class ="annotation"> <p> Annotation: </p></div>
</div>
<a class = "archive, patent" href=""> <a class = "archive, patent" href="">
<img src="img/word_trie.png" alt="Visualization of a trie structure to store Chinese glyphs in a patent document"> <img src="img/word_trie.png" alt="Visualization of a trie structure to store Chinese glyphs in a patent document">
</a> </a>
<div class = "label-container">
<div class ="title"> <p> Title: Visualization of a trie structure to store Chinese glyphs in a patent document</p></div>
<div class ="type"> <p> Category: archive, patent</p></div>
<div class ="content"> <p> Content: </p></div>
<div class ="annotation"> <p> Annotation: </p></div>
</div>
<a class = "archive" href=""> <a class = "archive" href="">
<img src="img/cec_drawing_stroke.png" alt="An aesthetical and painterly visualization of text varying in stroke width "> <img src="img/cec_drawing_stroke.png" alt="An aesthetical and painterly visualization of text varying in stroke width ">
</a> </a>
<div class = "label-container">
<div class ="title"> <p> Title: An aesthetical and painterly visualization of text varying in stroke width </p></div>
<div class ="type"> <p> Category: archive</p></div>
<div class ="content"> <p> Content: </p></div>
<div class ="annotation"> <p> Annotation: </p></div>
</div>
<a class = "archive" href="https://archive.org/details/congwawazuoqi"> <a class = "archive" href="https://archive.org/details/congwawazuoqi">
<img src="img/congwawazuoqi.jpg" alt="计算机由娃娃抓起 Computer literacy project implemented for children in China"> <img src="img/congwawazuoqi.jpg" alt="计算机由娃娃抓起 Computer literacy project implemented for children in China">
</a> </a>
<div class = "label-container">
<div class ="title"> <p> Title: 计算机由娃娃抓起 Computer literacy project implemented for children in China</p></div>
<div class ="type"> <p> Category: archive</p></div>
<div class ="content"> <p> Content: </p></div>
<div class ="annotation"> <p> Annotation: </p></div>
</div>
<a class = "archive" href="https://archive.org/details/zhonghuaxuexiji-90-08/page/n51/mode/2up"> <a class = "archive" href="https://archive.org/details/zhonghuaxuexiji-90-08/page/n51/mode/2up">
<img src="img/wawaxuediannao.png" alt="Cover image from 中华学习机 90/08 - (Zhōnghuá xuéxí jī / CEC-I) - China Educational computer - 中国中华学习机普及协会会刊"> <img src="img/wawaxuediannao.png" alt="Cover image from 中华学习机 90/08 - (Zhōnghuá xuéxí jī / CEC-I) - China Educational computer - 中国中华学习机普及协会会刊">
</a> </a>
<div class = "label-container">
<div class ="title"> <p> Title: Cover image from 中华学习机 90/08 - (Zhōnghuá xuéxí jī / CEC-I) - China Educational computer - 中国中华学习机普及协会会刊</p></div>
<div class ="type"> <p> Category: archive</p></div>
<div class ="content"> <p> Content: </p></div>
<div class ="annotation"> <p> Annotation: </p></div>
</div>
<a class = "software" href="https://archive.org/details/cws-1-sys/CWS_SCR01.png"> <a class = "software" href="https://archive.org/details/cws-1-sys/CWS_SCR01.png">
<img src="img/CWS_SCR01.png" alt="中华学习机中西文字处理系统CWS ( Chinese Word Star ) V1.0 for AppleII & CEC-I"> <img src="img/CWS_SCR01.png" alt="中华学习机中西文字处理系统CWS ( Chinese Word Star ) V1.0 for AppleII & CEC-I">
</a> </a>
<div class = "label-container">
<div class ="title"> <p> Title: 中华学习机中西文字处理系统CWS ( Chinese Word Star ) V1.0 for AppleII & CEC-I</p></div>
<div class ="type"> <p> Category: software</p></div>
<div class ="content"> <p> Content: CWS ( Chinese Word Star ) is a Chinese & English word processing system based on Apple II and CEC ( China Educational Computer , a series of clones of Apple II+ / IIe with onboard Chinese ROM & LIB and other enhancements , 1987 - 1993 ). It provides Chinese character processing functions similar to and stronger than Wordstar for the above models, including rich editing shortcut keys, special effects of text printing, Chinese tabulation function, etc. With the help of CWS, the low-end 8-bit microcomputer systems such as Apple II and CEC finally have the most important productivity tool software for word processing.</p></div>
<div class ="annotation"> <p> Annotation: </p></div>
</div>
<a class = "song, initiative, folkscanomy" href="https://www.nicovideo.jp/watch/sm547620"> <a class = "song, initiative, folkscanomy" href="https://www.nicovideo.jp/watch/sm547620">
<img src="img/heart_hard_drive.png" alt="Heart hard drive illustration from NIFTY-Serve Song"> <img src="img/heart_hard_drive.png" alt="Heart hard drive illustration from NIFTY-Serve Song">
</a> </a>
<div class = "label-container">
<div class ="title"> <p> Title: Heart hard drive illustration from NIFTY-Serve Song</p></div>
<div class ="type"> <p> Category: song, initiative, folkscanomy</p></div>
<div class ="content"> <p> Content: </p></div>
<div class ="annotation"> <p> Annotation: </p></div>
</div>
<a class = "artifact" href="https://www.youtube.com/watch?v=HB0hFhw3RAI"> <a class = "artifact" href="https://www.youtube.com/watch?v=HB0hFhw3RAI">
<img src="img/flowing_text_jp.png" alt="文字が流れるデジタルＬＥＤ看板"> <img src="img/flowing_text_jp.png" alt="文字が流れるデジタルＬＥＤ看板">
</a> </a>
<div class = "label-container">
<div class ="title"> <p> Title: 文字が流れるデジタルＬＥＤ看板</p></div>
<div class ="type"> <p> Category: artifact</p></div>
<div class ="content"> <p> Content: </p></div>
<div class ="annotation"> <p> Annotation: </p></div>
</div>
<a class = "archive" href=""> <a class = "archive" href="">
<img src="img/cec_welcome.png" alt=""> <img src="img/cec_welcome.png" alt="">
</a> </a>
<div class = "label-container">
<div class ="title"> <p> Title: </p></div>
<div class ="type"> <p> Category: archive</p></div>
<div class ="content"> <p> Content: </p></div>
<div class ="annotation"> <p> Annotation: </p></div>
</div>
<a class = "archive" href=""> <a class = "archive" href="">
<img src="img/cec_congwawazuoqi-2.png" alt=""> <img src="img/cec_congwawazuoqi-2.png" alt="">
</a> </a>
<div class = "label-container">
<div class ="title"> <p> Title: </p></div>
<div class ="type"> <p> Category: archive</p></div>
<div class ="content"> <p> Content: </p></div>
<div class ="annotation"> <p> Annotation: </p></div>
</div>
<a class = "archive" href=""> <a class = "archive" href="">
<img src="img/cec_comp_ribbon_90_8.png" alt=""> <img src="img/cec_comp_ribbon_90_8.png" alt="">
</a> </a>
<div class = "label-container">
<div class ="title"> <p> Title: </p></div>
<div class ="type"> <p> Category: archive</p></div>
<div class ="content"> <p> Content: </p></div>
<div class ="annotation"> <p> Annotation: </p></div>
</div>
<a class = "archive" href=""> <a class = "archive" href="">
<img src="img/congwawazuoqi.jpg" alt=""> <img src="img/congwawazuoqi.jpg" alt="">
</a> </a>
<div class = "label-container">
<div class ="title"> <p> Title: </p></div>
<div class ="type"> <p> Category: archive</p></div>
<div class ="content"> <p> Content: </p></div>
<div class ="annotation"> <p> Annotation: </p></div>
</div>
</div> </div>

6
publication/static/style.css
Unescape Escape View File

@ -48,5 +48,11 @@ a.audio
font-size:60px; font-size:60px;
} }
div.label-container
{
background-color:azure;
width: fit-content;
}

13
publication/templates/playlist.html
Unescape Escape View File

@ -3,20 +3,27 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title> media archaeology jp multimedia playlist {{ title }}</title> <title> text archaeology {{ title }}</title>
<link rel="stylesheet" type="text/css" href="static/style.css"> <link rel="stylesheet" type="text/css" href="static/style.css">
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div class ="heading"> <div class ="heading">
<h1 class = "title">media archaeology jp multimedia playlist</h1> <h1 class = "title">text archaeology</h1>
</div> </div>
<div class="gallery"> <div class="gallery">
{% for item in playlist %} {% for item in playlist %}
<a class = "{{item.type}}" href="{{ item.link }}"> <a class = "{{item.type}}" href="{{ item.link }}">
<img src="img/{{ item.img }}" alt="{{ item.title }}"> <img src="img/{{ item.img }}" alt="{{ item.title }}">
</a> </a>
{% endfor %}
<div class = "label-container">
<div class ="title"> <p> Title: {{item.title}}</p></div>
<div class ="type"> <p> Category: {{item.type}}</p></div>
<div class ="content"> <p> Content: {{item.content}}</p></div>
<div class ="annotation"> <p> Annotation: {{item.onText}}</p></div>
</div>
{% endfor %}
</div> </div>

Write Preview
Loading…
Cancel
Save