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.
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
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) !
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.
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.
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!
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
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) !
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.
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.
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.
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
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
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…
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.
Web responsive & E-Commerce : un seul site pour tous les devices ? (version bis)altima°
Présentation donnée par Grégory Moignard, directeur associé d'altima°.
(cette présentation a été diffusé en sept 2012 lors du salon e-commerce, cette dernière version contient des résultats chiffrés sur les sites dernièrement lancés en mode responsive)
Conférence au salon E-Commerce Paris 2012 de Stéphane Lecouturier Directeur Création & User Experience, altima°.
Applications (iPhone, Android, iPad…) ? Site mobile ? Ou site responsive qui s’adapte à tous les devices ?
Même si l’enjeu du mobile est devenu une évidence, la tactique pour l’aborder l’est beaucoup moins.
Clarifiez votre vision du mobile en 45 minutes de démêlage de l’univers bouillonnant du cross-device.
MobiliTeaTime #13 : Accelerated Mobile PagesUSERADGENTS
L'Accelerated Mobile Page (AMP) est le format créé par Google permettant d’afficher beaucoup plus rapidement une page web ou du contenu sur mobile.
On fait le point sur cette notion dans ce guide pratique !
Au programme :
• Présentation de l'AMP
• Les bénéfices apportés par ce format
• Le fonctionnement technique
• Les complexités à prendre en compte
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 !
Le Baromètre des Technologies web - Février 2016Yassine Tahra
Le choix des technos est une étape cruciale dans tout projet web. Pour aider les porteurs de projets à prendre des décisions pertinentes, La Fabrique du net a réalisé un baromètre des technologies web qui permet d'avoir une vue d'ensemble des principales tendances dans 4 domaines :
- CMS Généralistes
- CMS Ecommerce
- Technologies Back End
- Technologies Javascript
Web responsive & E-Commerce, un seul site pour tous les devices ?altima°
Conférence au salon E-Commerce Paris 2012 de Stéphane Lecouturier Directeur Création & User Experience, altima°.
Applications (iPhone, Android, iPad…) ? Site mobile ? Ou site responsive qui s’adapte à tous les devices ?
Même si l’enjeu du mobile est devenu une évidence, la tactique pour l’aborder l’est beaucoup moins.
Clarifiez votre vision du mobile en 45 minutes de démêlage de l’univers bouillonnant du cross-device.
Depuis que je fais de l'intégration (un paquet d'années), j'ai toujours été très concerné par les standards, l'accessibilité et la sémantique.
Il se trouve cependant qu'avec l'expérience, on se rend compte que les contraintes de production et de performances ont bien évolué en 15 ans : à force de respecter d'antiques préceptes on crée des fichiers CSS lourds, redondant, et non réutilisables. C'est pourquoi 12% des plus gros sites mondiaux comptent plus de 50 occurences de "!important".
Ces aberrations peuvent être évitées en utilisant judicieusement des CSS efficaces.
Nicole Sullivan (ex-Yahoo!) a ouvert la voie en créant "OOCSS" (CSS orientés “objet”), d’autres tels que Jonathan Snooks ou Kaelig Deloumeau-Prigent ont suivi le mouvement.
Voyons quelles réelles remises en question nous attendent pour parvenir à nos fins.
Introductions aux notions de performances web et des temps d'affichage des pages : notions, avantages financiers, ce qui ralentit le web, comment mesurer, quelques exemples, comment accélérer ses pages concrètement.
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.
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
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
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…
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.
Web responsive & E-Commerce : un seul site pour tous les devices ? (version bis)altima°
Présentation donnée par Grégory Moignard, directeur associé d'altima°.
(cette présentation a été diffusé en sept 2012 lors du salon e-commerce, cette dernière version contient des résultats chiffrés sur les sites dernièrement lancés en mode responsive)
Conférence au salon E-Commerce Paris 2012 de Stéphane Lecouturier Directeur Création & User Experience, altima°.
Applications (iPhone, Android, iPad…) ? Site mobile ? Ou site responsive qui s’adapte à tous les devices ?
Même si l’enjeu du mobile est devenu une évidence, la tactique pour l’aborder l’est beaucoup moins.
Clarifiez votre vision du mobile en 45 minutes de démêlage de l’univers bouillonnant du cross-device.
MobiliTeaTime #13 : Accelerated Mobile PagesUSERADGENTS
L'Accelerated Mobile Page (AMP) est le format créé par Google permettant d’afficher beaucoup plus rapidement une page web ou du contenu sur mobile.
On fait le point sur cette notion dans ce guide pratique !
Au programme :
• Présentation de l'AMP
• Les bénéfices apportés par ce format
• Le fonctionnement technique
• Les complexités à prendre en compte
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 !
Le Baromètre des Technologies web - Février 2016Yassine Tahra
Le choix des technos est une étape cruciale dans tout projet web. Pour aider les porteurs de projets à prendre des décisions pertinentes, La Fabrique du net a réalisé un baromètre des technologies web qui permet d'avoir une vue d'ensemble des principales tendances dans 4 domaines :
- CMS Généralistes
- CMS Ecommerce
- Technologies Back End
- Technologies Javascript
Web responsive & E-Commerce, un seul site pour tous les devices ?altima°
Conférence au salon E-Commerce Paris 2012 de Stéphane Lecouturier Directeur Création & User Experience, altima°.
Applications (iPhone, Android, iPad…) ? Site mobile ? Ou site responsive qui s’adapte à tous les devices ?
Même si l’enjeu du mobile est devenu une évidence, la tactique pour l’aborder l’est beaucoup moins.
Clarifiez votre vision du mobile en 45 minutes de démêlage de l’univers bouillonnant du cross-device.
Depuis que je fais de l'intégration (un paquet d'années), j'ai toujours été très concerné par les standards, l'accessibilité et la sémantique.
Il se trouve cependant qu'avec l'expérience, on se rend compte que les contraintes de production et de performances ont bien évolué en 15 ans : à force de respecter d'antiques préceptes on crée des fichiers CSS lourds, redondant, et non réutilisables. C'est pourquoi 12% des plus gros sites mondiaux comptent plus de 50 occurences de "!important".
Ces aberrations peuvent être évitées en utilisant judicieusement des CSS efficaces.
Nicole Sullivan (ex-Yahoo!) a ouvert la voie en créant "OOCSS" (CSS orientés “objet”), d’autres tels que Jonathan Snooks ou Kaelig Deloumeau-Prigent ont suivi le mouvement.
Voyons quelles réelles remises en question nous attendent pour parvenir à nos fins.
Introductions aux notions de performances web et des temps d'affichage des pages : notions, avantages financiers, ce qui ralentit le web, comment mesurer, quelques exemples, comment accélérer ses pages concrètement.
KNACSS est une feuille de style CSS minimaliste, responsive et extensible pour débuter une intégration HTML / CSS --> http://knacss.com/
KNACSS est né d'un constat que nous faisons quotidiennement dans notre agence web :
- La plupart des frameworks CSS sont de grosses usines à gaz que l'on n'exploite très partiellement (environ 10% à 20% au mieux)
- Ils nécessitent quasi systématiquement qu'on redéfinisse à sa sauce la moitié des styles
- Ils ne sont pas négligeables en terme de poids de fichiers
KNACSS n'est pas non-plus un "reset" CSS classique tels que ceux que l'on trouve chez Eric Meyer, Yahoo UI ou Normalizr, que l'on estime trop agressifs et qui nécessitent que l'on redéfinisse chaque élément par la suite. Il se charge du minimum pour éviter les différences d'affichage flagrantes.
Chez Alsacréations, et par expérience, on préfère de loin un socle de base minimaliste qui convienne tel quel à tous les nouveaux projets, mais qui puisse être progressivement enrichi. C'est le cas de KNACSS.
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010Raphaël Goetter
Vous n’avez pas encore sauté le pas HTML 5 / CSS 3 ? Par manque de temps ? Par méconnaissance ? Par frilosité ? Juste pour nous contrarier ?
Pascale Lambert-Charreteur et Raphaël Goetter vous proposent d'en découvrir les grandes lignes (de code), démêleront le vrai du faux (et les nombreuses idées reçues) et partageront avec vous leurs expériences.
Mettre en ligne une nouvelle image, corriger un bogue CSS, ajouter une fonctionnalité JavaScript, ou encore mettre à jour un bout de code HTML sont autant de problématiques d'intégration que de nombreux développeurs doivent gérer au quotidien. Mais lorsque les demandes s’amoncellent, il s'agit d'être productif avant tout… Fort heureusement, il existe un certain nombre de bonnes pratiques faciles à appliquer et pléthore d'outils sur lesquels s'appuyer pour déléguer les tâches répétitives chronophages.
Cette session se propose de faire le tour de quelques éléments incontournables dans la boîte à outils de l'intégrateur afin de voir comment gagner en qualité sans pour autant faire une croix sur la rapidité d'exécution.
Why Page Speed Isn't Enough - Tim Morrow - Velocity Europe 2012Tim Morrow
Betfair has completed a ground-up re-write of our Sports betting web platform. We focused on the fundamentals of resiliency and performance. We measured and improved and measured again and in the process, saw our page load times drop by a factor of 5; on average our full page load is under 3 seconds. We met our promise to our customers.
But some of our customers kept telling us our new site was slow. Many sophisticated customers have chosen to stay using our previous platform; there is a big opportunity cost while those customers have not chosen to experience the new products and features we’ve delivered on the new platform.
All our indicators say our new site is fast and our customers should be happy. We all know a faster site means more money, but we’re not getting the benefits we expect.
In this talk, hear Tim Morrow tell the story of how making Betfair’s site faster for most customers actually made it 3x slower for their biggest customers. Truly, you get what you measure.
Performance and Metrics at Lonely PlanetMark Jennings
Lonely Planet worked to improve the performance of their website to increase conversion rates and revenue. They found removing third-party content sped up page loads but hurt engagement. Experiments showed performance improvements between 100-200ms increased conversion. Cultural change was needed to prioritize performance, with expanded engineer roles and comprehensive, visible metrics. Tools like Fozzie and Flamsteed helped measure performance and capture real user monitoring data. Continuous experimentation and collaboration keep Lonely Planet staying fast.
This document discusses using data visualization as an interface for exploring minute-by-minute event data from sources like Premier League soccer matches and political transcripts. It proposes a "Data Driven Player" application that would allow users to visualize positional changes, traffic patterns, and compiled videos to find interesting moments in the source data. Publishers, data providers, and users would all benefit from such an app by gaining insights into user behavior and having an easy way to browse data.
Velocity EU 2013 What is the velocity of an unladen swallow?pdyball
Seatwave was growing fast, success was unabated, and industry awards were landing on their doormat. Infrastructure had been revamped, load patterns were understood. Everything was going just great…
Until…
The marketing team planned Seatwave’s first UK TV campaign – all regions – simultaneously, but only told the engineering team the day before the first advert was due to run!
10 seconds into the advert the site melted and there was a collective thud as heads hit desks.
It was expensive lesson to learn but also the wake up call that forced everyone in Seatwave to focus on the performance of their site.
In this session we’ll share that pain we experienced, and how we improved performance so that when all our competitors crashed during the UKs largest concert ticket sale, we were able to take 20 days revenue in just 2 hours!
However, maintaining performance is a challenge, product owners want new features, the site starts to put on weight and slowly performance starts to degrade once more.
Will it take another disaster to focus everyone on performance or is there another way to avoid “boom and bust”?
We’ll talk about the steps we’re taking to avoid “boom and bust” by making both performance and the impact performance has on our customers visible to everyone across Seatwave including:
Our Adobe Site Catalyst installation with a custom implementation of the W3C Navigation Timing API allowing us to segment our business KPI’s by speed.
How we’re using a WebPageTest within continuous integration for our QA and production builds.
How we constantly review our performance against competitors using our own installation of the HTTPArchive.
Join us on our quest in search of the Holy Grail of truly understanding how web site performance affects our business, and the processes and systems we are putting in place to ensure we keep speed at the heart of our product development roadmap.
130925 - PES V2, dématérialisation de la chaine comptableIDEM-Normandie
Présentation sur la dématérialisation de la chaine comptable PES V2, lors du Carrefour IDEM du 25 septembre 2013 à Cherbourg-Octeville.
Atelier 1 : Mise en œuvre de services numériques dans le cadre de la dématérialisation de la chaîne administrative et comptable (PESV2, marchés publics) et archivage électronique
Animation : Christine Saint-Laurent, Manche Numérique - Intervenants : Annie Delarue, Manche Numérique ; David Camus, Ddfip ; Muriel Chabert, E-megalis Bretagne.
Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?Andy Davies
This document discusses how performance best practices may become anti-patterns as technologies evolve. It explores how techniques like data URIs, domain sharding, and CSS sprites could be negatively impacted by new protocols like SPDY. The author advocates experimenting with modern tools like mod_pagespeed to test different optimizations under various conditions and sharing results. Continued improvement of debugging tools is also important to help evaluate new approaches as the network landscape changes. Overall, the message is that situational optimization will become more important over rigid rules as complexity increases.
This talk was given at Velocity '13 in Santa Clara by Abe Stanway and Jon Cowie. It talks about how Etsy make sense of the 250k metrics they gather, using their new Kale stack.
MeasureWorks - Velocity Conference Europe 2012 - a Web Performance dashboard ...MeasureWorks
For the Velocity Conference Europe 2012 workshop day this presentation is about the essentials for creation and building a Web Performance dashboard. This with ultimate goal of providing the audience a framework for designing and building a web performance dashboard. The session will cover the following 3 items:
Design guidelines: What defines a web performance dashboard? How to make sure it’s actionable and for people to actually use it on day to day basis?
Data collection: Why performance data? The various ways there are to collect data (e.g. synthetic versus RUM data, Webpagetest, Mobile) and how to correlate the different types of data and tools
Building the dashboard: How to build the actual dashboard, providing an overview of the tools/techniques used
At the end of the workshop you will be able to design and build your own dashboard based on the framework provided, or to optimize the current dashboards within your organization.
Velocity EU 2012 - Third party scripts and youPatrick Meenan
The document discusses strategies for loading third-party scripts asynchronously to improve page load performance. It notes that the frontend accounts for 80-90% of end user response time and recommends loading scripts asynchronously using techniques like async, defer, and loading scripts at the bottom of the page. It also discusses tools for monitoring performance when third-party scripts are blocked.
Awesome! Traffic to your site is really picking up and everything is lookin’ good. Well, except for that database back in the corner, but it will hold… right? No one really wants to deal with scaling the database tier, but hopefully your customers will drag you (perhaps kicking and screaming) to some sort of distributed database architecture.
This talk is all about scaling MySQL through hardware optimizations and sharding from a Site Engineering perspective. This includes real world examples of finding pain points, identifying risks, and evaluating cloud vs hardware scaling. I’ll also discus distributed database management, dealing with data purging, making consistent backups, and how to keep the site up when things go bad.
Be Mean to Your Code with Gauntlt and the Rugged Way // Velocity EU 2013 Work...James Wickett
This is a hands-on workshop for working with Gauntlt. The first half is philosophy, theory and social commentary. The second half is the hands on workshop.
There are two options for working through the workshop. The recommended way is to use the virtual box image as there are a couple of security tools (arachni, nmap, ...) that we will be using. It is not required for you to use it though and you can just clone the repo if you have ruby 1.9.3 and bundler.
If you want to use the vagrant box setup for the workshop, please follow the instructions in 02_Using Vagrant Box.md and if you want to just use our own box, follow the directions in 03_Using Repo Only.md
This has been tested to work on linux and OS X. You can follow along using the instructions > https://gist.github.com/wickett/25d90a462706639446cc
Tendances Futures du Web - GTI780 & MTI780 - ETS - A08Claude Coulombe
Présentation sur les tendances futures du Web dans le cadre du cours combiné GTI780 / MTI780, Sujets spéciaux en TI, donné par Claude Coulombe, à l\'Ecole de technologie supérieure, Montréal, Automne 2008
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)Raphaël Goetter
Votre site web s'affiche mal sur terminal mobile ? Vous n'avez pas forcément les ressources et les moyens de vous offrir une version dédiée ou une application native ?
Ou plus simplement, vous être pressé et voulez "arranger les choses" en attendant mieux.
Voici quelques outils et pistes à suivre pour réaliser une adaptation mobile d'un site existant via meta viewport et CSS3 media queries.
Parce que CSS3 c'est super, mais qu'on vit encore un peu dans le présent et que des pans entiers de CSS 2.1 ont été occultés en raison du dinosaure IE6. En attendant que tout le monde ait Internet Explorer 9 ou Firefox 4, voyons ce qu'on peut faire avec IE7 et IE8 en utilisant un langage CSS2 mal connu.
Aujourd'hui la quasi-totalité des CMS proposent des fonctionnalités d'internationalisation afin de réaliser des sites disponibles en plusieurs langues. Mais qu'en est-il du coté de l’intégrateur ? Celui-ci va aussi devoir internationaliser certaines images utilisées dans ses CSS, voir faire des changements de style suivant la langue qui sera affichée. Les fichiers javascript sont aussi concernés si ils sont amenés à générer du contenu textuel.
Cet atelier vous proposera de découvrir différentes méthodes afin d'organiser au mieux vos fichiers CSS, images et scripts javascript et de faciliter ainsi leur maintenance. Nous verrons aussi quels outils peuvent nous assister dans notre travail et ce que nous propose les frameworks javascript comme jQuery ou encore Mootools.
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascriptcodedarmor
Le web, nouvelle définition : les possibilités étendues de HTML5 marquent un tournant dans le développement de sites et d'applications web riches. Lors de cette soirée, nous ferons une revue des possibilités offertes par HTML5, CSS3 et Javascript, des applications mobiles aux jeux vidéo en passant par la diffusion de médias audio et vidéo.
Présenté par Benjamin Anseaume de Sushee.fr et Erwan Hesry
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveauxFrédéric Harper
Alors que le Web évolue, les standards doivent suivre la cadence. Cette nouvelle version de HTML vous offre la simplicité et la puissance pour créer une expérience mobile encore meilleure. De plus, avec des philosophies telles que le "Responsive Web Design", nous voyons ce dernier autrement: il n'y a plus de Web spécifique aux différentes plateformes, mais un Web adaptatif. Voyons ensemble quelques-unes des fonctionnalités d'HTML5, le principe du design adaptatif et bien sûr, de quelle manière la version 5 de HTML révolutionne le Web, mais surtout la mobilité d'aujourd'hui et de demain.
Session donnée lors du Drupal Camp Lyon 2012. Présentant les différentes alternatives pour gérer la mobilité avec Drupal.
- Responsive Design
- Contextes mobiles (themes mobiles)
- Applications Natives et intégrations en Web Services ou HTML5
Webdesign Passe Present et Present Part2bduverneuil
2ème partie "Webdesign Passé, Présent et... Présent" une présentation de Benoit Duverneuil lors de la 3ème édition du Festival de Webdesign de Rouyn-Noranda (Québec).
Consultez la première partie : http://www.slideshare.net/bduverneuil/webdesign-pass-prsent-et-prsent-part1/
Le RWD est un matériau jeune, une ébauche en plein brouillon qui prend peu à peu forme et consistance au fil du temps et de nos expériences sur le terrain. Dans quelques mois (années ?), les spécifications officielles seront bien plus abouties et stabilisées au sein de nos navigateurs. De nouvelles techniques de positionnement CSS3 telles que Flexbox, Grid layout et Regions faciliteront l'adaptation de designs multi-surfaces. Mais au-delà de ça, de réelles possibilités sont d'ores et déjà offertes par le module @viewport, les unités de viewport (vw, vh, vmin, vmax), les unités de résolution (dpi, dpcm, dppx), les solutions avancées pour gérer les images HD (image-set, srcset et picture) ainsi que les Media Queries CSS level 4 : @media (pointer), (hover), (luminosity) et (script). Gageons que le Responsive Web Design de l'avenir du futur nous épanouira un peu plus tous les matins au réveil, nous rendra encore plus heureux d'aller travailler dans notre jolie agence web, et rendra tous nos clients encore plus nombreux, comblés et enthousiastes par notre travail quotidien qu'on adore. Oups, je m'égare.
Speaker : Raphael Goetter (Alsacréations)
Qu'est ce que la Web perf ?
C'est un ensemble de :
Méthodes
Bonnes pratiques
Technologies
Outils
Permettant de maximiser l'expérience utilisateur d'un site web et de diminuer les ressources permettant de le produire.
C’est une culture, une attitude, une obsession …
Nous disposons enfin d’un support de la règle CSS @font-face sur la plupart des navigateurs du marché. On fera un tour d’horizon de leurs implémentations, des avantages et des contraintes que cela apporte, ainsi que quelques bonnes pratiques pour son utilisation.
Conception de thèmes WordPress : construire et optimiser son espace de travailFrédérique Game
-- Conférence WordPress Camp 2016 --
À partir d’un framework comme Genesis et d’un starter theme comme Underscores : apprendre à identifier les éléments importants et organiser ses outils, librairies afin de créer son propre flux de travail. Gagner en productivité pour se concentrer sur l'essentiel et offrir un design efficace et orienté utilisateurs.
Côté front-end : (re) découverte de SASS (et outils dédiés)
Côté développement : utilisation des snippets, mise-en-place de versionning comme Git.
Utiliser un maximum de ressources disponibles depuis WordPress : exemples, les body class, les librairies Jquery présentes etc...
Présentation qui navigue entre l’atelier et le partage d’expérience et d’astuces plutôt à destination des (web)graphistes ou personnes désireuses d’approfondir des notions front-end, cette proposition balaiera les grandes lignes pour nous aider à créer un environnement de travail plus efficace et plus confortable.
Audience ciblée : Designers, Chefs de Projets, Clients
Similaire à Un site web responsive en une heure (20)
Beaucoup d’incompréhensions accompagnent les nouveaux et excitants langages HTML5 et CSS3.
Raphaël se propose de vous en faire découvrir les grandes lignes, de démêler le vrai du faux et les nombreuses idées reçues : “HTML5 c'est encore trop tôt”, “On ne peut pas faire de HTML5 sans CSS3”, “Avec HTML5, je devrai tout réapprendre depuis zéro”, “CSS3 ne fonctionne pas sur IE”, “CSS3 c'est que de la décoration”, etc.
Parce qu’un jour CSS nous promet de ne plus avoir à nous torturer avec des bidouilles de positionnement, des bugs d’affichage, des hacks, des flottants mal employés, des position: absolute tordues, des position: relative ou des clear: both sortis de nulle part, du centrage vertical intuitif, toussa.
Un jour vous pourrez dire : j’y étais, c’était le bon vieux temps.
Mais pas encore.
On y parlera de diverses spécifications (en plein brouillon ou non) telles que : inline-block, CSS table, multicolonnes, flexbox, grid layout, float : position, regions, exclusions, CSS4, etc.
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...Raphaël Goetter
Parmi l'ensemble des nouveautés apportés par CSS3, arrêtons-nous un instant sur trois modules qui feront sans nul doute parler beaucoup à l'avenir : les Media Queries et le Web mobile, le nouveau positionnement fluide sous forme de grilles et les animations d'éléments.
Découvrons ce qui se cache sous le capot de ces technologies et voyons ce qu'elles peuvent apporter sur des navigateurs récents tels qu'Internet Explorer 9 et 10.
Le design web en 2011 consiste encore à se battre avec des positionnements flottants, absolus, relatifs, des clear, des problèmes de compatibilité, des hacks, des bidouilles, des bugs d'affichage et autres frameworks CSS encombrants.
On ne devrait plus en être là aujourd'hui. C'est du rôle des CSS de nous offrir des solutions simples, intuitives et stables (NDLR : genre "KISS" quoi).
Les propositions CSS3 avant-gardistes telles que Flexible box model et Grid Layout ne seront pas utilisables en production avant un bon bout de temps. En attendant, si la solution était sous nos yeux depuis des années ? Et si l'avenir (proche) des CSS étaient les tableaux de mise en page ?
Note : ça parlera (un peu) de tableaux HTML bien fichus, linéarisables, toussa et aussi (surtout) de CSS display: table, de ses avantages et inconvénients.
Connaissez-vous beaucoup de sessions de conférences web gratuites, où l'on peut assister à des présentations de qualité, exposées par des orateurs experts, suivies d'une soirée dans un bar, et le tout dans une ambiance détendue ?
5. AVANT DE SE LANCER...
Analyser et comprendre le code existant
(template de CMS qui « laisse à désirer »)
Identifier les problèmes en amont
(largeurs, iframes, points de rupture)
Faire un choix de maquette et d'ergo
Faire un choix de navigation
Penser « Performance Web »
Penser « HD » et « Retina »
Analyser et comprendre le code existant
(template de CMS qui « laisse à désirer »)
Identifier les problèmes en amont
(largeurs, iframes, points de rupture)
Faire un choix de maquette et d'ergo
Faire un choix de navigation
Penser « Performance Web »
Penser « HD » et « Retina »
→ COMPTER 2 à 4 jours→ COMPTER 2 à 4 jours
6. AVANT DE SE LANCER...(bis)
Connaître le contexte mobile
(navigateurs, moteurs, spécificités)
Comprendre le Viewport
(device-width, pixel-ratio, viewport)
Maîtriser les CSS3 Media Queries
(et HTML / CSS en général)
Connaître le contexte mobile
(navigateurs, moteurs, spécificités)
Comprendre le Viewport
(device-width, pixel-ratio, viewport)
Maîtriser les CSS3 Media Queries
(et HTML / CSS en général)
→ COMPTER... pfiouu→ COMPTER... pfiouu
7. PENDANT
Produire du code pour écrans multiples
(tablettes, smartphones, écrans larges)
Produire des adaptations pour 2 orientations
Penser « tactile »
(positions et largeurs des zones tactiles)
Prendre en compte tous les gabarits
(home, page-type, formulaires, galeries, etc.)
Ajouter / développer du JavaScript dédié
Produire du code pour écrans multiples
(tablettes, smartphones, écrans larges)
Produire des adaptations pour 2 orientations
Penser « tactile »
(positions et largeurs des zones tactiles)
Prendre en compte tous les gabarits
(home, page-type, formulaires, galeries, etc.)
Ajouter / développer du JavaScript dédié
→ COMPTER... 3 à 6 jours→ COMPTER... 3 à 6 jours
8. ET APRES ? CORRIGER !
Bugs sur tableaux HTML, iframes, vidéos, etc.
Bugs CSS ou JS inexpliqués
(table-cell, flexbox, événements, touch)
Modifier le HTML si nécessaire
Problèmes de compatibilités
(anciens Android, Blackberry, etc.)
Bugs sur tableaux HTML, iframes, vidéos, etc.
Bugs CSS ou JS inexpliqués
(table-cell, flexbox, événements, touch)
Modifier le HTML si nécessaire
Problèmes de compatibilités
(anciens Android, Blackberry, etc.)
→ COMPTER... 1 à 3 jours→ COMPTER... 1 à 3 jours
17. La surface d'affichage
Les Media Queries CSS3
Box-sizing pour vous servir
Halte aux débordements
La surface d'affichage
Les Media Queries CSS3
Box-sizing pour vous servir
Halte aux débordements
NOTIONS INDISPENSABLES
31. VIEWPORT DANS LES SPECS
@viewport {
width: device-width;
zoom: 1;
}
Déjà reconnu par Opera, IE Mobile 10 et Firefox
mobile (ex. @-o-viewport)
Déjà reconnu par Opera, IE Mobile 10 et Firefox
mobile (ex. @-o-viewport)
32. Niveau de zoom :
320 / 320 = 1x
Niveau de zoom :
320 / 320 = 1x
<meta name="viewport" content="initial-scale=1.0">
35. <link rel="stylesheet" href="mobile.css"
media="screen and (max-width: 640px)" >
<link rel="stylesheet" href="styles.css" media="screen" >
Avec Media Queries :Avec Media Queries :
Sont ciblés : écrans dont la fenêtre
est inférieure ou égale à 640 pixels
Sont ciblés : écrans dont la fenêtre
est inférieure ou égale à 640 pixels
36. @media (max-width:640px) {
body { width: auto; }
}
Dans un fichier CSS :Dans un fichier CSS :
Ici : plein de styles CSS dédiés aux
petits écrans
Ici : plein de styles CSS dédiés aux
petits écrans
37. body { background-color: black; }
@media (max-width:640px) {
body { background-color: red; }
}
@media (max-width:640px) {
body { width: auto; }
}
Dans un fichier CSS :Dans un fichier CSS :
En pratique :En pratique :
38. Fenêtre de largeur supérieure à 640pxFenêtre de largeur supérieure à 640px Moins de 640pxMoins de 640px
RÉSULTAT
39. MEDIA QUERIES
width / height
largeur / hauteur de viewport
device-width / device-height
largeur / hauteur du device
orientation :
portrait ou landscape
etc.
width / height
largeur / hauteur de viewport
device-width / device-height
largeur / hauteur du device
orientation :
portrait ou landscape
etc.
99
59. ANALYSE DE L'EXISTANT
6 fichiers CSS différents
42 fois « font-size »
70 fois « !important »
30 fois « margin: 0 »
27 fois « padding: 0 »
23 fois « position »
30 fois « float »
12 fois « clear »
6 fichiers CSS différents
42 fois « font-size »
70 fois « !important »
30 fois « margin: 0 »
27 fois « padding: 0 »
23 fois « position »
30 fois « float »
12 fois « clear » OK, no stress !OK, no stress !
61. FEUILLE DE STYLES MOBILE
Appliquée seulement sur
écrans de largeur de
fenêtre au maximum de
960 pixels
Appliquée seulement sur
écrans de largeur de
fenêtre au maximum de
960 pixels
63. RETOUR À LA NORMALE
Pour les éléments
problématiques :
• width : auto
• height : auto
• float : none
• position : static
• padding : 0
• margin : 0
• etc.
73. TEMPS PASSÉ
Production effective de CSS = 6 heures
Compréhension de l'existant = 4 heures
Réflexions en amont, stratégie = 4 heures
Corrections bugs, anomalies = 1 heure
Production effective de CSS = 6 heures
Compréhension de l'existant = 4 heures
Réflexions en amont, stratégie = 4 heures
Corrections bugs, anomalies = 1 heure
→ TOTAL : 15 heures→ TOTAL : 15 heures
74. NON TRAITÉ
Seule la Homepage a été prise en compte
Ergonomie : le minimum vital a été fait pour
smartphones et tablettes
Aucune adaptation faite pour les différentes
orientations
Performances web : aucun effort n'a été fait dans ce
domaine
Écrans « HD » et « Retina » : aucune prise en compte
Seule la Homepage a été prise en compte
Ergonomie : le minimum vital a été fait pour
smartphones et tablettes
Aucune adaptation faite pour les différentes
orientations
Performances web : aucun effort n'a été fait dans ce
domaine
Écrans « HD » et « Retina » : aucune prise en compte
→ à « l'arrache »→ à « l'arrache »