background preloader

DesignUX

Facebook Twitter

How to Add Scalable Vector Graphics to Your Web Page. In this series we’ve discussed what SVGs are, why you should consider them and basic vector drawings.

How to Add Scalable Vector Graphics to Your Web Page

At some point, you’ll want to embed your finely-crafted SVG directly into a web page. There are no less than six ways to achieve that goal — but not all methods are created equally. 1. Using an <object> Tag If you intend using any advanced SVG features such as CSS and scripting, the HTML5 <object> tag is your best option: <object type="image/svg+xml" data="image.svg">Your browser does not support SVG</object> Note you can provide fallback text or images within the object block. 2. I’m including <embed> for the purpose of completeness but don’t use it! Here’s the code. 3. Since browsers can render SVG documents in their own right, it’s possible to load images within an iframe: <iframe src="image.svg">Your browser does not support iframes</iframe> This may be a good method if you want to completely separate SVG code and script from your main page. 4.

<! 5. 6. Which Should You Use? OOCSS, ACSS, BEM, SMACSS: what are they? What should I use? – clubmate.fi. The way we write CSS has changed a lot in last few years, and the abbreviation jungle gets deeper and deeper.

OOCSS, ACSS, BEM, SMACSS: what are they? What should I use? – clubmate.fi

Heres a list of links to influential articles and quick summaries of these techniques. update: 2014.01.23 rewrote the Atomic and the BEM sections. I think there have bee happening big things in how we write CSS, for a reason I suppose. The will to make CSS more modular is strong (to make CSS so that it’s easier to control without breaking everything when you change a small thing). Bonnes pratiques en CSS : BEM et OOCSS. Des années durant, j'ai intégré des sites Web et développé des applications JavaScript sans ressentir le besoin d'une méthodologie pour nommer les classes CSS.

Bonnes pratiques en CSS : BEM et OOCSS

Puis, les projets grossissant, le code CSS est devenu douloureux… L'épineux sujet du nommage en CSS est loin d'être fermé. Depuis le début de la décennie, plusieurs auteurs majeurs ont partagé leurs recherches. Ils ont apporté un regard nouveau et sont allés à contrecourant, en rupture avec ce qui faisait jusqu'alors consensus. Je raconte dans cet article mon propre cheminement dans leurs travaux en espérant qu'il sera utile à l'intégrateur Web autant qu'au développeur JavaScript. Sommaire Je me suis d'abord tourné vers OOCSS (Object Oriented CSS), un ensemble de bonnes pratiques initiées par Nicole Sullivan (Stubbornella).

Le concept de OOCSS est de repérer des « objets CSS », c'est-à-dire des « patterns visuels » qui se répètent, et de définir ainsi des classes réutilisables. OOCSS met en avant deux principes : Pouah ! La propreté. MindBEMding – getting your head ’round BEM syntax. One of the questions I get asked most frequently is what do -- and __ mean in your classes?

MindBEMding – getting your head ’round BEM syntax

The answer is thanks to BEM and Nicolas Gallagher… BEM – meaning block, element, modifier – is a front-end naming methodology thought up by the guys at Yandex. It is a smart way of naming your CSS classes to give them more transparency and meaning to other developers. They are far more strict and informative, which makes the BEM naming convention ideal for teams of developers on larger projects that might last a while. Home · stubbornella/oocss Wiki. 10 heuristiques pour une UX optimale de Colombo et Pasch.

Parmi les méthodes d’évaluation en IHM, les méthodes d’inspection consistent en l’inspection de l’interface par un ou plusieurs évaluateurs.

10 heuristiques pour une UX optimale de Colombo et Pasch

Développées dans les 1990’s par Jakob Nielsen en tant que méthodes de « discount usability », les méthodes d’inspection sont décrites comme peu coûteuses, rapides et simple à mettre en œuvre. L’évaluation heuristique est l’une des méthodes d’inspection les plus connues et utilisées depuis plus de 30 ans.