Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur

La périodicité du blog est devenue irrégulomadaire à tendance bimensuelle… Malgré tout, je tiens à partager avec vous les fruits de la veille. Dans le panier : des trucs sympas et pratiques pour WordPress ; un plugin pour splitter du contenu avec jQuery ; des formulaires HTML plus efficaces ; une astuce toute simple pour connaitre personnellement vos visiteurs via Google Analytics, quelques liens pour compresser et organiser vos CSS et tout un tas d’autres choses dont l’énumération serait longue et fastidieuse.

Liens WordPress

WordPress Theme Generator

WP Generator Blog est assez bluffant : votre thème pour WordPress est plié en quelques clics, sans connaissance préalable en HTML, JS, PHP ou même CSS ! Changez les couleurs, le nombre de colonnes, etc. L’outil produit des thèmes compatibles à partir de WordPress 2.1 jusqu’à la version 2.7 au moins, et embarque le framework Yahoo! UI.

Affichez votre nombre de followers Twitter sur votre blog

Il n’y a pas que le compteur Google Feedburner pour gonfler notre égo virtuel. Le nombre de followers que l’on peut avoir sur son compte Twitter peut à lui seul vous gonfler un égo capable d’atteindre la blogosphère stratosphère ^__^ Le code fourni par wpRecipes est composée d’une partie à copier dans le fichier functions.php de votre blog et d’une autre partie à placer là où vous désirez afficher l’information.

Random « Read More »

Ces deux bouts de code dégottés sur wpguy affichent un lien « lire la suite » aléatoire pour chacun de vos articles. Le premier est à placer avant The Loop :

<?php
    $more_strings = array(
        "Read More...",
        "Keep on Reading...",
        "Wait! There's more...",
        "Read the rest of the article..."
    );
?>
<?php
    the_content($more_strings[rand(0,count($more_strings))]);
?>

Liens intégration web

Organisation, compression, vos CSS vont adorer !

  • cleancss — Cet outil en version française très complet propose quatre niveaux de compression et permet de personnaliser les paramètres en précisant un gabarit de formatage pour votre feuille de style, dont voici un exemple de compression maximale,
  • Styleneat — Trie (ou pas) les sélecteurs ou les déclarations dans l’ordre alphabétique. Affiche les déclarations sur plusieurs lignes. Possibilité de coller la feuille de style, de saisir l’URL de la CSS ou enfin de l’uploader depuis votre poste de travail. Via roget.biz,
  • dustmeselectors — Extension pour Firefox qui traque les sélecteurs CSS inutilisés dans votre page web,
  • Em Calculator — Pratique pour obtenir des valeurs en em pour les éléments de votre document HTML à partir d’une taille exprimée en px,
  • Construct Your CSS — Construct est un éditeur visuel basé sur Blueprint et jQuery. Ce projet est commis par Christian Montoya. Il montre que l’on peut mettre à la disposition des intégrateurs web une boite à outil, ainsi qu’un éditeur visuel pour faire des CSS et du HTML sémantique,
  • pagecolumn — Générateur de maquette en plusieurs colonnes avec CSS 2.0 en utilisant les %, les px ou les em. Possibilité d’imbriquer plusieurs colonnes ou des faire des effets de menus à onglets,
  • drawter — Déjà évoqué sur ce blog : drawter, dessiné, c’est gagné,
  • CSS Grid Calculator — Pour visualiser rapidement une maquette à partir d’une grille : les blocs de texte et les divisions de la page en colonnes (et les goutières qu vont avec) s’affichent dans le navigateur. En prime, vous obtiendrez les déclarations des styles CSS !

Encore un effort !

Formulaires HTML efficaces en 10 étapes

Consultez l’excellent article de bbxdesign sur les 10 bonnes pratiques pour réaliser un formulaire basé sur la conférence de Luke Wrobleski de Yahoo! dont voici le sommaire :

  1. Aller droit au but,
  2. Alignement des labels,
  3. Aide et astuces,
  4. Validation,
  5. Actions primaires et secondaires,
  6. Actions en cours,
  7. Erreurs,
  8. Input inutiles,
  9. Organisation du formulaire,
  10. Engagement graduel.

Téléchargez la conférence audio The Value of Web Forms and Design Constraints au format mp3 (27.9 MB).

Autres ressources pour les formulaires HTML

  • JotForm — Création de formulaires en ligne,
  • webjackalope — 12 exemples de formulaires d’inscription pour «feignasse».

Splittez votre contenu en plusieurs parties redimensionnables avec jQuery Splitter

C’est sur Dator Blog que j’ai déniché jQuery Splitter tout droit sorti de chez Dave Methvin. Ce plugin permet d’afficher une séparation entre deux contenus de la forme :

<div id="MySplitter">
    <div> Left content goes here </div>
    <div> Right content goes here </div>
</div>

L’appel de la fonction étant réduit au strict minimum :

$().ready(function(){
    $("#MySplitter").splitter();
});

La splitbar peut être déplacée très facilement de manière accessible en cliquant-glissant, avec une accessKey ou encore via la touche tab.

Autres ressources Javascript

20 mémos utiles pour tout webdesigner

Une bonne palanquée de Cheat Sheet (à vos souhaits) pour ne plus oublier les raccourcis Photoshop, les propriétés des CSS, les éléments HTML, etc. Mention spéciale pour :

Miscellannées

Google Analytics — Identifiez les lecteurs en provenance de Netvibes

Généralement, les informations aggrégées par les outils de mesure d’audience ne permettent pas de connaitre le nom (ou le pseudo) des visiteurs ! Google Analytics vous permet en seulement trois clics d’en savoir plus :

  1. Cliquez sur Traffic Sources (Sources de trafic),
  2. Puis sur Referring Site (Sites Référents),
  3. Rendez-vous dans la liste des sites et cliquez sur Netvibes,
  4. Enjoy ;)

Bref, je suis sûrement le dernier à avoir cliqué sur Netvibes pour afficher les visiteurs concernés, mais si je suis l’avant-dernier, je me dis que ça servira au moins à une personne ;)

T’es qui, toi, déjà ?

Ping.eu ou tout ce que vous avez toujours voulu savoir sur une adresse IP ou un nom de domaine sans jamais avoir osé le demander : Ping, Traceroute, DNS lookup, WHOIS, Port check, Reverse lookup, Proxy checker, Mail relaying, Bandwidth meter, Network calculator, Network mask calculator, Country by IP, Unit converter  !

Stay tuned and mind the gap!

PS : n’oubliez pas la grosse grosse liste de 1000 ressources pour webdesiger et développeurs web !

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



4 commentaires pour “Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur”

  1. Nami dit :

    Très mauvaise idée que de faire ça ! the_content($more_strings[rand(0,count($more_strings))]); count($more_strings) va retourner le nombre d’entrées dans l’array, de manière « humaine » : à partir de 1 ! Donc, s’il y a 4 entrées, on va avoir « 4 », alors que les indexes vont de 0 à 3 ! Il est plus conseillé d’utiliser the_cotnent($more_strings[array_rand($more_strings)]) par exemple, ou de faire count($more_strings)-1

  2. Diije dit :

    Merci Nami pour l’astuce.

    Et surtout merci Bruno pour ce super article :)

  3. […] background-position: 50% 0px; background-color:#222222; background-repeat : no-repeat; } css4design.com – Today, 12:12 […]

  4. Thierry dit :

    merci pour la mention!

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site