Formateur Wordpress Toulouse

 

FORMATEUR DIGITAL TOULOUSE

 

support wordpress

Image 034

 

Un tiers deux tiers
Le nombre d'or 2 tiers 1 tiers ; le nombre d’or est une règle à respecter si vous voulez mette en avant une information, le personnage ci-dessous est positionné à un tiers de la largeur de l’image.

 

Image 035 

Le cadrage
​ Le « cadrage » peut être l'action de choisir ce qui entre dans les limites du cadre de l'image en photographie ou en cinéma et vidéo ou le résultat de cette opération4, l'un des éléments de définition d'un plan. En audiovisuel, le cadreur est responsable du cadrage, qui est presque toujours définitif. En photographie, on le modifie après la prise de vue par « recadrage » pour mettre en évidence un sujet.


Image 036

La réalisation d'une image photographique sur un sujet donné se décompose en choix d'un format d'image parmi ceux offerts par les fabricants d'appareils photos et de pellicules, en choix de l'orientation, horizontale ou verticale, en détermination d'un point de vue et d'un angle de vue. En photographie, on peut revenir partiellement sur certaines de ces décisions au tirage ou à la post-production numérique. Ces opérations qui répartissent les éléments du sujet à l'intérieur du cadre constituent la composition picturale des images photographiques.
Coupez le haut de la tête pour faire ressortir les informations essentielles

Image 040

 

E-commerce : le cerveau reconstruit les informations manquantes et suscite l’intérêt

 

Image 037

 

Photographiez les profils horizontalement

Le format vertical est le format des pros

 

Image 039

Le sourire n'est pas une obligation

 

 Image 041

 

Ne photographiez pas un portrait les épaules en face de l'appareil

 

Image 042

 

Le sens de l'information
Le sens de la photo : pensez à avoir une photo dont le sens part vers la droite et la gauche.

Préparez la page de couverture

 

 

 

Mettez une bannière qui reflète votre entreprise, attention au droits à l’image, si vous récupérez des photos sur la toile.

Voici un lien pour obtenir des images de couvertures : http://facebook.couverture.free.fr/

 

Ce qu'il ne faut pas  faire

Ne pas avoir une image de profil, les pages sans photos de profil ne suggère pas l’intérêt des internautes

Avoir une image trop exotique

Image 033

Le design plat ou flat design est un style de design d'interface graphique caractérisé par son minimalisme. Il se base sur l'emploi de formes simples, d'aplats de couleurs vives et de jeux de typographie.
Ce style s'inspire notamment du style typographique international1.
Il peut présenter plusieurs atouts :
il facilite la conception d'interfaces s'adaptant à la surface d'affichage (sites Web adaptatifs) ;
son usage d'aplats de couleurs permet de meilleurs taux de compression ; et,
il se prête bien aux images vectorielles, qui rejoignent ces avantages (changement de taille sans perte de qualité + légèreté des fichiers).

Site responsive

Image 031
Plus personne ne doute aujourd'hui que l'usage des smartphones est en train d'exploser. De plus en plus de personnes visitent aujourd'hui des sites web depuis leur navigateur mobile. Sur le Site du Zéro, déjà plus de 5% des visiteurs viennent depuis un appareil mobile. Ils étaient la moitié (2,5%) un an plus tôt.
Et pour Google
https://search.google.com/test/mobile-friendly?hl=fr

 

Image 032

La couleur et le genre

 

Le sexe de vos visiteurs a une influence sur leurs préférences en terme de couleurs. Quand vous réfléchissez à la palette de couleurs de votre site, gardez à l’esprit ce qui suit :

Les femmes ont tendance à aimer le bleu, le violet, le vert et le rouge, mais pas le orange, le marron, le gris ni le jaune. quelles sont les bonnes couleurs pour un public féminin ?

Les hommes ont tendance à aimer le bleu, le vert, le noir et le rouge, mais pas le marron, le orange, le jaune ni le violet. quelles sont les bonnes couleurs pour un public masculin ? En ce qui concerne les nuances, les hommes préfèrent en général les nuances foncées (le mélange d’une couleur avec du noir), tandis que les femmes préfèrent les nuances claires (le mélange d’une couleur avec du blanc). Les hommes ont aussi tendance à préférer les couleurs vives, tandis que les femmes préfèrent les couleurs douces. Attention, bien que tirées de recherches scientifiques (ici et là) ces informations ne sont pas des règles universelles et ne seront pas adaptées à tous les contextes.

 

La règle des trois couleurs est un commandement sacré.

Image 027

Ne dépassez pas trois couleurs pour un site, toutefois il existe des cas particuliers dans le cas des teintes. le noir et le blanc sont des teintes alors que le rouge, le bleue sont des couleurs.

