Archives pour avril, 2009

Ubuntu 9.04 en approche !

ubuntu-9-04Dernière ligne droite avant la sortie de la mouture finale d’Ubuntu 9.04 (Jaunty Jackalope pour les intimes). La distribution sera disponible ce jeudi en téléchargement.

Lien : http://www.ubuntu.com/

Vous pouvez également commander votre exemplaire sous forme de CD qui vous sera livré gratuitement à votre domicile. J’ai déjà validé ma demande et le délai annoncé est de 4 à 10 semaines. Le CD est livré dans une belle pochette que je conserve comme collector :)

Lien : https://shipit.ubuntu.com/

Vous souhaitez vous prochurer une version sur support ou tout simplement acheter un objet marketing pour montrer votre attachement à Ubuntu et consors, vous pouvez faire un tour sur la boutique officielle. Acheter un objet dans ce shop permet aussi à Canonical de recolter des fonds pour maintenir et faire évoluer Ubuntu et tous ses dérivés (Kubuntu, Xubuntu, …) et d’apporter aux nombreux utilisateurs une nouvelle version tous les six mois.

Lien : https://shop.canonical.com/

Et je ne pouvais pas finir ce billet sans vous montrer cette vidéo présentant la dernière mouture de Ubuntu :

Ajouter un badge Twitter à votre blog

sans-rouletteIl y a peu je partageais avec vous une liste d’adresses où vous pouvez trouver des thèmes graphiques pour les blogs gérés par la plateforme Blogger de Google.  Et bien j’ai franchi le pas également pour mon blog personnel.

J’ai opté pour le thème graphique réalisé par JRY avec quelques petites modifications (je vous rassure rien de bien sorcier).

Tout d’abord, j’ai supprimé le footer d’origine (dans le XML gérant le thème) et ajouté un petit bout de code en haut à droite pour afficher mes dernier Twitt. Pour ce faire, j’ai utilisé la fonction de Twitter permettant de générer un « Badge » pour Blogger.

Coté code cela donne ça :

<div <–Add Style Here –> id= »twitter_div »><ul id= »twitter_update_list »></ul>
<a id= »twitter-link » style= »display:block;text-align:right; » href= »http://twitter.com/MON_PSEUDO »>Me suivre sur Twitter</a>
</div>
<script src= »http://twitter.com/javascripts/blogger.js » type= »text/javascript »></script>
<script src= »http://twitter.com/statuses/user_timeline/MON_PSEUDO.json?callback=twitterCallback2&count=5″ type= »text/javascript »></script>

Vous devez remplacer MON_PSEUDO par le votre et vous pouvez adapter le nombre de Twitt à afficher en modifiant la valeur qui suit count=

Vous pouvez également modifier l’apparence de l’affichage de vos twitts en modifiant l’aspect par l’ajout de styles en remplaçant <–Add Style Here –> par votre style personnalisé. Exemple : style= »background: url(votre-image.gif) top left no-repeat; padding-left: 50px; »


A vous de jouer maintenant ;)

Gérer la transparence des images en CSS

Atelier xhtml css

Dans la conception de votre nouveau projet web vous avez besoin de mettre en place un effet de transparence. Pour mettre en place cet effet, vous avez deux possibilités : utiliser une image intégrant la transparence ou bien utiliser CSS. La mise en place de la seconde solution semble être la meilleure car vous pouvez régler le niveau de transparence plus facilement, ce qui n’est pas le cas avec une image pré-produite.

La mise en place de cette transparence en CSS s’effectue grâce à la propriété Microsoft filter s’appliquant à un élément HTML.

Syntaxe :

filter:alpha(opacity=50);
/* Réduit l'opacité à 50% */

Seulement voilà, cette propriété n’est reconnue que par Internet Explorer et la valeur de la transparence doit être comprise entre 0 et 100. Il faut donc compléter cette prise en compte pour Firefox, Safari et les recommandations W3C. Pour ce faire, il existe d’autres propriétés à utiliser :

  • Pour Firefox : -moz-opacity:XX;   (0<XX<1)
  • Pour Safari : -khtml-opacity:XX;   (0<XX<1)
  • Pour W3C : opacity:XX;   (0<XX<1)

XX est la valeur de la transparence à utiliser.

Pour illustrer cette mise en place de la transparence, nous allons mettre en place un CSS prenant en charge les différents cas de figure. Voici la classe monbloc :

Code CSS

.monbloc {
    background : #010415;
    filter:alpha(opacity=50);
   -moz-opacity:0.5;
   -khtml-opacity: 0.5;
   opacity: 0.5;
}

Code HTML

<div class="monbloc">
<p>Lorem ipsum eam odio qualisque efficiantur cu, propriae...</p>
</div>

Il ne vous restera plus qu’à régler le degré de transparence à votre convenance et rien ne vous empêche de mettre en place un effet différent suivant le navigateur qui ouvrira le site.

Effet transparence sous IE8

Effet transparence sous IE8