pyeb theme 2 dotclear - Tag - Développement web

Dotclear 2.1 : freshyOne et tabsOne, possibilité d'ajouter un widget hors de la barre de navigation

pyeb — Tue, 11 Nov 2008 10:39:00 +0100

Depuis Dotclear 2.1, il est possible d'inclure un widget particulier à n'importe quel endroit d'une page d'un blog. Donc, il est maintenant possible d'ajouter un widget au menu de navigation de freshyOne et tabsOne.

Pour ce faire, il faut modifier le fichier _menu.html qui est dans le dossier tpl de chacun des deux thèmes. Il est d'abord nécessaire d'ajouter un lien dans le menu de navigation. Chaque élément du menu est encadré par la balise html li. Il suffit d'ajouter le code suivant à l'endroit où vous voulez positionner ce nouvel élément mais en dehors du premier et dernier élément. Le code est, ici, différent selon les thèmes. L'exemple repose sur le widget Derniers commentaires. Je m'appuie sur le template de localisation multilingue. Il est possible d'écrire directement les termes mais il faudra veiller à utiliser du code html pour les caractères accentués.

Pour freshyOne

<li class="page_item"><a href="#tablastconmments">{{tpl:lang Last comments}}</a></li>

Pour tabsOne

<li><a href="#tablastconmments">{{tpl:lang Last comments}}</a></li>

Après avoir nommé l'élément de menu, voici le code pour afficher le widget. Il n'est pas obligatoire de positionner le code dans le même ordre que pour le menu mais cela est plus pour s'y retrouver. Le code est commun aux deux thèmes.

<div id="tablastcomments" class="fragment">
    <tpl:Widget id="lastcomments">
          <setting name="homeonly">0</setting>
     </tpl:Widget>
</div>

Il est obligatoire de définir au moins un paramètre pour que template widget fonctionne, ici l'affichage pour toutes les pages du blog. Ce paramètre doit rester à 0.

La feuille de style a été modifiée pour que le titre du widget - balise html h2 - ne s'affiche pas. De fait, le paramètre - <setting name="title"> ne s'affichera donc pas s'il est défini. Pour un widget texte contenant une balise html h2, il faudra ajuster la feuille de style en conséquence.

Tester et développer ses thèmes Dotclear sous mac intel : vérifier la compatiblité avec Internet Explorer

pyeb — Fri, 14 Dec 2007 15:58:00 +0100

Depuis qu'Apple a sorti Safari, Microsoft a arrêté le développement d'IE sur Mac. Du moins, Microsoft a suspendu tout développement de ses navigateurs web pendant de longues années... Pour rappel, IE 5 pour Mac était le seul navigateur à la sortie de Mac OS X.
A présent pour les différentes versions d'IE, plusieurs choix sont ouverts : l'utilisation de site web faisant des captures de votre site ou la virtualisation.

Capture d'écrans

Le plus simple est l'utilisation de site prenant des captures d'écrans comme Total Validator - merci Kozlika. Ce site permet la vérification xhtml & css ainsi que la capture d'écran pour différents navigateurs.
Un point négatif apparaît, c'est plutôt statique. Il est lent de vérifier toutes les pages et les différents éléments. Ensuite, la moindre correction demande une capture.

Bootcamp et virtualisation

Avec l'arrivée des Mac intel et de Bootcamp, il est facile de créer une partition Windows et d'installer le nécessaire (serveur web, dotclear). Mais comme IE 6 et IE 7 réagissent différemment - ont des bugs différents, c'est selon - et ne peuvent installer en même temps, le problème n'est régler qu'à moitié. De plus, il faut redémarrer... Mais bon, pour les feuilles de styles, il faut utiliser les règles standards puis adaptés le code à IE.
Une solution de virtualisation est obligatoire. De fait, il est nécessaire d'avoir deux systèmes. Comme VMWare et Parallels peuvent utiliser la partition Bootcamp, il faut juste une deuxième partition. Cela reste lourd et long mais cela fonctionne parfaitement ! Et il possible de trifouiller les règles css tout en vérifiant que cela ne casse pas la compatibilité avec les navigateurs modernes sur mac.

Bientôt tout en local ou presque : Wine et IEs4mac

Une troisième solution de virtualisation existe, c'est wine. Et il existe des projets qui porte IE sous linux, IEs4linux, et par extension sous mac, IEs4mac. Mais malheureusement, si IE 6 for mac fonctionne, IE 7 for mac est trop lent et l'affichage n'est pas toujours fait dans sa totalité. Le support d'IE 7 n'est encore qu'en beta et n'est pas utilisable actuellement en état.
Le plus simple est d'avoir Bootcamp avec IE 7 et d'utiliser IE 6 for mac.

Tester et développer ses thèmes Dotclear sous mac intel : les navigateurs disponibles

