2012 s’achève sur de tristes notes, en effet on retiendra avant tout 12 mois de difficultés économiques globales où les instances de l’économie mondiale essayent tant bien que mal de redresser la barre. Le développement dans le digital ne semble pas connaitre de ralentissement notable mais lorsque cette crise sera large et contagieuse elle fera trembler tous les secteurs y compris ceux qu’on pensait intouchables. De plus en 2012 nous avons souvent échangé sur des questions de censure sur Internet et jamais les doutes sur la liberté et les données personnelles n’ont été aussi fréquemment posées.

Maintenant nous sommes en 2013, voyons ce que cette année nous réserve.

Responsive design

Le terme Responsive Webdesign Design (RWD) fut largement employé en 2012, il deviendra quasiment ordinaire en 2013. En effet tous les projets devront être conçus d’une manière ou d’une autre pour un usage sur les mobiles et les tablettes. Dans le cas contraire vous allez surement laissez de coté beaucoup d’utilisateurs et les décevoir. L’utilisation du mobile ne cesse d’augmenter, nous avons assisté à une hausse de 80% des commandes sur le m-commerce aux États-Unis en 2012. Il est donc primordial de penser mobile car il s’agit également de prévoir le futur et de concevoir des applications, sites internet et services associés évolutif et en assurer leur pérennité.

Nouveaux systèmes => nouvelles interfaces => nouveaux usages

En terme de conception, les maquettes graphiques ou fonctionnelles devront elles aussi être élaborées selon les supports que vous visez prioritairement.

HTML5 – CSS3

2013 sera en effet l’année de l’émancipation du HTML5 et CSS3, ces deux technologies offrent tellement de souplesse et de nouvelles fonctionnalités qu’il serait dommage de les écarter. En revanche pour certains projets (IE7,IE8 notamment) il faudra toujours prévoir des alternatives et surtout de longues soirées de tests, malheureusement… (encore quelques années à tenir!)

Pour voir un florilège d’exemples de toute beauté en HTML5 je vous invite à découvrir cette caverne l’Alibaba : http://fff.cmiscm.com/ ou encore http://hakim.se/experiments.

Et pour ceux qui souhaitent se plonger encore plus dans le HTML5 je ne serai trop conseillé la vidéo de la conférence sur HTML5-CSS3
HTML Meetup – HTML5/CSS3 avec la vidéo et les slides de Geoffrey Dorne. Un must see

Applications hybrides

Depuis le différend qui a opposé le Financial Times avec Apple sur le contrôle des données personnelles de ses lecteurs. Un nouveau monde s’est entrouverts, l’organisme de presse FT a créé sa web app et a initié un mouvement de basculement de des app natives vers le modèle web app.

L’avantage principal des applications hybrides ? Permettre le développement en un seul code d’applications mobiles à destination de terminaux mobiles équipés d’OS différents. « Les expériences utilisateurs et les performances obtenues permettent d’envisager un usage relativement large de ce type d’applications », estime Rémy Buclin (Business développeur technologies et services innovants)

Ces applications hybrides sont développées à l’aide de frameworks javascript, tels que Sencha Touch, JQuery Mobile ou Dojo Mobile. Le code ainsi obtenu est ensuite encapsulé dans des composants natifs (iOS, Android, BlackBerry…) à l’aide de frameworks spécialisés tel que Phonegap. L’avantage de Phonegap c’est qu’il fournit des bibliothèques de plugins permettant d’intégrer en autres l’usage de l’ensemble des fonctionnalités des terminaux mobiles : appareil photo, annuaire, etc. Cela promet donc de belles réalisations en 2013.

Continuer l’exploration des tendances 2013

• Tendances du webdesign 2013 : qu’en pensent les pros du web ? avec entre autres Raphaël Goetter, Jacob Gube, Geoffrey Dorne, Matthieu Bué, Jérémy Benmoussa.
• 20 top web design and development trends for 2013 de Craig Grannell (netmagazine.com).
• 13 Design Trends For 2013 de Gannon Burgett (theindustry.cc).

