SlideShare a Scribd company logo
1 of 12
Download to read offline
http://www,template-joomla,us

      Ahmed bouderka

      alwadifa@live,fr
Créer une version mobile de votre site joomla pour iphone , ipad et android

Certes de nos jours les téléphones mobiles et les pc tablettes devient de plus en plus
impliqués dans notre vie surtout avec l'internet sans fil 3G / 4G et le wifi les gens
utilisent leurs mobiles pour accéder à internet ; voir leurs mails , tchater , surfer sur
facebook ,,,

Si vous avez un web site vous avez peut être penser à créer une version mobile de
votre site pour faciliter l’accès à ceux qui utilisent des petits gadgets commes l'iphone
mais le il y a beaucoup de contrainte parce qu'il s'agit bien évidement d'une autre
plat-forme que les pc du bureau !


Il y a le problème de la taille du navigateur qui est petit donc votre site va fatigué
l'utilisateur si il est large avec deux ou trois colonnes !! je sais pas si vous avez déjà
essayer sa ! Mais moi oui et j'ai dégoûter mon site : il faut agrandir puis glisser a
gauche et a droite , les images sont grandes et se charge lentement ! Par contre les
sites compatibles avec les mobiles ne comporte qu'une seule colonne avec des images
petites , le texte claire au premier vue et pas besoin de zoomer en avant du premier
coup pour lire le contenu du site !


Donc si vous avez un site en joomla 1,5 vous pouvez créer une version mobile pour
votre site qui sera adapté aux mobiles surtout les : iphone ipad , smartphone ,pda
aussi la platforme android sans changer quoi que ce soit sur le site principale !

J'ai fais le test sur un site et voilà je partage avec vous mon expérience sur ce petit
livre !!

Donc il faut avoir un site en joomla 1,5 et non pas en joomla 1,6 car le composant
mobilejoomla nécessaire n'est pas encore disponible pour joomla 1,6 !

Avant de commencer l'explication voici deux exemple du résultats :
1-
version standard : http://www,gsm-maroc,com
version mobile : http://iphone,gsm-maroc,com
2-
version standard : http://www.rodmartin.me/
version mobile :http://iphone.rodmartin.me/
Attention : si vous n'avez pas de mobile 3G ou internet sur le mobile pour la
visualisation des résultats vous pouvez simuler le navigateur du mobile sur votre pc :

Pour simuler le navigateurs du pc comme si vous êtes sur un iphone il faut seulement
diminuer la taille de l'explorateur google chrome ou opera et vous aurez une vue
semblable à un iphone ! « figure 1 »




                                        figure1
Passons aux choses techniques :


1-Télécharger composant mobilejoomla ici :http://www.mobilejoomla.com/ c'est
gratuit mais il faut s'inscrire pour effectuer le téléchargement !




                                        Figure 2



Il y a une chose qu'il faut signaler c'est que vous ne pouvez pas faire un test sur le
localhost car vous devez créer un sous domaine ; chose qu'on ne peut pas faire sur
localhost ! Donc on install directement sur un site en ligne et prenez une sauvegarde
par précaution ,

2-Installer le composant comme tout autre composant , cela demande un peu de
temps car il y a des modules , plugins, et des templates à installer automatiquement ,




                                        Figure 3
3-maintenant on va créer un sous domaine a partir de votre cpanel
Attention il faut que le sous domaine soit rediriger vers le racine de votre site « figure
2«




                                         Figure 4



Maintenant on revient à notre site pour la configuration
Dans l'administration du composant mobilejoomla :




                                         Figure 5



Suivez la figure 6 puis sauvegardez les modifications
Figure 6
voilà si vous entrez sur l'url http://iphone,votre-site,com suivante vous allez trouvez
votre site c'est transformez !!!

Jusqu'au la il faut avoir le site qui marche en sous domaine avec un look iphone et le
domaine principale rien ne sera changer !
Maintenant on va voir les autres options disponibles :

1-Changer le template iphone :

Il existe quatre template pour la version mobile du site et vous pouvez faire le choix
ou bien laissez le template iphone ,

voilà un aperçu des templates disponibles :




                             Iphone ipad et ipod touch template
Wap ,pda ,Android




Pour changer le template entrez sur settings puis iphone puis change template « figure 10 «
Figure 10

C'est ici ou vous pouvez changer le template !

