resync
authorEdwin Razafimahatratra <edwin@robotalismsoft.com>
Thu, 24 Jan 2013 16:30:41 +0100
changeset 103 be6c1f9cc258
parent 102 097e4023ede3
child 104 9b3717a70556
resync
web/choix-de-mots-the-end-etc.html
web/credits-the-end-etc.html
web/fiction-the-end-etc.html
web/film-aleatoire-the-end-etc.html
web/index.html
web/instructions-the-end-etc.html
web/mindex.html
web/mindex_ba.html
web/musique-the-end-etc.html
web/non-supporte.html
web/partage-du-film-aleatoire-the-end-etc.html
web/portraits-regarde-the-end-etc.html
web/portraits-the-end-etc.html
web/prologue-the-end-etc.html
web/static/res/css/style_nonsupporte.css
web/static/res/img/choixMusique6.jpg
web/static/res/img/hp_title.jpg
web/static/res/img/menuPortraits.jpg
web/static/res/js/inchidebar.js
web/static/res/js/incplayer.js
web/static/res/js/modernizr.custom.js
web/the-end-etc.html
web/transition-the-end-etc.html
--- a/web/choix-de-mots-the-end-etc.html	Thu Jan 24 16:28:04 2013 +0100
+++ b/web/choix-de-mots-the-end-etc.html	Thu Jan 24 16:30:41 2013 +0100
@@ -1,10 +1,11 @@
 <!DOCTYPE html>
 <html lang="fr">
 	<head>
-		<meta charset="utf-8">
-		<title>The End - @todo</title>
+		<meta charset="UTF-8">
+		<title>THE END, ETC. UNE EXPÉRIENCE WEB DE LAETITIA MASSON</title>
 		
-		<meta name="description" content="@todo">
+		<meta name="description" content="Géraldine Michelon présente The End, etc. Un projet écrit et réalisé par Laetitia Masson. Une coproduction France Télévisions - Memo Prod avec la participation du Centre national du cinéma et de l'image animée, Incandescence et Institut de recherche et de l'innovation du Centre Georges Pompidou, en association avec France Inter.">
+
 		<link rel="icon" href="static/res/img/favicon.ico" />		
 		
 		<!-- Mobile Specific Metas -->		
--- a/web/credits-the-end-etc.html	Thu Jan 24 16:28:04 2013 +0100
+++ b/web/credits-the-end-etc.html	Thu Jan 24 16:30:41 2013 +0100
@@ -1,10 +1,11 @@
 <!DOCTYPE html>
 <html lang="fr" >
 	<head>
-		<meta charset="utf-8">
-		<title>Crédits - The End, etc.</title>
+		<meta charset="UTF-8">
+		<title>THE END, ETC. UNE EXPÉRIENCE WEB DE LAETITIA MASSON</title>
 		
-		<meta name="description" content="@todo">
+		<meta name="description" content="Géraldine Michelon présente The End, etc. Un projet écrit et réalisé par Laetitia Masson. Une coproduction France Télévisions - Memo Prod avec la participation du Centre national du cinéma et de l'image animée, Incandescence et Institut de recherche et de l'innovation du Centre Georges Pompidou, en association avec France Inter.">
+
 		<link rel="icon" href="static/res/img/favicon.ico" />		
 		
 		<!-- Mobile Specific Metas -->		
@@ -177,6 +178,10 @@
 				<p>CONTINENTAL MEDIA ASSURANCES</p>
 				<br>
 				
+				<h4>CONSEIL JURIDIQUE</h4>
+				<p>Olivier Laude (Laude Esquier Champey)</p>
+				<br>
+				
 				<h4>UNE COPRODUCTION FRANCE TÉLÉVISIONS</h3>
 
 				<h3>Nouvelles Écritures</h3>
--- a/web/fiction-the-end-etc.html	Thu Jan 24 16:28:04 2013 +0100
+++ b/web/fiction-the-end-etc.html	Thu Jan 24 16:30:41 2013 +0100
@@ -1,10 +1,11 @@
 <!DOCTYPE html>
 <html lang="fr">
 	<head>
-		<meta charset="utf-8">
-		<title>The End - @todo</title>
+		<meta charset="UTF-8">
+		<title>THE END, ETC. UNE EXPÉRIENCE WEB DE LAETITIA MASSON</title>
 		
-		<meta name="description" content="@todo">
+		<meta name="description" content="Géraldine Michelon présente The End, etc. Un projet écrit et réalisé par Laetitia Masson. Une coproduction France Télévisions - Memo Prod avec la participation du Centre national du cinéma et de l'image animée, Incandescence et Institut de recherche et de l'innovation du Centre Georges Pompidou, en association avec France Inter.">
+
 		<link rel="icon" href="static/res/img/favicon.ico" />		
 
 		<!-- Mobile Specific Metas -->		
--- a/web/film-aleatoire-the-end-etc.html	Thu Jan 24 16:28:04 2013 +0100
+++ b/web/film-aleatoire-the-end-etc.html	Thu Jan 24 16:30:41 2013 +0100
@@ -1,10 +1,11 @@
 <!DOCTYPE html>
 <html lang="fr">
 	<head>
-		<meta charset="utf-8">
-		<title>The End, etc. : ma version du film de Laetitia Masson</title>
+		<meta charset="UTF-8">
+		<title>THE END, ETC. : MA VERSION DU FILM DE LAETITIA MASSON</title>
 		
-		<meta name="description" content="The End, etc. : ma version du film de Laetitia Masson">
+		<meta name="description" content="Géraldine Michelon présente The End, etc. Un projet écrit et réalisé par Laetitia Masson. Une coproduction France Télévisions - Memo Prod avec la participation du Centre national du cinéma et de l'image animée, Incandescence et Institut de recherche et de l'innovation du Centre Georges Pompidou, en association avec France Inter.">
+
 		<link rel="icon" href="static/res/img/favicon.ico" />		
 		
 		<!-- Site Optimization for Facebook -->
@@ -144,7 +145,7 @@
             	incResize.resizeElements();
 
             	// Manage the hinding of the bar and of the pointer