pyeb — Fri, 14 Dec 2007 15:01:00 +0100

Ce billet fait suite au billet sur les outils de développement pour dotclear sous mac.

Logiciel d'édition de texte avec coloration du code

J'utilise désormais TextMate. Pour la simple raison que je l'ai acheté en bundle avec d'autres logiciels - MacHeist ou MacUpdate ? - mais surtout qu'il est possible de rajouter des langages en les téléchargeant ou en les créant. Il y a le support de jQuery. Waouh !
Site de TextMate

Navigateurs disponibles sous Mac OS X

Safari

Depuis Panther 10.3, Mac OS X est livré avec Safari. Il utilise comme moteur de rendu Webkit qui est dérivé de KHTML.
La version 3 du navigateur vient de sortir et est inclus dans Léopard 10.5 ainsi que dans la mise à jour de Tiger 10.4.11. Cette version est plus véloce, gère mieux le javascript - enfin ! - et propose des outils de développement.

Safari 3 continue de supporter les extensions aussi bien les InputManager que ceux utilisant SIMBL. Pour trouver un listing d'extensions, il suffit de jeter un oeil sur Pimpmysafari. Par exemple, Safari Tidy indique les erreurs et les avertissements W3C et Safari Source colorie le source de la page.
J'utilise Safari comme navigateur par défaut car son rendu est supérieure à Firefox et que les extensions de Safari, que j'utilise, remplacent celles existantes sur Firefox (Saft, SafariBlock, Inquisitor).

Ces outils (inspecteur web, console javascript…) sont accessibles à partir du menu Debug dont il faudra autoriser l'affichage par la commande suivante à partir de l'application Terminal : defaults write com.apple.Safari IncludeDebugMenu 1

Par ailleurs, un debugger javascript Drosera est disponible avec les « nightly builds » du webkit.

Pour information, Shiira et Omniweb utilise également le moteur webkit. De même pour les téléphones mobiles, l'iPhone utilise bien sûr Safari 3 mais Nokia utilise également le webkit.

Firefox

Le panda rouge utilise le moteur de rendu Gecko mais sur Mac, il est plus lourdeau que sur PC. Du moins dans sa version 2. A priori la version 3 devrait être mieux intégré à Mac OS X.
La plupart des extensions sont compatibles PC/Mac dont l'indispensable Web Developper. L'extension IETab qui demande la présence d'Interner Explorer ne fonctionne évidemment pas sur Mac...

Deux autres applications utilisant le moteur Gecko existent. Tout d'abord Camino, ce navigateur s'appuie sur le look & feel de Mac OS X et sur les API d'Apple bien plus que Firefox. Ensuite, il y a Flock qui se présente comme le navigateur social et qui permet l'écriture de billets pour les blogs.

Opera

Le navigateur multiplateforme et multisupport Opera est disponible sous Mac sans problème.

Troisième pas en jQuery avec Dotclear 2, création d’onglets avec effets de transition et intégration au thème Freshy

pyeb — Tue, 06 Feb 2007 11:20:00 +0100

La mise en œuvre d’un menu de navigation par onglet demande de modifier les fichiers de structure de Dotclear 2, cela va permettre un peu de créativité et donc de chambouler la structure classique d’un blog DC2.

Le script jQuery utilisé est Tabs. Deux exemples, tout d’abord celui de l’auteur, exemple des différents possibilités et effets de transition, et, ensuite, celui de Pep tant qu’il ne change pas de thème.

La première partie portera sur la construction et l’intégration d’un menu de navigation par onglet s’insérant dans la structure de Dotclear 2. La deuxième partie s’intéressera à l’imbrication des effets affichage/masquage dans un menu de navigation existant – celui intégré dans le somptueux thème Freshy -, à l’utilisation des templates de Dotclear 2 et à la bataille de la comptabilité avec les principaux navigateurs internet.

Télécharger le thème freshyOne.

Menu de navigation par onglet avec des effets de transition

L’environnement Tabs comprend une fonction jQuery, un modèle html et deux feuilles de styles – l’une standard et l’autre pour Internet Explorer évidemment – pour fonctionner correctement.

La structure html

Le modèle html se découpe en deux parties : les titres des onglets et le contenu des onglets. Une division encadre la structure html, un id, tabs, lui est affecté et servira à appeler la fonction jQuery. Une liste non numérotée est utilisée pour les titres des onglets, la classe anchors lui est appliquée pour gérer précisément cette liste avec les feuille de styles.

<div id="tabs">
<ul class="anchors">
<li><a href="#tabs1">Section 1</a></li>
<li><a href="#tabs2">Section 2</a></li>
<li><a href="#tabs3">Section 3</a></li>
</ul>

