Développement

Accéder à son site local depuis son smartphone ou un autre périphérique sous linux, mac et windows.

Il est utile quand l'on développe un site de pouvoir le tester depuis différents supports (tablette, téléphone...) pour en vérifier son bon fonctionnement, encore plus quand l'on développe un site mobile ou responsive (private joke : kikou les M1!).

Pour cela il faut être connecté sur le même réseau local, par exemple derrière la box de votre fournisseur d'accès ou un routeur. Peut importe le type de connexion (wifi ou câble réseau RJ45)

Première chose à faire récupérer l'IP de la machine qui fait office de serveur local (la machine ou est installé lamp, wamp ou mamp...) pour cela il faut ouvrir un terminal.

Sous windows : ouvrez le menu démarrer, cherchez « invite de commande » ou tapez directement cmd.
Sous mac : dans Applications/Utilitaires/terminal
Sous linux : normalement le raccourci CTRL+ALT+T cous ouvrira un terminal

puis dans la fenêtre qui s'est ouverte tapez

sous windows : ipconfig
sous mac et linux : ifconfig

Terminal sous linux

ifconfig sous linux

 

 

cmd ipconfig windows

Une adresse ip est constituée d'une suite de 4 nombres, pouvant aller jusqu'à 255, séparés par des points .

Généralement l'adresse ip commencera par 192.168....

C'est cette adresse que l'on va taper sur le périphérique sur lequel on veut tester le site, et vous tomberez sur la page d'accueil de votre serveur, comme si vous aviez utilisé l'adresse « localhost » sur votre ordinateur principal.

Exceptions

Sous windows avec wamp :
si vous avez un message du type « Forbidden You don't have permission to access / on this server »

modifiez le fichier httpd.conf (ou bien votre virtual host si vous en utilisez un) entre le les balises <directory ...>, remplacez la ligne

Allow from 127.0.0.1

par :

allow from all

Sous mac :
il se peut que vous ayez à configurer le firewall intégré pour autoriser les connexion depuis l’extérieur vers apache.
Aussi, si vous utilisez un port non standard (par exemple localhost:8888 depuis votre machine) ajoutez ce port à la fin de l'adresse ip : 192.168.XX.XX:8888

Android serveur local

Site mobile ou site responsive?

Actuellement la question qui revient souvent est doit-on faire un site mobile? Ou alors un site qui s'adapte au support sur lequel il est affiché (en utilisant par exemple le responsive design)

Les deux solutions ont leurs spécificités. Un site mobile sera plus pertinent dans le cas où l'ont offre une expérience ou un service sur mobile bien différent de celui qui est offert sur la version "normale" du site.

On peut citer par exemple le site d'un transporteur en commun, alors que le site normal affichera pleins d'informations rédactionnel, différents services... Le site mobile lui ce cloisonnera à fournir à l'utilisateur l'information dont il a besoin le plus rapidement possible et avec le moins de "fioritures".

 

Le site mobile de la sibra

Pour le cas d'un site plus redactionnel, tout le contenu, ou presque, est intéressant pour le mobinaute (qu'est-ce que je trouve ce terme con...) donc on ne va pas réduire l'offre de services entre la version normale et la version mobile.

Par contre on va tendre à améliorer l'expérience sur mobile. C'est à dire, pas d'images lourdes, pas trop d'animations, une interface alègée et simplifiée.

 

Un exemple de site "responsive"

C'est là que le responsive design prend tout son sens. Suivant la résolution d'écran de l'utilisateur, on utilisera une feuille de style x ou y par exemple. Vous pouvez essayer ici même, en réduisant la fenêtre de votre navigateur, vous devriez voir au fur et à mesure de légères adaptation : la taille de police qui diminue, les images qui feront au maximum la largeur de l'écran...

Les avantages de cette technique sont nombreux : un même site, un même contenu pour une multitude de support : tablettes, smartphones...

Quelques articles traitant du responsive design :

Et pour faire du responsive design avec Drupal, rien ne vaut le thème Omega, mais j'aurai l'occasion d'en reparler.