Devenez fan de Ecaireur.net sur Facebook. Suivez-moi sur Twitter. Copyright Eclaireur.net.

Partager cet article

Paul Watson est le fondateur et président de l’ONG internationale de défense des océans SEA SHEPHERD (Berger de la mer), il est actuellement en passe de perdre sa liberté. Citoyen d’honneur de la ville française de Saint Jean Cap Ferrat et désigné par Times Magazine comme l’un des vingt plus grands héros écologistes du XXème siècle, Paul Watson est un activiste investi dans la défense des océans depuis plus de 40 ans. Dans son combat pour les océans, il s’est attiré de puissants ennemis, au plus haut niveau des états.

« Si les océans meurent, nous mourrons! »

En 1992 le Commandant Cousteau tentait déjà de nous alerter : « Les Océans sont en train de mourir sous nos yeux… ». Vingt ans plus tard, l’océan demeure cette vaste zone de non droit dans laquelle les crimes restent impunis et où se joue pourtant, loin des regards de tous, l’avenir de l’humanité. C’est le combat qu’a choisi de prendre à bras-le-corps Paul Watson avec son ONG Sea Shepherd au travers de méthodes « d’actions directes » depuis 1977. Sea Shepherd a dérangé de nombreux braconniers sans agir dans l’illégalité (aucun chef d’inculpation retenu en 35 longues années d’existence). Il n’y a aucune violence envers les pêcheurs lors de leurs actions seulement de « l’agressivité contre du matériel qui n’a pas lieu d’exister ». Sea Shepherd luttent contre les pêcheurs qui pillent sciemment les océans !

Aujourd’hui avec des méthodes qu’on pourrait qualifier de mafieuses, certains états comme le Costa Rica, le Japon essayent de contrer l’action de Paul Watson en lançant des mandats d’arrêt. Souvent les infractions de Sea Shepherd sont imaginaires afin que la pêche des ailerons de requins ou de la baleine dans le sanctuaire de l’Antarctique puissent continuer loin des regards de tous.

Quand l’injustice devient la loi, la résistance devient un devoir

Paul Watson et les membres de l’ONG Sea Shepherd luttent péniblement pour sauver ce qu’il nous reste de biodiversité dans les océans du globe. Une
pétition est en cours pour que la France prenne la défense ce Paul Watson et l’accueille. Je vous invite à la signer car cela nous concerne directement.

Plus d’informations

• « On ne reculera devant rien » l’édito signé par le Capitaine Paul Watson
• Site du Sea Shepherd qui donne toutes les infos pour soutenir leurs actions
• Pétition afin que la France accueille Paul WATSON
• Sea Shepherd et Paul Watson – Comment ? Pourquoi ? l’article de Korben sur le sujet, vous trouverez l’historique des actions menées par Paul Watson et les foudres qu’il s’est attirées.

Devenez fan de Ecaireur.net sur Facebook. Suivez-moi sur Twitter. Copyright Eclaireur.net.

Partager cet article

• l’état de votre activité (liens postés, photos téléchargées…)
• la répartition hebdomadaire de vos moindres faits et gestes au cours d’une semaine type
• à quelle heure postez-vous sur Facebook ?
• les amis qui commentent le plus votre activité
• les amis qui partagent le plus vos posts
• le nombre de photos publiées sur votre compte
• vos amis Facebook sont-ils plus des hommes ou des femmes ?
• le statut marital de vos amis (marié, célibataire, fiancé…)
• la représentation de vos amis selon le critère âge
• la localisation de vos amis

En effet cela peut paraître troublant mais les résultats sont très précis, la représentation des différents réseaux d’amis est assez surprenante. En effet nous pouvons voir les personnes-clés qui gravitent dans nos amis. Ce graphique est rendu possible grâce aux amitiés communes indiquées sur Facebook.