Chaque élément de la liste pointe vers la division du contenu d’un onglet, ex : <a href="#tabs2">.
A chaque division du contenu d’un onglet, la classe fragment est ajoutée. L’affichage/masquage de chaque contenu des onglets est géré par le script Tabs.

<div id="tabs1" class="fragment">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div id="tabs2" class="fragment">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div id="tabs3" class="fragment">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>

Le chargement du script et des feuilles de styles

Le fichier _head.html contient les éléments suivants.

<style type="text/css" media="screen">
@import url({{tpl:BlogThemeURL}}/style.css);
</style>
<style type="text/css" media="print">
@import url({{tpl:BlogThemeURL}}/../default/print.css); 
</style>

Pour ajouter Tabs dans un thème, le fichier _head.html doit être soit créé en insérant le code ci-après soit modifié en remplaçant le code précédent par le code suivant.

<style type="text/css" media="screen">
@import url({{tpl:BlogThemeURL}}/style.css);
@import url({{tpl:BlogThemeURL}}/tabs.css);
@import url({{tpl:BlogThemeURL}}/tabs-ie.css);
</style>
<style type="text/css" media="print">
@import url({{tpl:BlogThemeURL}}/../default/print.css);
</style>
<script type="text/javascript" src="{{tpl:BlogThemeURL}}/../default/js/jquery.js"></script>
<script type="text/javascript" src="{{tpl:BlogThemeURL}}/jquery.tabs.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#tabs').tabs();
});
</script>

Les feuilles de styles pour Tabs sont importées puis la librairie jQuery et le script Tabs.
L’appel du script Tabs se fait sur la division des onglets ici avec l’id tabs avec le code $('#tabs').tabs();.

Les princiales options du script jQuery Tabs

{fxSlide: true} (effet de transition)
L’onglet précédent monte puis l’onglet activé descend.
{fxFade: true} (effet de transition)
L’onglet précédent s’éclaircit puis l’onglet activé apparaît.

Ces deux efets peuvent être combines entre eux.

{fxSpeed: 'slow'/'normal'/'fast'/’0 à 1000’}
Cette option permet de définir la vitesse des effets, elle peut être définie selon la rapidité ou en millisecondes.

{fxShow: {height: 'show', opacity: 'show'}} et {fxHide: {height: 'hide', opacity: 'hide'}} (effet de transition)
Effet d'animation qui réduit les onglets et éclaircie ou opacifie les onglets.

Choisir l'onglet sélectionné par défaut Par défaut, le premier onglet, ici la Recherche, est sélectionné. Il suffit d'indiquer le numéro d'onglet à sélectionner par défaut. Par exemple, l'onglet tabs3 sera l'onglet par défaut, le code sera $('#tabs').tabs(3);. Le nombre est celui de la position de l'onglet. Le code avec l'application d'effet est $('#tabs').tabs(3,{fxFade: true});

freshyOne, jQuery et template Dotclear 2

L’utilisation et l’installation du script jQuery Tabs sont assez simples. Son imbrication dans un menu sophistiqué comme celui de Freshy percute les comportements erratiques des différents navigateurs. Le principal point noir reste Internet Explorer mais pas que lui…

Au travail ! L’utilisation du script Tabs permet de se passer du menu latéral, les templates de DC2 permettent d’obtenir le code html des principaux widgets à l’exception notable des Liens. C’est un choix radical de navigation. Ainsi, le menu de navigation comprend la recherche, les catégories, les tags, les archives, les langues et les flux de syndication.

Modifier les fichiers template

Le contenu du fichier _head.html reste le même, il faut juste remplacer $('#tabs').tabs({}); par $('#frame').tabs({fxSlide: true});.

Le fichier _top.html comprend :

<div id="top">
<h1><span><a href="{{tpl:BlogURL}}">{{tpl:BlogName encode_html="1"}}</a></span></h1>
</div>
<div id="header">&nbsp;</div>
{{tpl:include src="_menu.html"}}
<p id="prelude"><a href="#main">{{tpl:lang To content}}</a> |
<a href="#frame">{{tpl:lang To menu}}</a> |
<a href="#search">{{tpl:lang To search}}</a></p>

La structure html des onglets se trouve dans un nouveau fichier _menu.html. Tout d’abord, le code pour le titre des onglets sans template DC2 mais avec l’imbrication du menu de navigation de Freshy.

<ul class="menu">
<li class="page_item"><a class="first_menu" href="#search">Recherche</a></li>
<li class="page_item"><a href="#categories">Catégories</a></li>
<li class="page_item"><a href="#tags">Tags</a></li>
<li class="page_item"><a href="#archives">Archives</a></li>
<li class="page_item"><a href="#languages">Langues</a></li>
<li class="last_menu"><a class="last_menu" href="#rss">RSS</a></li>
</ul>