PharoConf Annecy 2011 à l'IMUS d'Annecy le Vieux

Logo PharoConf Annecy

La première PharoConf (ou conférence sur pharo) d'Annecy aura lieu le jeudi 10 Février 2010 à l'IMUS d'Annecy-le-Vieux.

Pharo est un langage de programmation orienté objet dérivé de Squeak. Plus d'informations sur Pharo.

Au programme, des présentations, des sprints, des ateliers.

Plus d'information sur le site officiel de la manifestation : http://pharoconf-annecy.seasidehosting.st/

 

Liste de diffusion sur le développement Android en Français

 

Logo Android

Comme certains le savent, je me lance dans le développement sur la plateforme de Google : Android.

Considéré qu'il n'y a pas encore de liste de discussion sur Android en Français, j'en ai crée une, si cela en intéresse quelques uns, voici l'adresse : http://groups.google.com/group/androdev-fr

Évidemment, il n'y a que moi actuellement, donc l'intérêt est encore limité! Peut-être que cela viendra!

Séminaire CMS open source à Lyon

Smile organise le jeudi 18 Novembre un séminaire gratuit sur les CMS Open Source, j'y serai!

Programme :

  • 9h - 10h : Comprendre les enjeux et principes fondamentaux de la gestion de contenu open source.
  • 10h - 11h30 : Connaître et comparer les meilleures solutions open source : eZ Publish, Typo3, Drupal, Jahia, Liferay, Infoglue…
  • 11h30 - 12h : Poser toutes vos questions à nos experts.

Description issue du site Smile :

De plus en plus de sociétés choisissent un logiciel de gestion de contenu open source comme socle de leur stratégie web, internet ou intranet. Ce choix n'est pas seulement économique : ces produits se distinguent par leur fiabilité et ont été adoptés par une très large communauté d'utilisateurs.

Smile a déployé une variété de solutions de gestion de contenus open source pour les Laboratoires Boiron, le Conseil Général du Rhône, l’Institut Laue Langevin, l’INRIA, l’EM Lyon, Canson… et bien d'autres clients, de toutes tailles et tous secteurs d'activité.

Grâce à ce séminaire, vous découvrirez les plus grandes solutions open source à travers les retours d'expérience de nos experts et vous trouverez des réponses précises à vos questions.

Pour les inscriptions c'est ici!


Livre : Concevoir et déployer ses sites web avec Drupal

Juste un petit mot pour vous dire que la seconde édition du meilleur livre francophone que j'ai pu lire en Français est sorti:

Couverture du livre