Maintenant on va voir une chose très importante il s'agit de placer les modules sur le
template , sur les template mobile il faut que les modules soient en une seule
colonne ! Vous avez le choix de placer les modules en haut ou en bas du contenu
seulement et il faut pas mettre beaucoup de module seulement ce qui est necéssaire
pour faciliter la navigation sur les mobiles ; la pièce maîtresse du site c'est le
contenu !!

Sur le template iphone voici les position des modules disponibles :
Bon pour choisir les modules à positionner sur le template on fait pas comme
d'habitude via le gestionnaire des modules mais dans la configuration composant
mobilejoomla ,

C'est très simple il y a des positions disponibles en amant et en aval du contenu ce
qui'il vous faut c'est choisir des modules à placer dans ces positions disponibles sur le
template ,
Voir la figure suivant ,,,
voilà le résultats final : un jolie site « iphone ready » compatible avec les mobiles
léger qui contient tous les informations de votre site avec un look professionnelle et
tout ça gratuitement




                            http://www,template-joomla,us

                                  Ahmed bouderka

                                  alwadifa@live,fr

More Related Content

Viewers also liked

Smartboard lesson plan
Smartboard lesson planSmartboard lesson plan
Smartboard lesson plansullivancaro
 
Les francais et les obseques 2007
Les francais et les obseques 2007Les francais et les obseques 2007
Les francais et les obseques 2007csnaf
 
Fascicule 2-business registry-alphabetically
Fascicule 2-business registry-alphabeticallyFascicule 2-business registry-alphabetically
Fascicule 2-business registry-alphabeticallykcgr2001
 
Plan obesite 2010_2013
Plan obesite 2010_2013Plan obesite 2010_2013
Plan obesite 2010_2013Vincent Ducrey
 
Funcion De Bessel, Regla De Carson Y Modulacion Exponencial
Funcion De Bessel, Regla De Carson Y Modulacion ExponencialFuncion De Bessel, Regla De Carson Y Modulacion Exponencial
Funcion De Bessel, Regla De Carson Y Modulacion Exponencialguest3f54e2
 
U10 les segones avantguardes
U10 les segones avantguardesU10 les segones avantguardes
U10 les segones avantguardesceliapas
 
Contraception et sexualité
Contraception et sexualitéContraception et sexualité
Contraception et sexualitélitous
 
Amigos Para Siempre
Amigos Para SiempreAmigos Para Siempre
Amigos Para Siempreguest4049351
 

Viewers also liked (19)

Smartboard lesson plan
Smartboard lesson planSmartboard lesson plan
Smartboard lesson plan
 
Les francais et les obseques 2007
Les francais et les obseques 2007Les francais et les obseques 2007
Les francais et les obseques 2007
 
Fascicule 2-business registry-alphabetically
Fascicule 2-business registry-alphabeticallyFascicule 2-business registry-alphabetically
Fascicule 2-business registry-alphabetically
 
Algoritmo
AlgoritmoAlgoritmo
Algoritmo
 
E X P A T P M E P M I
E X P A T  P M E P M IE X P A T  P M E P M I
E X P A T P M E P M I
 
Plan obesite 2010_2013
Plan obesite 2010_2013Plan obesite 2010_2013
Plan obesite 2010_2013
 
Funcion De Bessel, Regla De Carson Y Modulacion Exponencial
Funcion De Bessel, Regla De Carson Y Modulacion ExponencialFuncion De Bessel, Regla De Carson Y Modulacion Exponencial
Funcion De Bessel, Regla De Carson Y Modulacion Exponencial
 
Comissió OSI
Comissió OSIComissió OSI
Comissió OSI
 
desarrollo
desarrollodesarrollo
desarrollo
 
PrevencióN Conductas
PrevencióN ConductasPrevencióN Conductas
PrevencióN Conductas
 
U10 les segones avantguardes
U10 les segones avantguardesU10 les segones avantguardes
U10 les segones avantguardes
 
Copia De Compiano
Copia De CompianoCopia De Compiano
Copia De Compiano
 
Contraception et sexualité
Contraception et sexualitéContraception et sexualité
Contraception et sexualité
 
Invertir Turismo
Invertir TurismoInvertir Turismo
Invertir Turismo
 
Publicidad Subli
Publicidad SubliPublicidad Subli
Publicidad Subli
 
1er atelier Koezio Rhône
1er atelier Koezio Rhône1er atelier Koezio Rhône
1er atelier Koezio Rhône
 
Mi presentacion
Mi presentacionMi presentacion
Mi presentacion
 
