You are on page 1of 84

Applications et sites mobiles

11.09.2012

Animation :
Alexandre Boder, alexandre.boder@hesge.ch

Laure Mellifluo, laure.mellifluo@hesge.ch

Ariane Rezzonico, ariane.rezzonico@hesge.ch

HEG, Filière Information documentaire

Ce support est diffusé selon les termes de la licence Creative Commons BY-SA 3.0 (Paternité – Partage des conditions initiales à l’identique).

LA BIBLIOTHÈQUE AU BOUT DES DOIGTS :
APPLICATIONS ET SITES MOBILES
L’extraordinaire évolution des usages de smartphones, tablettes et autres dispositifs mobiles oblige les institutions à redéfinir la manière dont elles offrent des contenus. Certaines bibliothèques proposent déjà des informations multiplateformes, d’autres hésitent à le faire. Cette formation d’une journée a pour objectif de permettre aux participant-es de découvrir les usages que les bibliothèques peuvent faire de ces technologies, les opportunités et les challenges pour elles d’être présentes partout et en tout temps, les types de contenus à privilégier, et les choix technologiques à envisager (application iPhone, site mobile, QR codes, etc.). Des témoignages de professionnel-le-s ayant déjà développé des contenus mobiles permettront d’enrichir cette formation.

Programme de la journée
9h00-9h15 9h15-10h30 Accueil des participant-es Tour de table et présentation de la journée Des arguments pour se lancer ! Les chiffres clés Challenges et opportunités pour les bibliothèques Exemples d’utilisation Pause café Les questions à se poser avant de lancer un projet Les formats et les plateformes Comment publier ? Les enjeux de la sécurité et de la confidentialité des données Déjeuner à Clair-Bois Ateliers pratiques « tirer le meilleur parti du monde mobile selon ses moyens » Utiliser des applications tierces Créer des QR codes Développer un site web mobile Développer une application mobile Pause café Retour d’expérience L’application mobile de la Médiathèque Valais, par Romaine Valterio Barras, directrice adjointe de la Médiathèque Valais, et Besim Berisha, développeur Synthèse et conclusion de la journée

10h30-11h00 11h00-12h15

12h15-13h30 13h30-15h15

15h15-15h30 15h30-16h45

16h45-17h00

DES ARGUMENTS POUR SE LANCER !

LES CHIFFRES CLÉS

1

Les chiffres clés
• D’après la dernière étude réalisée par  Comparis en mars 2012, on constate que 48 % des Suisses possède un smartphone. Fin 2007,  ils n’étaient que 3 % !

2

Les chiffres clés
• Quatre personnes sur cinq (79 %) sont  équipées d’un smartphone parmi les 15‐19  ans et trois sur quatre (72 %) parmi les 20‐24  ans.

3

Les chiffres clés
• La part de marché des systèmes d’exploitation  pour smartphones est de 55 % pour Apple et  36 % pour Android. Les autres systèmes ne  sont que très peu représentés. • Toutefois, le marché d’Apple tend à diminuer  au profit d’Android et l’arrivée du Windows  Phone risque de faire évoluer ce marché.

4

Les chiffres clés
Source : Apple

• Le marché des tablettes est en forte  croissance également. Apple est toujours en  tête des ventes suivi de Samsung. L’iPad représente 64% des ventes de tablettes  (ABIResearch, 2012).

5

Les chiffres clés
• Microsoft a annoncé en juin 2012 l’arrivée  d’une tablette «Surface» concurrençant  directement l’iPad. Google a fait de même une  semaine après !

Source : Google

Source : Microsoft

6

Les chiffres clés
• On recourt en Suisse à plusieurs appareils  pour accéder à Internet. La proportion  d’utilisateurs de tablettes a septuplé depuis  2010 pour atteindre 400 000 personnes  (NetMetrix, 21.03.2012). 

7

Les chiffres clés : horizon 2015

8

Les usages d’Internet
• Les données publiées par l’OFS montrent que  les activités liées à la consultation des médias  ont augmenté de manière très significative  entre 2004 et 2010.

9

Les usages d’Internet

10