-            	incHideBar.init();
+            	incHideBar.init(null);
             });
 
             var resizePopup = function() {
--- a/web/index.html	Thu Jan 24 16:28:04 2013 +0100
+++ b/web/index.html	Thu Jan 24 16:30:41 2013 +0100
@@ -3,10 +3,13 @@
       xmlns:og="http://ogp.me/ns#"
       xmlns:fb="https://www.facebook.com/2008/fbml">
 	<head>
-		<meta charset="utf-8">
-		<title>The End, etc.</title>
+		<meta charset="UTF-8">
+		<title>THE END, ETC. UNE EXPÉRIENCE WEB DE LAETITIA MASSON</title>
 		
-		<meta name="description" content="Géraldine Michelon présente The End, etc. Un projet écrit et réalisé par Laetitia Masson. Une coproduction France Télévisions - Memo Prod avec la participation du Centre national du cinéma et de l'image animée, Incandescence et Institut de recherche et de l'innovation du Centre Georges Pompidou, en participation avec France Inter.">
+		<meta name="description" content="Géraldine Michelon présente The End, etc. Un projet écrit et réalisé par Laetitia Masson. Une coproduction France Télévisions - Memo Prod avec la participation du Centre national du cinéma et de l'image animée, Incandescence et Institut de recherche et de l'innovation du Centre Georges Pompidou, en association avec France Inter.">
+		
+		<meta name="keywords" content="The End, etc, The End, Laetitia Masson, France Télévisions, CNC, Centre national du cinéma et de l'image animée, Nouvelles écritures, Memo Prod, Incandescence, IRI, Institut de recherche et de l'innovation du Centre Georges Pompidou, France Inter, expérience, une expérience de cinéma, film, production Géraldine Michelon, Œuvre en ligne, musique Jean-Louis Murat, engagement, désangagement, Élodie Bouchez, Aurore Clément, Haïm Cohen, Fred et Farid, Denis Jeambar, Jérôme Kircher, Elliot Perlman, Christian Tortu, Philippe Venere, André Wilms, La Marseillaise, L'Internationale, l'idée, Ni Dieu ni maître, Fiction, Portraits ">	
+		
 		<link rel="icon" href="static/res/img/favicon.ico" />		
 		
 		<!-- Site Optimization for Facebook -->
@@ -27,6 +30,30 @@
 		<script>
 			if (IsSmartphone()) { location.href = "mindex.html"; }	
 		</script>
+
+		<!-- Test html5  -->
+	    <script src="static/res/js/modernizr.custom.js"></script>        
+		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
+		<script>
+
+			var nosupport = false;
+			if (!Modernizr.canvas) {
+				console.log("No canvas support");
+				nosupport = true;
+			}
+			if (!Modernizr.audio) {
+				console.log("No audio support");
+				nosupport = true;
+			}
+			if (!Modernizr.video) {
+				console.log("No video support");
+				nosupport = true;
+			}
+			if (nosupport) {
+				location.href = "non-supporte.html";
+			}
+		</script>
+
 		<!-- Metanav FranceTV 	-->
 		<script src="http://static.francetv.fr/js/jquery.metanav-min.js" charset="utf-8"></script>
 
@@ -69,7 +96,7 @@
 						<ul>
 							<li>
 								<a href="http://www.francetv.fr/nouvelles-ecritures" target="_blank">
-									<img alt="Nouvelles écritures" src="static/res/img/footer/francetv.png" />
+									<img alt="Nouvelles écritures - France Télévisions" src="static/res/img/footer/francetv.png" />
 								</a>
 							</li><!--
 							--><li>
@@ -83,7 +110,7 @@
 						<ul>
 							<li>
 								<a href="http://www.cnc.fr" target="_blank">
-									<img alt="CNC" src="static/res/img/footer/cnc.png" />
+									<img alt="CNC - Centre national du cinéma et de l'image animée" src="static/res/img/footer/cnc.png" />
 								</a>
 							</li><!--
 							--><li>
@@ -93,7 +120,7 @@
 							</li><!--
 							--><li>
 								<a href="http://www.iri.centrepompidou.fr" target="_blank">
-									<img alt="iri Centre Pompidou" src="static/res/img/footer/iri.png" />		
+									<img alt="IRI - Institut de recherche et de l'innovation du Centre Georges Pompidou" src="static/res/img/footer/iri.png" />		
 								</a>
 							</li>
 						</ul>
@@ -112,8 +139,8 @@
 				<ul id="socialMedia" class="floatR">
 					<li class="license"><a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/fr/" target="_blank"><img alt="Licence Creative Commons" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-nd/3.0/fr/80x15.png" /></a></li><!--
 					--><li><a class="pointer" onclick="popup('popUpDiv', 'content')">Mentions légales</a></li><!--
-					--><li class="socialLogo"><a href="http://www.facebook.com/share.php?u=http://www.clients.incandescence.com/theend/" target="_blank"><img alt="Partager The End sur Facebook" src="static/res/img/footer/facebook.png"/></a></li><!--
-					--><li class="socialLogo"><a href="https://twitter.com/share?url=https%3A%2F%2Fwww.clients.incandescence.com%2Ftheend%2F" target="_blank"><img alt="Partager The End sur Twitter" src="static/res/img/footer/twitter.png"/></a></li>
+					--><li class="socialLogo"><a id="sharefb" target="_blank"><img alt="Partager The End sur Facebook" src="static/res/img/footer/facebook.png"/></a></li><!--
+					--><li class="socialLogo"><a id="sharetw" target="_blank"><img alt="Partager The End sur Twitter" src="static/res/img/footer/twitter.png"/></a></li>
 				</ul>				
 			</footer>
 			<section id="popUpDiv" style="display:none;">
@@ -148,7 +175,6 @@
 		<div id="blanket" style="display:none;"></div>
 
 		<!-- JavaScript -->		
-		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
         <script src="static/res/js/ease.js"></script>        
         <script src="static/res/js/incresize.js"></script>
         <script src="static/res/js/incmosaic.js"></script>
@@ -168,6 +194,16 @@
 
                 // Start mosaic effect
     			incMosaic.start("mosaic", 1, 9, 5, true, false, null, null);
+
+    			// Set the share url
+        		var replaceAll = function(txt, replace, with_this) {
+ 					return txt.replace(new RegExp(replace, 'g'),with_this);
+				}    			
+            	var urlToShare = document.URL.replace("index.html", "");
+            	var urlToShareTw = replaceAll(urlToShare, ":", "%3A");
+            	urlToShareTw = replaceAll(urlToShareTw, "/", "%2F");    			
+            	$("#sharefb").attr('href', "http://www.facebook.com/share.php?u=" + urlToShare);
+            	$("#sharetw").attr('href', "https://twitter.com/share?url=" + urlToShareTw);
             });
 
             var cliked = false;
--- a/web/instructions-the-end-etc.html	Thu Jan 24 16:28:04 2013 +0100
+++ b/web/instructions-the-end-etc.html	Thu Jan 24 16:30:41 2013 +0100
@@ -1,10 +1,11 @@
 <!DOCTYPE html>
 <html lang="fr">
 	<head>
-		<meta charset="utf-8">
-		<title>The End - @todo</title>
+		<meta charset="UTF-8">
+		<title>THE END, ETC. UNE EXPÉRIENCE WEB DE LAETITIA MASSON</title>
 		
-		<meta name="description" content="@todo">
+		<meta name="description" content="Géraldine Michelon présente The End, etc. Un projet écrit et réalisé par Laetitia Masson. Une coproduction France Télévisions - Memo Prod avec la participation du Centre national du cinéma et de l'image animée, Incandescence et Institut de recherche et de l'innovation du Centre Georges Pompidou, en association avec France Inter.">
+
 		<link rel="icon" href="static/res/img/favicon.ico" />		
 		
 		<!-- Mobile Specific Metas -->		
--- a/web/mindex.html	Thu Jan 24 16:28:04 2013 +0100
+++ b/web/mindex.html	Thu Jan 24 16:30:41 2013 +0100
@@ -3,10 +3,13 @@
       xmlns:og="http://ogp.me/ns#"
       xmlns:fb="https://www.facebook.com/2008/fbml">
 	<head>
