pyeb theme 2 dotclear

2008

2007

2006

Accueil

Aller au contenu | Aller au menu | Aller à la recherche

 

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

14 décembre 2007

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

TextMate.png 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

safari.png 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

firefox.png 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

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

 

greyOne, photoblog thème

18 octobre 2007

greyOne.jpg

Après plusieurs tentatives peu heureuses, j'ai fini par mettre en forme le thème photoblog qui me convient. Un cadre arrondi pour visualiser la photo, un style noir/gris aperture ou lightroom like, un peu web 2.0… Le menu est en javascript mais simple. Pas de librairie complémentaire à charger…

… sauf en utilisant dclightbox ou dcthickbox. Petit détail esthétique qui a son importance, le positionnement des images doit être soit aucun soit centré.

greyOne est un thème liquide de 950 px avec une colonne et peut accepter des photos de 800 px.

Support opérationnel à partir de novembre 2007. :roll:

Télécharger le thème.

 

Ornamentals thème pour photoblog, partie 2 - intégration des effets jQuery

11 septembre 2007

ornamentals.jpg

Voici, la seconde partie sur la conception du thème pour Photoblog ornamentals.

Ornamentals est un thème fluide, mais avec #content fixé à 700px, et un fond noir. La navigation est habillée avec la librairie jQuery Accordion tandis que la librairie jQuery Imagebox - partie de la suite Interface - s'occupe de l'effet lightbox.

Télécharger le thème.

Mise à jour du 17/09/07 : compatible avec la pre alpha 5 Mise à jour du 17/11/07 : compatible avec Safari 3 Mise à jour du 27/05/08 : suppression de la librairie imagebox, compatible avec le plug-in lightbox

Lire la suite...

 

Ornamentals thème pour photoblog, partie 1 - intégration du thème au greffon Photoblog

7 septembre 2007

ornamentals.jpg

Avec l'arrivée de Dotclear 2, il est possible de faire du multiblog c'est à dire avoir plusieurs blogs avec une même base de données et la même interface d'administration. Donc au lieu d'un blog fourre-tout, il est facile d'avoir un blog principal et de déporter ces photos sur un photoblog.

Julien Mudry - zeiram sur le forum de Dotclear - avait créé un greffon Photoblog pour DC1. Une alpha pour DC2 est sortie. Petite mise en garde, le greffon est en alpha donc il fonctionne correctement mais il est encore en phase de débugage.

Pour ce thème, plusieurs choix ont été privilégiés :

  • la mise en valeur des photographies
  • une interface de navigation réduite
  • l'intégration d'un effet lightbox

Ornamentals est un thème semi-fluide - le #content fixé à 700px - et un fond noir. La navigation est habillée avec la librairie jQuery Accordion tandis que la librairie jQuery Imagebox - partie de la suite Interface - s'occupe de l'effet lightbox.

Télécharger le thème.

Mise à jour du 17/09/07 : compatible avec la pre alpha 5
Mise à jour du 17/11/07 : compatible avec Safari 3
Mise à jour du 27/05/08 : suppression de la librairie imagebox, compatible avec le plug-in lightbox

Lire la suite...

 

Ornamentals, mon premier thème pour photoblog (màj : 05/08/07)

31 juillet 2007

Ornamentals prévisualisation

Ceci est mon premier thème pour photoblog, il utilise le greffon photoblog 0.1 pre-alpha--2--4 de Julien Mudry ou zeiram sur le forum de Dotclear. Pour la présentation de ce greffon, je vous invite à lire le billet de présentation. Petite mise en garde, le greffon est en alpha donc il fonctionne mais il est encore en phase de débugage.

Le thème est, lui aussi, en version beta. Il a été testé sous Firefox 2 (Mac & PC), Safari 2 et 3 (Mac & PC), IE 6 & 7 (après de longues épreuves…) ainsi que sous Opera 9.2 (Mac). En dehors du greffon photoblog, il y a une condition obligatoire pour qu'il soit pleinement fonctionnel : cocher, lors de l'ajout d'une photo, En tant que lien vers l'image originale. Et pourquoi ?

Ornamentals est un thème utilisant la librairie jQuery et les librairies Accordion et imagebox en version modifiée. Pour mettre en valeur les photos, la barre latérale ne montre qu'une division à la fois en accordéeon. Imagebox est la version la plus proche de lightbox en jQuery, il suffit de cliquer sur la photo. D'où la présence d'un lien sur la photo.