Pour tester avec votre propre compte Facebook

Tapez simplement Facebook report dans la barre de recherche de Wolfram Alpha.

Autorisez l’application Facebook puis lancer le rapport

Comme dit Wolfram sur son blog : « I’ve no doubt that one day pretty much everyone will routinely be doing all sorts of personal analytics on a mountain of data that they collect about themselves »

Pour information

Wolfram Alpha est un moteur de recherche créé par Stephen Wolfram, il est connu surtout pour sa faculté à répondre directement aux questions qu’on lui pose en anglais (pour l’instant). Il est notamment utilisé par l’application vocale SIRI d’Apple pour répondre aux questions au travers d’une API.

Devenez fan de Ecaireur.net sur Facebook. Suivez-moi sur Twitter. Copyright Eclaireur.net.

Partager cet article

Le responsive design est une manière de concevoir les sites internet afin qu'ils s'adaptent à tous les types d'écran. En effet au vue du nombre croissant d'appareils différents (tablettes, smartphone, ... ) et leurs écrans plus petits que les écrans d'ordinateurs, il devenait indispensable de palier à ce problème. Dans ces pages réactives les éléments (textes, graphiques...) deviennent réactifs et peuvent changer de taille en fonction de la taille d'écran en utilisant les feuilles de styles CSS (CSS3) et leurs media queries (on y reviendra dans l'article).

Voici quelques unes des différentes tailles d'écrans que nous sommes amenés à rencontrer:

• 240 x 320 (petit téléphone)
• 320 x 480 (iPhone)
• 480 x 640 (petite tablette)
• 768 x 1024 (iPad - Portrait)
• 1024 x 768 (iPad - Paysage)

Exemple de site avec du responsive design

voir une galerie de site développé avec du responsive design, un autre showcase

Pour ceux qui veulent en savoir plus sur les perspectives à envisager je vous invite à lire l'article de Fred Cavazza sur le sujet : Le responsive design à l’assaut des terminaux mobiles. Nous allons nous intéresser à son intégration.

Pré-requis

On oublie le code javascript pour une fois, en revanche il est nécessaire de le tester sur les nouvelles versions de navigateurs (IE9, Firefox 4, Chrome 11, Opera 11...). Les vieux navigateurs (ie6, ie7, ie8, safari 3.2...) ne supportent pas les CSS queries, je vous laisse regarder la liste des navigateurs à proscrire.

Intégration

Media Query en HTML

<link rel="stylesheet" media="screen and (max-width: 1024px)" rel="stylesheet" href="example.css">

Media Query avec @import

@import url(example.css) screen and (max-width: 1024px)

Media Query dans une feuille de styles

@media screen and (max-width: 1024px) { /* les différents styles... */ }

Certains sites vont jusqu'à 5 voir 6 tailles d'écran différentes (exemple smashingmagazine.com) mais généralement il est préférable de tabler sur 3 séries à l'aide des medias queries. Donc voici comment traiter les autres tailles d'écran :

@media only screen and (min-device-width: 768px) and (orientation: portrait), screen and (max-width: 994px) { /* 1 - pour les tablettes en mode portrait ou les ordinateurs avec une résolution horizontale de moins de 994px */ }

@media screen and (max-width: 555px), screen and (max-device-width: 480px) { /* 2 - pour les ordinateurs avec une résolution horizontale de moins de 555px et la plupart des smartphones en mode paysage (480px de large) */ }

@media screen and (max-width: 320px) { /* 3 - tous les autres appareils avec moins de 320px de large (principalement les smartphones en mode portrait */ }

Important : le viewport meta tag

En plus d'ajouter des medias queries, il est nécessaire d'utiliser une balise meta viewport pour définir l'échelle initiale du site et surtout de désactiver le zoom sur les appareils mobiles et les tablettes. On l'écrit ainsi :

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

Retrouvez tous ces différentes CSS queries dans le fichier de Démonstration

Une des bonnes pratiques pour réussir à mettre en œuvre des sites avec du responsive design consiste à déterminer les résolutions auxquelles votre site doit "répondre". En effet vous pourrez anticipez en amont toute les probabilités pour les différentes résolutions d'appareils (1024px et 768px pour l'iPad, 960px et 640px pour iPhone 4 et 480px 320px et pour les iPhone 3G etc).