Le Top Ten des sites suisses les plus  consultés en avril 2012

Source : NetMetrix, communiqué de presse, 24.05.2012

11

CHALLENGES ET OPPORTUNITÉS  POUR LES BIBLIOTHÈQUES
12

• Les bibliothèques ont la possibilité d’offrir des  prestations qu’elles ne pouvaient pas offrir  avec les outils classiques. La technologie  mobile leur offre de nouvelles perspectives de  développer des services personnalisés  (comme la géolocalisation qui permet à un  usager d’obtenir des informations du lieu où il  se trouve).

13

La bibliothèque au bout des doigts :

 Est accessible en tout temps et en tout lieu

14

La bibliothèque au bout des doigts
• Doit permettre au plus grand nombre  d’accéder aux informations quel que soit leur  équipement (iPhone, Samsung, etc.). • Doit adapter son offre (contenus, services) aux  types d’usagers et à leurs besoins. 

15

La bibliothèque au bout des doigts
• N’est pas une réplique du site en miniature  mais offre des informations à des usagers qui  n’utilisent pas un PC au moment où ils ont un  besoin d’information. Les contenus sont  adaptés à la taille de l’écran d’un dispositif  mobile.

16

La bibliothèque au bout des doigts
• Utilise les fonctionnalités spécifiques des  appareils mobiles telles que :
    La géolocalisation L’interaction avec des objets (via des QR codes) La réalité augmentée Les notifications et les sms

17

La bibliothèque au bout des doigts :
• Permet de promouvoir les activités de la  bibliothèque • Valorise les collections  • Est un outil d’apprentissage • Offre des services à valeur ajoutée

18

• Les enquêtes réalisées auprès des étudiants*  montrent qu’ils sont intéressés par ce qui leur  est immédiatement utile et dont ils tirent un  bénéfice pour leurs activités.

*Paterson, L., Low, B. Student attitudes towards mobile library services for smartphones, Library HiTech,  2011,     vol. 29, p 412‐423

19

EXEMPLES D’UTILISATION

20

Les types de contenus
• Privilégier l’accès à ce qui est le plus important  pour l’utilisateur comme :
     Les horaires Les actualités, évènements Les ressources électroniques L’accès au catalogue Le contact

21

Les types de contenu
 La réservation de places ou pc (pour les  bibliothèques universitaires)  Les fonctions liées au prêt (réservation,  prolongation, etc.)  L’accès à un service de référence

22

• Mais aussi :
 L’accès à un fonds particulier
• Exemple : la Bayerische StaatsBibliothek de Munich a  numérisé un important fonds précieux de manuscrits et  de collections particulières (par exemple en lien avec  Louis II). Elle a choisi de développer des applications  valorisant ces fonds et exploitant complètement les  possibilités de la réalité augmentée en fonction des  lieux visités par les touristes.

23

Application iPhone de la  Bayerische StaatsBibliothek de Munich

24

25

La recherche d’information
• Celle‐ci sera toujours plus mobile, on le  constate déjà aujourd’hui où l’on utilise son  smartphone pour trouver des informations  (actualités, horaires de transport, musique,  etc.) • Il est donc utile de voir quelles prestations  proposer afin de faciliter la recherche  d’information.
26

La recherche d’information
• Les grands acteurs de la recherche  d’information se positionnent tous sur ce  terrain et depuis longtemps déjà.  • La recherche vocale est possible et les outils  de recherche exploitent toutes les  fonctionnalités des technologies pour  personnaliser complètement les résultats de la  recherche d’information. 
27

La recherche d’information vue par
«Google Now, un outil de recherche 
contextuelle, qui effectue des  investigations sur le Web en fonction de  l'heure, de votre agenda, ou de votre  emplacement géographique : itinéraires,  magasins, horaires de bus ou de cinéma,  conseils, etc., bref une somme d'informations  en fonction de votre contexte personnel à un  temps T.»
(Source : Abondance, 28 juin 2012) 

28

