Balsamiq Mockups : Créer gratuitement les mockups de son site internet / app mobile

Tutoriel Balsamiq Mockups
Tutoriel Balsamiq Mockups
Rendu Balsamiq Mockups pour l’agence-web CHC

Balsamiq Mockups permet de créer des mockups. Un mockup permet de mettre proprement “sur papier” l’idée que vous avez de votre projet. De cette manière on pourra commencer le développement / la partie graphique beaucoup plus simplement.

Les mockups sont très sommaires, ils servent juste à projeter une idée que vous avez et la valider avec d’autres personnes. On voit beaucoup plus facilement les améliorations.

Tutoriel Balsamiq Mockups : Création d’une page d’accueil

Nous allons voir comment créer un mockup d’une page d’accueil de site internet.

Je vous laisse le ficher que j’ai fait en téléchargement libre.

Télécharger le modèle

 

Créer de nouveaux plans pour vos fenêtres

Balsamiq Mockups gérer ses fenêtres
Gérer les fenêtres sur Balsamiq

A gauche, vous allez pouvoir ajouter de nouvelles fenêtres. Chaque fenêtre comprend un nouveau plan de travail.

En plus de cela, vous allez pouvoir renommer chaque fenêtre. Pensez à créer une seule page par mockup / fenêtre.

Par exemple :

  • Page principale
  • Page de contact
  • Page d’article
  • Page de création de devis…
  • Etc
Balsamiq Mockups changer le nom d'une fenêtre
Changer le nom d’une fenêtre

 

 

 

 

 

 

 

 

 

Ajouter des éléments sur le plan de travail

Comme nous voulons créer une page de site internet, dans le menu tout en haut, sélectionner “Container“.

(*) Ce menu tout en haut vous permet de trouver tous les objets dont vous avez besoin (zone de texte, image, téléphone, navigateur, boutons…). Je vous conseille de regarder un peu tous les items pour vous donner de l’inspiration.

Balsamiq Drag and Drop
Déplacer les éléments sur la zone de travail

Simplement cliquer sur l’élément que vous souhaitez et déposez-le sur le plan de travail.

Vous pouvez redimensionner l’élément que vous venez d’ajouter en passant la souris sur un coin ou un côté.

(*) Vous pouvez également déplacer l’élément sur le plan de travail dès que vous voyez la “croix fléchée” (placez la souris sur les bords de l’objet).

Balsamiq Mockups redimensionner
Redimensionner un objet

Une bonne habitude à prendre est de verrouiller ce que vous avez mis en arrière plan. Que ce soit un téléphone ou un navigateur internet, cela vous permettra d’éviter de bouger ce fond.

Balsamiq Mockups verrouiller des objets
Verrouiller l’élément de fond

Ajouter de nouveaux objets sur votre plan de travail

J’appelle “plan de travail” la zone quadrillée où vous avez tous vos items. Dans “Common” j’ai trouvé énormément de choses comme le menu, les boutons

(*) C’est normal que votre wireframe ne ressemble pas à la maquette de ce que vous voulez ! Ce n’est pas le but, ici on essaye juste d’agencer aux mieux les éléments pour voir si c’est cohérent avec notre idée.

Balsamiq Mockups changer le texte
Modifier la taille et la forme du texte

Sur certains éléments, une fenêtre apparaîtra à droite pour personnaliser davantage l’élément.

Apache HTTPD & .htaccess : Comment ajouter / supprimer “www” de son URL ?

Rediriger son site internet vers www ou supprimer www de l'adresse de son site internet
Rediriger son site internet vers www ou supprimer www de l'adresse de son site internet
Rediriger ou non l’adresse de son site internet avec www

Supprimer “www” de son URL ? http://www.site.com -> http://site.com

Vous pouvez vouloir supprimer “www” de l’adresse de votre site internet. Sur certains noms de domaines,  c’est beaucoup plus esthétique.

https://twitter.com l’a enlevé, https://www.facebook.com l’a laissé…

Mais c’est à vous de décider, dans tous les cas cela n’enlève rien au référencement avec la redirection permanente 301.

