Le web version mobile

16 Janvier 2012 20:02 | Par Miss Lemon dans Technologies Web

 , , , , , , , ,

Web mobile

Depuis quelques années, les téléphones mobiles de la catégorie des Smartphones, permettent d'accéder au web où que l'on soit.
De plus, on a vu l'apparition des tablettes, dont l'amélioration des technologies font qu'elles équipent de plus en plus de foyers.
La mise en place d'un site mobile remplit un certains nombres d'objectifs marketing tels que:
- la visibilité, l'accessibilité: "Être présent partout, tout le temps"
- l'image: la marque bénéficie de l'image innovante et moderne du mobile.

Mais mettre en place un site web mobile n'est pas aussi simple si l'on souhaite qu'il soit lisible sur une majorité de plateformes existantes.
En effet, la diversité des OS existants ainsi que la diversité de versions des navigateurs en versions mobiles peuvent vite devenir un casse tête pour le développeur.
Pourtant, il faut s'y mettre, car de plus en plus d'utilisateurs souhaitent pouvoir consulter leurs sites préférés depuis des plateformes mobiles et il est fort à parier que d'ici quelques années, les plateformes mobiles auront pris le pas sur les ordinateur dits de bureau.

Concentrons nous sur le marché actuel des smartphones et laissons de côté les tablettes.

Tour d'horizon des plateformes

Les smartphones

Chaque smartphone, selon sa marque possède un OS différent. On recense:

  • iOS (Mac - Iphone)
  • Androïd (Google - Samsung, HTC, ..)
  • Microsoft (Windows Mobile)
  • Symbian (Nokia)
  • RIM (BlackBerry)
  • Bada (développé par Samsung pour Samsung, et qui équipe tous les Samsung dont le nom commencent par "Samsung Wave")
  • et bien d'autres , mineurs sur le marché
Mondialement , la tendance d'achat est la suivante: Androïd (52,5%), Symbian (16,9%) et iOS (15%).
Suivent RIM (11%), Bada (2,2%), Microsoft (1,5%) et les autres (0,9%).
Mais cette tendance est mondiale, et en France, iOS se place encore bien devant Androïd, même si celui gagne du terrain petit à petit.

Les navigateurs

Chaque OS, à son navigateur installé par défaut (safari mobile sur iOS, WebKit sur Androïd, ... ), et il est possible d'en installer d'autres (Opéra mobile, Opéra Mini, Firefox pour mobile, ..).
Plusieurs OS ont des navigateurs basés sur WebKit , mais chacun ayant apporté sa touche de modifications, ils se comportent différemment.
Si on regarde les statistiques des navigateurs mobiles pour la France sur les 12 derniers mois - on y voit que Androïd et iPhone sont les 2 acteurs majeurs sur le marché français.

Navigateurs web mobile en France en 2011

(Ce qui parait logique puisque les gens qui veulent surfer sur le web depuis leur mobile se tournent généralement vers ces modèles de smartphones)

Le potentiel du web mobile

Il ne faut pas confondre le site web mobile et l'application mobile.
Voici en quelques lignes , les avantages et inconvénients des deux systèmes:

L'application mobile