Le catalogue… mais pas seulement
• Les usagers sont de plus en plus habitués à  recevoir des informations sur les smartphones à partir de notifications. • Proposer l’OPAC est important mais on peut  aussi offrir l’accès à des banques de données  (! aux licences) et faciliter l’accès à des  ressources par la mise à disposition de  répertoires de ressources en ligne.
29

Banque de données : Emerald
• une interface de recherche simplifiée via le  site mobile ou une application

30

Proposer un répertoire

31

• Les interfaces doivent être simples et sont le  plus souvent utilisées pour des recherches  rapides ou des vérifications plutôt que des  recherches approfondies. 

32

Les notifications par SMS
• Pour informer sur la disponibilité d’un livre. • Pour rappeler la tenue d’un événement. • Pour annoncer des horaires particuliers.

33

Les notifications par SMS
 Il est important de ne pas abuser des notifications  par sms qui doivent rester liées à des informations  importantes pour l’usager. Ne pas tout diffuser par  sms ce qui peut être aussi communiqué par  courrier électronique !

34

35

Application iPhone  Ludwig II de la  Bayerische  StaatsBibliothek de  Munich

36

Des expositions virtuelles
• Offrir des compléments à des expositions pour  en savoir plus ou accéder à des contenus  multimédias.

37

Les podcast et les vidéos
• Permettre le téléchargement de podcasts ou  de vidéos (conférences, tutoriels, etc) • Proposer des visites (audio tours)

38

39

Géolocalisation, réalité augmentée,  vidéos
Application  iPhone Ludwig II  de la Bayerische  StaatsBibliothek de Munich

40

Démonstration de l’utilisation de la  réalité augmentée pour l’application  Ludwig II

41

Géolocalisation

42

QR Code (Quick Response)
• Définition Code en deux dimensions, qui prend la forme  d'un ensemble composé de traits, de carrés,  de points, de polygones ou d'autres figures  géométriques dont on se sert pour livrer de  l'information.
(Source : Office québécois de la langue française, 2012)

43

QR Codes
• Il existe plusieurs applications pour en créer et  l’usager doit posséder une application lui  permettant de les lire.

44

QR Codes
• S’assurer que les usagers sont familiers avec  leur utilisation et en placer là où ils offrent  une réelle valeur ajoutée.

45

QR Codes

Le QR code propose un lien vers la  référence mais pourrait aussi  présenter un plan de la bibliothèque  avec la localisation du livre sur le  rayon.

46

QR Codes
• Des QR codes peuvent également être utilisés  comme aide à manipuler un scanner, etc.  L’usager est ainsi guidé par des vidéos ou des  photos lors de l’utilisation du scanner ou autre  appareil. • Utile aussi pour envoyer des liens vers des  ressources (articles, etc.) ou des critiques de  livres.
47

QR Codes

48

La réservation d’espaces de travail ou  de PC

North Carolina State University Libraries
49

Des suggestions de lecture

Orange County Library System

50

Le service de référence
• Si l’on voit de plus en plus de services offrir  des prestations en ligne on voit aussi des  expériences où le recours à des dispositifs  mobiles permet d’atteindre les usagers en  dehors de la bibliothèque.  • Le service de référence devient itinérant !

51

Le service de référence
• Le sms permet de répondre à des questions  simples de manière rapide. Le temps pour  répondre à un sms doit être réduit au  minimum sinon l’usager se passera de  l’information.

Source : Houston Community College Libraries

52

53

Recommander des applications
• En plus de la création d’un site ou d’une  application mobile, la bibliothèque peut  recommander des applications à ses usagers. • Le site du gouvernement américain  OnGuardOnline.gov propose des critères pour  évaluer la qualité de ces applications. 

54

Recommander des applications
• «Mobile friendly Resources»
We love our mobile devices just as much as you, which is why we  wanted to bring some of the great services from OCLS to your  pocket. Below is a list of great apps and mobile‐friendly sites,  made by OCLS and a few of our trusted vendors, that we think  you should check out! Orange County Library System

55

Quelques recommandations
• Connaître les dispositifs utilisés par les  usagers, leurs besoins, leurs connaissances de  ces technologies. • Réfléchir aux types de contenus susceptibles  d’être le plus utiles à leurs besoins

