Artistique Yaoi

Un forum axé sur le yaoi mais dans un domaine artistique. C'est-à-dire, qu'ici sera regroupé toutes les formes d'art yaoi, que ce soit dessin, graphisme, littérature, et bien d'autres...
 
AccueilAccueil  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

Partagez|

TUTO: Créer une gazette de news

Voir le sujet précédent Voir le sujet suivant Aller en bas
AuteurMessage
avatar
Aëlhëann

Apprentis

Messages : 193
Date d'inscription : 30/12/2012
Age : 27
Localisation : Paris

MessageSujet: TUTO: Créer une gazette de news Lun 5 Mai - 13:38


 

Créer une gazette

Auteur: Aëlhëann

Html5/CSS3

Niveaux: Moyen

Temps: 2-3h


 

 

 
Créer une page HTML

 

Dans ce premier tutoriel nous allons voir commencer créer une page HTML pour votre forum. Notre exemple consiste a créer une page de journal pour un RPG afin de partager des annonces et news de manière original. Pour ce tutoriel nous allons avoir besoin des langage HTML5 et CSS3 pour intégrer la maquette préparée sous Photoshop. Des bases en intégrations sont un plus mais ne sont pas indispensable, vous pourrez posez toutes les questions que vous souhaitez en répondant a ce topic.






Idée

Dans ce tutoriel nous allons voir comment créer une page HTML complète pour présenter une page de journal pour un forum RPG et présentant ses news. Vous aurez besoin de quelques bases en HTML et CSS néanmoins si vous avez des questions n'hésitez pas à les poser à la suite de ce topic.

Pour découvrir l'intégralité du tutoriel et ses code vous devrez répondre à celui-ci, une fois votre message posté les code apparaîtrons. N'oubliez pas, si vous souhaitez soutenir Art Yaoi placer notre logo sur votre site ou forum.

   


Sommaire



  • 1. Mockup et maquette
  • 2. Créer une page HTML

    • Méthode chez ForumActif
    • Méthode avec un hébergement personnel


  • 3. Initialiser sa page
  • 4. Système de grille
  • 5. Ajout du Contenu
  • 6. Mise en forme
  • 7. Pour aller plus loin





1. Mockup et maquette



Après avoir réfléchit aux informations que l'on souhaite présenter dans cette page nous devons faire une maquette. Je commence généralement par un croquis griffonné ou un mockup puis je passe sur Photoshop pour créer les éléments graphique.

Voici le mockup crée avec le logiciel Balsamiq Mockup:


tuto graphisme codage art yaoi forum

Il a été réalisé grâce a une grille afin de faciliter l'intégration:


tuto graphisme codage art yaoi forum

Puis avec Photoshop on peut créer la maquette complète:

tuto graphisme codage art yaoi forum
cliquez dessus pour voir l'image en grand





Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
Aëlhëann

Apprentis

Messages : 193
Date d'inscription : 30/12/2012
Age : 27
Localisation : Paris

MessageSujet: Re: TUTO: Créer une gazette de news Lun 5 Mai - 13:38




Partie 2. Créer une page HTML


Pour commencer nous devons crée le document (ou page) HTML, pour celà il existe plusieurs méthodes notament si vous voulez l'heberger vous-même (vous devez alors disposer d'un hergement chez ovh, 1and1 ou autre) ou si vous souhaitez utiliser ForumActif pour cela.

Nous allons voir les deux méthodes.


Méthode chez ForumActif


Pour créer une page chez ForumActif il faut se rendre dans la partie backoffice c'est a dire le panneau d'administration.

Forum>Panneau d'administration>Modules>Gestion des pages HTML

Sélectionnez "Création en mode avance(HTML)
Indiquer un titre a votre page
Puis cochez "Non aux questions "Voulez-vous utiliser le haut et le bas de page de votre forum ?" et Utiliser cette page en tant que page d'accueil ?"
Valider.
Votre page HTML est alors crée et vous disposez de son url qui ressemble à :
nomdevotreforum/h1-titre de la page

Pour modifier la page dans la suite de ce tutoriel il suffit de cliquer sur l'engrenage (html) de votre page.


Méthode hebergement personnel


Si vous souhaitez herberger vous même votre page et pourquoi pas faire un mini site vous devez disposer d'un hebergement et d'un nom de domaine.

Nous allons voir comment organiser les fichiers d'arborescence qui seront ensuite envoyé sur l'hébergeur.

Chacun a sa méthode pour le faire néanmoins cette structure vous permet d'organiser correctement les fichiers de vos sites.

Créer un dossier "www" dans le quel vous crée 4 dossiers (css, script, video, img), dans le dossier "img" créez deux sous-dossier (icon_social et partenaires)