-		<meta charset="utf-8">
-		<title>The End, etc.</title>
+		<meta charset="UTF-8">
+		<title>THE END, ETC. UNE EXPÉRIENCE WEB DE LAETITIA MASSON</title>
 		
-		<meta name="description" content="Géraldine Michelon présente The End, etc. Un projet écrit et réalisé par Laetitia Masson. Une coproduction France Télévisions - Memo Prod avec la participation du Centre national du cinéma et de l'image animée, Incandescence et Institut de recherche et de l'innovation du Centre Georges Pompidou, en participation avec France Inter.">
+		<meta name="description" content="Géraldine Michelon présente The End, etc. Un projet écrit et réalisé par Laetitia Masson. Une coproduction France Télévisions - Memo Prod avec la participation du Centre national du cinéma et de l'image animée, Incandescence et Institut de recherche et de l'innovation du Centre Georges Pompidou, en association avec France Inter.">
+		
+		<meta name="keywords" content="The End, etc, The End, Laetitia Masson, France Télévisions, CNC, Centre national du cinéma et de l'image animée, Nouvelles écritures, Memo Prod, Incandescence, IRI, Institut de recherche et de l'innovation du Centre Georges Pompidou, France Inter, expérience, une expérience de cinéma, film, production Géraldine Michelon, Œuvre en ligne, musique Jean-Louis Murat, engagement, désangagement, Élodie Bouchez, Aurore Clément, Haïm Cohen, Fred et Farid, Denis Jeambar, Jérôme Kircher, Elliot Perlman, Christian Tortu, Philippe Venere, André Wilms, La Marseillaise, L'Internationale, l'idée, Ni Dieu ni maître, Fiction, Portraits ">	
+		
 		<link rel="icon" href="static/res/img/favicon.ico" />		
 		
 		<!-- Mobile Specific Metas -->
@@ -102,8 +105,8 @@
 				</ul>
 				<ul id="socialMedia" class="floatR">
 					<li><a class="pointer" onclick="popup('popUpDiv', 'content')">Mentions légales</a></li><!--
-					--><li class="socialLogo"><a href="http://www.facebook.com/share.php?u=http://www.clients.incandescence.com/theend/" target="_blank"><img alt="Partager The End sur Facebook" src="static/res/img/footer/facebook.png"/></a></li><!--
-					--><li class="socialLogo"><a href="https://twitter.com/share?url=https%3A%2F%2Fwww.clients.incandescence.com%2Ftheend%2F" target="_blank"><img alt="Partager The End sur Twitter" src="static/res/img/footer/twitter.png"/></a></li>
+					--><li class="socialLogo"><a id="sharefb" target="_blank"><img alt="Partager The End sur Facebook" src="static/res/img/footer/facebook.png"/></a></li><!--
+					--><li class="socialLogo"><a id="sharetw" target="_blank"><img alt="Partager The End sur Twitter" src="static/res/img/footer/twitter.png"/></a></li>
 				</ul>				
 			</footer>
 			<section id="popUpDiv" style="display:none;">
@@ -147,6 +150,18 @@
         		}
 				$(window).resize(resize);
 				window.onorientationchange = resize;
+
+    			// Set the share url
+        		var replaceAll = function(txt, replace, with_this) {
+ 					return txt.replace(new RegExp(replace, 'g'),with_this);
+				}    			
+            	var urlToShare = document.URL.replace("mindex.html", "");
+            	var urlToShareTw = replaceAll(urlToShare, ":", "%3A");
+            	urlToShareTw = replaceAll(urlToShareTw, "/", "%2F");    			
+            	$("#sharefb").attr('href', "http://www.facebook.com/share.php?u=" + urlToShare);
+            	$("#sharetw").attr('href', "https://twitter.com/share?url=" + urlToShareTw);
+            	console.log(urlToShare);
+            	console.log(urlToShareTw);				
 			});
 		</script>
 	</body>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/web/mindex_ba.html	Thu Jan 24 16:30:41 2013 +0100
