Logo + déclinaison

Après avoir donné mon opinion sur la nouvelle identité visuelle des technologies HTML5 du W3C — et avec un peu plus de recul — je me suis dit qu’il y avait de bonnes idées à prendre à condition de rester dans un esprit potache et ludique (en enlevant le côté trop militaire, donc).

Je pense être resté en phase avec la modernité de HTML5 avec ce logo que je destine à un projet de formation HTML5 et CSS3. Le nom de domaine devrait inclure le terme «formateur».

Projet de logo pour une activité de formateur en création de site web orienté html5 et css3

Logo Formateur en deux couleurs sur fond blanc.

Déclinaison avec un fond plus dynamique pour rendre le logo moins statique

Logo Formateur en deux couleurs sur fond gris «pêchu».

Couleur & typographie

• Akzidenz-Grotesk pour la lettre S avec un gros soupçon de déformation,
• Gotham pour le terme FORMATEUR en jouant sur les approches de paires,
• Code couleur prélevé avec soin sur le logo HTML5 du W3C.

Logo sur page d’accueil

Pour finir, voici un exemple de mise en scène du logo sous forme de page d’accueil pour un site web ayant pour objectif de présenter des plans de cours.

Exemple de placement du logo Formateur.

Logo Formateur Reloaded

Suite aux remarques concernant la ressemblance avec Smashing Magazine, j’ai modifié le code couleur. Je ne suis pas fan du bleu en général, mais j’aimerais tant que faire se peut garder le code couleur de la charte graphique HTML5.

Dégradé radial pour donner du volume et attirer l’attention sur les contreformes plutôt que sur le «S». Agrandissement du logo HTML5

Changement de couleur en restant dans la charte du logo HTML5

Affinage du dégradé radial et ajout d’un fond gris

Allez, un petit avant-dernier pour la route

Suppression du fond gris

Et un petit dernier pour la route pour finir ;-)

En bref

N’hésitez pas à donner votre avis tant sur le fond que sur la forme pour faire avancer le «schmilblick». Merci o/

Articles sur le même sujet

• Conception dans le navigateur avec HTML5 & CSS3 (amélioration progressive)
• Ebauche de logo pour illustrer le concept de code source libre
• Interviews Bruno Bichet, intégration web et css 4 design de 2007 à nos jours
• WordPress je thème
• Journal — « Typographie, HTML5 Boilerplate, Reset CSS, Clearfix, CSS3, Photoshop »

Introduction

En attendant que les pouvoirs publics ne se décident à financer des formations adaptées — et puisque le Pôle-Emploi est souvent hors du coup et hors des coûts –, se sont des générations de Webdesigners qui sont souvent formés à la va comme je te pousse ! A moins qu’un veilleur bien inspiré de la Région Rhône-Alpes ne vienne lire ce billet…

«Les Standards du Web, connais pas, c’est quoi ? Moi, j’ai suivi une formation en Webdesign Dreamweaver. Mais une fois, le formateur nous a fait cliquer sur le mode Source. Ça ne compte pas ?»

Par Astrid Graeber via Wikimedia Commons

Former des grands débutants à la création de site Web From Scratch est un pari difficile. Voici quelques éléments issus de la formation Chargé d’Intervention Multimédia que j’ai mise en place il y a une dizaine d’années pour le compte de la région Rhône-Alpes.

A l’issue de cette formation, les apprenants devaient être capables de mettre au jour les besoins du client, de formaliser les besoins dans un cahier des charges, de créer l’architecture d’un site internet, de concevoir le design à l’aide de Photoshop et d’Illustrator, de réaliser l’intégration d’un PSD dans Dreamweaver et de comprendre les bases de Javascript, PHP & MySQL.

Si je devais remettre cette formation en place aujourd’hui, je remplacerais Dreamweaver par Notepad++, j’insisterais lourdement sur les CSS 2.1 et CSS3 et la sémantique associée aux balises HTML5 et j’ajouterais la réalisation d’un thème WordPress comme examen de fin d’année ;-)

«J’ai bien envie de savoir découper un PSD autrement qu’en exportant toutes les tranches depuis ImageReady, c’est possible ?»

