Improve presentation text
This commit is contained in:
		
							parent
							
								
									bf2730f991
								
							
						
					
					
						commit
						1490ea6ad7
					
				| 
						 | 
					@ -1,15 +1,15 @@
 | 
				
			||||||
# YouTube Maze
 | 
					# YouTube Maze
 | 
				
			||||||
 | 
					
 | 
				
			||||||
Some YouTube creators have made video-gamebooks during which viewers can make choices that influence the course of the narration.
 | 
					Some YouTube creators have made video-gamebooks during which viewers are invited to make choices that influence the course of the narration.
 | 
				
			||||||
This is generally implemented by breaking up the video into short interlinked segments.
 | 
					This is generally implemented by breaking up the video into short interlinked segments.
 | 
				
			||||||
This tool automatically generates a visual representation of networks underlying such games by automatically exploring the video maze starting from a root video.
 | 
					This tool automatically generates visual representations of the networks underlying such games.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
[See it live →](https://youtube-maze.delab.re)
 | 
					[See it live →](https://youtube-maze.delab.re)
 | 
				
			||||||
 | 
					
 | 
				
			||||||
## How Does it Work?
 | 
					## How Does it Work?
 | 
				
			||||||
 | 
					
 | 
				
			||||||
The [algorithm](lib/explore.mjs) starts at the first video and explores the links recursively using a breadth-first search approach, keeping track of the links as it goes.
 | 
					The [exploration algorithm](lib/explore.mjs) automatically downloads metadata about each video from YouTube and then proceeds to a breadth-first search to generate a graph which is laid out using [Graphviz](http://www.graphviz.org).
 | 
				
			||||||
The [Graphviz](http://www.graphviz.org/) library is used to automatically lay out the graph so that as few edges cross as possible.
 | 
					Only the links in the end screens and in the in-video cards are considered for the exploration.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
## Running Locally
 | 
					## Running Locally
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -9,29 +9,36 @@
 | 
				
			||||||
        <h1>YouTube Maze</h1>
 | 
					        <h1>YouTube Maze</h1>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        <p>
 | 
					        <p>
 | 
				
			||||||
            Some YouTube creators have made video-gamebooks during which viewers can make choices that influence the course of the narration.
 | 
					            Some YouTube creators have made video-gamebooks during which viewers are invited to make choices that influence the course of the narration.
 | 
				
			||||||
            This is generally implemented by breaking up the video into short interlinked segments.
 | 
					            This is generally implemented by breaking up the video into short interlinked segments.
 | 
				
			||||||
            This tool automatically generates a visual representation of networks underlying such games by automatically exploring the video maze starting from a root video.
 | 
					            This tool automatically generates visual representations of the networks underlying such games.
 | 
				
			||||||
        </p>
 | 
					        </p>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        <p>
 | 
					 | 
				
			||||||
            <a href="https://forge.delab.re/matteo/youtube-maze">See the source code →</a>
 | 
					 | 
				
			||||||
        </p>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
        <h2>Generate a graph</h2>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
        <form action="/mazes" method="POST">
 | 
					 | 
				
			||||||
            <p>
 | 
					 | 
				
			||||||
                <input type="text" name="url" placeholder="Enter the URL of a YouTube video to generate the graph…">
 | 
					 | 
				
			||||||
                <input type="submit" value="Generate">
 | 
					 | 
				
			||||||
            </p>
 | 
					 | 
				
			||||||
        </form>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
        <h2>Some examples</h2>
 | 
					        <h2>Some examples</h2>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        <ul>
 | 
					        <ul>
 | 
				
			||||||
            <li><a href="/mazes/EZGra6O8ClQ">e-penser — “1 avril 2017”</a></li>
 | 
					            <li><a href="/mazes/EZGra6O8ClQ">e-penser — “1 avril 2017”</a></li>
 | 
				
			||||||
            <li><a href="/mazes/XM1ssJ8yxdg">Defakator — “Le YouTube Game”</a></li>
 | 
					            <li><a href="/mazes/XM1ssJ8yxdg">Defakator — “Le YouTube Game”</a></li>
 | 
				
			||||||
        </ul>
 | 
					        </ul>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					        <h2>Generate a graph</h2>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					        <form action="/mazes" method="POST">
 | 
				
			||||||
 | 
					            <p>
 | 
				
			||||||
 | 
					                <input type="text" name="url" placeholder="Enter the URL of any YouTube video to start from…">
 | 
				
			||||||
 | 
					                <input type="submit" value="Generate">
 | 
				
			||||||
 | 
					            </p>
 | 
				
			||||||
 | 
					        </form>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					        <h2>More information</h2>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					        <p>
 | 
				
			||||||
 | 
					            The exploration algorithm automatically downloads metadata about each video from YouTube and then proceeds to a breadth-first search to generate a graph which is laid out using <a href="http://www.graphviz.org">Graphviz</a>.
 | 
				
			||||||
 | 
					            Only the links in the end screens and in the in-video cards are considered for the exploration.
 | 
				
			||||||
 | 
					        </p>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					        <p>
 | 
				
			||||||
 | 
					            <a href="https://forge.delab.re/matteo/youtube-maze">See the source code →</a>
 | 
				
			||||||
 | 
					        </p>
 | 
				
			||||||
    </body>
 | 
					    </body>
 | 
				
			||||||
</html>
 | 
					</html>
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -62,7 +62,7 @@ body
 | 
				
			||||||
    line-height: var(--base-unit);
 | 
					    line-height: var(--base-unit);
 | 
				
			||||||
    color: var(--text-color);
 | 
					    color: var(--text-color);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    width: 15cm;
 | 
					    width: 16cm;
 | 
				
			||||||
    margin: calc(4 * var(--base-unit)) auto;
 | 
					    margin: calc(4 * var(--base-unit)) auto;
 | 
				
			||||||
    background: var(--background-color);
 | 
					    background: var(--background-color);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
		Reference in New Issue