Dans le dossier "css" créer deux fichier css (reset.css et style.css)
et créer le fichier index.html dans le dossier www

Voilà vous avez la structure pour continuer dans ce tutoriel.

Si vous avez des questions ou besoin de quelques précisions n'hésitez pas à les poster à la suite de ce tutoriel.



Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
Aëlhëann

Apprentis

Messages : 193
Date d'inscription : 30/12/2012
Age : 27
Localisation : Paris

MessageSujet: Re: TUTO: Créer une gazette de news Lun 5 Mai - 13:39




Partie 3. Initialiser sa page


Maintenant, que vous preniez la méthode de ForumActif ou d'un hébergement personnel le code sera pratiquement identique. Je vous indiquerai les petites différences mais rassurez-vous ce n'est pas compliqué.


Doctype, Head et body


Sur internet il est possible de déposer de nombreux types de fichiers différents nous devons donc préciser que nous créons une page html. Pour cela nous allons utiliser en plus de l'extension (.html) ce qu'on appelle le doctype, c'est un morceau de code a placer dans toutes vos pages web et qui permet a votre navigateur d'afficher correctement votre page.



En détail



On complète et on améliore le référencement


Nous allons étoffer ce début de code en rajoutant quelques balises dans le Head afin d'ajouter des mots clé, une description...




En détail




On initialise aussi le CSS





Cadre et fond


Pour commencer a modifier notre page qui est a ce stade encore blanche nous allons ajouter le motif de fond (background) ainsi que le cadre blanc représentant la page de la gazette.


HTML

Dans le corps de la page, entre les balise body nous allons ajouter une div, celle-ci représente le cadre blanc contenant les informations de la gazette.



Rappel Id et Class:


Les Id et Class servent à lier les balises html et le css qui y est appliqué.
Les id ne peuvent être utilisées qu'une seule fois par pages tandis que les classes peuvent être utilisées autant de fois qu'on veut par page.


CSS


Dans la feuille de style nous allons ajouté quelques lignes:




body: Ici nous appliquons des styles a toute la page, en ajoutant l'image de fond.

#wrapper: Le wrapper représente la page de la gazette, nous lui donnons une largeur, des marges interieur, on la centre et une couleur de fond.





Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
Aëlhëann

Apprentis

Messages : 193
Date d'inscription : 30/12/2012
Age : 27
Localisation : Paris

MessageSujet: Re: TUTO: Créer une gazette de news Lun 5 Mai - 13:39



Partie 4. Système de grille


Depuis quelques temps il est courant d'utiliser des systèmes de grilles venant de l'imprimerie que l'on adapte au web.

C'est quoi ? Et a quoi ça sert ?

