Archives pour la catégorie Design Blog

Des images en fond transparent

Est-ce que cela vous est déjà arrivé de vouloir superposer des images et d’avoir l’arrière-plan de l’une d’elles, peut-être blanc, qui vous en empêchait ? Alors il est temps de se pencher sur les images en fond transparent…

Une image en fond transparent a plusieurs avantages :

– elle s’intègre mieux dans la page
– elle adopte automatiquement la couleur d’arrière-plan
– elle est plus légère que la même image avec un fond uni

Il est possible de supprimer le fond uni d’une image pour le rendre transparent, avec le logiciel GIMP par exemple, mais le résultat n’est pas toujours satisfaisant.

Voici un petit tutoriel expliquant comment faire : http://libresavous.com/doc/gimp-rendre-transparent-le-fond-uni-dune-image/

Les 3 formats les plus répandus sur internet sont le PNG, le GIF et le JPG.

Le format PNG est un format compressé (la taille des images est adaptée à la publication sur internet) qui n’altère pas la qualité de l’image lors de la compression et qui gère la transparence.
Le format GIF permet de faire des images animées (façon Tumblr), gère la transparence, mais lors de la compression l’image perd nettement en qualité.
Le JPG ne gère pas la transparence, et perd en qualité lors de la compression.

On optera donc en priorité pour le format PNG pour les images et le format GIF pour des animations, ces deux formats gérant la transparence.

Alors, à vous de jouer !

Personnaliser son blog

Vous avez ouvert votre blog et vous souhaitez soigner un peu son look ? C’est normal ! Un blog, c’est un peu comme une maison : pour s’y sentir bien, il faut s’approprier l’espace et travailler la déco. Voici quelques conseils pour vous faciliter la tâche dans ce chantier.

1 – Le thème

Le thème d’un blog définit les grandes lignes de son organisation : c’est un peu le plan de la maison. Où se placent le titre, les articles, le menu ? Où peut-on mettre une image d’en-tête ? Pour vous faciliter la tâche, nous vous proposons 3 thèmes pour le concours « Blogue Ton École » qui sont un peu détaillés ci-dessous :

Les trois thèmes du concours Blogue ton école
Les trois thèmes du concours Blogue ton école

Vous pouvez à tout moment changer le thème de votre blogue et le reconfigurer, sans perdre aucun article ni aucune page !choix-menu-theme

Le choix du thème se fait par le menu latéral de l’interface d’administration dans Apparence, comme ci-contre.

Vous n’avez plus en suite qu’à choisir le thème et le configurer …

2 – L’image d’en-tête (et les images, en général)

Une fois que le cadre est posé, vous pouvez avancer un peu et définir les premiers éléments de graphisme. L’image d’en-tête est importante pour afficher, de façon visuelle, ce que l’on va trouver dans votre blog. Trouver la bonne illustration n’est pas facile ; il peut être intéressant de passer du temps avec les élèves pour définir comment illustrer votre blog. Une fois l’image trouvée, il est important de vous assurer que vous avez le droit de l’utiliser. Pour cela, vous avez plusieurs possibilités :

  1. Vous choisissez une image que vous avez prise vous-même,
  2. Vous choisissez une image et vous avez demandé à son auteur le droit de l’utiliser pour votre blog,
  3. Vous utilisez une image libre de droits. Des catalogues existent en ligne, comme par exemple pixabay.

Cette image est importante, elle donne le ton de votre blog !

Il est aussi important d’illustrer chacun de vos articles et nous vous conseillons d’adopter la même démarche en prenant soin de bien choisir chaque image. C’est un élément important dans la lecture d’un blog qui apporte beaucoup à sa richesse et au plaisir du lecteur.

image-a-la-uneVous pouvez choisir de mettre une image en en-tête de chacun de vos articles en utilisant la fonctionnalité image à la une, qui est accessible en bas du menu latéral droit de l’interface d’administration.

Pour aller un peu plus loin avec les images, vous pouvez lire cet article.

3 – La navigation

La navigation se fait par le Menu et les Widgets. Cette navigation est importante pour aider le lecteur à lire et parcourir votre blog.

Les widgetschoix-menu-widget

Ce sont des petits blocs que vous pouvez ajouter aux colonnes latérales. on les trouve dans le menu latéral d’administration. Ils vous permettent d’intégrer facilement des liens vers les derniers articles, les catégories ou étiquettes que vous utilisez dans votre blog, un petit texte que vous souhaitez ajouter, … Parcourez tout le catalogue des widgets, les possibilités offertes sont nombreuses !

Le Menu

Il vous permet de proposer une barre de navigation horizontale en haut de votre blog. Vous pouvez le configurer comme vous voulez pour pointer des catégories, des pages particulières ou des articles spécifiques. Cela est spécialement utile pour accéder rapidement à la présentation de votre blog (page A propos)

 4 – Les couleurs

Un autre aspect important de la personnalisation de votre blog est le choix du jeu de couleurs que vous allez utiliser. Le thème que vous choisirez vous en proposera par défaut mais vous pouvez toujours les modifier en travaillant directement dans le fichier CSS. Afin de vous faciliter le choix de couleurs, vous pouvez soit consulter des sites qui proposent des assortiments prêts à l’emploi ( par exemple avec colorhunt) ou vous construire votre propre palette (vous pouvez essayer colordot qui est très intuitif).

