Le blog de Guillaume Bizet

Le blog de Guillaume BIZET : Blogging, iPhone, Webdesign, XHTML, CSS, Web2.0, Dotclear et Dotclear2, ...

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

Thème iPhone pour Dotclear2 : dc2iPhone

Comme je l’avais dit il y a un moment maintenant, j’ai réalisé un thème générique spécial pour l’iPhone mais qui fonctionne aussi sur tous les mobiles, il ne faut pas être sectaire non plus ;)

Description et screenshots

Vous y trouverez une barre de navigation qui sera présente sur toutes les pages et qui vous permettra d’accéder à tout moment à :

  • la home
  • la liste des catégories
  • la liste des tags
  • la recherche

Cette version iPhone reprends toutes les fonctionnalités d’un blog fonctionnant sous Dotclear 2 :

  • une home
  • tous les posts
  • en mode post quand vous cliquez sur la catégorie, vous accédez à la liste de tous les billets de cette catégorie
  • idem pour les tags
  • Vous pouvez bien sur poster des commentaires
  • mais aussi vous abonner au flux RSS

Voici les différents screenshots que j’ai réalisé :
dc2iPhone accueil dc2iPhone catgéories dc2iPhone tags dc2iPhone recherche dc2iPhone post dc2iPhone post dc2iPhone post dc2iPhone post dc2iPhone post

Installation

Tout d’abord je ne peux que vous conseiller fortement d’utiliser le plugin mobileThemeSwitcher de Noël, que je remercie d’ailleurs pour son excellent travail, qui vous permettra ainsi au visiteur naviguant à partir de son mobile d’être automatiquement redirigé vers la version mobile de votre blog

L’utilisation de ce thème comporte néanmoins quelques manipulations et installation pour fonctionner correctement :

  1. Installez le plugin CategoriesMode v0.2 que vous trouverez chez adjaya. Il sert à ajouter une page pour les catégories, leurs descriptions, etc … vous y accéderez par l’icone dossier de la barre de navigation
  2. Créez une page pour la recherche. Et oui, dans un blog “normal” le champ de recherche est dans la sidebar, hors dans cette version iPhone, il n’y en a pas !!! Ici j’ai opté pour une page avec le champ de recherche.
    Pour faire cela c’est ultra simple
    1. Dans le tableau de bord de votre blog, cliquez sur “Pages” dans le menu de gauche
    2. Créez une nouvelle page dont le titre serait par exemple : “Recherchez …”
    3. Si vous êtes en mode wiki changez pour le mode xhtml
    4. Allez tout en bas de la partie contenu et cliquez sur source
    5. Remplacez les balises déjà présentes par le code ci dessous en prenant bien soi de remplacer nomdedommaine.tld par votre nom de domaine
    6. Enregistrez
    7. Modifiez l’URL de la page en cliquant sur le petit cadenas et remplacez le contenu par “Recherche” en respectant bien sur la casse
    8. Enregistrez de nouveau
  3. Enfin, en fonction de la longueur du nom de votre blog ou pas, je vous invite à aller décommenter / commenter les lignes nécessaires dans la CSS

Code à insérer dans la source de la page de recherche :

<div id="search">
<form action="http://www.nomdedommaine.tld" method="get">
<fieldset>
<p><input size="10" maxlength="255" id="q" name="q" value="" type="text" />
<input class="submit" value="ok" type="submit" /></p>
</fieldset>
</form>
</div>

Voilà c’est prêt !!!
J’espère que ce thème va vous plaire et j’attends vos retours

Pour le téléchargement c’est plus bas.
Enfin dernière info, ce thème est distribué sous licence Creative Commons BY-NC-SA

Guillaume BIZET

Auteur: Guillaume BIZET

Restez au courant de l'actualité et abonnez-vous au Flux RSS du blog ou du Flux RSS de cette catégorie

Jarodxxx Jarodxxx ·  02 avril 2009, 15:01

Je suis super impressionné par ce design, je vais le tester et peut etre avoir enfin ma version mobile :)

Guillaume Guillaume ·  02 avril 2009, 15:58

@Jarodxxx : merci ;)

Fab Fab ·  08 avril 2009, 16:04

Bonjour,

J'attendais vraiment la sortie de ce thème, et je n'ai pas été déçu.