Niabot (Licence GFDL ou CC-BY-3.0), via Wikimedia Commons

Tout au long de la formation, j’insiste sur l’accessibilité, l’ergonomie, les standards du Web, la rédaction Web et le référencement (SEO). J’aborde également les outils de mesure d’audience (Google Analytics, GetClicky, Feedburner) et l’utilisation des réseaux sociaux pour faire la promotion de son site et effectuer une veille technique pro-active.

Ça fait beaucoup de choses, mais distillés par petites touches, ces conseils trouvent leur place et permettent de recadrer la production des apprenants avec des arguments concrets du type : «oui, ton texte est très bien écrit, mais non, en verdana 9px ça passe difficilement et en plus tu risques d’augmenter ton taux de rebond» ou encore : « Ton formulaire de recherche est bien placé mais sans bordure, avec son fond gris clair sur blanc on ne le distingue pas », etc.

Après Css Sans Stress — Auto-formation HTML & CSS avec les Frameworks CSS , ce billet fait partie d’un ensemble d’articles que je compte consacrer à la mise en place d’une formation globale sur l’intégration HTML & CSS dont le nom de code provisoire est :

« CSS Sans Stress & HTML S’en Mêle »

C’est quoi le Web ?

Expliquer comment faire un site Web c’est d’abord dire deux mots sur le Web et l’Internet dans les grandes lignes : histoire, protocoles, notions de client-serveur, débits, navigateurs et enfin la page web elle-même. Un site web n’est qu’une collection de pages reliées entre elles par une intention plus que par une technologie. C’est cette intention qui se traduit par le design dans le sens de «dessein».

A partir de là seulement, on peut évoquer la partie technique : HTML, CSS, Javascript, formats d’images et vidéos puis aller voir sous le capot l’apparence du code source. Pour éviter que l’expression «code source» ne soit source de confusion, j’insiste sur le fait que ni HTML ni CSS ne sont des langages de programmation, contrairement à Javascript côté client ou PHP côté serveur, par exemple.

Une très brève histoire du web

Représentation symbolique du réseau Arpanet (september 1974)

Par Yngvar (Public domain), via Wikimedia Commons

En 1969, un réseau connecte les universités d’Utah et de Californie. A partir de 1972 et jusqu’en 1981, les 213 hôtes qui sont reliés donneront naissance au cœur du réseau des réseaux (l’Internet). C’est à cette époque que les RFC sont mises en place : elles permettront de proposer et de distribuer les protocoles qui régissent et font vivre Internet aujourd’hui encore. Source Wikipédia.

Alors, c’est quoi le Web ? La lecture de l’article La plateforme Web de Karl Dubost (@karlpro sur Twitter) est très instructive. Le web est un espace d’information composé d’éléments caractérisés par des identifiants, appelé URI pour Uniform Resource Identifier. En gros, il s’agit de documents accessibles via un identifiant, par exemple une URL. Ce n’est peut-être pas grand chose, mais c’est déjà beaucoup.

Les premiers documents Web

Le site web du consortium du World Wide Web en 1992 encore accessible sur le site du W3.org

Les premières pages web sont principalement des documents universitaires, ce qui n’est pas étonnant puisque le Web est né du besoin des universités de partager leurs connaissances ou de confronter leurs travaux. Les balises HTML ont été conçues pour mettre en ligne des documents sémantiques et structurés et HTML5 ne déroge pas à ce sacro-saint principe.

Mise en page en tableaux

Les tableaux ont permis aux Webmasters de proposer des pages moins linéaires. On a ainsi vu apparaitre des en-têtes, des colonnes et des pieds de page. L’augmentation progressive des débits de connexion aidant, les images ont pris peu à peu la place qu’elles occupaient déjà dans les documents imprimés.

Inutile de sortir votre palette et vos pinceaux : la mise en page en tableaux ne fera pas de vous un(e) artiste ! (Photo par Rinina25)

photo by Rinina25 sur Wikimedia

Les tableaux c’était bien, mais leurs limites ont rapidement été atteintes : la maintenance est un casse-tête, l’accessibilité est souvent compromise et le ratio «code vs. contenu» n’est pas du bon côté de la force.