56

Quelques recommandations
• S’assurer que l’équipe de la bibliothèque est à  l’aise avec ces dispositifs et peut fournir une  assistance aux usagers et tester des  applications • Promouvoir le plus largement possible la  nouvelle application ou le nouveau site  mobile.

57

Quelques recommandations
• L’univers du mobile évolue très rapidement.  Suivre les tendances et proposer de nouveaux  produits aux usagers.

Source : Tech‐Com, http://tech‐com.over‐blog.com/article‐les‐telephones‐du‐futur‐seront‐flexibles‐69089093.html

58

LES QUESTIONS À SE POSER AVANT DE LANCER UN PROJET

LES FORMATS ET LES PLATEFORMES

59

Le système d’exploitation mobile

Source: http://www.netmarketshare.com/operating‐system‐market‐share.aspx?qprid=9&qpcustomb=1  (23.07.2012)

60

Le navigateur mobile

Source : http://www.netmarketshare.com/browser‐market‐share.aspx?qprid=1&qpcustomb=1  (23.07.2012)

61

L’écran mobile
Taille physique Résolution

http://fr.wikipedia.org/wiki/Fichier:Pixel‐example.png,  Ed g2s, CC‐BY‐SA

• Galaxy S : 4 pouces • Galaxy S III : 4,8 pouces • iPhone : 3,5 pouces • iPad : 9,7 pouces
62

• • • • •

Galaxy S : 480×800 px Galaxy S III : 1280x720 px iPhone 3 : 320x480 px iPhone 4 : 640x960 px nouvel iPad : 2048 x 1536 px

L’écran mobile : viewport
= surface affichable d'un terminal mobile Valeur par défaut : 980 px (largeur)

Déclaration pour fixer le « viewport » dans un fichier HTML en  fonction de la surface affichable réelle :
<meta name="viewport" content="width=device-width" />

63

Langages de développement
• HTML (HTML5,  XHTML Basic 1.1,  XHTML MP 1.2) • CSS • JavaScript • iOS : Objective C • Android : Java • Symbian : C++

Site web mobile

Application  mobile

64

Site web mobile VS Application mobile
SITE WEB MOBILE
Meilleur marché Indépendant de la  plateforme Mêmes connaissances  que pour un site web  standard Pas d’installation pour  l’utilisateur final Accès au matériel limité Doit être utilisé en ligne Difficile à personnaliser

65

Site web mobile VS Application mobile
APPLICATION MOBILE
Meilleur accès au  matériel Réputation Profit possible Utilisation hors ligne Stockage des données  chez l’utilisateur Accès facile après  installation Cher à développer Dépendant d’une  plateforme Connaissances spécifiques  nécessaires Installation et mise à jour  par l’utilisateur Dépendant d’un  intermédiaire pour la  publication

66

Site web mobile VS Application mobile
App Fonctionnalités Réputation Profit Hors ligne

Prix Personnalisation Connaissances  techniques Indépendance

Site  web

67

COMMENT PUBLIER ?

68

Cycle de vie d’un projet (mobile)
Expression des  besoins Maintenance Analyse de  l’existant

Promotion

Étude de  faisabilité

Réalisation Conception
69

Réalisation du  cahier des  charges

Equipe de projet
Collaborateurs Partenaires internes Consultants externes

70

Identifier les besoins
Identifier les besoins des utilisateurs mobiles :

Technologies  utilisées

Contenus  souhaités

71

Identifier les besoins
Utiliser les statistiques du site web Effectuer une enquête Interviewer les usagers Comparer avec d’autres institutions

72

Identifier les besoins

University of Edinburgh  (Paterson, Low 2011)
73

Identifier les besoins
Classification Google des utilisateurs mobiles :

Repetitive Now

Bored Now

Urgent  Now

74

Analyser l’existant
• Déjà un site web  (mobile) ? • Une version mobile  de l’OPAC à  disposition ? • Compétences à  l’interne ?

75

Etude de faisabilité
Objectif : juger l'opportunité de proposer ou  non un (nouveau) service mobile  continuer ou stopper le projet

