Développeur Web RoR

Ca vous dit une petite barre de progression (progress bar) ? Certain diront qu'il existe <progress> et <meter> d'html5, c'est juste utilisez-les ! Là il s'agit plus de l'aspect (css) que de la sémantique (html). Donc vous pouvez également utiliser ce css avec les balises sémantique html5...

Voilà pour l'HTML

<div class="barre">
    <div class="progress"></div>
</div>

Voilà pour le CSS3

body{
    background-color:black;
}

.barre{
    height:3px;
    width:300px;
    border-radius:3px;
    border:1px solid #111;
    border-bottom:1px solid #111;
    margin:10px;
}

.progress{
    margin-top:2px;
    margin:0;
    padding:0;
    background-color:#2B85C1;
    height:1px;
    width:200px;
    box-shadow:0px 0px 15px 1px #2B85C1,0px 0px 10px 1px black;
}

Voici le jsfiddle qui va avec : http://jsfiddle.net/yQUHc/2/

Pour un petit projet (enfin plus un proof of concept qu'un projet pour le moment), je souhaitai faire du drag sur des éléments raphael (librairie svg) (rect svg) et également sur le div conteneur. Il se trouve que lorsque je saisissai le rect svg, le mouvement de mon drag'n drop était démultiplié. J'ai alors pensé à la fonction jquery stopPropagation() sur l'event pour ne pas le transmettre au parent. Sans succès ! J'ai alors lu la doc (ouai il serait presque temps) de jQueryUI et il y a moyen d'annuler des éléments en tant que handle pour le drag'n drop (http://jqueryui.com/demos/draggable/#handle). Et effectivement ça marche bien. Voici le code jQueryUI : 

$(document).ready(function(){

  $('#holder').draggable({ cancel:'#holder svg rect'});

});

Et l'espèce de code html

<div id="holder">

  <svg ....><rect .... ></rect></svg>

</div>

Bon voilà dans l'attente d'un gros article, en voici un plus petit qui explique comment préparer markitup pour rails 3. Je pars du principe que vous êtes dans votre projet rails.

Téléchargez markitup. Copiez le répertoire "markitup" de l'archive dans stylesheets et également dans javascripts. (De cette manière il n'y aura plus qu'à remplacer le répertoire pour une mise à jour de markitup)

Dans la vue ou le layout :

<%= stylesheet_link_tag "markitup/skins/markitup/style.css",

    "markitup/sets/default/style.css" %>

<%= javascript_include_tag "markitup/jquery.markitup.js",

        "markitup/sets/default/set.js"; "initialize_markitup.js" %>

Et dans le fichier "initialize_markitup.js" :

$(function(){

    $('.monmarkitup').markItUp(mySettings);

});

Pour ActiveAdmin - La procédure est la même pour les autres éditeurs WYSIWYG