Ici & Là

01 Société 02 Histoire 03 Science 04 Science fiction 05 SPIP 06 NTIC 07 Sondages 08 Divers
La meilleure façon de réaliser ses rêves est de se réveiller (Paul Valéry)

Accueil > NTIC > Ergonomie > Mots et outils importants du développement Web actuel

Mots et outils importants du développement Web actuel

dimanche 9 octobre 2016, par François Daniel Giezendanner

Notez cet article
0 vote

 Que signifient :

CSS, CSS Framework (Cadre de travail CSS, Cadriciel CSS, Cadre applicatif CSS, Cadre d’applications CSS, Framework CSS, Framework d’interface, Cadriciel d’interface), Responsive CSS Framework (Cadriciel CSS adaptatif), Flat Design (Design plat), Material design, Sass, Less, ...

Ces noms sont ceux de nombreux outils au service des professionnels du développement Web qui créent l’ergonomie des sites Web d’aujourd’hui.

Afin de mieux comprendre la signification de ces mots importants au centre du développement Web actuel, voici des extraits d’articles y relatifs pour vous invitez à les lire en détail.


 Rappel CSS : Séparer le contenu de la mise en forme rend le développement web plus rapide et facile

Dans l’article Les avantages des CSS on défini les CSS comme suit :

«  Les avantages des CSS : Quelle que soit la taille de votre site Web, son design évoluera avec le temps. Parce qu’ils permettent de séparer le contenu de sa présentation, les CSS représentent le moyen idéal pour permettre cette évolution sans avoir à réécrire l’ensemble de vos pages.

En bref ...

Qu’est-ce (que sont) que le(s) CSS ? C’est un système destiné à mettre en forme les contenus de pages Web. La partie CSS d’un document Web se contente de définir les différents styles de textes ou de blocs qui seront utilisés pour la mise en forme tandis que la partie HTML ne contient que le texte encadré de quelques balises. Chaque style CSS se voit attribuer un nom. Pour attribuer l’un de ces styles à un segment de texte particulier, il suffit d’ajouter les attributs « class=nom_du_style » ou « id=nom_du_style » au sein de n’importe quelle balise HTML.
 »

Sur developer.mozilla.org on nous présente les CSS comme suit :
« Séparer le contenu de la mise en forme rend le développement web plus rapide et facile. En définissant la structure du document uniquement dans votre fichier HTML, tandis que les informations de mise en forme sont indiquées pour leur part dans un fichier séparé (appelé feuille de style), vous pouvez mettre à jour la mise en forme de nombreux documents en une seule fois (et en profiter pour économiser des ressources ordinateur en même temps). »

Sources et compléments d’informations :


 Framework

En programmation informatique un framework, cadre applicatif, cadre d’applications, cadriciel, socle d’applications ou encore une structure logicielle désigne un ensemble cohérent de composants logiciels structurels, qui sert à créer les fondations ainsi que les grandes lignes de tout ou d’une partie d’un logiciel (architecture). Un framework se distingue d’une simple bibliothèque logicielle principalement par :

  • son caractère générique, faiblement spécialisé, contrairement à certaines bibliothèques ; un framework peut à ce titre être constitué de plusieurs bibliothèques chacune spécialisée dans un domaine. Un framework peut néanmoins être spécialisé, sur un langage particulier, une plateforme spécifique, un domaine particulier : communication de données, Data mapping, etc. ;
  • le cadre de travail (traduction littérale de l’anglais : framework) qu’il impose de par sa construction même, guidant l’architecture logicielle voire conduisant le développeur à respecter certains patrons de conception ; les bibliothèques le constituant sont alors organisées selon le même paradigme.

Les frameworks sont donc conçus et utilisés pour modeler l’architecture des logiciels applicatifs, des applications web, des middlewares et des composants logiciels. Les frameworks sont acquis par les informaticiens, puis incorporés dans des logiciels applicatifs mis sur le marché, ils sont par conséquent rarement achetés et installés séparément par un utilisateur final.

Source et complément d’informations :



 CSS frameworks

CSS frameworks are pre-prepared software frameworks that are meant to allow for easier, more standards-compliant web design using the Cascading Style Sheets language. Most of these frameworks contain at least a grid. More functional frameworks also come with more features and additional JavaScript based functions, but are mostly design oriented and unobtrusive. This differentiates these from functional and full JavaScript frameworks.

Two notable and widely used examples are Bootstrap and Foundation.

CSS frameworks offer different modules and tools :

  • reset style sheet
  • grid especially for responsive web design
  • web typography
  • set of icons in sprites or icon fonts
  • styling for tooltips, buttons, elements of forms
  • parts of graphical user interfaces like accordion, tabs, slideshow or modal windows (Lightbox)
  • equalizer to create equal height content
  • often used css helper classes (left, hide)