76

Etude de faisabilité
Classifier les fonctionnalités désirées par les  utilisateurs :
requise secondaire optionnelle non désirée

77

Etablir un cahier des charges
Le cahier des charges définit :  Le contexte  Les objectifs  Le public cible  Les fonctionnalités souhaitées  Les technologies …
78

Etablir un cahier des charges

Source: http://alain.battandier.free.fr/IMG/png/gestion‐projet‐web‐humour.png

79

Etablir un cahier des charges

Sélection d’un  prestataire

Choix d’une  solution

80

Définir une politique éditoriale
Contenu généré automatiquement
• Flux RSS du blog • Horaires de la base de données • Fil Twitter • Mur Facebook

Contenu créé pour le service mobile
• Géolocalisation de l’institution • Téléphone / SMS • Réalité augmentée
81

Réalisation et conception
Conception

Réalisation

Tests

82

Promotion
Rediriger l’usager vers le site mobile ou lui proposer de  télécharger l’application mobile

University of North Carolina at Chapel Hill Libraries

Bibliotecas Universidad de Salamanca 

83

Promotion

http://biblioottawalibrary.ca/fr/main/find/download/digital

84

Maintenance
Contrôler  l’utilisation

Adapter aux  nouvelles  technologies Mettre à jour  le contenu

85

LES ENJEUX DE LA SÉCURITÉ ET DE  LA CONFIDENTIALITÉ DES DONNÉES
86

Objectifs
• Prendre conscience des risques sécuritaires  sur mobiles et smartphones
 Identifier les menaces  Identifier les vulnérabilités  Connaître les mesures de protection

• Connaître l’impact sur le développement  d’applications ou de site web

87

Introduction : constat
• Rappel: 
    Nombre croissant et démocratisation des smartphones Usages étendus (datas, transactions $) Modalités diversifiées (SMS, Internet)  vulnérabilité Compagnon personnel   données personnelles centralisées

Bouleverse les SI et donc les institutions.  Les mobiles sont une source de risque pour leurs  utilisateurs car ils compilent une mine d’information  et sont plus vulnérables que les ordinateurs.

88

Menaces
• Nature
 Perte de données  Modification de données  Vol de données (souvent à l’insu de la victime)  Vie privée et espionnage (géolocalisation)  Usurpation d’identité  Dysfonctionnement de l’appareil/logiciels  Perte $$$ et de temps  Dépendance (intellectuelle et psychologique)

89

Menaces
• Identification
 Chevaux de Troie  Spyware (logiciels espions)  Botnets mobiles  SMS associés à des malwares  Hameçonnage et usurpation (Fishing et Spoofing) Les plateformes de téléchargement plus ou moins  sécurisées

90

Vulnérabilité
HUMAINES
• Manque d’expertise (tout un chacun utilise un tel appareil, sans formation  particulière) • Confiance mal placée (qui s’équipe d’un antivirus alors que sur PC…) • Négligence (pas de backups) • Perte / Vol du smartphone non sécurisé

TECHNIQUES
• SMS/MMS • Wi‐Fi/GSM • Failles logicielles (client web, OS, autres logiciels)

91

Conséquences
HUMAINES • Perte de confiance • Méfiance face aux applications et non usage • Endettement • Responsabilité
«… Pour le fournisseur d’une solution de paiement par téléphone  portable, ce risque n’a pas seulement des conséquences pour ce qui  est de la confiance dans le système de paiement, mais il peut aussi  soulever des questions touchant à la responsabilité. Ce problème est  particulièrement aigu lorsque la solution de paiement par téléphone  portable peut être utilisée dans le commerce de proximité».
Source : Explications concernant le paiement par téléphone portable
Préposé fédéral à la protection des données et à la transparence
http://www.edoeb.admin.ch/themen/00794/01210/01212/index.html?lang=fr 92

Conséquences
• Impact
 Entreprises : phénomène du BYOD
(bring your own device) : mélange privé/professionnel → plus de soupçons → limitation des applications installées

 Particuliers  Institutions

93

