Les premiers pas sur le DevBlog d'Erisium.

Vous êtes nouveau dans l'équipe de rédaction du DevBlog ? Ou vous avez un doute sur une fonctionnnalité ? Ce post est fait pour vous. Vous allez retrouver le principe de fonctionnement de notre outil : Ghost. Mais aussi comment rédiger de bons posts. Bien sûr, ce post est à titre informatif, libre à vous de laisser parler votre créativité sur chacun de vos posts afin de rendre le DevBlog plus attrayant.

I) Le fonctionnement de Ghost :

Afin de rédiger de futurs posts pour le DevBlog il vous faut accéder au panel de Rédaction/Admin de ghost. Pour cela il suffit de vous rendre sur ce lien : blog.erisium.com/ghost/. Vous devriez tomber sur cette page :

Cette page est l'endroit où vous allez retrouver tous les posts publiés ou en cours de rédaction. Nous y reviendrons plus tard.

Pour le moment, cliquez dans le menu de navigation à droite sur "Team". Vous allez retrouver tous les membres de l'équipe du DevBlog, nous vous invitons à modifier votre profil afin qu'il soit complet, pour cela cliquez sur votre nom.

Modifier son profil

Une fois sur la page de votre profil, éditez le.

  • Dans la case d'édition Full Name entrez votre nom d'auteur.
  • Dans la case Slug entrez le mot qui permettra à ghost de vous créer une page d'auteur accessible pas les lecteurs. Par exemple, ici : pixelchocolater. Ghost génère automatiquement ce lien pour la page de profil : blog.erisium.com/author/pixelchocolater
  • Pour les autres zones d'édition elles parlent d'elles mêmes, vous pouvez les remplir comme bon vous semble.
  • N'oubliez pas de remplir la zone Bio en mettant votre rôle au sein d'Erisium. (même si cela reste facultatif)

Options

Dans le menu de navigation vous pouvez retrouver différents onglets. Vous ne devez jamais modifier les options qui se trouve à l'intérieur. Cependant, il y a un endroit où vous pouvez aller, dans Labs, puis vous vous rendez en bas de page. Vous verrez une option appellée : Night shift. Si vous cochez la case, l'option vous permettra de mettre le panel en mode "Nuit". Maintenant ghost n'a plus de secret pour vous, passons dès maintenant à la rédaction d'un post.

II) Rediger un post :

Nous voilà dans la partie la plus importante et la plus complexe. La rédaction d'un post du DevBlog. Les débuts peuvent paraître difficile, mais une fois que vous avez compris le principe, il n'y a rien de plus facile !
Tout d'abord, pour créer un nouveau post, il suffit de cliquer sur le bouton New story dans le menu de navigation à gauche. Vous tomberez sur cette page : Ensuite, ghost parle de lui même. Vous pouvez apercevoir la zone où vous allez introduire le titre de votre post. Pour le Devblog votre titre devra se terminer par : Mise à jour du jj/mm/aaaa. En dessous du titre, il y a la zone de rédaction.
Venons en à une partie plus compliquée, effectivement vous pouvez rédiger sur ghost avec du Markdown ou de l'HTML. Nous allons privilégier l'HTML, car il est possible avec ce langage, d'ajouter des couleurs assez facilement, et de modifier le texte comme bon vous semble. Le seul problème de ce choix, c'est qu'il faut avoir un minimum de connaissance en ce langage.

L'en-tête

Commençons par l'en-tête, vous l'aurez peut être remarqué mais les posts commencent toujours de la même façon. Si vous allez dans le menu Stories à droite vous apercevrez un post en rédaction (draft) qui s'appelle : Pattern DevBlog. Vous retrouver à l'interieur le "code" de base pour chaque post. Nous vous conseillons de le copier et de le coller sur votre nouveau post. Voici le code de l'en-tête:

 <img src="/content/images/2017/07/8w0cneU8--1-.png" style="width:700px"/>

 <p>
    <strong>Vous allez retrouver ci-dessous, les dernières nouveautés ajoutées sur le serveur ainsi que les divers correctifs effectués par nos Développeurs.</strong>
 </p>

Du côté lecteur ils verront ceci :

Le corps

Sans doute la partie la plus importante, mais aussi la plus compliquée. C'est là où les bases de l'HTML vont vous servir. Effectivement, tout le corps du Devblog est composé de 2 listes.
En HTML, une balise nous permet de créer des listes. C'est la balise <ul>. Mais cette balise ne marche pas toute seule. Il faut qu'elle soit suivie de la balise <li>. Elle a pour but de faire comprendre à Ghost que c'est un nouveau point de la liste. Attention, ne pas oublier de fermer la balise. Après avoir écrit votre point il faut terminer votre phrase par la balise </li>. Voici un exemple :

