structure

structure.js
gonnzo · Jul 27, 2016 · f2c6f01 · f2c6f01
1 parent 4096599
commit f2c6f01
Show file tree

Hide file tree

Showing 23 changed files with 222 additions and 83 deletions.
diff --git a/AGAP/data.md b/AGAP/data.md
@@ -0,0 +1,3 @@
+# Async Generative Art Protocol
+
+## Protocolo de Arte Generativa Asíncrona (AGAP)
diff --git a/AGAP/index.html b/AGAP/index.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><script type="text/javascript" src="../js/render.js"></script></head><body></body></html>
diff --git a/about/coverpage.jpg b/about/coverpage.jpg
diff --git a/about/data.md b/about/data.md
@@ -1,50 +1,49 @@
-# About
+# About // Todo sobre Pymiento
 
-## Todo sobre mi
+Esta es una historia inacabada. Se lee desde abajo hacia arriba. Lo primero que veas es el presente, y hacia abajo, un paseo por el historial completo del proceso creativo.
 
-[www.nubak.com](http://www.nubak.com) is a standalone minimalist Markdown parser written in ~815 bytes of JavaScript.
+## Deadline // PyCon y PyConES
 
-All the cool kids use Markdown. If you are not familiar with it already, have a look at the [original Markdown syntax](http://daringfireball.net/projects/markdown/syntax). Check the source code of this page, it is written in Markdown and parsed using [mmd.js](mmd.js).
-![Movida tropical](coverpage.jpg)
+PyCon es la mayor conferencia anual de la comunidad de usuarios y desarrolladores del lenguaje de programación de código abierto Python. A nivel nacional, PyConES se ha venido celebrando en Madrid, Zaragoza y Valencia.
 
-## Why so small ?
+![Pycones 2016 Almería](pycones.png)(full)
 
-[mmd.js](mmd.js) is only small because of its simple design and feature set. Using dirty size optimization tricks it should be possible to reach the 5-600 bytes mark. Maybe smaller. Except that's not the idea. Enough yak shaving!
+Este año y gracias a un gran esfuerzo de producción (de nuestro mencionado equipo de personas inquietas) PyConES se celebrará en Almería, a lo largo de los días 7, 8 y 9 de octubre. (aplausos, aplausos!) Más info sobre PyConES // 2016.es.pycon.org
 
-## How does **mmd.js** work ?
+Utilizando como deadline la PyConES, y punto de partida, la idea es crear una serie de obras de arte generativa para exponer durante la conferencia. La intención principal es desvelar el juego que tiene la tecnología en los objetos cotidianos, para ello destriparemos y mostraremos los entresijos del proceso creativo, y desarrollo tecnológico en cada obra.
 
-The input text is split into blocks separated by one or more blank lines. The type of each block is determined by checking the first character of the block. Headers, HTML and paragraphs are handled separetely. Multi line blocks are split using a regular expression. HTML escaping and span elements ( link, images, emphasis ) are processed for each line of the blocks. This allow to be close to the original Markdown syntax.
-![Movida tropical](coverpage.jpg)(full)
-## How to use **mmd.js** ?
+## Museo de Almería // Exposición
 
-    <script src=mmd.min.js></script>
-	<script>console.log( mmd('Markdown is **sweet**') );</script>
+La exposición se inaugurará el día 8 de octubre a las 20hs. en la sala Arroba del Museo de Almería. Y sí, como suele ser costumbre habrá cervezada, pero también música y performances interactivas con nuestras obras.
 
-## Supported features
+![Museo de Almería](museo.png)
 
-* Headers # 
-* Blockquotes >
-* Ordered lists 1
-* Unordered lists *
-* Paragraphs
-* Links []()
-* Images ![]()
-* Inline <em> emphasis *
-* Inline <strong> emphasis **
+Fuente imágen // [www.filmingalmeria.es](http://www.filmingalmeria.es)
 
-## Unsupported features
 
-* References and IDs
-* Escaping of Markdown characters
-* Nesting
 
-## Supported browsers
+## El concepto // Python y el Arte Generativo
 
-So far [mmd.js](mmd.js) has been tested in recent versions of Opera ( all flavours including Mini ), Chrome and Firefox. Pull requests addressing compatibility issues are most welcome, esp. regarding IE and Safari.
+De forma resumida, Python es un lenguaje de programación muy potente y fácil de usar. Por su simplicidad, está siendo cada vez más utilizado por la comunidad artística en la creación de arte generativo.
 
-## Why ?
+![Generative Art](genart.jpg)(full)
 
-[mmd.js](mmd.js) is the result of some very intensive yak shaving. Let's be honest, it was just an excuse to procastinate and do something different.
+### ¿Arte generativo?
 
+Ya sea una obra gráfica, audiovisual o mecánica, el arte generativo consiste en que al menos una parte de la obra se genere a través de un algoritmo informático. 
 
-That's all folks.
+### El qué. Punto de partida.
+
+El concepto central que conforma Pymiento tiene que ver con la creación y desarrollo de obras generativas, utilizando Python como lenguaje principal. 
+
+
+
+## Antecedentes // la era del Pre-Pymiento
+
+Hace tiempo, un grupo de inquietos comenzaron a juntarse con la intención de "hacer cosas". Artistas, informáticos, ingenieros y curiosos varios, comenzaron a trabajar juntos con el propósito de crear, fusionar y potenciar sus ideas, sacando a veces productos artísticos, en ocasiones educativos o sociales, o simplemente lúdicos. 
+
+![HackLab_Almería](hacklab.png)(full)
+
+En HackLab Almería somos un colectivo de experimentación tecnológica, social y creativa.
+
+Más info sobre HackLab Almería // [www.hacklabalmeria.net](http://www.hacklabalmeria.net)
diff --git a/about/genart.jpg b/about/genart.jpg
diff --git a/about/hacklab.png b/about/hacklab.png
diff --git a/about/museo.png b/about/museo.png
diff --git a/about/pycones.png b/about/pycones.png
diff --git a/css/styles.css b/css/styles.css
@@ -1,55 +1,101 @@
 body{
-	background:#111;
-	color:#eee;
+	background:#fff;
+	color:#333;
 	font-family: Maitree;
 	font-weight: 200;
 	font-size: 16pt;
 }
 
 a {
 	text-decoration: none;
-	color:#9c0;
+	color:#d00;
 	font-weight: 400;
 }
 
 a:hover {
-	color:#fff;
+	color:#000;
 }
 .content {
 	width:980px;
 	margin: 0 auto;
 }
 
-img.default{
+p {
+	line-height: 30px;
+}
+
+.logo {
 	width:100%;
+	text-align: center
 }
 
-h1,h2,h3,h4,h5,h6 {
+.logo img {
+	width:500px;
+	margin-top: 30px;
+}
+
+img.content{
+	width:100%;
+	margin-top: 20px;
+}
+
+h1, h2, h3, h4, h5, h6 {
 	font-weight: 300;
 	font-family: Oswald;
 }
 
 h1 {
-	font-size: 48pt;
-	color:#9c0;
+	font-size: 56pt;
+	color:#c00;
+	line-height: 40px;
 }
 
 h2 {
 	font-size: 36pt;
-	color:#0ae;
+	color:#000;
 	line-height: 30px;
+	width:100%;
+	float: left;
+	margin-top:50px;
 }
 
 
-@media only screen and (max-width: 980px) {
+h3 {
+	font-size: 30pt;
+	color:#093;
+	line-height: 40px;
+}
+
 
-
+.menu {
+	width: 100%;
+	text-align: center;
+}
+
+.menu a {
+	display: inline-block;
+	background-color: #c00;
+	color:#fff;
+	padding:0px 20px;
+	margin:20px 5px;
+}
+
+.menu a:hover {
+	background-color: #000;
+	color:#fff;
+}
+
+.brick {
+	width:350px;
+	float:left;
+	margin: 10px;
+}
+
+@media only screen and (max-width: 980px) {
 
 	.content {
 		width:100%;
 		min-width: 390px;
 	}
 
-
-
 }
diff --git a/data.md b/data.md
@@ -0,0 +1 @@
+# The Pymiento Project
diff --git a/img/logo.png b/img/logo.png
diff --git a/index.html b/index.html
@@ -1,30 +1 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<title>Gonzalo // Creative Maker</title>
-	<style type="text/css">
-		body, html {
-			background: #111;
-			width: 100%;
-			color: #fff;
-		}
-
-		.logo {
-			width: 500px;
-			margin: 50px auto;
-		}
-
-		.logo img {
-			width: 100%
-		}
-
-	</style>
-
-</head>
-<body>
-	<div class="logo"><img src="img/logo.png"></div>
-	<h1>Hello World</h1>
-	<p>I'm hosted with GitHub Pages.</p>
-	<a href="/about/">About todo esto</a>
-</body>
-</html>
+<!DOCTYPE html><html><head><script type="text/javascript" src="js/render.js"></script></head><body></body></html>
diff --git a/js/functions.js → js/customized-mmd.js b/js/functions.js → js/customized-mmd.js
@@ -9,8 +9,8 @@
 	function inlineEscape(s)
 	{
 		return escape(s)
-			.replace(/!\[([^\]]*)]\(([^(]+)\)\(([^\]]*)\)/g, '</p></div></div><img alt="$1" src="$2" class="default"><div class="content"><p>')
-			.replace(/!\[([^\]]*)]\(([^(]+)\)/g, '<img alt="$1" src="$2" class="default">')
+			.replace(/!\[([^\]]*)]\(([^(]+)\)\(([^\]]*)\)/g, '</p></div></div><img alt="$1" src="$2" class="content"><div class="content"><p>')
+			.replace(/!\[([^\]]*)]\(([^(]+)\)/g, '<img alt="$1" src="$2" class="content">')
 			.replace(/\[([^\]]+)]\(([^(]+)\)/g, '$1'.link('$2'))
 			.replace(/`([^`]+)`/g, '<code>$1</code>')
 			.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')

diff --git a/js/render.js b/js/render.js
@@ -21,22 +21,76 @@ document.addEventListener("DOMContentLoaded", function(event) {
 
 	getScript("https://code.jquery.com/jquery-latest.min.js", function(){
 
-		$.getScript("../js/functions.js", function(){
+		href = window.location.href
 
-			myDataFile = window.location.pathname.split('/');
-			myDataFile = "../"+myDataFile[myDataFile.length-2]+"/data.md";
+		if(href.match(/8888/)==null){
+			url_base = 	"/";
+		}else{
+			count = (href.match(/\//g) || []).length;
+			url_base = count==4?"./":"../".repeat(count-4); 
+		}
+
+
+
+
+
+		$.getScript(url_base+"js/customized-mmd.js", function(){
+
+			//myDataFile = window.location.pathname.split('/');
+			myDataFile = "data.md";
 
 			$.ajax({
 	            url : myDataFile,
 	            success : function ( mydata ) {
 
 	            	$("<link/>", { rel: "stylesheet", type: "text/css", href: "https://fonts.googleapis.com/css?family=Maitree:400,200" }).appendTo("head");
 	            	$("<link/>", { rel: "stylesheet", type: "text/css", href: "https://fonts.googleapis.com/css?family=Oswald:400,700,300" }).appendTo("head");
-	            	$("<link/>", { rel: "stylesheet", type: "text/css", href: "../css/styles.css" }).appendTo("head");
+	            	$("<link/>", { rel: "stylesheet", type: "text/css", href: url_base+"css/styles.css" }).appendTo("head");
 
+
+	            	logo = "<div class='logo'><a href='"+url_base+"'><img src='"+url_base+"img/logo.png' /></a></div>"
+	            	menu = "";
+	            	menu2 = "";
+
 
-	            	$('body').append('<div class="content">'+mmd(mydata)+'</div>');
-
+
+	            	$.getJSON( url_base+"structure.json?r="+Math.random(), function( data ) {
+
+						$.each( data.pages, function( key, val ) {
+							if(menu!='') menu += "";
+					  		menu += "<a href='"+url_base+val.url+"'>" +  val.title +"</a>";
+
+					  		// CARGA LOS SUBMENUS
+					  		console.log(href +" " + val.url + " " + href.indexOf(val.url))
+					  		if(href.indexOf(val.url) > -1)
+						  		$.each( val.pages, function( key2, val2 ) {
+									menu2 
+									+= "<a href='"+url_base+val2.url+"'><div class='brick'><span style='font-family: oswald; font-size:30pt'>" 
+									+  val2.title 
+									+ "</span><img src='"+ url_base +  val2.image +"' /></a>" 
+									+ ""+val2.introduction+""
+									+"</div>";
+
+							  	});
+
+					  	});
+
+					  	menu = "<div class='menu'>"+ menu + "</div>";
+
+
+
+
+
+
+
+		            	console.log(menu)
+		            	markdownData = mmd(mydata);
+		            	title = markdownData.match(/<h1>(.*)<\/h1>/g);
+		            	title = title[0].replace("<h1>","").replace("</h1>","");
+		            	document.title = title;
+		            	$('body').append('<div class="content">'+logo+menu+markdownData+menu2+'</div>');
+
+	            	});
 
 
 

diff --git a/structure.json b/structure.json
@@ -0,0 +1,58 @@
+{
+	"pages":[
+		{
+			"title":"About",
+			"introduction":"",
+			"published": true,
+			"image":"",
+			"url":"about",
+			"pages":[]
+		},
+		{
+			"title":"Works",
+			"introduction":"",
+			"published": true,
+			"image":"",
+			"url":"works",
+			"pages":[
+				{
+					"title":"3D-Halsman",
+					"introduction":"Instantáneas en 3D instantáneo",
+					"published": true,
+					"image":"uploads/3dhalsman.gif",
+					"url":"works/3D-Halsman",
+					"pages":[
+
+					]
+				},
+				{
+					"title":"genKoan",
+					"introduction":"El sensei del futuro",
+					"published": true,
+					"image":"uploads/genkoan.png",
+					"url":"works/genKoan",
+					"pages":[
+
+					]
+				}
+
+			]
+		},
+		{
+			"title":"Team",
+			"introduction":"",
+			"published": true,
+			"image":"",
+			"url":"team",
+			"pages":[]
+		},
+		{
+			"title":"AGAP",
+			"introduction":"",
+			"published": true,
+			"image":"",
+			"url":"AGAP",
+			"pages":[]
+		}
+	]
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# Async Generative Art Protocol

		## Protocolo de Arte Generativa Asíncrona (AGAP)
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<!DOCTYPE html><html><head><script type="text/javascript" src="../js/render.js"></script></head><body></body></html>