Protection
• Contre‐mesures techniques
 A chaque couche/niveau de l’appareil  (du hard au soft  verrouillage mécanique,  protection logicielle,…).  Logiciels de blocage/confirmation de transaction  Anti‐malwares  Logiciels de sauvegardes (locales ou sur Cloud…)

• Bonnes pratiques
94

Protection – Bonnes pratiques
• Individus
      Verrouillage du téléphone Réseaux  : wifi/bluetooth/data/roaming Inactiver la géolocalisation Surveiller les débits de données (gratuit) Téléchargement Apps de protection à installer
(verrouillage/effacement à distance, antivirus, …)

 Sauvegarder régulièrement

95

Protection – Bonnes pratiques
• Développeurs
 Peu d’apps sont développées avec un fort souci de  sécurisation  Peu de transactions proposées avec une  certification à fort encryptage  Les mises à jours ne sont pas systématiques après  la découverte de failles flagrantes qui sont  largement communiquées sur les réseaux
96

Protection – Bonnes pratiques
• Nos institutions
 Diffuser les bonnes pratiques  Recommander les sites de référence  Développer les applications avec un souci  professionnel de sécurité  Maintenir ses applications

97

Aides, réponses et solutions
• Sites de la Confédération
 MELANI (Central d’enregistrement et d’analyse pour la sécurité de l’information)
• Rapports • Alertes • Formulaire

 Préposé fédéral à la protection des données et à la  transparence (PFPDT)  Onguardonline.gov 
98

99

100

Aides, réponses et solutions
• Sociétés de conseil et de formation
 P.ex. la société advtools basée à Genève qui  propose différentes formations ainsi que des  conseils sur la sécurisation des applications  mobiles : http://www.advtools.com/

• Conférences DefCon, Hashdays, BlackHat

101

Approches professionnelles
Plusieurs méthodes pour le  management de la sécurité • MEHARI
Méthode harmonisée d'analyse des risques

• OCTAVE/S
Operationally Critical Threat, Asset, and Vulnerability EvaluationSM

• EBIOS
Expression des Besoins et Identification des Objectifs de Sécurité

102

Conclusion
Sécurité ≈≠ Problème Sécurité = Opportunité ! Opportunité pour nos institutions :
• • • • Pas d’intérêt commercial direct Rôle de prescripteur Rôle de prévention Information neutre et ciblée

103

TIRER LE MEILLEUR PARTI DU MONDE MOBILE SELON SES MOYENS

UTILISER DES APPLICATIONS  TIERCES
104

Atelier
• Objectif : permettre à l'usager de scanner le  code‐barres d'un livre et de voir si celui‐ci est  disponible dans votre catalogue • Technique utilisée : installer et paramétrer une  application gratuite de scan de code‐barres et la  lier avec l'OPAC (mobile) de votre bibliothèque
Pour des raisons pratiques, nous allons utiliser le catalogue  mobile de l'EPFL (http://library.epfl.ch/mobile/)
105

Atelier Etape 1 : installation
Sur Android
• Allez sur Google Play • Téléchargez  l'application Zxing Barcode Scanner

Sur iPhone/iPad
• Allez sur l'App Store • Téléchargez  l'application Zbar Barcode Reader

106

Atelier Etape 2 : configuration
Sur Android
• Ouvrez l'application  Barcode Scanner • Allez dans les paramètres • Choisissez « URL de  recherche personnalisée »  et entrez l'URL suivante : http://library.epfl.ch/mobile/ fr/index.php?q=%s

Sur iPhone/iPad
• Ouvrez l'application Zbar • Scannez un code‐barres • Revenez en arrière avec le  bouton « Barcode » • Cliquez sur « Edit » et choisissez  « Add New Link » tout en bas • Entrer un nom et l’URL suivante : http://library.epfl.ch/mobile/fr/ index.php?q={GTIN‐13} • Déplacez le nouveau lien vers le  haut de la liste • Cliquez sur « Done »
107

Atelier Etape 3 : utilisation
Sur Android
• Scannez le code‐barres  d'un livre avec  l'application • Cliquez sur le bouton  « Recherche  personnalisée » • Vous arrivez sur la  notice du livre sur le  catalogue mobile !
108

