--- a/templates/sat_website/principles.html	Sun May 03 22:40:07 2015 +0200
+++ b/templates/sat_website/principles.html	Sun May 03 22:58:42 2015 +0200
@@ -21,56 +21,147 @@
 {% endcomment %}
 
 {% load i18n %}
+{% load staticfiles %}
 
 {% block headline %}{% trans "Principles" %}{% endblock %}
 {% block subtext %}{% trans "Some technical words to explain the project." %}{% endblock %}
 {% block main_container %}
 
-	<div class="row">
-		<div class="col-md-6">
-			<h2>{% trans "Multipurpose" %}</h2>
-			{% blocktrans with xmpp="<abbr title=\"eXtensible Messaging and Presence Protocol\">XMPP</abbr>" features_prefix="<a href=\"features.html\">" features_suffix="</a>" %} Based on the powerful  {{ xmpp }} standard, SàT can obviously be used for instant messaging. Here are some of the other key {{ features_prefix }}features{{ features_suffix }}:{% endblocktrans %}
-			<ul>
-				<li>{% blocktrans %}Microblogging: share your thoughts instantaneously{% endblocktrans %}</li>
-				<li>{% blocktrans %}Group permissions: share what you want with only the people you want{% endblocktrans %}</li>
-				<li>{% blocktrans %}File sharing{% endblocktrans %}</li>
-				<li>{% blocktrans %}Games{% endblocktrans %}</li>
-				<li>{% blocktrans %}Interaction with other networks: chat with your friends on IRC, StatusNet, other XMPP networks and potentially any network{% endblocktrans %}</li>
-				<li>{% blocktrans with mua="<abbr title=\"Mail User Agent\">MUA</abbr>" %}Email client access: connect directly with any email client ({{ mua }}) like KMail or Thunderbird, and send messages on any supported network{% endblocktrans %}</li>
-			</ul>
-            <p><a class="btn btn-default" href="features.html" role="button">{% trans "Tell me more" %}</a></p>
+<div>
+    {% trans "We usually present SàT as a multipurpose, multi frontend, libre and decentralised communication tool... let us explain what we mean." %}
+
+<div class="row">
+    <h5 class="alert alert-success">
+        <a name="multipurpose">{% trans "Multipurpose" %}</a>
+    </h5>
+    <div class="info">
+        <p>
+	    {% blocktrans with xmpp="<abbr title=\"eXtensible Messaging and Presence Protocol\">XMPP</abbr>" %}
+	    Based on the powerful {{ xmpp }} standard, SàT can obviously be used for instant messaging... and much more!
+	    Blogging and microblogging, file sharing, games are other possible usage.... Using gateways, you can also communicate with other networks like IRC or StatusNet. It is also possible to redirect your XMPP messages to your email adress, or to send an email that would be delivered on XMPP.
+	    The "X" of XMPP stands for eXtensible: our features list is also extensible! Check the specifications page for a current status of what we've been doing.
+	    {% endblocktrans %}
+	    </p>
+	    <p><a class="btn btn-default" href="specifications.html" role="button">{% trans "Specifications" %}</a></p>
+    </div>
+</div>    
+
+<div class="row">
+    <h5 class="alert alert-success">
+         <a name="multifrontend">{% trans "Multi frontend" %}</a>
+    </h5>
+    <div class="info">
+        <p>
+	    {% blocktrans %}
+	    SàT has been developped since the beginning with an idea in mind: it should be useable from the command line, with a console or desktop interface, from a web browser... The backend of the software manages the communication with your XMPP server and do most of the processing. On top of that, you are free to use the frontend of your choice. If you would like to help the project, a great thing would be to developp a new frontend: don't hesitate to contact us!
+	    {% endblocktrans %}
+	    </p>
+	    <p><a class="btn btn-default" href="frontends.html" role="button">{% trans "Frontends" %}</a></p>
+    </div>
+</div>    
+
+<div class="row">
+    <h5 class="alert alert-success">
+         <a name="libre">{% trans "Libre" %}</a>
+    </h5>
+    <div class="info">
+        <p>
+	    {% blocktrans %}
+	    We exclusively use and developp free and open-source software. It is not only free for you to get and run it, but you can analyse it, modify it, redistribute it. Since this is enough to free a program but not the person who uses it, we wrote a social contract - a moral engagement with the user - that is also mentionned in the Statutes of the association.
+	    {% endblocktrans %}
+	    </p>
+	    <p><a class="btn btn-default" href="social_contract.html" role="button">{% trans "Social contract" %}</a></p>
+    </div>
+</div>    
+
+<div class="row">
+    <h5 class="alert alert-success">
+         <a name="decentralised">{% trans "Decentralised" %}</a>
+    </h5>
+    <div class="info">
+	    <p>
+		    {% blocktrans with xmpp="<abbr title=\"eXtensible Messaging and Presence Protocol\">XMPP</abbr>" isp="<abbr title=\"Internet Service Provider\">ISP</abbr>"%}
+		    This is the most complicated aspect to understand, yet a crucial one. Being based on {{ xmpp }}, SàT is immediately decentralised (federated). But what does it mean? To get this point, we need to imagine the Internet as a set of layers. To make it easier, let's say there are only two layers: the physical and the logical one. On the physical layer, you are directly connected to your {{ isp }}, and indirectly to all the rest of the world.
+		    {% endblocktrans %}
+		    <div class="thumbnail">
+		        <img src="{% static "images/decentralisation/1_physical.png" %}" ><br/>
+		        <div class="caption">
+		            {% trans "The dots represents Internet users, the lines represents physical links - server-to-server links for the central triangle, client-to-server links for the rest." %}
+		        </div>
+		    </div>
+	    </p>
+	    <p>
+		    {% blocktrans %}
+		    On the logical layer, you are directly connected to your favorite social network, and since it's centralised, all its users are directly connected to it: it can access and own all the data, it can unilaterally decide to censor or exclude a user... it has too much power.
+	        {% endblocktrans %}
+		    <div class="thumbnail">
+		        <img src="{% static "images/decentralisation/2_logical_centralised.png" %}" ><br/>
+		        <div class="caption">
+		            {% trans "Centralised communication system on top of the physical layer - note that one user on the right who refuses to use such a system." %}
+		        </div>
+		    </div>
+	    </p>
+	    <p>
+		    {% blocktrans %}
+		    Now what if your favorite social network is decentralised? The main difference is that there's not a single entity to manage all the connections and all the data, but a lot of them.
+	        All the users are connected to the same network, but each of them can decide which server they want to connect to. As a result, the data and the network administration's tasks are shared between all the servers. Is it possible to do that on the Internet? Yes, this is how the Email works! That's decentralisation.
+		    {% endblocktrans %}
+	        <div class="thumbnail">
+	            <img src="{% static "images/decentralisation/3_logical_decentralised.png" %}" ><br/>
+	            <div class="caption">
+	                {% trans "Decentralised communication system on top the physical layer - the user on the right is still resisting." %}
+	            </div>
+	        </div>
+	    </p>
+	    <p>
+		    {% blocktrans with xmpp="<abbr title=\"eXtensible Messaging and Presence Protocol\">XMPP</abbr>" federation_prefix='<a href="#federated">' federation_suffix='</a>' %}
+		    Now what if you don't trust anybody? Then you are free to host your own server at home, via an association or in your working office... and this is possible too?! Yes, this is also how the Email works! And this is what we did for our server libervia.org and without asking the permission to anybody - the {{ xmpp }} interdomain {{ federation_prefix }}federation{{ federation_suffix }} makes it possible.
+		    {% endblocktrans %}
+	        <div class="thumbnail">
+	            <img src="{% static "images/decentralisation/4_logical_decentralised_self_hosting.png" %}" >
+	            <div class="caption">
+	                {% trans "Decentralised communication system with self-hosting ability - the dot on the right is still an Internet user, but for the service it's both a user and a server." %}
+	            </div>
+	        </div>
+	    </p>
+	    <p>
+		    {% blocktrans with contact_prefix='<a href="community.html">' contact_suffix='</a>' %}
+		    So... to put it in a nutshell: decentralisation is like the Email works. There are many servers, you can use the one you want and if you want to help the decentralisation, you can also add a new server by yourself. It requires some technical knowledge but it doesn't cost much and it gives more freedom, feel free to {{ contact_prefix }}contact us{{ contact_suffix }} if you need some details!
+		    {% endblocktrans %}
+	    </p>
+        <div class="alert alert-info">
+	        {% blocktrans with article='<a href="http://networkcultures.org/unlikeus/resources/articles/what-is-a-federated-network/">Beyond distributed and decentralized: what is a federated network?</a>' %}
+                <b>Note:</b> decentralisation, federation, distribution... these terms are not strictly defined. To debate about that is not the goal of this page, but we recommend you the reading of this article: {{ article }} It's not XMPP-specific but it's a good start.
+			{% endblocktrans %}
 		</div>
