Table des matières

Le LabZ #4 : Smartphone et création artistique

Le Labz #4 s’est déroulé du 13 au 16 Avril 2015 au Transistor, salle de la Friche de la Belle de Mai à Marseille

Présentation

Sujet:

Depuis la fin des années 2000, les smartphones ont eu un impact considérable sur l’ensemble de nos usages et se sont durablement installés dans notre quotidien. Aujourd’hui encore, ils constituent un véritable point de convergence technologique, avec leur nombre important de capteurs, et sont en grande partie responsables de l’émergence d’un web augmenté* (autant augmented web que web des objets). Bien que le potentiel de ces machines dans le champ de la création artistique et muséographique n’est plus à prouver, l’évolution de la chaîne technique suppose un important travail de prospection et de pratique, et la mise à disposition d’espaces et temps de R&C devient une priorité. Que ce soit par les technologies du web, la réalité augmentée, la géolocalisation (indoor/outdoor) … Quels projets artistiques sommes nous capables de proposer ? Comment retrouvent-ils un écho dans la ville intelligente?

Intervenant :

Raphaël Besson:

Raphaël Besson a exercé pendant plusieurs années les responsabilités de chargé d’études en économie urbaine au sein d’un cabinet d’architecte-urbaniste et de chef de projet Living Lab au Centre de Culture Scientifique, Technique et Industriel de Grenoble (La Casemate). A cette occasion, il a été responsable du salon « Arts-sciences » EXPERIMENTA. Rattaché au laboratoire Pacte, ses travaux de recherche portent sur le développement économique des territoires, les systèmes d’innovation ouverts et la question des villes innovantes et créatives. Il a forgé au cours de sa thèse la notion de Systèmes Urbains Cognitifs, à travers l’étude de grands projets urbains situés à Buenos Aires, Barcelone et Grenoble. Il porte également un regard attentif sur la durabilité des modèles de développement local et les perspectives ouvertes par l’économie collaborative. Il fonde fin 2013 l’agence “Villes Innovations” localisée à Madrid et Grenoble.

Le résultat :

Connectez vous à partir de votre téléphone portable à cette adresse :http://www.zinclafriche.org/labz/ pour pouvoir accéder a l’interface du projet collectif.

Photos:

Quelques photos

Les ressources :

Scénario d'usage:

labz_4-scenario.pdf

labz-accueil.html

Code:

labz-accueil.html
<?<!DOCTYPE html> 
<html>
    <head>
      <!--Import materialize.css-->
      <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css"  media="screen,projection"/>
 
      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
        <meta charset="utf-8" />
        <style>
            body {
            font-size: 16px;
            line-height: 1.6;
            color: white;
            }
            .main-page {
                background : #90caf9;
                background-image: url(bg-mainpage.png);
                color: white;
            }
            .secondary-page {
                background : #e64a19;
            }
            h2.slogan {
                width:60%;
                margin-left: auto;
                margin-right: auto;
                margin-top: -16px;
                font-weight: 300;
                font-size: 28px;
                line-height: 1.3;
                text-transform:uppercase;
            }
 
            .nav {
                margin-top: 40%;             
            }
 
            .btn-floating.btn-large {
                width: 72px;
                height: 72px;
                line-height: 72px;
                font-size: 80%;
                font-weight: 700;
                vertical-align: baseline;
            }
        </style>
    </head>
 
    <body class="main-page">
        <div class="container">
            <row class="col s1 section">
 
                <header class="center-align">
                    <h1><img src="synethesies-logo.png"/></h1>
                    <h2 class="slogan">Découvrez la Friche dans la peau d'un <strong>synesthète</strong></h2>
                </header>
                <div id="page-body">    
                </div>
            </row>
            <row class="col s1 section">
                <div class="nav center-align">
                    <a href="labz-boussole.html" class="btn-floating btn-large waves-effect waves-light yellow">ENTRER</a>
                </div>
            </row>
 
        </div>
      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
    </body>
  </html>
   </code> ?>
labz-boussole.html
<?<!DOCTYPE html> 
<html>
    <head>
        <!--Import materialize.css-->
        <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css"  media="screen,projection"/>
 
        <!--Let browser know website is optimized for mobile-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
        <meta charset="utf-8" />
        <style>
            body {
                font-size: 16px;
                line-height: 1.6;
                color: white;
            }
            .main-page {
                background : #90caf9;
                background-image: url(bg-mainpage.png);
                color: white;
            }
            .secondary-page {
                background : #e64a19;
            }
            .boussole-page {
                background : #e64a19;
                background-image: url(bg-degrade.png);
                background-position: left -700px;
 
            }
           #page-body {
                margin-top: 40%;
           }
            p.consigne {
                font-size: 28px;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 2px;
            }
        </style>
    </head>
 
    <body class="boussole-page">
        <div class="container">
            <row class="col s1 section">
                <div id="page-body" class="center-align"> 
                    <p class="consigne">Allez vers le rouge</p>
                </div>
            </row>
 
        </div>
        <!--Import jQuery before materialize.js-->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
    </body>
</html>
   </code> ?>
labz-poi1.html
<?<!DOCTYPE html> 
<html>
    <head>
        <!--Import materialize.css-->
        <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css"  media="screen,projection"/>
 
        <!--Let browser know website is optimized for mobile-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
        <meta charset="utf-8" />
        <style>
            body {
                font-size: 16px;
                line-height: 1.6;
                color: white;
            }
            .main-page {
                background : #90caf9;
                background-image: url(bg-mainpage.png);
                color: white;
            }
            .poi-page {
                background : #e64a19;
                background-image: url(bg-poi.png);
                background-position: center 150px;
                background-repeat: no-repeat;
            }
            h1.titre {
                width:60%;
                margin-left: auto;
                margin-right: auto;
                /* margin-top: -16px; */
                font-weight: 400;
                font-size: 36px;
                line-height: 1.3;
                text-transform:uppercase;
            }
            #page-body {
                margin-top: 20%;
            }
            p.message{
                width:60%;
                margin-left: auto;
                margin-right: auto;
                font-size: 28px;
                font-weight: 200;
            }
 
            .nav {
                margin-top: 10%;             
            }
 
            .btn-floating.btn-large {
                width: 80px;
                height: 80px;
                line-height: 80px;
                font-size: 80%;
                font-weight: 700;
                vertical-align: baseline;
 
            }
        </style>
    </head>
 
    <body class="poi-page">
        <div class="container">
            <row class="col s1 section">
 
                <header class="center-align">
                    <h1 class="titre">Vous êtes <br /><strong>ici</strong></h1>
                </header>
                <div id="page-body">
                    <p class="message">Ici, je vois des relents de caoutchouc brûlé et un très léger parfum de sueur.</p>
                </div>
            </row>
            <row class="col s1 section">
                <div class="nav center-align">
                    <a href="#" class="btn-floating btn-large waves-effect waves-light yellow">ET VOUS ?</i></a>
                </div>
            </row>
 
        </div>
        <!--Import jQuery before materialize.js-->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
    </body>
</html>
</code> ?>

Ftp :