Construire un thème pour
navigateurs mobiles sur Concrete5
Introduction
Dans le monde des smartphones, l'iPhone à changé la done. Nous pourrions débatre des avantages des différents OS embarqués et types d'appareils, mais nous ne pouvons nier, qu'au début de l'aventure, l'iPhone à fait pencher la balance. C'est d'autant plus remarquable lorsque vous utilisez Safari mobile. Le monde avait enfin un navigateur conforme aux standards mobiles.
Une choses très intéressante c'est produite immédiatement après la sortie de l'iphone. Les web designers ont commencés à construire des sites web spécifiques pour iPhone. Ces sites web utilisent des feuilles de styles (et parfoit un contenu et graphisme complet) pour adapter leurs contenus et présentations pour Safari Mobile. Ils vont également fréquemment reprendre l'esthétique iPhone.
Si les concepteurs web construisent leurs sites en respectant les standards W3C avec des colonnes liquides, Safari mobile les affichera parfaitement, et rapidement. Par exemple, le site d'andrew, visualisé sur Safari mobile, s'affiche parfaitement, et sans barres de défilement en paticulier.
En y pensant, ces sites ne sont pas exactement dans le style des blogs communs. Ceux-ci ayant évolués pour inclure beaucoup de JavaScript, images, et divers codes spécifiques pouvant ralentir le rendu sur iphone ou matériel avec des processeurs plus légés. Dans cet optique la conception d'une version mobile peut faire la différence – même si le site standard est facilement consultable.
Présentation de C5Touch
Maintenant que nous avons cela en tête, je vous présente C5Touch, un thème Concrete5 optimisé pour le navigateur safari mobil.
c5touch est basé est basé sur un puissant thème Wordpress nommé WPTouch. Si vous utilisez un blog Wordpress, je vous le recomande fortement. c5touch ne fait pas la moitié de ce dont WPTouch est capable.
Ceci du fait que Wordpress, par nature, est un système bien plus structuré que Concrete5. Mais également car c5Touch est tout jeune, et qu'il est plus proposé comme un simple exercice démontrant ce qu'il est possible de faire avec un peu de modifications sur concrete5. J'aimerais bien que les développeurs dans l'âme étendent ces capacités.
Considérez donc ceci comme un concept initial.
Téléchargement, installation et paramétrage
Concrete5 offre une méthode d'installation et d'activation de thèmes simplifiée. c5Touch est quand à lui légèrement différent, et ce pour une raison simple: ce ne sera pas le seul thème actif sur votre site. Vous installez c5Touch mais laissez votre, ou vos, thème(s) maître actif. Vous ajouter juste un peu de code permettant à Concrete5 d'afficher c5Touch lorsqu'il détecte une requête de navigateur mobile.
Avant de commencer
1 Télécharger c5Touch:
c5Touch est disponible ici ou ici
2 Installer c5Touch sur votre site:
Téléversez et Décompressez c5Touch sur votre répertoire /themes (à la racine de votre site). Puis installez c5Touch depuis votre gestionnaire de thème du tableau de bord. (pour plus d'information sur comment installer un thème cliquez ici).
3 Modifier /concrete/libraries/view.php
Si vous utilisez une version de Concrete5 antérieure à C5.4.x vous allez devoir réaliser une modification sur le noyau de C5. Dans le cas contraire celle-ci est déjà codée par défaut dans le fichier.
Cependant cela ne coûte rien de vérifier.
Editer votre fichier /concrete/libraries/view.php
Cherchez la ligne:
// Extract controller information from the view, and put it in the current context
Et modifiez celui-ci de façon à obtenir quelque chose comme:
Events::fire('on_start', $this);
// Extract controller information from the view, and put it in the current context
4 Activer les événements d'applications sur votre site
Si ce n'est déjà fait pour une autre application, l'activation d'événements d'applications permet aux dévelopeurs de greffer des applications personnalisées et des portion de codes sur les actions standard de Concrete5, sans avoir à modifier le noyau. Cette activation doit être faite en premier.
Pour ce faire, éditez votre fichier /config/site.php et ajoutez la ligne:
define('ENABLE_APPLICATION_EVENTS', true);5 Insertion dans l'événement global "on_start"
L'événement on_start (celui dont nous avons parlé sur l'étape 3) est éxécutépar la librairie de visualisation (view) au tout débutde la session de rendu de la page.Avant que le contrôleur de thème soit chargé.
De cette façon nous pouvons vérifier quel navigateur émet la requête sur le site et, si nécessaire, basculer sur le thème optimisé pour navigateurs mobile.
Créer un fichier nommé site_event.php dans le répertoire /config. ensuite coller le code suivant à l'intérieur de celui-ci:
<?php
Events::extend('on_start', 'ThemeSwitcher', 'checkForIphone', 'libraries/theme_switcher.php');
Ce code peut paraître complexe, mais il n'en est rien.
Le premier argument on_start est simplement le nom de l'événement aplicatif de Concrete5 sur lequel nous voulons nous greffer.
Ceci est séparé des événements controller-level ou page-type-level.
Le second argument ThemeSwitcher est le nom de la classe que nous allons appeller.
Le troisième argument checkForIphone que nous allons appeler sur la classe ThemeSwitcher.
Pour terminer, le quatrième argument nous indique où trouver la classe ThemeSwitcher en question.
6 Création de la classe ThemeSwitcher
Maintenant nous avons besoinsde créer le fichier de la classe comme spécifié au point 5. Créer un fichier dans votre répertoire /libraries à la racine, nommé theme_switcher.php.
Ensuite coller le code suivant à l'intérieur:
<?php
class ThemeSwitcher {
public function checkForIphone($view) {
if (strstr($_SERVER['HTTP_USER_AGENT'], 'iPhone') ||
strstr($_SERVER['HTTP_USER_AGENT'], 'Android') ||
strstr($_SERVER['HTTP_USER_AGENT'], 'webOS')) {
$iphone = PageTheme::getByHandle('c5touch');
$view->setTheme($iphone);
}
}
}
Ce code est relativement simple. Il vérifie juste si le user agent de la reqête contient le mot clef indiquant que l'internaute utilise un appareil mobile. Si tel est le cas, on récupère l'objet thème pour c5Touch et générer la vue (qui est passée en argument de méthode) correspondante.
Pour une version étendue de cette classe voir ci-dessous.
Et voilà !! Appréciez la compatibilité iPhone.
Notes & Infos utiles
A ce stade vous avez peut être remarqué qu'il reste du travail pour permettre un affichage parfait de votre site sur un navigateur mobile. c5Touch est le thème de départ, mais vous voudrez certainement créer des types de pages et des stylespersonnalisés pour réellement adhérer à votre charte. Voici quelques astuces qui ont étés implémentées sur andrewembler.com
1 Ajouter certains style CSS de votre site sur le thème optimisé pour iPhone
Votre site mobile peut paraitre terne. Copiez des styles et blocs ré-utilisables que vous avez définis pour votre thème maître dans votre site c5Touch. Utilisez la feuille de style vierge site.css pour ce faire.
Par exemple andrew utilise des ombres portées et autres effects dans toutes les image d'entête du site. Il à donc copié ces définitions de styles dpeuis la feuille de son thème maître dans son thème optimisé pour mobiles.
2 Redimensionner les images
Maintenant que les textes rendent bien lors de l'utilisation de c5Touch, les images des contenu sont beaucoup trop grandes et s'affichent bizarement. Il est donc possible d'utiliser le code ci-dessous pour les redimentionner plus petites.
Dans votre répertoire /blocks à la racine de votre site, créez undossier nommé /image, et copier le fichier /concrete/blocks/image/view.php dans votre nouveau répertoir /blocks/image/
Editer ensuite votre fichier /blocks/image/view.php et réalisez les changements comme suit:
<div class="main-image">
<?php
$v = View::getInstance();
if ($v->getThemeHandle() == 'c5touch') {
$ih = Loader::helper('image');
$ih->outputThumbnail($f, 275, 1000);
?>
<?php } else { ?>
<div><img src="<?=$f->getRelativePath()?>" class="footer-image" width="<?=$f->getAttribute('width')?>" height="<?=$f->getAttribute('height')?>" alt="footer image" /></div>
<?php } ?>
<?php if ($altText) { ?>
<div class="main-image-caption"><?=$altText?></div>
<?php } ?>
</div>Ce code vous assure que, lorsque les images sont affichées sur le thème c5touch, elle soient redimensionnées plus petites en utilisant l'algorithm autoresize de concrete5 (qui prend en compte le cache, la transparence, etc...).
3 Expérimentez !
Ce tutoriel est un point de départ. Actuellement c5Touch n'est pas une solution prête à l'emploi comme la plupart des applications de concrete5. Si un intérêt particulier pour ce type d'application se fait sentir, une version package pourrait bien être développée dans le futur. ce qui serait l'idéal, dans le sens ou le format application pourrait automatiser toutes les manoeuvre qui doivent pour le moment êtres réalisées manuellement par le développeur.
Mais en même temps, nous aimerions un retour des utilisateurs, ainsi que des suggestions. Prouvant que c'est utile.