Supprimer “www” de son URL via .htaccess

A la racine de votre site internet dans le fichier .htaccess, utilisez les lignes suivantes :

RewriteEngine On
RewriteCond %{HTTP_HOST} ^www\.(.+) [NC]
RewriteRule ^ http://%1%{REQUEST_URI} [L,R=301]

(*) Attention à la condition RewriteRule, elle est suivie de “http“, remplacez-le par “https” si votre site internet est sécurisé en HTTPS.

Passer son site internet WordPress en HTTPS

Pour rappel : Le certificat HTTPS est gratuit chez Cubis !

Supprimer “www” de son URL via VirtualHost

Pour ceux qui ont un serveur dédié et possibilité d’accéder aux VirtualHosts.

  • Sous Debian les vhosts se trouvent dans : /etc/apache2/sites-available/…
  • Sous CentOS, les vhosts se trouvent dans : /etc/httpd/conf.d/…

Choisissez une des 2 redirections suivant la sécurité de votre site internet.

Rediriger www vers non-www en HTTP

<VirtualHost *:80>
 ServerName www.example.com
 Redirect permanent / http://example.com/
</VirtualHost>

Rediriger www vers non-www en HTTPS

<VirtualHost *:443>
 ServerName www.example.com
 Redirect permanent / https://example.com/
</VirtualHost>

Ajouter “www” à son URL de site internet : http://site.com -> http://www.site.com

Maintenant si vous voulez rajouter “www” à l’adresse de votre site internet, c’est tout aussi simple (bien que la plupart du temps on nous demande de l’enlever…).

Rajouter www sur l’URL de son site web via .htaccess

RewriteEngine On
RewriteCond %{HTTP_HOST} !^www\. [NC]
RewriteRule ^(.*)$ http://www.%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

(*) Attention au http, mettre https si votre site internet est sécurisé HTTPS.

Ajouter “www” à son site internet via VirtualHost

Pour ajouter www à l’URL de son site internet en HTTP

<VirtualHost *:80>
    ServerName example.com
    Redirect permanent / http://www.example.com/
</VirtualHost>

Pour ajouter www à l’URL de son site internet en HTTPS

<VirtualHost *:443>
    ServerName example.com
    Redirect permanent / http://www.example.com/
</VirtualHost>
Sources utilisées (en anglais)

https://stackoverflow.com/questions/1100343/apache-redirect-from-non-www-to-www

https://stackoverflow.com/questions/2361499/how-to-always-remove-www-from-a-url-with-mod-rewrite

Comment bien choisir son nom de domaine pour son site internet ?

Comment bien choisir son nom de domaine ?

Comment bien choisir son nom de domaine ?

Le nom de domaine est ce qui va permettre aux utilisateurs d’accéder à votre site. De ce fait, il est important de bien le choisir car il est la première impression du visiteur  de votre site sur votre entreprise. Cela peut s’avérer être une tache aisé comme cela peut-être une vraie épreuve… Voici nos conseils !

Un nom simple à taper…

L’idéal pour votre nom de domaine est qu’il soit simple à taper afin d’être simple à retenir. Il vous faudra choisir un nom de domaine facilement reconnaissable et identifiable à votre entreprise.

Il est important que les utilisateurs puissent le taper, le retenir, et le partagé oralement sans aucune difficulté. De ce fait il est crucial d’éviter les noms de domaines avec deux lettres identiques consécutives, ainsi que ceux qui pourrait facilement être écrit avec des fautes d’orthographes.

Il serait préjudiciable de voir les internautes cherchant votre site finir sur celui d’un concurrent parce que votre nom de domaine est trop complexe.

Le rendre unique…

Le monde d’internet et son marché sont très peuplés, de ce fait il est nécessaire pour votre entreprise de se démarquer, et l’utilisation d’un nom de domaine unique n’est pas a négliger.

Entre il y a 20 ans et aujourd’hui le nombre de site internet c’est grandement multiplié et la diversité des noms de domaines a de fait été grandement divisée. Il vous faut aujourd’hui un petit plus pour sortir du lot, miser sur l’originalité de votre nom de domaine peut importe le sérieux du sujet de votre site internet.