Image 028

Symbolique des couleurs

Le noir et le blanc ne sont pas considérés comme des couleurs. Ils sont très peu présents dans la nature à l’état pur. On peut donc facilement les associer avec n’importe quelle couleur.

Le gris, très neutre, s’accorde aussi avec beaucoup de couleurs.
Privilégier toujours les couleurs plus sombres pour le bas.Un site intéressant pour aller plus loin sur les couleurs : http://www.code-couleur.com/

 

Tableau récapitulatif sur la symbolique des couleurs

 

ROUGE

BLEU

VERT

JAUNE

BLANC

Force
Passion
Puissance
Interdiction
Danger
Virilité
Courage
Action
Force

Paix
Vertu
Immatérialité
Méditation
Sagesse
Rêverie
Confiance
Bonté
Calme
Sécurité
Foi
Féminité

Espérance
Nature
Immortalité
Repos
Foi
Jeunesse 
Fécondité
Satisfaction
Calme

Science
Conscience Idéalisme
Action
Luminosité
Orgueil
Jalousie
Calme
Sécurité

Pureté
Innocence
Chasteté
Richesse
Silence

 

OR/ARGENT

ORANGÉ

VIOLET

GRIS

NOIR

Immortalité
Richesse 
Gloire (or)
Respect (argent)
Dignité (argent)

Energie
Ambition
Enthousiasme
Imagination
Richesse
Honneur

Politesse
Jalousie
Mystère
Spiritualité
Mélancolie 
Tristesse
Modestie
Religion 
Inconscient
Secret
Ténèbres
Mort
Piété
Noblesse

Sobriété
Tristesse
Modernisme
Peur
Monotonie

Mort
Deuil
Nuit
Mystère
Monotonie
Tristesse
Détresse
Angoisse
Noblesse
Distinction
Élégance
Silence

 

 

Symbolique des couleurs par civilisations

 

ROUGE

BLEU

VERT

JAUNE

BLANC

Chine

Joie
Mariage

Paradis
Légèreté

Dynastie Ming
Paradis
Légèreté

Naissance
Santé
Force

Mort
Pureté

Egypte

Mort
Méchanceté
Désert

Vertu
Vérité
Fidélité
Immortalité

Fertilité
Force
Islam

Joie
Prospérité

Joie
Fête

Etats-unis

Danger

Masculinité

Sécurité

Lâcheté

Pureté

France

Anarchisme
Communisme

Liberté
Paix
Royauté

Criminalité

Temporalité

Monarchie
Neutralité

Inde

Vie
Créativité

...

Prospérité
Fertilité

Succès

Mort
Pureté

Japon

Colère
Danger

Méchanceté
Bassesse

Futur
Jeunesse
Énergie

Grâce
Noblesse

Mort

Source : CRIM formation - Ecole polytechnique de Montréal

 

 

Les outils et palettes de couleurs à votre disposition

 

La signification de vos couleurs n’est pas tout, il faut aussi choisir des couleurs qui vont bien ensemble. Si vous avez besoin d’aide pour choisir ces combinaisons de couleurs, plusieurs outils sont à votre disposition :

  • Kuler - Cet outil très bien conçu permet de choisir des couleurs accordées selon plusieurs règles différentes.
  • ColourLovers - Ce site vous propose des palettes de couleurs déjà composées et prêtes à l’emploi !
  • 0 to 255 - Vous avez identifié votre couleur principale mais avez besoin de couleurs complémentaires ? Ce site peut vous aider !
  • Colrd - Ce site vous propose de nombreuses palettes de couleurs basées à chaque fois sur des images.
  • Multicolr Search Lab - Indiquez les couleurs de votre site, ce moteur de recherche malin se charge de trouver les images qui correspondent. Attention : vérifiez bien que vous avez le droit d’utiliser les images que vous trouvez avant de le faire.

Association des couleurs

 

Se servir du site "Colourlover" pour associer des couleurs

Vous pouvez aussi vous servir du site " www.colourlovers.com" pour vous aider à choisir les couleurs de vos interfaces.

Connectez vous sur ce site, cliquez sur la loupe du moteur de recherche interne, dans le formulaire ci-dessous saisissez un code couleur ou un mot-cles , le site vous fera des propositions de couleurs.

Image 029

 

5 combinaisons de couleurs à ne jamais utiliser sur votre site

 

Quand vous sélectionnez les couleurs composant votre palettes, souvenez-vous aussi que certaines combinaisons sont à éviter sur vos pages. Voilà les principales d’entre elles :

 

Jaune et vert

 