Amigos Para Siempre
Amigos Para SiempreAmigos Para Siempre
Amigos Para Siempre
 
New slideshare
New slideshareNew slideshare
New slideshare
 

More from Ahmed Bd

bac 2016 maroc
bac 2016 marocbac 2016 maroc
bac 2016 marocAhmed Bd
 
Lp tourisme
Lp tourismeLp tourisme
Lp tourismeAhmed Bd
 
Crp14 091140722
Crp14 091140722Crp14 091140722
Crp14 091140722Ahmed Bd
 
Td rs journalistes radio
Td rs journalistes radio Td rs journalistes radio
Td rs journalistes radio Ahmed Bd
 
Td rs technicien radio
Td rs technicien radioTd rs technicien radio
Td rs technicien radioAhmed Bd
 
Annonce concours finale 08 04-2014
Annonce concours finale 08 04-2014Annonce concours finale 08 04-2014
Annonce concours finale 08 04-2014Ahmed Bd
 
Note fmp fmd2014-2015
Note fmp fmd2014-2015Note fmp fmd2014-2015
Note fmp fmd2014-2015Ahmed Bd
 
Guide candidat bac2014
Guide candidat bac2014Guide candidat bac2014
Guide candidat bac2014Ahmed Bd
 
bac 2014 Maroc
bac 2014 Marocbac 2014 Maroc
bac 2014 MarocAhmed Bd
 
التأثيرات الميكانيكية
التأثيرات الميكانيكيةالتأثيرات الميكانيكية
التأثيرات الميكانيكيةAhmed Bd
 
Serie1 07 08
Serie1 07 08Serie1 07 08
Serie1 07 08Ahmed Bd
 
Serie1 07 08
Serie1 07 08Serie1 07 08
Serie1 07 08Ahmed Bd
 
Cours arithmetique t
Cours arithmetique tCours arithmetique t
Cours arithmetique tAhmed Bd
 
Note105110704
Note105110704Note105110704
Note105110704Ahmed Bd
 

More from Ahmed Bd (15)

bac 2016 maroc
bac 2016 marocbac 2016 maroc
bac 2016 maroc
 
Lp tourisme
Lp tourismeLp tourisme
Lp tourisme
 
Crp14 091140722
Crp14 091140722Crp14 091140722
Crp14 091140722
 
Td rs journalistes radio
Td rs journalistes radio Td rs journalistes radio
Td rs journalistes radio
 
Td rs technicien radio
Td rs technicien radioTd rs technicien radio
Td rs technicien radio
 
Annonce concours finale 08 04-2014
Annonce concours finale 08 04-2014Annonce concours finale 08 04-2014
Annonce concours finale 08 04-2014
 
Note fmp fmd2014-2015
Note fmp fmd2014-2015Note fmp fmd2014-2015
Note fmp fmd2014-2015
 
Guide candidat bac2014
Guide candidat bac2014Guide candidat bac2014
Guide candidat bac2014
 
bac 2014 Maroc
bac 2014 Marocbac 2014 Maroc
bac 2014 Maroc
 
التأثيرات الميكانيكية
التأثيرات الميكانيكيةالتأثيرات الميكانيكية
التأثيرات الميكانيكية
 
Serie1 07 08
Serie1 07 08Serie1 07 08
Serie1 07 08
 
Serie1 07 08
Serie1 07 08Serie1 07 08
Serie1 07 08
 
Cours arithmetique t
Cours arithmetique tCours arithmetique t
Cours arithmetique t
 
Note105110704
Note105110704Note105110704
Note105110704
 
alwadifa
alwadifaalwadifa
alwadifa
 