La classe page_current_item gérant l’onglet sélectionné de Freshy a été substituée par celle, classe tabs-selected, du script Tabs. Et a contrario, la classe anchors de Tabs a été remplacée par menu de Freshy.

Le but est de perfectionner l’affichage des onglets en l’internationalisant et en n’affichant que les titres utilisés. Comme exemple, les templates Categories seront utilisés, les autres templates fonctionnent sur le même principe (Tags, Archives, Langues, Syndication).

tpl:lang Categories affiche Catégorie dans la langue par défaut du blog.
<tpl:Categories> est un fonction déclarative pour l’affichage des éléments des catégories. Le code html avec cette fonction template d’affichage est répété pour chaque catégorie.
<tpl:CategoriesHeader>, en-tête, et <tpl:CategoriesFooter>, pied de page, bloque l’effet de boucle de la fonction précédente, leur utilisation est essentielle pour l’affichage d’un titre ou l’insertion de la balise html ul.

<tpl:Categories>
<tpl:CategoriesHeader><li class="page_item">
<a href="#categories">{{tpl:lang Categories}}</a></tpl:CategoriesHeader>
<tpl:CategoriesFooter></li></tpl:CategoriesFooter> </tpl:Categories>

Pour les titres des onglets, la boucle ne doit pas fonctionner, il n’y a donc pas de code entre l’en-tête et le pied de page. L’onglet Categorie ne s’affichera que si des billets comportent des catégories.

Catégories, Tags et Langues ne seront affichés que s’ils sont utilisés sur le blog, de même pour le contenu des onglets. La présentation est donc impeccable, cela a aussi le mérite de réduire l’envoi de données. Utile pour avec la limitation des hébergeurs.
De ce fait, la Recherche, Archives et RSS sont toujours présents.

<tpl:Categories>
<tpl:CategoriesHeader><div id="categories" class="fragment"><ul></tpl:CategoriesHeader>
<li><a href="{{tpl:CategoryURL}}">{{tpl:CategoryTitle}}</a></li>
<tpl:CategoriesFooter></ul></div></tpl:CategoriesFooter>
</tpl:Categories>

Les liens vers les catégories font parti de la boucle.

Faire fonctionner le prélude pour la recherche (ajout)

L'appel de la div #search avec un lien ne permet pas de modifier son état de visibilité. C'est le script Tabs qui affiche/masque les différents contenus des onglets. Tabs possède une fonction triggerTabs() pour visualiser un onglet mais le renvoi sur une ancre, ici #search, ne fonctionne pas. Il faut donc faire cela à la main…
Mais jQuery est là ! Dans _head.html, il suffit alors d'ajouter après $('#frame').tabs({fxSlide: true}); :

$('a.presearch').click( function() {
$('.menu li').removeClass('tabs-selected');
$('div.fragment').hide();%%%
$('li.first_menu').addClass('tabs-selected');
$('#search').show();
});

Son action enlève le style sélectionné des titres d'onglets et leur contenu n'est plus visible puis le premier titre, ici Recherche, est sélectionné et son contenu affiché. Ces modifications surviennent lorsqu'un lien avec la classe presearch est cliqué. Dans le fichier _top.html, la classe presearch est ajouté (<a class="presearch" href="#search">tpl:lang To search</a>).

Les options de couleurs et d'image

Le choix de l'image pour le top et de l'éléménet sélectionné pour le menu de navigation vient de mon appétit sans fin de l'orange... Mais, un autre monde est possible.
Le thème Freshy comprend plusieurs images pour le top, j'en ai retenu 9 qui sont dans le dossier img/headers de freshyOne. Les éléments sélectionnées peuvent avoir une couleur anis, cyan, bleu, violet et magenta et sont le dossier img/menu2. Il faut modifier dans la feuille de style style.css, l'élément #header en changeant le nom du fichier header_image7.jpg :

background: transparent url(img/headers/header_image7.jpg) no-repeat top left;

Pour les éléments sélectionnés du menu de navigation, tout d'abord, il faut modifier dans le fichier style.css .menu li.page_item.tabs-selected, .menu li.first_menu.tabs-selected a et .menu li.last_menu.tabs-selected a en changeant le nom du fichier :

background:url(img/menu2/menu_selected_orange.png);

Ensuite, il faut modifier dans le fichier tabs-ie6.css .menu li.tabs-selected a en changeant le nom du fichier :

background:url(img/menu2/menu_selected_orange.png);

Les problèmes avec les navigateurs

