pyeb theme 2 dotclear

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

Tag - Développement web

Fil des billets - Fil des commentaires

vendredi 14 décembre 2007

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

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

bootcamp.png Parallels.png fusion.png

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

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

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.

mardi 6 février 2007

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

freshyOne 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.

Lire la suite...

jeudi 25 janvier 2007

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

Visualiser le thème altowithjquery 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.

Lire la suite...

lundi 15 janvier 2007

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

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 à…

Lire la suite...

samedi 2 décembre 2006

Les logiciels de développement pour dotclear

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.

MAMP.pngMais 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

SubEthaEdit.pngJ'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.pngSmultron 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

TexteWrangler.pngBare 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.

CSSEdit.pngPour 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)

svnX.pngIl 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.

cyberduck.pngDu 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

transmit.pngIl 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.