Développeur Web RoR

Aller au contenu | Aller au menu | Aller à la recherche

lundi 23 janvier 2012

Les ressources / articles web dev de ces derniers jours

Voici les quelques ressources que j'ai trouvé intéressante ces derniers jours (ça fait office de post-it en ce qui me concerne).

Framework html / css / js : http://www.99lime.com/

jQuery highlighter de code (marche avec Ruby !) : http://steamdev.com/snippet/

Utilisation de VIM : tutorial découverte par Synbioz : http://www.synbioz.com/blog/2012/01/18/l_utilisation_de_vim

Impress.js (Sur la ferme du web) : http://www.lafermeduweb.net/billet/impress-js-creez-des-presentations-de-type-prezi-en-javascript-1273.html

User interface Futurico (attention payant, mais peut être une bonne source d'inspi !) : http://www.behance.net/gallery/Futurico-User-Interface-Pro/2650227

Autre user interface : http://www.webdesignerdepot.com/2012/01/free-download-balio-web-ui-kit/

Inspiration de design web : http://www.queness.com/community-news/10453/30-beautiful-web-design-examples-from-behance-and-deviantart

En espérant que cette petite compilation vous servira...

jeudi 3 novembre 2011

jQuery et Raphaeljs2 : petite guerre de couple sur les objets draggable

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>

mardi 27 septembre 2011

Préparer MarkItup pour rails 3.1

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);

});

Mettez ensuite dans votre code html un div avec pour classe "monmarkitup" et ça devrait marcher.
N'oubliez pas d'include également jQuery si ce n'est déjà fait. 

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

Grosse parenthèse pour include markitup dans active_admin, il faut ajouter dans initializers/active_admin.rb :

config.register_javascript 'markitup/jquery.markitup.pack.js'

config.register_javascript 'markitup/sets/default/set.js'

config.register_javascript 'initialize_markitup.js'

config.register_stylesheet 'markitup/skins/markitup/style.css'

config.register_stylesheet 'markitup/sets/default/style.css'

# Attention le fichier ci-dessous est à créer :

config.register_stylesheet 'reset_markitup.css'

Le reset_markitup.css permet de pas tout péter dans l'interface :

.formtastic div:first-of-type{

  display:inline-block;

}

Et dans votre fichier app/admin/model.rb section form do, il faut ajouter ceci au champ concerné.

input_html => { :class => "monmarkitup" } 

Exemple :

form.input :title, :input_html => { :class => "monmarkitup" }

Coté serveur, il existe quelques gems pour convertir votre code en html :

BBCODE : bb-ruby

TEXTILE : RedCloth

MARKDOWN : BlueCloth

Bon code !

vendredi 16 septembre 2011

Un plugin jquery pour faire un background animé - MyFloatingBg

MyFloatingBg est un plugin jquery qui permet de faire bougé son background. Cela peut-être pratique et si c'est bien travaillé ça peut-être très joli. Bon mais faut pas en abusé hein !

Bon et puis c'est sous licence MIT !

Demo : http://www.kfsoft.info/MyFloatingBg/demo.php

Téléchargement : http://www.kfsoft.info/MyFloatingBg/jquery.MyFloatingBg.js

mercredi 8 juin 2011

Plugin jquery pour générer des qrcodes avec canvas d'html5

Voici un plugin jQuery permettant d'afficher un qrcode (grâce à jquery et canvas d'html5) sur une page web. L'utilisation est simple :

$('#qrcode').qrcode("this plugin is great");

Appliquer sur un div :

<div id="qrcode"></div>

Lu sur lafermeduweb.net .

Site officiel : http://jeromeetienne.github.com/jquery-qrcode/

mercredi 23 février 2011

Jquery ujs : bug du link_to confirm dialog toujours executé

Avec le helper link_to vous avez la possibilité d'utiliser l'option :confirm => "Etes vous sur ?" qui permet d'afficher une belle boite de dialogue de confirmation (utilisé pour une suppression généralement). Et bien si vous avez le bug qui fait que quoique vous fassiez la requête se fait, c'est que vous n'avez pas la bonne version du connecteur jquery-ujs :

Pour Jquery 1.4 , jquery 1.4.1 , jquery 1.4.2 : https://github.com/rails/jquery-ujs/blob/v1.4/src/rails.js

Pour jquery 1.4.3 , jquery 1.4.4                     : http://github.com/rails/jquery-ujs/raw/master/src/rails.js

Là encore j'espère que ça peut aider !

jeudi 17 février 2011

jNotify : plugin jquery pour l'affichage de message de notification

J'ai trouvé ce plugin vraiment clean donc j'en fait profiter !

Il permet d'avoir des messages box d'avertissement, succès ou d'erreur qui disparaissent au bout d'un délai personnalisable (overlay ou non).

Voici un page de démo : http://www.myjqueryplugins.com/jNotify/demo

Téléchargement : http://www.myjqueryplugins.com/jNotify

Source : http://js4design.com/jnotify-affichez-une-boite-de-notification-animee-1137

- page 1 de 5