Créer un site Mobile avec joomla 1.5

  • 1. http://www,template-joomla,us Ahmed bouderka alwadifa@live,fr
  • 2. Créer une version mobile de votre site joomla pour iphone , ipad et android Certes de nos jours les téléphones mobiles et les pc tablettes devient de plus en plus impliqués dans notre vie surtout avec l'internet sans fil 3G / 4G et le wifi les gens utilisent leurs mobiles pour accéder à internet ; voir leurs mails , tchater , surfer sur facebook ,,, Si vous avez un web site vous avez peut être penser à créer une version mobile de votre site pour faciliter l’accès à ceux qui utilisent des petits gadgets commes l'iphone mais le il y a beaucoup de contrainte parce qu'il s'agit bien évidement d'une autre plat-forme que les pc du bureau ! Il y a le problème de la taille du navigateur qui est petit donc votre site va fatigué l'utilisateur si il est large avec deux ou trois colonnes !! je sais pas si vous avez déjà essayer sa ! Mais moi oui et j'ai dégoûter mon site : il faut agrandir puis glisser a gauche et a droite , les images sont grandes et se charge lentement ! Par contre les sites compatibles avec les mobiles ne comporte qu'une seule colonne avec des images petites , le texte claire au premier vue et pas besoin de zoomer en avant du premier coup pour lire le contenu du site ! Donc si vous avez un site en joomla 1,5 vous pouvez créer une version mobile pour votre site qui sera adapté aux mobiles surtout les : iphone ipad , smartphone ,pda aussi la platforme android sans changer quoi que ce soit sur le site principale ! J'ai fais le test sur un site et voilà je partage avec vous mon expérience sur ce petit livre !! Donc il faut avoir un site en joomla 1,5 et non pas en joomla 1,6 car le composant mobilejoomla nécessaire n'est pas encore disponible pour joomla 1,6 ! Avant de commencer l'explication voici deux exemple du résultats : 1- version standard : http://www,gsm-maroc,com version mobile : http://iphone,gsm-maroc,com 2- version standard : http://www.rodmartin.me/ version mobile :http://iphone.rodmartin.me/
  • 3. Attention : si vous n'avez pas de mobile 3G ou internet sur le mobile pour la visualisation des résultats vous pouvez simuler le navigateur du mobile sur votre pc : Pour simuler le navigateurs du pc comme si vous êtes sur un iphone il faut seulement diminuer la taille de l'explorateur google chrome ou opera et vous aurez une vue semblable à un iphone ! « figure 1 » figure1
  • 4. Passons aux choses techniques : 1-Télécharger composant mobilejoomla ici :http://www.mobilejoomla.com/ c'est gratuit mais il faut s'inscrire pour effectuer le téléchargement ! Figure 2 Il y a une chose qu'il faut signaler c'est que vous ne pouvez pas faire un test sur le localhost car vous devez créer un sous domaine ; chose qu'on ne peut pas faire sur localhost ! Donc on install directement sur un site en ligne et prenez une sauvegarde par précaution , 2-Installer le composant comme tout autre composant , cela demande un peu de temps car il y a des modules , plugins, et des templates à installer automatiquement , Figure 3
  • 5. 3-maintenant on va créer un sous domaine a partir de votre cpanel Attention il faut que le sous domaine soit rediriger vers le racine de votre site « figure 2« Figure 4 Maintenant on revient à notre site pour la configuration Dans l'administration du composant mobilejoomla : Figure 5 Suivez la figure 6 puis sauvegardez les modifications
  • 6. Figure 6 voilà si vous entrez sur l'url http://iphone,votre-site,com suivante vous allez trouvez votre site c'est transformez !!! Jusqu'au la il faut avoir le site qui marche en sous domaine avec un look iphone et le domaine principale rien ne sera changer !
  • 7. Maintenant on va voir les autres options disponibles : 1-Changer le template iphone : Il existe quatre template pour la version mobile du site et vous pouvez faire le choix ou bien laissez le template iphone , voilà un aperçu des templates disponibles : Iphone ipad et ipod touch template
  • 8. Wap ,pda ,Android Pour changer le template entrez sur settings puis iphone puis change template « figure 10 «
  • 9. Figure 10 C'est ici ou vous pouvez changer le template ! Maintenant on va voir une chose très importante il s'agit de placer les modules sur le template , sur les template mobile il faut que les modules soient en une seule colonne ! Vous avez le choix de placer les modules en haut ou en bas du contenu seulement et il faut pas mettre beaucoup de module seulement ce qui est necéssaire pour faciliter la navigation sur les mobiles ; la pièce maîtresse du site c'est le contenu !! Sur le template iphone voici les position des modules disponibles :
  • 10. Bon pour choisir les modules à positionner sur le template on fait pas comme d'habitude via le gestionnaire des modules mais dans la configuration composant mobilejoomla , C'est très simple il y a des positions disponibles en amant et en aval du contenu ce qui'il vous faut c'est choisir des modules à placer dans ces positions disponibles sur le template , Voir la figure suivant ,,,
  • 11.
  • 12. voilà le résultats final : un jolie site « iphone ready » compatible avec les mobiles léger qui contient tous les informations de votre site avec un look professionnelle et tout ça gratuitement http://www,template-joomla,us Ahmed bouderka alwadifa@live,fr