Tutoriels et documentation

Vous cherchez une réponse à un problème pour mettre en place une fonctionnalité ? Découvrez la rubrique Tutoriels.

Support des formats d'articles dans les modèles

Mots-clés : , , ,

Cet article est destiné aux personnes qui créent des modèles de mise en page, ou qui ont un modèle de mise en page personnel. Il détaille les modifications nécessaires pour qu'un modèle supporte les formats d'articles.

Le principe :

Lorsque l'utilisateur choisit des formats d'articles dans le menu administrateur > mise en page > présentation du contenu, les objets "summary" des pages de sommaires de rubriques (et la page principale) contiennent des attributs supplémentaires pour définir le format de l'article et sa position (au début d'une ligne de 3 colonnes par exemple). Ces attributs peuvent être utilisés pour spécifier des classes (et avoir des styles CSS différents), ou générer du code différent.

Les nouveaux attributs :

  • format : le format de l'article (valeurs: headline, normal, 2cols, 3cols, line)
  • start_table : 'on' si l'article est au début d'une série d'articles sur 2 ou 3 colonnes
  • start_row : 'on' si l'article est au début d'une ligne d'articles sur 2 ou 3 colonnes
  • mid_row : 'on' si l'article est au milieu d'une ligne d'articles sur 3 colonnes
  • cell : 'on' si l'article fait partie d'une série d'articles sur 2 ou 3 colonnes
  • cell_width: 50% ou 33% si l'article fait partie d'une série d'articles sur 2 ou 3 colonnes respectivement
  • end_row : 'on' si l'article est à la fin d'une ligne d'articles sur 2 ou 3 colonnes
  • end_table : 'on' si l'article est à la fin d'une série d'articles sur 2 ou 3 colonnes
Les nouvelles "balises HTML"

En pratique, pour les colonnes, il est aisé d'utiliser des tables HTML.

A noter : afin de pouvoir aligner verticalement tous les titres d'articles, les corps des articles, et les bas d'articles, j'ai ajouté des balises spéciales <tr_multiple>, <td_header> et <td_footer>. Ces balises sont ensuite transformées en véritable HTML.

Exemple :

<tr_multiple>
<td>
<td_header>Titre 1</td_header>
Texte 1
<td_footer>Signature 1</td_footer>
</td>
<td>
<td_header>Titre 2</td_header>
Texte 2
<td_footer>Signature 2</td_footer>
</td>
</tr_multiple>

est transformé en :

<tr class="tr_header">
<td>Titre 1</td>
<td>Titre 2</td>
</tr>
<tr class="tr_body">
<td>Texte 1</td>
<td>Texte 2</td>
</tr>
<tr class="tr_footer">
<td>Signature 1</td>
<td>Signature 2</td>
</tr>

Il faut ajouter "pragma html_process_tr_multiple_tags" en haut du modèle pour que celà fonctionne.


Modification de Pitr


Pour illustration, voici comment faire pour ajouter le support des formats d'articles à Pitr :

pragma html_process_tr_multiple_tags

Ajouter des styles pour les formats :

.format_headline h2 {
        font-size:2em;
}
.format_2cols h2 {
        font-size:1.2em;
}
.format_3cols h2 {
        font-size:1em;
}
.format_line h2 {
        font-size:1em;
}

.tr_header, .tr_footer, .tr_body {
        vertical-align:top;
}

Au début de l'objet summary:

<object class=summary count=16>

<if_attribute start_table>
<table style="table-layout:fixed;">
</if_attribute>

<if_attribute start_row>
<tr_multiple>
</if_attribute>

<if_attribute cell>
<td style="width:<attribute cell_width>">
</if_attribute>

<td_header>

A la fin de l'objet summary :


</td_footer>

<if_attribute cell>
</td>
</if_attribute>

<if_attribute end_row>
</tr_multiple>
</if_attribute>

<if_attribute end_table>
</table>
</if_attribute>

Au début de l'objet summary, ajouter la classe format_<attribute format>, et </td_header>


<if_attribute rating==1>
<div class="post hreview format_<attribute format>">
<h2><a class="url fn" href="<attribute news_url>" rel="bookmark" title="Lien permanent">
</if_attribute>
<if_attribute rating!=1>
<div class="post format_<attribute format>">
<h2><a href="<attribute news_url>" rel="bookmark" title="Lien permanent">
</if_attribute>
<attribute title></a></h2>

<if_attribute display_article_sub_title==on>
<if_attribute sub_title!=><h3><attribute sub_title></h3></if_attribute>
</if_attribute>

</td_header>


Au milieu de l'objet summary, ajouter <td_footer>, ainsi que l'attribut description et une classe pour mettre en valeur les articles en Une.

<div class="entry">

<if_attribute rating==1>
<attribute rating_bar>
</if_attribute>

<div class="post_format_<attribute format>"><attribute text>
<attribute description>
<attribute cmd></div>

</div>

<td_footer>

Ajouter une condition sur display_article_page_views :

<if_attribute display_article_page_views==on>
<if_attribute page_views!=> | Lu <attribute page_views> fois</if_attribute>
</if_attribute>

