Code WebApp photo pour iPhone et BlackBerry

Sylvie · 20 Décembre 2009, 11:51:21

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 · 20 Décembre 2009, 22:48:48

CitationLe 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 · 21 Décembre 2009, 12:07:46

Bonjour Couleurs Evasion

CitationCela 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

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

CitationPar 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 · 21 Décembre 2009, 19:32:11

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 · 22 Décembre 2009, 13:02:59

CitationPar 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 · 22 Décembre 2009, 19:20:11

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

Canolta · 22 Décembre 2009, 22:36:35

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 · 23 Décembre 2009, 11:25:43

Merci Laurent pour cette piste que je vais explorer

ROMU · 24 Décembre 2009, 09:42:05

Citation de: Sylvie le 22 Décembre 2009, 13:02:59
CitationPar 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 · 24 Décembre 2009, 14:17:32

CitationPeux 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 · 25 Décembre 2009, 16:51:50

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