332 lines
No EOL
16 KiB
HTML
332 lines
No EOL
16 KiB
HTML
<?xml version="1.0" encoding="utf-8"?>
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
|
|
|
|
<meta name="keywords" content="Cappuccino, iPhone, web, javascript, jQuery, Cocoa, programming">
|
|
|
|
<link rel="shortcut icon" type="image/x-icon" href="/Scratch/img/favicon.ico" />
|
|
<link rel="stylesheet" type="text/css" href="/Scratch/assets/css/main.css" />
|
|
<link rel="stylesheet" type="text/css" href="/Scratch/css/twilight.css" />
|
|
<link rel="stylesheet" type="text/css" href="/Scratch/css/idc.css" />
|
|
<link rel="alternate" type="application/rss+xml" title="RSS" href="http://feeds.feedburner.com/yannespositocomfr"/>
|
|
|
|
<link rel="alternate" lang="fr" xml:lang="fr" title="Cappuccino ou jQuery ?" type="text/html" hreflang="fr" href="/Scratch/fr/blog/2010-07-05-Cappuccino-and-Web-applications/" />
|
|
<link rel="alternate" lang="en" xml:lang="en" title="Cappuccino vs jQuery" type="text/html" hreflang="en" href="/Scratch/en/blog/2010-07-05-Cappuccino-and-Web-applications/" />
|
|
<script type="text/javascript" src="/Scratch/js/jquery-1.3.1.min.js"></script>
|
|
<script type="text/javascript" src="/Scratch/js/jquery.cookie.js"></script>
|
|
<script type="text/javascript" src="/Scratch/js/index.js"></script>
|
|
|
|
<title>Cappuccino ou jQuery ?</title>
|
|
</head>
|
|
<body lang="fr">
|
|
<script type="text/javascript">// <![CDATA[
|
|
document.write('<div id="blackpage"><img src="/Scratch/img/loading.gif" alt="Chargement en cours..."/></div>');
|
|
// ]]>
|
|
</script>
|
|
|
|
<div id="content">
|
|
<div id="choix">
|
|
<div class="return"><a href="#entete">↓ Menu ↓</a></div>
|
|
<div id="choixlang">
|
|
<a href="/Scratch/en/blog/2010-07-05-Cappuccino-and-Web-applications/" onclick="setLanguage('en')">in English</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="titre">
|
|
<h1>
|
|
Cappuccino ou jQuery ?
|
|
</h1>
|
|
|
|
</div>
|
|
|
|
<div class="flush"></div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="flush"></div>
|
|
<div id="afterheader">
|
|
<div class="corps">
|
|
|
|
<div class="intro">
|
|
|
|
|
|
<p><abbr title="Trop long à lire">tlàl</abbr>:</p>
|
|
|
|
<ul>
|
|
<li>J’ai essayé de faire une version de <a href="http://yannesposito.com/Softwares/YPassword.html">YPassword</a> en jQuery et avec Cappuccino.</li>
|
|
<li>Cappuccino est très bien sur les navigateurs non mobile mais l’application pèse 1.4Mo et n’est pas compatible avec l’iPhone.</li>
|
|
<li>la version jQuery n’est pas aussi jolie que la version réalisée avec Cappuccino mais elle pèse seulement 106Ko et est compatible avec l’iPhone.</li>
|
|
<li>J’essayerai Dashcode 3</li>
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<hr />
|
|
|
|
<div class="intro">
|
|
|
|
|
|
<p>Avant de commencer, je dois dire que je sais que Cappuccino et jQuery ne sont pas plus comparable que Cocoa et la <em>standard library</em> en C++. L’un est fait pour créer des interfaces utilisateurs tandis que l’autre est plus une librairie qui aide aux tâches de bas niveaux.
|
|
Par contre je les ai utilisé tous les deux pour faire la même application. C’est pourquoi je compare l’expérience que j’ai retenu de chacun pour cette tâche.</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<p>J’ai fait une version web de mon widget <a href="http://yannesposito.com/Softwares/YPassword.html">YPassword</a>.
|
|
C’est un simple widget qui permet d’organiser ses mots de passes simplement avec une grande sécurité et de façon portable.
|
|
Ce n’est pas un widget créé pour remplacer le <em>trousseau d’accès</em>, mais
|
|
plus un générateur de mots de passe.</p>
|
|
|
|
<p>Le premier a été élaboré à partir du code de mon widget Mac.
|
|
Vous pouvez l’essayer <a href="http://yannesposito.com/YPassword.old">ici</a>.
|
|
J’ai ensuite fait une version avec <a href="http://cappuccino.org">Cappuccino</a>, que vous pouvez essayer <a href="http://yannesposito.com/YPassword">ici</a>.</p>
|
|
|
|
<h2 id="que-fait-ce-widget-">Que fait ce widget ?</h2>
|
|
|
|
|
|
<div class="intro">
|
|
|
|
|
|
<p>Si vous vous moquez de savoir ce que fait mon widget, vous pouvez allez directement à la <a href="#cappuccino">section suivante</a>.</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<p>J’organise mes mots de passe avec une méthode simple.
|
|
Je mémorise un mot de passe <em>maître</em>. Et mon mot de passe est alors (principalement) : </p>
|
|
<pre class="twilight"><span class="Entity">hash</span>(motDePasseMaitre<span class="Keyword">+</span><span class="Variable">NomDeDomaine</span>)
|
|
</pre>
|
|
|
|
<p>En réalité j’ai besoin d’un plus d’informations pour créer mon mot de passe :</p>
|
|
|
|
<ul>
|
|
<li>Un mot de passe maître ;</li>
|
|
<li>une URL ;</li>
|
|
<li>une longeur maximale de mot de passe ;</li>
|
|
<li>le type de sortie (hexadécimale ou base64) ;</li>
|
|
<li>Combien de fois mon mot de passe a dû être changé.</li>
|
|
</ul>
|
|
|
|
<p>Le mot de passe résultant est calculé comme suit :</p>
|
|
|
|
<pre class="twilight">
|
|
domainName<span class="Keyword">=</span><span class="Entity">domaine_Name_Of_URL</span>(url)
|
|
hash<span class="Keyword">=</span><span class="Entity">sha1</span>( masterPassword <span class="Keyword">+</span> leakedTimes <span class="Keyword">+</span> domainName )
|
|
<span class="Keyword">if</span> ( kind <span class="Keyword">==</span> <span class="String"><span class="String">'</span>base64<span class="String">'</span></span> )
|
|
hash<span class="Keyword">=</span><span class="Entity">base64</span>(hash)
|
|
<span class="Keyword">end</span>
|
|
<span class="Keyword">return</span> hash[<span class="Constant">0</span>..maxlength]
|
|
</pre>
|
|
|
|
<p>En fait, selon le site web, on peut avoir des contraintes très différentes :</p>
|
|
|
|
<ul>
|
|
<li>longueur minimale ;</li>
|
|
<li>longueur maximale ;</li>
|
|
<li>ne doit pas contenir de caractères spéciaux ;</li>
|
|
<li>doit contenir des caractères spéciaux ;</li>
|
|
<li>etc…</li>
|
|
</ul>
|
|
|
|
<p>Et si vous souhaitez changer votre mot de passe, le nombre de changement sert à ça.
|
|
Toutes les informations peuvent rester publiques sans trop de danger à l’exception du mot de passe principal.</p>
|
|
|
|
<p>Si vous souhaitez avoir encore plus de détails vous pouvez toujours lire certaines de mes anciens articles de blog (en anglais) :</p>
|
|
|
|
<ul>
|
|
<li><a href="http://yannesposito.com/YBlog/Computer/Entr%C3%A9es/2008/7/30_Easy%2C_secure_and_portable_password_management_system.html">simple portable password management</a></li>
|
|
<li><a href="http://yannesposito.com/YBlog/Computer/Entrées/2009/3/15_Shorter_Password_with_the_same_efficiency.html">base64</a></li>
|
|
<li><a href="http://yannesposito.com/YBlog/Computer/Entr%C3%A9es/2009/4/11_Be_able_to_change_your_password.html">change your password</a></li>
|
|
</ul>
|
|
|
|
<h2 id="cappuccino">Cappuccino</h2>
|
|
|
|
<p>Tout d’abord je voudrais dire que les applications réalisées avec Cappuccino sont tout simplement incroyables.
|
|
C’est comme avoir une application Mac dans son navigateur.</p>
|
|
|
|
<p>Je dois aussi admettre que j’ai pris du plaisir a écrire mon application avec Cappuccino.
|
|
C’est comme programmer une application Mac ou iPhone.
|
|
Si vous connaissez bien Cocoa, vous vous sentirez comme <em>à la maison</em>.
|
|
Si vous ne connaissez pas Cocoa, je vous conseille de vous y intéresser.
|
|
Il s’agit vraiment d’un framework excellent pour faire des interfaces utilisateur.
|
|
Je ne suis pas un spécialiste de tous les frameworks.
|
|
Mais j’ai réalisé des Interfaces Utilisateurs avec les MFC, Java Swing<sup id="fnref:1"><a href="#fn:1" rel="footnote">1</a></sup> et WXWindows il y a quelques années.
|
|
Et je dois dire que Cocoa est bien meilleurs que tous ces framework.</p>
|
|
|
|
<p>Cappuccino est un framework spécialisé dans le développement d’application web vraiment exceptionnel. Mais il a aussi quelques défauts qui ont surgit lors de l’écriture de mon widget.</p>
|
|
|
|
<p>Les choses qui m’ont plu :</p>
|
|
|
|
<ul>
|
|
<li>Le résultat est vraiment très beau</li>
|
|
<li>C’était très agréable de programmer</li>
|
|
<li>Comme programmer une application Mac</li>
|
|
<li>J’aurai pu utiliser <a href="http://developer.apple.com/technologies/tools/xcode.html">Interface Builder</a> pour créer l’interface.</li>
|
|
</ul>
|
|
|
|
<p>Les choses qui ne m’ont pas plu :</p>
|
|
|
|
<ul>
|
|
<li>J’ai mis un bon moment avant de comprendre comment récupérer le <code>onChange</code> des champs textuels.</li>
|
|
<li>La documentation manquait d’organisation.</li>
|
|
<li>Ça ne marche pas sous iPhone.</li>
|
|
<li>Il a fallu déployer 11Mo.</li>
|
|
<li>Il faut télécharger 1,3Mo pour que l’application se charge dans le navigateur.</li>
|
|
</ul>
|
|
|
|
<p>Je n’ai pas utilisé les <code>bindings</code> parce qu’il me semble qu’ils ne sont pas prêts.</p>
|
|
|
|
<h2 id="jquery">jQuery</h2>
|
|
|
|
<p>La version jQuery de YPassword n’est pas aussi bien finie que celle de Cappuccino. Simplement parce qu’il n’y a pas de <em>slider</em> directement avec jQuery. Il faudrait que j’utilise jQueryUI. Et je pense que l’application deviendrait beaucoup plus lourde pour le coups. En tout cas largement au dessus des 106Ko actuels.</p>
|
|
|
|
<p>J’ai utilisé le code de mon widget mac en l’adaptant un peu pour faire cette version. C’était relativement facile. Mais jQuery n’est pas un <em>framework orienté application</em>. Il s’agit plus d’un <em>framework pour faire des animations qui la pète</em>.</p>
|
|
|
|
<p>Je n’ai pas beaucoup plus à dire sur la version jQuery, sinon que programmer avec jQuery était de la programmation de niveau beaucoup plus bas qu’avec Cappuccino.</p>
|
|
|
|
<h2 id="en-conclusion">En conclusion</h2>
|
|
|
|
<p>Si vous voulez faire une application compatible iPhone n’utilisez pas Cappuccino. Du moins pas encore.
|
|
Si vous souhaitez faire un application très simple (comme la mienne), je pense que Cappuccino est un peu trop lourd pour ça.</p>
|
|
|
|
<p>Si vous souhaitez faire des applications web complexes qui ressemblent à des applications de bureau alors clairement Cappuccino est un très bon choix.
|
|
Notez cependant qu’il peut être un peu difficile de débuter.</p>
|
|
|
|
<p>Finallement, pour terminer la version web de mon widget, j’essayerai Dashcode 3.
|
|
Il semblerai que ce soit une bonne alternative pour créer des widget sur le web compatible iPhone.
|
|
Je ne sais pas si les applications réalisées avec Dashcode 3 sont compatibles pour les browser n’utilisant pas webkit. Mais si c’est le cas, alors ça pourrait sonner le glas des projets comme Cappuccino et Sproutcore.</p>
|
|
<hr/><div class="footnotes">
|
|
<ol>
|
|
<li id="fn:1">
|
|
<p>Si ça vous intéresse vous pouvez jeter un coup d’œil à <a href="http://labh-curien.univ-st-etienne.fr/informatique/SEDiL/">SEDiL</a>. Je suis assez fier de la vue automatique des arbres que j’ai programmé sans librairie de départ.<a href="#fnref:1" rev="footnote">↩</a></p>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div id="choixrss">
|
|
<a id="rss" href="http://feeds.feedburner.com/yannespositocomfr">
|
|
s'abonner
|
|
</a>
|
|
</div>
|
|
<script type="text/javascript">
|
|
$(document).ready(function(){
|
|
$('#comment').hide();
|
|
$('#clickcomment').click(showComments);
|
|
});
|
|
function showComments() {
|
|
$('#comment').show();
|
|
$('#clickcomment').fadeOut();
|
|
}
|
|
document.write('<div id="clickcomment">Commentaires</div>');
|
|
</script>
|
|
<div class="flush"></div>
|
|
<div class="corps" id="comment">
|
|
<h2 class="first">commentaires</h2>
|
|
<noscript>
|
|
|
|
</noscript>
|
|
|
|
<script type="text/javascript">
|
|
var idcomments_acct = 'a307f0044511ff1b5cfca573fc0a52e7';
|
|
var idcomments_post_id = '/Scratch/fr/blog/2010-07-05-Cappuccino-and-Web-applications/';
|
|
var idcomments_post_url = 'http://yannesposito.com/Scratch/fr/blog/2010-07-05-Cappuccino-and-Web-applications/';
|
|
</script>
|
|
<span id="IDCommentsPostTitle" style="display:none"></span>
|
|
<script type='text/javascript' src='/Scratch/js/genericCommentWrapperV2.js'></script>
|
|
|
|
</div>
|
|
|
|
<div id="entete" class="corps_spaced">
|
|
<div id="liens">
|
|
<ul><li><a href="/Scratch/fr/">Acceuil</a></li>
|
|
<li><a href="/Scratch/fr/blog/">Blog</a></li>
|
|
<li><a href="/Scratch/fr/about/">À propos</a></li>
|
|
<li><a href="/Scratch/fr/contact/">Contact</a></li></ul>
|
|
</div>
|
|
<div class="flush"></div>
|
|
<hr/>
|
|
<div id="next_before_articles">
|
|
<div id="previous_articles">
|
|
articles précédents
|
|
|
|
<div class="previous_article">
|
|
<a href="/Scratch/fr/blog/2010-06-19-jQuery-popup-the-easy-way/">← Comment faire des popups en jQuery rapidement</a>
|
|
</div>
|
|
|
|
|
|
<div class="previous_article">
|
|
<a href="/Scratch/fr/blog/2010-06-17-hide-yourself-to-analytics/">← Se cacher de ses statistiques web</a>
|
|
</div>
|
|
|
|
|
|
<div class="previous_article">
|
|
<a href="/Scratch/fr/blog/2010-06-17-track-events-with-google-analytics/">← Analyser les clicks sur votre Site</a>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<div id="next_articles">
|
|
articles suivants
|
|
|
|
<div class="next_article">
|
|
<a href="/Scratch/fr/blog/2010-07-07-CSS-rendering-problems-by-navigator/">N'utilisez pas de gradients avec Chrome→ </a>
|
|
</div>
|
|
|
|
|
|
<div class="next_article">
|
|
<a href="/Scratch/fr/blog/2010-07-31-New-style-after-holidays/">Nouveau style après les vacances→ </a>
|
|
</div>
|
|
|
|
|
|
<div class="next_article">
|
|
<a href="/Scratch/fr/blog/2010-07-09-Indecidabilities/">Indécidabilités (partie 1)→ </a>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<div class="flush"></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="bottom">
|
|
<div>
|
|
<a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/deed.fr">Droits de reproduction ©, Yann Esposito</a>
|
|
</div>
|
|
<div id="lastmod">
|
|
Écrit le : 05/07/2010
|
|
modifié le : 17/07/2010
|
|
</div>
|
|
<div>
|
|
Site entièrement réalisé avec
|
|
<a href="http://www.vim.org">Vim</a>
|
|
et
|
|
<a href="http://nanoc.stoneship.org">nanoc</a>
|
|
</div>
|
|
<div>
|
|
<a href="/Scratch/fr/validation/">Validation</a>
|
|
<a href="http://validator.w3.org/check?uri=referer"> [xhtml] </a>
|
|
.
|
|
<a href="http://jigsaw.w3.org/css-validator/check/referer?profile=css3"> [css] </a>
|
|
.
|
|
<a href="http://validator.w3.org/feed/check.cgi?url=http%3A//yannesposito.com/Scratch/fr/blog/feed/feed.xml">[rss]</a>
|
|
</div>
|
|
</div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
</body>
|
|
</html> |