• Antisèche HTML5 et CSS3


    Auteur : Créamama
    0

     

     

    Une bonne antisèche des principales propriétés html5 et css3, c’est toujours utile. Même si aujourd’hui seules les dernières versions des navigateurs dignes de ce nom les interprètent, il peut être intéressant de découvrir les possibilités offertes par ces futurs standards. Utiliser moins d’images pour réduire le poids des pages et donc le temps de chargement est important, mais pour l’instant impossible sans délaisser les internautes équipés de vieux navigateurs.

    Les coins arrondis

    width: 300px;
    background-color: #cccccc;
    border: 1px solid #999999;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 15px 15px 15px 15px;
    Télécharger
    Sed non tortor odio. Vestibulum nec fermentum ante. In nulla metus, elementum vel vehicula nec, hendrerit et erat. Pellentesque in eros in dolor faucibus facilisis pulvinar ut leo

    Box shadow

    width: 300px;
    background-color: #cccccc;
    border: 1px solid #999999;
    box-shadow: 3px 3px 3px #aaaaaa;
    -moz-box-shadow: 3px 3px 3px #aaaaaa;
    -webkit-box-shadow: 3px 3px 3px #aaaaaa;
    padding: 15px 15px 15px 15px;
    Télécharger
    Sed non tortor odio. Vestibulum nec fermentum ante. In nulla metus, elementum vel vehicula nec, hendrerit et erat. Pellentesque in eros in dolor faucibus facilisis pulvinar ut leo

    Rotation des contenus

    margin: 50px 0 50px 20px;
    width: 200px;
    transform:  rotate(30deg);
    -moz-transform:  rotate(30deg);
    -webkit-transform:  rotate(30deg);
    Télécharger
    Sed non tortor odio. Vestibulum nec fermentum ante. In nulla metus, elementum vel vehicula nec, hendrerit et erat. Pellentesque in eros in dolor faucibus facilisis pulvinar ut leo

    Je vous laisse découvrir la suite de ce pense bête sur le site de l’auteur :HTML5/CSS3 CheatSheet

    Haut de pageremonter en haut de page

    1er
    Sept

  • Quelques critères d’accessibilité web


    Auteur : Créamama
    1

     

     

    www.webaccessibilite.fr parle d’accessibilité web, on aurait pu s’en douter, sans que je vous le dise. C’est un site tenu par Patrice Bourlon, consultant indépendant en ergonomie et en accessibilité.

    Je suis tombé ce matin, sur un de ses articles, datant du 26 aout de cette année, listant 10 critères, qui devraient tous être respectés.

    1. Chacune des images possède-t-elle un équivalent textuel ?
    2. Chaque cadre (balises frame et iframe) a-t-il un titre ?
    3. La couleur n’est pas le seul moyen utilisé pour véhiculer une information. Cette règle est-elle respectée pour les éléments textuels de la page ?
    4. L’utilisateur est-il averti préalablement de l’ouverture d’un lien hypertexte dans une nouvelle fenêtre ?
    5. Chaque tableau de données a-t-il un résumé ?
    6. Les liens et formulaires restent-ils utilisables si JavaScript est désactivé ?
    7. Les balises de titrage sont-elles utilisées pour structurer le contenu de la page ?
    8. Le type de document (balise doctype) est-il spécifié pour la page analysée ?
    9. La langue principale du document est-elle spécifiée ?
    10. La page analysée a-t-elle un titre pertinent ?

    Pour revenir sur le 6em critère, la tendance du moment est de contrôler les données des formulaires en javascript. Ça peut très bien fonctionner, et c’était déjà le cas quand les données étaient contrôlées avec Php, coté serveur. Le javascript, c’est bien, c’est chouette, ça permet de faire plein de choses, mais il faut faire attention à ne pas en abuser. En effet, comment se comporte votre formulaire si le javascript est désactivé, comment sont traitées les données ?

    Personnellement, je suis un fervent utilisateur de JQuery. Le dernier plugin que j’ai fait (jquery scrollbar) fonctionne bien, est crossBrowser, le contenu est lisible si le javascript est désactivé. Mais il n’est pas compatible avec la navigation par tabulation, et c’est un gros défaut qu’il faut régler.

    Et vous qu’elle place faites vous à javascript sur vos sites ?

    Je vous donne quand même le lien de l’article en question : 10 critères d’accessibilité à respecter

    Haut de pageremonter en haut de page

    31
    Aout

  • Plugin JQuery : Scrollbar


    Auteur : Créamama
    12

     

     

     

     

    "Historique"

    plugin.scrollbar.js est mon premier plugin JQuery. Le besoin de cette création est apparu avec le développement du site d’un ami : Damien Balada

    Après quelques petites recherches, je suis arrivé sur jquery UI, qui propose un slider. Mais ce dernier fonctionne par "cran" et perd donc un peu en fluidité. Je me suis donc lancé dans ce développement, plein de détermination, le regard fixé sur l’écran, en oubliant de cligner des yeux.

    Après quelques de semaines de travail, j’arrive enfin à un résultat acceptable, suffisament en tout cas pour avoir envie de le partager.

    Description de ce plugin Jquery

    Ce plugin n’a qu’une seule utilité. Celle de créer une scrollbar dans un élément de votre choix pour afficher un contenu d’une taille supérieure à celle de l’espace visible. Il s’adresse surtout à ceux (et celles) qui ne veulent plus voir la scrollbar du navigateur. La gestion du sroll molette est également intégrée à ce plugin, mais reste désactivable.

    Pas mal de choses sont facilement configurables, la taille et la position de la scrollBar, du bouton. Il est également possible de définir plusieurs styles. Quand la taille de l’espace visible (taille_englobe) et de la scrollbar (taille_scrollbar) sont en auto, les dimensions s’adaptent automatiquement à l’espace disponible et s’adaptent à chaque redimensionnement de la fenêtre.

    Mise en place

    Ce plugin nécessite quelques autres fichiers javascript pour fonctionner : jquery-1.4.2.min.js, ui.core-1.7.2.js, ui.draggable-1.7.2.js et jquery.mousewheel.min.js l’appel du plugin ce fait de cette façon là :

    $(document).ready(function(){
    $("#contenu").scrollbar();
    });
    Télécharger

    #contenu étant l’id de l’élément qui accueillera la scrollbar. Les options du plugin

    • taille_englobe : Taille de l’espace visible. Accepte soit une valeur numérique, soit "auto" pour prendre toute la place disponible
    • taille_scrollbar : Taille de la scrollbar. Accepte soit une valeur numérique, soit "auto" pour prendre toute la place disponible
    • taille_bouton : C’est la taille du bouton de la scrollbar, doit être une valeur numérique
    • pas : Pas du scroll molette. C’est à dire la valeur du déplacement à chaque cran de la molette. Doit être une valeur numérique
    • molette : true ou false. Active ou non la prise en compte de la molette de la souris
    • drag : true ou false. Active ou non la présence de la scrollbar
    • debug : true ou false. Affiche ou non la console de debug
    • style : Choix des styles de la scrollbar. Par défaut il n’y a que ’basic’
    • position : Position de la scrollbar. droite ou gauche
    • alignement_scrollbar : Alignement de la scrollbar. haut, centre ou bas
    • orientation : Orientation du contenu. Paysage ou portrait. Dans cette version, seul portrait est disponible
    • marge_scroll_contenu : Marge entre la scrollbar et le contenu. Doit êter une valeur numérique.
    • largeur_scrollbar : Largeur de la scrollbar et du bouton. Doit être une valeur numérique.

    Démo :

    Voir la démo en ligne !

    Téléchargement

    Télécharger cette démo (contient une version compréssée et une commentée du plugin) :

    Zip - 79.4 ko
    Plugin JQuery : Scrollbar

    Télécharger uniquement la version compressée : plugin.scrollbar-min.js

    Télécharger uniquement la version commentée : plugin.scrollbar.js

    Haut de pageremonter en haut de page

    15
    Juil

  • Coup de coeur du vendredi : Seuil Critique


    Auteur : Créamama
    0

    Mon coup de cœur du vendredi, c’est un site qui retranscrit des conversations de collégiens. On ne connait ni le nom de(s) la personne(s) qui le mette à jour, ni la localisation du collège, mais qu’est ce qu’on s’marre.

    C’est dommage qu’il n’y ait pas plus de contenu, j’aurais volontiers lu quelques pages de plus. Mes collègues de bureau ont vite compris pourquoi j’éclatais de rire :D

    Je ne vous retiens pas plus longtemps, le site est là : Seuil Critique

    Je vous donne quand même ma préférée : Seuil Critique

    Haut de pageremonter en haut de page

    9
    Juil

  • JQuery MouseWheel : Jouez avec votre molette !


    Auteur : Créamama
    0

     

     

     

    Le plugin jquery MouseWheel permet de gérer des actions lors d’événement sur la molette de la souris. Il suffit, pour l’utiliser d’inclure la librairie JQuery, et ce plugin, puis d’instancier la méthode comme ça :

    $('#element').mousewheel(function(event, delta) {
            if (delta < 0) {
                    //action quand on "tire" la molette vers soi
            }else if (delta > 0){
                    //action quant on "pousse" la molette
            }
    });
    Télécharger

    Le paramètre delta retourne un chiffre positif quand on "pousse" la molette, et un chiffre négatif quand la ramène vers soi. La valeur de se chiffre peut varier suivant la vitesse avec laquelle on "pousse" ou "tire" la molette.

    #element est l’élément qui sera sensible aux actions sur la molette. C’est à dire que tout mouvement de celle-ci en dehors de #element ne déclenchera aucunes actions (si ce n’est celles du navigateur)

    Par exemple, sur ma dernière réalisation, sur l’élément #page_ecran, on décale l’élément #gallerie vers la gauche lors d’un delta négatif, et vers la droite lors d’un delta positif.

    Haut de pageremonter en haut de page

    11
    Mai

Creamama, développeur web, Spip, JQuery à Grenoble

Je suis un concepteur et développeur web à Grenoble. Je développe essentiellement avec le CMS Spip. Actuellement en contrat chez Territorial, je continue ma veille technologique, et vous fais partager ce que je trouve utile et pratique.

Suivez Creamama par Rss Abonnez vous au flux Rss de Creamama.fr

  • Suivez creamama sur twitter
  • Retrouvez creamama sur linkedIn
  • Retrouvez creamama sur technorati
  • Retrouvez creamama sur netvibes
  • Retrouvez creamama sur digg

Les sites des copains