Internet Explorer 6 et 7 ne possèdent pas les mêmes tares pour la compréhension des standards web. Quand on règle le problème pour IE 6, IE 7 peut mal réagir et vice versa.
Tout d'abord le débordement de IE, il peut apparaître avec de l'italique ou une mauvaise prise en compte des espacements et autres marges. Un overflow: visible; sur les division concernées règle les problèmes sans affecter les autres navigteurs. Ouf !
Entre Freshy et Tabs, le mélange entre l'affichage sur une ligne du titre des onglets, le survol des liens sous IE et l'alignement vertical font bugger IE 6 et 7. Pire, IE 6 a du mal avec les éléments ayant plusieurs classes. Donc, j'ai réglé le problème en modifiant le fonctionnement de menu de navigation de Freshy et en utilisant ça, juste pour les IE hors 7, à ajouter dans _head.html :

<!--\[if lte IE 6]>
<style type="text/css" media="screen">
@import url({{tpl:BlogThemeURL}}/tabs-ie6.css);
</style>
<!\[endif]-->

Les problèmes de débordements de Safari et Opéra entre le titres des onglets et leur contenu ont été réglés en réduisant la taille des éléments et en ajoutant de l'espace supplémentaire.

Le thème freshyOne est compatible avec Firefox 2 & 3, IE6, IE 7, Safari 2 & 3, Opera 9.x et Konqueror 3.5.

Deuxième pas en jQuery sous Dotclear 2, effet d'arrondi avec le thème alto

pyeb — Thu, 25 Jan 2007 11:45:00 +0100

Des scripts existent pour jQuery déjà prêts à l'emploi ou presque ! En dehors de Tabs, un autre morceau code m'avait intéressé en terme d'exemple : Round Corner. Mais, il a un léger problème à mes yeux, il ne fonctionne pas avec Safari… Et je l'utilise ! Je me suis donc tourné vers son cousin Curvy Corners qui fonctionne sous Firefox, Internet Explorer, Safari et Opera.

Leur intérêt réside à ne pas utiliser d'images pour faire des coins non carrés et surtout de ne pas modifier la structure de Dotclear. Ma victime idéale est le thème alto qui utilise des coins arrondis pour les billets, les éléments de listes de la barre de menu et les commentaires.

De suite, je vous livre le thème altowithjQuery. Par ailleurs, les modifications du fichier style.css ne seront explicitées que si elles interagissent directement avec le code javascript.

Le thème fonctionne avec la version jQuery de Dotclear 2 beta 5 et la 1.1.

Effet d'arrondi

Il faut modifier le fichier _head.html pour inclure le jQuery, celui contenu dans le thème default - et le script Curvy Corners - inclus dans le thème altowithjQuery.

<script src="{{tpl:BlogThemeURL}}/../default/js/jquery.js" type="text/javascript"></script>
<script src="{{tpl:BlogThemeURL}}/jq-corner.js" type="text/javascript"></script>

En terme de feuille de style, les aplats de couleurs sont définis pour chaque zone à arrondir comme le contenu des billets (.post) ou les listes des catégories (#sidebar .categories). Sur chacune de ces zones, le padding a été porté à 10px (padding: 10px;).

J'ai essayé d'optimiser l'effet arrondi car ce script est très consommateur de temps processeur, c'est un euphémisme… Il vaut mieux limiter le nombre de billet ainsi que le nombre de widget. De même, lors de recherche d'éléments de feuille de style, jQuery trouve plus rapidement les id - comme #top - que les balises html - comme div - que les classes - comme .links. Il est préférable d'utiliser #sidebar .links que .links.

Pour appliquer le même effet sur plusieurs zones, les tableaux sont acceptés ("elem1,elem2,…,elemn"). Le code, avec ouverture du DOM, donne.

<script type="text/javascript">
$(document).ready(function() {
$("#sidebar ul,#comments dd,#pings dd,#comment-form .hidecomment-form,#attachments ul,#content .post,#content .content-inner ul, body.dc-archive-month .content-inner, body.dc-tags ul.tags").corner();
});
</script>

Pour les arrondis, c'est déjà fini. Il y a plus à écrire dans la feuille de style que pour le code javascript ! Les arrondis débordent sur les éléments les précédents et les suivants, il est donc nécessaire de modifier l'espacement entre les différents éléments.

Une bannière changeante

Le thème alto utilise le php pour modifier la bannière du blog. Avec Dotclear 2, il est nécessaire de passer par un template et un fichier _public.php pour le thème.

Le thème contient 3 bannières que j'ai renommé round0.jpg, round1.jpg et round2.jpg. Dans un fichier _top.html, un script javascript de base est suffisant comme

<script type="text/javascript">
<!-- 
 document.write("<img src='{{tpl:BlogThemeURL}}/img/round" + parseInt(Math.random()*3) + ".jpg'  alt='banner' />");
-->
</script>

Mais, le script jQuery sera dans le _head.html.

Tout d'abord, il est nécessaire d'ajouter comme première ligne au fichier _top.html.

<div id="banner">&nbsp;</div>

Dans la feuille de style, il est créé l'espace nécessaire à l'image de fond puis le titre du blog est positionné sur la bordure noire des bannières et doit apparaître après le chargement de la bannière (z-index). Une classe par image est créée (round(n)).

#banner {
	display : block;
	position : absolute;
	background-color: transparent;
	width: 723px;
	height: 150px;
	top : 69px ;
	left : 79px ;
	z-index: 1;
	padding: 0;
	}