Et voilà !
Version imprimable | Tutoriels | Le Vendredi 09/05/2008 | 0 commentaires | Lu 4 fois

Associer un nom de domaine à son blog

Mots-clés :

Il est possible d'associer un nom de domaine (par exemple votrenom.fr) à un blog hébergé sur ViaBloga. Ce tutoriel présente les étapes nécessaires, et les pièges à éviter.

Comment ça marche ?

Le domaine votrenom.fr pointe vers l'adresse IP de l'un des serveurs de ViaBloga. Lorsqu'un visiteur tape votrenom.fr dans son navigateur, sa requête est alors dirigée vers le serveur de ViaBloga. De son coté, le serveur de ViaBloga est configuré pour faire la correspondance entre votrenom.fr et le blog votrenom.viabloga.com.

Comment faire ?

Il y a trois étapes :
  1. acheter le nom de domaine
  2. configurer le nom de domaine pour qu'il pointe vers le serveur de ViaBloga
  3. contacter le support de ViaBloga pour que nous fassions la correspondance entre le domaine et le blog

1. Acheter le nom de domaine

Vous pouvez acheter un nom de domaine chez l'un des nombreux "registrars". Les prix, services, et extensions disponibles (.com, .fr etc.) varient suivant les registrars. Toutes les extensions sont possibles sur ViaBloga. En France, de bon choix de registrars sont OVH et Gandi. Vous pouvez utiliser d'autres registrars s'ils permettent de gérer les zones DNS et si vous êtes à l'aise avec les modifications de zones. Si vous n'avez pas compris la phrase précédente, choisissez OVH ou Gandi. ;-)

Les pièges à éviter :

  • La quasi-totalité des registrars sont aussi des hébergeurs. Il ne faut acheter que le nom de domaine, pas les hébergements qui peuvent être proposés avec.

2. Configurer le nom de domaine

La plupart des hébergeurs permettent de configurer la "zone DNS". C'est dans cette zone qu'il faut ajouter un enregistrement qui associe le nom de domaine à l'adresse IP du serveur de ViaBloga. Il s'agit d'un enregistrement de type "A" (en anglais, "A record").

Adresse IP du serveur de Viabloga : 91.121.54.28

Note : il s'agit d'une adresse IP "flottante" que nous pouvons passer d'un serveur à un autre, en particulier lorsque des serveurs plus puissants sont installés.

Instructions pour OVH :

Une fois le domaine acheté :
  • connectez vous au "Manager" OVH avec votre identifiant et mot de passe
  • sélectionnez le nom de domaine dans la liste des produits
  • dans la rubrique "Accès aux sections", cliquez sur "Domaine et DNS"
  • si la "Zone DNS" n'est pas activée, cliquez sur "Activer la zone DNS"
  • cliquez sur "Zone DNS"
  • dans le tableau, en bas de la zone "Gestion de la zone DNS", modifiez le champ de type A correspondant à .votredomaine.fr (icône en forme de crayon)
  • dans le champ "Sélectionnez une IP", choisissez "Destination personnalisée"
  • dans le champ "Destination", entrez 91.121.54.28
  • validez

Instructions pour Gandi :

  • Une fois le domaine acheté
  • connectez vous au menu d'administration de Gandi
  • cliquez sur votre nom de domaine
  • dans la partie "Paramètres techniques", vérifiez que les serveurs de nom listés sont dans le domaine gandi.net
    •  
    • sinon, cliquez sur Modifier, puis Utiliser les DNS GANDI
  • cliquez sur "Gérez les zones" dans la partie "Paramètres techniques"
  • choisissez l'interface "normale" de Modification de zone DNS
  • éditez le champ de type A correspondant à @, et changez la valeur de l'adresse IP en 91.121.54.28
  • éditez le champ de type CNAMe de www, et changez la valeur en votredomaine.fr. (attention, le . à la fin de votre nom de domaine est important)
    • ou éditez le champ de type A de www, et changez la valeur de l'adresse IP en 91.121.54.28
  • validez les modifications

Vérification

Pour vérifier que cette étape a été correctement effectuée, vous pouvez utiliser l'outil Squish :
  • entrez votre nom de domaine
  • choisissez "A (host name)"
  • cliquez sur "Check"
  • attendez que la page se charge complètement puis allez tous en bas dans la section "Results"
  • toutes les requêtes doivent retourner l'adresse 91.121.54.28

Les pièges à éviter :

Il ne faut absolument pas faire de "redirections" (web, visible, invisible ou autres) qui sont souvent proposées dans les interfaces de gestion des noms de domaine. Ces redirections sont la source de nombreux problèmes d'utilisabilité et de référencement. A éviter à tout prix.

Il ne faut pas changer les serveurs DNS. Il faut garder les serveurs DNS du registrar, et configurer sur ceux-ci la zone DNS. En particulier, il ne faut absolument pas mettre l'adresse IP du serveur de ViaBloga comme adresse de serveur DNS. Ca ne marchera pas.

Avec Gandi, il ne faut pas utiliser l'interface "simplifiée". Celle-ci permet d'associer www.votredomaine.fr au serveur de ViaBloga, mais pas votredomaine.fr sans le www.

