Webdesign pour tous

Les étapes du webdesign

Le terme webdesign est largement utilisé mais souvent mal compris. Nous allons tenter de lever le voile sur ce mystère en décrivant les différentes étapes du webdesign afin de mieux comprendre le fonctionnement de ce récent anglicisme.

Trois lettres pour désigner un univers
auteur : britaseifert
source : www.pixabay.com

La réalisation d'un site web passe par de nombreuses étapes. De la conception à la réalisation graphique, en passant par la configuration de l'hébergement à l'implémentation des fonctionnalités du site, c'est tout un florilège de compétences qui vont se mettre à l’œuvre. Petit tour d'horizon.

La réflexion

Un site web mérite la même réflexion que la rédaction d'un ouvrage. Par quoi commencer ? quel est le fil rouge ? que veut-on montrer ? sont autant de questions qu'il faut se poser avant même d'allumer un ordinateur.

Ce genre de démarche permet non seulement d'organiser le contenu mais également d'anticiper les mises en place des fonctionnalités. C'est une étape qui peut paraître fort ennuyeuse et inutile, et pourtant elle sera source d'un gain de temps considérable par la suite.

Du graphisme

Le graphisme est en quelque sorte la vitrine du site, ce qui doit donner l'envie d'y entrer. La première impression est souvent très importante pour les visiteurs d'un site, et un premier coup d’œil permet souvent de faire un premier tri. Il ne faut cependant pas s'y méprendre et bien des sites aguicheurs ne vous apporterons aucune information utile.

Le graphisme est également un élément important dans l'organisation du contenu et permet de mettre en évidence du texte, des images, ou une partie entière de la page web. C'est pourquoi cette étape doit se faire conjointement avec l'implémentation du site.

Implémentons

Sous ce terme barbare sont regroupées toutes les opérations consistant à transcrire les concepts et le graphisme en code. Cela inclut toutes les fonctionnalités du site, qu'il s'agisse de l'interface utilisateur pour la mise en ligne du contenu jusqu'au fonctions qui seront utilisées par l'utilisateur final.

Cette étape peut être soutenu pas différents systèmes qui permettent d'économiser du temps, comme par exemple les CMS ou de librairie de code. Il s'agit de bases de codes qu'il faudra ensuite configurer ou compléter. Rien ne saura cependant remplacer un développeur compétent.

De la symbiose du webdesign

Nous avons ainsi décrit les trois principales étapes nécessaires à la réalisation d'un site web. Chacune d'entre elle est également composée d'un multitude de sous-étapes. Cependant, est c'est sur cela que nous insisterons dans cet article, l'élément clé de tout ouvrage web est la symbiose entre ces étapes.

Afin de définir un graphisme cohérent il faut en premier lieu qu'une réflexion ait été posée sur les besoins et la finalité du site. De même il est fortement déconseillé d'élaborer un graphisme sans tenir compte de l'implémentation, à moins que le budget soit illimité, ce qui est rarement le cas.

C'est ainsi non seulement un lien entre les phases de réalisation d'un site web mais également une jonctions de compétences diverses, voire une collaboration entre plusieurs personne. Internet est un outil de partage et de communication entre les internautes, mais également un laboratoire d'échange et de développement pour tous les métiers qui y sont associés, et en cela le webdesign mérite bien plus que l'anonymat.

Frank.

L'utlité de la typograhie dans le webdesign?

Un bon site web se caractérise par une mise en page structurée, une interface graphique agréable et une typographie simple et innovante. La typographie transmet une information via son écriture.

Définition

Selon le Larousse, la typographie est le moyen ou le procédé d'impression d'une forme en relief. Je pensais que la typographie avait peu d'importance dans la présentation graphique d'un site web ou d'une affiche dans les rues. La typographie est présente sur tous les sites web et affiches.

La typographie est d'une grande importance pour le visuel d'un site web ou d'affiches.

Le meilleur moyen de vous le prouvez, c'est de vous le montrer. En premier, on aperçoit une affiche de propagande contre le féminisme des années 80. Vous allez me dire : "Cool une affiche rétro !". Si nous analysons cet affiche, on aperçoit au sommet de l'affiche l'écriteau "We Can Do It". Nous supposons que cet écriture n'a pas été choisi par hasard. Cet typographie dégage de la force en la lisant. Nous avons envie de crier le slogan, enfin personnellement, j'ai envie de le crier. Les couleurs choisies sont vives. La disposition des lettres en haut de l'affiche est finement choisi en limitant les espaces entre les lettres. La typographie évolue avec le temps. Chaque typographie est attaché à une période dans le temps.

Affiche de propagande utilisé pour promouvoir le féminisme dans les années 80
Auteur : J. Howard Miller
Source URL : https://fr.wikipedia.org/wiki/We_Can_Do_It!

Voici un mauvais exemple où la recherche sur la typographie est absente. Nous savons, c'est un site web. Aujourd'hui, ce site a subi un lifting. Nous remarquons tout de suite qu'il n'y a aucune recherche faite sur le visuel du site web.

Site web de la commune de Beuzevillais
Auteur : Commune de Beuzevillais
Source URL : http://www.topito.com/top-perles-web-craypions-or

Il est clair qu'il n'est pas donné à tout le monde de créer un site web attractif. Si le concepteur du site prend la peine d'approfondir ces connaissances dans les domaines comme la typographie, il pourra offrir aux internautes une approche graphique agréable. Bob

Sources

www.wikipedia.org, consulté en 2016

www.larouss.fr, consulté en 2016

Flat design, aller plus loin pour de meilleures sites

Dans un de mes articles précédents, je vous parlais de flat design. Vous vous êtes sûrement demandés ce que c’était ? Je l’ai laissé de côté pour mieux le décrire. Mais pour faire court, c’est une façon de désigner un site web ou une application. Beaucoup de sites sont en flat design.

Flat design que j'ai réaliser pour une application de vente et de location de skis

Auteur: Peter

Alors, précisément, c’est quoi le flat design

Comme je vous l’ai dit avant, c’est une façon de désigner un site web. Mais plus précisément ? Alors, le flat design est un style très minimaliste. Aucune ombre ou autre effet qui donnerait du relief à notre style. Un design plat. De plus, les lignes graphiques sont simples et tous les effets superflus sont supprimés. Exit les arrondis sur les boutons. Par contre niveau couleur, le flat design est joyeux, beaucoup de couleur vive, du contraste, …