.round0 { background : transparent url(img/round0.jpg) no-repeat top left; }

.round1 { background : transparent url(img/round1.jpg) no-repeat top left; }

.round2 { background : transparent url(img/round2.jpg) no-repeat top left; }

#top h1 {
	position : absolute;
	top: 165px;
	left: 83px;
	z-index: 2;
	}

Pour fonctionner, le code pour l'affichage de la bannière doit être positionner avant l'effet d'arrondi. Il est donc positionné entre la déclaration du code javascript au DOM et le script sur les parties s'affichant après le _top.html. Le nombre aléatoire s'appuie sur le même code javascript standard, la fonction jQuery addClass permet d'ajouter une classe à la division #banner. Comme tout javascript, il est possible de constituer les éléments avec des variables et concaténation.

var round = parseInt(Math.random()*3);
	$('#banner').addClass('round'+round);

Des fioritures pour l'affichage d'un billet

Le formulaire des commentaires occupe un espace important. Il est facile de l'afficher/masquer en se basant sur l'exemple précédent. Pour une meilleure utilisation, le fichier _post.html par défaut sera modifié. Un div (.hidecomment-form) est ajouté encadrant les deux fieldset de la division #comment-form ainsi le titre Ajouter un commentaire (h3) servira de bouton pour afficher/masquer le formulaire.
Comme le code ne concerne que l'affichage d'un billet et post.html est déjà modifié, le code est ajouté à ce fichier avant la division #comment-form.

<script type="text/javascript">
$(document).ready(function() {
$(".hidecomment-form").hide();
$("#comment-form h3").click(function() {
var answer = $(this).next();
if (answer.is(':visible')) {
answer.slideUp() } else {
answer.slideDown();
}
});
});
</script>

La division contenant le formulaire des commentaires est cachée. Elle s'affiche/masque après un clic que Ajouter un commentaire avec un effet descendre/monter. Cela pourrait être suffisant mais lors d'une prévisualisation, le formulaire reste cacher et il faut de nouveau cliquer pour modifier ou pour envoyer le commentaire.
Je fais une vérification pas très orthodoxe de la présence de la division #pr. Je vérifie si elle est visible alors le formulaire des commentaires est affiché sinon il est masqué. #pr est préféré à .comment-preview pour la rapidité comme expliquer plus haut. La ligne de masquage du formulaire est remplacé par

if ($('#pr').is(':visible')) {$('.hidecomment-form').show()} else {$(".hidecomment-form").hide()};

Conclusion

Le thème altowithjquery est donc « kitté » à mort.

Avec un core 2 duo sous Mac OS X et un serveur local, 3 à 4 secondes sont nécessaires pour charger la bannière et obtenir les effets d'arrondis pour 20 billets et 8 listes dans la barre de menu. Avec un hébergement 1and1 et 9 effets d'arrondi, le chargement s'effectue en 4/5 secondes. Dans l'ordre de rapidité arrive Opera - quasi instantané -, Safari - bizarrement ! - et Firefox.

Avec un bon vieux Pentium III à 866 Mhz et windows 2000, on se traînaille à 6/7 secondes en accès sur ce site. La lenteur se voit car la bannière et les coins arrondis se font en même temps sous IE.

Visualiser le thème.

Premier pas en jQuery, afficher/masquer des listes dans la barre de menu de Dotclear 2

pyeb — Mon, 15 Jan 2007 23:16:00 +0100

Dotclear 2 utilise jQuery comme librairie javascript. La manipulation des widgets en est l'exemple le plus simple à observer avec l'usage du glisser/déposer et l'affichage/masquage des préférences des widgets.

Mais bon, ce qui fait vraiment saliver, ce sont les effets de transition qui se produisent sur le blog lui-même. Les exemples qui m'ont frappé l'esprit sont ceux du grand architecte et du codeur nocturne. Il faut donc mettre les mains dans le cambouis et faire cela dans l'ordre. On cherche des détails sur jQuery, on s'amuse dans le bac à sable et enfin, on passe aux travaux pratiques !

Pour ce faire, il faut demander à…

jQuery, librairie javascript

jQuery est une librairie javascript et un langage objet. Elle permet d'utiliser les navigateurs internet comme des logiciels offline et propose des effets à partir des événements créés par l'utilisateur ou à partir des caractéristiques

Mais l'essentiel, les actions des scripts sont séparées de la structure html comme les feuilles de styles css pour la mise en forme.