3. Contacter le support

Après avoir réalisé les deux étapes ci-dessus, envoyez un e-mail au support de ViaBloga () en précisant l'adresse actuelle de votre blog, et le nom de domaine.

Les pièges à éviter :

Il ne faut pas nous envoyer cet e-mail avant d'avoir réalisé les deux étapes précédentes : nous ne pourrions faire qu'une seule moitié de la configuration, et l'autre moitié prendra ensuite plus de temps.


Une fois les trois étapes réalisées, il faut compter 24 à 72 heures pour que le nom de domaine fonctionne.
Version imprimable | Tutoriels | Le Mercredi 28/11/2007 | 15 commentaires | Lu 839 fois

Les commandes d'affichage des articles

Insérer une image avec lien et info bulle

tuto de guillaume

Je profite de quelques heures de TGV pour écrire un tutoriel sur l'utilisation et la syntaxe des commandes des mots-clés. Ce tutoriel devrait pouvoir trouver sa place dans ViaBloga, le livre. Les commandes des articles constituent sans aucun doute la fonctionnalité la plus unique et la plus puissante de ViaBloga. ----- Un blog est une suite chronologique d'articles à la visibilité éphèmère : l'article le plus récent occupe une place proéminente, mais dès qu'il est remplacé par de nouveaux articles, son lectorat chute de manière exponentielle au fur et à mesure de sa descente dans la première page du blog. Quand il ne figure plus sur la première page, il est relégué aux archives, ces recoins poussièreux où personne ne descend jamais et qui mériterait plutôt le nom d'oubliettes....
1) insérer une photo ou une image (voir aussi la procédure simplifiée de l'éditeur d'image) <img src="adresse de l'image" /> Et on peut ausi ajouter des trucs plus compliqués comme : <img vspace="5" hspace="0" border="0" align="right" src="adresse de l'image" /> pour que la photo soit intégrée à droite du texte (on remplace right par left pour qu'elle soit à gauche) avec un léger espacement vertical de 5 pixels par rapport au texte. On peut aussi définir précisément la taille de l'image en ajoutant height="XXX" pour la hauteur et/ou width="XXX" pour la largeur. <img height="150" src="adresse de l'image" /> 2) insérer une photo ou une image...

Publier une vidéo sur son blog

Démonstration des mots-clés en vidéo

Liste Autre pour bloc libre

Voir ce lien avec toutes les explications, en bleu ;-)
Voici un lien direct vers un tutoriel vidéo concernant les mots-clés, transporté au milieu de 36 projets par le Grand Socier chez lui : Démonstration des mots-clés en vidéo renvoi vers l'article de présentation
atteindre le texte de jlb atteindre son article de présentation

Mettre un lien externe sur le bandeau d'entête

Nuage de mots-clés : Didacticiel vidéo

Un éditeur d'images en ligne

ouf, ça y est, je ne sais pas si c'est très clair mais bon... Mam'zelle avait donc demandé à pouvoir mettre un lien sur tout son bandeau d'entête. Problème : sur le modèle kubrick, le lien se fait uniquement sur le titre (le texte) et non sur le bandeau complet. De plus, maaaaammmzelle ;-) désire qu'un clic sur le bandeau d'entête ne fasse pas aller à la page principale mais...
Cliquez sur l'image ci-dessous pour visionner la vidéo. Si celle-ci ne s'affiche pas ou si vous avez des problèmes de lecture, téléchargez le lecteur de vidéo gratuit QuickTime. viabloga_nuage_1.mov PS : pour les prochaines démos, il faudrait un blog classique (de type journal donc) avec une mise en page standard. Stéphane, peut-être que l'on pourrait mettre les vidéos sur dailymotion...
Le formulaire d'ajout d'image de l'éditeur visuel fait peau neuve ! Il est toujours possible d'indiquer l'adresse d'une image, mais maintenant, lorsque vous envoyez une image, vous avez la possibilité de la modifier en ligne : la recadrer, la faire tourner (pratique pour les photos prises en vertical), ajouter du texte, ou tout simplement gribouiller dessus. Un vrai bonheur....

Comment insérer un fichier mp3 et faire apparaitre le lecteur en ligne ?


Publier une image -- MAJ


Installer, configurer et utiliser l'extension FireFox Publier sur ViaBloga


Donner de la personnalité à son site avec une photo


Un nom de domaine pour son blog -- en cours


Créer un weblog en deux minutes


Session

Pour participer plus facilement, ouvrez une session :

Identifiant de
mon blog
Nom d'utilisateur
Mot de passe

Si vous avez déjà un blog sur ViaBloga ou si vous avez ouvert un compte sur l'un d'entre eux, vous pouvez vous identifier avec votre nom d'utilisateur et mot de passe en précisant d'abord l'identifiant de votre blog.

S'inscrire

Recherche


Archive : tous les articles

Pour chercher de l'aide

Les articles de ce site sont organisés par mots-clés.
Voir la liste des mots-clés.

Voir les tutoriaux de Delphine
Voir l'index de la documentation

Toutes les rubriques