J'ai pu constater quelques différences de styles de codage, donc j'ai mis les mains dans le cambouis et j'ai mis mon grain de sel.
J'ai réarrangé ton menu, qui était trop lourd à mon avis en terme d'images et de CSS, pour quelques choses de plus léger (un seul background, des icônes plus petites).

D'ailleurs, tous tes background sont en 5*60px, ce qui est bête pour du repeat-x, autant mettre 1*60 et alléger le temps de chargement (minime mais je suis perfectionniste).

J'ai fait un templates pour le plugin Contact, mais j'aimerais que l'adaptes toi même (surtout au niveau CSS pour ressembler aux formulaires de commentaires).

En parlant d'icônes, j'aimerais beaucoup en avoir plus dans le même style, ça aiderais à personnaliser le tout.

Je reviendrais une fois que j'aurais adapté le thème à mon multiblog.

Icarius Icarius ·  12 avril 2009, 04:39

:)

testé sur mon Iphone, c'est pas mal du tout. Si seulement l'entrée au clavier ne serait pas aussi longue. Quand on a envie d'écrire un bon et long article ça devient vite difficile.

Je me demande si ça ne serait pas mieux sur un smartphone à clapet peut-être. Dans tout les cas bravo, Dotclear ne dispose pas d'autant de supporter que Wordpress par ces temps ci.

Bravo Mister

maxime maxime ·  15 avril 2009, 19:53

excuser moi j'ai telecharger depuis mon pc un themes pour mon ipod touch...le probleme c'est que je ne sais pas commenty le mettre surr l'ipod :s

Guillaume Guillaume ·  16 avril 2009, 13:31

@ Fab et Icarius : Merci 8-|
@Maxime : ce thème est un thème de blog et non pas un thème à installer sur son iPhone :p

Fab Fab ·  17 avril 2009, 17:52

Au passage, je viens de trouver comment faire une plus belle page de recherche.

Il faut le plugin Related (Pages connexes) dans sa version 1 (http://callmepep.org/bricoland/post...), vous faites un fichier rel_recherche.html avec le code donné ce dessus et tpl:BlogURL à la place de Nom de domaine et le tour est joué !

Avec le plugin Multiblog Search, vous n'avez qu'a remplacer le "q" par "qm" et le formulaire marchera.

Toujours pas retravaillé le thème en lui même, je repasserais.

Chris Chris ·  21 avril 2009, 22:30

J'ai testé ça sur l'Iphone d'Icarius qui me l'a recommander. Je me suis personnellement demander si yavait un équivalent pour fire ça depuis un smartphone Symbian, Android ou Windows Mobile

brol brol ·  09 mai 2009, 13:15

Salut Guillaume,
Sympa cette initiative ;-)
Quand une image est en float et que sa hauteur dépasse celle du texte se trouvant à côté, il y a de sales superpositions ;-\
A voir ici : http://dev.brol.info/post/2009/02/2...

brol brol ·  09 mai 2009, 13:17

En ajoutant un clear:both; à .dc-post #post-rss, ça règle le problème.

djeelo djeelo ·  21 mai 2009, 20:32

adopté ! merci, c'est du bon boulot ! :-D

Richard Richard ·  30 juin 2009, 13:29

J'ai un petit soucis avec les pages catégories & recherche, mais sinon superbe thème !

Associé à http://www.noelguilbert.com/?post/2... c'est que du bonheur.

ASMousquetaires.com ASMousquetaires.com ·  22 juillet 2009, 21:03

Bonjour,

Merci beaucoup pour ce tuto très simple et très efficasse.

Je suis en train de paramétrer le théme pour mon site internet, mais j'ai une question : pour les utilistateurs d'iphone qui souhaitent naviguer sur la version classique, comment faire ? quel lien mettre ?

Merci par avance.

Jcp Jcp ·  17 août 2009, 17:20

Bonjour Guillaume,

Superbe pluging, par contre j'ai un petit soucis, car mon titre est assez grand et ce pose problème dans via l'acces avec un Iphone...
Sais tu comment je peux resoudre cela ?
Il vient d'ou ton beandeau bleu sous le titre ? "Guillaume ..."

Cordialement,

Jean-Christophe

jcp jcp ·  18 août 2009, 13:46

Bon en fait j'ai modifié le CSS et ca marche ! genial encore merci pour ce pluging !

Jean-Christophe
http://www.bboxnews.fr => Version normal et Iphone

antoine antoine ·  27 août 2009, 10:38

bonjour, je dois être super nul mais je ne trouve pas le line du theme dans votre article. Apres tant de remarque elogieuse, je souhaiterai l'installer

