page generation with xml

master
Castro0o 10 years ago
parent a8c9ce58a5
commit c0d9ceb633

@ -1,5 +1,10 @@
# MMD&C Graduation Website CMS: from Mediawiki to HTML # MMD&C Graduation Website CMS: from Mediawiki to HTML
## Depencies
* Pandoc
* Python libraries: html5lib, mwclient,
## Run
Update the website with graduation from work from a particular year, by running: Update the website with graduation from work from a particular year, by running:
`python mmdc_wiki2web.py --category Graduation_work 2015` `python mmdc_wiki2web.py --category Graduation_work 2015`
@ -16,42 +21,6 @@ style_projectpage.css:
display: none; display: none;
}` }`
## template files
web/page-template.html
1) SCRIPTS in bottom of generated pages does not close proberly. And non-relevant scripts are also still in.
should be:
=========
<script src="./js/jquery-2.1.3.min.js"></script>
<script src="./js/fixedfixed.js"></script>
<script src="./js/fixedsticky.js"></script>
<script src="./js/mainScripts_single.js"></script>
is now:
======
<script src="./js/jquery-2.1.3.min.js" />
<script src="./js/fixedfixed.js" />
<script src="./js/fixedsticky.js" />
<script src="./js/isotope.pkgd.min.js" />
<script src="./js/imagesloaded.pkgd.min.js" />
<script src="./js/mainScripts_single.js" />
web/index-template.html:
1) FIXED broken img files in index-temlpate: white logo + arrowDown/Up
web/page-template.html:
1) [minor] ADDED a space between arrowBack and title for mobile version
css:
Lot's of changes to CSS, including thumbnail not displayed on project page;
iframes no borders, h1/h2/h3 styling, fixes in sidebar, url 'breaks' word now.
## To Do ## To Do
* add auxiliar JSON creation * add auxiliar JSON creation