Attention toutes fois, quand cela est possible à se maintenir aux 26 lettres de l’alphabet. Les noms de domaines contenant des chiffres, des caractères spéciaux sont plus difficile à taper, à communiquer oralement ou à mémoriser.

Bien choisir son extension…

Il existe de nombreuses possibilités d’extensions pour votre nom de domaine, cependant nous vous conseillons le .com. Aujourd’hui, plus de 50% des sites internets ont un nom de domaine avec l’extension .com, cela apportera une touche de sécurité et de normalité à votre site et ce malgré l’originalité de votre nom de domaine.

Evidemment, il ne faut pas laisser de coté l’extension du pays dans lequel se trouve votre entreprise. Si vous prônez le “Made in France“, il va de soi qu’il faut s’orienter sur un .fr, de même si vous êtes une organisation, il sera nécéssaire de s’orienter sur le .org afin d’être plus facilement identifiable.

Penser aux réseaux sociaux…

De nos jours, qui dit site internet, dit web-marketing et donc utilisation des réseaux sociaux (Facebook, Twitter, Instagram, Linkedin, Youtube,…). De ce fait il est important de vérifier la disponibilité de votre nom de domaine sur les différents réseaux sociaux que vous allez utiliser pour faire la promotion de votre entreprise.

Petite astuce maison : Le site Knowem est très utile pour cette tâche.

Attention aux marques déposées…

Un nom de domaine est libre mais cela ne veut pas dire qu’il ne fait pas le sujet d’un dépôt à l’INPI. De ce fait, pour ne pas porté atteinte à une marque déposée et encourir à des poursuites judiciaires, pensez à vérifier la disponibilité du nom de domaine que vous souhaitez acheté directement sur le site de l’INPI.

A savoir, le propriétaire d’une marque déposée peut vous poursuivre en justice si :

  • Votre nom de domaine est le même ou est très similaire à son nom de marque déposé.
  • Vous n’avez pas les droits légitimes pour ce nom de domaine.
  • Vous avez déposé et utilisé ce nom de domaine en mauvaise foi.

Conclusion : Comment bien choisir son nom de domaine ?

Un nom de domaine ne fait pas un site internet, en revanche il peut facilement détruire votre réputation et/ou votre entreprise. Il est donc important pour bien choisir son nom de domaine de penser à rendre celui-ci facilement mémorisable, tapable, et dictable ; d’utiliser la bonne extension en fonction de votre entreprise ; et surtout d’être votre marque !

Les icônes réseaux sociaux ne s’affichent pas sur mon site internet !

ERreur contenu bloqué par le client : ERR blocked by client

Mes icônes Facebook, Twitter, Google Plus etc ne s’affichent pas sur mon site web !

Vous avez mis en place des icônes pour mener sur votre page Facebook, votre compte Twitter ? Ou même d’autres réseaux sociaux ? Seulement ils ne s’affichent pas !

On ne parle pas ici de widgets “J’aime”, “Tweeter” ou “+1”, mais simplement de liens avec des images menant vers vos comptes et vos pages de réseaux sociaux.

Comment afficher les icônes des réseaux sociaux sur votre site internet ?

Certains bloqueurs de publicités bloquent également les réseaux sociaux, car considérés comme “nuisibles” sur une page internet et pouvant ralentir la bonne expérience de l’utilisateur sur un site internet.

AdBlocks propose de supprimer les réseaux sociaux en plus des publicités, d’autres le proposent également comme Ghostery. UBlock par exemple semble encore mitigé sur le sujet (surement du fait que son développement est opensource).

AdBlock Plus : Désactiver le blocage pour un site

Si le blocage vient d’un bloqueur de pubs (ce qui est fort probable), il vous l’affichera dans la console :

ERreur contenu bloqué par le client : ERR blocked by client
ERR : blocked by client, l’URL a été bloquée par une extension

