Code WebApp photo pour iPhone et BlackBerry

[Sylvie]

Bonjour,

Il est possible de bricoler rapidement une Webapp photo pour ces smartphones à larges écrans qui ont le vent en poupe et dont la qualité s’améliore sans cesse. J’ai mis au point quelques lignes de code html et réalisé un mini-site.

Le résultat marche bien sur iPhone et sur BlackBerry, mais moins bien sur Samsung ou Nokia La taille des photos (en format jpg ou png) varie de 265x200 px à 256x256 px. Ridiculement petit direz-vous. D’accord, mais c’est juste histoire de s’amuser et de bluffer (un peu) les copains.

Voici un lien pour tester sur votre mobile un exemple
http://www.sylviescope.com/pocket.html

Ceux qui savent bidouiller du html peuvent récupérer et adapter le code de deux pages modèles qui se trouvent ici :
http://www.sylviescope.com/pocket/code/accueil.html
http://www.sylviescope.com/pocket/code/galerie.html

Enjoy ! 

[Couleurs Evasion]

Le résultat marche bien sur iPhone et sur BlackBerry, mais moins bien sur Samsung ou Nokia La taille des photos (en format jpg ou png) varie de 265x200 px à 256x256 px. Ridiculement petit direz-vous. D’accord, mais c’est juste histoire de s’amuser et de bluffer (un peu) les copains.

Cela marche très bien aussi sur mon HTC en Windows mobile
Tu as bien rentabilisé l'espace, quasiment utilisé à 100% pour les photos.
En ce qui me concerne les photos pourraient être un peu plus grande 

Par contre, le gros soucis (facile à corriger) est qu'il ouvre les galeries à chaque fois dans un nouvel onglet (comme sur mon Pc d'ailleurs).

[Sylvie]

Bonjour Couleurs Evasion

Cela marche très bien aussi sur mon HTC en Windows mobile

Merci d'avoir essayé et contente de savoir que cela marche bien sur HTC en Windows mobile

En ce qui me concerne les photos pourraient être un peu plus grande   

Tu peux bien sûr les adapter. Je ne dépasse pas les 265 px de largeur et les 200 de hauteur pour les photos horizontales afin qu'elles puissent être regardées sur BlackBerry.

Par contre, le gros soucis (facile à corriger) est qu'il ouvre les galeries à chaque fois dans un nouvel onglet (comme sur mon Pc d'ailleurs).

Effectivement, je n'avais pas fait attention à cela. Merci de me le signaler, je vais corriger. Il suffit juste d'ôter la balise target="_blank"

D'autres avis ?

[Canolta]

Sur l'Iphone, çà marche nickel en mode portrait.
Par contre en mode paysage, les photos font à peine plus la moitié de l'écran et en général on regarde toujours les sites à l'horizontal.

Cdlt
Laurent

[Sylvie]

Par contre en mode paysage, les photos font à peine plus la moitié de l'écran et en général on regarde toujours les sites à l'horizontal

Bon, je vois qu'il y a des progrès à faire. Merci pour la remarque. Faut que je choisisse mon camp : ou bien iPhone, ou bien BlackBerry

[Couleurs Evasion]

C'est clair que si tu vises les smartphones avec grands écrans, tu peux agrandir tes images (j'avais aussi formulé cette remarque).

[Canolta]

En Java il est possible de détecter la résolution de l'écran d'un ordi.
Une fois la résolution trouvée, le script dirige vers la bonne taille de photos.

Je sais que c'est faisable pour un site web "classique" par contre je ne sais pas si cela être adapté pour un mobile-phone.

Laurent

[Sylvie]

   Merci Laurent pour cette piste que je vais explorer

[ROMU]

Par contre en mode paysage, les photos font à peine plus la moitié de l'écran et en général on regarde toujours les sites à l'horizontal

Bon, je vois qu'il y a des progrès à faire. Merci pour la remarque. Faut que je choisisse mon camp : ou bien iPhone, ou bien BlackBerry

Bonjour et bravo pour le travail accomplie

Peux tu insérer un conditionnel du type si  navigateur = safari (iphone ) alors affiche en mode paysage ?

je sais que pour mon site j'ai été obligé de même des conditionnels en fonction des différents navigateur (safari, IE, firefox...)

[Sylvie]

Peux tu insérer un conditionnel du type si  navigateur = safari (iphone ) alors affiche en mode paysage ?

 J'y réfléchis pendant les vacances mais je ne suis pas sûre d'y arriver. Vous tiendrai au courant, promis

[Canolta]

Bonjour,

J'ai fais petite recherche, il est possible de détecter le navigateur via un simple USER-AGENT.

Tout est là, yapluka 

http://www.abc-webdesign.fr/optimiser-ou-creer-son-site-web-pour-iphone/

PS : Je te conseille l'optimisation via le CSS. (Optimisation de la taille des images et de l'apparence des liens)

Laurent