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 !

Page, article, catégorie, étiquette, menu…. quelles différences ?

Vous êtes auteur ou administrateur d’un blog dans WordPress. Ce n’est pas toujours évident au début de comprendre la différence entre une page, un article, une catégorie, une étiquette (et comment faire apparaître tout cela dans les menus).

Cet article vient en complément de celui publié en décembre « Personnaliser son blog – version débutant » et de ce second, sur le même thème mais à destination de personnes moins débutantes sur WordPress.

Aussi nous ne reviendrons pas par exemple sur les différents thèmes proposés dans le cadre du concours.

Qu’est-ce qu’un article dans WordPress ? Un article comporte un titre et un corps, dans lequel vous pouvez y mettre du texte, des images, des vidéos, des liens… Les articles sont publiés de façon antéchronologique, c’est-à-dire du plus récent au plus ancien. C’est vous qui définirez le nombre d’articles accessibles depuis la page principale du blog (que l’on pourrait appeler la page « nouveauté » ou « dernières publications »). Il existe cependant plusieurs moyens de retrouver tous les articles d’un même thème, ou sur un même sujet : les associer à des étiquettes ou encore à des catégories. (cf paragraphes ci-dessous).

Qu’est-ce qu’un page dans WordPress ? Une page est un élément constitutif du menu principal du site. On ne peut pas l’associer ni à une catégorie, ni à une étiquette. Une page peut rester présente dans les menus sans « disparaître » au fur et à mesure de la publication d’autres contenus. C’est pour cela qu’une page sera utilisée par exemple pour les mentions légales, le descriptif d’un projet ou de la thématique d’un blog, une page d’accueil d’un site à laquelle on veut pouvoir accéder facilement.

Quand vous êtes dans votre tableau de bord WordPress, cliquez sur « Pages » – « Ajouter ». Trouver le titre de la page et « remplir » cette page (vous pouvez comme dans un article y déposer des images, vidéos, liens…)

Une fois votre page créée, il va falloir la faire apparaître dans les menus. Pour ce faire, passez par « Apparence » – « Menus ». Si aucun menu n’est créé, il faut créer un menu afin de pouvoir y attacher la page. Cela permettra de regrouper à un même endroit dans les menus plusieurs pages ou catégories. Dès que votre menu est créé, cliquez sur « Ajouter une page » – ouvrir le tiroir « Pages » (flèche vers le bas à droite de « Pages ») – cochez la ou les page(s) que vous souhaitez voir apparaître dans votre menu – Cliquez sur « Ajouter au menu ». Ne pas oublier d’enregistrer le menu.

Quelle est la différence entre les catégories et les étiquettes ?

Le site WordPress est un blog : par défaut, il affiche les articles du plus récent au plus ancien.
Mais il est possible de trier les articles en leur affectant une catégorie ou une étiquette.

Qu’est-ce qu’une étiquette ?  L‘étiquette ne peut pas être intégrée au menu principal. Mais elle permet également de trier les articles. En ajoutant le widget « Nuage d’étiquettes les plus souvent utilisées » dans le menu latéral droit, on obtient ainsi un autre moyen d’entrée dans les articles.

Qu’est-ce qu’une catégorie ? La catégorie est un élément constitutif du menu principal du site : en ajoutant une catégorie au menu, on l’affiche comme une rubrique dans laquelle se trouveront réunis tous les articles rattachés à cette catégorie.

Pour ajouter une catégorie dans un menu, après avoir créé cette catégorie (prendre exemple sur la création d’une page, premier paragraphe de l’article) ouvrez le tiroir « Catégories », cliquez sur « Afficher tout », cochez la ou les catégories et cliquez sur « Ajouter au menu ». Procédez de la même manière pour les étiquettes.

Exemples :

– Dans le menu principal, tri des articles par les catégories suivantes :
INFOS, CLASSE 1, CLASSE 2, CLASSE 3
En cliquant sur la catégorie CLASSE 2, on accède à tous les articles publiés par la classe 2.

– Si l’on souhaite également trier les articles de façon thématique, on peut utiliser des étiquettes :
Production écrite, Arts visuels, Sorties scolaires…
En cliquant sur l’étiquettes Sorties scolaires dans le nuage, on obtiendra tous les articles attachés à cette étiquette, par toutes les classes de l’école.

Remarque 1 : un article peut être rattaché à plusieurs catégories et/ou à plusieurs étiquettes, et cela peut être modifié après la publication.

Remarque 2 : les catégories sont indispensables si vous souhaitez créer un menu. Choisir des noms assez courts pour obtenir un menu horizontal équilibré.

Remarque 3 : on peut créer des sous-catégories, mais attention de ne pas trop découper le menu.

A noter, vous pouvez organiser vos articles à postériori en les rattachant à des étiquettes ou à des catégories. Il n’est jamais trop tard pour réorganiser un blog. Cela facilite la lisibilité de certains projets.

 

Personnaliser son blog

Nous avons tous des besoins et des attentes différents quand nous publions sur internet.  Nous allons  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

Personnaliser son blog – Version débutants

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.