Blog de Geeek, le blog geek par excellence par Ludovic Toinel ...

Balise - javascript

Fil des billets - Fil des commentaires

dimanche 4 mai 2008

Plugin HTML Validator pour Firefox 3 beta 5

Par Ludovic Toinel le dimanche 4 mai 2008, 21:59 - Developpement

firefox_html_validator.png

Le plugin "Html Validator" permet de valider à chaud, toutes les pages Web accédées par Firefox. Il affiche en bas de la page, le nombre d'erreurs de syntaxe trouvées dans le document HTML, les erreurs d'exécution du javascript... C'est un véritable indicateur qualité des pages.

Ce plugin fonctionnait avec Firefox 1 et 2, son auteur vient de l'adapter à Firefox 3 beta 5. Il n'est pas encore disponible sur le portail Mozilla, mais il est cependant possible de le télécharger directement sur le site de son auteur :

http://users.skynet.be/mgueury/mozilla/download.html

C'est un plugin indispensable pour les personnes qui ont l'occasion de développer des sites Web. C'est d'ailleurs avec ce plugin que j'ai réalisé mon étude sur le respect des normes Web par les meilleurs blogueurs High-Tech classés par Wikio.

3 commentaires aucun rétrolien

vendredi 20 avril 2007

Un menu déroulant transparent avec Scriptaculous + CSS

Par Ludovic Toinel le vendredi 20 avril 2007, 23:40 - Developpement

Vous ne l'avez peut être pas encore remarqué mais le menu du blog a pas mal changé cette semaine. J'ai mis en place Scriptaculous et j'ai joué avec la CSS du thème pour faire quelque chose de sympa visuellement.

menu,deroulant,CSS,transparence,javascript

Alors pour les néophytes voici quelques explications :

  • Tout d'abord j'ai téléchargé les scripts Javascript de Scriptaculous (http://script.aculo.us/downloads).
  • J'ai copié l'ensemble des fichiers javascript de scriptaculous (fichiers .js), ainsi que le fichier prototype.js à l'intérieur du répertoire "js" de mon thème Dotclear (/themes/mon_theme/js/).
  • J'ai édité le fichier _top.html de mon thème et j'ai ajouté les lignes HTML suivantes pour inclure les scripts de Scriptaculous et de Prototype dans la page :
<script src="/themes/geeek.org/js/prototype.js" type="text/javascript"></script>
 <script src="/themes/geeek.org/js/scriptaculous.js?load=effects" type="text/javascript"></script>

Remarque : "geeek.org" est le nom du thème que j'utilise.

  • Ensuite j'ai ouvert le fichier _top.html pour y ajouté le contenu de mon menu :
<div id="menu">
<ul>
    <li>
    <a href="#" title="Dotclear2" onclick="new Effect.toggle('sousMenu1','blind')" >Menu1</a>
     <ul id="sousMenu1" style="display: none" class="sousMenu">
      <li>
                <a href="#" >Item1</a>
      </li>
      <li>
                <a href="#" >Item2</a>
      </li>
      </ul>
     </li>
</ul>
</div>

Remarque : Le javascript inséré à l'intérieur du menu utilise les fonctionnalités de Scriptaculous :

onclick="new Effect.toggle('sousMenu1','blind')"
  • J'ai ajouter à la feuille styles de mon thème les styles qui vont permettre au menu d'avoir une apparence agréable et une transparence :
#menu {
        color: #FFF;
        width: 680px;
        height: 26px;
        background: #fff url(img/menu.png) repeat-x left top;
        margin-left: 20px;
 }
 
 #menu ul{
        margin-left: 20px;
 }
 
 #menu li{
        display: inline;
        list-style-type: none;
        float: left;
 }
 
 #menu a {
        font-weight: bold;
        font-size: 10pt;
        color: #ffffff;
        text-decoration: none;
        margin: 0px;
        padding-left: 25px;
        padding-right: 25px;
        border-left-style: solid;
        border-left-width: 1px;
        border-left-color: #AAAAAA;
 }

 #menu a:link {
        color: #ffffff;
 }
 
 #menu a:visited {
        color: #eeeeee;
 }

 #menu a:hover {
        color: #FF8800;
 }

 #menu a:active {
        color: #FF9900;
        text-decoration: underline overline;
 }
 
 #menu .sousMenu
 {
        margin : 5px 0 0 0 ;
        position: absolute;
        border-left: 3px solid #555;
        border-right: 3px solid #555;
        border-bottom: 5px solid #555;
 }
 
 #menu .sousMenu li
 {
        display: block;
        float: none;
        border-top: 1px solid #AAA;
        background-color: #555;
        margin: 0px;
        padding: 2px;
        filter:alpha(opacity=70);
        -moz-opacity:0.7;
        opacity: 0.7;
       -khtml-opacity: 0.7;
 }
 
 #menu .sousMenu a {
        padding-left : 5px;
        padding-right : 5px;
        font-weight: normal;
        font-size: 9pt;
        border: 0px;
 }

 #menu .sousMenu li:hover {
        filter:alpha(opacity=90);
        -moz-opacity:0.9;
        opacity: 0.9;
        -khtml-opacity: 0.9;
 }
  • Et le tour est joué :-)

5 commentaires

lundi 5 mars 2007

HACK : Preview sur les URL du BlogRoll Dotclear2

Par Ludovic Toinel le lundi 5 mars 2007, 23:05 - DotClear

dotclear.png

Voici un petit Hack du plugin Blogroll de Dotclear2 pour y ajouter facilement une prévisualisation des sites qui se cachent derrière les URL.


Première Étape : Installer le Javascript dans votre thème

  • Télécharger le Javascript "arc90_linkthumb.js" à cette adresse
  • Copiez le dans le répertoire "js" de votre thème favoris dans Dotclear2
  • Éditez le fichier "home.html" de votre thème
  • Ajoutez entre les balises <head></head> le code HTML suivant :
<script type="text/javascript" src="/themes/montheme/js/arc90_linkthumb.js"></script>


Deuxième Étape : Modification du plugin BlogRoll

  • Allez dans le répertoire "/plugins/blogroll" de votre installation Dotclear2.
  • Modifiez le fichier _public.php
  • Trouvez la méthode "getLinksList"
  • Ajoutez le tag : class="linkthumb" au lien (<a>)

Voilà, le tour est joué, vous avez maintenant un blogroll avec une preview des sites internet.

4 commentaires

mercredi 7 février 2007

Dojo : Des Widjets Ajax qui claquent

Par Ludovic Toinel le mercredi 7 février 2007, 23:16 - Developpement

dojo.gif

Voici une librairie Ajax, simple d'utilisation, orientée Widget et non dépendante du framework de développement utilisé. Il s'agit de Dojo.

Dojo est une librairie composée de Widgets Web dynamiques à valeur ajouté pour vos applications Web. Le meilleur moyen de se rendre compte la puissance de cette librairie est de se rendre sur le site de Dojo :

http://dojotoolkit.org/

Son intégration dans une application Web est extrêmement simple, les widgets possèdent de nombreuses fonctionnalités comme la séparation d'exécution des scripts Javascripts, la mise en cache de données, possibilité d'activer un effet lors du chargement du widget .etc.

Dojo est activement développé et est actuellement distribué en version 4.1. L'essayer c'est l'adopter.

aucun commentaire

Derniers commentaires