-        <div class="col-md-6">
-            <h2>{% trans "Multi frontend" %}</h2>
-            {% blocktrans with frontends_prefix="<a href=\"frontends.html\">" frontends_suffix="</a>"%}SàT can be used with {{ frontends_prefix }}different interfaces{{ frontends_suffix }}, the heart of the software being independent. This means that you can use SàT:{% endblocktrans %}
-            <ul>
-                <li>{% blocktrans %}with a browser though the <strong>web</strong> interface{% endblocktrans %}</li>
-                <li>{% blocktrans %}on your <strong>desktop</strong>, with the power of a native, integrated application{% endblocktrans %}</li>
-                <li>{% blocktrans %}inside a <strong>console</strong> user interface{% endblocktrans %}</li>
-                <li>{% blocktrans %}through a <strong>command line</strong>{% endblocktrans %}</li> 
-                </ul>
-                {% blocktrans %}Other frontends are planned (e.g.: small screens) and it's always possible to adapt one to fit your needs.{% endblocktrans %}
-            <p><a class="btn btn-default" href="frontends.html" role="button">{% trans "Tell me more" %}</a></p>
-        </div>
-	</div>
-	<div class="row">
-		<div class="col-md-3">
-			<h3>{% trans "Libre" %}</h3>
-			{% blocktrans %}SàT is Libre (free as in freedom), which means that it follows the free software philosophy, not only because it's the best way to develop a software, but also in the spirit of sharing and freedom.{% endblocktrans %}<br>
-			{% blocktrans %}In addition, SàT follows a <strong>social contract</strong>: a moral engagment with the user.{% endblocktrans %} 
-		</div>
-		<div class="col-md-3">
-			<h3>{% trans "Decentralised" %}</h3>
-			{% blocktrans with xmpp="<abbr title=\"eXtensible Messaging and Presence Protocol\">XMPP</abbr>" %}By being based on {{ xmpp }}, SàT is naturally decentralised. There is no big server where all the data is kept. This is the only way to fight against censorship, and to keep control of your data - you don't want to have your private pictures or intimate messages to be in the hands of an untrusted commercial company, do you?{% endblocktrans %}
-		</div>
-		<div class="col-md-3">
-			<h3>{% trans "Standard" %}</h3>
-			{% blocktrans with xsf="<abbr title=\"XMPP Standards Foundation\">XSF</abbr>" xmpp="<abbr title=\"eXtensible Messaging and Presence Protocol\">XMPP</abbr>" %}Using a standard protocol is a key point: it's robust, widely used, tested and well documented. Every change is discussed publicly, there are debates on the best way to achieve goals and the {{ xsf }} is the guarantor of the evolution and stability of the protocol. SàT can communicate easily with other {{xmpp}} projects: the way it "talks" to others is fully documented.{% endblocktrans %}
-		</div>
-		<div class="col-md3">
-   				<h3>{% trans "Federated" %}</h3>
-			{% blocktrans %}Federation means that SàT is open on the world. It can communicate on the global Jabber network. You can of course create your own private network, but you have the ability to send messages to somebody on an other server, using a different client, as well. That is taking the opposite road to some proprietary and commercial networks which tend to lock their users up. Open your borders!{% endblocktrans %} 
-		</div>
-	</div>
+    </div>
+</div>
+
+<div class="row">
+    <h5 class="alert alert-success">
+         <a name="standard">{% trans "Standard" %}</a>
+    </h5>
+    <div class="info">
+	    <p>
+	        {% blocktrans with xsf="<abbr title=\"XMPP Standards Foundation\">XSF</abbr>" %}Using a standard protocol is a key point: it's robust, widely used, tested and well documented. Every change is discussed publicly, there are debates on the best way to achieve goals and the {{ xsf }} is the guarantor of the evolution and stability of the protocol.{% endblocktrans %}
+	    </p>
+	    <p>
+	        {% blocktrans with xmpp="<abbr title=\"eXtensible Messaging and Presence Protocol\">XMPP</abbr>" %}
+	        As a consequence, SàT communicates with other {{xmpp}} projects: the way we "talk" together is fully documented. For the user, this means you can switch from one {{ xmpp }} client to another using the same account. This is taking the opposite direction to some proprietary and commercial networks which tend to lock their users up. Open your borders!
+	        {% endblocktrans %}
+	    </p>
+    </div>
+</div>
+
+<div class="row">
+    <h5 class="alert alert-success">
+         <a name="standard">{% trans "Multiplatform" %}</a>
+    </h5>
+    <div class="info">
+        <p>
+                {% blocktrans %}Since its begining, the SàT project was made with other platforms in mind. It's only avaible on GNU/Linux so far (except of course Libervia, the web interface, which is available from any modern browser), but other platforms are planned.{% endblocktrans %}
+        </p>
+    </div>
+</div>
 
 {% endblock %}