Mise en page avec CSS

Dans les années 2001, on a commencé à se dire que les CSS permettraient de produire des sites web plus efficaces en terme de maintenance, notamment en ce qui concerne la partie liées à la décoration des polices de caractères pour éviter d’alourdir les pages avec trop de «font» . Mais c’est à partir de 2005 (à la louche) que leur utilisation a vraiment commencé à s’imposer dans les esprits grâce au nouvelles possibilités de positionnement des blocs.

Les feuilles de styles CSS de l’intégrateur web ne sont pas fatiguées d’être sexy, elles !

By danBLOO (Own work) Public domain, via Wikimedia Commons

Toutefois, à cette époque encore, les CSS ont la réputation d’être un peu rigides ; les sites un peu funky n’y trouvent pas toujours leur compte. On reproche aux CSS de produire des mise en pages trop «carrés» (bien avant border-radius, donc). Pour certains, les CSS permettent tout juste d’arriver à la hauteur des sites Web en tableaux les plus basiques.

La lecture régulière de sites tels que  Cybercodeur, Openweb, CSS Zen Garden ou Alsacréations ont permis de tirer le meilleur du couple HTML & CSS vers le haut pour produire des pages Web respectueuses des standards, des maquettes du client et des délais (et des performances).

C’est quoi le graphisme ?

Les notions de Graphisme et de Design sont un peu les «laissés pour compte» dans les formations en création de site web. Tout au plus a-t-on le temps d’enfoncer le clou de la lisibilité et de donner quelques conseils de base concernant les trois mamelles du gris typographique : polices de caractères, contraste et interlignage.

Ce n’est pourtant pas une mission impossible. Il suffit de rappeler que le graphisme est composé de deux parties distinctes et complémentaires : Direction artistique et Design. La première va définir l’ambiance, le style, ce que le visiteur va ressentir en voyant le site ; tandis que le second est l’application des bonnes pratiques concernant la manière dont sont agencées les composantes de chaque page. Ce n’est jamais que l’expression de l’opposition de principe entre le fond et la forme, l’intention et l’exécution.

Une fois que l’on a bien compris que la direction artistique et le Web Design sont deux choses différentes, on peut se concentrer sur les fondamentaux du graphisme : les principes du design (traduit en français sur pouipouidesign) et les éléments que ces principes doivent organiser.

Graphisme & Webdesign

Voici le minimum syndical dont tout apprenant en Webdesign devrait entendre parler, ne serait-ce que dans les grandes lignes en fonction de la durée de la formation.

Quelques principes de base, un milliard de possibilités

Équilibre (symétrie, asymétrie)

Les notions de base de notre physique quotidienne comme la masse, la gravité ou encore le vide restent actives lorsque nous regardons une composition graphique. Nous attribuons un «poids visuel» aux éléments qui composent une mise en pages. Cet équilibre peut être arrangé de manière symétrique ou asymétrique.

Dans le premier cas, la composition est répartie autour d’un axe vertical ou horizontal. Il en résulte une impression… d’équilibre, de paix, de stabilité. Dans le cas de l’asymétrie, les éléments sont organisés de manière à produire une plus grande tension visuelle par l’utilisation de plusieurs petits éléments pour équilibrer une plus grande forme, par exemple.

Rythme (régulier, mouvant, progressif)

L’intervalle entre la répétition ou l’alternance d’éléments crée le sens du mouvement et définit des motifs ou des textures. Le rythme peut être régulier lorsque les intervalles ou les éléments sont similaires en taille ou en longueur, fluide avec un mouvement plus organique ou plus naturel, ou encore progressif lorsque des étapes sont suggérées.

Proportion (distribution des formes, échelle et relation entre les éléments)

Il s’agit des dimensions ou de la distribution des formes, mais aussi de l’échelle entre un élément et un autre. Un petit objet à côté d’un plus important peut donner l’impression d’être plus éloigné.

Hiérarchique ou prédominance (quelle place pour quel élément)…

