Télécharger en tant que PDF, PPTX
Téléchargé parJulien Sicot
Ergonomie web et mobile en bibliothèque
Le document explore l'importance croissante des smartphones et des sites web adaptés aux mobiles, en citant des statistiques sur l'utilisation des appareils mobiles en France. Il discute des avantages et inconvénients des différentes approches de développement d'applications mobiles, notamment les applications natives, les applications web, et les applications hybrides. Le texte souligne également la nécessité pour les bibliothèques de repenser leur contenu et leur accessibilité dans un contexte mobile.
Contenu connexe
![[concept] Maquette site web de la bibliothèque universitaire Rennes 2](https://cdn.slidesharecdn.com/ss_thumbnails/protoaccsitebu-100429150233-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
Similaire à Ergonomie web et mobile en bibliothèque
![[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?](https://cdn.slidesharecdn.com/ss_thumbnails/internetmobileccjbdavid-120424013022-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Ergonomie web et mobile en bibliothèque
- 1. *en bibliothèque @jsicot Stage ENSSIB- Sept. 2013 &Ergonomie web mobile*
- 2. Vous et votre mobile ? ChristianTan, My smartphone is smarter than you, Flickr, by-nc-sa
- 3. 15M 6M 4M Source :GFK et Gartner, Mai 2013
- 4. 38% des français possèdentun smartphone au 1er semestre 2012 Source : Google, Mai 2012 60% Taux de pénétration envisagé pour l’Europe à l’horizon 2015 Source : Morgan Stanley Research, Juin 2012
- 5. 25,1M de mobinautes/ mois en France Source : Médiamétrie, Juin 2013 8,3% du trafic internet Source : GS StatsCounter, MyFanGroup, 2013
- 6. 1% du traficinternet en 2011 4% du trafic internet en 2012
- 7. 98% À lamaison 79% Au travail 76% En déplacement 76% Dans un magasin 65% Dans les transports 62% Au café 45% Chez le médecin 44% Dans les aéroports 42% Lors d’événements sociaux 26% En cours Source : Google, Notre planète mobile : France, Mai 2012
- 8. 85%Des utilisateurs utilisentleur smartphone pour rechercher des informations locales Source : Google, Notre planète mobile : France, Mai 2012
- 9. Proposer une expérience utilisateur différente...? Youflavio,minority-report-omg-02, Flickr, by-sa
- 10. Les horaires Quels services/contenuspour un site mobile de bibliothèque 1 Plan et accès2 Recherche simple4 Compte lecteur 5 Formulaire de contact 6 Actualités3Bases de données compatibles mobile 7
- 11.
- 12. Application native Avantages Meilleure intégration graphique et matérielle Visibilté+ grace aux markets Meilleures performances Inconvénients Doit être téléchargée Termes et conditions des markets 1 app / OS Développement + complexe (SDK)
- 14. Web App Avantages Multi Plate-formes Maintenance + aisée Fullweb HTML5 Inconvénients Maintenance doublée Ne peut pas utiliser les APIs natives (APN, etc) URIs multiples 2 sites Site mobile + pauvre que l’original
- 15. Framework complémentaire à lalibrairie jQuery ! Jquery mobile Interface utilisateur pensée pour un usage mobile avec prise en compte des gestes et des écrans tactiles Simplicité d’utilisation. Technologies HTML5 et CSS Personnalisable. Un thème roller permet de créer son propre thème très facilement. Jason Cooper, Developing a Prototype Library WebApp for Mobile Devices, Ariadne, Juin 2013 Permet de créer facilement des applications Web cross- plateforme (compatibles tous les navigateurs, responsive design, multiplateforme)
- 18. Application hybride Avantages Une seuleapp déployée sur plusieurs OS Accès aux API natives HTML5, JS, CSS3 Inconvénients MaintenanceUX et design non natif Inconvénients des applications
- 20. @joehewitt Dear iPhone/iPad webdesigners: the browser already has a back button, so your site doesn’t need one. don’t copy apps just to imitate. ‟
- 21.
- 22.
- 23. CyberHades, google glass,Flickr, by-sa SamsungTomorrow, GALAXY Gear, Flickr, by-nc-sa
- 24. Ethan Marcotte, ResponsiveWeb Design Fragmenting our content across different “device-optimized” experiences is a losing proposition, or at least an unsustainable one. ‟
- 25. Sortir du cadre djwudi, Before:Old, dying 17" CRT, Flickr - by-nc-sa
- 26. John Allsopp, ADao of Web Design, 2000 The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. ‟
- 27. Jeremy Keith, «Context»adactio For over a decade, we have pretended that there’s a mythical perfect size that every person will be using ‟
- 28. Stephen Hay, TheHaystack There is no mobile web. There is only The Web, which we view in different ways‟
- 29. Brad Frost, Mobile-FirstResponsive Web Design
- 31. Stephanie Rieger We needto make smarter content not smarter containers ‟
- 32. Veronica Erb, Friday2:45pm, The Myths of Mobile Context #ias12 @globalmoxie, Flickr, by-nc-sa Au delà des mythes
- 33. Les horaires Quels services/contenuspour un site mobile de bibliothèque 1 Plan et accès2 Recherche simple4 Compte lecteur 5 Formulaire de contact 6 Actualités3
- 34. Les utilisateurs demobiles sont pressés et distraits 1 Mobile = Moins2 La multiplication des gestuelles ou clics sont le diable 4 «Il nous faut un site web mobile !» 5 Mobile = Apps 6 «Complexité» est un vilain mot 3Les CMS et les APIs sont pour les geeks 7 7 croyances à dépasser Source : Josh Clark , The Seven Deadly Myths of Mobile, 2012
- 35. Stéphanie Walter, Contentis like water, CC BY-SA
- 36. Get your contentready to go anywhere because it’s going to go everywhere‟ Brad Frost, For a Future-Friendly Web
- 38. Ethan Marcotte, ResponsiveWeb Design Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience ‟
- 42. Newton icon parMark bauer, Dribbble Splorp, HTML5 vs Newton: The Boston Globe, Flickr
- 43. Trent Walton, FitTo Scale My love for responsive centers around the idea that my website will meet you wherever you are from mobile to full-blown desktop and anywhere in between. ‟
- 46.
- 47. Petite graine deviendra... Patricia, Silenceça pousse, Flickr, by-nc-sa
- 48. Brad Frost, Mobile-FirstResponsive Web Design
- 49. Inspirez-vous !HGK handmade,Little patchwork WIP, Flickr, by-nc-sa
- 50. Sauce Babilonia, Mobilefirst, Flickr, by-nc Maquettez votre projet !
- 51. 2. Grilles fluides Pulpolux,Protective net, Flickr, by-nc
- 52. We should startthinking about layout as an enhancement ‟ Ethan Marcotte
- 53. Ethan Marcotte, FluidGrids Target ÷ Context = Result ‟
- 54.
- 55.
- 56.
- 57. .left { float: left; width:76.6%; } .right { float: right; width: 23.4%; }
- 58. Système de grillesde Skeleton
- 59. 3. Media fluides PriitKallas, Splash (fluid mechanics), Wikimedia,
- 60.
- 61.
- 65.
- 66. Smartphone (portrait) 320px Smartphone(paysage) 480px Tablette 7’ (portrait) 768px Tablette 10’ (portrait) 768px Tablette 10’ (paysage) 1024px Écran large 1200px Les points de rupture
- 68. <link rel=“stylesheet” type=“text/css” href=mobile.css”media=“screen and max-width:480px)” />
- 69. /* Smartphone modeportrait */ @media only screen and (max-width : 320px) { /* Styles */ } /* Smartphone mode paysage */ @media only screen and (min-width : 321px) { /* Styles */ }
- 70. /* Tablette modeportrait */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ } /* Tablette mode paysage */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ }
- 71. Assurer la compatibilitéavec les anciennes versions des navigateurs tels qu’Internet Explorer
- 72. 3. Une question deperformances brian hefele, speed limit 10, Flickr, by-nc
- 73. Responsive design Avantages Multi Plate-formes + Évolutif +Pérenne Un seul ensemble d’URIs SEO ++ Inconvénients Dev + exigeant + long Délicat dans le cadre d’une refonte Orienté contenu Gestion des perfs Maintenance
- 75. Les frameworks foundation.zurb.comgetbootstrap.com Comparatif :http://responsive.vermilion.com/compare.php
- 77. Testez votre design http://www.webdesignerdepot.com/2013/07/how-to-test- responsive-designs-for-free/ TouringClub..., Crash-test de compatibilité - Kompatibilitätscrashtest, Flickr, by-nc
- 78. Matthew Reidsma, LOL,Github- https://github.com/mreidsma/lol Reidsma, Matthew. « Responsive Web Design for Libraries: Beyond the Mobile Web ». Books and Contributions to Books (1 mars 2013). http://scholarworks.gvsu.edu/library_books/5.
- 83. Liste de sites académiqueset de bibliothèques Eric Rumsey, Responsive Design Sites: Higher Ed, Libraries, Notables
- 84. Reste un problèmede taille : Les bibliothèques ne maîtrisent pas la totalité des contenus/services offerts