Et tout ça pourquoi ?

Tout simplement pour optimiser et donner une lisibilité maximale. Enlever tous les gadgets ou les effets qui pourraient déranger l’utilisateur. Donc, les informations et le contenu en général seront plus accessibles. Une chose intéressante, un design plat s’adapte bien sur un smartphone, car il sera pensé pour.

Donc c’est simple à mettre en place

Oui, pour créer une maquette (mockup) du site sur un logiciel comme Photoshop. Mais non, pour le faire en CSS. En règle générale, un dit design minimaliste équivaut à : c’est compliqué à mettre en forme en CSS. Chaque chose est réfléchit, de la palette de couleurs utilisée jusqu’à l’emplacement de chaque élément. Il n’y pas d’artifice pour distraire l’utilisateur, ce qui en déroutera certain.

Palette de couleur utilisé pour l'application

Auteur: Peter

Flat design et mobile

Si vous vous rappelez, la première fois que le terme flat design a été utilisé, c’était dans l’article "La multiplicité des tailles d'écran". Ce n’est pas pour rien. Car la majorité des sites web responsive sont en flat ou découle d’un style provenant du flat design. Je n’aime pas généraliser, mais lorsque vous voulez porter votre site sur mobile, regarder bien ce style. Mais vu que le flat design existe depuis un petit moment dans le monde de l’internet, regarder le matériel design de Google. C’est un style qui découle très clairement du flat mais où l’effet de superposition est très présent.

Conclusion

Pour ma part, je trouve que le flat design est joli et utile. J’aime cet esprit de minimaliste. Et j’essaie de le mettre en place lorsque je réalise un site web. Bien entendu, je ne l’applique pas à 100%. Le flat design permet des écarts vu qu’il n’y a pas de règle. Juste des bonnes pratiques ou des guides. Et je ne suis pas graphiste… C’est un style intéressant, mais il y en a plein, internet est vaste. Rien n’empêche de mélanger. Peter

Source:

https://www.toopixel.swiss/blog/tout-ce-quil-faut-savoir-sur-le-flat-design/, consulté en 2016
https://fr.wikipedia.org/wiki/Design_plat, consulté en 2016
http://fr.tuto.com/blog/2013/06/flat-design.htm, consulté en 2016

La guerre des navigateurs

Les navigateures font partie intégrante du web. C'est grâce à eux que le code HTML qui est servi au client peut être lu et affiché à l'écran. Rien ne serait possible sans ces programmes qui, bien que devenu commun, sont essentiels au web et réservent bien des surprises.

Chrome, Safari, Opera, Internet explorer et Firefox
auteur : isromare
source : www.pixabay.com

Un petit peu d'histoire

L'évolution des navigateurs a été fulgurante depuis les débuts du web, en 1990. La première moutures à été développée par le créateur du web lui-même, Tim Berners-Lee. Il s'agit de WorldWideWeb, un navigateur graphique très simple, mais qui avait la caractéristique de déjà présenter la capacité d'édition HTML.

Plusieurs autres navigateurs similaires ont été créés par la suite, mais celui qui mérite attention est le NCSA Mosaic, en 1993. Premier navigateur supportant l'affichage des images et des formulaires interactifs au sein des pages. Une révolution.

Dès lors tout ira très vite, et dans les années qui suivent trois monstre de la navigation pointent à l'horizon. Netscape Navigateur (1994), développé par un des pères de NCSA Mosaic, Opéra (1994), et Internet Explorer (1995), premier navigateur du géant Microsoft.

Le poids des années

Parmi les trois navigateurs cités précédemment, deux ont survécus jusqu'à nos jours. Netscape Navigator s'est quant à lui éteint en mars 2008. Triste fin, mais belle renaissance. Le projet qui renaîtra de ses cendres, et qui avait déjà commencé en 2002, sera Phoenix, qui deviendra Firebird, pour finalement être Firefox

En ce qui concerne Opera, il est le plus ancien navigateur encore utilisé de nos jours, bien que sa côte de popularité ne soit pas très élevée. Vingt-deux ans de bons et loyaux services.

Quant à Internet Explorer il traverse solidement les année à bord de son navire de guerre Windows dont il bénéficie de la large distribution.

La course à la popularité

Actuellement quatre navigateurs sorte du lot. Le premier ne craint pour l'instant aucun adversaire, et les trois autres voient leur position évoluer en fonction de la population d'appareil considérée, à savoir ordinateur de bureau, smartphone ou tablette. En effet, avec l'avènement ces dix dernières années des smartphones et des tablettes, le marché des navigateurs, qui restent des logiciels gratuits précisons-le, n'a cessé de croître.

Sur la première marche du podium se trouve Google Chrome, à l’appétit gargantuesque. Né seulement en 2008 il est le petit dernier de la famille des navigateurs. Et il ne lui aura fallu que quelques années pour s'élever au rang de champion de sa catégorie. Navigateur puissant et de très bon rendu, Chrome a su séduire malgré quelques controverses, comme l'intégration native de Flash Player ou l'espionnage de ses utilisateurs à des fin marketing. Notons que l'utilisation massive du moteur de recherche Google aura servi la cause du navigateur Chrome en lui servant de vitrine de lancement idéale.

Le deuxième de la chevauchée est Safari, le navigateur par défaut de tous les systèmes d'exploitation Mac. Adopté par une large majorité des utilisateurs adeptes de la marque à la pomme, et réputé pour sa facilité d'utilisation et son bon rendu, c'est aussi le navigateur de tous les iPhones et iPads.

A ses côtés se trouve Firefox, le navigateur open source de la Fondation Mozilla. Parmi ses points forts on peut citer son bon rendu visuel, l'utilisation d'extensions et une excellente gestion des favoris, ainsi que de nombreuses fonctions protégeant la vie privée des utilisateurs. Vous l'aurez compris Firefox est le navigateur à part de la bande.

Pour terminer nous retrouvons le navigateur de Microsoft, Internet Explorer, qui malgré son intégration au système d'exploitation le plus répandu, Windows, peine à être populaire. Pendant longtemps IE a été considérer comme le caillou dans la chaussure des webmaster, qui devait éditer du code spécialement pour le rendu sur IE. Heureusement cette époque est révolue et Microsoft s'aligne davantage sur les standards du web.

Lequel choisir ?