@ -45,10 +45,7 @@ print 'memberpages', memberpages
# Templates # Templates
######## ########
page_template = open("web/page-template.html", "r") page_template = open("web/page-template.html", "r")
page_template = page_template.read() index_file = open('web/index-template.html', 'r')
index_file = 'web/index-template.html'
index_file = open(index_file, 'r')
index_tree = html5lib.parse(index_file, namespaceHTMLElements=False) index_tree = html5lib.parse(index_file, namespaceHTMLElements=False)
index_container = index_tree.find(".//div[@class='isotope']") #maybe id is important, to destinguish it index_container = index_tree.find(".//div[@class='isotope']") #maybe id is important, to destinguish it
@ -61,11 +58,12 @@ for member in memberpages:
# pageid=member['pageid'] # pageid=member['pageid']
# pagetitle=(member['title'].encode('utf-8')) # pagetitle=(member['title'].encode('utf-8'))
workpage_mw = api_page(member, 'content') workpage_mw = api_page(member, 'content')
# parse workpage_mw
workpage_mw = replace_gallery(workpage_mw) workpage_mw = replace_gallery(workpage_mw)
workpage_mw = replace_video(workpage_mw) workpage_mw = replace_video(workpage_mw)
workdict = parse_work(member, workpage_mw) # create dictionary workpage_mw template workdict = parse_work(member, workpage_mw) # create dictionary workpage_mw template
# Only parse pages with Creator, Title, Thumbnail
if len(workdict['Creator'])>1 and len(workdict['Title'])>1 and len(workdict['Description'])>1 and len(workdict['Thumbnail'])>1: if len(workdict['Creator'])>1 and len(workdict['Title'])>1 and len(workdict['Description'])>1 and len(workdict['Thumbnail'])>1:
for key in workdict.keys(): # convert Extra, Description, Bio to HTML for key in workdict.keys(): # convert Extra, Description, Bio to HTML
if key in ['Extra', 'Description', 'Bio'] and workdict[key]: if key in ['Extra', 'Description', 'Bio'] and workdict[key]:
@ -81,44 +79,52 @@ for member in memberpages:
img = '<img id="thumnail" src="{}" />'.format(workdict[key]) img = '<img id="thumnail" src="{}" />'.format(workdict[key])
# append img to text # append img to text
workdict[key] = workdict[key] # + img workdict[key] = workdict[key] # + img
print 'THUMB', workdict[key] #print 'THUMB', workdict[key]
if type(workdict[key]) is unicode: if type(workdict[key]) is unicode:
workdict[key]=workdict[key].encode('utf-8') workdict[key]=workdict[key].encode('utf-8')
# print workdict[key]
workpage_html = page_template.format(title=workdict['Title'],
creator=workdict['Creator'],
date=workdict['Date'],
website=workdict['Website'],
thumbnail=workdict['Thumbnail'],
bio=workdict['Bio'],
description=workdict['Description'],
extra=workdict['Extra']
)
# parse workpage_html # process html: img full url # create work page
tree = html5lib.parse(workpage_html, namespaceHTMLElements=False) page_tree = html5lib.parse(page_template, namespaceHTMLElements=False)
imgs = tree.findall('.//img') page_title = page_tree.find('.//title')
page_title.text=workdict['Title']
page_creator = page_tree.find('.//h2[@id="creator"]')
page_creator.text=workdict['Creator']
page_title_date = page_tree.find('.//p[@id="title"]')
page_title_date.text="{} {}".format(workdict['Title'], workdict['Date'])
page_description = page_tree.find('.//div[@id="description"]')
page_description_el = ET.fromstring('<div>'+workdict['Description']+'</div>')
page_description.extend(page_description_el)
page_bio = page_tree.find('.//div[@id="bio"]')
page_bio_el = ET.fromstring('<div>'+workdict['Bio']+'</div>')
page_bio.extend(page_bio_el)
page_sortArea_title = page_tree.find('.//div[@id="sortArea"]/p')
page_sortArea_title.text =workdict['Title']
page_extra = page_tree.find('.//div[@id="extra"]')
page_extra_el = ET.fromstring('<div>'+workdict['Extra']+'</div>')
page_extra.extend(page_extra_el)
page_website = page_tree.find('.//p[@class="hightlightSidebar"]/a')
page_website.set('href', workdict['Website'])
page_website.text=workdict['Website']
page_thumb = page_tree.find('.//img[@id="thumbnail"]')
page_thumb.set('src', workdict['Thumbnail'])
# give work page's imgs full url
imgs = page_tree.findall('.//img')
for img in imgs: for img in imgs:
if img.get('id') is not 'logo': if img.get('id') is not 'logo':
src = img.get('src') src = img.get('src')
newsrc = api_file_url(src) ## MOVE FULL URl OPERATION TO MW CONTENT newsrc = api_file_url(src) ## MOVE FULL URl OPERATION TO MW CONTENT
if newsrc: if newsrc:
img.set('src', newsrc) img.set('src', newsrc)
# save work page
#######
# INDEX
#######
# save workpage_html
workpage_html = ET.tostring(tree)
creator = workdict['Creator']#.decode('ascii', 'ignore') creator = workdict['Creator']#.decode('ascii', 'ignore')
creator = creator.replace(' ','_') creator = creator.replace(' ','_')
work_filename = 'web/{}-{}.html'.format(workdict['Date'], creator) work_filename = 'web/{}-{}.html'.format(workdict['Date'], creator)
work_file = open(work_filename, "w") write_html_file(page_tree, work_filename)
work_file.write(workpage_html)
work_file.close()
#######
# INDEX
#######
# insert work to index # insert work to index
index_addwork( parent=index_container, index_addwork( parent=index_container,
workid=key, workid=key,

@ -1,12 +1,12 @@
<html><head> <!DOCTYPE HTML><html><head>
<meta charset="UTF-8" /> <meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport" /> <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<title>Artyom-graduation-work</title> <title>Artyom-graduation-work</title>
<link href="./css/style.css" rel="stylesheet" /> <link href="./css/style.css" rel="stylesheet">
<link href="./css/style_projectpage.css" rel="stylesheet" /> <link href="./css/style_projectpage.css" rel="stylesheet">
<link href="./fonts/fontstylesheet01.css" rel="stylesheet" /> <link href="./fonts/fontstylesheet01.css" rel="stylesheet">
<link href="./css/fixedsticky.css" rel="stylesheet" /> <link href="./css/fixedsticky.css" rel="stylesheet">
</head> </head>
<body> <body>
@ -15,7 +15,7 @@
<div id="sidebarInner"> <div id="sidebarInner">
<div id="sideBarDesc"> <div id="sideBarDesc">
<div id="sideBarDescInfo"> <div id="sideBarDescInfo">
<a class="hoverBackA" href="index.html"><img src="./img/arrowBack.svg" /></a><p>Tempted by Tomorrow</p> <a class="hoverBackA" href="index.html"><img src="./img/arrowBack.svg"></a><p>Tempted by Tomorrow</p>
</div> </div>
<div id="sideBarDescInner"> <div id="sideBarDescInner">
@ -24,17 +24,17 @@
<h2 id="creator">Artyom</h2> <h2 id="creator">Artyom</h2>
<p id="title">Artyom-graduation-work 2015</p> <p id="title">Artyom-graduation-work 2015</p><!--{title} {date} -->
<!-- moved up description --> <!-- moved up description -->
<div id="description"><p>Artyom&#8217;s work entitled &#8220;New Image&#8221; is a series of images of that have been made using Google Image search results. In his work Artyom explores the relations between images and the technology that is responsible for their production and distribution. Namely how technological endeavors came to affect the dynamics within image culture.</p> <div id="description"><p>Artyoms work entitled “New Image” is a series of images of that have been made using Google Image search results. In his work Artyom explores the relations between images and the technology that is responsible for their production and distribution. Namely how technological endeavors came to affect the dynamics within image culture.</p>
</div> </div>
<div id="bio"><p>Artyom Kocharyan (AM) is visual artist based in Rotterdam. His work explores the contemporary visual culture, namely the culture of images that increasingly dominate the world of communication. Artyom&#8217;s work is concerned with the representation aspect of images and their ability to determine our vision of the world. Artyom is engaged with the representation apparatus that is peculiar to current digital and online culture.</p> <div id="bio"><p>Artyom Kocharyan (AM) is visual artist based in Rotterdam. His work explores the contemporary visual culture, namely the culture of images that increasingly dominate the world of communication. Artyoms work is concerned with the representation aspect of images and their ability to determine our vision of the world. Artyom is engaged with the representation apparatus that is peculiar to current digital and online culture.</p>
</div> </div>
<p class="hightlightSidebar"><a href="www.artyomkocharyan.com" target="_blank">www.artyomkocharyan.com</a></p> <p class="hightlightSidebar"><a href="www.artyomkocharyan.com" target="_blank">www.artyomkocharyan.com</a></p><!-- {website} -->
<!-- // --> <!-- // -->
@ -42,34 +42,37 @@
</div> </div>
</div> </div>
<div id="logoWrap"><img id="logo" src="./img/black_PZI_logo_p.svg" /></div> <div id="logoWrap"><img id="logo" src="./img/black_PZI_logo_p.svg"></div>
</div> </div>
<div class="zwartArea zwartAreaWhite sidebarBorderLeft" id="section02"> <div class="zwartArea zwartAreaWhite sidebarBorderLeft" id="section02">
<div class="fixedsticky" id="filter" style="top:0;"> <div class="fixedsticky" id="filter" style="top:0;">
<div class="themes" id="sortArea"> <div class="themes" id="sortArea">
<a class="hoverBackB" href="index.html"><img src="./img/arrowBack.svg" /></a> <p>Artyom-graduation-work</p><a class="closeSidebar"><img src="./img/arrowUpW.svg" /></a> <a class="hoverBackB" href="index.html">
<img src="./img/arrowBack.svg">
</a>
<p>Artyom-graduation-work</p><!--{title}-->
<a class="closeSidebar"><img src="./img/arrowUpW.svg"></a>
</div> </div>
</div> </div>
<!-- extra --> <!-- extra -->
<div class="project" id="extra"> <div class="project" id="extra">
<img id="thumnail" src="http://pzwiki.wdka.nl/mw-mediadesign/images/thumb/6/6a/Screen_Shot_2014-10-26_at_16.10.08.jpg/500px-Screen_Shot_2014-10-26_at_16.10.08.jpg" /> <img id="thumbnail" src="http://pzwiki.wdka.nl/mw-mediadesign/images/thumb/6/6a/Screen_Shot_2014-10-26_at_16.10.08.jpg/500px-Screen_Shot_2014-10-26_at_16.10.08.jpg">
<p>Photography, shortly after its invention, took on itself the responsibility of documenting history and giving us images of our world that was previously granted to painting. Photography was the first image of the kind, one that is conceived through technologies &#8211; camera, that were products of modern science. Photography democratized the image making proses allowing anyone to produce an image with a click of a button. As well us taking images out from the realm of aesthetics and art which was peculiar to painting, and making them relevant to almost every aspect of culture. As technology developed giving us television and the general media establishment, the bigger part of our world became to be seen through those images than by our own eyes. In today&#8217;s online world images function as distinct communication medium and seem do be a better fit to the quick and accumulated online culture where they serve as windows through which we can access the world far beyond our reach.</p> <p>Photography, shortly after its invention, took on itself the responsibility of documenting history and giving us images of our world that was previously granted to painting. Photography was the first image of the kind, one that is conceived through technologies camera, that were products of modern science. Photography democratized the image making proses allowing anyone to produce an image with a click of a button. As well us taking images out from the realm of aesthetics and art which was peculiar to painting, and making them relevant to almost every aspect of culture. As technology developed giving us television and the general media establishment, the bigger part of our world became to be seen through those images than by our own eyes. In todays online world images function as distinct communication medium and seem do be a better fit to the quick and accumulated online culture where they serve as windows through which we can access the world far beyond our reach.</p>
<p>Photography as an image is known for its ability to give an objective representation of the world &#8211; it shows the world &#8216;as it is&#8217;. This notion although has been disproved by number of studies, is till excepted by the wider culture. Because of it scientific nature, namely the fact that the subject prescribes itself on the film without the involvement of human hand &#8211; without human subjectivity, photography came to gain its objective status. This notion went as far as making photography an image that can stand as a &#8216;proof&#8217; for something. Similarly Google Images established itself as an agency that gives a precise and accurate representation of a subject. Its algorithms that developed in such way to display the most relevant and the most popular images of the subject. So its objective notion seems to rely again on its scientific factor, namely on the algorithmic analysis that automatically choose the content and arranging them by their on the page by their relevance.</p> <p>Photography as an image is known for its ability to give an objective representation of the world it shows the world as it is. This notion although has been disproved by number of studies, is till excepted by the wider culture. Because of it scientific nature, namely the fact that the subject prescribes itself on the film without the involvement of human hand without human subjectivity, photography came to gain its objective status. This notion went as far as making photography an image that can stand as a proof for something. Similarly Google Images established itself as an agency that gives a precise and accurate representation of a subject. Its algorithms that developed in such way to display the most relevant and the most popular images of the subject. So its objective notion seems to rely again on its scientific factor, namely on the algorithmic analysis that automatically choose the content and arranging them by their on the page by their relevance.</p>
</div>
</div>
<!----> <!---->
</div> </div>
</div> </div>
<script src="./js/jquery-2.1.3.min.js"> </script> <script src="./js/jquery-2.1.3.min.js"></script>
<script src="./js/fixedfixed.js"> </script> <script src="./js/fixedfixed.js"></script>
<script src="./js/fixedsticky.js"> </script> <script src="./js/fixedsticky.js"></script>
<script src="./js/mainScripts_single.js"> </script> <script src="./js/mainScripts_single.js"></script>

@ -1,12 +1,12 @@
<html><head> <!DOCTYPE HTML><html><head>
<meta charset="UTF-8" /> <meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport" /> <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<title>U ntitled</title> <title>U ntitled</title>
<link href="./css/style.css" rel="stylesheet" /> <link href="./css/style.css" rel="stylesheet">
<link href="./css/style_projectpage.css" rel="stylesheet" /> <link href="./css/style_projectpage.css" rel="stylesheet">
<link href="./fonts/fontstylesheet01.css" rel="stylesheet" /> <link href="./fonts/fontstylesheet01.css" rel="stylesheet">
<link href="./css/fixedsticky.css" rel="stylesheet" /> <link href="./css/fixedsticky.css" rel="stylesheet">
</head> </head>
<body> <body>
@ -15,7 +15,7 @@
<div id="sidebarInner"> <div id="sidebarInner">
<div id="sideBarDesc"> <div id="sideBarDesc">
<div id="sideBarDescInfo"> <div id="sideBarDescInfo">
<a class="hoverBackA" href="index.html"><img src="./img/arrowBack.svg" /></a><p>Tempted by Tomorrow</p> <a class="hoverBackA" href="index.html"><img src="./img/arrowBack.svg"></a><p>Tempted by Tomorrow</p>
</div> </div>
<div id="sideBarDescInner"> <div id="sideBarDescInner">
@ -24,7 +24,7 @@
<h2 id="creator">Henk-Jelle de Groot</h2> <h2 id="creator">Henk-Jelle de Groot</h2>
<p id="title">U ntitled 2015</p> <p id="title">U ntitled 2015</p><!--{title} {date} -->
<!-- moved up description --> <!-- moved up description -->
@ -34,7 +34,7 @@
<div id="bio"><p>Henk-Jelle de Groot is a Rotterdam based sound designer and musician. After graduating with an Audio / Visual design bachelor Henk-Jelle setup a sound studio in Rotterdam to work in the Audio / Visual industry. After 7 years of working he returned to the Piet Zwart Institute to graduate in a Master of comm design something something. In addition to working in the Audio / Visual industry, he is muscian and builder of electronic instruments.</p> <div id="bio"><p>Henk-Jelle de Groot is a Rotterdam based sound designer and musician. After graduating with an Audio / Visual design bachelor Henk-Jelle setup a sound studio in Rotterdam to work in the Audio / Visual industry. After 7 years of working he returned to the Piet Zwart Institute to graduate in a Master of comm design something something. In addition to working in the Audio / Visual industry, he is muscian and builder of electronic instruments.</p>
</div> </div>
<p class="hightlightSidebar"><a href=" " target="_blank"> </a></p> <p class="hightlightSidebar"><a href=" " target="_blank"> </a></p><!-- {website} -->
<!-- // --> <!-- // -->
@ -42,21 +42,24 @@
</div> </div>
</div> </div>
<div id="logoWrap"><img id="logo" src="./img/black_PZI_logo_p.svg" /></div> <div id="logoWrap"><img id="logo" src="./img/black_PZI_logo_p.svg"></div>
</div> </div>
<div class="zwartArea zwartAreaWhite sidebarBorderLeft" id="section02"> <div class="zwartArea zwartAreaWhite sidebarBorderLeft" id="section02">
<div class="fixedsticky" id="filter" style="top:0;"> <div class="fixedsticky" id="filter" style="top:0;">
<div class="themes" id="sortArea"> <div class="themes" id="sortArea">
<a class="hoverBackB" href="index.html"><img src="./img/arrowBack.svg" /></a> <p>U ntitled</p><a class="closeSidebar"><img src="./img/arrowUpW.svg" /></a> <a class="hoverBackB" href="index.html">
<img src="./img/arrowBack.svg">
</a>
<p>U ntitled</p><!--{title}-->
<a class="closeSidebar"><img src="./img/arrowUpW.svg"></a>
</div> </div>
</div> </div>
<!-- extra --> <!-- extra -->
<div class="project" id="extra"> <div class="project" id="extra">
<img id="thumnail" src="http://pzwiki.wdka.nl/mw-mediadesign/images/e/e7/9m4MBqRM1w-6.png" /> <img id="thumbnail" src="http://pzwiki.wdka.nl/mw-mediadesign/images/e/e7/9m4MBqRM1w-6.png">
</div> </div>
<!----> <!---->
@ -64,10 +67,10 @@
</div> </div>
</div> </div>
<script src="./js/jquery-2.1.3.min.js"> </script> <script src="./js/jquery-2.1.3.min.js"></script>
<script src="./js/fixedfixed.js"> </script> <script src="./js/fixedfixed.js"></script>
<script src="./js/fixedsticky.js"> </script> <script src="./js/fixedsticky.js"></script>
<script src="./js/mainScripts_single.js"> </script> <script src="./js/mainScripts_single.js"></script>

@ -1,12 +1,12 @@
<html><head> <!DOCTYPE HTML><html><head>
<meta charset="UTF-8" /> <meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport" /> <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<title>Mina</title> <title>Mina</title>
<link href="./css/style.css" rel="stylesheet" /> <link href="./css/style.css" rel="stylesheet">
<link href="./css/style_projectpage.css" rel="stylesheet" /> <link href="./css/style_projectpage.css" rel="stylesheet">
<link href="./fonts/fontstylesheet01.css" rel="stylesheet" /> <link href="./fonts/fontstylesheet01.css" rel="stylesheet">
<link href="./css/fixedsticky.css" rel="stylesheet" /> <link href="./css/fixedsticky.css" rel="stylesheet">
</head> </head>
<body> <body>
@ -15,7 +15,7 @@
<div id="sidebarInner"> <div id="sidebarInner">
<div id="sideBarDesc"> <div id="sideBarDesc">
<div id="sideBarDescInfo"> <div id="sideBarDescInfo">
<a class="hoverBackA" href="index.html"><img src="./img/arrowBack.svg" /></a><p>Tempted by Tomorrow</p> <a class="hoverBackA" href="index.html"><img src="./img/arrowBack.svg"></a><p>Tempted by Tomorrow</p>
</div> </div>
<div id="sideBarDescInner"> <div id="sideBarDescInner">
@ -24,7 +24,7 @@
<h2 id="creator">Lucia Dossin</h2> <h2 id="creator">Lucia Dossin</h2>
<p id="title">Mina 2015</p> <p id="title">Mina 2015</p><!--{title} {date} -->
<!-- moved up description --> <!-- moved up description -->
@ -34,7 +34,7 @@
<div id="bio"><p>The bio is coming soon.</p> <div id="bio"><p>The bio is coming soon.</p>
</div> </div>
<p class="hightlightSidebar"><a href="www.example.com" target="_blank">www.example.com</a></p> <p class="hightlightSidebar"><a href="www.example.com" target="_blank">www.example.com</a></p><!-- {website} -->
<!-- // --> <!-- // -->
@ -42,39 +42,42 @@
</div> </div>
</div> </div>
<div id="logoWrap"><img id="logo" src="./img/black_PZI_logo_p.svg" /></div> <div id="logoWrap"><img id="logo" src="./img/black_PZI_logo_p.svg"></div>
</div> </div>
<div class="zwartArea zwartAreaWhite sidebarBorderLeft" id="section02"> <div class="zwartArea zwartAreaWhite sidebarBorderLeft" id="section02">
<div class="fixedsticky" id="filter" style="top:0;"> <div class="fixedsticky" id="filter" style="top:0;">
<div class="themes" id="sortArea"> <div class="themes" id="sortArea">
<a class="hoverBackB" href="index.html"><img src="./img/arrowBack.svg" /></a> <p>Mina</p><a class="closeSidebar"><img src="./img/arrowUpW.svg" /></a> <a class="hoverBackB" href="index.html">
<img src="./img/arrowBack.svg">
</a>
<p>Mina</p><!--{title}-->
<a class="closeSidebar"><img src="./img/arrowUpW.svg"></a>
</div> </div>
</div> </div>
<!-- extra --> <!-- extra -->
<div class="project" id="extra"> <div class="project" id="extra">
<img id="thumnail" src="http://pzwiki.wdka.nl/mw-mediadesign/images/5/59/3legs.jpg" /> <img id="thumbnail" src="http://pzwiki.wdka.nl/mw-mediadesign/images/5/59/3legs.jpg">
<p>thumbnail is TEMPORARY (since it is mandatory to have a thumbnail for making this page, I used a temporary placeholder).</p> <p>thumbnail is TEMPORARY (since it is mandatory to have a thumbnail for making this page, I used a temporary placeholder).</p>
<h3 id="free-text---short-version-203-words">free text - short version 203 words</h3> <h3 id="free-text---short-version-203-words">free text - short version 203 words</h3>
<p>In a future not so far away, most humans were deprived from communicating with other humans through voice. Increased intolerance to raw subjective matters combined to a competitive labour market that practically forced every adult to work 12 to 16 hours everyday resulted in that most of human communication happened through written text messages or images using online social media services. As a side effect, the complexity of human conversation decreased to a level in which computers and people could understand each other reasonably well (an issue of Artificial Intelligence solved in an unexpectedly simple way, after many decades and much money spent on Natural Language research). Children were trained from early age to perform well in this environment. However, a parcel of the population still had the need to engage in conversation using their voices, like humans used to do 'in the good old times' (that's what they read somewhere online). Within this group, a few actually met other humans to talk. Others did not manage to find time or energy, despite their longings. With this group of people in mind, a promising startup company launched Mina, a chat bot that was able to fulfill this need for voice interaction remarkably well.</p> <p>In a future not so far away, most humans were deprived from communicating with other humans through voice. Increased intolerance to raw subjective matters combined to a competitive labour market that practically forced every adult to work 12 to 16 hours everyday resulted in that most of human communication happened through written text messages or images using online social media services. As a side effect, the complexity of human conversation decreased to a level in which computers and people could understand each other reasonably well (an issue of Artificial Intelligence solved in an unexpectedly simple way, after many decades and much money spent on Natural Language research). Children were trained from early age to perform well in this environment. However, a parcel of the population still had the need to engage in conversation using their voices, like humans used to do 'in the good old times' (that's what they read somewhere online). Within this group, a few actually met other humans to talk. Others did not manage to find time or energy, despite their longings. With this group of people in mind, a promising startup company launched Mina, a chat bot that was able to fulfill this need for voice interaction remarkably well.</p>
<h3 id="free-text---full-version-601-words">free text - full version 601 words</h3> <h3 id="free-text---full-version-601-words">free text - full version 601 words</h3>
<p>In a future not so far away, most humans were deprived from communicating with other humans through voice. Increased intolerance to raw subjective matters combined to a competitive labour market that practically forced every adult to work 12 to 16 hours everyday resulted in that most of human communication happened through written text messages or images using online social media services. As a side effect, the complexity of human conversation decreased to a level in which computers and people could understand each other reasonably well (an issue of Artificial Intelligence solved in an unexpectedly simple way, after many decades and much money spent on Natural Language research). Children were trained from early age to perform well in this environment. However, a parcel of the population still had the need to engage in conversation using their voices, like humans used to do 'in the good old times' (that's what they read somewhere online). Within this group, a few actually met other humans to talk. Others did not manage to find time or energy, despite their longings. With this group of people in mind, a promising startup company launched Mina, a chat bot that was able to fulfill this need for voice interaction remarkably well. Mina was presented as high technology, a product of years of research done by the brightest minds in the tech world. But in fact, it was a very old program, written in the infancy of digital electronic computing. This program worked quite well, since humans did not communicate too complex ideas anymore. But admitting the re-use of something old was completely out of question. Recycling was highly encouraged in matters like packaging, for example, but unthinkable for products and ideas. (That was regarded as not creative.) So, Mina was presented as a contemporary creation.</p> <p>In a future not so far away, most humans were deprived from communicating with other humans through voice. Increased intolerance to raw subjective matters combined to a competitive labour market that practically forced every adult to work 12 to 16 hours everyday resulted in that most of human communication happened through written text messages or images using online social media services. As a side effect, the complexity of human conversation decreased to a level in which computers and people could understand each other reasonably well (an issue of Artificial Intelligence solved in an unexpectedly simple way, after many decades and much money spent on Natural Language research). Children were trained from early age to perform well in this environment. However, a parcel of the population still had the need to engage in conversation using their voices, like humans used to do 'in the good old times' (that's what they read somewhere online). Within this group, a few actually met other humans to talk. Others did not manage to find time or energy, despite their longings. With this group of people in mind, a promising startup company launched Mina, a chat bot that was able to fulfill this need for voice interaction remarkably well. Mina was presented as high technology, a product of years of research done by the brightest minds in the tech world. But in fact, it was a very old program, written in the infancy of digital electronic computing. This program worked quite well, since humans did not communicate too complex ideas anymore. But admitting the re-use of something old was completely out of question. Recycling was highly encouraged in matters like packaging, for example, but unthinkable for products and ideas. (That was regarded as not creative.) So, Mina was presented as a contemporary creation.</p>
<p>Mina was a program that managed natural language in a quite rudimentary fashion. When the program was initiated, it loaded a script. This script contained a specific set of instructions for a conversation. It was able to identify some language patterns and according to these patterns, it chose a response that would sound plausible. But in order for the program to have the desired effect, these scripts would have to contain changes in the responses on a regular basis. These changes would keep alive the illusion of talking to another human being. Without them, subscribers would probably notice they were talking to a robot and would cancel their subscriptions. Also, scripts would be changed according to the calendar and the news - and would count on social media profile data to increase the (sanitized) subjectivity rate of the conversation. So for example, on Christmas season, the scripts would be almost completely different than scripts loaded along the year. For some subscribers, according to their profile data, Christmas scripts would contain emotional and inspiring words in a frequency higher than usual. For others, they would transmit the subscriber a sense of belonging to a group that hates Christmas.</p> <p>Mina was a program that managed natural language in a quite rudimentary fashion. When the program was initiated, it loaded a script. This script contained a specific set of instructions for a conversation. It was able to identify some language patterns and according to these patterns, it chose a response that would sound plausible. But in order for the program to have the desired effect, these scripts would have to contain changes in the responses on a regular basis. These changes would keep alive the illusion of talking to another human being. Without them, subscribers would probably notice they were talking to a robot and would cancel their subscriptions. Also, scripts would be changed according to the calendar and the news - and would count on social media profile data to increase the (sanitized) subjectivity rate of the conversation. So for example, on Christmas season, the scripts would be almost completely different than scripts loaded along the year. For some subscribers, according to their profile data, Christmas scripts would contain emotional and inspiring words in a frequency higher than usual. For others, they would transmit the subscriber a sense of belonging to a group that hates Christmas.</p>
<p>From time to time, the words database that was used to feed the scripts was attacked and the connections between words were switched or corrupted. That caused the script to reply using weird language constructs, and in many cases Mina's talk would not only unmask the robot but could also ignite a self-reflection process in the subscriber. Some would use this wake-up chance to try to find a way of having actual human contact back in their lives, others would instead sue the company and ask the subscription fee back. Nobody never found out if the ones responsible for these attacks were hackers or a business competitor.</p> <p>From time to time, the words database that was used to feed the scripts was attacked and the connections between words were switched or corrupted. That caused the script to reply using weird language constructs, and in many cases Mina's talk would not only unmask the robot but could also ignite a self-reflection process in the subscriber. Some would use this wake-up chance to try to find a way of having actual human contact back in their lives, others would instead sue the company and ask the subscription fee back. Nobody never found out if the ones responsible for these attacks were hackers or a business competitor.</p>
</div>
</div>
<!----> <!---->
</div> </div>
</div> </div>
<script src="./js/jquery-2.1.3.min.js"> </script> <script src="./js/jquery-2.1.3.min.js"></script>
<script src="./js/fixedfixed.js"> </script> <script src="./js/fixedfixed.js"></script>
<script src="./js/fixedsticky.js"> </script> <script src="./js/fixedsticky.js"></script>
<script src="./js/mainScripts_single.js"> </script> <script src="./js/mainScripts_single.js"></script>

@ -1,12 +1,12 @@
<html><head> <!DOCTYPE HTML><html><head>
<meta charset="UTF-8" /> <meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport" /> <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<title>Qq</title> <title>Qq</title>
<link href="./css/style.css" rel="stylesheet" /> <link href="./css/style.css" rel="stylesheet">
<link href="./css/style_projectpage.css" rel="stylesheet" /> <link href="./css/style_projectpage.css" rel="stylesheet">
<link href="./fonts/fontstylesheet01.css" rel="stylesheet" /> <link href="./fonts/fontstylesheet01.css" rel="stylesheet">
<link href="./css/fixedsticky.css" rel="stylesheet" /> <link href="./css/fixedsticky.css" rel="stylesheet">
</head> </head>
<body> <body>
@ -15,7 +15,7 @@
<div id="sidebarInner"> <div id="sidebarInner">
<div id="sideBarDesc"> <div id="sideBarDesc">
<div id="sideBarDescInfo"> <div id="sideBarDescInfo">
<a class="hoverBackA" href="index.html"><img src="./img/arrowBack.svg" /></a><p>Tempted by Tomorrow</p> <a class="hoverBackA" href="index.html"><img src="./img/arrowBack.svg"></a><p>Tempted by Tomorrow</p>
</div> </div>
<div id="sideBarDescInner"> <div id="sideBarDescInner">
@ -24,7 +24,7 @@
<h2 id="creator">Luther Blisset</h2> <h2 id="creator">Luther Blisset</h2>
<p id="title">Qq 2015</p> <p id="title">Qq 2015</p><!--{title} {date} -->
<!-- moved up description --> <!-- moved up description -->
@ -34,7 +34,7 @@
<div id="bio"><p>Luther Blissett is a multiple-use name, an open pop star informally adopted and shared by hundreds of artists and activists all over Europe and the Americas since 1994. The pseudonym first appeared in Bologna, Italy, in mid-1994, when a number of cultural activists began using it for staging a series of urban and media pranks and to experiment with new forms of authorship and identity. From Bologna the multiple-use name spread to other European cities, such as Rome and London, as well as countries such as Germany, Spain, and Slovenia.[1] Sporadic appearances of Luther Blissett have been also noted in Canada, the United States, and Brazil.</p> <div id="bio"><p>Luther Blissett is a multiple-use name, an open pop star informally adopted and shared by hundreds of artists and activists all over Europe and the Americas since 1994. The pseudonym first appeared in Bologna, Italy, in mid-1994, when a number of cultural activists began using it for staging a series of urban and media pranks and to experiment with new forms of authorship and identity. From Bologna the multiple-use name spread to other European cities, such as Rome and London, as well as countries such as Germany, Spain, and Slovenia.[1] Sporadic appearances of Luther Blissett have been also noted in Canada, the United States, and Brazil.</p>
</div> </div>
<p class="hightlightSidebar"><a href="https://en.wikipedia.org/wiki/Luther_Blissett_(nom_de_plume)" target="_blank">https://en.wikipedia.org/wiki/Luther_Blissett_(nom_de_plume)</a></p> <p class="hightlightSidebar"><a href="https://en.wikipedia.org/wiki/Luther_Blissett_(nom_de_plume)" target="_blank">https://en.wikipedia.org/wiki/Luther_Blissett_(nom_de_plume)</a></p><!-- {website} -->
<!-- // --> <!-- // -->
@ -42,41 +42,44 @@
</div> </div>
</div> </div>
<div id="logoWrap"><img id="logo" src="./img/black_PZI_logo_p.svg" /></div> <div id="logoWrap"><img id="logo" src="./img/black_PZI_logo_p.svg"></div>
</div> </div>
<div class="zwartArea zwartAreaWhite sidebarBorderLeft" id="section02"> <div class="zwartArea zwartAreaWhite sidebarBorderLeft" id="section02">
<div class="fixedsticky" id="filter" style="top:0;"> <div class="fixedsticky" id="filter" style="top:0;">
<div class="themes" id="sortArea"> <div class="themes" id="sortArea">
<a class="hoverBackB" href="index.html"><img src="./img/arrowBack.svg" /></a> <p>Qq</p><a class="closeSidebar"><img src="./img/arrowUpW.svg" /></a> <a class="hoverBackB" href="index.html">
<img src="./img/arrowBack.svg">
</a>
<p>Qq</p><!--{title}-->
<a class="closeSidebar"><img src="./img/arrowUpW.svg"></a>
</div> </div>
</div> </div>
<!-- extra --> <!-- extra -->
<div class="project" id="extra"> <div class="project" id="extra">
<img id="thumnail" src="http://pzwiki.wdka.nl/mw-mediadesign/images/thumb/8/85/Luther-blissett-300.jpg/500px-Luther-blissett-300.jpg" /> <img id="thumbnail" src="http://pzwiki.wdka.nl/mw-mediadesign/images/thumb/8/85/Luther-blissett-300.jpg/500px-Luther-blissett-300.jpg">
<p>While the folk heroes of the early-modern period and the nineteenth century served a variety of social and political purposes, the <strong>Luther Blissett Project (LBP)</strong> were able to utilize the media and communication strategies unavailable to their predecessors. According to Marco Deseriis, the main purpose of the LBP was to create a folk hero of the information society whereby knowledge workers and immaterial workers could organize and recognize themselves.[5] Thus, rather than being understood only as a media prankster and culture jammer, Luther Blissett became a positive mythic figure that was supposed to embody the very process of community and cross-media storytelling. Roberto Bui&#8212;one of the co-founders of the LBP and Wu Ming&#8212;explains the function of Luther Blissett and other radical folk heroes as mythmaking or mythopoesis</p> <p>While the folk heroes of the early-modern period and the nineteenth century served a variety of social and political purposes, the <strong>Luther Blissett Project (LBP)</strong> were able to utilize the media and communication strategies unavailable to their predecessors. According to Marco Deseriis, the main purpose of the LBP was to create a folk hero of the information society whereby knowledge workers and immaterial workers could organize and recognize themselves.[5] Thus, rather than being understood only as a media prankster and culture jammer, Luther Blissett became a positive mythic figure that was supposed to embody the very process of community and cross-media storytelling. Roberto Bui—one of the co-founders of the LBP and Wu Ming—explains the function of Luther Blissett and other radical folk heroes as mythmaking or mythopoesis</p>
<p><iframe height="450px" src="https://player.vimeo.com/video/114218234" width="600px"> </iframe></p> <p><iframe height="450px" src="https://player.vimeo.com/video/114218234" width="600px"> </iframe></p>
<p><iframe height="450px" src="https://www.youtube.com/embed/oXxZnL5HokA" width="600px"> </iframe></p> <p><iframe height="450px" src="https://www.youtube.com/embed/oXxZnL5HokA" width="600px"> </iframe></p>
<h2 id="gallery">gallery</h2> <h2 id="gallery">gallery</h2>
<p><img alt="WWWonopoly_Board.png" src="http://pzwiki.wdka.nl/mw-mediadesign/images/c/ce/WWWonopoly_Board.png" title="fig:WWWonopoly_Board.png" /> <img alt="Mb-WordNet-tour-version2-08.png" src="http://pzwiki.wdka.nl/mw-mediadesign/images/8/82/Mb-WordNet-tour-version2-08.png" title="fig:Mb-WordNet-tour-version2-08.png" /> <img alt="Labanotation1.jpg" src="http://pzwiki.wdka.nl/mw-mediadesign/images/4/46/Labanotation1.jpg" title="fig:Labanotation1.jpg" /></p> <p><img alt="WWWonopoly_Board.png" src="http://pzwiki.wdka.nl/mw-mediadesign/images/c/ce/WWWonopoly_Board.png" title="fig:WWWonopoly_Board.png"> <img alt="Mb-WordNet-tour-version2-08.png" src="http://pzwiki.wdka.nl/mw-mediadesign/images/8/82/Mb-WordNet-tour-version2-08.png" title="fig:Mb-WordNet-tour-version2-08.png"> <img alt="Labanotation1.jpg" src="http://pzwiki.wdka.nl/mw-mediadesign/images/4/46/Labanotation1.jpg" title="fig:Labanotation1.jpg"></p>
<h2 id="other-radical-folk">other radical folk</h2> <h2 id="other-radical-folk">other radical folk</h2>
<p>Are you the radical folk?</p> <p>Are you the radical folk?</p>
<p><iframe height="450px" src="https://player.vimeo.com/video/115381750" width="600px"> </iframe></p> <p><iframe height="450px" src="https://player.vimeo.com/video/115381750" width="600px"> </iframe></p>
<p><iframe height="450px" src="https://www.youtube.com/embed/ihReeJg08ns" width="600px"> </iframe></p> <p><iframe height="450px" src="https://www.youtube.com/embed/ihReeJg08ns" width="600px"> </iframe></p>
</div>
</div>
<!----> <!---->
</div> </div>
</div> </div>
<script src="./js/jquery-2.1.3.min.js"> </script> <script src="./js/jquery-2.1.3.min.js"></script>
<script src="./js/fixedfixed.js"> </script> <script src="./js/fixedfixed.js"></script>
<script src="./js/fixedsticky.js"> </script> <script src="./js/fixedsticky.js"></script>
<script src="./js/mainScripts_single.js"> </script> <script src="./js/mainScripts_single.js"></script>

@ -1,12 +1,12 @@
<html><head> <!DOCTYPE HTML><html><head>
<meta charset="UTF-8" /> <meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport" /> <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<title>User:Max Dovey/maxgradbio</title> <title>User:Max Dovey/maxgradbio</title>
<link href="./css/style.css" rel="stylesheet" /> <link href="./css/style.css" rel="stylesheet">
<link href="./css/style_projectpage.css" rel="stylesheet" /> <link href="./css/style_projectpage.css" rel="stylesheet">
<link href="./fonts/fontstylesheet01.css" rel="stylesheet" /> <link href="./fonts/fontstylesheet01.css" rel="stylesheet">
<link href="./css/fixedsticky.css" rel="stylesheet" /> <link href="./css/fixedsticky.css" rel="stylesheet">
</head> </head>
<body> <body>
@ -15,7 +15,7 @@
<div id="sidebarInner"> <div id="sidebarInner">
<div id="sideBarDesc"> <div id="sideBarDesc">
<div id="sideBarDescInfo"> <div id="sideBarDescInfo">
<a class="hoverBackA" href="index.html"><img src="./img/arrowBack.svg" /></a><p>Tempted by Tomorrow</p> <a class="hoverBackA" href="index.html"><img src="./img/arrowBack.svg"></a><p>Tempted by Tomorrow</p>
</div> </div>
<div id="sideBarDescInner"> <div id="sideBarDescInner">
@ -24,7 +24,7 @@
<h2 id="creator">Max Dovey</h2> <h2 id="creator">Max Dovey</h2>
<p id="title">User:Max Dovey/maxgradbio 2015</p> <p id="title">User:Max Dovey/maxgradbio 2015</p><!--{title} {date} -->
<!-- moved up description --> <!-- moved up description -->
@ -34,7 +34,7 @@
<div id="bio"><p>My Bio</p> <div id="bio"><p>My Bio</p>
</div> </div>
<p class="hightlightSidebar"><a href="http://maxdovey.com" target="_blank">http://maxdovey.com</a></p> <p class="hightlightSidebar"><a href="http://maxdovey.com" target="_blank">http://maxdovey.com</a></p><!-- {website} -->
<!-- // --> <!-- // -->
@ -42,33 +42,36 @@
</div> </div>
</div> </div>
<div id="logoWrap"><img id="logo" src="./img/black_PZI_logo_p.svg" /></div> <div id="logoWrap"><img id="logo" src="./img/black_PZI_logo_p.svg"></div>
</div> </div>
<div class="zwartArea zwartAreaWhite sidebarBorderLeft" id="section02"> <div class="zwartArea zwartAreaWhite sidebarBorderLeft" id="section02">
<div class="fixedsticky" id="filter" style="top:0;"> <div class="fixedsticky" id="filter" style="top:0;">
<div class="themes" id="sortArea"> <div class="themes" id="sortArea">
<a class="hoverBackB" href="index.html"><img src="./img/arrowBack.svg" /></a> <p>User:Max Dovey/maxgradbio</p><a class="closeSidebar"><img src="./img/arrowUpW.svg" /></a> <a class="hoverBackB" href="index.html">
<img src="./img/arrowBack.svg">
</a>
<p>User:Max Dovey/maxgradbio</p><!--{title}-->
<a class="closeSidebar"><img src="./img/arrowUpW.svg"></a>
</div> </div>
</div> </div>
<!-- extra --> <!-- extra -->
<div class="project" id="extra"> <div class="project" id="extra">
<img id="thumnail" src="http://pzwiki.wdka.nl/mw-mediadesign/images/1/16/Pointer.gif" /> <img id="thumbnail" src="http://pzwiki.wdka.nl/mw-mediadesign/images/1/16/Pointer.gif">
<p>A solo performance exploring identity, perception and representation through automatic image analysis software. Software that is used to automatically tag online images is used to direct a live performance. Each scene is performed alongside software that reacts and interprets the performers actions. The performance explores the potential threat of computer vision and automated image perception on the human body. Every movement of the performance is analysed in detail to reductive categorisation.</p> <p>A solo performance exploring identity, perception and representation through automatic image analysis software. Software that is used to automatically tag online images is used to direct a live performance. Each scene is performed alongside software that reacts and interprets the performers actions. The performance explores the potential threat of computer vision and automated image perception on the human body. Every movement of the performance is analysed in detail to reductive categorisation.</p>
</div>
</div>
<!----> <!---->
</div> </div>
</div> </div>
<script src="./js/jquery-2.1.3.min.js"> </script> <script src="./js/jquery-2.1.3.min.js"></script>
<script src="./js/fixedfixed.js"> </script> <script src="./js/fixedfixed.js"></script>
<script src="./js/fixedsticky.js"> </script> <script src="./js/fixedsticky.js"></script>
<script src="./js/mainScripts_single.js"> </script> <script src="./js/mainScripts_single.js"></script>

@ -4,7 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport"> <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<title>{title}</title> <title></title>
<link href="./css/style.css" rel="stylesheet"> <link href="./css/style.css" rel="stylesheet">
<link href="./css/style_projectpage.css" rel="stylesheet"> <link href="./css/style_projectpage.css" rel="stylesheet">
<link href="./fonts/fontstylesheet01.css" rel="stylesheet"> <link href="./fonts/fontstylesheet01.css" rel="stylesheet">
@ -24,17 +24,17 @@
<!-- we used h2's and p's instead of divs here, moved date and deleted thumbnail --> <!-- we used h2's and p's instead of divs here, moved date and deleted thumbnail -->
<h2 id="creator">{creator}</h2> <h2 id="creator"></h2>
<p id="title">{title} {date}</p> <p id="title"></p><!--{title} {date} -->
<!-- moved up description --> <!-- moved up description -->
<div id="description">{description}</div> <div id="description"></div>
<div id="bio">{bio}</div> <div id="bio"></div>
<p class="hightlightSidebar"><a href="{website}" target="_blank">{website}</a></p> <p class="hightlightSidebar"><a href="#" target="_blank"></a></p><!-- {website} -->
<!-- // --> <!-- // -->
@ -48,15 +48,18 @@
<div class="zwartArea zwartAreaWhite sidebarBorderLeft" id="section02"> <div class="zwartArea zwartAreaWhite sidebarBorderLeft" id="section02">
<div class="fixedsticky" id="filter" style="top:0;"> <div class="fixedsticky" id="filter" style="top:0;">
<div class="themes" id="sortArea"> <div class="themes" id="sortArea">
<a href="index.html" class="hoverBackB"><img src="./img/arrowBack.svg"></a> <p>{title}</p><a class="closeSidebar"><img src="./img/arrowUpW.svg"/></a> <a href="index.html" class="hoverBackB">
<img src="./img/arrowBack.svg">
</a>
<p></p><!--{title}-->
<a class="closeSidebar"><img src="./img/arrowUpW.svg"/></a>
</div> </div>
</div> </div>
<!-- extra --> <!-- extra -->
<div id="extra" class="project"> <div id="extra" class="project">
<img id="thumnail" src={thumbnail} /> <img id="thumbnail" src="" />
{extra}
</div> </div>
<!----> <!---->
@ -64,10 +67,10 @@
</div> </div>
</div> </div>
<script src='./js/jquery-2.1.3.min.js'> </script> <script src='./js/jquery-2.1.3.min.js'></script>
<script src='./js/fixedfixed.js'> </script> <script src='./js/fixedfixed.js'></script>
<script src='./js/fixedsticky.js'> </script> <script src='./js/fixedsticky.js'></script>
<script src='./js/mainScripts_single.js'> </script> <script src='./js/mainScripts_single.js'></script>
</body> </body>
</html> </html>

Loading…
Cancel
Save