Comme pour les images, la palette de couleurs que vous utiliserez en dira long sur votre blog.

Vous pouvez aussi parcourir cet article qui parle des couleurs

5 – impliquez votre lecteur !

creer-h5pLes blogs du concours ‘Blogue ton école’ intègrent le module H5P (accessible dans le menu latéral de gauche de l’interface d’administration) qui permet de créer des questionnaires facilement comme ci-dessus pour tester les palettes de couleur. Utilisez-les ! Ils créeront une interaction avec le lecteur qui modifie l’expérience de lecture. Ce serait dommage de s’en priver, non ?

Après ces premiers conseils, il ne vous reste qu’à vous lancer. Ayez confiance, vous arriverez bien à créer un blog qui vous ressemble ! Et nous sommes toujours là pour répondre à vos questions 😉

Un dernier conseil : prenez du plaisir avec votre blog, c’est une aventure captivante et vraiment riche !

Les couleurs aussi parlent

Dans tout support de communication (texte, vidéo, affiche) le choix des couleurs est essentiel. À travers ces couleurs, des associations mentales se mettent en place. C’est ce que l’on appelle le symbolisme des couleurs.

Ce paramètre est très important à prendre en compte lorsque vous choisirez la charte graphique de votre blog. Un autre critère est aussi à prendre en compte : la signification des couleurs varie en fonction des cultures. Si le blanc pour les européens est assimilé à la pureté, l’innocence, la propreté, la virginité, en Asie et chez les musulmans le blanc représente le deuil.

Pensez également au lien qui doit exister entre le fond (le contenu de votre blog) et la forme (le choix de la charte graphique). Si vous travaillez sur la page de présentation d’une salle de sieste d’une école, vous ne choisirez pas du marron foncé avec du vert sapin ou encore du rouge, mais plutôt des couleurs claires et pastels.

Vous pouvez faire le test en inscrivant comme équation de recherche dans un moteur de votre choix « site crèche » et restreindre la réponse en image.

Recherche_creches

Faire la même chose avec « pompes funèbres ». Édifiant !

Recherche_pompesfunebres
Voici un exemple de site « raté » : http://sitenul.chez.com/ (pour la petite histoire, ce site a été créé pour lister… le top 10 des sites les moins bien sur Internet !)

Sélection_309

Si vous travaillez avec des logos déjà existants (par exemple si votre établissement scolaire a un logo en forme de cercle vert et jaune) votre réflexion devra prendre en compte ces paramètres « imposés ». Par exemple, pour les chaînes nationales de télévision, on aura le rouge pour « France2.fr », le bleu pour « France3.fr » ou encore le vert pour « France5.fr »logo-exemple

La notion d’accessibilité (comme la lisibilité) doit être réfléchie en amont. Pour vous rendre compte de son impact, essayez dans un traitement de texte d’écrire en noir sur un fond gris foncé. Cet aspect fera l’objet d’un prochain billet.

Personnaliser son blog

Nous avons tous des besoins et des attentes différents quand nous publions sur internet. Jonathan a expliqué ici le fonctionnement de WordPress. Nous allons cette fois voir comment personnaliser son blog.

Personnaliser l’apparence

La disposition des informations

Selon ce qu’on publie, nous avons besoin d’une disposition de l’information différente. Les thèmes sont là pour cela. Dans le cadre du concours, trois thèmes sont proposés :

Chacun de ces thèmes peut ensuite être personnalisé comme le montre cette vidéo :

À vous de faire preuve d’imagination pour personnaliser ces éléments visuels !

Et pour aller plus loin, on peut modifier les règles CSS. Nous en reparlerons plus tard.

Choisir les informations secondaires : les widgets

Archives, commentaires récents, articles récents, catégories, module de recherche, menu ou texte personnalisé, etc. autant d’informations (qu’on appellera widgets ici) que l’on peut faire apparaître sur son blog, mais si on n’a pas besoin de tout, on alourdit inutilement la page en les affichant tous. C’est la raison pour laquelle on peut choisir quel widget faire apparaître et où.

Comme les thèmes, les widgets sont accessibles depuis le tableau de bord du blog, rubrique Apparence.

Personnaliser son blog avec des plugins (extensions)

Il est possible d’aller plus loin dans la personnalisation en ajoutant des plugins, c’est-à-dire des extensions en fonction de nos besoins. Ces extensions sont développées par des usagers qui les mettent ensuite à disposition de tous. Ils comprennent parfois des failles de sécurité non décelées par leurs auteurs ou liées aux mises à jour successives du logiciel. C’est la raison pour laquelle la DSI du rectorat vérifie les extensions qui sont demandées. Voici celles qui sont disponibles pour l’instant.

Gestion des utilisateurs et de l’accès

Importer/Exporter des articles

Editeur de texte

Gestion des médias

Intégrer des flux et des contenus

Création de formulaires dynamiques

Proposition d’une newsletter

Calendrier

Statstiques