Parmi tous ces navigateurs, ceux qui soulèvent le plus d'enthousiasme sont Chrome et Firefox. Le premier pour sa puissance et sa compatibilité avec tous les produits issus du géant Google, le second pour la transparence de son code, l'efficacité de son rendu et la force de la communauté qui le développe.

A ce propos notons que Google a publié un autre navigateur, du nom de Chromium, et dont la caractéristique est d'être open source et ainsi bénéficier de l'appui de la communauté open source. Un loup dans la bergerie pourrait-on dire, permettant de bénéficier d'idées et de les intégrer à la version Chrome, logiciel propriétaire.

Frank.

sources
https://fr.wikipedia.org/wiki/Navigateur_web
https://fr.wikipedia.org/wiki/%C3%89volution_de_l%27usage_des_navigateurs_web

Les couleurs de votre site parlent comme des mots

Vous ne croyez pas à mon titre. Et pourtant, les couleurs de votre site en dit beaucoup. En règle générale, chaque couleur est associée à un symbole et des émotions. Réfléchissez aux couleurs que vous aimez et pourquoi vous les aimez.

La décision d’un visiteur de rester ou non sur le site est rapide, il faut moins de 10 secondes pour se décider… Pendant ce temps, le visiteur arrive à lire les titres principaux, voir les photos et surtout percevoir les couleurs utilisées dans votre design. Cette perception se fait automatiquement et souvent inconsciemment. Je ne suis pas psychologue ou philosophe, d’autres le feront mieux que moi… Mais je m’intéresse à la perception des couleurs et des ressentis qu’elles dégagent. Les définitions des perceptions suivantes ne sont pas tout à fait les mêmes pour chaque personne, ce sont mes perceptions.

L'importance des couleurs dans le web

Auteur: Peter

Le bleu

Pensez à un symbole bleu comme un élément ou une chose que vous voyez souvent en été. Si je ne me trompe et que ma perception est correcte, vous avez pensé à l’eau et au ciel. Juste ou faux ? D’ailleurs, saviez-vous que le bleu est la couleur la plus aimé chez les européens ? Pour ma part, c’est l’une de mes couleurs préférées.
La couleur bleue inspire des émotions ou des sentiments comme la confiance, la paix, la fraîcheur et la loyauté. Différentes marques et organismes utilisent cette couleur pour influencer la perception que l’on a d’eux. C’est le cas de Facebook, de Samsung, de Nokia ou encore comme l’UNICEF ou l’ONU. Le bleu est utilisé principalement pour la technologie et dans un contexte international.

Le rouge

Pour le rouge, je ne vais pas vous demandé de réfléchir, ce serait encore plus simple. La majorité des personnes aurait pensé au feu et au sang.
J’ai souvent entendu autour de moi que le rouge était une couleur agressive, quelle signifiait un danger. Mais si l’on prend les bonnes émotions, le rouge exprime la passion, l’amour, la confiance. Ce n’est pas pour rien que mon bureau est rouge, je sais c’est un peu bizarre mais je l’aime. Lorsque j’ai demandé à ma copine de me citer des marques, elle n’a pas réfléchit longtemps avant de sortir YouTube, coca cola et Hotelplan, oui elle est en étude de tourisme… Pour moi, je n’attendais que les deux premières marques.

Le jaune

Comment est-ce que je pourrais varier l’introduction des couleurs… Cela risque de faire un article répétitif donc je risque de diminuer la longueur des paragraphes au fil des couleurs. Mais pas pour le jaune. Une couleur importante pour nous ! Oui si vous ne l’avez pas remarqué notre site a du jaune. Pas parce que nous sommes le soleil qui éclaire vos magnifiques journées. Mais cette couleur signifie la vie et le plein d’énergie. Et de plus le lieu de nos études est la ville la plus ensoleillée de Suisse. Autant de coïncidences serait un hasard? je ne le crois pas. Pour citer des marques ou des établissements, il y a McDonald’s et la Poste.

Orange

Cette article commence à tirer en longueur donc je vais m’efforcer de le raccourcir. Pour l’orange, j’ai de suite pensé à l’orange que je mangeais pendant la rédaction et aux abricots valaisans. L’orange signifie la créativité et l’enthousiasme comme la marque Fanta essaye de le faire comprendre dans leurs pubs. Pour nous, Suisses, nous avons la Migros et la Coop.

Le vert

Pour le vert, vous pensez à ? Aux plantes et à la nature, bien entendu! C’est reposant, c’est calme et frais. Pour ne citer que deux marques : Android et Starbucks.

Le noir

Le noir, c’est la nuit, il inspire la classe, le mystère et le luxe.

Le blanc

Le blanc comme la neige, il inspire quant à lui la sagesse et la pureté.

Faite attention aux couleurs. Maintenant, vous savez quelle couleur choisir pour écrire votre prochain message. Peter

Bootstrap de Twitter pour un design simple et rapide

Vous êtes vous déjà demandé s'il existait des choses pour se simplifier la vie? Rendre plus facile la tâche de faire un design? Alors Bootstrap est fait pour vous. Un outil qui facilite la vie de milliers de personnes. Attention, cette article comporte certains termes techniques mais constitue une bonne base pour mettre en place un design responsive.

Logo de Bootstrap

Auteur: Bootstrap

Source: https://commons.wikimedia.org/wiki/File:Boostrap_logo.svg

Explications

Bootstrap est un Framework HTML, CSS et JavaScript pour le développement d’un design responsive. Il met à disposition des développeurs quantité de styles et de fonctionnalités. Par ailleurs, leur site web décrit tous les styles et fonctionnalités en donnant un exemple graphique et de mise en œuvre. Ce Framework a été développé par Twitter en 2011. Bootstrap nécessite JQuery pour certaines de ses fonctionnalités, raison pour laquelle il est associé à Bootstrap lors du téléchargement.

Quel sont les avantages à utiliser Bootstrap:

Application web finale responsive : Avec le système de grille et de breakpoint disponible de base, le design s’adapte facilement à beaucoup de terminaux.
Standardisation : Il permet la standardisation des applications, car il offre une définition de base pour tous les composants HTML.
Simple d’utilisation : Il dispose d’une très bonne documentation en ligne et il suffit d’appliquer les exemples donnés à notre cas.
Design rapide et beau : Il n’y a pas besoin de faire du CSS ou que très peu pour réaliser un design

Récupérer Bootstrap

