Vous êtes concepteur web ? Genre un vrai de vrai ? Vous êtes presque l’inventeur
du Responsive Web Design et pensez que le Web mobile n’a plus de secret pour
vous ?
Je vous propose pourtant de découvrir une poignée de subtilités encore méconnues, même de vous (ouais enfin j’espère) !
On évoquera le media handheld, les tailles d’écran, les valeurs de pixels indépendants, le retina, @viewport en CSS, la meta width=device-width, l’accélération matérielle, les unités nouvelles telles que vw, vh, ou encore dpi, dppx, etc.
Soyons joueurs et faisons un pari : si vous n’avez rien appris pendant cette
présentation, je vous paye une bière alsacienne (ou un jus de kiwi) !
Responsive Web Design : best practices et retour d'expérience de Backelite et...Idean France
Retour d'expérience sur le Responsibe Web Design par l'agence Backelite: spécificités et enjeux du RWD, les best practices, étapes clés d'un projet, approche content first, framework, cas pratique et témoignages des Galeries Lafayette
Réponse concrète à la prolifération des formats d’écran, le responsive design est une approche radicalement novatrice dans la distribution de contenus et services en ligne. Dagobert vous en livre quelques clefs de compréhension.
La grande majorité des sites actuels offrent une expérience utilisateur désastreuse sur un écran réduit : textes et menus de navigation minuscules, zoom obligatoire, débordements qui “cassent” le design, multi-colonnes non adaptées, contenus superflus, etc.
Cette présentation a pour objectif de proposer des solutions concrètes pour adapter rapidement un site web existant au média mobile à travers quelques exercices pratiques fondés sur les possibilités avancées du langage CSS en Responsive Web Design.
Le responsive design : adapter ses contenus aux formats mobilesBig5media
Cette présentation réalisée par Big5media vous aidera à mieux comprendre les enjeux et les raisons pour lesquelles il est devenu indispensable d'adapter son site web et ses campagnes email marketing aux formats mobiles!
Vous êtes concepteur web ? Genre un vrai de vrai ? Vous êtes presque l’inventeur
du Responsive Web Design et pensez que le Web mobile n’a plus de secret pour
vous ?
Je vous propose pourtant de découvrir une poignée de subtilités encore méconnues, même de vous (ouais enfin j’espère) !
On évoquera le media handheld, les tailles d’écran, les valeurs de pixels indépendants, le retina, @viewport en CSS, la meta width=device-width, l’accélération matérielle, les unités nouvelles telles que vw, vh, ou encore dpi, dppx, etc.
Soyons joueurs et faisons un pari : si vous n’avez rien appris pendant cette
présentation, je vous paye une bière alsacienne (ou un jus de kiwi) !
Responsive Web Design : best practices et retour d'expérience de Backelite et...Idean France
Retour d'expérience sur le Responsibe Web Design par l'agence Backelite: spécificités et enjeux du RWD, les best practices, étapes clés d'un projet, approche content first, framework, cas pratique et témoignages des Galeries Lafayette
Réponse concrète à la prolifération des formats d’écran, le responsive design est une approche radicalement novatrice dans la distribution de contenus et services en ligne. Dagobert vous en livre quelques clefs de compréhension.
La grande majorité des sites actuels offrent une expérience utilisateur désastreuse sur un écran réduit : textes et menus de navigation minuscules, zoom obligatoire, débordements qui “cassent” le design, multi-colonnes non adaptées, contenus superflus, etc.
Cette présentation a pour objectif de proposer des solutions concrètes pour adapter rapidement un site web existant au média mobile à travers quelques exercices pratiques fondés sur les possibilités avancées du langage CSS en Responsive Web Design.
Le responsive design : adapter ses contenus aux formats mobilesBig5media
Cette présentation réalisée par Big5media vous aidera à mieux comprendre les enjeux et les raisons pour lesquelles il est devenu indispensable d'adapter son site web et ses campagnes email marketing aux formats mobiles!
Découvrez ce “MobiliteaTime” de 50 pages pour mieux comprendre ces deux méthodes de conception :
> Commencez par plonger dans la navigation web d’aujourd’hui. Entre diversité des devices utilisés, mobinautes de plus en plus nombreux et actifs, la navigation se fait de plus en plus sous le prisme du multidevice et surtout du mobile. Découvrez les solutions qui s’offrent à vous.
> Faites le point sur les concepts de bases liés au responsive et à l’adaptive design (breakpoints, design fluide, résolution d’écran, etc) et les avantages liés à ces stratégies (des sites plus rapides à charger, moins coûteux en data, etc).
> Explorez les différentes possibilités de design au sein d’un site responsive ou adaptif, ainsi que les contraintes techniques associées.
> Ressortez de cette lecture avec (nous l’espérons) une meilleure compréhension du responsive et de l’adaptive design et les clefs pour mettre en place la stratégie adaptée à vos besoins.
Introduction aux principes du Responsive Web DesignStrasWeb
Le Responsive Web Design est un principe de conception de sites web qui permet d’adapter la présentation d’une page web au périphérique utilisé pour la consulter (smartphone, tablette, ordinateur, etc.). Il s’agit d’une des pierres angulaires du web-design moderne.
Durant cette formation, vous découvrirez les grands principes du Responsive Web Design et comment les mettre en œuvre sur vos sites.
Mobile et Flashcode : Effet de mode ou moyens stratégiques ? | actiacti
Le mobile marketing est en pleine évolution : site mobile, application, flashcode, QR code.. alors, effet de mode ou moyens stratégiques?
acti Interactive Performance est une agence web basée à Lyon : création de sites web, conseil en stratégie digitale, SEO, SEM, e-reputation, community management, showreel…
La mode s'évapore, la tendance s'érode… Seul le style reste.
Je vous présente les évolutions graphiques et digitales. Un point sur les tendances webdesign et autour du web. Une étude pour y voir plus clair.
[MàJ : décembre 2014]
Article complémentaire à cette présentation, rédigé pour Alsacréations :
http://www.alsacreations.com/article/lire/1657-tendances-du-webdesign-2015.html
Autre présentation en rapport : Apple, Branding Story 2015
http://fr.slideshare.net/philipperondepierre37/apple-une-question-dimage
Philippe Rondepierrre - Directeur Artistique
http://philipperondepierre.com
Les 10 Tendances Webdesign de 2014 by VanksenVanksen
Découvrez les tendances webdesign de l'année 2014 selon Vanksen.
This presentation is also available IN ENGLISH, here : https://fr.slideshare.net/Vanksen/10-webdesign-trends-for-2014
Responsive design, flat design, grid, parallax, HTML 5, CSS3, ... toutes les tendances en matière de site web en 2014. Conférence du 30 janvier 2014, à la CCI de Bordeaux, animée par Vincent Pereira, consultant webmarketing de l'agence Inaativ.
6 années au siège du Groupe Banque populaire comme Responsable Webdesign / AMOA
« Médiatrice » entre la technique, la pertinence et l’esthétisme !
Présentation "Métier" auprès de la Direction des Technologies pour expliquer la démarche d'un projet, les différentes étapes. L'objectif était de sensibiliser les développeurs pour arriver à travailler ensemble, leur faire prendre conscience qu'il est important d'être solliciter en amont et valoriser leur travail.
Tendances techniques, webdesign, des composants HTML, CSS et graphiques du moment.Recensement non exhaustif des tendances du moment. Analyse des avantages et inconvénients pour chacun d'eux
De plus en plus, les interfaces tendent à sortir de l'ordinaire écran pour aller vers des formats aussi dynamiques qu'inattendus. Face à ce monde où tout objet peut devenir "écran", il est nécessaire de repenser les méthodologies de design pour favoriser cohérence, rapidité et créativité !
Découvrez notre guide pratique sur l'Atomic Design, une méthode métaphorique bien que concrète au service des designers !
Quelques repères des outils, tendances et techniques qui permettent de situer le Webdesign d'aujourd'hui et demain. Du gif au Flash, du navigateur Mosaic aux Google Glass, une revue diagonale de ce qui a composé le Web d'aujourd'hui.
Responsive Design and Information Architecture with Oracle Web Center Content...Dmitri Khanine
This whitepaper provides understanding of Responsive Design principles (RDP) and how they apply to your Oracle Content Management system. It also introduces the basic principles of Information Architecture and User Experience Management and shows real world examples of the impact of implementing the RDP.
It’s here to help Oracle professionals to quickly identify areas of sub-standard performance and sub-par user experience in their WebCenter implementation and provide practical recommendations to designers and administrators on boosting user productivity.
Solution de transfert mobile - Formats d'échangeOCTO Technology
Les solutions de transfert mobiles sont nombreuses. Mais en pratique, c’est le format d’échange JSON qui est régulièrement utilisé. Déjà intégré pour le web, connu et lisible, ce format a tout pour plaire. Mais est-il le seul? Est-il réellement adapté au mobile?
Le poids de la données ainsi que sa vitesse d'encodage/décodage sont des facteurs importants pour diminuer le temps de chargement. De plus, une simplicité d'usage d'un format garantit une mise en place plus rapide, plus simple. La manipulation d'un JSON, par exemple, n'est pas si aisée en Android.
La présentation ci-dessous présente les trois formats comparés: JSON, Message Pack et Protocol Buffers.
Découvrez ce “MobiliteaTime” de 50 pages pour mieux comprendre ces deux méthodes de conception :
> Commencez par plonger dans la navigation web d’aujourd’hui. Entre diversité des devices utilisés, mobinautes de plus en plus nombreux et actifs, la navigation se fait de plus en plus sous le prisme du multidevice et surtout du mobile. Découvrez les solutions qui s’offrent à vous.
> Faites le point sur les concepts de bases liés au responsive et à l’adaptive design (breakpoints, design fluide, résolution d’écran, etc) et les avantages liés à ces stratégies (des sites plus rapides à charger, moins coûteux en data, etc).
> Explorez les différentes possibilités de design au sein d’un site responsive ou adaptif, ainsi que les contraintes techniques associées.
> Ressortez de cette lecture avec (nous l’espérons) une meilleure compréhension du responsive et de l’adaptive design et les clefs pour mettre en place la stratégie adaptée à vos besoins.
Introduction aux principes du Responsive Web DesignStrasWeb
Le Responsive Web Design est un principe de conception de sites web qui permet d’adapter la présentation d’une page web au périphérique utilisé pour la consulter (smartphone, tablette, ordinateur, etc.). Il s’agit d’une des pierres angulaires du web-design moderne.
Durant cette formation, vous découvrirez les grands principes du Responsive Web Design et comment les mettre en œuvre sur vos sites.
Mobile et Flashcode : Effet de mode ou moyens stratégiques ? | actiacti
Le mobile marketing est en pleine évolution : site mobile, application, flashcode, QR code.. alors, effet de mode ou moyens stratégiques?
acti Interactive Performance est une agence web basée à Lyon : création de sites web, conseil en stratégie digitale, SEO, SEM, e-reputation, community management, showreel…
La mode s'évapore, la tendance s'érode… Seul le style reste.
Je vous présente les évolutions graphiques et digitales. Un point sur les tendances webdesign et autour du web. Une étude pour y voir plus clair.
[MàJ : décembre 2014]
Article complémentaire à cette présentation, rédigé pour Alsacréations :
http://www.alsacreations.com/article/lire/1657-tendances-du-webdesign-2015.html
Autre présentation en rapport : Apple, Branding Story 2015
http://fr.slideshare.net/philipperondepierre37/apple-une-question-dimage
Philippe Rondepierrre - Directeur Artistique
http://philipperondepierre.com
Les 10 Tendances Webdesign de 2014 by VanksenVanksen
Découvrez les tendances webdesign de l'année 2014 selon Vanksen.
This presentation is also available IN ENGLISH, here : https://fr.slideshare.net/Vanksen/10-webdesign-trends-for-2014
Responsive design, flat design, grid, parallax, HTML 5, CSS3, ... toutes les tendances en matière de site web en 2014. Conférence du 30 janvier 2014, à la CCI de Bordeaux, animée par Vincent Pereira, consultant webmarketing de l'agence Inaativ.
6 années au siège du Groupe Banque populaire comme Responsable Webdesign / AMOA
« Médiatrice » entre la technique, la pertinence et l’esthétisme !
Présentation "Métier" auprès de la Direction des Technologies pour expliquer la démarche d'un projet, les différentes étapes. L'objectif était de sensibiliser les développeurs pour arriver à travailler ensemble, leur faire prendre conscience qu'il est important d'être solliciter en amont et valoriser leur travail.
Tendances techniques, webdesign, des composants HTML, CSS et graphiques du moment.Recensement non exhaustif des tendances du moment. Analyse des avantages et inconvénients pour chacun d'eux
De plus en plus, les interfaces tendent à sortir de l'ordinaire écran pour aller vers des formats aussi dynamiques qu'inattendus. Face à ce monde où tout objet peut devenir "écran", il est nécessaire de repenser les méthodologies de design pour favoriser cohérence, rapidité et créativité !
Découvrez notre guide pratique sur l'Atomic Design, une méthode métaphorique bien que concrète au service des designers !
Quelques repères des outils, tendances et techniques qui permettent de situer le Webdesign d'aujourd'hui et demain. Du gif au Flash, du navigateur Mosaic aux Google Glass, une revue diagonale de ce qui a composé le Web d'aujourd'hui.
Responsive Design and Information Architecture with Oracle Web Center Content...Dmitri Khanine
This whitepaper provides understanding of Responsive Design principles (RDP) and how they apply to your Oracle Content Management system. It also introduces the basic principles of Information Architecture and User Experience Management and shows real world examples of the impact of implementing the RDP.
It’s here to help Oracle professionals to quickly identify areas of sub-standard performance and sub-par user experience in their WebCenter implementation and provide practical recommendations to designers and administrators on boosting user productivity.
Solution de transfert mobile - Formats d'échangeOCTO Technology
Les solutions de transfert mobiles sont nombreuses. Mais en pratique, c’est le format d’échange JSON qui est régulièrement utilisé. Déjà intégré pour le web, connu et lisible, ce format a tout pour plaire. Mais est-il le seul? Est-il réellement adapté au mobile?
Le poids de la données ainsi que sa vitesse d'encodage/décodage sont des facteurs importants pour diminuer le temps de chargement. De plus, une simplicité d'usage d'un format garantit une mise en place plus rapide, plus simple. La manipulation d'un JSON, par exemple, n'est pas si aisée en Android.
La présentation ci-dessous présente les trois formats comparés: JSON, Message Pack et Protocol Buffers.
External Data Provider an Headless Way to Share Content - Developers Meetup -...Jahia Solutions Group
Here are the slides of Jahia's Developers Meetup held in Paris on January 25, 2017.
The topic of this meetup was: External Data Provider an Headless Way to Share Content.
You can watch the replay here : https://www.youtube.com/watch?v=mkLzkEiz5WQ
Mobile Website or Responsive Design? The Answer is NEITHER.TWG
By Derek Watson, Senior Developer at The Working Group
Reviews the two most popular strategies for creating mobile web properties (separate mobile-specific sites vs. responsive css), the pros and cons of each, and a little known third technique that marries the best of both worlds.
Internet est un lieu en perpétuel mouvement. La technique et les comportements évoluent très vite, ils influencent par conséquent le web design qui est très lié à ces deux facteurs. Par le biais d'exemples et d'études cas, l'atelier propose un tour d'horizon global et transversal des différentes tendances et évolutions actuelles dans web design.
Ce
Responsive/Interactive ArchitectureEnriching Urban Spaces with Interactive/ ...Shereen Khashaba
The document discusses the evolution of architecture as media from prescribed to responsive to interactive. Prescribed architecture has a fixed, pre-scripted design like the Beijing National Aquatics Center lighting. Responsive architecture absorbs environmental data and responds, like the Galleria Department Store facade that changes color based on variables. Interactive architecture enables two-way communication between people and buildings in real-time, through installations like Under Scan portraits that interact with pedestrians. The document provides examples of each type and argues interactive architecture can transform spaces into dynamic storytellers that evolve with people's needs.
This presentation is for those of you who are interested in moving your on-prem SQL Server databases and servers to Azure virtual machines (VM’s) in the cloud so you can take advantage of all the benefits of being in the cloud. This is commonly referred to as a “lift and shift” as part of an Infrastructure-as-a-service (IaaS) solution. I will discuss the various Azure VM sizes and options, migration strategies, storage options, high availability (HA) and disaster recovery (DR) solutions, and best practices.
La mode s'évapore, la tendance s'érode… Seul le style reste.
Je vous présente les évolutions graphiques et digitales. Un point sur les tendances webdesign et autour du web. Une étude pour y voir plus clair.
Bonus : un guide des couleurs se trouve à la fin du document !
[Dernière mise à jour : 2 septembre 2016]
Article Tendances Web Design 2016 rédigé pour Alsacréations :
http://www.alsacreations.com/article/lire/1696-tendances-web-design-2016.html
Article "Comment les géants de la Silicon Valley standardisent le web… et le reste" basé sur mon entretien pour Maddyness :
https://www.maddyness.com/innovation/2016/09/05/design-les-geants-de-la-silicon-valley-standardisent-le-web/
Article de Frenchweb :
http://www.frenchweb.fr/web-design-quelles-seront-les-grandes-tendances-en-2016/221440
Présentation antérieure : Tendances Web Design 2015
http://fr.slideshare.net/philipperondepierre37/web-designtendances2015-38916551
Autre présentation : Apple, Branding Story
http://fr.slideshare.net/philipperondepierre37/apple-une-question-dimage
Philippe Rondepierrre - Directeur Artistique
http://philipperondepierre.com
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...SOAT
Plus de 50% des internautes français utilisent un support mobile pour naviguer sur le web. Il est donc temps de repenser votre stratégie mobile et le Responsive Web Design, consistant à ne faire qu’un seul site adapté au périphérique qui l’affiche, constitue une approche possible.
Après une introduction à ses principes, nous verrons qu’au-delà des défis techniques, le RWD suppose de revoir entièrement le processus de développement d’un site web et les méthodes de travail des équipes, que ce soit en phase de conception ou lors des tests.
Cette conférence sera l’occasion de découvrir les nouveaux challenges à relever par vos équipes lors de la conception de vos prochains sites internet.
WordPress est un CMS très utilisé dans le monde entier. Mais il possède malheureusement de très nombreuses lacunes dès lors que l'on parle de référencement naturel. Dans ces slides, Daniel Roch explique les défauts de WordPress pour votre SEO.
Par l'agence Seomix : http://www.seomix.fr
Introduction aux concepts de Responsive Web Design, méthodos, outils et REX sur ces méthodes (Avantages, inconvénients, coûts...) pour le BreizhCamp 2013
La notion de Responsive Web Design regroupe différents principes et technologies qui forment une approche de conception de sites Web dans laquelle un site est conçu pour offrir au visiteur une expérience de consultation optimale facilitant la lecture et la navigation, quel que soit son interface connectée...
#ScalaBigDay
Jeudi 12 juin 2014
"Saisir les nouveaux enjeux de la mobilité et exploiter le potentiel du mobile" (Salle 5, 16h30 - 17h30)
Speaker : Mathieu Molinaro (@MatMolinaro)
Comment optimiser sa stratégie web pour les tablettes ?Idean France
Données chiffrées sur le marché des tablettes - Quels impacts sur la stratégie web des marques ? Responsive, desktop first, tablet first... quelle stratégie de mise en œuvre adopter pour les tablettes ? Comment concevoir son site web adapté aux tablettes ?
Backelite et la direction digitale Air France ont déroulé cette présentation lors d'une Matinée Backelite le 11 décembre 2014
Kit De Survie Techno et Web à l'usage des EntrepreneursStéphanie Hertrich
Ce programme a été conçu sur mesure, spécialement pour vous, entrepreneurs ou porteurs de projets qui serez tôt ou tard confrontés à des problématiques de développement applicatif ou web.
L'idée est de vous aider à appréhender les principes, les notions de base et le vocabulaire associés au développement applicatif et web.
Nous vous donnerons des repères théoriques et pratiques pour que vous puissiez communiquer et orienter plus facilement vos décisions relatives aux composantes technologiques de votre projet.
En d'autres termes : vous n'avez pas un profil technique, mais vous avez un super projet impliquant du développement ? Le kit de survie est fait pour vous !
Partie 1 : Architectures des applications et technologies de développement
Par Stéphanie Hertrich & Benoit Le Pichon, Evangélistes Développement et Michel Rousseau Evangéliste Expérience Utilisateur (Microsoft)
Cette session abordera les notions de base et les technologies mises en œuvre pour le développement d'applications au sens large:
- Quelle est la différence entre une application, un site web, un service web, … ? Quelles en sont les composantes et comment interagissent-elles ?
- Développer pour un smartphone, une tablette, un poste de travail : quelles différences ?
- Quelles sont les grandes familles de technologies et de langages de développement, quelles sont leurs caractéristiques ?
- Le Cloud diffère-t-il réellement d’un hébergeur classique ?
- Quels bénéfices apporterait concrètement le Cloud à mon projet ?
- De l'importance de l'ergonomie des applications.
- Comprendre les tendances et intégrer le branding et l’identité de marque.
- Valider l'expérience utilisateur et tester sa démarche.
- Rendre ça beau, intelligible et en faire une proposition de valeur.
- Travailler le résultat avec un développeur.
Partie 2 : Concevoir une application, les étapes et la mise en œuvre:
Par Stéphanie Hertrich Evangéliste Développement (Microsoft) et Florent Santin, Développeur et Entrepreneur http://www.infinitesquare.com.
Cette session passera en revue les étapes du processus de conception d'une application:
- Définition du besoin, spécifications, code, tests : quel est le cycle de vie d'une application ?
- Quelle méthodologie et quels outils employer ?
- Les équipes : embaucher ou externaliser son développement ?
- Savoir communiquer avec son équipe technique.
- De l'importance du designer.
- Les questions à se poser pour faire les bons choix.
Comment avancer concrètement sur votre propre projet ? Différents programmes sont accessibles suivant votre niveau d’avancement.
- Des programmes d’accompagnement techniques (Pépinière Microsoft Azure, Speed-dating experts, Accélérateur Apps, ,…)
- Bizspark,le programme dédié aux startups : logiciels & conso Cloud Azure gratuite jusqu’à 60 000$
- Microsoft Ventures : l’accélérateur à startup Parisien de Microso
Web Mobile : quelles opportunités face aux apps ?NiceToMeetYou
"It's an App World", nous disait Flurry (solution de mobile analytics) en 2014. Pourtant, les marques font face à des coûts de déploiement et de maintien des applications souvent élevés. Pire encore, selon Google, seules 3 applications - sur la moyenne de 15 qu'en compte un smartphone en France - seraient régulièrement utilisées par un mobinaute. Alors avec ses 20% de temps passé sur mobile, le navigateur web présente-t-il une alternative efficace aux stores ? Etat des lieux des usages, des solutions techniques, des expériences créatives et des enjeux marketing que le Mobile Web permet encore d'adresser. Avec beaucoup d'exemples concrets à la clé !
Cette conférence donnée lors du Salon Use IT de Lyon présente les avantages de la technologie responsive : nouvelle technologie sur le secteur des IT.
Retrouvez la vidéo du salon sur notre chaine you tube : Intuitiv technology
www.intuitiv-interactive.com
Développement HTML5 : les enjeux et best practicesLaFrenchMobile
Responsive design, HTML5,… autant de concepts permettant notamment d’adresser la fragmentation des écrans (smartphone, tablette, PC, TV connectée) au travers desquels les consommateurs accèdent à votre marque digitale. Tour d’horizon des enjeux, des fonctionnalités clés (réseaux sociaux, SEO, SEM, geolocalisation, gestion du offline, adaptation du design) et des meilleures pratiques dans le développement de site internet mobile. Etudes de cas notamment sur PMU & Interflora récompensés par Google comme M site de l’année.
En plus de coder dans un langage incompréhensible pour les non-initiés, les développeurs ont imaginé un jargon qui leur est hermétique…
Vous êtes en relation avec des développeurs et vous vous sentez parfois perdus ? Vous soupçonnez vos équipes techniques de délibérément employer des termes ou des concepts que vous ne comprenez pas ? Reprenez la main !
Microbox : Ma toolbox microservices - Julien Royekino
Malgré les bénéfices indéniables des architectures microservices, elles apportent une complexité non négligeable. Durant cette session, je vous présenterai la collection d’outils open source ou développé en interne que nous utilisons sur nos différents projets microservices pour limiter les délais de mise en oeuvre de ce type d’architecture. Depuis la gestion des sources jusqu’au monitoring en passant par la génération de projets et l’usine de build nous parcourrons en live l’utilisation de ces différents outils.
Spring data : Une api, quinze possibilités - Julien Royekino
Vous avez besoin d’intégrer une nouveau type de stockage ( Elasticsearch, Cassandra, Redis, Neo4j ) dans votre application mais l’apprentissage d’une nouvelle API vous fait hésiter ? Spring Data est fait pour vous ! Grâce à Spring Data, vous avez à disposition une interface unique pour communiquer avec tous vos backends. Venez découvrir comment faire un stream de données depuis Postgresql, faire des agrégations avec Elasticsearch, enregistrer des documents dans MongoDB, le tout en quelques lignes de code et sans efforts. Nous finirons cette session en détaillant les nouveautés apportées par la version 2.0 autour de la programmation réactive.
Se lancer dans l'aventure microservices avec Spring Cloud - Julien Royekino
Vous êtes convaincus par l’architecture micro-services et vous souhaitez vous lancer dans l'aventure. Durant cette session, nous expliquons comment démarrer concrètement ; quelles sont les nouvelles problématiques que soulève cette architecture et comment les résoudre. Nous détaillons – à travers une application de démonstration qui implémente les concepts de Service Discovery, Circuit Breaker, Routing et Client Side Load Balancing – l'utilisation de la libraire Spring Cloud Netflix (Eureka, Hystrix, Ribbon , ...). Nous survolerons ensuite les différentes alternatives développées par les autres géants du Web tels que Twitter, Airbnb, ...
Les statistiques d’utilisation des téléphones mobiles sont en constante progression et trois choix se dessinent actuellement pour délivrer du contenu sur le Web. Un site responsive, un site dédié mobile ou une application disponible sur un store. Et dans ce dernier cas, vous serez très vite confronté aux contraintes des différents systèmes d’exploitation : Android, iOS et Windows Phone – pour les majoritaires. Dans ce contexte, beaucoup d’outils de développement émergent avec un seul objectif : réutiliser les compétences des développeurs Web et mutualiser le code entre les différentes plate-formes. Cette présentation se base sur le retour d’expérience réussie autour de la mise en place de prototypes et de projets client chez Ekino. Je vais vous exposer les solutions que nous n’avons pas retenues en expliquant nos choix. Puis je vais parcourir plus en détail les solutions que nous avons testées : Apache Cordova, Ionic, SuperSonic, ReactNative, etc. Nous verrons que l’expression “Write once, run everywhere” n’est pas toujours vrai. Le but est qu’à la sortie de cette conférence, je vous aie aidé à faire vos choix techniques, en fonction de vos projets et de vos compétences !
Le « RUN » (ou la Tierce Maintenance Applicative)ekino
Après avoir mis en ligne un nouveau site web, on entre dans une phase dite de « RUN » ou plus précisément en Tierce Maintenance Applicative (TMA). Il s’agit d’assurer une maintenance corrective, mais pas seulement… Il faut prendre en compte la maintenance préventive, la maintenance adaptative, le support fonctionnel, l’exploitation, etc.
Or il y a souvent des confusions entre toutes ces notions. Je propose de partager leur définition et quelques bonnes pratiques de mise en œuvre, tout en illustrant la spécificité de chacune de ces maintenances à partir de situations empruntées aux classiques du cinéma.
La technologie Kinect n’est pas nouvelle, elle avait beaucoup fait parler d’elle en 2010/2011. Microsoft ayant sorti sa nouvelle version dédiée à Windows en juillet 2014, où en sommes-nous aujourd’hui avec cette technologie ? Que peut-on faire et ne pas faire, notamment en choisissant la technologie HTML5 ? Fort d'une expérience réussie et après avoir développé une application disponible lors du salon de la lingerie via la Kinect, mais aussi sur le Web via la souris nous verrons lors de cette présentation tout les tenant et aboutissant pour réussir un projet Kinect HTML5.
L’usage de Symfony2, l’organisation du code et l’usage du projet Sonata chez Canal+ pour répondre aux enjeux de la refonte d’une partie de la plateforme web. La plateforme présente de nombreux challenges techniques : SDK, API privée, API publique restful+hal, création de contenus riches, huit applications différentes avec une base de code commune, etc. Comment il a été possible d’améliorer certaines parties de Sonata ainsi que l’approche choisie pour la création de certains composants transverses.
À partir de la conférence de Raphaël Yharrassarry sur "Science-Fiction et Interaction" (http://www.paris-web.fr/2014/conferences/science-fiction-interaction.php), nous interrogeons l'expérience qu'offrent les objets connectés et nous étudions ce qu'est une expérience complète dans un tel contexte. Enfin, nous en dégageons les critères fondamentaux qui définissent une expérience réussie.
The document discusses industrializing PHP applications in the cloud using Microsoft Azure. It introduces the speaker, Thomas Rabaix, and explains that industrialization involves following standards, automating workflows, and using libraries. Key standards discussed include PSR-0 for autoloading, PSR-1/2 for coding standards, and PSR-3 for logging interfaces. Industrialization allows code to be more easily reused, integrated and understood.
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?ekino
Nombreuses sont les directions digitales ayant aussi bien des besoins éditoriaux que métiers. D'un point de vue business, il n'est pas possible de séparer les deux.
Basiquement, quels choix avons-nous ?
- partir sur un CMS et coder en "CMS"...
- partir sur un framework et réinventer le CMS...
Aujourd'hui, une des solutions est d'alier le meilleur des 2 mondes, mais a aussi ses problématiques :
- comment faire communiquer les 2 solutions ?
- où trouver les bons profils compte tenu de expertise différentes ?
- comment ne pas complexifier la maintenance et l'exploitation ?
Bref, pour ce qui est d'aujourd'hui, c'est possible, mais difficile... Mais demain ?
English version of the presentation we gave at Devoxx FR 2012.
In depth analysis on how java Garbage collector works and how to minimise pause in your application.
This document summarizes a presentation about building a single page image editing application called SnapyX using HTML5 and related technologies. It describes using HTML5 features like canvas and File API for image uploading and processing, CSS3 grids for layout, and Backbone.js with plugins for the client-side architecture including offline storage with IndexedDB. It acknowledges challenges with experimental browsers and technologies but is proud of publishing an app to the Windows Store.
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...OCTO Technology
Par Nicolas Bordier (Consultant numérique responsable @OCTO Technology) et Alaric Rougnon-Glasson (Sustainable Tech Consultant @OCTO Technology)
Sur un exemple très concret d’audit d’éco-conception de l’outil de bilan carbone C’Bilan développé par ICDC (Caisse des dépôts et consignations) nous allons expliquer en quoi l’ACV (analyse de cycle de vie) a été déterminante pour identifier les pistes d’actions pour réduire jusqu'à 82% de l’empreinte environnementale du service.
Vidéo Youtube : https://www.youtube.com/watch?v=7R8oL2P_DkU
Compte-rendu :
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)Laurent Speyser
(Conférence dessinée)
Vous êtes certainement à l’origine, ou impliqué, dans un changement au sein de votre organisation. Et peut être que cela ne se passe pas aussi bien qu’attendu…
Depuis plusieurs années, je fais régulièrement le constat de l’échec de l’adoption de l’Agilité, et plus globalement de grands changements, dans les organisations. Je vais tenter de vous expliquer pourquoi ils suscitent peu d'adhésion, peu d’engagement, et ils ne tiennent pas dans le temps.
Heureusement, il existe un autre chemin. Pour l'emprunter il s'agira de cultiver l'invitation, l'intelligence collective , la mécanique des jeux, les rites de passages, .... afin que l'agilité prenne racine.
Vous repartirez de cette conférence en ayant pris du recul sur le changement tel qu‘il est généralement opéré aujourd’hui, et en ayant découvert (ou redécouvert) le seul guide valable à suivre, à mon sens, pour un changement authentique, durable, et respectueux des individus! Et en bonus, 2 ou 3 trucs pratiques!
L'IA connaît une croissance rapide et son intégration dans le domaine éducatif soulève de nombreuses questions. Aujourd'hui, nous explorerons comment les étudiants utilisent l'IA, les perceptions des enseignants à ce sujet, et les mesures possibles pour encadrer ces usages.
Constat Actuel
L'IA est de plus en plus présente dans notre quotidien, y compris dans l'éducation. Certaines universités, comme Science Po en janvier 2023, ont interdit l'utilisation de l'IA, tandis que d'autres, comme l'Université de Prague, la considèrent comme du plagiat. Cette diversité de positions souligne la nécessité urgente d'une réponse institutionnelle pour encadrer ces usages et prévenir les risques de triche et de plagiat.
Enquête Nationale
Pour mieux comprendre ces dynamiques, une enquête nationale intitulée "L'IA dans l'enseignement" a été réalisée. Les auteurs de cette enquête sont Le Sphynx (sondage) et Compilatio (fraude académique). Elle a été diffusée dans les universités de Lyon et d'Aix-Marseille entre le 21 juin et le 15 août 2023, touchant 1242 enseignants et 4443 étudiants. Les questionnaires, conçus pour étudier les usages de l'IA et les représentations de ces usages, abordaient des thèmes comme les craintes, les opportunités et l'acceptabilité.
Résultats de l'Enquête
Les résultats montrent que 55 % des étudiants utilisent l'IA de manière occasionnelle ou fréquente, contre 34 % des enseignants. Cependant, 88 % des enseignants pensent que leurs étudiants utilisent l'IA, ce qui pourrait indiquer une surestimation des usages. Les usages identifiés incluent la recherche d'informations et la rédaction de textes, bien que ces réponses ne puissent pas être cumulées dans les choix proposés.
Analyse Critique
Une analyse plus approfondie révèle que les enseignants peinent à percevoir les bénéfices de l'IA pour l'apprentissage, contrairement aux étudiants. La question de savoir si l'IA améliore les notes sans développer les compétences reste débattue. Est-ce un dopage académique ou une opportunité pour un apprentissage plus efficace ?
Acceptabilité et Éthique
L'enquête révèle que beaucoup d'étudiants jugent acceptable d'utiliser l'IA pour rédiger leurs devoirs, et même un quart des enseignants partagent cet avis. Cela pose des questions éthiques cruciales : copier-coller est-il tricher ? Utiliser l'IA sous supervision ou pour des traductions est-il acceptable ? La réponse n'est pas simple et nécessite un débat ouvert.
Propositions et Solutions
Pour encadrer ces usages, plusieurs solutions sont proposées. Plutôt que d'interdire l'IA, il est suggéré de fixer des règles pour une utilisation responsable. Des innovations pédagogiques peuvent également être explorées, comme la création de situations de concurrence professionnelle ou l'utilisation de détecteurs d'IA.
Conclusion
En conclusion, bien que l'étude présente des limites, elle souligne un besoin urgent de régulation. Une charte institutionnelle pourrait fournir un cadre pour une utilisation éthique.
MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...Horgix
This is the slide deck of a talk by Alexis "Horgix" Chotard and Laurentiu Capatina presented at the MongoDB Paris User Group in June 2024 about the feedback on how PayFit move away from a monolithic hell of a self-hosted MongoDB cluster to managed alternatives. Pitch below.
March 15, 2023, 6:59 AM: a MongoDB cluster collapses. Tough luck, this cluster contains 95% of user data and is absolutely vital for even minimal operation of our application. To worsen matters, this cluster is 7 years behind on versions, is not scalable, and barely observable. Furthermore, even the data model would quickly raise eyebrows: applications communicating with each other by reading/writing in the same MongoDB documents, documents reaching the maximum limit of 16MiB with hundreds of levels of nesting, and so forth. The incident will last several days and result in the loss of many users. We've seen better scenarios.
Let's explore how PayFit found itself in this hellish situation and, more importantly, how we managed to overcome it!
On the agenda: technical stabilization, untangling data models, breaking apart a Single Point of Failure (SPOF) into several elements with a more restricted blast radius, transitioning to managed services, improving internal accesses, regaining control over risky operations, and ultimately, approaching a technical migration when it impacts all development teams.
2. AGENDA
1 Constat : La grande fragmentation
2 Comment s’armer face à tous ses écrans
3 Les enjeux design et conception
4 La méthodologie
5 Les enjeux techniques du responsive
6 Le choix du responsive
7 Conclusion
4. LES RAPPORTS DE FORCE ONT CHANGÉ EN 2 ANS
50
45
40
35
30
25
IE
Chrome
Firefox
20
Safari
Opera
15
Other
10
5
0
statcounter.com
5. LES RAPPORTS DE FORCE ONT CHANGÉ EN 2 ANS
50
45
40
Chrome
35
30
25
20
Internet
Explorer
IE
Chrome
Firefox
Safari
Opera
15
Other
10
5
0
statcounter.com
6. LE TRAFIC SMARTPHONE PRESQUE DOUBLÉ EN 1 AN
20%
18%
16%
14%
12%
10%
8%
Mobile
6%
4%
2%
0%
statcounter.com
7. LE TRAFIC SMARTPHONE PRESQUE DOUBLÉ EN 1 AN
20%
18%
16%
14%
On peut anticiper que la part de marché du
12%
smartphone mondial va passer les 20% en fin
10%
d’année
8%
Mobile
6%
4%
2%
0%
statcounter.com
8. Hier encore,
Le marché tournait autour de 3 résolutions
principales :
•
•
•
UN ORDINATEUR,
UN IPHONE,
UN IPAD …
9. APPLE ET SON ÉCRAN RETINA
a lancé la course au dpi* et à la finesse
des écrans
LE NOMBRE DE RÉSOLUTIONS SE VOIT DONC MULTIPLIÉ
*Dot Per Inch
10. APPLE LANCE LA COURSE AU DPI : LE RETINA
iPad
iPad Retina
12. 2012 – 2013
Le nombre de terminaux Android a progressé
de façon incontestable
13. ANDROID DÉPASSE IOS AU NIVEAU MONDIAL
45
40
35
30
Android
25
iOS
Nokia/ Symbian
20
Samsung
15
10
JUILLET
2012
BlackBerry OS
Autre
Sony Ericsson
5
0
statcounter.com
14. UN NOMBRE DE TERMINAUX CONSIDÉRABLE EST SOUS ANDROID
opensignalmaps
15. ET UN NOMBRE DE RÉSOLUTIONS AD-HOC
231
RÉSOLUTIONS
opensignalmaps
17. LA « PHABLET » : EST-CE UNE TABLETTE? UN SMARTPHONE?
18. PEU IMPORTE !
Désormais,
On ne doit plus catégoriser ni parler de résolution,
on doit penser en TAILLES D’ÉCRANS
19. LA PERFORMANCE DES SMARTPHONES AU CŒUR DU SUJET
Firefox OS
• Bon support HTML5
• Petit écran
• Petit processeur
Samsung Galaxy Y
• Android 2.3 – 2011
• Petit écran
20. La durée de vie
et la qualité des terminaux
sont très aléatoires !
Rien ne nous informe sur les mises à jours de certains terminaux,
Android 2.3 datant de 2010 équipe encore 30% des
smartphonesAndroid du marché
26. LA SEULE CHOSE
DONT ON PEUT ÊTRE SÛR.
IL Y A LE WEB
SMARTPHONES
TABLETTE
DESKTOP
TÉLÉ
ETC …
Et on devra traiter la plupart des supports de la même
façon.
28. CHANGER NOTRE MODE DE SUPPORT
DU
SUPPORT
NAVIGATEUR
AU
SUPPORT
FORMAT
Le support navigateur,
c’est faire en sorte que le code s’adapte au browser
Le support format,
c’est faire en sorte que le browser sélectionne la partie du code qui lui
est adressée
29. UN NOUVEAU PATTERN DE CONCEPTION
Un consensus sur un pattern de conception a été trouvé :
LE RESPONSIVE WEB DESIGN
Design Fluide
RWD
Taille de texte
adaptée
Réorganisation du
layout
Un fonctionnement par paliers de tailles d’écrans
30. « ANCIENS SUPPORTS »
LE POINT COMMUN ENTRE :
• Internet Explorer 7-8
• Android 2.3
• iOS < 5
Des navigateurs archaïques,
mais qu’on doit supporter car ils représentent encore
une grosse part du marché.
Mais COMMENT ?
31. AMÉLIORATION PROGRESSIVE
Développer en respectant les standards W3C
1 Certaines fonctionnalités des nouveaux navigateurs seront
2
simulées sur les plus anciens (ex : Flash pour balise
Vidéo, Javascript pour les animations,…)
Certaines subtilités graphiques ou motion ne seront pas présentes
(coins arrondis, motion, text-shadows,…)
Une expérience optimale pour les derniers navigateurs et les
mobiles performants
Une expérience fonctionnelle pour les autres
Un fonctionnement par paliers de fonctionnalités
32. UN SUPPORT PAR PALIERS
IL S’AGIT DE DÉFINIR DES PALIERS :
• de tailles d’écrans
• de fonctionnalités
Les paliers sont liés à la technicité du sujet.
Voici un exemple sur un site présentant beaucoup de
motion
34. TECHNIQUEMENT ?
Comment détecter les paliers techniquement :
Paliers fonctionnels :
• Modernizr (Librairie JS permettant de détecter les
nouvelles fonctionnalités JS)
• Détection du User-Agent (dernier recours)
Si on souhaite baisser intentionnellement le fonctionnel (ex: les
animations sur Android 2.3 qui les supporte mais mal )
Gestion des évènements spécifiques à certains support
Paliers de résolutions :
• CSS Media-queries (nouveauté CSS3 implémentée par les
derniers browsers)
Les anciens browsers (desktop) n’ont pas besoin de supporter
ces résolutions et bénéficieront d’une CSS par défaut
37. LE LANGAGE DU RESPONSIVE
On définie donc des paliers sur lesquels on va appliquer des layouts* de
présentation
Small
Medium
Large
X-large
*gabarits
39. L’ABSENCE DE DESIGN STATIQUE
Les techniques de
Design ont évolué :
• On peut définir le palier
minimum
et le palier maximum
• On crée des éléments
plus
que des mises en pages
• On passe d’un design
statique
à une maquette HTML
vivante
Le RWD est en opposition avec le principe de pixel perfect
40. LA NAVIGATION
La stratégie de navigation reste un choix important.
Plusieurs pattern existent avec leurs avantages et
inconvénients.
1/ Volet
Pour
•
•
•
Espace
Design
Pattern
Facebook
Contre
•
•
Confusant
Compatibilité
41. LA NAVIGATION
La stratégie de navigation reste un choix important.
Plusieurs pattern existent avec leurs avantages et
inconvénients.
2/ Bascule
Pour
•
•
•
Contexte
Design
Compatibilité
Contre
•
•
Javascript
Performance
42. LA NAVIGATION
La stratégie de navigation reste un choix important.
Plusieurs pattern existent avec leurs avantages et
inconvénients.
3/ Liste de sélection
Pour
•
•
•
Espace
Identifiable
Compatibilité
Contre
•
•
•
Design
Confusant
Javascript
44. LE RESPONSIVE IMPLIQUE
UNE MÉTHODOLOGIE ADAPTÉE
Les différents enjeux du Responsive Web Design impliquent une
phase de conception importante.
Ceci afin de pérenniser la réflexion et d’anticiper au mieux les
prochaines innovations, sans sacrifier le fonctionnel et l’utilisateur
final.
Elle permettra d’analyser le besoin exact, de prioriser les
éléments à afficher ou non sur les différents périphériques ou
encore de déterminer quel « layout » RWD adopter.
Cette conception peut se répartir de la manière suivante :
DÉFINITION DE
L’ARCHITECTURE
RESPONSIVE ET
L’ADAPTABILITÉ
IDENTIFICATION
DES IMPACTS
TECHNIQUES
PROTOTYPAGE
TESTS
UTILISATEURS
45. MÉTHODOLOGIE PROJET
DÉFINITION DE
L’ARCHITECTURE
RESPONSIVE ET
L’ADAPTABILITÉ
Etude des usages
sur les différents
L
devices
L
WS
Analyse du
parcours
utilisateur
Priorisation
fonctionnelle
Segmentation
marketing cibles AX
L benchmark, CRM
Matérialisation des
parcours client et
L
personae
L
Périmètre
fonctionnel
et éditorial
IDENTIFICATION
DES IMPACTS
TECHNIQUES
PROTOTYPAGE
TESTS
UTILISATEURS
Impacts techniques
avec le back & le
WS
CMS client
Analyse de la
pertinence du
contenus selon le
WS
contexte
Test sur prototype
cliquable
WS
Impact SEO
Wireframes des
fonctionnalités
adaptées
Analyse des
résultats et
adaptations
L
L
Impact Analytics
Modélisation des
différents
L patterns, mobile first
Impact tracking
Développement d’un
prototype HTML
L
L
L
WS
L
livrables
WS
workshops
46. MÉTHODOLOGIE PROJET
UNE ÉQUIPE MODULAIRE DÉDIÉE AUX EXPÉRIENCES
MULTIPLES, TRAVAILLANT DE FAÇON COLLABORATIVE
Product Owner
Chef de projet
Développeurs front
Consultant UX
Directeur Artistique
Creative Technologist
Expert Analytics
Expert Mobile
Développeurs back
48. PROCESSUS DE VALIDATION GRAPHIQUE
La validation des croquis puis
du prototype aboutit à
des PSD
MAQUETTES
PSD
PROTO HTML
CROQUIS
Pour correspondre
au cycle actuel
49. PROCESSUS DE VALIDATION GRAPHIQUE
On peut imaginer un processus itératif.
C’est ce vers quoi l’industrie tend.
CROQUIS
PROTO HTML
Binôme :
Créatif
Développeur
PSD
50. CONCEPTION : ONE MORE THING ?
Il faut bien choisir sa cible
• Smartphone ≠ Smartphone, un iPhone 4 ne doit pas
être traité comme un Galaxy S4.
• Un projet responsive est un projet web, les
smartphones anciens ne peuvent pas suivre malgré
toutes les optimisations
Les formats évoluent, il vaut mieux ne pas trop figer
ses paliers de rendu.
• L’apparition des phablets ou du 5S et son écran
allongé démontrent qu’il faut rester ouvert à la
variation des points de ruptures au cours du projet.
• Ex: iPhone 5 en mode paysage
53. LES MÉDIAS
LE PRINCIPAL ENJEU DES MEDIAS :
ADRESSER LES BONNES IMAGES
1ÈRE SOLUTION /
UTILISER LE USER-AGENT (BROWSER SNIFFING)
La liste de user-agents ou la base de donnée
sera-t-elle toujours à jour ?
Pouvons-nous penser que un device = une taille d’écran ?
Fonctionnalité Galaxy & bientôt Android : split view
Les tablettes chinoises qui masquent leur user agent
Les tablettes Windows 8, les laptops win7/ win8
Les technologies de déportation d’écran : Airplay, Allshare, Smartglass, ..
54. LES MÉDIAS
LE PRINCIPAL ENJEU DES MEDIAS :
ADRESSER LES BONNES IMAGES
1ÈRE SOLUTION /
UTILISER LE USER-AGENT (BROWSER SNIFFING)
La liste de user-agents ou la base de donnée
sera-t-elle toujours à jour ?
Seul le client connaît sa résolution au
moment de son usage
Pouvons-nous penser que un device = une taille d’écran ?
!
Fonctionnalité Galaxy & bientôt Android : split view
Les tablettes chinoises qui masquent leur user agent
Les tablettes Windows 8, les laptops win7/ win8
Les technologies de déportation d’écran : Airplay, Allshare, Smartglass, ..
55. LES IMAGES, LE VRAI CHALLENGE DU FLUIDE
RÉSOLUTION
ECRAN
QUALITÉ DE
L’IMAGE
Laptop
en fibre
Télévision 4k
en bas débit
Galaxy Note 2
en 4g
Netbook
en wifi
Windows surface
en 3g
Iphone 5
en edge
BANDE
PASSANTE
56. LES IMAGES, LE VRAI CHALLENGE DU FLUIDE
RÉSOLUTION
ECRAN
QUALITÉ DE
L’IMAGE
Laptop
en fibre
Télévision 4k
en bas débit
Galaxy Note 2
en 4g
!
Résolutions d’écrans &
capacité réseau
ne sont désormais plus liés Netbook
en wifi
Windows surface
en 3g
Iphone 5
en edge
BANDE
PASSANTE
57. LES POINTS D’ACTION
Deux problématiques à travailler :
1
LA
BONNE IMAGE
PAR DEVICE
2
Utilisation native de l’api
w3c network information asap
1
LE
CHARGEMENT
Mise en place d’un polyfill
de détection de bande passante
Participation à la réflexion w3c autour de
l’implémentation de la balise picture et d’autres
solutions
2
Support du RETINA par le pattern 2x
3
Pas de double hit de téléchargement
58. SÉLECTION DE LA BONNE IMAGE
Le w3c et ses participants
évoquent trois pistes encore à l’état de brouillon
PICTURE
ELEMENT
SRC SET
SRC N
CLIENTS
HINT
59. NOS ORIENTATIONS À DATE
PICTURE
ELEMENT
SRC SET
SRC N
CLIENTS
HINT
Aucune solution n’est implémentée par les navigateurs pour le moment.
Il s’agit de trouver celle qui paraît la plus pertinente et d’utiliser/réaliser un
polyfill.
Les contraintes habituelles doivent être respectées
SEO
ACCESSIBILITÉ
PERFORMANCE
Pour le moment nous avons testé et éprouvé sur nos projets la solution
« picture element » qui nous a donné satisfaction.
Mais la communauté s’engage de plus en plus sur la solution src N
60. LES VIDÉOS
L’utilisation de la balise HTML5 vidéo induit un
nombre conséquent de types de sources.
Navigateur / Device
Formats Vidéo
Encodage Audio
Chrome
MP4*, WebM
AAC, MP3, Vorbis
Firefox
MP4, WebM
AAC, MP3, Vorbis
Internet Explorer 9+
MP4
AAC, MP3
Safari
MP4
AAC, MP3
iOS
MP4
AAC, MP3
Android
MP4
AAC, MP3
Opéra
WebM
Vorbis
* Chrome a annoncé qu’ils allait arrêter
le support du MP4 mais ne l’ont jamais fait
61. LES VIDÉOS
DES PLATEFORMES
existent et adressent déjà les différents écrans.
C’est à ces plateformes d’adresser les problématiques de
mobilité liées aux différences de formats et à la bande passante
62. PERFORMANCE
L’ENJEU MAJEUR EST D’ARRIVER À :
• Un site en responsive web design mais qui prend en compte les
exigences du public mobile
• Une vitesse de chargement des pages exemplaire
• Un ressenti utilisateur idéal
LA PERFORMANCE WEB EST AU CŒUR D’UNE BONNE EXPÉRIENCE UTILISATEUR
63. PERFORMANCE
Viewport
Optimiser ce que l’utilisateur
voit :
• LazyLoad des images au scroll
• Chargement des blocs à la
volée
Un kit HTML, JS, CSS léger
Les blocs sont non visibles, donc
inactifs et les images ne sont pas
chargées
et adapté au mobile
Ne pas hésiter à abaisser le
rendu des devices lents
Compresser les scripts
COMPRESSER LES IMAGES
64. PERFORMANCE, KPI
DES INDICATEURS TECHNIQUES CLÉS DE PERFORMANCE
Start Render (time to glass)
Le moment précis où la page commence à s’afficher et le contenu texte est
disponible.
Page Load
Moment où la page et ses contenus sont entièrement chargés (tous les
scripts et toutes les images)
Il vaut mieux privilégier l’optimisation du start-render qui permet d’offrir
une performance ressentie optimale à l’utilisateur.
Au cours de la navigation les autres éléments se chargent.
65. DES PARCOURS ADAPTÉS
Les medias-queries adaptent la forme,
pas le fonctionnel
EX
Un tunnel d’achat sur smartphone
ne doit pas avoir les mêmes champs et
les mêmes étapes
que sur ordinateur
IL S’AGIT DONC D’ADAPTER LE PARCOURS AU DEVICE
RESS / RESPONSIVE & SERVER-SIDE COMPONENTS
67. LA CONTRIBUTION
Les outils de contribution, CMS, doivent s’adapter au
responsive web design :
LE CMS DOIT PERMETTRE
• D’adresser des visuels adaptés à chacun des écrans
• De les redimensionner
• De gérer les vidéos provenant de plateformes externes
• De gérer les différences fonctionnelles
• D’adapter le contenu
• De visualiser sur les différents formats
68. UN PETIT MOT SUR LE SEO
Que pense Google
du responsive web design ?
https://developers.google.com/webmasters/smartphone-sites/
71. LA RECETTE CÔTÉ DEV
AUTOMATISER pour éviter les régressions
Mettre en place une couverture de tests unitaires côté JS/CSS
• Karma & Jasmine
Mettre des tests de navigation
• PhantomJS + Casper
• Sélénium
Automatiser les tests de rendu multi device :
• testSwarm
72. LES OUTILS DU CHEF DE PROJET
Des « bookmarklets » responsive
• Resizer
• Etc…
Un outil permettant de forcer le User-Agent
• Chrome tools
• Plugins firefox
Les simulateurs
• Android (installer le SDK)
• iOS (être sous Mac OSX et installer Xcode)
Des machines virtuelles
• VirtualBox + Modern.ie (une bonne solution gratuite et cross OS)
DES SMARTPHONES, pour les tests finaux
• Rien ne remplace le test sur mobile, notamment pour juger de la
performance et des problématiques spécifique à l’accélération 3D
ou aux évènements
74. UN SITE RESPONSIVE OU ADAPTIVE ?
RESPONSIVE
WEB DESIGN
Le contenu est fluide et réagit pour
s’adapter à n’importe quelle taille
d’écran et type de format.
75. UN SITE RESPONSIVE OU ADAPTIVE ?
ADAPTIVE
WEB DESIGN
Le contenu va être modifié selon des
formats et types d’écrans prédéfinis.
76. IL FAUT PENSER À L’USAGE
“
La première chose que vous devez faire
est d’oublier les buzzwords et autre jargon
et vous concentrer sur les besoins réels
de votre entreprise.
Christina Warren
http://mashable.com/2013/08/06/responsive-vs-native-app/
77. UN SITE RESPONSIVE OU ADAPTIVE ?
Le responsive, ce n’est pas qu’adapter du contenu à un
écran mobile
Un site mobile nécessitant un fonctionnel particulièrement
différent de celui présent sur le site desktop ne devrait pas
être en RWD
• Géolocalisation
Un site très lourd de type RIA ne devrait pas se retrouver tel
quel sur mobile
• Facebook
• Gmail
Un site dont le contenu doit être adapté au support ne se
prête pas au RWD
• Ligne éditoriale spécifique au mobile
78. DU FLUIDE POUR LE SMARTPHONE
Ne pas faire de responsive
ne signifie pas pour autant
un layout fixe.
≠
Un site mobile doit être adapté à tous
les mobiles et orientations et utilisera
donc certains aspects du package
« responsive »
• Medias-queries pour adapter polices et
organisation du layout
• Layout fluide pour gérer les différences
de formats entre mobile (Galaxy S4 vs.
Note 3 vs. iPhone 5s etc…
• Adaptives images pour offrir l’image
optimale par support
80. POUR RÉSUMER
1 Le responsive n’est pas un raccourci
2 Ce n’est pas une technologie, c’est une
méthodologie et des avancées techniques
3 Il implique une grosse phase de conception
4 Il a des enjeux techniques, qui sont parfois
insolubles
5 Il doit être implémenté sur un projet en toutes
connaissances de cause
6 RESS semble être un bon compromis pour
permettre des parcours fonctionnels idéaux partout
81. MERCI !
Ekino
157, rue Anatole France
92300 Levallois-Perret
@3k1n0
@NewsDuFront
www.ekino.com