@@ -0,0 +1,165 @@
+<!DOCTYPE html>
+<html lang="fr"
+      xmlns:og="http://ogp.me/ns#"
+      xmlns:fb="https://www.facebook.com/2008/fbml">
+	<head>
+		<meta charset="utf-8">
+		<title>The End, etc.</title>
+		
+		<meta name="description" content="Géraldine Michelon présente The End, etc. Un projet écrit et réalisé par Laetitia Masson. Une coproduction France Télévisions - Memo Prod avec la participation du Centre national du cinéma et de l'image animée, Incandescence et Institut de recherche et de l'innovation du Centre Georges Pompidou, en association avec France Inter.">
+		<link rel="icon" href="static/res/img/favicon.ico" />		
+		
+		<!-- Mobile Specific Metas -->
+		<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />
+		
+		<!-- Site Optimization for Facebook -->
+        <meta property="og:title" content="The End, etc." />
+		<meta property="og:type" content="website" />
+		<meta property="og:image" content="http://the-end.nouvelles-ecritures.francetv.fr/theend_fb.jpg" />
+		<meta property="og:site_name" content="The End, etc." />
+        <meta property="og:description" content="The End, etc. Mise en ligne le 13 FÉVRIER 2013"/>		
+		
+		<!-- Test Smartphone -->
+	    <script src="static/res/js/incdetectmobile.js"></script>        
+		<script>
+			if (!IsSmartphone()) { location.href = "index.html"; }
+		</script>
+
+		<link rel="stylesheet" href="static/res/css/style_1024.css" /> 
+		
+	</head>
+	<body id="mobilhp">
+		<!-- div content - site takes the full height of browser -->	
+		<div id="content">
+		
+			<!-- div content_top - the elements takes the full height of "content_top" -->				
+			<div id="content_top">
+				
+				<header id="top"><!--
+					--><div class="strut"></div><!--
+
+					--><div id="title_hp" >
+						<h2>UNE EXPÉRIENCE DE CINÉMA</h2>
+						<h1>THE END, ETC.</h1>
+						<h2 class="h2_exeption">DE LAETITIA MASSON</h2>
+					</div><!--
+				--></header>	
+				
+				<section id="bottom" >
+					<div class="strut"></div><!--
+					--><div class="fullScreen_vcentering">
+						<p id="txt_phone">Mise en ligne <br>le 13 FÉVRIER 2013</p>
+					</div>
+				</section>
+			</div>
+			<!-- /div content_top -->				
+
+			<footer id="footer" class="clearfix">
+				<ul class="logo_partners floatL">
+					<li>UNE CO-PRODUCTION
+						<ul>
+							<li>
+								<a href="http://www.francetv.fr/nouvelles-ecritures" target="_blank">
+									<img alt="Nouvelles écritures" src="static/res/img/footer/francetv.png" />
+								</a>
+							</li><!--
+							--><li>
+								<a href="http://www.memoprod.fr" target="_blank">
+									<img alt="Memo prod." src="static/res/img/footer/memoprod.png" />
+								</a>
+							</li>
+						</ul>
+					</li><!--
+					--><li>AVEC LE SOUTIEN DE
+						<ul>
+							<li>
+								<a href="http://www.cnc.fr" target="_blank">
+									<img alt="CNC" src="static/res/img/footer/cnc.png" />
+								</a>
+							</li><!--
+							--><li>
+								<a href="http://www.incandescence.com" target="_blank">
+									<img alt="Incandescence" src="static/res/img/footer/inc.png" />		
+								</a>
+							</li><!--
+							--><li>
+								<a href="http://www.iri.centrepompidou.fr" target="_blank">
+									<img alt="iri Centre Pompidou" src="static/res/img/footer/iri.png" />		
+								</a>
+							</li>
+						</ul>
+					</li>
+				</ul>
+				<ul class="logo_partners floatL">
+					<li>EN PARTENARIAT AVEC
+						<ul>
+							<li class="txt_hidden logo_bg">
+								<a href="http://www.franceinter.fr/" target="_blank">www.franceinter.fr									
+								</a>
+							</li>
+						</ul>
+					</li>	
+				</ul>
+				<ul id="socialMedia" class="floatR">
+					<li><a class="pointer" onclick="popup('popUpDiv', 'content')">MENTIONS lÉGALES</a></li><!--
+					--><li class="socialLogo"><a id="sharefb" target="_blank"><img alt="Partager The End sur Facebook" src="static/res/img/footer/facebook.png"/></a></li><!--
+					--><li class="socialLogo"><a id="sharetw" target="_blank"><img alt="Partager The End sur Twitter" src="static/res/img/footer/twitter.png"/></a></li>
+				</ul>				
+			</footer>
+			<section id="popUpDiv" style="display:none;">
+				<div id="popUpTitle">
+					<h2>Mentions Légales</h2>
+					<a id="popUpClose" class="pointer" onclick="popup('popUpDiv', 'content')">
+						<img alt="Fermer" src="static/res/img/popUpClose.png"/>
+					</a>
+				</div>
+				<div id="popUpTxtScroll">				
+					<p><span class="gris">Editeur :</span> FRANCE TELEVISIONS<br>
+					<span class="gris">Siège social :</span> 7, Esplanade Henri de France 75015 PARIS<br>
+					<span class="gris">RCS de Paris :</span> 432 766 947<br>
+					<span class="gris">Directeur de la Publication :</span> Rémy Pflimlin<br>
+					<span class="gris">Tel :</span> (+33) 08 90 71 02 02 (0.15 €/min)</p>
+					<p><span class="gris">Hébergeur :</span> FRANCE OXALIDE<br>
+					<span class="gris">Siège social :</span> 25, Boulevard de Strasbourg 75010 Paris<br>
+					<span class="gris">Tel :</span> + 33(0)1 75 771 660</p>
+					<h3>DONNEES PERSONNELLES</h3>
+					<p>En application de la loi n°78-17 du 6 janvier 1978 relative à l’informatique, aux fichiers et aux libertés, chaque internaute dispose des droits d’opposition (article 38 de la loi), d’accès (articles 39, 41 et 42 de la loi) et de rectification (article 40 de la loi) des données le concernant. </p>
+					<p>Ainsi, il peut exiger que soient rectifiées, complétées, clarifiées, mises à jour ou effacées les informations le concernant qui sont inexactes, incomplètes, équivoques, périmées, ou dont la collecte ou l’utilisation, la communication ou la conservation est interdite.</p>
+					<p>Chaque internaute peut exercer ces droits :<br>
+					- soit en accédant à son compte à l’aide de son e-mail et de son mot de passe à l’adresse suivante : http://www.leclubfrancetelevisions.fr<br>
+					- soit en écrivant à FranceTélévisions - A l’attention de Monsieur le Responsable du Service Inscription Internet - 7 Esplanade Henri de France 75015 Paris.</p>
+					<h3>CREDITS</h3>
+					<p>Les dépêches de presse et contenus graphiques d’agence utilisés dans la préparation des informations sont la propriété intellectuelle des différentes agences partenaires de francetvinfo (AFP, Reuters, MaxpPPP, Sipa, Getty).</p>
+					<h3>LOGICIELS</h3>
+					<p>Certains sites de France Télévisions sont créés à partir des logiciels libres (sous licence GPL) de publication Spip (http://www.uzine.net/spip) et Drupal (http://drupal.org).</p>
+				</div>
+			</section>	
+		</div>	
+		<div id="blanket" style="display:none;"></div>
+
+		<!-- JavaScript -->		
+		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
+        <script src="static/res/js/popup.js"></script>
+        <script>        
+        	$(function() {
+        		var resize = function() {
+            		popupPosition('popUpDiv', 'content');
+        		}
+				$(window).resize(resize);
+				window.onorientationchange = resize;
+
+    			// Set the share url
+        		var replaceAll = function(txt, replace, with_this) {
+ 					return txt.replace(new RegExp(replace, 'g'),with_this);
+				}    			
+            	var urlToShare = document.URL.replace("mindex.html", "");
+            	var urlToShareTw = replaceAll(urlToShare, ":", "%3A");
+            	urlToShareTw = replaceAll(urlToShareTw, "/", "%2F");    			
+            	$("#sharefb").attr('href', "http://www.facebook.com/share.php?u=" + urlToShare);
+            	$("#sharetw").attr('href', "https://twitter.com/share?url=" + urlToShareTw);
+            	console.log(urlToShare);
+            	console.log(urlToShareTw);				
+			});
+		</script>
+	</body>
+</html>
\ No newline at end of file
--- a/web/musique-the-end-etc.html	Thu Jan 24 16:28:04 2013 +0100
+++ b/web/musique-the-end-etc.html	Thu Jan 24 16:30:41 2013 +0100
@@ -1,10 +1,11 @@
 <!DOCTYPE html>
 <html lang="fr">
 	<head>
-		<meta charset="utf-8">
-		<title>The End - @todo</title>
+		<meta charset="UTF-8">
+		<title>THE END, ETC. UNE EXPÉRIENCE WEB DE LAETITIA MASSON</title>
 		
-		<meta name="description" content="@todo">
+		<meta name="description" content="Géraldine Michelon présente The End, etc. Un projet écrit et réalisé par Laetitia Masson. Une coproduction France Télévisions - Memo Prod avec la participation du Centre national du cinéma et de l'image animée, Incandescence et Institut de recherche et de l'innovation du Centre Georges Pompidou, en association avec France Inter.">
+
 		<link rel="icon" href="static/res/img/favicon.ico" />		
 
 		<!-- Mobile Specific Metas -->		
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/web/non-supporte.html	Thu Jan 24 16:30:41 2013 +0100
@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<html lang="fr"
+      xmlns:og="http://ogp.me/ns#"
+      xmlns:fb="https://www.facebook.com/2008/fbml">
+	<head>
+		<meta charset="UTF-8">
+		<title>THE END, ETC. UNE EXPÉRIENCE WEB DE LAETITIA MASSON</title>
+		
+		<meta name="description" content="Géraldine Michelon présente The End, etc. Un projet écrit et réalisé par Laetitia Masson. Une coproduction France Télévisions - Memo Prod avec la participation du Centre national du cinéma et de l'image animée, Incandescence et Institut de recherche et de l'innovation du Centre Georges Pompidou, en association avec France Inter.">
+		
+		<meta name="keywords" content="The End, etc, The End, Laetitia Masson, France Télévisions, CNC, Centre national du cinéma et de l'image animée, Nouvelles écritures, Memo Prod, Incandescence, IRI, Institut de recherche et de l'innovation du Centre Georges Pompidou, France Inter, expérience, une expérience de cinéma, film, production Géraldine Michelon, Œuvre en ligne, musique Jean-Louis Murat, engagement, désangagement, Élodie Bouchez, Aurore Clément, Haïm Cohen, Fred et Farid, Denis Jeambar, Jérôme Kircher, Elliot Perlman, Christian Tortu, Philippe Venere, André Wilms, La Marseillaise, L'Internationale, l'idée, Ni Dieu ni maître, Fiction, Portraits ">	
+
+		<link rel="icon" href="static/res/img/favicon.ico" />		
+		
+		<!-- Mobile Specific Metas -->
+		<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />
+		
+		<!-- Site Optimization for Facebook -->
+        <meta property="og:title" content="The End, etc." />
+		<meta property="og:type" content="website" />
+		<meta property="og:image" content="https://www.clients.incandescence.com/theend/theend_fb.jpg" />
+		<meta property="og:site_name" content="The End, etc." />
+        <meta property="og:description" content="The End, etc. : une expérience web de Laetitia Masson"/>		
+		
+		<link rel="stylesheet" href="static/res/css/style_nonsupporte.css" />
+		
+	</head>
+	<body id="mobilhp">
+		<!-- div content - site takes the full height of browser -->	
+		<div id="content">
+		
+			<!-- div content_top - the elements takes the full height of "content_top" -->				
+			<div id="content_top">
+				
+				<header id="top">
+					<div class="strut"></div>
+					<div id="title_hp">
+						<h1>UNE EXPÉRIENCE DE CINÉMA THE END, ETC. DE LAETITIA MASSON</h1>
+					</div>
+				</header>	
+				
+				<section id="middle" >
+					<div class="strut"></div><!--
+					--><div class="fullScreen_vcentering">
+						<p id="txt_phone">Pour composer votre film, rendez-vous sur une tablette ou mettez à jour votre navigateur internet pour disposer de la dernière version.</p>
+					</div>
+				</section>
+			</div>
+			<!-- /div content_top -->				
+
+			<footer id="footer" class="clearfix">
+				<ul class="logo_partners floatL">
+					<li>UNE CO-PRODUCTION
+						<ul>
+							<li>
+								<a href="http://www.francetv.fr/nouvelles-ecritures" target="_blank">
+									<img alt="Nouvelles écritures" src="static/res/img/footer/francetv.png" />
+								</a>
+							</li><!--
+							--><li>
+								<a href="http://www.memoprod.fr" target="_blank">
+									<img alt="Memo prod." src="static/res/img/footer/memoprod.png" />
+								</a>
+							</li>
+						</ul>
+					</li><!--
+					--><li>AVEC LE SOUTIEN DE
+						<ul>
+							<li>
+								<a href="http://www.cnc.fr" target="_blank">
+									<img alt="CNC" src="static/res/img/footer/cnc.png" />
+								</a>
+							</li><!--
+							--><li>
+								<a href="http://www.incandescence.com" target="_blank">
+									<img alt="Incandescence" src="static/res/img/footer/inc.png" />		
+								</a>
+							</li><!--
+							--><li>
+								<a href="http://www.iri.centrepompidou.fr" target="_blank">
+									<img alt="iri Centre Pompidou" src="static/res/img/footer/iri.png" />		
+								</a>
+							</li>
+						</ul>
+					</li>
+				</ul>
+				<ul class="logo_partners floatL">
+					<li>EN PARTENARIAT AVEC
+						<ul>
+							<li class="txt_hidden logo_bg">
+								<a href="http://www.franceinter.fr/" target="_blank">www.franceinter.fr									
+								</a>
+							</li>
+						</ul>
+					</li>	
+				</ul>
+				<ul id="socialMedia" class="floatR">
+					<li><a class="pointer" onclick="popup('popUpDiv', 'content')">Mentions légales</a></li><!--
+					--><li class="socialLogo"><a id="sharefb" target="_blank"><img alt="Partager The End sur Facebook" src="static/res/img/footer/facebook.png"/></a></li><!--
+					--><li class="socialLogo"><a id="sharetw" target="_blank"><img alt="Partager The End sur Twitter" src="static/res/img/footer/twitter.png"/></a></li>
+				</ul>				
+			</footer>
+			<section id="popUpDiv" style="display:none;">
+				<div id="popUpTitle">
+					<h2>Mentions Légales</h2>
+					<a id="popUpClose" class="pointer" onclick="popup('popUpDiv', 'content')">
+						<img alt="Fermer" src="static/res/img/popUpClose.png"/>
+					</a>
+				</div>
+				<div id="popUpTxtScroll">				
+					<p><span class="gris">Editeur :</span> FRANCE TELEVISIONS<br>
+					<span class="gris">Siège social :</span> 7, Esplanade Henri de France 75015 PARIS<br>
+					<span class="gris">RCS de Paris :</span> 432 766 947<br>
+					<span class="gris">Directeur de la Publication :</span> Rémy Pflimlin<br>
+					<span class="gris">Tel :</span> (+33) 08 90 71 02 02 (0.15 €/min)</p>
+					<p><span class="gris">Hébergeur :</span> FRANCE OXALIDE<br>
+					<span class="gris">Siège social :</span> 25, Boulevard de Strasbourg 75010 Paris<br>
+					<span class="gris">Tel :</span> + 33(0)1 75 771 660</p>
+					<h3>DONNEES PERSONNELLES</h3>
+					<p>En application de la loi n°78-17 du 6 janvier 1978 relative à l’informatique, aux fichiers et aux libertés, chaque internaute dispose des droits d’opposition (article 38 de la loi), d’accès (articles 39, 41 et 42 de la loi) et de rectification (article 40 de la loi) des données le concernant. </p>
+					<p>Ainsi, il peut exiger que soient rectifiées, complétées, clarifiées, mises à jour ou effacées les informations le concernant qui sont inexactes, incomplètes, équivoques, périmées, ou dont la collecte ou l’utilisation, la communication ou la conservation est interdite.</p>
+					<p>Chaque internaute peut exercer ces droits :<br>
+					- soit en accédant à son compte à l’aide de son e-mail et de son mot de passe à l’adresse suivante : http://www.leclubfrancetelevisions.fr<br>
+					- soit en écrivant à FranceTélévisions - A l’attention de Monsieur le Responsable du Service Inscription Internet - 7 Esplanade Henri de France 75015 Paris.</p>
+					<h3>CREDITS</h3>
+					<p>Les dépêches de presse et contenus graphiques d’agence utilisés dans la préparation des informations sont la propriété intellectuelle des différentes agences partenaires de francetvinfo (AFP, Reuters, MaxpPPP, Sipa, Getty).</p>
+					<h3>LOGICIELS</h3>
+					<p>Certains sites de France Télévisions sont créés à partir des logiciels libres (sous licence GPL) de publication Spip (http://www.uzine.net/spip) et Drupal (http://drupal.org).</p>
+				</div>
+			</section>	
+		</div>	
+		<div id="blanket" style="display:none;"></div>
+
+		<!-- JavaScript -->		
+		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
+        <script src="static/res/js/popup.js"></script>
+        <script>        
+        	$(function() {
+        		var resize = function() {
+            		popupPosition('popUpDiv', 'content');
+        		}
+				$(window).resize(resize);
+				window.onorientationchange = resize;
+
+    			// Set the share url
+        		var replaceAll = function(txt, replace, with_this) {
+ 					return txt.replace(new RegExp(replace, 'g'),with_this);
+				}    			
+            	var urlToShare = document.URL.replace("mindex.html", "");
+            	var urlToShareTw = replaceAll(urlToShare, ":", "%3A");
+            	urlToShareTw = replaceAll(urlToShareTw, "/", "%2F");    			
+            	$("#sharefb").attr('href', "http://www.facebook.com/share.php?u=" + urlToShare);
+            	$("#sharetw").attr('href', "https://twitter.com/share?url=" + urlToShareTw);
+            	console.log(urlToShare);
+            	console.log(urlToShareTw);				
+			});
+		</script>
+	</body>
+</html>
\ No newline at end of file
--- a/web/partage-du-film-aleatoire-the-end-etc.html	Thu Jan 24 16:28:04 2013 +0100
+++ b/web/partage-du-film-aleatoire-the-end-etc.html	Thu Jan 24 16:30:41 2013 +0100
@@ -3,10 +3,11 @@
       xmlns:og="http://ogp.me/ns#"
       xmlns:fb="https://www.facebook.com/2008/fbml" >
 	<head>
-		<meta charset="utf-8">
-		<title>The End, etc.</title>
+		<meta charset="UTF-8">
+		<title>THE END, ETC. UNE EXPÉRIENCE WEB DE LAETITIA MASSON</title>
 		
-		<meta name="description" content="The End, etc.">
+		<meta name="description" content="Géraldine Michelon présente The End, etc. Un projet écrit et réalisé par Laetitia Masson. Une coproduction France Télévisions - Memo Prod avec la participation du Centre national du cinéma et de l'image animée, Incandescence et Institut de recherche et de l'innovation du Centre Georges Pompidou, en association avec France Inter.">
+
 		<link rel="icon" href="static/res/img/favicon.ico" />		
 		
 		<!-- Mobile Specific Metas -->		
--- a/web/portraits-regarde-the-end-etc.html	Thu Jan 24 16:28:04 2013 +0100
+++ b/web/portraits-regarde-the-end-etc.html	Thu Jan 24 16:30:41 2013 +0100
@@ -1,10 +1,11 @@
 <!DOCTYPE html>
 <html lang="fr">
 	<head>
-		<meta charset="utf-8">
-		<title>The End niv1- @todo</title>
+		<meta charset="UTF-8">
+		<title>THE END, ETC. UNE EXPÉRIENCE WEB DE LAETITIA MASSON</title>
 		
-		<meta name="description" content="@todo">
+		<meta name="description" content="Géraldine Michelon présente The End, etc. Un projet écrit et réalisé par Laetitia Masson. Une coproduction France Télévisions - Memo Prod avec la participation du Centre national du cinéma et de l'image animée, Incandescence et Institut de recherche et de l'innovation du Centre Georges Pompidou, en association avec France Inter.">
+
 		<link rel="icon" href="static/res/img/favicon.ico" />		
 		
 		<!-- Mobile Specific Metas -->		
@@ -32,7 +33,7 @@
 			<div id="content_top">	
 				<div id="topEmpty">
 					<div class="boxReturn">	
-	       				<button class="btnReturn" onClick="location.href='the-end-etc.html';">Retour</button>  
+	       				<button id="breturn" class="btnReturn" onClick="location.href='the-end-etc.html';">Retour</button>  
 					</div>
 				</div>
 				<section id="main">	
@@ -141,12 +142,20 @@
             	incResize.resizeElements();
 
             	// Manage the hinding of the bar and of the pointer
-            	incHideBar.init();
+            	incHideBar.init(showHide);
             });
 
             var resizePopup = function() {
             	popupPosition('popUpDiv', 'content');
             }