Pour récupérer Bootstrap, il est conseillé de le télécharger sur leur site. Ci-dessous l’adresse pour le récupérer, il faut télécharger en cliquant sur le bouton « Download Bootstrap ».

http://getbootstrap.com/getting-started/#download

Liaison entre le HTML et Bootstrap

Dans les fichiers HTML, il faut bien préciser ou se situe les feuilles de styles, le JavaScript et JQuery. Le lien entre les feuilles de styles et le HTML se fait via la balise « link » situé dans la balise « head ».

<link rel="stylesheet" href="static/css/bootstrap.min.css">

La liaison entre un fichier JavaScript et le HTML se fait via la balise « script » situé à la fin de la balise « body ».

<script type="text/javascript" src="static/js/bootstrap.min.js">

Où mettre ces modifications de design

Dans un fichier "CSS additions" qui contiendra toutes les modifications que vous apporterez à Bootstrap ainsi que les définitions CSS propres à l’application. Cela permettra de mettre à jour plus facilement Bootstrap et facilitera grandement les modifications.

J'espère que cette article plus technique vous aura plu. Peter

Source:
http://getbootstrap.com/, consulté en 2016

La multiplicité des tailles d’écrans

Vous avez sûrement déjà navigué de nombreuses fois sur votre smartphone. Les sites internet ne s’adaptent pas toujours aux écrans. Ça vous énerve et moi aussi. Je vais vous expliquer ce que les informaticiens ou vous (peut-être) auriez dû penser.

Diverses tailles d'écran

Auteur: Muhammad Rafizeldi

Source URL: http://incridea.com/images/Responsive-Web-Design-INCRIdea-Indonesia.png

Le marché mondial

Sur le marché mondial, il existe une multitude de tailles d’écran. Cela va de la télévision (eh oui certaine personne navigue sur leur télé) jusqu'au smartphone. Je sais que la minorité aimerait que je parle de l’adaptation du design sur votre bel écran plat. Malheureusement, enfin heureusement, je ne dispose pas de cette fonction, mais je possède bel et bien un smartphone. Saviez-vous d’ailleurs que 78% des Suisses âgés entre 15 et 74 ans possède un smartphone en 2016. Donc pensez à la masse de personnes qui surfent sur les sites avec un téléphone portable. C’est énorme.

Graphique montrant la répartition des smartphones dans les âges
Auteur: Comparis.ch

Source: https://fr.comparis.ch/-/media/images/mediencorner/telecom/2016/smartphone-verbreitungsstudie-2016/grafik%201-fr.jpg?la=fr-ch&hash=20BC8BD14598FDC034E4591EFD4F42952F405607

Pourquoi s'adapter

Je vais prendre mon cas. En règle générale, si le design n'est pas adapté à l’écran de mon smartphone, je passe ma route. Je n’aime pas et je n'ai pas envie de naviguer de gauche à droite pour lire le contenu. C'est dérangeant et le pire c'est que ça existe encore. J’espère que vous ne me contredirez pas. Pour illustrer mes propos, je vous mets deux captures d'écran d’online shop que j’ai prises sur mon smartphone.

Deux captures d'écrans d'online shop
Gauche: probikeshop.ch, Droite canyon.com
Auteur: Peter

Maintenant c’est à vous. Du tac au tac, sur quel site achèteriez-vous un vélo ? C'est peut-être une mauvaise question, vous n’êtes surement pas à fond dans le vélo comme je le suis... Mais on peut clairement remarquer plusieurs choses. Sur l’image de droite, le design est sobre, simple, beau et surtout adapté à mon smartphone. Les boutons et le texte sont lisibles. L’image ne déborde pas. Sur l'image de gauche, je n’arrive pas à lire sans zoomer… le design est plus compliqué et surchargé. Dommage.

Comment s'adapter ?

C’est pour cela que les informaticiens ou vous-mêmes devez penser aux diverses tailles d’écran. Et pour gérer les cas, il existe deux moyens : faire un site mobile dédié ou faire un design qui s’adapte aux écrans (responsive design).

Un responsive design à un net avantage, il n’y a pas besoin de refaire un site, on adapte seulement le design. Et pour ça, la version 3 de CSS a de chouettes fonctions (les Media Queries). Pour faire simple, cette fonction permet de limiter l’impact des lignes CSS par rapport à la largeur, la hauteur ou la couleur de l’affichage. Et le tout, sans modifier le contenu, juste en adaptant le design. Dit comme ça, c’est une solution magique… Mais, l’adaptation du design est source de complexité. La deuxième solution, faire un site dédié, est relativement lourde. Car cela implique de réécrire votre site web. Je ne pense pas que cela vous enchante.

Pour conclure, je conseil l’utilisation, non je recommande l’utilisation du RESPONSIVE DESIGN. Bientôt, je ferai un article sur le responsive design pour vous l'expliquer en détail. Merci de nous avoir lu. Peter

Sources
www.comparis.ch , consulté en 2016
www.developer.mozilla.org , consulté en 2016

Il était une fois le HTML

La naissance du web, en 1989, a été celle de triplés: HTML, HTTP et email. Dans cette dynastie naissante, pas de paresseux, chacun fondra un empire. Dans le webdesign HTML est celui qui a le plus d'importance. Petit tour d'horizon.

HTTP, ou HyperText Transfer Protocol, fut celui qui offrit la communication entre les serveurs et les navigateurs web. Les emails annoncèrent l'ère oû le courier serait livré aussi rapidement que l'éclair. Quant au HTML, il organisa l'information, le structura et créa des liens pour navigeur d'un information à l'autre. Un univers est né.


Code HTML auteur / source : Frank

Le rôle du HTML

Dans le webdesign, c'est lui qui nous intéresse. De son vrai nom HyperText Markup Language, le HTML est un langage de balise qui permet non seulement de stocker de l'information, mais également de la structurer, de la lier, de la mettre en forme, et d'accueillir des programmes informatiques. Rien que ça.

Lorsque l'utilisateur entre une adresse de site dans son navigateur, clique sur un lien, complète un formulaire, il envoie une requête au serveur. C'est à partir de cette requête que le serveur va compiler les données et le retourner à l'utilisateur sous la forme d'un langage que le navigateur comprend. Le HTML est la langue de communication du serveur vers le navigateur de l'utilisateur et qui permet l'affichage de la page web.

Un cocktail d'information

