Page légère pour smartphone

Forum dédié à la mise en ligne de vos données météos relevées avec WsWin.
Répondre
Tudgur
Participation 6
Participation 6
Messages : 1688
Enregistré le : 13 mai 2007, 16:47
Localisation : 29880 Plouguerneau

Page légère pour smartphone

Message par Tudgur » 13 avr. 2012, 16:44

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.
Cordialement.

Tudgur
http://meteo-plouguerneau.fr" onclick="window.open(this.href);return false;

Avatar du membre
clement104
participation 3
participation 3
Messages : 222
Enregistré le : 30 juil. 2007, 13:22
Localisation : Mélin, Belgique
Contact :

Re: Page légère pour smartphone

Message par clement104 » 28 août 2012, 10:43

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:

Tudgur
Participation 6
Participation 6
Messages : 1688
Enregistré le : 13 mai 2007, 16:47
Localisation : 29880 Plouguerneau

Re: Page légère pour smartphone

Message par Tudgur » 29 août 2012, 17:42

Salut et merci pour ce script.
Je testerai à mon retour...
Cordialement.

Tudgur
http://meteo-plouguerneau.fr" onclick="window.open(this.href);return false;

Avatar du membre
webmaster
Site Admin
Site Admin
Messages : 2610
Enregistré le : 12 déc. 2006, 20:54
Localisation : Rieux 51 FRANCE
Contact :

Re: Page légère pour smartphone

Message par webmaster » 30 août 2012, 22:07

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 ");
}
Cordialement

Rieux

Tudgur
Participation 6
Participation 6
Messages : 1688
Enregistré le : 13 mai 2007, 16:47
Localisation : 29880 Plouguerneau

Re: Page légère pour smartphone

Message par Tudgur » 26 janv. 2013, 08:54

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...
Cordialement.

Tudgur
http://meteo-plouguerneau.fr" onclick="window.open(this.href);return false;

Avatar du membre
webmaster
Site Admin
Site Admin
Messages : 2610
Enregistré le : 12 déc. 2006, 20:54
Localisation : Rieux 51 FRANCE
Contact :

Re: Page légère pour smartphone

Message par webmaster » 26 janv. 2013, 14:36

Bonjour,

Si, car un bon navigateur permet de forcer la version ordinateur !
Fichiers joints
capture.png
Cordialement

Rieux

Tudgur
Participation 6
Participation 6
Messages : 1688
Enregistré le : 13 mai 2007, 16:47
Localisation : 29880 Plouguerneau

Re: Page légère pour smartphone

Message par Tudgur » 26 janv. 2013, 16:35

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...
Cordialement.

Tudgur
http://meteo-plouguerneau.fr" onclick="window.open(this.href);return false;

Avatar du membre
webmaster
Site Admin
Site Admin
Messages : 2610
Enregistré le : 12 déc. 2006, 20:54
Localisation : Rieux 51 FRANCE
Contact :

Re: Page légère pour smartphone

Message par webmaster » 26 janv. 2013, 19:00

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.
Cordialement

Rieux

Tudgur
Participation 6
Participation 6
Messages : 1688
Enregistré le : 13 mai 2007, 16:47
Localisation : 29880 Plouguerneau

Re: Page légère pour smartphone

Message par Tudgur » 26 janv. 2013, 20:28

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...
Cordialement.

Tudgur
http://meteo-plouguerneau.fr" onclick="window.open(this.href);return false;

Avatar du membre
Podavini
Participation 0
Participation 0
Messages : 3
Enregistré le : 25 août 2008, 20:51
Localisation : Saint Bonnet de bellac
Contact :

Re: Page légère pour smartphone

Message par Podavini » 02 avr. 2014, 20:51

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

Avatar du membre
webmaster
Site Admin
Site Admin
Messages : 2610
Enregistré le : 12 déc. 2006, 20:54
Localisation : Rieux 51 FRANCE
Contact :

Re: Page légère pour smartphone

Message par webmaster » 03 avr. 2014, 08:24

Bonjour,

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

Rieux

Tudgur
Participation 6
Participation 6
Messages : 1688
Enregistré le : 13 mai 2007, 16:47
Localisation : 29880 Plouguerneau

Re: Page légère pour smartphone

Message par Tudgur » 03 avr. 2014, 08:51

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 ?
Cordialement.

Tudgur
http://meteo-plouguerneau.fr" onclick="window.open(this.href);return false;

Répondre