Conclusion

Le responsive design répond avec brio aux nouvelles problématiques d’élasticité des sites internet. On peut même dire qu'on attendait une solution de ce genre, mais il faudra encore être patient avant que ces techniques ne se démocratisent. Vous pouvez d'ores et déjà tester vos réalisations avec un outil en ligne http://mattkersley.com/responsive/.

Un des cotés négatif majeur vient du contenu mobile car celui-ci n'est pas allégé par rapport à celui de la "version ordinateur", on peut effectivement "cacher" des parties mais pour le mobile cela peut entraîner des surcharges inutiles lors du chargement d'éléments qui ne sont pas utilisés (fichiers JS, fichiers CSS, images). Donc pour certains projets il vaudra mieux faire un site mobile dédié pour contrôler tous les éléments indépendamment. Le responsive design donne la possibilité suivant les projets d'offrir un site élastique, encore faut-il l'avoir prévu en amont de la réalisation.

Pour aller plus loin

Les spécifications de la W3C pour les CSS3 et les Media Queries
Une grosse quantité de ressources et de techniques compilées par Smashing Magazine

Devenez fan de Ecaireur.net sur Facebook. Suivez-moi sur Twitter. Copyright Eclaireur.net.

Partager cet article

La municipalité de Bordeaux va équiper ses rues et bâtiments publics d’un réseau wifi complètement ouvert et gratuit. Les 250 000 habitants de Bordeaux (et les visiteurs de passage) pourront se connecter (après une brève inscription) sur le réseau Wifi de la ville à partir de leur smartphone, tablette ou ordinateur équipé afin de bénéficier d’un accès wifi gratuit.

Il y aura également un accès Premium pour les plus gourmands qui permettra une vitesse jusqu’à 6 Mbps. Il est clair que la France fait parti des pays dans le monde où l’on est le mieux loti pour le rapport qualité/prix de nos connexions internet (une des moins chère au monde). De plus habitant Bordeaux, je ne vous cache pas que j’ai eu ce matin une agréable surprise en apprenant cette nouvelle. Je vous ferai part de mes impressions lors de mes premières connexions… gratuites !

Devenez fan de Ecaireur.net sur Facebook. Suivez-moi sur Twitter. Copyright Eclaireur.net.

Partager cet article

Mais la vidéo qui a retenu mon attention sort du cadre du tourisme et traite d’internet dans sa globalité. Nous prenons de la hauteur (dixit Alexis Mons l’intervenant) par rapport au web et son usage. Je vous encourage à prendre 15 minutes de votre temps pour regarder cette vidéo qui est particulièrement enrichissante.

Devenez fan de Ecaireur.net sur Facebook. Suivez-moi sur Twitter. Copyright Eclaireur.net.

Partager cet article

La semaine prochaine aura lieu le prochain BlogCamp dédié à l’unvivers podcast avec comme invité Cédric Bonnet, podcasteur et co-fondateur de nowatch.net. Pour ne pas le rater inscrivez-vous sur blogcamp.fr.

Devenez fan de Ecaireur.net sur Facebook. Suivez-moi sur Twitter. Copyright Eclaireur.net.

Partager cet article

Le mémorial 9/11 ouvrira ses portes le 12 septembre. Il accueillera des touristes du monde entiers venus tenter de comprendre. Le mémorial donne également la possibilité de retrouver un nom. Et comme les américains ne perdent jamais le nord coté business, vous pourrez acheter bouquins, posters, etc et même sponsoriser un pavé qui sera posé sur le nouveau site : de 100 à 1000 euros, cher la briquette…