Prenons l'analogie entre un serveur informatique et le serveur du bar un samedi soir. Le client passe sa commande. Un long island. Le serveur opère de son côté du bar, collecte tous les ingrédients de la recette, et les mélange dans les bonnes proportions.

A moins que le serveur ne verse le cocktail sur le bar ou directement dans la bouche du client, il va falloir un verre. Qu'il soit haut, large, évasé, le contenant doit être adapté.
On ne boit pas un whisky dans une flûte à champagne!

Comme le cocktail doit séduire tant par son contenu que par son apparence, le serveur va le décorer. Du sucre sur le bord du verre et une petite cerise, pas de place au hasard, à chaque cocktail sa présentation.

Ainsi le client reçoit son cocktail, à savoir du contenu, un contenant et une décoration. Les trois sont indissociables.

Un dernier verre ?

En résumé dans un document HTML nous avons de l'information, des balises qui servent à classer et retrouver facilement cette information, ainsi que des attributs qui permettent d'appliquer un style particulier à un type de contenu. Tout est singulièrement lié en apparence, mais revêt toute son importance lorsque la page s'affiche à l'écran.

Mais rassurez-vous, le navigateur fera le travail à votre place et exécutera tout ce code pour vous offrir la page web que vous aurez demandé. Si vous décider de traverser l'écran et de voir ce qu'il y a derrière, alors un ctrl+u ( ou pomme+u ) vous fera traverser l'écran d'un bon. Vous venez d'entrer dans le palais de la dynastie HTML.

Frank.

Extra - 6 sites complétements fous

Vous êtes en panne d'inspiration ? Vous cherchez des idées complètement folles ? Ou tout simplement, vous êtes curieux ? Cette sélection de 6 sites incroyables vous étonnera. Je vous l'assure.

Attention, cet article a été écrit le 17 novembre 2016. Il est donc possible que certains sites ne soient plus accessibles.

1. - Eutow by Marpi

Merci à Marpi pour cette création! Ce site n'a pas de grandes fonctionnalités, mais imaginez-vous le travail Le rendu 3D est bien géré et fluide. Je vous laisse visiter ce site et vous étonnez.

Le lien vers Eutow: http://demo.marpi.pl/archan/eutow/

2. - The Globe of Economic Complexity by Owen Cornec & Romain Vuillemot

Je ne sais pas si vous vous intéressez à l'économie mondiale, pour ma part oui. C'est pour cela qu'il est dans ce top 6. Imaginez l'algorithme! Chaque point représente 100 millions de dollars d'exportations. Impressionnant, surtout sur le continent européen.

Le lien pour voir l'économie mondiale: http://globe.cid.harvard.edu/

3. - Because Recollection by 84.Paris

Ce site est étonnant, il mêle de l'audio, des animations et des vidéos dans un site web. De plus, il vous permettra de découvrir de la musique.

Le lien vers Recollection: http://www.because-recollection.com/laurent-garnier

4. - Chrome music LAB by Google Creativ LAB

Ce site nous vient tout droit des laboratoires Google. Oui, mais à quoi sert-il ? Excellente question, je ne l'ai pas trouvé d'une grande utilité, à part pour amuser les internautes... Sur ce site, on peux sélectionner une des fonctionnalités (image) et créer de belles et ennuyeuses mélodies. Merci Google pour ce site.

Le lien pour s'amuser: https://musiclab.chromeexperiments.com/

5. - A Year in The Life Earth's CO2

Est-ce une touche de conscience écologique de la NASA ? Outre cette question, elle montre les niveaux de CO2 et ses flux lors de l'année 2006.

Le lien: http://co2.digitalcartography.org/

6. - The Eight-Tousanders by Martin Laxenaire

Sans doute mon site préféré. Visualisez les plus hautes montagnes de planète sans bouger du canapé. Plus précisément les 14 sommets de plus de 8000 mètres. Tout le monde connaît l'Everest et sûrement le K2. Mais quant est-il des autres? Révisez bien votre géographie et prenez-en plein les yeux avec ces modélisations 3D.

Lien vers envol garantit: http://www.martin-laxenaire.fr/experiments/8000ers/#/everest

Article rédigé par Peter.

CSS - Des règles, une fois pour toute !

Dans les technologies du web on aime à parler en acronyme, avec bien souvent des chiffres derrières. Petit échantillon des derniers né en la matière : web 2.0, HTML 5 ou CSS 3. Qui sont-ils, à quoi servent-ils ? petit aperçu du dictionnaire de la famille, le CSS 3.

Le CSS par la pratique

Imaginez un mach de football dont l’arbitre devrait à chaque faute énoncer l’explication d’une faute. « Le joueur attaquant 10 de l’équipe rouge à reçu une passe alors qu’il se trouvait entre le dernier défenseur et le gardien adverse au moment de la passe... ». Offside ! Hors-jeu ! précédé d’un bon coup de sifflet permet à l’arbitre de résumer la situation.

Le CSS c’est pareil. Au lieu du ballon rond, parlons web. Un univers rempli de règles dans lequel aucun élément ne choisit sa place par hasard, ni sa couleur, ni sa taille. Finalement, pas de place au hasard dans le web, mais là c’est une autre discussion. Revenons-en aux règles.

Un site web, c’est comme un livre, les éléments similaires doivent présenter une uniformité dans leur apparence et leur position. Les paragraphes seront tous de la même couleur, disons noir, de taille 11 et de police Arial, avec un alignement à gauche et un interligne de 1,5. Jusqu’ici rien d’étrange. Prenons le cas d’un site web avec énormément de paragraphes. Va-t-on à chaque fois définir la couleur, la position, la police, avec le risque de devoir tout redéfinir si la taille doit passer à 10 ? Non, parce qu’il y a le CSS.

Acro-quoi ?