…Ou comment établir la perspective d’une composition et décider de l’importance relative des éléments entre eux selon le premier-plan, le plan médian et l’arrière-plan. Il existe la perspective à deux points de fuite et à trois points. Rarement utilisée, cette dernière est utilisée pour augmenter une perspective représentant des immeubles très hauts, des clochers d’église, etc. Via ABC Dessin.

Unité (d’après la Gestalt théorie)

Il s’agit de la composition vue comme un tout, où chaque élément, les liens et les relations qu’ils entretiennent font partie d’une démarche conceptuelle qui pousse l’esprit à établir des liens, à former des catégories ou des groupes porteurs de sens. La nature a horreur du vide, l’esprit humain aussi !

• Fermeture — L’esprit imagine les pièces manquantes dans une composition,
• Continuité — L’œil continue dans une direction donnée,
• Similarité — Relation entre la forme et la fonction,
• Proximité — Relation entre les éléments et comportement induit,
• Alignement — Mise en place des objets dans l’espace pour organiser des ensembles cohérents.

La couleur

J’ajoute un topo sur les couleurs, sans lesquelles la vie serait bien triste. Sans entrer dans le détail de la symbolique des couleurs, je retiens que l’on a toujours besoin d’une couleur dominante et de quelques couleurs secondaires.

1. Couleur dominante (bandeau ou logo) déclinée en 3 couleurs moins saturées et/ou plus claires pour découper la page en blocs fonctionnels.
2. Couleur tonique pour les titres, déclinée en deux couleurs pour les puces, les pictos ou des textes courts,
3. Troisième couleur pour les encarts, déclinée en deux couleurs pour les mises en exergue, les traits de séparation,
4. Couleur typo pour le texte principal,
5. Fond de page.

Le nuancier Pantone, que les imprimeurs appellent aussi « pantonier » et qui ne comprend pas moins de huit cents teintes, donne en fait les proportions de chacune de ces dix teintes de base

Nuancier Pantone

Un travail de qualité ne saurait se contenter de ces cinq étapes pour déterminer une palette de couleurs. Néanmoins, cette to-do list permet de franchir le cap de la feuille blanche. N’hésitez à consulter Choisir sa palette de couleurs où vous trouverez pas moins de 14 outils en ligne pour vous aider dans cette tâche. C’est d’ailleurs l’une des phases les plus passionnantes dans le processus de création ; c’est aussi celle qui sera la plus impactante en terme de première impression.

L’idéal serait d’avoir un très beau visuel sur lequel promener la pipette pour recueillir délicatement quelques gouttes de pixels… Ne rêvons pas trop, car la réalité est souvent plus proche d’un logo conçu en fonction des contraintes de l’imprimé versus les possibilités chatoyantes de l’écran.

Le gris typographique

C’est grosso modo l’impression visuelle faite par un pavé de texte que l’on regarde de loin en plissant les yeux (‘-_-’). En appliquant cette idée du gris typographique à l’ensemble des blocs (et au texte qu’ils contiennent), il est possible de travailler sur le rythme du site et la respiration de la page.

Rythmer la navigation

Nous avons plus haut la notion de rythme appliquée au niveau de la page. Ici, je m’intéresse aux relations qu’entretiennent les différentes pages d’un site en fonction des éléments qu’elles partagent : logo, bandeau et les menus de navigation qui fédèrent par nature les pages d’un site Web. L’enchainement des liens va donner du souffle à la navigation et à l’expérience utilisateur.

Il ne faut pas non plus que le site se transforme en machine à cliquer. Chaque page doit retenir le visiteur en offrant un espace qu’il peut identifier et situer immédiatement par rapport au reste du site. Si ce n’est pas le cas, il faut revoir la copie !

Plan de cours

A l’issue de cette série de billets , je proposerai un plan de cours sur cinq jours pour l’apprentissage de HTML & CSS auprès d’un public de débutants plus ou moins avancés. Cette formation devrait être idéale pour les webdesigners ou les graphistes voulant aller plus loin que le mode «Aperçu» de Dreamweaver ;-).

Exemple pour la première journée :