L'application mobile est installée sur votre appareil et ne nécessite pas nécessairement d'une connexion internet.
L'application mobile peut communiquer avec les différents dispositifs de l'appareil, tels que l'appareil photo (donc la caméra), l'accéléromètre, la géo-localisation, ..
L'application mobile peut être plus performante étant donnée son installation locale.
L'interface de l'application mobile peut être plus riche car elle est dédiée à ce mode d'affichage.
Est spécifique à la plateforme sur laquelle on l'installe (iPhone, Androïd, ..). Pour la rendre multiplateforme, il faut développer une version par plateforme. Il faut donc parfois prévoir l'achat d'un kit de développement.
De par ce fait, l'inconvénient majeur est le coût de développement d'une application (et concernant les applications iPhone, la nécessité que celle ci soit validée par Apple pour être disponible dans l'appStore)

Le site Web mobile

C'est un site web que l'on rend ergonomiquement compatible avec les contraintes d'un smartphone ou d'une tablette.
Contrairement à l'application mobile qui est installée sur votre appareil, le site web mobile nécessite une connexion internet (3G, Wifi) pour être accessible.
De plus ses performances d'accès dépendent de votre connexion (ou de votre position géographique).
A contrario, elle ne nécessite pas de mise à jour puisqu'elle n'est pas installée en local. il n'y a donc pas d'anciennes versions à maintenir, ni de données stockées sur le téléphone.
Le site est accessible sur l'ensemble des plateformes, néanmoins chaque OS embarque un navigateur différent, et il faut donc mettre en place des optimisations pour rendre l'application compatibles avec un maximum d'entre elles.
De la même manière les tailles écrans diffèrent d'un appareil à l'autre et des optimisations sont donc nécessaires.
On parle d'optimisations, car au vu du nombre de combinaisons différentes OS/navigateurs (et de nouvelles apparaissent chaque mois) il est quasi impossible de les satisfaire toutes. On essaie donc par des optimisations d'en cibler la majorité, à défaut de pouvoir les prendre toutes en compte.

S'assurer de l'accessibilité de son site en mobilité

La majorité des smartphones récents affichent correctement les sites webs actuels.
Mais quelques petites vérifications sur votre site permettront à vos visiteurs d'accéder à toutes les informations de votre site.

  • Remplacez les animations Flash par des animations compatibles (HTML5)
  • En effet la technologie Flash ne fonctionne pas sur les navigateurs des mobiles tels que iPhone, iPad ou encore BlackBerry.
  • Rendez les informations de localisation telles que les numéros de téléphones et les adresses cliquables
  • Modifiez l'ergonomie de votre site pour qu'elle s'adapte aux contraintes des appareils mobiles
  • Dans la mesure du possible réalisez une version spécifique pour le mobile, version qui sera minimaliste et mettra en avant le contenu
  • Comme pour la version web classique, vérifiez que votre site correspond aux normes du W3C: http://validator.w3.org/mobile/
Une fois en ligne, suivez vos statistiques pour adapter votre site en fonction de celles ci.

Sources:
Relever le défi du Web mobile
Statistiques achat de smartphone dans le monde
Autres statistiques

HTML5

24 Septembre 2010 14:37 | Par Miss Lemon dans Développement

 ,

HTML5

Qui n'a pas rêvé d'avoir un doctype qui ressemble à ça ?
<!DOCTYPE html>

Et bien le HTML5 va ravir les gens qui comme moi aime la simplicité.

Mais déjà, le HTML5, qu'est ce que c'est ?

Le HTML5 (HyperText Markup Language 5) est la dernière version du principal langage du web, le HTML.
Le HTML5 et le XHTML5 sont donc les futures extensions de, respectivement, le HTML4 et le XHTML1.1.

Le HTML5, qu'est ce que ça apporte

Des nouvelles balises qui montrent la volonté de structuration de pages écrites en HTML5:

  • header
  • footer
  • nav
  • aside
  • section
Ces balises peuvent être utilisées plusieurs fois dans une même page, comme le montre l'exemple ci dessous.
balises structurantes

Du contenu editable et du stockage local

Un attribut "contenteditable" positionnée à true, permet à l'internaute d'éditer le contenu de la balise (exemple un <ul>).
Combiné au "LocalStorage" , on peut imaginer des applications bien sympathiques, comme des ToDoList stockées en local :)


ça parait si simple !!

Des nouvelles balises pour faciliter l'insertion de contenu

  • audio
  • video

La gestion des expressions régulières