+
+            var showHide = function(show) {
+            	if (show) {
+            		$("#breturn").show();
+            	} else {
+            		$("#breturn").hide();
+            	}
+            }
         </script>        			
 	</body>	
 </html>
\ No newline at end of file
--- a/web/portraits-the-end-etc.html	Thu Jan 24 16:28:04 2013 +0100
+++ b/web/portraits-the-end-etc.html	Thu Jan 24 16:30:41 2013 +0100
@@ -1,10 +1,11 @@
 <!DOCTYPE html>
 <html lang="fr">
 	<head>
-		<meta charset="utf-8">
-		<title>The End - @todo</title>
+		<meta charset="UTF-8">
+		<title>THE END, ETC. UNE EXPÉRIENCE WEB DE LAETITIA MASSON</title>
 		
-		<meta name="description" content="@todo">
+		<meta name="description" content="Géraldine Michelon présente The End, etc. Un projet écrit et réalisé par Laetitia Masson. Une coproduction France Télévisions - Memo Prod avec la participation du Centre national du cinéma et de l'image animée, Incandescence et Institut de recherche et de l'innovation du Centre Georges Pompidou, en association avec France Inter.">
+
 		<link rel="icon" href="static/res/img/favicon.ico" />		
 
 		<!-- Mobile Specific Metas -->		
