{% load static %}

{% load i18n %}

<link rel="stylesheet" type="text/css" href="{% static 'hdalab/css/renkan_help.css' %}" />

<div id="help-slideshow">

		<a class="img-close" href="#">{% trans 'Fermer<br>ce didacticiel' %}</a>

	  	<ul class="bjqs">

	    	<li class="slide1">

	    		<div class="slideShowTitle">{% trans 'Aide : Bienvenue !' %}</div>

   				<div class="column-left">

   					<p>{% blocktrans %}Cet outil vous permet de représenter, spatialiser et organiser des collections de ressources du portail histoire des arts avec d’autres sites Web.<br><br>

							À partir de l’onglet "recherche", cliquez sur le logo {% endblocktrans %}<img src="{% static 'hdalab/img/mind_map_icon.png' %}">{% blocktrans %} pour créer votre RENKAN.<br><br>

							Vous pouvez déplacer chaque élément en cliquant dessus et en déplaçant votre curseur.{% endblocktrans %}

					</p>

   				</div>

	   			<div class="column-center">

	   				<p class="columnTitle">{% trans 'Légende' %}</p>

	 				<label class="img-requete">{% trans 'Requête' %}</label>

	 				<label class="img-ressource">{% trans 'Ressource' %}</label>

	 				<label class="img-tag">{% trans 'Tag' %}</label>

				</div>

	   			<div class="column-right">

					<p>{% trans 'En cliquant sur chaque ressource, tag ou lien, vous pouvez les déplacer, éditer, supprimer, agrandir, rétrécir, modifier en utilisant le menu circulaire comme ci-dessous.' %}</p>

		  			  <img src="{% static 'hdalab/img/menu.png' %}" class="img-menu">

				</div>

	    	</li>

		    <li class="slide2">

		    	<div class="slideShowTitle">{% trans 'Aide : Organiser, Ajouter !' %}</div>

	   			<div class="column-left">

		  			<h1 class="columnTitle">{% trans '1. Organiser' %}</h1>

		  			{% blocktrans %}

		  				Avant toute modification, vous pouvez changer la disposition de votre RENKAN : en colonne, en ligne ou en cercle.<br><br>

						Le graphe est en cercle par défaut. Le changement de disposition n’est plus disponible si le RENKAN a été modifié.

					{% endblocktrans %}

	   			</div>

	   			<div class="column-center">

		  			<h1 class="columnTitle">{% trans '2. Ajouter' %}</h1>

		  			<p>{% blocktrans %}Vous pouvez ajouter des ressources en faisant "Glisser – déposer" à partir de n’importe quelle fenêtre de navigation web.{% endblocktrans %}</p>

		   			<img src="{% static 'hdalab/img/dragndrop.png' %}" class="img-extend" />

		   			<p>

		   				{% blocktrans %}

		   					Déplacez cette icône dans votre barre de signets. Glisser des éléments d'un site web, vers l’onglet de votre RENKAN jusqu’à ce que votre graphe apparaisse.<br>

		   					Relâchez sur le graphe, le lien est ajouté.

		   				{% endblocktrans %}

					</p>

	   			</div>

	   			<div class="column-right">

	        		<p>

		   				<img src="{% static 'hdalab/img/extend.png' %}" class="img-extend" />

	        			{% blocktrans %}

		   					L'icone ouvre un panel de recherche permettant de rechercher des ressources du site HDA ou Wikipédia, ainsi que retrouver des ressources supplémentaires en lien avec votre recherche.

		   				{% endblocktrans %}

		   			</p>

		   			<p>

						{% blocktrans %}

							Glissez – déposez la ressource choisie, elle est ajoutée au graphe.

 						{% endblocktrans %}

		   			</p>	

		   			<p>{% trans 'En cliquant sur l’icone à gauche  vous pouvez ouvrir le panel de recherche pour retrouver des ressources du site HDA ou Wikipédia.' %}</p>

	   			</div>

	   		</li>

	   		<li class="slide3">

		    	<div class="slideShowTitle">{% trans 'Aide : Editer, Enregistrer, Gérer !' %}</div>

	   			<div class="column-left">

	   				<h1 class="columnTitle">{% trans '3. Éditer' %}</h1>

	        		<p>

	        			{% blocktrans %}

	        				Chaque ressource, tag, lien, peut être édité : le titre, la description, la taille, la couleur, l’image (URL) et la forme de chacun de ces éléments peuvent être personnalisés, grâce au menu circulaire décrit précédemment.

	        			{% endblocktrans %}

	        		</p>

	        		<br>

		  			<h1 class="columnTitle">{% trans '4. Enregistrer' %}</h1>

		  			{% blocktrans %}

		  				Pensez à enregistrer votre RENKAN !<br>

		  				Si la disquette est rouge : vos modifications n’ont pas encore été enregistrées.<br>

		  				Si elle est verte : c’est OK.<br>

					{% endblocktrans %}

	   			</div>

	   			<div class="column-right">

		  			<h1 class="columnTitle">{% trans '5. Gérer mes RENKAN' %}</h1>

		  			<p>

		  				{% blocktrans %}

		  					Vous pouvez publier votre RENKAN : cliquez sur l’icône

		  				{% endblocktrans %}

			   			<span class="ui-icon ui-icon-locked"></span>

		  			</p>

		  			<br>

		  			<p>

		  				{% blocktrans %}

		  					Pour modifier un RENKAN enregistré, cliquez sur

		  				{% endblocktrans %}

		  				<span class="ui-icon ui-icon-pencil"></span>

		  			</p>

		  			<br>

		   			<ul>

		   				{% trans 'Vous pouvez aussi :' %}

						<li><span class="ui-icon ui-icon-eye"></span> {% trans 'voir un RENKAN (lecture seule)' %}<br></li>

						<li><span class="ui-icon ui-icon-copy"></span> {% trans 'copier un RENKAN' %}<br></li>

						<li><span class="ui-icon ui-icon-trash"></span> {% trans 'supprimer un RENKAN' %}<br></li>

						<li><span class="ui-icon ui-icon-locked"></span> {% trans 'dépublier un RENKAN' %}<br></li>

		   			</ul>

	   			</div>

	   		</li>

	  	</ul>

	</div>