<h2 style=color:#FE9A2E> NOUVEAUTÉS :</h2>
<ul>
   <li>
      <strong>Lorem ipsum dolor</strong> <!-- Sous-catégorie -->
   </li>
   <ul class="a"> <!-- Liste de ce qui à été modifié -->
       <li>
             <strong>[<font style=color:green>+</font>]</strong> Lorem ipsum dolor.          
       </li>
   </ul>
</ul>

Dans l'exemple ci-dessus, vous pouvez voir qu'il y a deux listes embriquées l'une dans l'autre. Effectivement, la première balise <ul> ouvre la liste comportant le tire du jeu (dans notre exemple), et la deuxième balise <ul> ouvre la liste comportant les ajouts faits pour ce jeu (toujours dans notre exemple). N'oubliez pas de fermer les balises (</li> et </ul>), sinon des bugs graphiques vont se créer.

La Conclusion

Pour cette partie, le principe reste le même que pour l'en-tête. Les conclusions sont toujours les mêmes vous pouvez donc faire un simple copié collé de ce qui suit :

<p>
    <em>
        N'oubliez pas ! Aidez-nous à améliorer le serveur. Pour cela <a href="https://feedback.erisium.com/" target="_blank">envoyez-nous tous les bugs</a> que vous rencontrez sur Erisium.
        <br>
        Et n'hésitez pas à nous proposer des améliorations sur le DevBlog en commentaire, chaque proposition sera étudiée par notre équipe.
        <br>
        Suivez nous sur <a href="https://twitter.com/erisium" target="_blank">Twitter</a> pour ne rater aucune information sur Erisium !
    </em>
</p>

Le patterne de base du DevBlog reste disponible en entier, dans les articles en rédaction.

III) Heberger une image sur Ghost :

Compresser les images

Avant d'intégrer des images sur vos posts il faut les compresser. Effectivement, il faut penser à nos lecteurs qui ont des petites connexions. C'est toujours très énervant les pages web qui mettent longtemps à charger. Nous ne voulons pas que cela se produise sur le DevBlog, c'est pour cela que nous vous demandons d'utiliser ce site : https://tinypng.com/
Quand vous aurez upload votre image sur ce site il vous suffit de la re-télécharger. Son poids sera alors plus petit. Et donc plus rapide à télécharger par les lecteurs.

Intégrer les images

En rédigeant des posts vous serez ammené à intégrer des images. Cependant, il n'est pas question d'upload les images sur des outils qui ne sont pas hébergés par Erisium.
Ghost est un outils très performant pour résoudre ce problème. Vous l'aurez compris vous pouvez donc héberger vos images via ghost. Il vous suffira de cliquer sur le bouton "upload image" en bas de votre page de rédaction de post.

A la suite de cela, vous verrez apparaitre un lien sur votre article :

Vous pouvez très bien laisser ce lien tel quel. Cependant, vous pouvez aussi utiliser ce lien différemment pour que vous puissiez changer la taille de vos images.
Pour cela, il vous faut copier le texte qu'il y a entre les parenthèses du lien donné par Ghost (surligné en jaune sur l'image en-dessous).

Ensuite, il vous suffit d'intégrer ce texte à une nouvelle balise. La balise <img>. Vous l'utiliserez ainsi : <img src=""/>
Vous n'aurez qu'a ajouter le texte copié entre les guillemets (""). Et votre image apparaitra de nouveau pour les lecteurs.
Vous pourrez ainsi changer très facilement la taille de votre image en ajoutant : style="width:100px", après les guillemets et ainsi modifier la valeur en pixel.

IV) Publier un post :

Maintenant que vous savez tout ce qu'il faut savoir pour rediger un post, et que votre post est prêt, il faut le publier à la vue des lecteurs.

Publication instananée

Pour cela, il vous faut cliquer sur : publish, en haut à droite de votre écran. Une petite fenêtre va apparaître.

Cochez la case : Set it live now. Puis cliquez sur : Publish. Et voilà votre post est en ligne !

Programmé une publication

Nous utilisons très rarement la publication instantanée, nous préférons la programmer pour que le post sorte à une heure et une date très précise.
Toujours dans le menu de publication cochez la case : Schedule it for later. Vous avez maintenant la possibilité de choisir le jour et l'heure de sortie du post. Une fois cela effectué vous pouvez, cliquer sur : Schedule. Votre post est maintenant programmé pour le jour et l'heure souhaitée. N'oubliez pas de demander aux autres membres de l'équipe du DevBlog pour les horraires de publication.

Vous savez maintenant tout ce qu'il y a à savoir sur Ghost et le DevBlog d'Erisium. N'hésitez pas à relire ce post si vous avez des doutes sur une fonctionnalité. L'équipe du DevBlog reste à votre disposition si vous avez la moindre question.