L'ajout d'un attribut "pattern" sur les champs "input" (ça j'en connais quelques uns à qui ça va plaire)

Et bien d'autres choses encore ..

Mais comme un bon tutorial vaut mieux qu'un long discours je vous invite à regarder celui du site net.tutsplus.com.

Seul bémol, la compatibilité navigateur, aujourd'hui seul Firefox 4 est annoncé comme prêt, mai c'est une version beta, Chrome est sur les rangs, mais Opéra et Internet Explorer sont loin du but, quant aux navigateurs pour mobile, .. mieux vaut ne pas aborder le sujet :\

Pour en savoir plus, le mieux est de consulter les spécifications complètes.

Source:
pompage.net
net.tutsplus.com.

Une lightbox depuis Flash

2 Juillet 2009 23:21 | Par Miss Lemon dans Développement

 , , ,

Flash

Dans un cadre professionnel, il a fallu lancer une lightbox depuis un Flash.
En effet, le flash permettant de faire défiler les miniatures, au clic sur l'une d'entre elle, une lightbox s'ouvre, affichant alors l'image sélectionnée en grand format, et offrant les liens de navigation pour visualiser l'ensemble des images.

Comment ça fonctionne?
Dans la page HTML où est appelé le SWF, il faut faire les appels aux librairies prototype, et scriptaculous, ainsi qu'au script js et css de la lightbox.
Puis, il faut placer le code suivant toujours dans les balises HEAD:
<script type="text/javascript">
function OpenLB(id) {
   var objLink = document.getElementById(id);
   Lightbox.prototype.start(objLink);
}
</script>
Ensuiute, il faut placer, un peu plus bas dans la page, sous l'appel au flash, les liens vers les images:
<a id="img1" href="images/image1.jpg" rel="lightbox[defil]" 
title="Ma belle image un"></a>
<a id="img2" href="images/image2.jpg" rel="lightbox[defil]" 
title="Ma belle image deux"></a>
<a id="img3" href="images/image3.jpg" rel="lightbox[defil]" 
title="Ma belle image trois"></a>
Comme vous pouvez le constater, ce sont des liens, sans aucun contenu, donc non cliquables, par contre, ils possèdent tous le même attribut "rel" et un "id" bien distinct.
Attention à bien spécifier les "id" car c'est ce qui va permettre de faire le lien avec le flash, et le javascript d'appel de la lightbox.
Dans le flash, sur chacune de vos vignettes, vous pouvez placer le code getURL adéquat selon l'exemple suivant:
getURL("javascript:OpenLB('img1')");
(avec "img1" à remplacer par l'"id" de votre choix)
Dans notre cas , il a fallu modifier un peu le lightbox.js et un peu le lightbox.css, mais rien de bien méchant.

Voir la mise en place par Zeni sur le site du bourget

Source: Codefidelity
avec un exemple, téléchargeable ici

Ignorer les fichiers sous SVN

13 Mars 2009 18:58 | Par Miss Lemon dans Développement

 , ,

Subversion

Il arrive souvent lors d'un projet sous SVN que l'on se retrouve lors d'un status avec une liste de fichiers, que l'on ne souhaite pas svniser.
Admettons l'arborescence suivante:
|-- site
|   |-- biblio
|   |   |-- images
|   |   |-- pdf
Dans "pdf", on souhaite ignorer tous les fichiers dont l'extension est ".pdf", et dans "images" on souhaite ignorer tous les fichiers dont l'extension est ".gif", ".jpg" ou encore ".png", tous ces fichiers étant uploadés via le backoffice.
L'idéal est d'utiliser la propriété ignore permettant, comme son nom l'indique, d'ignorer les fichiers.
Alors comment ça marche:
  • Placez vous dans l'arborescence , dans "biblio"
  • Tapez la commande suivante :

    Exemple 1:
    svn propedit svn:ignore pdf
    Exemple 2:
    svn propedit svn:ignore images
  • Placez vos pattern d'exclusions:

    Exemple 1:
    *.pdf
    
    Exemple 2:
    *.gif
    *.jpg
    *.png
    
  • Enregistrez
  • Commitez
Et voilà !! vous pouvez faire des status, des update et des commit comme bon vous semble, ces fichiers ne vous gêneront plus

Online Regular Expression Testing Tool

2 Janvier 2009 23:01 | Par Miss Lemon dans Développement

 , , ,

Une application en ligne, réalisée en Flex, permettant de tester les expressions régulières à la volée.

RegExp Online Testing Tool

L'interface est simple à utiliser.
Et, si il existe probablement des outils plus performants, celui ci a l'avantage d'être en ligne.

Plus d'info ici

Message personnel: Non, on ne peut pas utiliser les expressions régulières au pictionnary ^^

Server2Go

7 Décembre 2008 15:47 | Par Miss Lemon dans Développement

 , , , , ,

Server2Go

Server2Go est un environnement PHP portable.
A l'origine créé pour pouvoir mettre sur un CD-ROM ses applications web en PHP, il est désormais possible de s'en servir sur d'autres supports portables tels qu'une clé USB.
Server2Go est un environnement comprenant Apache, PHP et MySQL.
Server2Go est gratuit, fonctionne directement sur votre clé USB ou votre CD-ROM sans aucune autre installation.
Dans la dernière version de Server2Go, les versions logicielles disponibles sont:
  • Apache 1.3.x, 2.0.x and 2.2.x
  • PHP 5.2.x with a lot of Extensions
  • MySQL 5, SQL Lite
  • Perl 5.8

Fonctionne sur les plateformes Windows supérieures à Windows 98 et est actuellement en version beta pour MAC OSX.
Pour le détail complet des fonctionnalités, et le télécharger, rendez vous sur le site: Server2Go

Je n'ai pas encore eu le loisir d'essayer, je ne sais donc pas ce que ça vaut réellement mais ça m'a l'air pas mal.
Et vous ? Vous connaissez? Quels sont vos avis ?

Source: Nexen

Reconnaître les problèmes d'affichages ISO / UTF-8

2 Octobre 2008 22:11 | Par Miss Lemon dans Jus De Citron

 , ,

Parce que je ne me souviens jamais dans quel sens c'est, voici un petit billet pense-bête:

  • La page affiche des caractères de ce type : "é", "î", "Ã", ...
    Les données ont été enregistrées au format UTF-8, et le navigateur les affiche en pensant avoir affaire à de l'ISO.
  • La page affiche des caractères de ce type : "�"
    Les données ont été enregistrées au format ISO, et le navigateur les affiche en pensant avoir affaire à de l'UTF-8.

Et pour tout savoir sur l'UTF-8 avec PHP et MySQL, voici un petit tutoriel

Ma première application AIR

31 Mai 2008 15:33 | Par Miss Lemon dans Développement

 , ,

Jus De Citron on AIR

Adobe AIR permet de développer et de déployer des applications bureau, connectée au web, à l'aide des technologies AJAX ou Flex.
J'aime bien les applications basées sur la technologie AIR, comme par exemple Analytics Reporting Suite .
J'avais besoin de quelques statistiques pour mon blog, tels que le nombre de billets depuis l'origine, où ce genre de chose (des stats qui ne servent qu'à flatter mon égo), je me suis donc dit, plutôt que de faire des requêtes en base, que je devrais refaire la prochaine fois, je vais faire un script PHP, que j'intégrerais au blog.
Et puis, je me suis dit, pourquoi ne pas joindre l'utile à la curiosité, et de tenter de faire ça "ON AIR".
Me voilà donc partie.

Lire la suite

Mettre ses musiques en écoute sur son site web

30 Mai 2008 23:24 | Par Miss Lemon dans Technologies Web

 , ,

DewPlayer MP3

On connait le site Alsacreations.com pour ces bonnes astuces, ses tutoriaux , et son respect des normes W3C.
Alsacréations c'est aussi et avant tout une agence web strasbourgeoise qui propose désormais des petits outils bien pratique pour agrémenter vos sites web de musique, vidéos ou diaporama.

J'ai donc testé le player MP3 en version Multi, sur un de mes sites à usage privé.

Player Mp3 Dew

Pour l'installation, rien à redire, c'est mega simple, un enfant de 5 ans y arriverait.
Comme en plus sur le site il y a un générateur de code, on ne risque même pas la faute de frappe.
En gros, vous copiez le fichier swf sur votre serveur, vous copiez vos musique sur votre serveur, et une balise <embed> plus tard, votre lecteur est prêt !!
Je vous conseille donc ces petits outils très pratique et simple d'utilisation.

Lightbox

26 Mai 2008 13:40 | Par Miss Lemon dans Développement

 , , ,

Lightbox Clones Matrix

A l'origine, la "lightbox" permet d'afficher une image en javascript, dans une popup. Aujourd'hui les frameworks javascript (Prototype, JQuery, ...) proposent chacun leur "lightbox".
De plus, les "lightbox" ne se contentent plus d'afficher uniquement une image, mais elles permettent aujourd'hui d'afficher des ensembles d'images, de l'ajax, du flash, ...)

Il est donc devenu difficile de trouver le bon script qui satisfera vos besoins.

"The Lightbox Clones Matrix" est donc là pour vous aider.

Lire la suite

Les emailings et la compatibilité client mail

21 Mai 2008 20:39 | Par Miss Lemon dans Développement

 , ,

Emailing compatible

Lorsque l'on envoie un client mail, on se demande toujours si il va passer sur l'ensemble des clients mails, que ce soit des logiciels ou des interfaces web.
Généralement on teste sur son propre client mail version logiciel (Thunderbird, Outlook, ..) et sur une interface web (Gmail, Yahoo, ...)
Malheureusement , chacun d'eux fonctionnant à leur manière, ce n'est pas suffisant.
De plus, si on prend l'exemple d'Outlook celui ci ne réagit pas de la même façon selon sa version (2003, 2007, ..)
Il faut donc écrire le code HTML de l'emailing de la façon la plus compatible qui soit.
Voici "A Guide to CSS Support in Email: 2007 Edition".
Ce guide (qui a déjà 1 an) liste les propriétés css compatibles et les non compatibles.
Cela permet d'éviter les erreurs trop banales, et d'assurer un minimum de compatibilité à vos emailings.

symfony en français

14 Mai 2008 19:41 | Par Miss Lemon dans Développement

 , ,

symfony

Depuis quelques mois déjà j'ai envie de me mettre à symfony.
Malheureusement je manque de temps, et la lecture de l'énorme livre écrit tout en anglais ne me facilite pas les choses.
Les concepteurs de symfony ont beau être français, ils n'ont apparemment pas voulu que leur produit soit accessible aux nons anglophones.
Ce n'est pas que mon anglais soit si mauvais, c'est surtout que , le soir, comme livre de chevet, les livres techniques en anglais moi j'ai du mal, j'ai donc rarement réussi à dépasser l'introduction, avant de succomber aux bras de Morphée.

symfony book


Mais, heureusement pour moi, la communauté symfony est une communauté sympa et elle vient à mon aide.
  1. Le livre est disponible en ligne. Je peux donc aller grappiller quelques pages dans la journée lorsque je suis sur le net.
  2. Et surtout la communauté comporte de nombreux développeurs étrangers, dont des francophones et pense aux francophones. Le site officiel de symfony propose donc désormais de nombreux début de traductions à son ouvrage donc une version française


symfony en français

Je n'ai plus qu'à régler le premier problème qui est le manque de temps, et je n'aurais plus d'excuses pour ne pas m'y mettre et enfin tester.

Hack CSS pour Firefox uniquement

17 Avril 2008 19:57 | Par Miss Lemon dans Développement

 , , , ,

Je suis toujours en train de chercher, alors pour ne plus le perdre, je me fait un petit billet "pense-bête".

Pour faire un hack CSS qui ne fonctionne que pour le moteur Gecko, c'ets à dire Firefox et Netscape, mais pas Internet Explorer, Safari, WebKit, Opera ou encore Konqueror.
html:not([lang*=""]) .maclasse{}

Source: Les Hack css sur ZoneCSS

sftp par batch ou apprendre à sftp et à ssh à communiquer

14 Avril 2008 23:38 | Par Miss Lemon dans Développement

 , , ,

ssh-agent

J'ai été récemment confronté à un problème pour envoyer des fichiers en sftp.
La problématique d'origine était pourtant simple: Envoyer un fichier (format texte) vers un serveur sftp dont j'avais toutes les informations et même la clé rsa.

Je pose ma clé dans le dossier /home/user/.ssh qui va bien en lui mettant les droits 700 comme il se doit. Je sais que la clé jumelle existe sur le serveur de destination donc pas d'inquiétude sur ce point.
Mon fichier doit partir en pleine nuit, pas de souci, je cré une ligne dans la crontab de mon "user" qui lance un fichier php à l'heure choisie.
Ce fichier php, vérifie l'existence du dit fichier à envoyer et génère un autre fichier "commandes.sh"contenant les commandes qui seront lancées une fois connecté à mon serveur sftp, puis lance un bash shell "exec_commande.sh" qui se charge de la commande sftp en elle même .
J'ai lu préalablement qu'il fallait que j'utilise "ssh-agent" et "ssh-add".

Lire la suite

© Miss Lemon 2007 | Graphisme: Merci Dam's pour le coup de main | Plateforme: Dotclear