Quels navigateurs compatibles ?

Les navigateurs internet supportés sont Firefox 1.5 et +, Internet Explorer 6 et +, Safari 2 et +, Opera 9 et + ainsi que Konqueror.

Bien commencer, s'amuser dans le bac à sable

Un tutoriel est toujours indispensable pour bien débuter, d'autant plus en français pour les allergiques à l'anglais comme moi. Danse avec jQuery est découpée en 4 parties pour approcher jQuery et connaître toutes ses possibilités.
Il est indispensable de télécharger le kit de démarrage puis de s'amuser avec les exemples du tutoriel. Et se laisser guider par ces petites envies… Un peu de massacre, un peu de sublime, ce n'est qu'un bac à sable !

Après, il devient nécessaire de connaître les différentes fonctions que comprend jQuery. Un petit tout sur le site et sa documentation s'impose.

Liens utiles pour jQuery

Le site jQuery et le lien vers la documentation (tutoriel, référence des fonctions, …)
Le site de support en français déjà présenté
Des exemples d’usage de jQuery avec explication, mise en œuvre et démonstration
Un site bibliothèque qui propose des effets supplémentaires
Des scripts sympathiques qui peuvent être utilisés pour Dotclear : Thickbox, un effet Lightbox, Tabs, effets sur les onglets comme chez Pep, Splitter, modifier la largeur des colonnes, Round Corner, faire des coins ronds et plein d’autres sans toucher le code HTML.
Une liste non exhaustive de scripts supplémentaires sur jQuery.

Un peu de pratique, afficher/masquer des éléments de la barre des menus

Pour ce premier exemple, la structure d’affichage standard des différentes pages de Dotclear 2 n’évoluera pas, seule _head.html sera modifiée. Deux choix sont possibles soit le fichier _head.html du thème default est modifié et alors tous les thèmes sans ce fichier le sont également, soit créer ou modifier _head.html pour un thème particulier.

Les fichiers complets et à télécharger sont en fin du billet. Le code est compatible avec la version Dotclear 2 beta 5.2 et la version 1.1 de jQuery, toujours moins d'effort pour la suite.

Activer le support de jQuery

Le thème par défaut de Dotclear 2 contient la librairie jQuery. Il suffit alors de la charger. Il faut ajouter le code suivant au fichier _head.html.

<script type="text/javascript" src="{{tpl:BlogThemeURL}}/../default/js/jquery.js"></script>

Afficher/masquer des éléments

Plus particulièrement, ce script s’applique aux thèmes à deux colonnes. Le but est de masquer/afficher les listes pour les mots clefs ainsi que pour les liens. Généralement, ce sont ces éléments qui peuvent être ou devenir très longs.

Pour expliquer le fonctionnement, le code et le commentaire portent uniquement sur les mots clefs. Après avoir déclaré un script javascript et inséré la récupération du script, il faut afficher le signe de masquage des listes, ici un triangle.

$(".tags h2").addClass("hideul");

$('.tags').find('ul').hide().end();

Le code permet une recherche dans les éléments de la classe .tags ayant une balise ul et masque cette balise.

$('.tags').find('h2').click(function() {
var answer = $(this).next();
        if (answer.is(':visible')) {
            answer.slideUp("fast");
			$(this).removeClass("showul");
			$(this).addClass("hideul");
		} else {
	        answer.slideDown("slow");
			$(this).removeClass("hideul");
			$(this).addClass("showul");
        }
    });

Le code permet une recherche dans les éléments de la classe .tags ayant une balise h2, niveau de titre. Lors d’un clic sur le niveau de titre h2, il est vérifié si la liste est masquée ou affichée puis est appliqué l’effet slide – rapide au masquage et lent à l’affichage – ainsi que la modification du signe d’affichage/masquage par suppression/ajout de classes à la balise h2, représentée par ''this'.

Dans le code de Dotclear, les listes ul de la barre de menu, en dehors des liens avec des catégories précédés par la balise h3, sont précédées de la balise h2. C'est la fonction next() qui sélectionne la balise ul.

Pour cette raison, l'affichage/masquage des liens demande deux scripts différents : un pour le couple h2/ul et un autre pour h3/ul. Le code est le même seule les balises changent.

Ajouter une feuille de style

Il est nécessaire de définir les classes .hideul et .showul mais également laisser un espace entre les niveaux de titres et le signe d'affichage/masquage.

.links h2, .tags h2 { padding-left: 20px; } /*pour les liens sans catégorie*/
.links h3, .tags h2 { padding-left: 20px; } /*pour les liens avec catégorie*/
.hideul { background: transparent url(img/hide.gif) no-repeat top left; }
.showul { background: transparent url(img/show.gif) no-repeat top left; }

Le code pour déclarer la feuille de style s'insére après la déclaration de la feuille de style style.css. Les régles de customjquery.css doivent primer.