--- a/web/prologue-the-end-etc.html	Thu Jan 24 16:28:04 2013 +0100
+++ b/web/prologue-the-end-etc.html	Thu Jan 24 16:30:41 2013 +0100
@@ -1,10 +1,12 @@
 <!DOCTYPE html>
 <html lang="fr">
 	<head>
-		<meta charset="utf-8">
-		<title>The End - @todo</title>
+		<meta charset="UTF-8">
+		<title>THE END, ETC. UNE EXPÉRIENCE WEB DE LAETITIA MASSON</title>
 		
-		<meta name="description" content="@todo">
+		<meta name="description" content="Géraldine Michelon présente The End, etc. Un projet écrit et réalisé par Laetitia Masson. Une coproduction France Télévisions - Memo Prod avec la participation du Centre national du cinéma et de l'image animée, Incandescence et Institut de recherche et de l'innovation du Centre Georges Pompidou, en association avec France Inter.">
+
+
 		<link rel="icon" href="static/res/img/favicon.ico" />		
 
 		<!-- Mobile Specific Metas -->		
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/web/static/res/css/style_nonsupporte.css	Thu Jan 24 16:30:41 2013 +0100
@@ -0,0 +1,101 @@
+/*----------------------------------------------*/
+/*	Summary					*/
+/*----------------------------------------------*/
+
+/*	1- Mentions	*/
+/*	2- Reset	*/
+/*	3- Base styles	*/
+/*	4- HP	*/
+
+/*----------------------------------------------*/
+/*	1- Mentions									*/
+/*----------------------------------------------*/
+
+/* @client : The End	*/
+/* @date : octobre 2012	*/
+
+/*----------------------------------------------*/
+/*	2- Reset									*/
+/*----------------------------------------------*/
+html,body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,legend,input,button,textarea,select,figure,p,blockquote,th,td {
+	margin:0;
+	padding:0;
+}
+html {
+	font-size: 100%; 
+}
+h1,h2,h3,h4,h5,h6 {
+	font-size: 100%;
+	font-weight: normal;
+	font-style: normal;
+}
+a,
+a:link,
+a:visited,
+a:active,
+a:hover,
+a:focus  {
+	text-decoration: none;
+}
+li {
+	list-style: none;
+}
+img, table, td, blockquote, code, pre, textarea, input, object {
+	max-width: 100%;
+}
+/*----------------------------------------------*/
+/*	3- Base styles								*/
+/*----------------------------------------------*/
+html {
+	overflow: hidden;
+}
+body {
+	background-color: #000000; 
+	font-size: 1em;
+	line-height: 1;	
+}
+html, body {	
+	height: 100%;
+	width: 100%;
+}
+#content {
+	margin: 0 auto;
+	width: 80%;
+}
+#content p {
+    margin: 1em 0;
+    font-family: Arial, "arialregular", Helvetica, sans-serif; 
+    font-size: 14px;
+    color: #ffffff;
+}
+b,
+strong,
+.bold  {
+    font-weight: bold;
+}
+
+.txt_hidden {
+	text-indent: -9999em;
+}
+
+h1 {
+	margin : auto;
+	width: 422px;
+	height: 114px;
+	background-image: url("../img/hp_title.jpg");
+	overflow: hidden;
+	text-indent: -9999px;
+}	
+#top {
+	height: 30%;
+	background: red;
+}
+#middle {
+	height: 30%;
+	background: green;
+}	
+#footer {
+	height: 40%;
+	background: red;
+
+}
\ No newline at end of file
Binary file web/static/res/img/choixMusique6.jpg has changed
Binary file web/static/res/img/hp_title.jpg has changed
Binary file web/static/res/img/menuPortraits.jpg has changed
--- a/web/static/res/js/inchidebar.js	Thu Jan 24 16:28:04 2013 +0100
+++ b/web/static/res/js/inchidebar.js	Thu Jan 24 16:30:41 2013 +0100
@@ -3,6 +3,7 @@
 	this.timeoutBarPointer;
 	this.goUp;
 	this.canShowCursor;