Bigger frameworks use a CSS interpreter like LESS or SASS.

Source et complément d’informations :


 Framework d’interface

Un framework d’interface ou cadriciel d’interface est un framework proposant un ensemble cohérent de composants d’interface. Il permet de simplifier le codage et de rapidement développer des interfaces d’applications. On peut aussi parler de framework front-end.

Source et complément d’informations :


 Les « cadre de travail CSS » ou cadriciel (Framework)

Framework

Le terme « Framework HTML », en vogue ces dernières années, décrit les efforts de développement indépendant de création de gabarits HTML et de normalisation CSS. Dans ce qu’on pourrait appeler un « cadre de travail HTML » ou « cadre d’applications » et même « cadriciel ». Ça va de la simple feuille de styles (CSS) aux amalgames les plus complexes à la « Boilerplate » ! Ce qui est extraordinaire avec cette culture, c’est qu’elle est au centre du développent Web au sens large. C’est pourquoi on y greffe souvent plusieurs outils à la base du développement Web.

En fait on peut absolument tout englober dans un « cadriciel ». Il vient d’ailleurs avec une arborescence et une organisation biens précise pour gérer tout les fichiers. Essayons de démystifier tout ça.

Source et complément d’informations :


 La révolution des cadriciels d’interface

« The need for most people to create front-end code may not even exist in the not-so-distant future. » Zurb, créateur du cadriciel Foundation.

Prototype fonctionnel réalisé avec le cadriciel Foundation de ZurbLa multiplication des plateformes, et avec elle le besoin de sites adaptatifs, complexifie la vie des développeurs web. Heureusement, depuis quelques mois, une petite révolution est en train de se produire.

Des cadriciels d’interface (interface framework) peuvent simplifier radicalement la production d’interfaces utilisateur.

Qu’est-ce qu’un cadriciel ?
Un cadriciel est un ensemble cohérent de composantes logicielles. Celui-ci permet d’abstraire le niveau le plus technique du codage et d’ainsi multiplier la productivité des développeurs Web.

Deux types de cadriciel
Il existe en fait deux types de cadriciel :

  • les cadriciels back-end et
  • les cadriciels d’interface.

Source et complément d’informations :



 The best responsive CSS frameworks according to 41 developers

Source et complément d’informations :

...
What is the best responsive CSS framework or grid system ?

Nowadays, there are a lot of grid systems and CSS frameworks that you can use freely to build your responsive website. My first thought was to collect them all, and create a big list containing all of them. That however wouldn’t do you any good because you still wouldn’t know which one is good and which isn’t. Therefor I’ve asked 41 web-developers what they think is the best responsive CSS framework, and why they picked that framework. I did this by asking the developers the following question :

What is in your opinion the best responsive CSS framework ?

The Results : The 5 best CSS frameworks and grid systems
Based on the insights of 41 developers :

  1. Foundation 26% votes
  2. Bootstrap 26% votes
  3. BassCss 7% votes
  4. Tachyons 7% votes
  5. Flexbox 7% votes

...

Source et complément d’informations :


 Responsive CSS Framework Comparison

Comparaison de Bootstrap 4.0.0-alpha
Foundation 6 New
Skeleton 2.0.1

Source et complément d’informations :


 Best CSS Frameworks - Bootstrap vs Foundation vs Skeleton ?

Source et complément d’informations :


 LES FRAMEWORKS CSS ou comment se passer de bootstrap

Trois catégories de frameworks css

La quantité impressionnante de frameworks aujourd’hui disponibles sur la toile étant, j’ai décidé de vous présenter une sélection personnelle répartie en 3 catégories :

  1. Les concurrents directs à bootstrap (LES BOOTSTRAP KILLER)
  2. Les “material design” (LES GOOGLE STYLE)
  3. Les minimalistes (LES MINIMALISTES)

...

Source et complément d’informations :



 Design plat

Le Material design de Google est un exemple de design plat.

Le design plat ou flat design est un style de design d’interface graphique caractérisé par son minimalisme. Il se base sur l’emploi de formes simples, d’aplats de couleurs vives et de jeux de typographie.

Ce style s’inspire notamment du style typographique international.

Il peut présenter plusieurs atouts :

  • Il facilite la conception d’interfaces s’adaptant à la surface d’affichage (sites Web adaptatifs).
  • Son usage d’aplats de couleurs permet de meilleurs taux de compression.
  • Il se prête bien aux images vectorielles, qui rejoignent ces avantages (changement de taille sans perte de qualité + légèreté des fichiers).

