Share
La conception dans le navigateur devenant de plus en plus populaire (et pratique), le besoin d'outils de conception utiles ne cesse de croître. Un ensemble d’outils qui devient de plus en plus utile tourne autour du contenu de remplissage. Il existe actuellement diverses ressources pour aider les concepteurs qui ont besoin de contenu de remplissage, qu'il s'agisse de texte ou d'images..
Auparavant, la conception de nombreux sites Web se déroulant dans Photoshop, le copier / coller manuellement du texte à partir du Web était la meilleure méthode pour «remplir» un dessin avec un contenu factice. Cependant, maintenant que de nombreux sites Web sont conçus dans le navigateur, pourquoi ne pas laisser l’ordinateur faire tout le travail pour vous??
Nous allons couvrir vos options pour le contenu de remplissage dans ce tutoriel. De copier / coller du texte et des images statiques à leur génération dynamique.
Il y a des puristes qui recommandent d'éviter le contenu de remplissage à tout prix. Un argument est que le contenu de remplissage vous extrait de la "vraie" expérience du site Web que vous construisez:
L'objectif ici est de se rapprocher le plus possible de l'expérience client réelle. Ne vous abstrez pas de la vraie expérience. Chaque couche supprimée vous éloigne de l'expérience client réelle.
Le fait est que, parfois, vous ne pouvez pas imiter l'expérience client réelle. Si vous avez des sites Web de marketing simples avec du contenu statique conçus par un stratège de contenu, utilisez ce contenu pour élaborer le design du site. Le contenu devrait informer la conception. Toutefois, si vous concevez une application Web contenant du contenu généré par l'utilisateur, il est souvent impossible de concevoir un contenu réel car vous ne pouvez pas le générer vous-même. c'est fait par vos utilisateurs. En outre, du point de vue de la confidentialité, il est probable que vous ne soyez pas autorisé à utiliser les données réelles du client pour remplir les maquettes. Vous ne pouvez donc pas vous rapprocher autant que possible de l'expérience utilisateur en raison de problèmes juridiques ou de confidentialité..
Vous pouvez toutefois suivre certaines étapes pour rester proche de l'expérience client réelle:
Si votre site ou votre application nécessite la saisie de données, entrez des mots réels et pertinents et tapez le texte, ne vous contentez pas de le coller depuis une autre source. Si c'est un nom, tapez un vrai nom. Si c'est une ville, tapez une vraie ville.
Si vous utilisez le bon type de contenu de remplissage, il est possible de ressembler de très près à l'expérience de l'utilisateur final. Imaginons, par exemple, que votre conception demande une liste de noms. À la place d'utiliser:
Vous pouvez utiliser de vrais noms:
Encore une fois, l'objectif est ici de se rapprocher le plus possible de l'expérience client réelle. Et si vous pouvez le faire en utilisant du contenu de remplissage, foncez!
Parce que nous nous soucions de notre métier, nos discussions sur les outils et les techniques sont souvent basées sur les meilleures pratiques et solutions parfaites. Parce que nous nous soucions de nous, notre flux de travail et notre expertise sont améliorés à chaque projet. Cependant, les solutions parfaites n'existent pas souvent dans le monde réel. C'est pourquoi des alternatives pragmatiques (telles que le contenu de remplissage) aident à terminer les projets en temps voulu. Je crois que cela va parfaitement, tant que nous ne compromettons pas nos principes.
Comme nous le savons tous, une maquette préliminaire n’est pas proche de la véritable expérience client finale. Votre conception va probablement changer radicalement entre la première et la dernière itération. Le contenu de remplissage peut toujours être un outil précieux pour voir comment le texte coule sur la page, autour des images et des points d'arrêt. Cela peut vous aider à avoir une idée de l'emplacement des éléments de conception, du solde de la page et de l'utilisation de l'espace négatif..
Le supprimer complètement n'a aucun sens. Le contenu de remplissage peut être un outil essentiel dans la phase de conception initiale pour le prototypage rapide et l'itération de concepts de conception. Une fois que vous avez dépassé les premières étapes de la conception, il serait très utile d’utiliser un contenu qui ressemble davantage à ce que l’utilisateur verra éventuellement..
Où vous tracez la ligne sur l'utilisation du contenu de remplissage est à vous. Il n'y a pas de "oui, utilisez-le!" ou "non, c'est une honte!". La réponse à "devrais-je utiliser le contenu de remplissage?" est, comme il semble toujours être, "ça dépend". Parfois, le fait de ne pas utiliser de contenu de remplissage concerne davantage un monde idéal et non le monde réel. Vous êtes un professionnel, vous décidez. En fin de compte, vous saurez si vous avez ou non pris la bonne décision et la prochaine fois que vous vous poserez la question "Devrais-je utiliser du contenu de remplissage?", Vous saurez mieux comment répondre à cette question..
Il existe un certain nombre de solutions hébergées pour insérer des images dans votre document HTML, vous permettant de spécifier divers attributs d'image via une URL. Par exemple, pour utiliser placekitten, indiquez simplement la taille d'image dont vous avez besoin après leur URL. Ensuite, utilisez cette URL en tant que src de votre
Si vous n'aimez pas les chatons (pourquoi êtes-vous sur Internet?), Voici quelques services similaires qui offrent différentes personnalisations (voir cette synthèse pour plus d'options):
Il y a un certain nombre de raisons pour lesquelles vous auriez besoin de générer un texte de remplissage. Peut-être avez-vous besoin de générer des paragraphes entiers pour conceptualiser la conception d'un blog. Ou peut-être avez-vous besoin de générer des catégories de texte, telles que des courriels et des noms pour styliser une conception de tableau. Quels que soient vos besoins, il existe différentes solutions pour générer du texte dans vos conceptions..
Il existe de nombreux générateurs de texte de remplissage sur le Web. Comme la conception Web traite souvent de listes, de tableaux et d’autres structures de données, de nombreux générateurs offrent plus que le remplissage de paragraphe Lorem Ipsum. Vous trouverez ci-dessous une (petite) liste de générateurs de texte de remplissage. Chacune offre une variété de configurations de texte, telles que la génération de langues différentes, l'insertion de balises HTML dans du texte, le laçage de texte avec en-têtes / sous-titres, l'ajustement de la longueur du texte et la mise en italique des mots.
Pour des listes plus complètes de sites Web générant du texte, voici quelques analyses:
Vous pouvez générer dynamiquement du contenu de remplissage dans vos documents HTML à l'aide d'une bibliothèque JavaScript telle que:
À mesure que la conception dans le navigateur devient de plus en plus populaire, l'ancienne technique de copier / coller du contenu de remplissage peut devenir inefficace. Pourquoi ne pas laisser l'ordinateur gérer ce travail? Couvrons cette technique plus en profondeur.
Essayons de mettre en pratique une partie de ce que nous avons couvert jusqu'à présent en créant une maquette de conception. Par souci de simplicité, imaginons que nous sommes chargés de créer un site Web de base qui présente des extraits d'articles préférés de quelqu'un de partout sur le Web. Nous appellerons cette personne Franky et nous appellerons le dessin "Fav Five de Franky".
Ce petit exemple devrait aider à montrer l’utilité du contenu généré dynamiquement lors de la conception d’une maquette dans le navigateur..
Tout d’abord, décrivons notre code HTML de base.
Les cinq préférés de Franky
Comme vous pouvez le constater, notre page comprend trois ressources supplémentaires: une réinitialisation CSS, une feuille de style CSS personnalisée (que nous écrirons plus tard) et un lien vers la version hébergée de jQuery par Google. Maintenant, dans notre styles.css fichier, nous allons inclure quelques règles de style de base pour notre maquette:
/ * Général ============================= * / body font: 1em / 1.45 Georgia, serif; arrière-plan: # e9e9e9 repeat; couleur: # 222; img max-width: 100%; hauteur: auto; strong font-weight: bold; .wrapper width: 95%; marge: 0 auto; .content padding: 0 2em; a color: # 9c0001;
Créons maintenant un en-tête simple pour notre page. Encore une fois, rien de trop sophistiqué car ceci est juste un exemple de maquette.
Les cinq préférés de Franky
Maintenant, nous allons ajouter un style simple à notre en-tête
/ * En-tête ============================= * / .header padding: .5em 0; arrière-plan: # 333; Couleur blanche; text-align: center; box-shadow: 0 1px 3px rgba (0,0,0, .5); arrière-plan: # 45484d; / * Anciens navigateurs * / arrière-plan: -moz-linear-gradient (en haut, # 45484d 0%, # 000000 100%); / * FF3.6 + * / background: -webkit-gradient (linéaire, gauche-supérieur-gauche, inférieur gauche, couleur-stop (0%, # 45484d), couleur-stop (100%, # 000000)); / * Chrome, Safari4 + * / background: -webkit-linear-gradient (haut, # 45484d 0%, # 000000 100%); / * Chrome10 +, Safari5.1 + * / arrière-plan: -o-linear-gradient (haut, # 45484d 0%, # 000000 100%); / * Opera 11.10+ * / background: -ms-linear-gradient (haut, # 45484d 0%, # 000000 100%); / * IE10 + * / background: linéaire-dégradé (jusqu'en bas, # 45484d 0%, # 000000 100%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 45484d", endColorstr = "# 000000", GradientType = 0); / * IE6-9 * / .header-title taille de la police: 1.25em; famille de polices: helvetica; poids de police: gras; ombre du texte: 0 1px 0 # 000;
Nous avons maintenant une simple page avec un en-tête, comme ceci:
Créons maintenant le balisage de notre extrait d’article. Le but de cet article n'est pas de montrer les techniques de codage CSS et HTML, mais plutôt de savoir comment utiliser le contenu de remplissage. Par conséquent, nous allons couvrir ces étapes très rapidement avec un simple copier-coller. D'abord, nous allons configurer un emballage et un article principal.
Remarque: J'apprécie qu'un nom de classe d '"article" sur un élément d'article puisse sembler un peu absurde - souvenez-vous que c'est purement une démonstration ...
Nous utiliserons le service d’espace réservé aux images lorempixel pour placer des images dans notre balise. Comme nos conteneurs d’articles ont une largeur maximale de 600 pixels, c’est la taille d’image que nous allons récupérer dans lorempixel..
Maintenant, nous allons placer tout notre texte d'article dans un div. Notre maquette simple utilisera les éléments de contenu reproductibles suivants:
Titre de l'article ici
- auteur: Nom de l'auteur
- la source: onlinesource.com
C'est là que tout le texte du paragraphe ira… Lire la suite "
Il s’agit essentiellement de notre modèle de présentation d’extraits des lectures préférées de Franky. Maintenant, appelons ça!
Nous avons notre balisage de base, nous allons donc commencer par styler le contenu.
/ * Article ============================= * / .article max-width: 600px; rembourrage: 0 0 2em; background: #fff; marge: 3em auto; bordure: 1px solide #ddd; border-radius: 5px; box-shadow: 0 1px 2px rgba (0,0,0, .1); .article a text-decoration: none; .article a: hover text-decoration: underline; .article img border-radius: 5px 5px 0 0; .article-title display: block; taille de police: 1.125em; hauteur de ligne: 1,2; couleur: # 222; marge: 1em 0 0; poids de police: gras; famille de fontes: Helvetica, Arial, sans serif; text-transform: capitalize; / * Faker ne générera pas la bonne capitlisation, mais CSS peut le gérer! * / .article-paragraph color: # 555; taille de police: .875em; hauteur de ligne: 1.5em; .article-paragraph: première-lettre text-transform: majuscule; / * Article Meta * / .article-meta color: # 777; taille de police: .75em; famille de polices: arial; marge: .25em 0 1em; débordement caché; .article-meta li float: left; marge droite: 1em; .article-meta li: after content: '\ 00B7'; marge gauche: 1em; couleur: #ccc; .article-meta li: dernier-enfant: après display: none; .article-author span font-style: italic;
Maintenant, vous aurez un modèle assez simple pour afficher des extraits d'article qui ressemble à ceci:
Jusqu'à présent, nous avons un extrait d'article (sur cinq, car il s'agit du "Fav Five" de Franky). Plutôt que de copier / coller le balisage quatre fois de plus, nous utiliserons un pour boucle en PHP. Cela permettra de conserver un modèle unique de notre extrait d'article lors de l'édition, mais plusieurs extraits d'article lors de la visualisation dans le navigateur. Cela facilite la maintenance; si nous voulons un peu modifier notre modèle d'extrait d'article, nous n'aurons pas à le faire plusieurs fois.
Enveloppons notre article élément dans le code suivant:
//élément ici
Notez notre pour la boucle commence par la variable $ i être égal à un et fonctionnera jusqu'à ce qu'il soit inférieur à 6 (donc il s'exécute 5 fois).
REMARQUE: Assurez-vous de renommer votre fichier avec l'extension .php si vous ne l'avez pas encore.
Maintenant, vous devriez avoir quelque chose comme ça:
Remarquez comment notre image de lorempixel est la même dans chaque article? Pour réaliser une maquette plus réaliste, nous allons légèrement modifier l'image src nous obtenons donc une image différente pour chaque extrait d'article.
LoremPixel vous permet de personnaliser légèrement le type d'image que vous récupérez. Voici les personnalisations qu'ils autorisent dans leur structure d'URL:
Nous utilisons actuellement l'URL http://lorempixel.com/600/200. Nous allons choisir une catégorie, telle que sports, puis utiliser notre variable de nombre PHP. $ i modifier l'URL pour que chaque extrait d'article demande une image distincte de la catégorie sports.
Pour ce faire, trouvez le
Maintenant, en tant que variable de nombre php $ i augmente avec chaque boucle for, nos URL d’image demanderont une image différente à chaque fois. Le balisage HTML généré par PHP va maintenant ressembler à ceci:
…
…
…
Maintenant, nous devrions avoir quelque chose qui ressemble à ceci:
Maintenant que nous avons mis en place notre modèle de base avec une image différente pour chaque extrait, nous souhaitons avoir un contenu de remplissage différent pour chaque article. Cela nous aidera à mieux visualiser le produit final.
C'est là qu'une bibliothèque de contenu de remplissage telle que faker.js est utile. En utilisant l'API de faker.js avec un peu de jQuery, nous pouvons remplir dynamiquement notre modèle HTML lors du chargement de la page. L'utilisation de l'API faker.js est assez simple. Vous pouvez trouver l'intégralité de l'API sur la page gaker de faker.js. Voici l'exemple d'utilisation:
Comme vous pouvez le constater, en incluant faker.js dans notre page, nous avons ensuite accès à son API, qui peut générer des noms de remplisseur, des courriels, des adresses, du contenu, etc. Invoquez simplement l'objet Faker avec l'une de ses méthodes correspondantes.
Premièrement, ajoutons faker.js à notre page. Nous ajouterons le Maintenant, essayons de générer de faux titres de contenu en utilisant faker.js et jQuery. Si vous regardez dans l'API de faker.js, vous remarquerez qu'il existe des méthodes pour générer des phrases, des paragraphes et des mots de contenu Lorem Ipsum. Puisque nous voulons quelque chose de similaire au titre d'un article, nous voulons une phrase de Lorem Ipsum: Remarque: faker.js ne générera pas de phrase en majuscule. En utilisant la règle CSS Nous allons commencer par ajouter une classe de Ensuite, en utilisant jQuery, nous allons parcourir chacun des Nous devrions maintenant avoir quelque chose dont le titre et la longueur de chacun des titres de nos articles varient et ressemblent davantage au contenu dynamique de notre site.. Maintenant que nous avons remplacé tous les titres de nos articles. Pensons à l’autre contenu de la page que nous voulons remplacer. Nous voulons toujours remplir les éléments de modèle suivants: Plutôt que d'écrire jQuery pour chaque morceau de modèle que nous voulons remplacer, nous allons résumer la création et le remplacement de contenu, puis passer simplement ce que nous voulons remplacer en tant qu'arguments.. Commençons par déterminer quelles parties de faker.js nous allons utiliser pour générer le contenu de remplissage dont nous avons besoin. Comme mentionné, nous avons besoin du nom d'une personne, d'un nom de domaine et d'un contenu de remplissage de paragraphe. Faker.js a les méthodes suivantes que nous pouvons utiliser: Maintenant que nous savons quel contenu nous générons, nous devons ajouter un élément et une classe où nous allons placer notre contenu de remplissage. Comme nous l'avons fait ci-dessus, nous préfixons chaque classe par "faker-". Ainsi, lorsque nous allons au-delà de la création d'une simulation et que nous cessons d'utiliser faker.js, nous pouvons facilement trouver et supprimer les classes de remplissage dont nous n'avons pas besoin.. Remarque: assurez-vous que les classes de contenu de remplissage correspondent aux noms de méthode faker.js. Alors D'abord, traitons l'auteur en ajoutant un Nous allons maintenant gérer le source en ajoutant une classe appropriée au lien source: Enfin, traitons l’extrait d’article en ajoutant un C'est là que tout le texte du paragraphe ira … Lire la suite » … Lire la suite » Nous venons d'écrire un petit jQuery qui trouvera tous nos éléments de contenu de remplissage et les remplira avec le contenu de remplissage généré par faker.js. Créons une variable appelée Remarque: nous ajoutons Nous allons maintenant passer en revue chacun de nos arguments. La clé du tableau devient l'objet faker.js tandis que la valeur du tableau devient la méthode faker.js. La valeur du tableau correspond à la classe HTML afin que jQuery sache quel élément rechercher. C'est tout! Maintenant, vous devriez avoir quelque chose comme ça: En résumant ainsi notre processus de contenu de remplissage, il est très facile d’ajouter ou de supprimer de nouveaux types de contenu de remplissage. Maintenant, si vous souhaitez ajouter un nouveau type de contenu de remplissage à partir de faker.js, tel qu'un e-mail Nous avons construit une simple maquette dans le navigateur, illustrant un exemple de conception de cinq extraits d'articles.. Notre modèle pour chaque extrait d’article ne contient que 13 lignes de PHP / HTML, alors que le HTML résultant serait: beaucoup plus que ça. Cela permet un prototypage rapide et facile. À ce stade, nous pourrions facilement tester le caractère réactif de la conception et voir comment le contenu et le texte sont renvoyés. Nous pourrions modifier n'importe quel CSS qui l'exige ou ajouter très facilement d'autres éléments de conception avec le contenu de remplissage correspondant. Le contenu de remplissage dynamique permet un prototypage rapide des conceptions. Vous en trouverez peut-être un besoin dans un projet futur! Comme vous le constaterez peut-être, ce type de prototypage pourrait s'avérer utile pour de nombreuses autres tâches de conception Web, notamment celles pilotées par les données. Par exemple, si vous avez besoin de concevoir un tableau de contacts avec des noms, adresses, e-mails, numéros de téléphone, etc., vous pouvez utiliser faker.js pour générer facilement le contenu de remplissage dont vous avez besoin. Cela vous permet de vous concentrer plus facilement sur la conception de la table plutôt que de devoir copier / coller des tonnes de données dans votre code HTML pour avoir une idée de son apparence et de sa réponse.. Faker.Lorem.sentence (). Cela créera une phrase simple telle que "praesentium est alias dolor omnis sequi voluptatibus", ce qui constituera un bon contenu de remplissage pour le titre d'un article..text-transform: capitaliser on peut forcer la peine à être majuscule; nous rapprochant ainsi de la bonne mise en forme.faker-phrase à notre modèle de titre d'article. Cela agira comme un crochet permettant à jQuery de trouver tous les éléments dont le contenu devrait être remplacé par des phrases de lorem ipsum.
Titre de l'article ici
faker-phrase les éléments générés par PHP et remplacent notre contenu de remplissage statique "Article Title Here" par une phrase de Lorem Ipsum générée aléatoirement. $ ('. faker-phrase'). each (function () $ (this) .html (Faker.Lorem.sentence ());); 
Étape 5: Remplir la page entière
Déterminez ce que faker.js va générer
Faker.Name.findName () - nous donne un nom, tel que John WilliamsonFaker.Internet.domainName () - nous donne un nom de domaine, tel que eldridge.co.ukFaker.Lorem. alinéa () - nous donne un paragraphe de contenu Lorem ipsumAjouter des classes HTML où nous mettons du contenu de remplissage
Faker.Name.findName () aura besoin de la classe HTML faker-findName et Faker.Internet.domainName () aura besoin de la classe faker-domainName etc. Cela sera utile lorsque nous automatiserons la recherche et le remplacement du contenu de remplissage dans jQuery.envergure élément avec la classe appropriée:
envergure élément où notre remplissage lorem ipsum ira:
args. C’est là que nous définirons les méthodes de l’API faker.js que nous utiliserons. N'oubliez pas que nos classes HTML correspondent aux méthodes faker.js et sont simplement précédées du préfixe faux-.Faker.Lorem.sentence () à nos arguments, afin que vous puissiez supprimer le code JavaScript créé précédemment à l'étape 4 pour rechercher / remplacer les titres des articles. var args = 'Lorem': ['paragraphes', 'phrase'], // mappe vers Faker.Lorem. Paragraphs () et Faker.Lorem.sentence () 'Nom': ['findName'], // maps to Faker.Name.findName () 'Internet': ['domainName'] // est mappé sur Faker.Internet.domainName ()
// boucle sur args pour (var clé dans args) var obj = args [clé]; for (var prop dans obj) // jQuery trouve les éléments appropriés et les remplit $ ('. faker -' + obj [prop]) each (function () // Faker.Lorem. paragraphs () // Faker .Internet.domainName () $ (this) .html (Faker [clé] [obj [prop]] ());); 
Faker.Internet.email () tout ce que vous avez à faire est de l’ajouter à la args variable et ensuite créer un élément HTML avec une classe de faker-email où vous voulez un faux email généré.
Conclusion
Autres utilisations
Accentsconagua
… 
… 
…