Ces grilles sont fait de colonnes , généralement de 6-12-24 colonnes mais ça peut être plus ou moins selon les besoins. Ce système permet de structurer les pages et créer des design efficace en facilitant la lecture des sites. De plus lorsque vous voulez créer un site responsive (qui s'adapte sur destok, tablette, smartphone) les systeme de grilles sont très utile.



Néanmoins pour ceux qui n'ont encore jamais utilisé de système de grille ou en veulent une simple, on peut la créer entièrement et sois même. C'est ce que nous allons faire maintenant.

Tout d'abord rappelez-vous, la div wrapper est celle qui va contenir toutes notre grille, c'est a l'intérieur de celle-ci que nous allons crée nos lignes et colonnes qui serviront a recréer la structure du mockup que nous avons fait.


Comprendre les grilles


Un schema est souvent plus explicite alors aidons de celui ci-dessous.
Vous pouvez voir que nous allons créer plusieurs ligne appelées -row- qui vont chacune contenir les colonnes dont nous avons besoin.

tuto art yaoi forumactif grille

Dans notre page html nous allons recréer ces différents éléments.

On va créer petit à petit la structure de notre page en utilisant les balises html5 adaptées.

On commence par les trois grands blocs de notre page:

tuto art yaoi html5

Pour cela placez ce code dans la div wrapper.

Code:

<!-- //////////// Entete //////////// -->
  <header class="row"></header>
  
  <!-- //////////// Corps de la gazette, ou contenu //////////// -->
  <section class="row"></section>
  
  <!-- //////////// Pied de page //////////// -->
  <footer class="row"></footer>



Ce bout de code représente les gros blocs coloré sur l'image précédente, nous y avons ajouté des classes -row- car ce sont des lignes entières.




Ensuite nous allons ajoutés les lignes intermédiaire les div row.



Il est temps de s'occuper des colonnes.
Si on regarde attentivement les schemas qu'on a fait lors des mockups on se rend compte que nous avons une grille possédant des blocs:



Nous utiliserons ces noms pour identifier nos class.

Nous pouvons donc représenter l'image suivante:

tuto art yaoi forum forumactif

Avec ce morceaux de code:



Il est normale de ne rien voir sur votre page dans le navigateur a par le motif de fond et le wrapper blanc, a ce moment. Ne vous inquiétez pas ça arrive bientôt.


Une couche de css


Nous allons maintenant crée le css pour le systeme de grille.

Placez ce code dans votre feuille de style(css).



Maintenant nous définissons la largeur de nos colonnes et nous leur demandons de se comporter en tant qu'élément flottant afin qu'elles se placent les unes a coté des autres dans nos lignes (ou row):



Notre système de grille est prêts nous allons maintenant pouvoir l'utiliser et ajouter du contenu a notre page.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
Aëlhëann

Apprentis

Messages : 193
Date d'inscription : 30/12/2012
Age : 27
Localisation : Paris

MessageSujet: Re: TUTO: Créer une gazette de news Lun 5 Mai - 13:40



Parties 5. Ajout du Contenu


Bien, vous êtes encore là ? Félicitation!

Nous pouvons donc continuer, nous allons ajouter beaucoup de code maintenant car on va ajouter tous les textes et images dans le html. Ensuite nous n'aurons plus qu'a nous concentrer sur le css.

D'abord on va commencer par créer des divs de contenus a l'interieur des div formant les colonnes.
On va procéder par étape.

Header



Ici nous avons donc ajouté le logo, les informations de type prix, date, numero ainsi que la baseline de la gazette.

Nous pouvons passer au corps de la gazette.

Section



Et enfin pour le pie de page:

footer




Attention aux liens
Pensez a actualiser les liens des images.


Si on récapitule voici le code HTML complet:



Dernière édition par Aëlhëann le Lun 5 Mai - 13:56, édité 1 fois
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
Aëlhëann

Apprentis

Messages : 193
Date d'inscription : 30/12/2012
Age : 27
Localisation : Paris

MessageSujet: Re: TUTO: Créer une gazette de news Lun 5 Mai - 13:40



Partie 6. Mise en forme


C'est bien beau tout ce HTML mais on doit styliser tout ca avec un peu de css.

Voici ce que j'ai utilisée:



C'est presque terminé!



Typographie et GoogleFonts


Depuis quelques temps Google a mis en place un service de typographie à utiliser sur vos sites web. C'est très facile a mettre en place.

Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
Aëlhëann

Apprentis

Messages : 193
Date d'inscription : 30/12/2012
Age : 27
Localisation : Paris

MessageSujet: Re: TUTO: Créer une gazette de news Lun 5 Mai - 13:40



Partie 7. Pour aller plus loin


Ce tutoriel peut vous servir de base pour créer vos propres grilles, vous pouvez en modifiant ce modèle augmenter ou réduire le nombre de colonnes.

Grace a ce système vous pouvez modifier facilement la structure de la page de gazette sans trop vous embêtez normalement et si vous souhaitiez rendre cette page responsive ce serait facilement faisable grâce aux media queries.
Nous verront peut-être ça selon les demandes dans un prochains tutoriel.

Enfin pour les plus téméraire on pourrait adapter ce tutoriel pour crée un theme Wordpress spécialement pour la gazette de votre forum, ou en faire un template de page.

Voilà j'espère que ce forum vous aura apprit des choses et vous aura plu.

Merci de l'avoir suivi et bravo a ceux qui ont eu le courage de le lire en entier =)

N'oubliez pas d'indiquer notre logo sur vos forums si vous reprenez la structure de cet exercice.


Merci et à bientôt =)


Si vous avez des questions ou besoin de quelques précisions n'hésitez pas à les poster à la suite de ce tutoriel.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur

Contenu sponsorisé




MessageSujet: Re: TUTO: Créer une gazette de news

Revenir en haut Aller en bas

TUTO: Créer une gazette de news

Voir le sujet précédent Voir le sujet suivant Revenir en haut

Sujets similaires

-
» [TUTO] Faire un cadre dégradé avec Photoshop
» [RESOLU]Je n'arrive pas a installer le news sense hd sur mon desire (deja rooter)
» [Tuto] Sacs pour BJD : Hermès p1 - Gucci p2 (news 4/10)
» [TUTO] Envoyer un message privé à un membre
» [TUTO][S-OFF] HBOOT AlphaRev 1.8 : passer en Full Root (Custom et Stock ROMs)
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Artistique Yaoi :: Rainbow Factory : Entraide pour forum rpg Yaoi :: Tuto, Dessin, Codage, Graphisme et autres :: Intégration :: Tutoriaux-