Sur iPhone/iPad
• Scannez le code‐barres  d'un livre avec  l'application • Si vous avez placé le lien  vers le catalogue tout en  haut de la liste, celui‐ci sera  utilisé par défaut. Sinon,  cliquez sur « Barcode »  pour avoir toutes les  possibilités.

CRÉER DES QR CODES

109

Atelier
• Objectif : promouvoir des services ou des  produits de la bibliothèque à l'aide de QR  codes • Technique utilisée : créer des QR codes à  l'aide d'une application gratuite en ligne et les  décoder avec une application gratuite pour  smartphone/tablette

110

Atelier Etape 1 : création des QR codes
• Ouvrez un navigateur web et rendez‐vous sur la  page suivante : http://zxing.appspot.com/generator • Créez des QR codes qui pourraient être utilisés  dans votre institution • Copiez‐les dans un document Word et  enregistrez‐le dans le dossier suivant de votre  ordinateur : G:\_cours\12‐13\ID\fc_mobile
111

Atelier Etape 2 : lecture des QR codes
• Utilisez un smartphone ou une tablette pour  décoder les QR codes créés en utilisant une  application adéquate (par ex. Barcode Scanner pour Android ou  Zbar pour iPhone/iPad)

112

DÉVELOPPER UN SITE WEB MOBILE

113

Avant de commencer

Site dédié

Site  «responsive»

114

Site web «responsive»
Un site – différents rendus :

Source: http://www.thedesignwork.com/responsive‐web‐design/ 115

Bonnes pratiques
• Utiliser des feuilles de style CSS pour la mise  en forme • Simplifier le code HTML/CSS au maximum

• Respecter les standards du W3C
116

Bonnes pratiques
• Utiliser le cache pour une utilisation hors ligne
Fichier INDEX.HTML <html manifest="cache.manifest" > <head> … </head> <body> … </body> </html> Fichier CACHE.MANIFEST #Version 0.1 CACHE: index.html img/logo.gif css/style.css

Fichier .HTACCESS AddType text/cache-manifest manifest

117

Bonnes pratiques
• Sélectionner le  contenu • Mettre le contenu le  plus souvent utilisé en  haut
library.epfl.ch/mobile /fr/index.php

118

Bonnes pratiques
• Créer des icones  suffisamment  grandes • Limiter le nombre  et la proximité des  liens
Source : http://www.lukew.com/ff/entry.asp?1085

119

Bonnes pratiques
• Utiliser des tailles relatives (% ou em) • Adapter la taille des images • Choisir des images simples et contrastées

120

Bonnes pratiques
• Transformer les n° de  téléphone en liens  cliquables
<a href="tel:0223881790"> 022/388.17.90 </a>

• Inclure un lien vers le site  web complet
http://m.library.oregonstate.edu/ask

121

Bonnes pratiques
• • • • Pas d’effets de survol (« mouseover ») Pas de tableaux Pas de frames Pas de pop‐ups

122

Redirection
• Utiliser les CSS et les media queries
Exemple de media query sur une page HTML :
<link rel="stylesheet" media="all and (max-width: 480px)" href="style_mobile.css" type="text/css" />

(seulement si les différences entre le site mobile et le site  standard sont dans la mise en page)

123

Redirection
• Utiliser un script JavaScript
Exemple : https://github.com/sebarmeli/ JS‐Redirection‐Mobile‐Site/

• Utiliser un script PHP
Exemple : http://detectmobilebrowsers.mobi

124

Redirection
• Au cas où, toujours mettre un lien vers le site  mobile

125

OPAC mobile
• Demande souvent un grand travail de  développement  Coûte cher  Reprendre les frameworks/applications  existants

126

OPAC mobile
Le projet de la Bibliothèque de l'EPFL :

Projet «Swissbib mobile» adaptable par toutes les  bibliothèques présentes dans le catalogue Swissbib
http://blogs.epfl.ch/article/33311
127

OPAC mobile
WorldCat Mobile :

http://www.worldcat.org/m/

128

