Voici l’étape finale (facultative) du processus de formatage – L’ETAPE 6! Parcourez cette page pour des conseils utiles sur l’utilisation du HTML pour dynamiser votre contenu et activer des fonctions supplémentaires.
Les plans de lecture ont plusieurs jours de contenu, et chacun de ces jours contient au moins un élément de méditation. Cet élément de méditation peut avoir plusieurs usages, d’un simple sommaire à un parcours narratif, en passant par une prière — ou tous ces rôles à la fois.
La réalité de ces rôles multiples peut rendre difficile l’encodage du contenu pour s’assurer qu’il soit affiché pour l’utilisateur comme l’auteur l’avait souhaité. En suivant les directives et recommandations suivantes, le contenu dévotionel pourra être optimisé autant que possible, sur autant de supports YouVersion que possible (iOS, Android, web, web mobile, etc), pour aussi longtemps que possible.
Recommandations
Titre de la dévotion
Utilisez le h2, si c’est nécessaire. <h2>, </h2>
Note: nous recommandons grandement de ne pas utiliser les tags h1 dans votre contenu.
Titres
Utilisez le tag h3 pour les titres principaux. <h3>, </h3>
Sous-titres
Utilisez le tag h4 pour chaque sous-titre. <h4>, </h4>
Note: nous recommandons de ne pas se baser sur des sous-stitres plus petits que le tag h4, puisqu’il n’y aurait plus de différence visuelle notable entre ces petits sous-titres.
Espace de paragraphe
Englobez les paragraphes de texte dans des tags p. <p>, </p>
Note: nous recommandons grandement de ne pas utiliser les tags br pour créer des espaces de paragraphes, puisque le résultat n’est pas entièrement stable, et pourrait ne pas fonctionner sur tous les supports.
Espace de sections
Si vous avez beaucoup de contenu qui a besoin d’être sectionné et que l’utilisation des paragraphes n’est pas suffisante, vous pouvez enrober les sections de texte dans des tags de section.
Note: nous recommandons grandement de ne pas utiliser les tags br pour créer des espaces de paragraphes, puisque le résultat n’est pas entièrement stable, et pourrait ne pas fonctionner sur tous les supports.
Texte fort (gras)
Utilisez le tag de texte fort pour chaque paragraphe devant être affiché ainsi. <strong>, </strong> OU <b>, </b>
NoteNous recommandons de ne pas utiliser le tag b, puisqu’il perd actuellement en utilisation, et ne pourra donc pas bénéficier de support convenable dans nos applications sur le long-terme.
Texte enphatique (italique)
Utilisez le tag em pour chaque paragraphe sujet à une emphase. <em>, </em>
Note: nous recommandons de ne pas utiliser le tag i, puisqu’il perd actuellement en utilisation, et ne pourra donc pas bénéficier de support convenable dans nos applications sur le long-terme.
Listes
Utilisez le tag ul pour les listes en vrac (<ul>, </ul>), et le tag ol pour les listes ordonnées (<ol>, </ol>), avec des tags li pour les objets (<li>, </li>). A moins qu’il y ait une raison valable pour utiliser une liste ordonnée, nous recommandons d’utiliser les listes en vrac par défaut, puisqu’elles bénéficient d’un affichage plus fluide sur la majorité des supports.
Note: nous recommandons de ne pas utiliser l’attribut de type list-style.
Hyperliens externes
Ce code est utile si vous désirez envoyer l’utilisateur vers une page externe à l’app. Un code de site web basique (<a href= »http://(website) »>[texte du lien souhaité]</a>) permet de légender ce lien comme vous le désirez. Par exemple, vous pouvez afficher l’URL comme hyperlien, ou vous pouvez afficher un mot ou une phrase qui convient mieux au contexte.
Note : Notre app étant entièrement gratuite, nous désirons que les sites web utilisés pour rediriger nos utilisateurs le soient aussi.
Images
Utilisez le tag img pour les images. Les images prendront l’entièreté de la largeur du contenu (ce qui signifie que le texte ne pourra pas se glisser sur les cotés de l’image), et ce sur tous les supports. Pour cette raison, une largeur minimum de 480 pixels est recommandée, puisque des images de tailles inférieures pourraient se déformer.
Note: veuillez ne pas inclure d’autres attributs dans le tag img (largeur, hauteur, bordure, alignement, etc) puisqu’ils pourraient empêcher un affichage correct de l’image.
Vidéos
Intégrez le code vidéo youtube iframe habituel avec une classe div incluant un conteneur vidéo.
<div class= »video-container »>
<iframe class= »youtube-player » src= »http://www.youtube.com/embed/VIDEO_ID » frameborder= »0″ allowfullscreen></iframe>
</div>
Noteveuillez ne pas inclure d’autres attributs dans le tag iframe (largeur, hauteur, bordure, alignement, etc) puisqu’ils pourraient empêcher un affichage correct de la vidéo.
Cette publication est aussi disponible en : Afrikaans Allemand Espagnol Portugais Roumain Chinois (simplifié) Chinois (Traditionnel)