1. Lundi

   Matin :

   • Présentation rapide de l’objectif de la formation : exemple de page web à assembler le dernier jours #1,
   • Qu’est-ce que le web (les grands jalons historiques),
   • Qu’y trouve-t-on, (sites web, les blog, pages perso, intranet),
   • La relation client-serveur (comment ça marche, les protocoles utilisés).

   Après-midi :

   • Présentation détaillée de l’objectif de la formation : exemple de page web à assembler le dernier jours #2,
   • Présentation des briques composant l’exemple de la page web sur un support papier distribué aux apprenants,
   • Présentation du code source commenté de la page web en isolant bien chaque brique et en indiquant où elle se situe sur le support papier.

C’est tout pour le moment ;)

PS — Ah, j’oubliais : n’hésitez pas à me contacter pour que nous discutions ensemble de votre projet de formation, que vous soyez débutant, ou pas.

Articles sur le même sujet

• Une solution CSS accessible pour remplacer du texte HTML par une image
• Améliorations cosmétiques et ergonomiques sur ce blog
• Petit bilan statistique du CSS Naked Day
• CSS Naked Day + Copaing + Lyon Blog + CSS2 Pratique…
• Quel est le coeur de métier de l’intégrateur web ?

Toutefois, on ne peut pas ne pas constater que les sites Web partagent dans leur grande majorité les éléments suivants :

1. En-tête de page (header),
2. Une ou plusieurs barres latérales (aside),
3. Zone de contenu (article) à droite, à gauche ou au milieu,
4. Pied de page (footer) généralement situé en bas de page.

La plupart des tutoriels que l’on trouve sur le web reprennent un découpage par thématique : après les bases concernant l’insertion de la balise style, on attaque généralement par la mise en forme du texte, les listes, les images, les bordures, le modèle de boite, le positionnement, etc. C’est le découpage proposé par les spécifications du W3C et la majorité des tutoriels CSS qui permet de retrouver rapidement une propriété. Il s’agit avant tout de servir de référence… mais a-t-on jamais appris à rédiger des phrases avec un dictionnaire ?

J’évoque souvent le potentiel didactique des frameworks CSS :

• Le Reset CSS (reset.css) permet de faire le point sur les balises HTML les plus utilisées,
• Le fichier typographie (typography.css) redéfinit le comportement des balises et permet d’acquérir un solide vocabulaire CSS,
• Le système de grille (grid.css) propose les éléments fondamentaux du positionnement en quelques déclarations,
• La prise en compte des derniers de la classe (ie6, ie7 et bientôt IE8) permet d’aborder la notion de compatibilité cross-browser.

→ Lectures complémentaires conseillées :

• Faites votre choix parmi plus de 30 frameworks CSS,
• Lire Frameworks CSS + Reset CSS : design from scratch.

A côté des frameworks on trouve un grand nombre de proposition de feuilles de style prenant en compte une grande partie des balises HTML sans pour autant inciter à l’utilisation d’un reset CSS ou d’un système de grille de mise en pages. Ces feuilles de style de base ont souvent été longuement pensées par leur auteur et les choix effectués nous éclairent sur les subtilités des CSS.

→ Parmi les «kits de démarrage» existants, je trouve souvent mon bonheur dans :

• base.css de Thierry Koblentz (cf. Implementing a starter CSS file rather than using a reset styles sheet),
• no-reset de Florent Verschelde (cf. A Simple Base Stylesheet),
• style.css de HTML5 Boilerplate.

L’idéal étant bien sûr de prendre ça et là ce dont on a besoin pour se constituer son propre fichier CSS tout terrain !

Articles sur le même sujet

• BIC, framework CSS orienté couleur et typographie
• Frameworks CSS + Reset CSS : design from scratch
• SMACSS — Architecture évolutive et modulaire pour CSS
• Foundation — Framework HTML, CSS & jQuery
• Mise à jour du thème WordPress ♥ Basics avec HTML5 Boilerplate 2

> Adoptez les bons réflexes pour concevoir des sites Web actuels et créatifs ! Cette formation animée par Florent Verschelde est conçue pour répondre à vos besoins quel que soit votre niveau. Débutants, découvrez toutes les bases grâce à de nombreux exercices pratiques et liens utiles fournis. Vous êtes de niveau intermédiaire, trouvez toutes les clefs nécessaires pour implémenter vos designs et concevoir des pages conformes aux standards du Web (W3C) en mettant à profit les richesses des feuilles de styles CSS. Des gabarits présentés avec Alsacreations.com vous permettront de trouver de nouvelles bases solides pour enrichir vos projets.