OPAC mobile
La Bibliothèque‐Médiathèque de Sierre et le  WebOPAC mobile de NetBiblio :

http://brv.bms.sierre.ch/netbiblio
129

OPAC mobile
Les offres des vendeurs :
• • • • Innovative Interfaces (Millennium ILS) : AirPAC SirsiDynix (Horizon, Symphony) : BookMyne ExLibris (Primo) : Primo Mobile PMB Service (PMB) : Biblo

 A considérer lors du choix d'un nouvel OPAC

130

Des outils
• Editeurs standards (libres et gratuits) :

http://www.jedit.org/

http://notepad‐plus‐plus.org/

http://bluegriffon.org/

131

Des outils
• Frameworks (libres et gratuits) :

http://jquerymobile.com/ http://the‐m‐project.org

http://www.sencha.com/ http://www.iui‐js.org/
132

Des outils
• Pour « mobiliser » un site web déjà existant :

http://mobilizejs.com/

133

Des outils
• Pour les CMS (Content Management Systems) :
 Thème adaptatif ou optimisé pour les mobiles  Utilisation de plugins de redirection

134

Des outils
• Un modèle de site web «mobile first» pour les  bibliothèques :
OnePager http://influx.us/onepager

135

Choisir l’URL
http://m.mabiblio.ch http://mobile.mabiblio.ch http://www.mabiblio.mobi http://www.mabiblio.ch/mobile

136

Tester

http://validator.w3.org/mobile/
137

Tester
• Quelques émulateurs/simulateurs :
http://responsinator.com

http://emulateurmobile.com
138

Tester

http://mobitest.akamai.com
139

DÉVELOPPER UNE APPLICATION  MOBILE
140

Pour un meilleur accès…
au microphone et aux haut‐parleurs

141

Pour un meilleur accès…
à l’appareil photo

142

Pour un meilleur accès…
aux données de géolocalisation

wifi adresse IP  de l’appareil antennes‐relais
143

GPS

Pour un meilleur accès…
à l'orientation de l'appareil : accéléromètre + gyroscope

144

Pour un meilleur accès…
aux transactions sans contact avec la technologie NFC (Near Field  Communication)
Annonce du 25 juillet 2012 (RTS) :  dès 2013, il sera possible de payer avec son téléphone  mobile dans certains supermarchés Migros et Coop
Source: http://www.rts.ch/info/sciences‐tech/4151590‐le‐paiement‐par‐ telephone‐portable‐bientot‐disponible‐en‐suisse.html

145

Pour un meilleur accès…
aux autres applications installées sur l'appareil

146

Des outils
Pour iOS (iPhone, iPad) :
xCode Eclipse

Pour Android :
Plugin  Android Developper Tools (ADT)

Android Software  Development Kit (SDK)

147

Des outils
PhoneGap : application libre et gratuite

Source : https://build.phonegap.com

148

Des outils
Boopsie : à destination des bibliothèques

http://www.boopsie.com/library

 plus coûteux que les autres solutions

149

Diffuser ses applications mobiles

150

Diffuser ses applications mobiles

151

RÉFÉRENCES

152

Références
La bibliographie et la webographie de ce cours peuvent être  consultées à l’adresse suivante : https://www.zotero.org/lauremel/items/collectionKey/TMIJHJIU Les personnes qui possèdent un compte Zotero pourront  également y télécharger de nombreux PDF d’articles. Cette collection pourra être enrichie au fil du temps.
Sauf mention contraire, les images proviennent de l’OpenClipArt Library (http://openclipart.org/) et  sont placées dans le domaine public. 

153

RÉFÉRENCES

152

Références
La bibliographie et la webographie de ce cours peuvent être  consultées à l’adresse suivante : https://www.zotero.org/lauremel/items/collectionKey/TMIJHJIU Les personnes qui possèdent un compte Zotero pourront  également y télécharger de nombreux PDF d’articles. Cette collection pourra être enrichie au fil du temps.
Sauf mention contraire, les images proviennent de l’OpenClipArt Library (http://openclipart.org/) et  sont placées dans le domaine public. 

153