Même si la combinaison de ces deux couleurs attire l’attention, surtout dans leurs déclinaisons les plus vives, elle est aussi très énervante et souvent illisible. Ces teintes sont de plus trop proches pour être utilisées côte à côte.

 

Vert et Rouge

 

Utilisable à la limite pour des décorations de noël, ces couleurs ne doivent pas être associées sur internet. Elles détonnent et rendent tout texte difficile à lire. Le contraste élevé provoqué par cette association de couleurs semble faire vibrer textes et images, ce qui fatigue rapidement les yeux.

  

Violet et Vert

 

Assez percutant pour capter l’attention de tout le monde, mais trop dur à lire et fatiguant pour les yeux, comme le vert et le rouge précédemment.

 
Rouge sur Noir
 

Parfait pour un film sur les vampires, à éviter dans toutes autres situations. Du texte rouge sur un fond noir est très difficile à lire. En règle générale, il est préférable d’éviter d’utiliser un texte coloré sur un fond noir.

  

Bleu et Rouge

 

Deux couleurs primaires qui n’ont rien à faire ensemble sur un site internet. Utilisées ensemble, elles provoquent la sensation de vibration évoquée précédemment, et rendent tout texte quasi impossible à lire.

 

 

Ne dépassez pas trois polices différentes sur un site, exemple une pour le titre du site, une pour le titre des pages, une pour le texte

https://www.google.com/fonts est l'adresse d'un site qui peut vous rendre service. Il suffit de choisir une police de copier le code et de le mettre dans le fichier CSS de votre site.

 Image 023

Exemple de code généré par Google font à insérer dans votre site

 Image 024

Image 025

 

Astuce : Comment reconnaître la police d'une image

Sur ce site vous pouvez uploader une image, elle reconnaitra la police dessinée sur cette image.
https://www.myfonts.com/WhatTheFont/

 

Image 026

 

Analyser et fabriquer l'arborescence de votre site

Voilà des outils intéressants qui vont vous permettre de réaliser l'arborescence de votre site, ainsi vous pourrez le faire valider par votre client.

 

 

MindMup 2

MindMup est une application en ligne de Mind-Mapping (cartes mentales) libre et gratuitecomme ses concurrents Framindmap ou Freemind. MindMup dispose d'une interface trés dépouillée, avec des menus uniquement en anglais à ce jour.  Des extensions en option permettent de personnaliser la barre de menu.
Le principal atout de MindMup est son mode collaboratif. Chaque carte peut être ouverte et partagée sur Dropbox ou Google Drive. Il est également possible d'importer un fichier Freemind dans l'interface. MindMup est plus particulièrement à l'aise en mode collaboratif avec Google Drive. En effet il est possible de partager en temps réél son travail via la commande "Collaboration" puis "Invite collaborators". Un simple saisie d'adresse électronique du collaborateur permet de lui envoyer une invitation...
 Principales fonctions :
 Partage : vous pouvez accéder à vos données n'importe où, à partir de n'importe quel appareil via le stockage en nuage gratuit et public pour Mindmaps. Il est possible d'enregistrer les cartes mentales privées sur Google Drive , avec accès détaillé et le contrôle de partage. l'inscription n'est pas nécéssaire.
 Productif : l'interface utilisateur s'adapte automatiquement aux écrans tactiles ou ordinateurs de bureau / systèmes d'ordinateurs portables. Sur les ordinateurs de bureau, toutes les opérations de carte ont des raccourcis clavier . Sur les appareils mobiles, les barres d'outils s'adaptent et les boutons deviennent plus grands. Il est possible de masquer tous les menus et barres d'outils pour tirer le meilleur parti de votre écran.
 Opensource : MindMup est libre, opensource, sans publicité ou spam. L'outil Freemind mindmap import/export permet aux utilisateurs d'importer et exporter des cartes.

 

 

 

 

Write Map   (gratuit pour trois plans de site)

 

 

Les règles de base de votre IHM et graphisme web

La règle du nombre d'informations :
Ne dépassez pas 19 informations par interface, en effet c'est le nombre maximum que le cerveau peut enregistrer à la fois.

 

Prévoir le contenu de votre site

 

Les images

Pour les images de vos articles

Les images présentes dans une page est un critère pris en compte dans Google, pour cette raison n'hésitez pas à en ajouter dans certaines conditions :

La taille des images doit être la plus proche (en pixel) que celle que vous avez insérée. (ne mettez pas une image qui fait 1000 pixels de large alors que la taille définitive doit être de 350). En résumé elle doit être la plus légère possible.

Vous devez privilégier le format JPG plutôt que le format Png, en effet le poids est plus léger dans ce format.