Articles sur le même sujet

• Check your <body> avec le W3C
• Quelques notes — Programme de formation HTML & CSS
• CSS Sans Stress — Une formation intégrateur HTML & CSS
• Css Sans Stress — Auto-formation HTML & CSS avec les Frameworks CSS
• DVD de formation à WordPress

• Editoriales — les blogs sont mis à jour régulièrement par des passionnés qui recherchent le contact avec d’autres passionnés. Les liens créés à l’occasion des interactions entre les blogueurs génèrent ces fameux backlinks (liens entrants) dont les blogmestres sont friands.

• Techniques — les outils disponibles sur le marché sont user friendly (simple d’utilisation) et Search engine ready (prêt à être indexés par les moteurs de recherche).

De nombreuses entreprises ont pris la mesure du phénomène des blogs pour booster la visibilité de leur marque ou de leurs produits :

• Certaines utilisent les services de blogueurs influents en leur proposant de tester des produits et de partager les résultats avec leur lectorat.

  Cette démarche, si elle est transparente, est idéale : une personne connue et indépendante dit du bien de votre marque, teste vos produits et contribue à diffuser vos promesses.

• D’autres créent des blogs auto-promotionnels où le seul intérêt des articles consiste à citer l’entreprise et ses produits le plus souvent possible.

  Cette méthode est discutable au même titre que que les pages satellites ou les fermes de liens qui n’ont pas la cote auprès des moteurs de recherche.

Pour ma part, je préconise la mise en place d’un blog d’entreprise reprenant à son compte ce qui fait l’originalité des blogs par rapport aux sites web traditionnels : communiquer régulièrement et simplement sur son cœur de métier.

La simplicité et la régularité ne sont pas — malgré les apparences — faciles à obtenir. Pour cela, il est indispensable de faire le point avec votre service commercial ou votre département marketing sur les stratégies existantes dans votre société pour les décliner sous forme de billets.

Cette mise au point peut se concrétiser par la rédaction d’un texte fondateur (la charte rédactionnelle) pour lancer les lignes directrices du futur blog. Ce texte contiendra en annexe l’ensemble de mots-clés à propulser le plus haut possible dans les résultats des moteurs de recherche.

Une fois ce document validé, il est enfin possible de mettre en place le blog d’entreprise avec sa charte rédactionnelle et graphique pour capter l’attention de votre cœur de cible, ainsi qu’une périodicité optimale en fonction de votre secteur d’activité et de votre actualité.

Et voilà ! il ne reste plus qu’à alimenter le blog en contenu et suivre l’évolution des résultats grâce à un outil fiable (Google Analytics) pour mesurer l’audience en terme de visiteurs, de pages vues ou en fonction des mots-clés utilisés pour accéder au blog. La consultation des résultats sur les moteurs de recherche se faisant tout simplement en les interrogeant pour savoir ce qu’ils ont à dire sur les mots-clés choisis.

Il est tout à fait possible d’externaliser la partie rédactionnelle (ou la réécriture des billets) pendant la période de lancement du blog en attendant de finaliser la constitution et la formation de l’équipe chargée d’assurer l’animation du blog par la suite. Dans cette éventualité, il est primordial que vous ayez la possibilité de prendre les rênes du blog à tout moment pour les confier à votre équipe.

Il va sans dire que cette transmission ne peut se faire que si vos collaborateurs ont été formés régulièrement à l’outil ainsi qu’à l’ensemble des techniques mises en œuvre pour assurer votre notoriété dans la blogosphère.

Vous l’aurez compris, mettre en place un blog d’entreprise doit se faire en impliquant votre équipe et en choisissant un prestataire qui s’implique à son tour pour comprendre le secteur d’activité de votre entreprise, ainsi que les spécificités de vos produits.

Articles sur le même sujet