Il est possible de mettre du texte dans un billet en plus de la photo. Par contre, il faudra séparer la photo du texte soit par 2 retours à la ligne ou l'utilisation du retour chariot dans la barre d'outil de l'édition de billet sinon cela perd de son charme…

L'explication de texte et débugage pour plus tard. Après quelques retours et autres demandes. Cliquez sur la photo pour accéder au photoblog de test.

màj 05/08/07 : J'ai adapté le thème à la dernière version du greffon et de ses nouveaux templates. La barre de navigation utilise l'effet N&B/couleur, les flux RSS sont envoyés dans le footer et J'ai corrigé quelques bugs.

Télécharger le thème.

 

Mises à jour mineures et majeures…

29 juillet 2007

… sur un air de Led Zep.

Comme le W3C a décidé de modifier son validateur, il fallait mettre à jour tous les templates .html. J'ai donc profité de cette amusement pour ajouter le bouton Envoyer pour les thèmes qui n'est profitaient pas. Tous les thèmes ont été mis à jour.

Moins trivial - enfin presque -, j'ai fait des modifications sur certains thèmes pour qu'ils utilisent les fichiers templates par défaut :

  • Pastel like et Orangeworld
  • DoTunes

Plus pervers, les images du thème Lueurs n'avaient pas un fond vraiment noir. J'ai repassé les images à la moulinette et fait quelques ajustements pour préserver les lueurs…

Bientôt quelques amusements en jQuery…

symbole.png

 

Les thèmes jQuery et dclightbox compatibles

26 juillet 2007

altowithjquery freshyOne tabsOne.jpg

Grâce aux commentaires laissés par Gérald, il n'y a plus de conflit entre jQuery et dclightbox. Il suffisait d'utiliser les bons termes pour empêcher les conflits entre les librairies jQuery et prototype…

Dans le fichier _head.html de freshyOne, il faut remplacer les lignes du script par :

jQuery.noConflict();
jQuery(document).ready(function() {
jQuery('#frame').tabs({fxSlide: true});
jQuery('a.presearch').click( function() {
jQuery('.menu li').removeClass('tabs-selected');
jQuery('div.fragment').hide();
jQuery('li.first_menu').addClass('tabs-selected');
jQuery('#tabsearch').show();
}); });

Par ailleurs, la version de altowithjquery est la version 1.1 sur le post initial.

 

Thèmes et Dotclear 2 beta 7

14 juillet 2007

La migration de mon blog sous DC2 b7, c'est déroulée sans anicroche. J'ai fait une vérification sous Safari et sous firefox, pour les thèmes en jQuery, et il ne semble pas qu'il est de problème.

 

Le retour de la revanche, une nouvelle librairie pour alto with jQuery

7 mai 2007

J'ai trouvé une librairie qui fonctionne avec les principaux navigateurs ! C'est curvyCorners for jQuery. Les problèmes avec Safari sont résolus. Le bug avec post-tags sous Opera reste comme avec les autres librairies, cela me laisse perplexe…

En nouveauté, la prévisualisation des commentaires est correcte et la liste des pages connexes s'entoure d'un joli bleu. Sinon, toujours la même punition, je ne sais pas ce que cela donne avec une vidéo flash sous IE 7. A priori, cela devrait fonctionner.

Télécharger alto with jQuery 1.1.

 

Bréderode, Slottsbacken & Thames Street, pattern is hype

22 avril 2007

brederode.jpg slottsbacken.jpg thamesstreet.jpg

En cette journée toute présidentielle, trois nouveaux thèmes avec une barre de navigation à gauche, à droite et au centre - en bas quoi. Surtout rien à l'extrême-droite ni rien sur l'identité nationale. Fini les grands aplats de couleur, le papier peint est à la mode. Nostalgie quand tu nous tiens ! Un cadre tout doré pour encadrer des photos, des tableaux.

Avec les navigateurs modernes - suivez mon regard… -, la transparence laisse paraître les motifs gris et bleus. Le rouge se marrie avec l'orange mais juste dans les rêves éveillés. Sous l'ineffable IE 6, la transparence disparaît et la structure devient fixe mais tout est fonctionnel. Ouf ! Un grand au revoir avant la prison.

Les thèmes sont plutôt adaptés à une résolution 1024 x 768 px même si le 800 x 600 px est fonctionnel.

Télécharger Bréderode, Slottsbacken et/ou Thames Street.

- page 2 de 6 -