Page 1 sur 1

Page légère pour smartphone

Posté : 13 avr. 2012, 16:44
par Tudgur
Bonjour à tous.

A Noël dernier, je me suis offert mon 1er smartphone.
Et devinez quelle a été l'une des premières choses que j'ai faite ?
Créer une page très légère de mon site que vous pouvez voir ici.
Ainsi, quand je suis absent, je peux facilement vérifier si tout est OK.
Cette page intéresse peut-être quelques uns parmi vous.
Il vous suffit de copier le code source, de remplacer les date et mesures par les tags correspondants de Wswin et d'en faire un custom.
Le mienne est en php et je ne peux donc vous la donner "finie"...
Bizarrement, j'ai dû faire ma page deux fois plus grande (en largeur et hauteur) que l'écran du smartphone pour qu'elle occupe tout celui-ci.
En fonction de la taille de votre écran, vous pouvez facilement adapter les dimensions en modifiant la taille des div...

Si vous vouliez quelques détails, n'hésitez pas à poster.

Re: Page légère pour smartphone

Posté : 28 août 2012, 10:43
par clement104
Bonjour :smile:
Je sais c'est du déterrage de topic mais je me suis dit pourquoi ne pas en faire profiter les autres....

Maintenant que vous avez une version mobile, pourquoi ne pas proposer une redirection lorsque l'on navigue sur votre site avec un appareil mobile??

Voici un petit script :bigrin:

Code : Tout sélectionner

<script type="text/javascript">
<!--


var dateExp = "Sat, 08-Jan-2095 08:00:00 GMT";


function createCookie(name,value,heure) {
   if (heure) {
      var date = new Date();
      date.setTime(date.getTime()+(heure*60*60*1000));
            var expires = "; expires="+date.toGMTString();

   }
   else var expires = "; expires="+dateExp;
   document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
   var nameEQ = name + "=";
   var ca = document.cookie.split(';');
   for(var i=0;i < ca.length;i++) {
      var c = ca[i];
      while (c.charAt(0)==' ') c = c.substring(1,c.length);
      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
   }
   return null;
}

function eraseCookie(name) {
   createCookie(name,"",-1);
}

var osys="";
// osys="ipad";

var choixversion = readCookie('choixversionmeteomel');
// alert(choixversionmeteomel);

if (navigator.userAgent.toLowerCase().indexOf("ipad") != -1) { osys = "ipad" ;    }
if (navigator.userAgent.toLowerCase().indexOf("iphone") != -1) { osys = "iphone" ;    }
if (navigator.userAgent.toLowerCase().indexOf("android") != -1) { osys = "android" ;  }

if (choixversion == 'mobile'  ){ document.location="http://www.meteomelin.be/mobile/";  }
if (choixversion == 'normale' ){}

if ( screen.width < 750 && ( choixversion != 'normale' && choixversion != 'mobile') ) {

var choix = confirm("Nous avons détecté que vous naviguez avec un appareil mobile. Souhaitez-vous être dirigé vers la version mobile?");

if (choix) {
 createCookie('choixversionmeteomel','mobile',1);
 document.location="http://www.meteomelin.be/mobile/";
} else {
 createCookie('choixversionmeteomel','normale',1);
 document.location="http://www.meteomelin.be/";
}
}



// -->
</script>
Ce script lit si le cookie choixversion est enregistré.
--Si oui, il dirige vers la version mobile ou normale
--Si non, il détecte la largeur de l'écran.
----Si >750px on va vers la version normale
----Si <750px on nous demande si on veut la version normale ou mobile
------Si on choisit OK: on est envoyé vers la version mobile et le cookie est enregistré sur mobile pour 1h
------Si on choisit Annuler: on est envoyé vers la version normale et la durée de vie du cookie est de 1h également.

A adapter selon vos besoins.

:wink:

Re: Page légère pour smartphone

Posté : 29 août 2012, 17:42
par Tudgur
Salut et merci pour ce script.
Je testerai à mon retour...

Re: Page légère pour smartphone

Posté : 30 août 2012, 22:07
par webmaster
Bonsoir,
un petit test sur le navigateur du visiteur permet aussi de diriger sur la version mobile du site.

Code : Tout sélectionner

$ua = $_SERVER['HTTP_USER_AGENT'];
if(preg_match("(iPhone|iPod|iPad|BlackBerry|Android|HTC|LG|MOT|Nokia|Palm|SAMSUNG|SonyEricsson|Mobile)",$ua))
{
header("Status: 301 Moved Permanently", false, 301);
header("Location: /mobile ");
}

Re: Page légère pour smartphone

Posté : 26 janv. 2013, 08:54
par Tudgur
Ce message m'avait échappé !

Si LE visiteur (qui sans doute sera moi) est automatiquement redirigé vers la page mobile, il ne pourra plus consulter le site complet...

Re: Page légère pour smartphone

Posté : 26 janv. 2013, 14:36
par webmaster
Bonjour,

Si, car un bon navigateur permet de forcer la version ordinateur !

Re: Page légère pour smartphone

Posté : 26 janv. 2013, 16:35
par Tudgur
D'accord !
Et où "colle" t-on ce code ?
Dans la page index.php ?
Ma page pour smartphone étant http://meteo-plouguerneau.fr/vignette_mobile.php, je suppose que je remplace "Location: /mobile " par "Location: /vignette_mobile.php"

Edit : j'ai testé et ça marche mais je n'ai pas la possibilité comme toi d'afficher le site PC...

Re: Page légère pour smartphone

Posté : 26 janv. 2013, 19:00
par webmaster
Il faut placer ce code entre des balises PHP dans le head.
Le plus simple est de composer un head unique à l'ensemble de tes pages, et de l’insérer en PHP.

le / dans un chemin de fichier indique de remonter à la racine du site. Pour mon cas /mobile, envoie à la racine dans le répertoire mobile sans indication de fichier, c'est donc une page index qui est ouverte.
Donc pour ton lien, s'il est à la racine de ton site, c'est bon.

Re: Page légère pour smartphone

Posté : 26 janv. 2013, 20:28
par Tudgur
webmaster a écrit :Le plus simple est de composer un head unique à l'ensemble de tes pages, et de l’insérer en PHP.
C'est ce que j'ai fait mais mon navigateur ne permet pas d'ouvrir le site PC !
Tant pis...

Re: Page légère pour smartphone

Posté : 02 avr. 2014, 20:51
par Podavini
Bonjour,
Je suis en train de créer une page légère pour mon smartphone et je bloque au niveau de l'icone météo.
Je n'y arrive pas malgrés des beaucoup essais.
un petit peu d'aide.
Ci joint l'url du lien : http://guydo.power-heberg.com/www/html/ ... stom7.html

Merci
Guy

Re: Page légère pour smartphone

Posté : 03 avr. 2014, 08:24
par webmaster
Bonjour,

De quelle icône parles-tu et où veux-tu la mettre ?

Re: Page légère pour smartphone

Posté : 03 avr. 2014, 08:51
par Tudgur
Bonjour,

J'imagine qu'il s'agit de l'icône du "temps présent"...
Il s'agit d'un script php, réalisé avec l'aide de Ludovic.
Il faut bien sûr une sonde de radiation solaire, un pluvio avec une résolution de 0.2mm, et un pas de mesure de 1 minute.
Avec une VantagePro, pas de problème.
Quel est ton matériel ?