• Une charte rédactionnelle pour votre blog d'entreprise
• Martine 2.0 fait du blog d'entreprise
• Notes de lecture à propos de « Stratégie de contenu web »
• Super Formateur HTML & CSS bientôt dans la place ?
• CSS Sans Stress — Une formation intégrateur HTML & CSS

Apprendre les fonctionnalités de WordPress par Francis Chouquet

Qu’est-ce qu’un blog ?

• Kit de départ pour utiliser WordPress
• Hébergeurs et logiciels FTP
• Transfert des fichiers sur l’hébergement
• Installation du blog

Vos premiers pas sur WordPress

• Précision sur l’installation en local
• Découverte de l’interface
• Changement du mot de passe

Tout savoir sur les articles

• Rédaction et publication d’un premier article
• Le paramétrage d’un article
• Gestion des émoticones
• Envoi d’un article via un téléphone portable
• Rédaction d’un article en mode visuel
• Rédaction d’un article en mode html
• Les tags
• Les catégories

Agrémenter votre blog

• Insertion de médias (images, vidéos, son….)
• La bibliothèque de média
• Insertion d’une galerie
• Options avancées de la rédaction d’un article
• La fonction More
• Utilisation extrait article (The excerpt)
• Utilisation basique des champs personnalisés

Partage et diffusion de contenu

• « Ping » en action
• Réglage « Ping »
• Article en attente de relecture
• Rôle des utilisateurs
• Article privé
• Article programmé

Gestion des articles et commentaires

• Gestion des articles
• Gestion des commentaires
• Réglage des commentaires
• Gestion des avatars
• Création de page

Les modèles de pages

• Exemple concret de page
• Structure de modèle de page
• Création de modèle de page

Liens et tags

• Création de liens
• Paramétrage de l’URL du blog
• Réglages de base
• Gestion des permaliens
• Attribution de préfixe aux catégories et aux tags

La gestion des droits

• Gestion des utilisateurs
• Les options de lecture

Les thèmes de WordPress

• Emplacement des thèmes
• Présentation des fichiers du thème
• Des sites Web pour télécharger des thèmes
• Installation d’un thème

Modifier un thème

• Ossature des thèmes (css)
• Personnaliser le thème par défaut
• Personnaliser l’image d’entête
• Thèmes paramétrés avec wpthemegen

Les widgets

• Définition et application
• Installation des extensions les plus importantes
• Installation d’une extension
• Configuration du widget Akismet
• Extensions indispensables
• Intégrer une vidéo en provenance de Youtube
• Intégrer une vidéo au format Flash mp4 (Wordtube)

Développer un plugin pour WordPress par Amaury Balmer

WordPress avancé

• Exportation et importation par WordPress
• Backup complet de son blog

Les bases

• Présentation plugins
• Principe des « hooks », filtres et action

Le plugin Deezer

• Utilisation des « Short Codes » pour afficher un lecteur flash Deezer

Le plugin Event

• Introduction
• Création de table MySQL

Event – Administration

• Ajout des menus dans WordPress
• Utilisation des permissions pour le menu WordPress
• Page de réglages
• Fonction d’accès en base de données
• Formulaire d’ajout
• Page de gestion

Event – Widgets

• Activation du Widget
• Création du Widget
• Description pour le Widget

Event – Client

• Filtrer le contenu pour affiche la liste des événements
• Ajout du mot clef « event » et redirection
• Création de la page dans le thème
• Rewriting des événements
• Gestion dynamique des liens d’événements
• Ajout d’un shortcode pour afficher le lien vers un événement

Event – Sécurité

• Sécurité Permission
• Sécurité SQL
• Sécurité Nonce (dite « de provenance »)

Event – Tags

• Présentation de la partie Tags
• Ajout du mot clef et enregistrement de la taxinomie
• Rewriting des tags d’événements
• Création du template dans le thème
• Génération du nuage de tags

Event – Internationalisation

• Comment internationaliser ?
• Utilisation de Poedit

Articles sur le même sujet

• DVD de formation XHTML et CSS
• Mes thèmes WordPress Basics et Beyond Basics sont sur Github
• Le petit journal du web : PHP, WordPress, Javascript, CSS, Ruby, Responsive Webdesign
• 35 blogs de développeurs web
• 9 ressources pour web designer