Le nom des images doit contenir des mots clés, par exemple "plombier-toulouse.jpg" évitez les accents et les espaces entre les mots
Saisissez la balise "alt" de vos images car elle est employée pour les malvoyants.

Les images: règles de nommage

Dans un site Internet La page « mentions légales »du site doit contenir au moins: 

La raison sociale
Le siège social
Un numéro de téléphone
Le nom du directeur de la publication et/ou du responsable de la rédaction
Et s’il y a lieu, le capital social et le numéro d’inscription au registre du commerce et des sociétés (RCS).

 

Le cas d’un site Internet édité par une personne physique La page « mentions légales » du site doit contenir au moins :

Nom Prénoms
Adresse du domicile
Numéro de téléphone
Le cas échéant, il faut ajouter le numéro d’inscription au registre du commerce et des sociétés (RCS) ou au répertoire des métiers.
«Il est néanmoins possible de garder son anonymat, dès lors que les coordonnées exactes de l’éditeur ont été transmises de façon correcte à l’hébergeur.
C’est alors l’hébergeur qui sera tenu de communiquer les information sur l’éditeur, mais uniquement dans le cadre d’une procédure judiciaire.»

Le cas d’une boutique de vente en ligne

 Pour installer Joomla 3.5, il faut préparer vos access, c'est à dire:

  • Les codes "ftp" pour déposer Joomla sur votre hebergement
  • Les codes de la base de données de votre hebergeur
  • Un nom de domaine ou l'url d'acces a votre site
  •  Allez télécharger la dernière version de Joomla sur le site : https://www.joomla.fr/ 



  • Une fois téléchargé, creez un dossier dédié sur votre ordinateur, déposez l'archive et dézippé la.

    dezipper joomla



  • Ouvrez le logiciel "Filezilla" ou un autre paramétrez les code d'acces "ftp" fournis par votre hébergeur et déposez l'ensemble des fichiers que vous avez dézippé à la racine de votre site.

    transfert ftp joomla

  • Ouvrez l'url de votre site, renseignez le formulaire avec les codes de la base de données fournis par votre hebergeur:

    install joomla 1

    Etape : - Configuration
    1 – Choisissez la langue souhaitée pour effectuer l’installation.
    2 – Saisissez le nom de votre site.
    3 – Saisissez une description de votre site, utile pour le référencement (ce paramètre pourra être rempli après l’installation de Joomla!).
    4 – Saisissez votre e-mail
    5 – Saisissez votre identifiant. Par défaut cet identifiant est “admin”, si vous installez Joomla! sur un serveur distant, il est grandement conseillé d’utiliser un autre identifiant (voir le chapitre sécurité). Si vous installez Joomla! en local, vous pouvez laisser “admin”.
    6 – Saisissez et confirmez votre mot de passe (voir le chapitre sécurité).
    7 – Vous pouvez choisir de verrouiller l’accès au public une fois l’installation terminée.

    install joomla 2

Etape : - Base de données
A cette étape, Joomla! va créer la base de données. vous devez créer cette base de données au préalable, il vous suffit ensuite d’entrer les identifiants fournis par votre hébergeur.
1 – Le type de base de données. 
2 – Identifiants de la base de données 
3 – Joomla! génère aléatoirement un préfixe de table (de 5 caractères), vous pouvez le modifier si vous le souhaitez.
4 – Si vous avez une ancienne installation de Joomla!, sur la même base, vous pouvez choisir de sauvegarder ou de supprimer les tables de cette installation

install joomla 3 1

install joomla 3 2

install joomla 3 3 

Etape : - Vue d’ensemble
1 – Choisissez d’installer ou non les données d’exemple de Joomla!.
2 – Vous pouvez choisir d’envoyer les données de configuration de cette installation par mail. 

install joomla 4

install joomla 5

  • Supprimez le dossier "installation"
  • Votre site est prêt pour l'aventure.

Informations

André Debaisieux

Consultant formateur Web

Toulouse

06.30.00.91.44

andre@formateurweb.fr

Nous suivre

facebook linkedin youtube twitter instagram

Certifications

   certification cqp   LOGO QUALIOPI ACTION DE FORMATION opquest 

arapl-toulouse.jpg    icdl.jpg

  

We use cookies

Nous utilisons des cookies sur notre site web. Certains d’entre eux sont essentiels au fonctionnement du site et d’autres nous aident à améliorer ce site et l’expérience utilisateur (cookies traceurs). Vous pouvez décider vous-même si vous autorisez ou non ces cookies. Merci de noter que, si vous les rejetez, vous risquez de ne pas pouvoir utiliser l’ensemble des fonctionnalités du site.