Ecrit par Yoran Brault aux éditions Eyrolles (référence dans l'informatique).

Au sommaire:

  • Comprenez l'architecture de Drupal et réfléchissez... à quoi faire et ne pas faire avec un CMS aussi puissant
  • Configurez votre environnement de développement sous Mac OS, Linux et Windows
  • Administrez Drupal et ses modules, architecturez vos pages et proposez plusieurs langues
  • Gérez vos utilisateurs, les rôles des contributeurs et flux de publication en toute sécurité (OpenID...)
  • Enrichissez vos contenus grâce aux éditeurs visuels : articles, commentaires, images, discussions, FAQ, formulaires et champs, fils RSS, filtres et formats...
  • Modifiez l'apparence avec les thèmes et personnalisez les modèles
  • Optimisez la charge d'administration par l'automatisation des tâches récurrentes
  • Créez votre propre module et évitez les écueils de la mise en production
  • Évaluez les améliorations de Drupal 7

Acheter le livre "Concevoir et déployer ses sites web avec Drupal" sur Amazon.fr

Créer son site smartphone avec Drupal

 

Mobile Tools pour créer une version smartphone de son site

Drupal permet à l'aide d'un extension de facilement créer une version mobile de son site.
Il suffit pour cela d'installer le module Mobile Tools qui se chargera de :

  • Détecter si l'internaute utilise un smartphone
  • Le rediriger vers la version mobile de votre site
  • Gérer le domaine pour le site mobile (m.monsite.com ou monsite.mobi)
  • utiliser un thème particulier pour le site mobile.

J'ai sur ce site utilisé une redirection automatique vers m.kgaut.net, et depuis cette url j'ai "demandé" à Drupal d'utiliser un thème particulier (un sous-thème plus précisement).

Vous pouvez aussi segmenter suivant le périphérique du de l'internaute (Android, blackberry, iphone ou windows mobile...)

Quelques liens pour aller plus loin:

 

Créer un template spécial pour un type de contenu dans Drupal

Drupal permet de créer des types de contenus particuliers (voir par là pour plus d'infos), mais il permet aussi de leurs associer des templates spéciaux.

Pour cela il suffit de créer dans le dossier de votre thème un fichier avec le nom suivant:

node-[node-type].tpl.php (en replacant [node-type] par le nom machine de votre type de contenu, par exemple:

node-realisation.tpl.php

Ci-dessus, c'est pour la version 6 de Drupal. Pour la version 7 il faut doubler le tiret :

node--[node-type].tpl.php

Ensuite le préprocesseur de drupal ira chercher automatiquement le bon fichier de template pour afficher la page.

Créer un sous thème dans Drupal

Il est possible dans drupal de créer des sous-thèmes, dans une vision objet, on aurait ainsi un thème qui hérite d'un autre.

subtheme scheme

Pour quel usage ? Et bien par exemple, vous voulez créer une version mobile de votre site (avec des spécificités au niveau de la feuille de style par exemple.) Créez simplement un sous-thème de votre thème principal et vous n'aurez juste qu'a surcharger les fichiers que vous souhaiter modifier.

Par exemple, voici l'arborescence de mon thème principal sur ce site :

path thème principal

je veux créer une version mobile ou je modifie un peu le template d'une page ainsi qu'une feuille de style.

Je commence par créer un nouveau dossier « kgaut-mobile », je crée le fichier kgaut-mobile.info qui contient les informations de mon site. En voici le contenu :


name = kgaut-mobile
#ici je défini le thème « parent » dont mon sous-thème héritera

base theme = kgaut
description = Version mobile du theme du site Kgaut.NET
screenshot = css/images/screenshot.gif
core = "6.x"
project = "kgaut-mobile"
engine = phptemplate
 
#Ici les css que je surcharge.
stylesheets[all][] = css/layout.css
stylesheets[all][] = css/style.css
 
regions[content_top] = Content top
regions[header] = Header
regions[footer_block] = Footer
regions[content_bottom] = Content bottom
 
; Information added by drupal.org packaging script on 2009-10-28
version = "6.x-2.9"
core = "6.x"
datestamp = "1256756703"


Ensuite, je copie colle les templates et les css que je veux modifier depuis mon thème principal vers mon sous-thème. Je les modifie à ma guise.

Drupal ira chercher lui même les fichiers (javascripts, css, templates...) dans le thème principal.

Note : pour les javascripts le comportement et la manip est la même que pour les css.

path sous-thème

Pour ceux qui n'ont rien compris à mes explications foireuses, voici quelques liens pour mieux comprendre:

Externaliser son template sous CMS Made Simple

Un des points qui peut être déstabilisant avec le néanmoins excellent CMS Made Simple est sa façon de gérer les template. Pour faire simple, ils sont stockés dans la base de données et mis en cache.

Pour modifier son template ou sa feuille de style, on peut certes passer par le backoffice, mais il est tellement plus pratique de passer par son éditeur habituel.

 

Template Externalizer

Et c'est là qu'intervient Template Externalizer, cette extention va simplement créer une version en dur de tout les templates dans le dossier tmp de votre site que vous pourrez venir modifier à votre guise avec votre logiciel. Et à chaque rechargement de page, le cms ira voir si le fichier à été modifié, si oui, il ira impacter les modifications en base.

Évidement cette extension n'est pas à utiliser en production, pour des raisons de performances.

Template Externalizer dans la forge.

Pages

S'abonner à RSS - Développement