merci de vos conseils

anoine

Guillaume Guillaume ·  27 août 2009, 13:48

C'est là http://www.guillaumebizet.fr/post/2...

;)
hamza hamza ·  05 septembre 2009, 13:02

allo

pierreL pierreL ·  26 septembre 2009, 08:08

Bonjour,
Question de béotien, ça donne quoi sur les autres plateformes mobiles ?

Parquet Parquet ·  20 octobre 2009, 14:07

Donc c'est un plugin... mais pour un affichage digne de ce nom, on est d'accord qu'il faut un blog à part entière ? ce n'est pas une excroissance du blog principal.

Effectivement, il est facile de républier son contenu sur 2 blogs différents.

Guillaume Guillaume ·  20 octobre 2009, 16:27

@pierreL : ca marche aussi sur les autre plateformes
@Parquet : ce n'est pas un plugin, juste un theme adapté pour l'iPhone mais pour que ca marche il faut utiliser le plugin mobileThemeSwitcher

J J ·  19 novembre 2009, 21:10

Commentaire depuis un iPhone et pour avoir pas mal cherche comment adapter mon site a l iPhone je suis carrément bluffé.
Demain j'installe. Fabuleux.
Merci
j

J J ·  21 novembre 2009, 19:01

Salut,
ça y est c'est installé. Très facile a faire. Merci encore et bravo.
J

K20 K20 ·  02 décembre 2009, 19:14

Je tenais juste à te remercier pour ce thème qui fonctionne à merveille :)
Je vais juste le modifier un peu au niveau du CSS mais le reste est parfait.

Très beau boulot ;)

Guillaume Guillaume ·  18 décembre 2009, 15:13

de rien ;)

Sylvain Sylvain ·  14 mai 2010, 12:19

Bonjour, et bravo pour l'adaptation en version mobile.
Je confirme que je ne trouva pas non plus le lien de la pièce jointe.. Peut-être est-elle enlevé du billet ou un paramétrage du thème ?
Dans l'attente, bonne continuation.

LolYangccool LolYangccool ·  15 mai 2010, 09:02

Je ne trouve pas le lien de téléchargement du thème, aurais-tu la gentillesse de me l'envoyer par mail? merci !

plombier paris plombier paris ·  02 août 2010, 21:10

merci pour ce super blog 8-)

jc.dasneves jc.dasneves ·  08 octobre 2010, 16:23

Salut

Je suis passé à la version 2.2 de dotclear et le thème ne veut plus s'afficher il remet le thème par défaut quand je suis sur mon iPhone.

J'ai bien réinstallé les plugins "plugin-categoriesMode-0.2.zip", "plugin-mobileThemeSwitcher-0.2.zip" et le thème évidemment. Dans la section "Pages" j'ai bien retrouvé mon code pour la Recherche.

Est ce qu'il n'est plus compatible ? Est ce que votre thème sur vos sites marche toujours pour ceux qui sont passés en 2.2 ?

StandarT StandarT ·  21 décembre 2010, 14:52

Merci Guillaume, comme d'hab, c'est un superbe boulot que tu nous as fait là ! avec le plugin mobileThemeSwitcher de Noel (que j'ai modifié pour prendre en compte les terminaux android), ça marche du tonnerre sur mon Galaxy S !
Merci et encore bravo

Guillaume Guillaume ·  22 décembre 2010, 09:28

@StandarT : mais de rien ;)

Oum Oum ·  19 avril 2011, 11:45

Bonjour,

Je remarque que tu utilises sur ce blog une nouvelle version du thème dc2iPhone avec champs de recherche notamment. Est-elle disponible en téléchargement ?

oliv06 oliv06 ·  12 mai 2012, 20:30

Bonjour, super travail !
J’utilise le plugins “private” pour mettre un mot de passe sur la page d’accueil, comment pourrai-je faire en sorte que le form du mot de passe soit au format mobile ?

Merci d’avance,

-Oliv.


À Voir Également

Thème ColorSide pour Dotclear2

Theme ColorSide pour Dotclear2

Les billets ont été peu nombreux ces derniers mois sur le blog mais maintenant que j’ai un peu plus ...

Lire la suite

dc2iPhone accueil

Un thème spécial iPhone pour Dotclear 2

Comme certains d'entre vous le savent peut être je suis propriétaire depuis vendredi d'un iPhone 3G ...

Lire la suite