Source et complément d’informations :


 Flat Design – What’s it ?

Le Flat Design se résume à un sous courant du minimalisme qui suit plusieurs règles.
Le Flat Design (ou en français design plat)

  • Le design du site est constitué uniquement d’aplats de couleurs ;
  • Les formes du design (boutons, icônes…) sont constituées de formes géométriques ;
  • Les polices du site doivent également être adaptées, il faut privilégier les « sans-sérifs » ;
  • Dans ce type de design, on peut facilement utiliser un minimum de 6 couleurs différentes contrairement à 3 dans un design classique ;
  • Les couleurs doivent être vives (utiliser le bleu, violet, jaune, vert,orange…) ;
  • Pour les puristes, le design ne doit pas contenir d’ombre portée ou de texture.

Source et complément d’informations :



 Material design

Le Material Design est un ensemble de règles de design proposées par Google et qui s’appliquent à l’interface graphique des logiciels et applications. Il est utilisé notamment à partir de la version 5.0 du système d’exploitation Android.

Google a présenté le Material Design pour la première fois lors de la conférence Google I/O, le 25 juin 2014. En misant sur les motifs « carte », déjà utilisés dans Google Now, ces règles de design mettent l’accent sur une utilisation accrue des mises en page basées sur une grille, des animations et des transitions, des effets de profondeur tels l’éclairage et les ombres. Selon Google ce nouveau langage de design est basé sur le papier et l’encre.

Le designer Matías Duarte explique que « contrairement au vrai papier, notre matériau digital peut s’étirer et se modifier de manière intelligente. Le matériau contextuel a une surface physique et des bords. Les superpositions et les ombres donnent des informations sur ce que vous pouvez toucher ».

Ce design d’interface utilisateur succède au design Holo utilisé par Android de la version 4.0 à la version 4.4.

Source et complément d’informations :


 Material Design : Le Web Design selon Google

Material Design est un terme pensé et expliqué par le géant Google, lors de sa conférence Google I/O du 25 juin 2014. Mais de quoi s’agit ’il exactement ?

Qu’est ce que le Material design ?

Le Material Design est un ensemble de règles s’appliquant à l’interface graphique des logiciels et des applications. Il est notamment utilisé dans la version 5,0 du système d’exploitation Android.

Ce nouveau langage de design est, d’après Google, basé sur le papier et l’encre. Sources : Wikipedia

Source et complément d’informations :


 Pour en savoir plus sur le Material Design


 Site web adaptatif

Un site web adaptatif (anglais RWD pour responsive web design, conception de sites web adaptatifs selon l’OQLF) est un site web dont la conception vise, grâce à différents principes et techniques, à offrir une expérience de consultation confortable même pour des supports différents. L’utilisateur peut ainsi consulter le même site web à travers une large gamme d’appareils (moniteurs d’ordinateur, smartphones, tablettes, TV, etc.) avec le même confort visuel et sans avoir recours au défilement horizontal ou au zoom avant/arrière sur les appareils tactiles notamment, manipulations qui peuvent parfois dégrader l’expérience utilisateur, tant en lecture qu’en navigation.

Source et complément d’informations :



 Sass (langage)

Sass (Syntactically Awesome Stylesheets) est un langage de génération dynamique de feuilles de style initialement développé par Hampton Catlin et Nathalie Weizenbaum.

Sass est un métalangage de feuilles de style en cascade (CSS). C’est un langage de script qui est interprété en CSS. SassScript est le langage de script lui-même. Deux syntaxes existent. La syntaxe originale, nommée « syntaxe indentée », est proche de Haml. La nouvelle syntaxe se nomme « SCSS ». Elle a un formalisme proche de CSS.

Sass peut être étoffé avec Compass (pratique pour les préfixes des différents navigateurs).

Source et complément d’informations :

  • CSS with superpowers
    Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
    http://sass-lang.com/

 Less (langage)

LESS est un langage dynamique de génération de feuilles de style conçu par Alexis Sellier. Il est influencé par Sass et a influencé « SCSS » (la syntaxe plus récente de Sass) : la syntaxe de LESS est plus proche de CSS1 et un code CSS est aussi un code LESS valide qui a la même sémantique.

LESS ajoute à CSS les mécanismes suivants : variables, imbrication, mixins, opérateurs et fonctions.

LESS est implémenté en open source. Sa première version a été écrite en Ruby. Dans les versions ultérieures, Ruby a été remplacé par Javascript. Une particularité de LESS par rapport aux autres préprocesseurs CSS est qu’il peut être compilé à la volée, soit lors du rendu par le navigateur, soit côté serveur. Il peut également être compilé à l’avance en un simple fichier CSS.

Source et complément d’informations :