Acronyme. CSS pour Cascade Style Sheet, ou feuille de style en cascade. Un nom complexe pour un langage qui simplifie bien des choses. Les débuts du CSS se font peu de temps après celui du HTML (voir l'article consacré), dès le début des années 90. Sa maturation sera cependant lente, et la version entièrement intégrée par tous les navigateur ne verra le jour qu'en 2007, sous le nom de CSS 3.0.

Pour reprendre l’image de l’arbitre de football, le CSS permet de définir une seule fois une règle, et ensuite de choisir à quel cas elle s’applique. Dans le cas de l’arbitre c’est « offside », dans celui du CSS c’est « paragraphe ». Il suffit d’appeler un groupe de mots « paragraphe » et toutes les règles de taille, position, couleur, et j’en passe, s’appliqueront.


HTML (à gauche) et CSS auteur : Boskampi source : https://pixabay.com/photo-1832991/

Des classes...

Menons encore une comparaison pour illustrer le prochain sujet. Je fais parti de plusieurs groupes d’individus : famille, citoyen d’un pays, étudiant à la HES, homme, et bien d’autres. Dans chacun de ces groupes sont a priori comprises plusieurs caractéristique. Parler au moins une des langues du pays en question, avoir la possibilité de porter une moustache pour le genre homme, ou avoir une carte d’étudiant de la HES. Ce sont les classes du CSS.

Une classe est le nom de famille d’un élément d’une page web, ou son genre. Tous les Dupont parlent français, donc le petit Marc qui se voit naître Dupont parlera français. Ainsi tous les titres d’un site web qui seront de la classe .titre_de_mon_site hériteront de propriétés identiques. Le point devant la classe permet de la distinguer. Mais la distinguer de quoi ?

et des identifiants

C’est la que le statut d’individu apparaît. Les membres d’une famille n’en sont pas moins des individus, et le petit Marc Dupont pourra très bien avoir l'envie d’apprendre le finlandais. Il répondra donc aux caractéristique de la famille Dupont et parlera toujours français, mais il faudra aussi lui attribuer un statut qui reconnaisse ses compétences dans la langue scandinave. C’est à cela que sert l’identifiant, reconnaissable à un # placé devant le nom. Ainsi Marc Dupont appartient à .Dupont mais c’est avant tout un individu, un #Marc.

Cet identifiant permet de reconnaître un élément qui se veut unique dans une page, mais qui peut se retrouver dans plusieurs page. Et le jour où le petit Marc sera grand et aura toute une famille à lui, alors on fondera peut-être une classe à son nom, avec des petits .Marc à travers toutes les pages.

Un puissant outil

Pour reprendre la définition du W3C, « le CSS est un langage de feuille de style utilisé pour définir la présentation d’un document écrit en langage de balise ». Cela inclus aussi bien le HTML que le XHTML ou le XML. Ses avantages sont multiples :

Séparation du contenu est de la présentation, permettant d’efficacement et facilement modifier l’apparence d’une page web sans avoir à en modifier le contenu.
Meilleures gestion de la largeur de la présentation, dans le cas d’un site web qui doit s’adapter tant aux écrans larges qu’aux smartphones.
Un allègement du téléchargement des pages, les règles n’étant pas décrites pour chaque élément.

Vous l'aurez compris, le CSS est devenu un outil incontournable du webdesign.

Frank.

Je suis skeuomorphisme !

Pas besoin d'être skeuomorphisme pour en comprendre son sens. On utilise le skeuomorphisme dans la conception graphique des sites web. On donne au objet ou au icône une apparence physique.

Ancien logo de Youtube sur i-phone 3
Auteur : Youtube
Source URL : www.commons.wikimedia.org

Logo actuel de Youtube sur les smartphones
Auteur : Youtube
Source URL : www.commons.wikimedia.org

Le skeumorphisme, c'est quoi ?

Pour toutes les peronnes qui ont eu les premiers i-phone, voici à quoi ressemblait le logo de Youtube (à droite). Voici une illustration parfaite du skeuomorphisme. Les concepteurs graphiques des logos des applications de smartphone ont donné à l'application Youtube l'apparence d'une télévision. Un moyen ingénieux pour interpellé l'utilisateur. S'il veut regarder la TV, il doit utiliser cet application. Ce style fut énormément utilisé par Apple.

Skeuomorphisme VS Flat design
Le skeuomorphisme s'oppose au flat design. Dans l'évolution graphique des sites web, nous avons d'abord vu les icônes en 3D, puis par ras le bol et par envie de changement, nous sommes passés au design plat.
Le skeuomorphisme nous offrait des icônes familières, elle représentait les objets que nous utilisons chaque jour comme une horloge ou un calendrier.

Exemple
Voici un exemple assez parlant de l'opposition des deux styles. A gauche, nous avons l'impression d'avoir réellement une étagère en 3D avec les films posés sur chaque étage. A droite, cette profondeur est remplacé par une présentation simple et transparente. Nous remarquons aussi que la mise en page sur l'illustration de droite est plus légère.

Comparaison de l'évolution de la bibliothèque d'Apple
Auteur :
Source URL : www.blog.usablla.com

Depuis quelques années, la majorité des entreprises est passée au flat design. Par un effet de mode et pour attirer les utilisateurs sur la mise à jour des nouveaux concepts graphiques. Néanmoins, il faut dire que le skeuomorphisme a des avantages uniques comme la facilité de repérer les applications sur le smartphone par leur ressemblance aux objets utilisés dans la réalité ou la standarisation de ce concept. Bob

Sources

www.slate.fr, consulté en 2016
www.grapheine.com, consulté en 2016
www.blog.usabilla.com, consulté en 2016

Les clés de la lisibilité : le flat design

Le flat design est un style de création de pages avec le minimum de fioritures possible. Moins y en a, mieux on comprend. Avec le flat design, je me sens mieux.

Lorque l'on parle de webdesign, je pense à des structures complexes avec beaucoup d'éléments qui noient le contenu du site. Le flat design se traduit en français par "design plat".

Avec le flat design, on présente mieux avec moins. Ce style de design se base sur une mise en page simple. Cela permet une meilleure compréhension du contenu du site.

Rôle du concepteur
Le concepteur du site joue avec les couleurs, les textures et la typographie. Son objectif premier consiste à épurer le contenu du site sans perdre son contexte et sa compréhension. Lorsque l'on épure, on rend le site le plus léger possible en contenu visuel sans les faire disparaître.
Au début du paragraphe, j'écris qu'il faut jouer avec les couleurs. Ainsi, le webdesigner doit utiliser des couleurs vives et des icônes qui sont faciles à identifier.

Quels sont les atouts du flat design ?

- Une meilleure compréhension du site web
- Une lisibilité accrue sur des écrans de petites tailles (smartphone)
- Un site web léger en contenu

Exemple

Pour mieux illustrer mes propos, voyons un exemple de flat design. Les entreprises Google et Windows sont les premiers à avoir intégrer et développer le design plat.

Page de démarrage Windows
Auteur : Tijs Hofmans
Source URL : http://www.computeridee.nl/workshop/windows-10-het-startmenu/

Ci-dessus, on observe la page de démarrage de Windows. Les icônes sont présentées sous forme de rectangle et de carré.

- Une enveloppe pour les e-mails
- Un sac de course pour le shop en ligne Windows
- Le clap pour les films et les vidéos
- ...

Les images qui définissent les différentes fonctionnalités sont simples. Cela va de même pour les pages d'accueil d'I-Phone.
A gauche, on a une ancienne version des icônes I-Phone , les icônes sont en relief, on parle ici de skeuomorphisme, à droite on sent une évolution dans la présentation des icônes. Elles sont simples, plates, elles imagent bien les objectifs du flat design.

Photo de la page d'accueil d'un i-phone
Auteur : scottjacksonx
Source URL : www.flickr.com

Photo de la page d'accueil d'un i-phone (IOS 8.3)
Auteur : Mahesh Mohan
Source URL : www.flickr.com

Je terminerai en définissant le flat design comme une recherche sur le minimum a présenté pour une compréhension maximale. Bob

Sources

www.wikipedia.org, consulté en 2016

www.dunegestion.com, consulté en 2016
www.toopixel.swiss, consulté en 2016

CMS – vers un renouveau du webdesign ?

Les CMS sont devenus un incontournable de la réalisation de sites web. A quoi servent-il et surtout qui desservent-ils ? Petit tour d'horizon des caractéristiques de cet outil dont l'usage peut se révéler plus complexe que prévu.

A une époque qui voit les journaux diminuer leurs tirages, les dictionnaires et encyclopédies prendre la poussière sur les étagères et les services de postes diminuer la distribution de lettres, le web s’est imposé en deux décennies comme le vecteur incontournable de l’information. Tous le monde, ou presque, publie sur un blog, s’affiche sur son facebook, piaille sur tweeter ou exprime ses talents de photographe sur instagram.

Ma grand-mère, 91 ans, est la seule personne que je connaisse qui n’a pas franchi le cap. L’heure est à la numérisation de l’information, et la toile revêt une apparence inédite, celle du web 2.0, un réseau planétaire sur lequel tout le monde publie, et tout le monde peut réagir. Mais qu’en est-il de l’aspect technique? Qui possède les compétences pour monter son propre site web? c’est en partie pour répondre à cette demande que sont né les CMS.

Un CMS, c'est quoi?

Les CMS c’est Wordpress, Drupal, Joomla, MediaWiki ou Prestashop. La liste n’est pas exhaustive et elle est longue. Ils vous permettent de monter votre propre blog, une boutique en ligne, ou de mettre en place une plateforme de partage de connaissance. Le Content Management System (CMS), ou système de gestion de contenu, vous prémâche le travail en proposant une architecture de base déjà fonctionnelle. S’y ajoute pléthore de thèmes et de greffons pour faire varier le graphisme, la mise en page et les fonctionnalités.


Drupal 7 source : www.drupal.org	Prestashop source : www.prestashop.com	Joomla! source : www.joomla.org	WordPress source : www.wordpress.org

Le web se démocratise, qu’on se le dise. Avec relativement peu de connaissances en informatique, un peu de débrouillardise et beaucoup de patience, tout le monde peut créer son site, avec son propre nom de domaine, et sans aucun impératif publicitaire ou contractuel envers un tiers.

Les points forts

Outre cette plus grande accessibilité au commun des mortels, un des atouts du CMS est la gestion dynamique de contenu. Créez une page en lui attribuant le rôle d’afficher tous les articles qui portent l’attribut «news», et chacune de vos publications portant cet attribut sera automatiquement ajouté à la page, avec une disposition que vous aurez pré-défini.
Les CMS permettent à un utilisateur lambda de travailler avec du contenu, voire beaucoup de contenu. A tel point qu’une base de données est utilisée pour tout stocker. Mais là pas de crainte à avoir, nul besoin de maîtriser le sujet pour gérer cette base de données, le CMS s’en charge. Ainsi toute publication créer, sans que l’utilisateur ne le voit, une entrée dans la base de données. Et toute modification ou suppression de cette publication modifiera automatiquement cette même base de données.

Un deuxième point fort est la gestion des utilisateurs. Différentes permissions et rôles sont attribuables, tel que administrateur, auteur, contributeur,... et permet de définir qui pourra publier du contenu, le modifier ou encore changer la structure du site. Un atout de taille quand l'on sait que dans l'aire du web 2.0 le rôle du visiteur n’est plus uniquement de parcourir le contenu, mais également d’y réagir ou même d'en créer un.

Notons encore la capacité des CMS à changer de peau. Il suffit pour cela d’installer un nouveau thème et de l’activer, aussi simple que cela. Un vrai caméléon, même si celui-ci se retrouve parfois avec trois pattes et deux têtes après la manipulation.

La liste des atouts des CMS est longue. A chacun de faire ses expériences et de définir ses besoins afin d’utiliser le bon outil. Et ce qui peut paraître un point point fort se transforme parfois en un brillant casse-tête…

La face cachée du CMS

La popularité des CMS en a fait un outil privilégié par de nombreux webmasters, la palme d’or revenant au Goliath des systèmes de gestion de contenu, le fameux Wordpress. Avec plus de 25% (1) des sites référencés qui utilisent cette technologie, Wordpress est devenu au file des années une cible privilégiées des attaques de tous bords. Le problème est de taille, et la décontamination d’un site infecté présente une certaine complexité que l’utilisateur lambda ne saura pas gérer. Sa recherche de solutions directes le poussera alors à installer nombre de plugins de sécurité promettant monts et merveilles. Souvent en vains.

C’est à ce moment que le côté obscur de la force se réveille. A force de thèmes survitaminés et de greffons de tous genre, le CMS se transforme en usine à gaz, avec des fonctionnalités à en faire pâlir un couteau suisse et un appétit gargantuesque de ressources. Ce qui devait être une ode à la simplicité se transforme en un monstre tentaculaire dont les multiples paramètres de configuration finissent par décourager les moins téméraires.

C’est sans parler de la fameuse «courbe d’apprentissage» dont la pente risque de briser de nombreux rêves. Le choix du CMS est primordial, et ce choix se fait en fonction des besoins, mais aussi des compétences en informatique, du temps à disposition et de la taille de la montagne que l’on est prêt à gravir.


Quelques CMS et leur courbe d'apprentissage réalisation : inconnu source : le web

En résumé, Drupal nécessite très rapidement de bonnes compétences, et ceux qui maîtrisent ce CMS peuvent se targuer d’avoir gravi un Everest. Du bon côté de la force ils sont repassé.

Quel bilan?

La famille des CMS s’agrandit constamment, certains étant développés spécifiquement aux besoins d’une entreprise. Leurs domaines d’applications s’élargissent de même. Wordpress a initialement été créé pour du blog, et maintenant il permet jusqu’à la mise en place de site eCommerce. La première et plus importante étape de l’utilisation d’un CMS et de savoir ce que l’on en attend. Encore faut-il en être capable. Un point est sûr, ils permettent tous de gérer du contenu.

Frank.

Après l'évolution selon Darwin, voici l'évolution du webdesign selon Bob !

Comme l'être humain, les sites web évoluent. La mode, les goûts et les avancées technologiques ont permis de développer et améliorer les concepts de sites web.

De 1950 à 1990

Comme décrit dans notre premier article, le webdesign n’existait pas au début du Web. Vous n’avez pas lu le premier article, c'est dommage. Donc, le Web a été créé pour aider les scientifiques du monde entier à se transmettre simplement des documents à travers le monde et sans coût. Pour ainsi dire, l’approche graphique des sites était secondaire. La mise en page permettait avec des titres et sous-titres de trouver rapidement les informations. Jusque dans les années 90, les sites se composaient uniquement de colonnes avec des textes. Aucune dynamique, aucune fioriture dans la présentation du site web.

Le premier site internet de la Nasa
Auteur : Fabian Burghardt
Source URL : http://fabianburghardt.de/webolution/

De 1990 à 2000

Il est apparu les premières mises en page des sites web. Notamment, la technique « frame pages », le site web était découpé en différent cadre. Une des avancées les plus importante fut celle des logiciels flash, crées par la Startup FutureWave.
Logiciels flash, hein ? Les logiciels flash de l’époque ont été conçu pour simplifier la création d’interface graphique. Grâce à FutureWave, une nouvelle branche s’ouvre pour les graphistes dans le monde de l’informatique. A la fin des années 90, tout s’accélère, les animations Flash se retrouve sur la quasi-totalité des sites web car il offre une approche visuelle nouvelle.

Le site de la Nasa sur le projet Apollo en 1997
Auteur : Fabian Burghardt
Source URL : http://fabianburghardt.de/webolution/

Des années 2000 à aujourd'hui

Le monde a continué de tourner. L’informatique n’as pas cessé d’évoluer, de même pour le webdesign. CSS apparaît. CSS ? l’assurance santé suisse ? Non pas du tout. On appelle CSS le « Cascading Style Sheets ». C’est un style dont les pages apparaissent en cascade. Ces nouvelles présentations dopent la dynamique des sites web. Vous n'avez rien compris alors lisez l'article sur CSS.
Les sites web sont devenus pour les entreprises un intermédiaire simple dans le but d'afficher son image à un grand public. Dès le moment où les entreprises ont compris que les sites web leurs étaient bénéfiques, ils ont investi dans ce secteur.

Au niveau graphique et visuel, nous avons passé un cap. Ils ont réussi à développer des systèmes interactifs et dynamiques. Les sites web dernier cris offre une expérience visuel agréable et parfois même ludique. Bob

Le site de la Nasa avec une présentation graphique en déroulement
Auteur: Fabian Burghardt
Source URL : http://fabianburghardt.de/webolution/

Source

www.blog.kissmetrics.com, consulté en 2016

Un pour tous, tous pour le Webdesign

Encore un article sur le webdesign! Et non, ce n'est pas un article mais une série d'articles. Les créateurs du blog "Webdesign pour tous" se sont unis pour vous expliquer la face cachée du webdesign.

Illustration représentant les contenus du webdesign sous forme d'un iceberg
Figure : Icone d’un iceberg
Design par: Stéphanie Walter
Inspiré par: Brad Frost
Source URL: https://commons.wikimedia.org/wiki/File:Adaptive-iceberg-1024.jpg

De nos jours nous sommes bombardés d’informations. Nos tablettes et nos ordinateurs en sont les cibles. Les réseaux sociaux tels que Facebook, Twitter, Instagram ou les sites d’informations sont des sites propices au webdesign.

Toutes ces plateformes de partage d’informations ont une chose en commun, une connexion au réseau des réseaux, le World Wide Web. Vous me direz : « Mais qu’est-ce que cela à avoir avec le webdesign ? ».

Le webdesign est directement lié comme son nom l’indique au Web. Le Web peut être représenté par un iceberg. 90% de sa structure se situe sous l’eau. Et ce que l’on perçoit d’un site internet n’est qu’une infime partie de l’iceberg. Tout le reste est caché sous l’eau.

Découverte du webdesign

Le webdesign n’a pas été découvert dans les grottes de Lascaux ou dans un tombeau égyptien. Il est beaucoup plus jeune que ça. En tout cas il aura fallu attendre la naissance du Web ou du fameux World Wide Web pour que cette branche puisse apparaitre.

C’est en Suisse, au CERN, un certain Tim Berners-Lee, physicien britannique qui inventa le premier site Web et amènera par la suite à la naissance du webdesign.

Webdesigner / Architecte

Le webdesign ne nécessite pas qu’une seule compétence. La polyvalence dans les domaines informatiques, artistiques sont très utiles pour améliorer l’efficacité d’un site Web ou pour bonifier sa présentation. Il est important de pouvoir agir sur tous les aspects d’un site internet. Par exemple, des connaissances en programmation joue un rôle primordial pour la compréhension des besoins des utilisateurs. La connaissance spécifique des différents langages et processus est utile dans ce domaine.
Les webdesigners sont des architectes et décorateurs informatiques. Ils doivent avoir des idées, les organiser, les mettre en place dans un projet, les structurer et les présenter.

Le webdesign est une nouvelle branche compliquée pour les non-initiés qui est dotée de termes incompréhensibles. C’est pour cela que nous, les blogueurs en herbe seront vos interprètes pour vous expliquer la partie immergée de l’iceberg «Webdesign pour tous ». Bob

Source
www.wikipedia.org, consulté en 2016
www.home.cern, consulté en 2016