Devenez fan de Ecaireur.net sur Facebook. Suivez-moi sur Twitter. Copyright Eclaireur.net.

Partager cet article

Le temps de chargement d’un site est un aspect important à ne pas laisser de coté lors du développement. 80% du temps de réponse du navigateur est passé sur le front-end, il se doit d’être optimisé. En effet un visiteur qui doit attendre sagement 2 minutes que le site se charge, je n’en connais pas (même les retraités passent leur chemin), de plus Google a annoncé officiellement qu’il tenait compte dans son algorithme de positionnement de la rapidité des sites. Cet article vous permettra de gagner de précieuses secondes au chargement ou bien une meilleure note au test webpagetest.org. Voici comment améliorer significativement le temps de chargement des pages de votre site en quelques points.

Optimiser la page et les médias

Il semble évident qu’un page HTML plus légère s’affichera plus vite qu’une autre plus lourde. Mais il faut tenir compte également des médias (images, flash…) surtout s’ils sont trop nombreux et non optimisés. Ils augmenteront énormément ce temps de chargement. Il n’est rare de voir des sites qui utilisent un image de taille fond d’écran pour l’afficher en vignette ! Pour cela rien ne vaut l’outil en ligne smushit qui donne de très bons résultats et d’afficher les médias dans la taille adaptée. il faut se rappeler que 40 à 60% des visiteurs de votre site arrivent avec un cache navigateur vide, il devront tout charger.

Réduire les requêtes HTTP

Après avoir réduit le poids reste la quantité, moins vous avez d’éléments, plus vite le navigateur va les charger. Avec le couple d’extension Firebug et Page Speed vous pouvez vous en rendre compte assez facilement. Le but est de minimiser le nombre d’élément à charger afin de réduire les requêtes HTTP (i.e les demandes faites du navigateur client au serveur). Il existe pour cela beaucoup de techniques :

• Les Sprites CSS sont la excellente méthode pour réduire le nombre d’images. Combinez vos images de fond en une seule image et utiliser les propriétés CSS background-image et background-position pour afficher la portion d’image désirée.
• Combiner tous les fichiers CSS en un seul fichier
• Combiner tous les fichiers JS en un seul fichier

Afin de ne pas avoir à modifier tous vos fichiers voici des ressources qui peuvent être utiles :

• minify-js : Script PHP pour optimiser et combiner vos fichiers JS
• minify-css : Script PHP pour optimiser et combiner vos fichiers CSS
• WP-Minify : Extensions WordPress qui combine vos fichiers CSS, JS et optimise le code HTML.

Accélérer l’affichage du site à l’aide de la mise en cache

La mise en cache consiste à conserver une copie locale ou distante de certains éléments déjà affichés afin d’éviter de les télécharger ou les reconstituer. Le cache peut se situer sur le serveur (cache serveur) ou dans le navigateur (cache client).

Cache navigateur

Le navigateur peut garder des fichiers afin d’éviter de les charger à chaque visite du site. Il convient pour cela de modifier les entêtes suivant ces 2 cas de figure :
Pour les composants statiques (images, flash…) : à l’aide de l’entête expire repousser la date de chargement d’un ressource. Par exemple cette ligne permettra de laisser votre ressource dans le cache navigateur pendant quelques années :

Expires: Thu, 15 Apr 2015 20:00:00 GMT

Pour les composants dynamiques : l’utilisation de l’entête Cache-Control pour définir la date de mise à jour du composant au navigateur

Cache-Control: max-age=3600, must-revalidate

Vous pouvez également ajouter les lignes suivantes à votre fichier .htaccess (exemple de Léo) afin de définir un temps d’actualisation propre à chaque type de fichier :

ExpiresActive On
ExpiresByType text/css "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 year"
ExpiresByType audio/mpeg "access plus 1 year"

Cache serveur

