Browse Source

spinning buttons

master
Cristina Cochior 5 years ago
parent
commit
2ee17fcabb
  1. 5
      static/css/main.css
  2. 6
      templates/about.html
  3. 2
      templates/description.html
  4. 137
      templates/layout.html
  5. 23
      templates/theindex.html

5
static/css/main.css

@ -151,9 +151,9 @@ div.explanation{
header{
/* border: lime 1px solid; */
padding-top: -1em;
margin-right: 10em;
padding-right: 10em;
position: absolute;
top:17em;
top:12em;
width: 29em;
-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
@ -209,6 +209,7 @@ nav ul.menu {
}
/********************************************************/
/* TEXT */
/********************************************************/

6
templates/about.html

@ -3,7 +3,7 @@
<div class="aboutpage">
<div class="about">
<h3>About the archival publication</h3>
<h2>About the archival publication</h2>
At the end of 2018, Varia was approached by De Player with the proposal to work on an archival project that aimed to represent the archive which was compiled during the last two years of their Pushing Scores project. De Player showed a specific interest in the development of an accessible, dynamic digital environment that could be used to create new relations, perspectives and, at its best, concepts for the production of new graphic scores. Varia, as a space with a shared body of knowledge in archiving, everyday technology, experimental music and digital media took De Player up on their offer.<br /><br />
@ -16,7 +16,7 @@ The data generated on each user's navigation is not collected but temporarily st
<h3>About Pushing Scores</h3>
<h2>About Pushing Scores</h2>
Pushing Scores is a two-year artistic research project, initiated by De Player and graphic designer Remco van Bladel. Throughout 2016 and 2018, this project researched the phenomenon of notation and the graphic representation of music. It unfolded through a nomadic program which included the creation of newly commissioned artworks and public events addressing contemporary questions and issues in this particular field.<br /><br />
@ -27,7 +27,7 @@ This archival web publication was generated out of this research. For an overvie
<h3>Colophon</h3>
<h2>Colophon</h2>
Interface design and development – Cristina Cochior and Julie Boschat Thorez (Varia members)<br />
Content – De Player<br />
Copy Editor – Isabelle Sully<br />

2
templates/description.html

@ -27,7 +27,7 @@
{% set count=[0] %}
{% for item in datafromjson %}
{% if item.lower().endswith(('.html')) %}
<h3> {{ namefile[count[0]][12:-5] }}</h3>
<span class="h3-titles"> {{ namefile[count[0]][12:-5] }}</span><br><br>
{{ textfiles[count[0]] }}
{% if count.append(count.pop() + 1) %}{% endif %}
<br/><br/><br/>

137
templates/layout.html

@ -1,47 +1,116 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pushing Scores</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pushing Scores</title>
<link rel="stylesheet" href="{{ url_for('static', filename='/css/style.css') }}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$( document ).ready(function() {
var bodyWidth = $(window).width()- $("#generate-button").width();
var bodyHeight = $(window).height()- $("#generate-button").width();
var randPosXabout = Math.floor(Math.random() * (bodyWidth + 1));
var randPosYabout = Math.floor(Math.random() * (bodyHeight + 1));
$('#generate-button-about').css('left', randPosXabout);
$('#generate-button-about').css('top', randPosYabout);
var randPosXindex = Math.floor(Math.random() * (bodyWidth + 1));
var randPosYindex = Math.floor(Math.random() * (bodyHeight + 1));
$('#generate-button-index').css('left', randPosXindex);
$('#generate-button-index').css('top', randPosYindex);
var randPosX = Math.floor(Math.random() * (bodyWidth + 1));
var randPosY = Math.floor(Math.random() * (bodyHeight + 1));
$('#generate-button').css('left', randPosX);
$('#generate-button').css('top', randPosY);
});
</script>
</head>
<body>
<div id="wrapper">
<div id="top">
<!-- WORDPATH -->
<div id="thewordpath">
{% if functionsession %}[<a href='/clear' title='Clear current score'>x</a>]{% endif %}
{% for item in functionsession %}
<span class="word">{{ item }} ▶ </span>
{% endfor %}
{% if functionsession %}[<a href='/clear' title='Clear current score'>x</a>]{% endif %}
{% for item in functionsession %}
<span class="word">{{ item }} ▶ </span>
{% endfor %}
</div>
</div>
<div id="bottom">
<!-- THE REST -->
<header>
<!-- <div class="container"> -->
<div id="logobox">
<h1 class="logo"><a href="{{ url_for('home') }}">Pushing Scores</a></h1>
</div>
<nav>
<ul class="menu">
<li><a href="{{ url_for('about') }}">About</a></li>
<li><a href="{{ url_for('index') }}">Index</a></li>
<li><a href="{{ url_for('get_file') }}">Score</a></li>
</ul>
</nav>
<!-- </div> -->
</header>
{% block content %}
{% endblock content %}
<!-- THE REST -->
<header>
<div id="logobox">
<h1 class="logo"><a href="{{ url_for('home') }}">Pushing Scores</a></h1>
</div>
</header>
{% block content %}
{% endblock content %}
<!--about button-->
<a href="{{ url_for('about') }}">
<div class="generate-button-about" id="generate-button-about">
<span>a
<span>b
<span>o
<span>u
<span>t
</span></span></span></span></span>
</div>
</a>
<!--end about button-->
<!--index button-->
<a href="{{ url_for('index') }}">
<div class="generate-button-index" id="generate-button-index">
<span>i
<span>n
<span>d
<span>e
<span>x
</span></span></span></span></span>
</div>
</a>
<!--end index button-->
<!--start generate score button-->
<a href="{{ url_for('get_file') }}">
<div class="generate-button" id="generate-button">
<span>G
<span>e
<span>n
<span>e
<span>r
<span>a
<span>t
<span>e
<span>
<span>y
<span>o
<span>u
<span>r
<span>
<span>s
<span>c
<span>o
<span>r
<span>e
<span>!
</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
</div>
</a>
<!---end button-->
</div>
</div>
</body>
</html>
</body>
</html>

