Développeur Web RoR

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

Tag - html

Fil des billets

jeudi 12 janvier 2012

Barre de progression en html, css3

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/

mercredi 11 janvier 2012

Effet de vignettage en CSS3

Suite à la demande de Geoffrey Dorne sur twitter, je me suis dit que ça devait intéresser d'autres personnes. Voici la ligne de css à mettre dans une class ou un id pour obtenir un effet de vignettage sur une image ou un élément html :

box-shadow:0px 0px 163px 20px black inset;

Oups pardon si vous ne connaissez pas le terme "Vignettage" cliquez-ici.

L'intégration c'est cool et amusant... quand c'est pas pour IE !

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>

jeudi 13 octobre 2011

Ubuntu 11.10 : une copie web du système d'exploitation

Aujourd'hui c'est aussi la sortie d'ubuntu 11.10. Ubuntu a lancé un site internet qui copie l'interface de ubuntu 11.10 : voici la page web quelques petites choses fonctionne bien shotwell, firefox. Et donc le tout en html css js. Pour tester c'est ici : http://www.ubuntu.com/tour/#surf-the-web

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 !

lundi 26 septembre 2011

Albino le gem ruby qui colorise votre code - syntax highlighter

Il existe un gem qui colorise votre code, il permet de mettre en évidence la syntaxe de votre code.

Installation :

sudo aptitude install python-setuptools

sudo easy_install pygments

sudo gem install albino

Pour tester dans la console ruby irb
require 'rubygems'
require 'albino'
puts Albino.colorize('puts "Hello World"', :ruby)

Bon code...

mardi 20 septembre 2011

Cours sur l'intégration html/css par BBX

Le créateur de http://bbxdesign.com/ vient de lancer un site / tutorial sur l'intégration html / css. Il est vraiment bien fait (je l'ai survolé), si vous n'y connaissez rien, je vous souhaite une bonne lecture. Tout est ici : http://css.steaw.com/ . Cliquez sur rideau puis le menu sera en haut à droite.

- page 2 de 6 -