Trier par :
View:

Catégorie : web

Placeholder pour textes et images : créez des textes et images vides pour votre design !


Pendant la réalisation d’un site web, il est utile de mettre du contenu afin de mettre en place le design de ce dernier. Ce contenu n’a pas forcément besoin d’être compréhensible. Il peut s’agir :

  • d’un texte afin de montrer la police, des news, etc ;
  • d’images à placer dans le design.

 

Le problème de ce système est que le texte créé ainsi que les images seront supprimés une fois le graphiste ou le client passé par là. Prendre du temps pour créer du texte réaliste ainsi que de jolies images est donc une perte de temps et peut être rapidement coûteux pour une entreprise ! Mais des solutions existent… On appelle ça un placeholder.

 

Placeholder pour texte : lorem ipsum

Dans un premier temps il est utile de remplir un site web par des textes même si ceux-ci n’ont ni queue ni tête. Pour ce faire, il existe ce qui est appelé le lorem ipsum. Ce dernier permet d’aider à la mise en page et ressemble à du latin. De nombreux sites existent pour en générer  dont le très bon lipsum.com. Au milieu du site vous pourrez configurer la quantité de texte voulue :

Création de texte lorem ipsum

L’utilisation est simple et intuitive, vous choisissez la quantité de texte voulue et le type de texte : des paragraphes, mots, caractères ou listes. Une fois le texte généré vous pourrez l’intégrer à vitre site.

 

Placeholder pour images : fakeimg

Pour ce qui est des images, l’affaire peut sembler plus compliquée. Bien évidemment il est possible d’ouvrir un logiciel comme Paint et de générer une image, grise par exemple, aux dimensions que l’on veut. Cependant, qu’arrive-t-il si l’on décide de changer l’image d’un pixel seulement ? Puis finalement en ajouter 10 de plus ? Il faudrait encore ouvrir le logiciel pour changer l’image et perdre un temps fou ?

Des développeurs ont eu l’idée de créer un site contenant une API afin de créer des images le plus simplement du monde. Ce site s’appelle fakeimg.pl. Nous allons apprendre à nous en servir. Pour créer une image de 200×200 pixels, il suffit de se rendre à l’adresse suivante : http://fakeimg.pl/200×200/. Résultat :

Placeholder sous forme d'image

Pour obtenir une image aux dimensions différentes il suffit de remplacer le premier nombre « 200 » par la largeur voulue et le second par la hauteur voulue. Simple non ? Eh bien il est possible d’aller plus loin ! Pour l’instant, la couleur est grise mais il est possible de créer une image jaune par exemple : http://fakeimg.pl/400×200/fff000/. Résultat :

Placeholder custom : jaune et taille personnalisée

 

 

Vous l’aurez compris, il suffit de changer la valeur « fff000 » par la valeur hexadécimale de la couleur que vous souhaitez. Maintenant nous pouvons préciser la couleur du texte avec un autre paramètre : http://fakeimg.pl/400×200/fff000/000/. Résultat :

Placeholder custom : jaune et couleur de texte personnalisée

 

Là aussi, il suffit de remplacer le code « ooo » par la couleur du texte. Enfin, le texte peut a tout moment changer afin d’éviter que ce soient les proportions de l’image qui soient affichées. Il est aussi possible de changer la police du texte. Testons cela avec l’URL http://fakeimg.pl/350×200/ff0000/000/?text=Hello%20World&font=lobster :

Placeholder custom : rouge et texte personnalisé

 

Vous pouvez désormais utiliser ce site pour générer tout type d’images n’ayant pas besoin d’être graphiques. Pour les intéger sur votre site il y a 2 solutions : soit vous enregistrez l’image sur votre ordinateur, soit vous mettez le lien du site directement dans la balise « img » de la façon suivante :

<img alt="" src="http://fakeimg.pl/350x200/?text=World&font=lobster" />

Vous avez maintenant toutes les cartes en main pour mettre du contenu sur vos sites et vous concentrer sur les fonctionnalités et le design !

Créer son site e-commerce avec Thelia


Logo de TheliaLorsque l’on désire créer un site, on utilise souvent un CMS (Content Management System, soit en français Système de Gestion de Contenu). Ces derniers correspondent à des sites pré-construits. Il est par exemple possible en quelques clics, grâce à l’un des CMS les plus connus, WordPress, de créer un site de type blog pouvant également contenir quelques pages, etc. Dans cette article, nous allons voir comment créer un site e-commerce en quelques clics grâce à un autre CMS nommé Thelia.

 

1. Pré-requis

Avant de commencer à créer notre site, vous devez savoir comment utiliser un site en PHP, soit en possédant un serveur web, soit en sachant utiliser un logiciel tel que Wamp sour Windows, Mamp pour Mac ou Lamp pour Linux. Si vous ne savez pas comment utiliser un tel logiciel, je vous recommande ce tutoriel sur le Site du Zéro.

Nous allons également avoir besoin de télécharger le CMS en question. Pour ce faire, rendez-vous sur le site officiel, puis dans la zone de téléchargement. Téléchargez ensuite la dernière version stable. Celle-ci est affichée au dessus de toutes les autres. Lors de l’écriture de cet article, il s’agit de la version 1.5.1, il est possible que votre version soit supérieure mais la procédure sera la même :