Si le diagnostique est vérifié, voyons ensemble comment nous pouvons y remédier !

Comment afficher les logos des réseaux sociaux sur mon site internet ?

L’astuce est plutôt simple, il suffit de renommer les images sur le site internet en question. N’utilisez pas les noms “Facebook“, “Twitter“, “Instagram” etc sur vos images.

Choisir plutôt des noms raccourcis (de toute façon le nom des images n’influent pas le référencement !).

Avant :

facebook.png

Après :

logo_f.png

Les icônes des réseaux sociaux sont toujours bloqués !

Deuxième astuce (à faire avec la première), est de raccourcir les URL de vos liens  ! Voici un exemple assez simple avec Facebook.

Avant :

https://www.facebook.com/AgenceWebCHC/

Après :

https://goo.gl/dAfG4n

Si malgré ça vos images de réseaux sociaux ne s’affichent toujours pas, laissez-nous un message en commentaire.

 

Ce poste a été inspiré par la réponse que nous avons donnée forum CCM.

WordPress : Sauvegarder son site internet tous les jours (backup)

Sauvegarder son site internet Wordpress
Sauvegarder son site internet WordPress
Sauvegarder son site internet WordPress avec le plugin backWPup

Comment mettre en place la sauvegarde de son site internet WordPress

Faire des sauvegardes (backups) de son site internet devrait être obligatoire, je ne compte plus le nombre de personnes que je connais ayant perdu leur données en ayant dit “Je ferais des sauvegardes”.

Sur internet c’est encore plus vrai, car n’importe quel serveur peut crasher, et si votre hébergeur n’a pas de système de sauvegarde, vous l’avez dans l’os (chez Cubis nous sauvegardons les backups sur un autre serveur).

Un exemple simple. Vous faites une mise à jour de WordPress, dès lors, plus moyen d’accéder au site internet ni à l’administration ; votre site reste blanc. Si vous avez mis en place des sauvegardes, il sera bien plus rapide de restaurer votre site internet.

BackWPup : Sauvegarder son site internet WordPress tous les jours

Le plugin BackWPup permet de sauvegarder facilement son site internet WordPress sans connaissance techniques.

Dans BackWPup > Opérations, créer une nouvelle opération : je l’ai appelé Sauvegarde journalière.

Sauvegarder son site internet WordPress avec backWPup
Paramétrer la sauvegarde quotidienne de son site Internet WordPress

J’ai coché toutes les sauvegardes possibles

  • Sauvegarde de la base de données (essentiel)
  • Sauvegarde des fichiers (essentiel)
  • Export XML WordPress (permet d’exporter le contenu du site WP pour le réimporter dans une nouvelle instance de WP)
  • Liste des extensions installées (pour pouvoir les réinstaller facilement en cas de restauration)
  • Vérification des tables (optionnel, permet de vérifier si la base de données n’est pas corrompue)
Sauvegarder son site internet WordPress sur un autre espace
Déplacer sa sauvegarder WordPress par email, DropBox…

Sauvegarder dans le répertoire est la bonne chose à faire de base.

Le mieux est d’envoyer la sauvegarder sur un autre serveur (comme un FTP). DropBox permet de stocker gratuitement quelques gigas, mais je ne fais absolument pas confiance à ce service.

Enregistrer ensuite la nouvelle opération de sauvegarde quotidienne de WordPress.

Programmer la sauvegarde de son site internet WordPress

Dans l’onglet programmation, j’ai simplement indiqué une sauvegarde quotidienne de WordPress.

Sauvegarder son site internet WordPress tous les jours
Paramétrer la sauvegarder de WordPress tous les jours à 3h du matin

Lancer la sauvegarde manuelle de son site internet WordPress

Dans BackWPUp > Opérations, passez votre souris sur la sauvegarde que vous voulez tester et cliquez sur “Lancer la sauvegarde manuelle“.

Votre site sera alors sauvegardé et vous pourrez vérifier que votre système de sauvegarde fonctionne correctement.

WordPress en cours de sauvegarder via le plugin backWPup
Sauvegarde en cours de WordPress…