<style type="text/css" media="screen">
 @import url({{tpl:BlogThemeURL}}/customjquery.css);
</style>

Voir la démonstration

Choisissez le thème soberblack ou cliquez là.

Télécharger les éléments

Le fichier contient deux dossiers : liens avec catégorie et liens sans catégorie. Chaque dossier contient un fichier _head.html, customjsquery.css et un dossier avec 2 fichiers gif pour l'affichage/masquage.

Télécharger l'archive.

Les logiciels de développement pour dotclear

pyeb — Sat, 02 Dec 2006 22:05:00 +0100

Installation d'un serveur web Apache avec PHP

Mac OS X repose sur l'unix FreeBSD, le serveur Apache et PHP sont déjà présents. Pour autant, PHP n'est pas en version 5. Il est possible d'installer le nécessaire avec le Terminal ou des packages.

Mais pourquoi se compliquer la vie alors que MAMP est prêt à l'emploi et s'installe & se désinstalle proprement. Seule restriction, le dossier MAMP doit être à la racine du dossier Applications.

La version 1.4.1 comprend Apache 2, PHP 4 & 5, MySQL 5, PHPMyAdmin, SQLiteManager… La compilation d'autres outils est possible si nécessaire. MAMP existe en version Universal, PPC & Intel.
Site de MAMP.

Logiciels d'édition de texte avec coloration du code

J'utilise toujours la version 2.2 de SubEthaEdit, en version Universal, qui était en version freeware pour un usage personnel. Ce n'est plus le cas avec les dernières versions, c'est devenu un shareware quelque soit l'usage. La version française a ainsi disparu.
Son origanlité tient du fait que cet outil de développement soit aussi une application collaborative.
Site de SubEthaEdit.

Smultron est lui aussi un éditeur texte multisyntaxe en GPL et en français. L'interface est moins sympathique et moins pratique mais le résultat est le même.
Site de Smultron

Bare Bones et son BBEdit sont des vieux poids lourds du monde Mac. BBEdit reste un shareware certes mais puissant. On pourra se rabattre sur son petit frère TextWrangler qui est lui un freeware. Les deux logiciels ne fonctionne que dans la langue de Shakespeare.
Site de Barebones.

Pour s'amuser avec les css, CSSEdit est certainement l'application la plus intéressante. L'auto-implémentation des style css est présente, c'est plutôt rare. Pour les différentes options, des modules graphiques classés par type de style css (Fonts & Color, Background... ) sont présents. Petit bémol productif, la sélection d'un style css ne fait pas apparaître le module correspondant, on peut aller plus vite avec ses petits doigts.
Le vrai plus, c'est la prévisualisation en temps réel des styles dans le contexte voulu de dotclear. Ce n'est pas direct. Il faut d'abord choisir le thème voulu dans le navigateur puis utiliser Add URL (pour mamp : http://localhost:8888/testdc2/index.php/ par exemple). On peut ajouter autant d'URL que de fichiers .html. La prévisualition permet de repérer les blocs et la structuration de la page html.
Et il y a même un outil de validation !
C'est 15 $… mais bel outil.
Site de CSSEdit.

Pour nos amis geeks, il y aussi une application tout graphique d'emacs : Aquamacs Emacs. En GPL forcément.
Site d'Aquamacs.

Logiciel de récupération de source (svn)

Il n'y a pas d'hésitation, on se tournera vers svnX. C'est un logiciel open source dans le plus pur style Aqua. Ce n'est qu'une interface graphique de l'outil en ligne de commande svn qu'il faudra par ailleurs télécharger. Pour obtenir les derniers développements de dotcleat, il suffit de rentrer l'adresse des svn de dotclear 2 et c'est parti.
Site de svnX.

Logiciels de transferts FTP

Il est nécessaire si on possède un hébergement de téléverser dotclear vers celui-ci.

Du côté de l'open source, on se tournera du côté de Cyberduck. Pure tradition de logiciel FTP, bonne utilisation des technologies Mac OS X. Pour un meilleur confort, il faut modifier les élèments de la barre d'outils.

Site de Cyberduck

Il existe plusieurs logiciels payants comme Captain FTP, RBrowser (gratuit en utilisation FTP) ou Interarchy. Cela va d'une utilisation proche du Finder à une intégration poussée avec les technologies de Mac OS X (Automator, barre d'outils…).
Mais le plus simple d'utilisation et le plus esthétique reste Transmit. Vous avez deux fenêtres, ordinateur et hébergement, des favoris personnalisables. Vous pouvez abuser du glisser/déposer au lieu de synchroniser un dossier complet. Et l'interface de synchronisation est complète mais reste compréhensible. Fonctionnement OS X.
C'est mon choix… :roll:
Le site de Transmit.