+    this.callback;
 
     this.showBarPointer = function(state) {
     	if (state) {
@@ -33,7 +34,11 @@
                 setTimeout(function() {incHideBar.canShowCursor = true;}, 300);
             }
 		}
-    }
+
+        if (this.callback !== null) {
+            this.callback(state);
+        }
+    };
 
     this.hideBarPointerTimeout = function(time) {
     	this.timeoutBarPointer = setTimeout(function() {	
@@ -53,9 +58,10 @@
     	}
     };
 
-    this.init = function() {
+    this.init = function(callback) {
         this.goUp = false;
         this.canShowCursor = incPlayer.ipad;
+        this.callback = callback;
 
         if (!incPlayer.ipad) {
             // Hide bar and pointer in seconds
@@ -64,7 +70,9 @@
 
         if (incPlayer.ipad) {
             document.ontouchmove = function(e) {
-                e.preventDefault();
+                if (typeof( popupOn ) === "undefined" || !popupOn) {
+                    e.preventDefault();
+                }
             }; 
 
             document.ontouchstart = function() {
--- a/web/static/res/js/incplayer.js	Thu Jan 24 16:28:04 2013 +0100
+++ b/web/static/res/js/incplayer.js	Thu Jan 24 16:30:41 2013 +0100
@@ -138,6 +138,10 @@
 			for (var i = 0; i < videosIndex.length; ++i) {
 				this.sequences.push(this.allSequencesData.videos[videosIndex[i]]);		
 			}
+		} else if (wordsIndex[0] == null) {
+			// No reason to be here, redirection
+			location.href = "index.html";
+
 		} else {
 			// We choose new videos
 
@@ -764,14 +768,26 @@
 	this.loadJson = function(jsonFile)
 	{
 		var txt = this.loadTxtFile(jsonFile);
-		return JSON.parse(txt);
+		var obj = null;
+
+        $.ajax({
+            url: jsonFile,
+            async: false,
+            success: function (data){
+				obj = data;
+            }
+        });
+
+		return obj;
 	};
 
 	this.loadTxtFile = function(jsonFile)
 	{
 		var xhr = new XMLHttpRequest();
-		xhr.open("GET", jsonFile, false);  
-		xhr.overrideMimeType('text/plain; charset=x-user-defined');
+		xhr.open("GET", jsonFile, false); 
+		if (xhr.overrideMimeType) {
+			xhr.overrideMimeType('text/plain; charset=x-user-defined');
+		}
 
 		try {
 			xhr.send(null); 
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/web/static/res/js/modernizr.custom.js	Thu Jan 24 16:30:41 2013 +0100
@@ -0,0 +1,4 @@
+/* Modernizr 2.6.2 (Custom Build) | MIT & BSD
+ * Build: http://modernizr.com/download/#-canvas-audio-video-shiv-cssclasses-load
+ */
+;window.Modernizr=function(a,b,c){function u(a){j.cssText=a}function v(a,b){return u(prefixes.join(a+";")+(b||""))}function w(a,b){return typeof a===b}function x(a,b){return!!~(""+a).indexOf(b)}function y(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:w(f,"function")?f.bind(d||b):f}return!1}var d="2.6.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m={},n={},o={},p=[],q=p.slice,r,s={}.hasOwnProperty,t;!w(s,"undefined")&&!w(s.call,"undefined")?t=function(a,b){return s.call(a,b)}:t=function(a,b){return b in a&&w(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=q.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(q.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(q.call(arguments)))};return e}),m.canvas=function(){var a=b.createElement("canvas");return!!a.getContext&&!!a.getContext("2d")},m.video=function(){var a=b.createElement("video"),c=!1;try{if(c=!!a.canPlayType)c=new Boolean(c),c.ogg=a.canPlayType('video/ogg; codecs="theora"').replace(/^no$/,""),c.h264=a.canPlayType('video/mp4; codecs="avc1.42E01E"').replace(/^no$/,""),c.webm=a.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/^no$/,"")}catch(d){}return c},m.audio=function(){var a=b.createElement("audio"),c=!1;try{if(c=!!a.canPlayType)c=new Boolean(c),c.ogg=a.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/,""),c.mp3=a.canPlayType("audio/mpeg;").replace(/^no$/,""),c.wav=a.canPlayType('audio/wav; codecs="1"').replace(/^no$/,""),c.m4a=(a.canPlayType("audio/x-m4a;")||a.canPlayType("audio/aac;")).replace(/^no$/,"")}catch(d){}return c};for(var z in m)t(m,z)&&(r=z.toLowerCase(),e[r]=m[z](),p.push((e[r]?"":"no-")+r));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)t(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},u(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e<g;e++)d.createElement(f[e]);return d}function p(a,b){b.cache||(b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){return r.shivMethods?n(c,a,b):b.createElem(c)},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+l().join().replace(/\w+/g,function(a){return b.createElem(a),b.frag.createElement(a),'c("'+a+'")'})+");return n}")(r,b.frag)}function q(a){a||(a=b);var c=m(a);return r.shivCSS&&!f&&!c.hasCSS&&(c.hasCSS=!!k(a,"article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}mark{background:#FF0;color:#000}")),j||p(a,c),a}var c=a.html5||{},d=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,e=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,f,g="_html5shiv",h=0,i={},j;(function(){try{var a=b.createElement("a");a.innerHTML="<xyz></xyz>",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+p.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f<d;f++)g=a[f].split("="),(e=z[g.shift()])&&(c=e(c,g));for(f=0;f<b;f++)c=x[f](c);return c}function g(a,e,f,g,h){var i=b(a),j=i.autoCallback;i.url.split(".").pop().split("?").shift(),i.bypass||(e&&(e=d(e)?e:e[a]||e[g]||e[a.split("/").pop().split("?")[0]]),i.instead?i.instead(a,e,f,g,h):(y[i.url]?i.noexec=!0:y[i.url]=1,f.load(i.url,i.forceCSS||!i.forceJS&&"css"==i.url.split(".").pop().split("?").shift()?"c":c,i.noexec,i.attrs,i.timeout),(d(e)||d(j))&&f.load(function(){k(),e&&e(i.origUrl,h,g),j&&j(i.origUrl,h,g),y[i.url]=2})))}function h(a,b){function c(a,c){if(a){if(e(a))c||(j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}),g(a,j,b,0,h);else if(Object(a)===a)for(n in m=function(){var b=0,c;for(c in a)a.hasOwnProperty(c)&&b++;return b}(),a)a.hasOwnProperty(n)&&(!c&&!--m&&(d(j)?j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}:j[n]=function(a){return function(){var b=[].slice.call(arguments);a&&a.apply(this,b),l()}}(k[n])),g(a[n],j,b,n,h))}else!c&&l()}var h=!!a.test,i=a.load||a.both,j=a.callback||f,k=j,l=a.complete||f,m,n;c(h?a.yep:a.nope,!!i),i&&c(i)}var i,j,l=this.yepnope.loader;if(e(a))g(a,0,l,0);else if(w(a))for(i=0;i<a.length;i++)j=a[i],e(j)?g(j,0,l,0):w(j)?B(j):Object(j)===j&&h(j,l);else Object(a)===a&&h(a,l)},B.addPrefix=function(a,b){z[a]=b},B.addFilter=function(a){x.push(a)},B.errorTimeout=1e4,null==b.readyState&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",A=function(){b.removeEventListener("DOMContentLoaded",A,0),b.readyState="complete"},0)),a.yepnope=k(),a.yepnope.executeStack=h,a.yepnope.injectJs=function(a,c,d,e,i,j){var k=b.createElement("script"),l,o,e=e||B.errorTimeout;k.src=a;for(o in d)k.setAttribute(o,d[o]);c=j?h:c||f,k.onreadystatechange=k.onload=function(){!l&&g(k.readyState)&&(l=1,c(),k.onload=k.onreadystatechange=null)},m(function(){l||(l=1,c(1))},e),i?k.onload():n.parentNode.insertBefore(k,n)},a.yepnope.injectCss=function(a,c,d,e,g,i){var e=b.createElement("link"),j,c=i?h:c||f;e.href=a,e.rel="stylesheet",e.type="text/css";for(j in d)e.setAttribute(j,d[j]);g||(n.parentNode.insertBefore(e,n),m(c,0))}}(this,document),Modernizr.load=function(){yepnope.apply(window,[].slice.call(arguments,0))};
\ No newline at end of file
--- a/web/the-end-etc.html	Thu Jan 24 16:28:04 2013 +0100
+++ b/web/the-end-etc.html	Thu Jan 24 16:30:41 2013 +0100
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <html lang="fr">
 	<head>
-		<meta charset="utf-8">
-		<title>The End - @todo</title>
+		<meta charset="UTF-8">
+		<title>THE END, ETC. UNE EXPÉRIENCE WEB DE LAETITIA MASSON</title>
 		
 		<meta name="description" content="@todo">
 		<link rel="icon" href="static/res/img/favicon.ico" />		
@@ -46,7 +46,7 @@
 					--><div class="fullScreen_vcentering white big_txt">
 						<p><a href="fiction-the-end-etc.html">Fiction</a></p>
 						<p><a href="portraits-the-end-etc.html">Portraits</a></p>
-						<p><a href="music-the-end-etc.html">Musique</a></p>
+						<p><a href="musique-the-end-etc.html">Musique</a></p>
 						<!--<p class="margin_huge black">Director's cut</p>
 						<p><a href="int_film.html">Film</a></p>-->
 					</div>
--- a/web/transition-the-end-etc.html	Thu Jan 24 16:28:04 2013 +0100
+++ b/web/transition-the-end-etc.html	Thu Jan 24 16:30:41 2013 +0100
@@ -1,10 +1,11 @@
 <!DOCTYPE html>
 <html lang="fr">
 	<head>
-		<meta charset="utf-8">
-		<title>The End - @todo</title>
+		<meta charset="UTF-8">
+		<title>THE END, ETC. UNE EXPÉRIENCE WEB DE LAETITIA MASSON</title>
 		
-		<meta name="description" content="@todo">
+		<meta name="description" content="Géraldine Michelon présente The End, etc. Un projet écrit et réalisé par Laetitia Masson. Une coproduction France Télévisions - Memo Prod avec la participation du Centre national du cinéma et de l'image animée, Incandescence et Institut de recherche et de l'innovation du Centre Georges Pompidou, en association avec France Inter.">
+
 		<link rel="icon" href="static/res/img/favicon.ico" />		
 
 		<!-- Mobile Specific Metas -->		
@@ -54,7 +55,7 @@
 						<p><a href="partage-du-film-aleatoire-the-end-etc.html">Partagez</a></p>
 						<p><a href="choix-de-mots-the-end-etc.html">Recommencez</a></p>
 						<p class="margin_exeptionTop"><a href="the-end-etc.html">The end, etc.</a></p>
-						<p class="margin_exeptionBottom"><a href="theend/prolonger">Prolongez l'expérience</a></p>
+						<p class="margin_exeptionBottom"><a href="experience-the-end-etc.html">Prolongez l'expérience</a></p>
 						<p><a href="credits-the-end-etc.html">Crédits</a></p>
 					</div>
 				</div>