23
templates/theindex.html

@ -5,28 +5,21 @@
<h2>Folders index</h2>
<div class="foldersindex">
<div class="index_intro column">
Pushing Scores is a two-year artistic research project, initiated by <a target="_blank" href="https://www.deplayer.nl/">De Player</a> and graphic designer Remco van Bladel. Throughout 2016 and 2018, this project researched the phenomenon of notation and the graphic representation of music. It unfolded through a nomadic program which included the creation of newly commissioned artworks and public events addressing contemporary questions and issues in this particular field.<br><br>
This archival web publication was generated out of this research. For an overview of the collection that is making up this website, see the items listed below.
</div>
<div class="foldersindex">
{% block index %}
{% for each in index_dict %}
{% set address = "/description?id=" + each %}
<a href={{address}}>{{index_dict[each]}}</a> <br />
<a href={{address}} class="li-index"><span>{{loop.index}}. {{index_dict[each]}}</span></a><br />
{% endfor %}
{% endblock index %}
<!-- </div> -->
<!--
<div class="index_intro column">
Pushing Scores is a two-year artistic research project, initiated by <a target="_blank" href="https://www.deplayer.nl/">De Player</a> and graphic designer Remco van Bladel.
Throughout 2016 and 2018, this project researched the phenomenon of notation and the graphic representation of music.
It unfolded through a nomadic program which included the creation of newly commissioned artworks and public events addressing contemporary questions and issues in this particular field.<br><br>
What are the possibilities of graphic scores, in a day and age in which graphic notation is still usually seen as a ‘drawing’ serving as some kind of sheet music? In an attempt to redefine this concept, <a target="_blank" href="https://www.deplayer.nl/">De Player</a> compiled a programme in which artists, musicians,
theoreticians and practitioners were invited to participate. The collective goal was to develop and present new audio-visual and media-technical forms of graphic notation through artistic research and development. Based on our compilation of the most contemporary and innovative graphic notation practices in the fields of music, sound art, performance art, e-culture, new-media art, graphic design and media design, <a target="_blank"href="https://www.deplayer.nl/">De Player</a> introduced artists and designers from various creative disciplines to a national and international audience, with the goal of collectively developing new forms of graphic notation.<br><br>
The incentive for this project is the belief that graphic notation in 20th Century avant-garde music and sound art constitutes an important, still radically innovative but wrongfully marginalised form, which can play a key role in the development of new audio-visual languages and media. <a target="_blank" href="https://www.deplayer.nl/">De Player</a>'s ambition, and that of their collaborating partners, was to emancipate graphic notation from the confines of the modernist tradition, in such a way that it may remain an innovative and provocative medium for decades to come.<br><br>
</div>
This archival web publication was generated out of this research. For an overview of the collection that is making up this website, see below.
</div> -->
</div>
</div>

Loading…
Cancel
Save