Téléchargement du CMS Thelia

 

Une fois le fichier téléchargé, décompressez le et placez le dans le dossier local correspondant pour votre système (celui-ci porte généralement le nom www comme « /var/www » par exemple sous Linux, ou bien le dossier www du répertoire Wamp pour Window, etc.). Vous pouvez également renommer ce répertoire comme bon vous semble.

 

 2. Installation du CMS Thelia

A partir de maintenant, vous êtes supposés savoir comment lancer votre serveur local (wamp, lamp ou mamp) et vous avez placé Thelia dans le bon répertoire. Il vous suffit maintenant de vous rendre dans votre répertoire local avec un navigateur web (« http://localhost/ » le plus souvent) puis de cliquer sur le site correspondant à votre version de Thelia (le répertoire que vous avez décompressé précédemment). Vous devriez voir cette page :

Installation de thelia étape 1

Bravo, le plus dur est fait (si si). Pour lancer l’installation, cliquez sur continuer pour atteindre une nouvelle page affichant si tous les éléments sont corrects. Si c’est le cas, vous pouvez continuer et passer à l’étape suivante. Si ce n’est pas le cas et que votre version de PHP n’est pas la bonne, effectuez une mise à jour.

A l’étape suivante, renseignez vos identifiants de connexion à la base de données. Si vous travaillez en local, le serveur de base de données sera probablement localhost comme dans la capture d’écran ci-dessous. Si vous avez pris un hébergement comprenant une base de données chez un hébergeur comme OVH par exemple, vous pouvez retrouver ces identifiants dans votre espace utilisateur :

Installation de Thelia étape 2 - connexion à la base de données

Si vos identifiants ne sont pas corrects, Thelia vous affichera un message d’erreur. Il faut impérativement que ce dernier établisse une connexion à la base de données pour s’installer.

A l’étape suivante, si vous êtes en local, je vous conseille de remplir le champ « Vous pouvez aussi choisir de créer une base : » en donnant un nom propre à votre base de données, comme par exemple « vente_peluches » si vous voulez faire un site de vente de peluches 🙂 . Si vous êtes sur un hébergement, vous n’avez peut-être pas le choix et devrez utiliser l’unique base de données disponible. Une fois la base de données choisie ou créée (dans le cadre de cet article, la base de données s’appellera « site_test »), cliquez sur Continuer. Vous constaterez qu’il faudra un certain temps avant d’accéder à l’étape suivante. C’est normal car Thelia crée tout ce qui lui est nécessaire dans la base de données. D’ailleurs, si vous jetez un coup d’oeil à celle-ci, vous verrez qu’elle est déjà bien remplie :

Base de données Thelia

L’étape suivante est la plus importante. La plupart des champs sont implicites, cependant pour le dernier, n’oubliez pas de donner l’url exacte du site en question (et non pas seulement « http://localhost »). Voici pour ma part le résultat :

Installation de Thelia étape 3 - Configuration

Une fois l’installation terminée, Thelia vous demande de supprimer le répertoire install. Vous pouvez le faire sans hésiter :

Fin de l'installation du CMS TheliaSuppression du répertoire install

Je vous laisse ensuite visiter votre tout nouveau site ! Testez également la partie d’administration qui est très bien faite. Vous pouvez ajouter des catégories, sous catégories, des produits :

Aperçu de l'interface d'administration de Thelia

Les modifications sont directement visibles sur le site, notez que la gestion des inscriptions, connexions, du panier, etc. est déjà faite. Vous n’avez quasiment plus rien à faire !

Aperçu du résultat d'une recherche dans Thelia

3. Et maintenant ?

Afin de personnaliser votre site internet, vous devrez principalement modifier le design. Le plus gros du travail s’effectuera donc dans le répertoire template du site, notamment dans le fichier styles.css. Des connaissances en design et en CSS sont requise pour ce travail. Si vous souhaitez modifier la structure même du site (en modifiant le header ou le footer par exemple), il faudra s’attaquer directement aux fichiers HTML de ce même dossier.

Enfin, nous verrons dans un prochain article qu’une des forces de Thelia est que l’on peut lui ajouter des plugins. En effet, pour l’instant nous ne pouvons pas utiliser le mode de paiement Paypal par exemple (qui est très utile pour les clients). Nous ajouterons donc ce système dans un prochain article. Jusque là, faites un tour sur l’interface d’administration, faites des tests, des tests, et encore des tests 😉

Créer le design de son site rapidement avec Bootstrap


Bonjour à tous ! Jusqu’à présent, pour réaliser un site web je créais à chaque fois un fichier css vide qui se remplissait au fut et à mesure de la progression du site. J’ai récemment découvert le projet Bootstrap (fait par Twitter) qui permet d’avoir un css de base avec de nombreuses configurations préétablies !

 

Voici un exemple de design possible en liant ce css à votre site (cliquez sur l’image pour arriver sur la page de démonstration) :

Le CSS Bootstrap permet de mettre en forme les formulaires, tableaux, menus, boutons mais aussi de fournir des barres de progression, etc. En bref, si vous avez un petit site original à faire sans se prendre la tête dans le CSS, vous savez quoi faire maintenant !

Menu