Vous pouvez compresser le contenu d’une page ou d’un fichier à l’aide de la compression GZip ou Deflate. En effet la compression réduit le temps de réponse en réduisant la taille de la réponse HTTP. GZip est le module de compression des versions d’Apache 1.3 et les suivantes (module mod_gzip) tandis que les versions 2 d’Apache et les suivantes se basent sur Deflate (module mod_deflate).

Pour activer la compression vous devez configurez votre serveur sous Apache en fonction de sa version. Voici un exemple pour un serveur avec une d’Apache 2.0 qui compresse les fichiers HTML, PHP, TXT, XML, JS et CSS :

<IfModule mod_deflate.c>
<FilesMatch "\.(html|php|txt|xml|js|css)$">
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>

Avec les points listés ci-dessus vous pourrez significativement améliorer la rapidité de votre site. Si vous voulez pousser encore plus loin voici des ressources qui vous permettront d’en connaître un rayon sur l’optimisation !

Plus d’informations

• Les meilleures pratiques en matière de performance Web selon Google
• Extension Page Speed : à utiliser sans modération
• Les 35 bonnes pratiques en matière de performance Web selon Yahoo!
• un excellent tutoriel sur l’utilisation du cache de Mark Nottingham
• Un article d’Olivier Duffez pour webrankinfo qui synthétise bien les bonnes pratiques

Devenez fan de Ecaireur.net sur Facebook. Suivez-moi sur Twitter. Copyright Eclaireur.net.

Partager cet article


]]> http://www.eclaireur.net/technique/bonnes-pratiques-pour-accelerer-votre-site-web/feed/ 6 http://www.eclaireur.net/technique/bonnes-pratiques-pour-accelerer-votre-site-web/ http://feedproxy.google.com/~r/eclaireur/~3/MwhZcLiRXiU/ http://www.eclaireur.net/wordpress/le-nouveau-wordpress-3-2-gershwin-abandonne-ie-6-et-php-4/#comments Tue, 05 Jul 2011 12:06:57 +0000 David http://www.eclaireur.net/?p=1204

Devenez fan de Ecaireur.net sur Facebook. Suivez-moi sur Twitter. Copyright Eclaireur.net.

]]> Cette nouvelle version 3.2 de WordPress baptisée « Gershwin » apporte un design rafraîchi et de meilleures performances à l’aide des dernières technologies web standardisées. Il est vrai que le rythme de mise à jour s’est accéléré mais cette dernière mouture cache bien des surprises. Petit tour d’horizon.

Nouveautés de cette version

Le gros changement réside dans l’abandon pure et simple du PHP4 et des versions de MySQL antérieures à la 5, de plus l’interface d’administration ne fonctionne plus sous Internet Explorer 6.0. C’est un mal pour un bien, car les malchanceux qui sont surfent à l’aide ce navigateur verront désormais un message avertissant des risques potentiels de sécurité lié à ce navigateur historique.

Le thème par défaut a été remplacé par un nouveau développé en HTML5 (compatible tablettes et mobiles). Le petit plus : il sera possible d’écrire un billet dans une fenêtre « zen », un peu comme le célèbre éditeur de texte Ommwriter avec lequel il est possible de cacher toute l’interface et d’écrire en musique. Bref c’est la même chose avec les sons en moins. Il y a encore beaucoup de nouvelles fonctionnalités au niveau de la barre de navigation, des images d’entêtes, etc.

Pour vous donner encore plus de précision sur ce nouveau WordPress 3.2 voici la vidéo de démonstration

Devenez fan de Ecaireur.net sur Facebook. Suivez-moi sur Twitter. Copyright Eclaireur.net.

Partager cet article


]]> http://www.eclaireur.net/wordpress/le-nouveau-wordpress-3-2-gershwin-abandonne-ie-6-et-php-4/feed/ 0 http://www.eclaireur.net/wordpress/le-nouveau-wordpress-3-2-gershwin-abandonne-ie-6-et-php-4/