Design | Undisconnected https://undisconnected.com Reste connecté Tue, 25 Jul 2017 14:17:23 +0000 fr-FR hourly 1 https://wordpress.org/?v=6.9.1 Calculer un pourcentage de différence entre 2 chiffres https://undisconnected.com/calculer-un-pourcentage-de-difference-entre-2-chiffres/ https://undisconnected.com/calculer-un-pourcentage-de-difference-entre-2-chiffres/#comments Sun, 08 May 2016 12:34:16 +0000 https://undisconnected.com/?p=2698 Un peu de mathématiques aujourd’hui. Il arrive souvent d’avoir à calculer un pourcentage d’augmentation ou…

The post Calculer un pourcentage de différence entre 2 chiffres first appeared on Undisconnected.]]> Un peu de mathématiques aujourd’hui. Il arrive souvent d’avoir à calculer un pourcentage d’augmentation ou simple de différence entre 2 chiffres ou 2 montants.

Voici la solution simple pour le faire avec comme exemple le chiffre de base 271 et le 2ème chiffre 462 :

(462 − 271) ÷ 271 × 100 = 70.48

Dans ce cas le 2ème chiffre représente une augmentation de 70.48% par rapport au premier chiffre. La formule à retenir est donc :

(montant2 - montant1) ÷ montant1 × 100 = pourcentage de la variation

Voilà, ce n’était pas bien compliqué au final 🙂

 

The post Calculer un pourcentage de différence entre 2 chiffres first appeared on Undisconnected.]]> https://undisconnected.com/calculer-un-pourcentage-de-difference-entre-2-chiffres/feed/ 1 Créer un diagramme circulaire avec Google Charts https://undisconnected.com/creer-un-diagramme-circulaire-avec-google-charts/ https://undisconnected.com/creer-un-diagramme-circulaire-avec-google-charts/#comments Tue, 24 Feb 2015 05:17:18 +0000 https://undisconnected.com/?p=2527 Grossièrement appelés diagrammes de Normandie « camemberts », les diagrammes circulaires sont parfaits pour résumer un ensemble de données…

The post Créer un diagramme circulaire avec Google Charts first appeared on Undisconnected.]]> Grossièrement appelés diagrammes de Normandie « camemberts », les diagrammes circulaires sont parfaits pour résumer un ensemble de données à une variable. Il est très facile de créer ce type de diagramme grâce à des librairies comme Highchart ou Google Charts. Aujourd’hui, je vais vous montrer comment créer un diagramme circulaire grâce à Google Chart.

 

<!DOCTYPE html>
<html>
<head>
<title>Diagramme circulaire</title>
<meta charset="UTF-8">
</head>
<body>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    // Chart 1
    var data = google.visualization.arrayToDataTable([['OS Mobile', 'Parts de marché'],["Android",71.40],["iOS",14.70],["Windows Phone",10.60],["Blackberry",1.00],["Autres",2.30]]);
    var options = {
      title: 'Parts de marché des OS Mobile en Juin 2014 (France)'
    };
    var chart = new google.visualization.PieChart(document.getElementById('piechart'));
    chart.draw(data, options);
  }
</script>

<div id="piechart" style="width: 100%; height: 500px;">&nbsp;</div>

</body>
</html>

Comme vous le voyez, avec juste ces quelques lignes de code, on peut créer un diagramme circulaire vraiment facilement grâce à Google Charts.

Pratique pour un projet rapide, ou montrer des statistiques à votre boss d’une belle façon.

The post Créer un diagramme circulaire avec Google Charts first appeared on Undisconnected.]]> https://undisconnected.com/creer-un-diagramme-circulaire-avec-google-charts/feed/ 2 Wikiwand, Wikipedia en plus agréable https://undisconnected.com/wikiwand-wikipedia-en-plus-agreable/ https://undisconnected.com/wikiwand-wikipedia-en-plus-agreable/#respond Sun, 12 Oct 2014 00:57:52 +0000 https://undisconnected.com/?p=2474 Vous aimez Wikipedia mais vous trouvez que la lire est désagréable ? Wikiwand vient à…

The post Wikiwand, Wikipedia en plus agréable first appeared on Undisconnected.]]> Vous aimez Wikipedia mais vous trouvez que la lire est désagréable ? Wikiwand vient à votre secours ! Il s’agit d’un concept excellent qui devrait vous faire renouer avec Wikipedia !

Wikiwand est donc un système sous forme d’application (Chrome, Firefox et Safari) qui permet de rediriger les pages Wikipedia que vous consultez et de relooker la page en une belle fiche beaucoup plus agréable à consulter !

Le UI/UX a été vraiment bien pensé et permet à Wikipedia de prendre un nouveau souffle. Wikipedia, devrait intégrer cette belle interface directement ! L’information, bien présenté et agréable à lire permet à mon avis d’avoir envie de lire plus, plus longtemps.

Voici le lien qui explique en détail ce qu’est wikiwand et comment l’installer:

Installer Wikiwand
The post Wikiwand, Wikipedia en plus agréable first appeared on Undisconnected.]]> https://undisconnected.com/wikiwand-wikipedia-en-plus-agreable/feed/ 0 5 thèmes bootstrap pour des sites « one-page » https://undisconnected.com/5-themes-bootstrap-pour-des-sites-one-page/ https://undisconnected.com/5-themes-bootstrap-pour-des-sites-one-page/#respond Mon, 22 Sep 2014 02:01:30 +0000 https://undisconnected.com/?p=2437 Vous n’avez pas dû échapper à la hausse de cette nouvelle tendance qui est de…

The post 5 thèmes bootstrap pour des sites « one-page » first appeared on Undisconnected.]]> Vous n’avez pas dû échapper à la hausse de cette nouvelle tendance qui est de réaliser un site en une seule page (site « one-page »). Bootstrap est un bon choix pour ce type de site web et voici donc une sélection de 5 thèmes qui vous aiderons à construire un site « one-page » avec Bootstrap.

Zerif – Responsive One Page Theme

theme-bootstrap-admin-backend-bracket

Ce thème responsive permet de faire un beau site one-page. Le menu permet de faire un slide sur l’endroit où se trouve le contenu au lieu de recharger la page. Le tout est bien évidemment responsive.

Voir une démo de ce thème | Acheter ce thème sur Themeforest

Graphista | One-Page Creative Portfolio

WB09S4JFK

Ce thème propose de faire un site one-page avec pour but de présenter son portfolio. Si vous devez créer un portfolio pour un client ou pour vous même. Ce thème vous sera d’une grande utilité.

Voir une démo de ce thème | Acheter ce thème sur Themeforest

 TWILLI Air – Minimalist One-Page Theme

WB0196957

Ce thème responsive (adaptatif) est un thème « one-page » minimaliste qui vous permettra d’exprimer ce que vous souhaitez assez facilement. Dans ce thème, les photos sont maître et vous permettrons de présenter les différentes rubriques de votre site. Parfait pour une petite entreprise, un portfolio ou un entrepreneur qui se lance.

 Voir une démo de ce thème | Acheter ce thème sur Themeforest

Ashley – One Page Parallax

WB0R11207

Ce thème permet de mettre en avant les services d’une entreprise. Avec le très bel effet parallax, donnez à votre entreprise un billet directe pour le succès. Avec ce thème, votre entreprise sera moderne et au goût du jour.

 Voir une démo de ce thème | Acheter ce thème sur Themeforest

Interfaz – Responsive One Page Theme

WB0D8R213

Ce thème responsive vous permettra de faire un site créatif où l’image de votre produit ou service sera mis en avant. Simple et efficace ce thème est parfait pour une petite entreprise ou pour un créatif qui veut se mettre en avant.

 Voir une démo de ce thème | Acheter ce thème sur Themeforest

The post 5 thèmes bootstrap pour des sites « one-page » first appeared on Undisconnected.]]> https://undisconnected.com/5-themes-bootstrap-pour-des-sites-one-page/feed/ 0 Flatify – Un thème bootstrap utilisant angular.js https://undisconnected.com/flatify-theme-bootstrap-angular/ https://undisconnected.com/flatify-theme-bootstrap-angular/#respond Fri, 02 May 2014 18:45:27 +0000 https://undisconnected.com/?p=2364 Flatify est un thème intéressant si vous souhaitez faire une app avec Angular.js. Il regroupe…

The post Flatify – Un thème bootstrap utilisant angular.js first appeared on Undisconnected.]]> Flatify est un thème intéressant si vous souhaitez faire une app avec Angular.js. Il regroupe un thème utilisant le framework Bootstrap qui permet un design responsive vraiment réussi. Testez par vous même ce thème en cliquant ici pour en voir les qualités.

Angular.js qui est une librairie développée par Google permet de faire des applications dites « one page ». La navigation se fait donc sans recharger les pages.

L’utilisation de ces 2 librairies (Bootstrap et Angular.js) en fait un thème moderne à la pointe des technologies actuelles. Au-delà de ça, pour 15$ vous avez un thème incroyablement design et qui surf sur la mouvance du flat design.

Acheter ce thème sur Wrapboostrap

slurp

 

 (si vous achetez ce thème en passant par mon lien sachez que je toucherais une petite commission). 

 

The post Flatify – Un thème bootstrap utilisant angular.js first appeared on Undisconnected.]]> https://undisconnected.com/flatify-theme-bootstrap-angular/feed/ 0 Photoshop a été trop loin https://undisconnected.com/photoshop-a-ete-trop-loin/ https://undisconnected.com/photoshop-a-ete-trop-loin/#respond Wed, 12 Mar 2014 23:58:17 +0000 https://undisconnected.com/?p=2279 Retournement de situation, la team GH a hacké l’image d’un top model photoshopée. La surprise…

The post Photoshop a été trop loin first appeared on Undisconnected.]]> Retournement de situation, la team GH a hacké l’image d’un top model photoshopée. La surprise est de taille, on arrive a un résultat assez alléchant 🙂

Bravo à la team GH pour cette vidéo vraiment drôle!

Ça me donne faim tout ça, c’est l’heure de la pizza! … aller à bientôt 🙂

The post Photoshop a été trop loin first appeared on Undisconnected.]]> https://undisconnected.com/photoshop-a-ete-trop-loin/feed/ 0 5 nouveaux thèmes dashboard pour Bootstrap 3 https://undisconnected.com/5-nouveaux-themes-dashboard-pour-bootstrap-3/ https://undisconnected.com/5-nouveaux-themes-dashboard-pour-bootstrap-3/#respond Thu, 06 Mar 2014 04:05:14 +0000 https://undisconnected.com/?p=2141 Plus je découvre ces thèmes et plus je les aime. Voici une petite sélection des…

The post 5 nouveaux thèmes dashboard pour Bootstrap 3 first appeared on Undisconnected.]]> Plus je découvre ces thèmes et plus je les aime. Voici une petite sélection des meilleurs thèmes HTML5 pour Bootstrap 3 dédiés à créer un backend ou une partie admin d’une site. Ces dashboard sont tout simplement magnifiques.

Par principe de transparence, je tiens à vous faire part du fait que si vous achetez un thème via l’un des liens suivant, je touche une petite commission. Cela me permet de continuer à diffuser des articles et tutoriels gratuitement sur ce site.

Bracket – Responsive et rétina

theme-bootstrap-admin-backend-bracket

Ce thème responsive est juste parfait pour un dashboard complet. Le design modern reste sobre et équilibré. On retrouve tous les éléments de UI rêvés comme un set d’icônes, des libraries pour faire des graphiques, chaque éléments HTML est stylé en concordance avec le thème.

Voir une démo de ce thème | Acheter ce thème sur Themeforest

Néon – Thème pour dashboard

theme-bootstrap-neon

Ce thème regroupe plus d’une centaine de page HTML différente pour vous aider à créer des interface d’administration de qualité. Ce thème est très bien construit et possède plusieurs schème de couleur.

Voir une démo de ce thème | Acheter ce thème sur Themeforest

Bucket admin – Thème bootstrap pour un dashboard

bucket-admin-theme-bootsrap-dashboard

Le design flat et moderne de ce thème en fait un candidat de choix pour vos dashboard et thème d’aministration de site web. Il semble aussi idéal pour construire le design d’un intranet de qualité.

Acheter ce thème sur Themeforest

 

Flatlab – Un design dynamique

flatlab-theme-bootstrap

Ce thème dynamique permettra de vous faire remarqué lors de la construction d’un dashboard ou une partie admi d’un site. L’interface responsive est vraiment bien réfléchie et très adaptive à tous types d’appareil.

Voir une démo de ce thème | Acheter ce thème sur Themeforest

Voilà maintenant, à vos éditeur de code ! Et faites-nous de belles créations 🙂 .N’hésitez pas à utiliser les commentaires pour partager votre travail si le coeur vous en dit.

The post 5 nouveaux thèmes dashboard pour Bootstrap 3 first appeared on Undisconnected.]]> https://undisconnected.com/5-nouveaux-themes-dashboard-pour-bootstrap-3/feed/ 0 11 thèmes incroyables pour Bootstrap https://undisconnected.com/12-themes-incroyables-pour-bootstrap/ https://undisconnected.com/12-themes-incroyables-pour-bootstrap/#comments Thu, 18 Jul 2013 14:09:42 +0000 https://undisconnected.com/?p=2034 Vous avez un projet intéressant mais peu de temps à y consacrer? Bootstrap est l’outil…

The post 11 thèmes incroyables pour Bootstrap first appeared on Undisconnected.]]> Vous avez un projet intéressant mais peu de temps à y consacrer? Bootstrap est l’outil qu’il vous faut! Je vous réfère à mon article présentant Bootstrap si vous ne connaissez pas bien l’outil.

Dans cet article, je vais vous présenter 11 thèmes vraiment incroyables et qui vous feront gagner un temps énorme dans vos développements. Ces 11 thèmes sont payants et sachez que si vous achetez un thème via un lien de mon site, je toucherais une petite commission. Ceci étant dit, je souhaite avec cet article vous faire découvrir les possibilités infinies de Bootstrap. L’un des avantages majeurs de Bootstrap est qu’il permet de gérer facilement le mode responsive (l’interface change en fonction de la résolution du navigateur). Ceci permet d’avoir un site facilement consultable sur tablette, mobile et ordinateur.

Thèmes Bootstrap pour les dashboard et backend

Detail AdminWB07061TJ

Ce thème est parfait si vous devez concevoir une application web ou un backend. Bootstrap prend toute son ampleur dans ce genre de thèmes. En plus d’être très deisgn, légé et bien réalisé, ce thème est aussi responsive.

Voir une démo du thème |  Acheter ce thème sur Wrapbootstrap

SimpliQ FlatWB0N1X0T1

Ce thème, très adapté pour une interface d’admin (backend), est une fois de plus très design, sobre et élégant. Ici, un design flat est utilisé. Petit plus, ce thème est prêt pour le retina display et intègre les icône Glyphicons Pro gratuitement (valeur de 59$).

Voir une démo de ce thème | Acheter ce thème sur Wrapbootstrap

Blue MoonWB0375140

Toujours dans la lignée des thèmes pour backend, ce thème est très complet. Avec pas moins de 7 variations de design et  25 plugins jquery intégrés, vous retrouverez dans ce thème tous les outils indispensables (datepicker, editeur WYSIWIG, timepicker, colorpicker, tooltips, popovers, notifications). Ce thème est aussi responsive.

Voir une démo de ce thème | Acheter ce thème Bootstrap sur le site WrapBootstrap

Clean CanvasWB02634G3

Ce très beau thème vous permettra de mettre en place un site vitrine ou un portfolio. Le thème se base sur belles grandes images pour donner un côté sobre et épuré. Il est livré avec un stock d’images différentes et un slideshow de type Parallax.

Voir une démo de ce thème | Acheter ce thème sur le site WrapBootstrap

 

UnifyWB0412697

Ce thème pour Bootstrap pour business ou pour monter un portfolio est livré avec Revolution Slider et le pack Glyphicons Pro (valeur de 59$). Une fois de plus, le thème est responsive.

Voir une démo de ce thème | Acheter ce thème sur le site Wrap Bootstrap

Mywaymyway

Myway est un thème basé sur l’effet Parallax. Le thème est en fait une unique page qui défile vers le bas. Excellent pour présenter un produit ou un service sans lasser le visiteur. Il vient en 2 couleurs : light ou dark.

Voir une démo de ce thème | Acheter ce thème sur ThemeForest

Square vCardportfolio-bootstrap

Ce thème permet de faire un très beau portfolio, un CV ou encore un site personnel. Il est très design et très original dans le mode de navigation. À utiliser donc pour un projet ou l’originalité doit être de mise.

Voir une démo de ce thème | Acheter le site sur le site ThemeForest

Thème pour WordPress construit avec Bootstrap

Yellow Projectbootstrap-theme-themeforest

Ce thème est un thème WordPress qui est construit avec Bootstrap. Il possède plusieurs qualités, dont une très importante : Il est codé en étant axé SEO. Viens avec les fichiers PSD. Couleurs facilement changeables.

Voir une démo de ce thème | Acheter ce thème sur le site ThemeForest

 

Alfietheme-bootstrap-responsive

Le thème Alfie est un thème responsive pour WordPress. Il est possible de monter un blog aussi bien qu’un portfolio. Ce thème est assez orienté business. Ce thème est très fourni en composantes accessibles via des shortcodes.

Voir une démo de ce thème | Acheter ce thème sur le site ThemeForest

Conclusion

Vous aurez remarqué la puissance de Bootstrap à travers ces thèmes. Étant donné les contraintes de budgets et de temps de développement de nos jours, baser son design sur une structure bien fondée est un atout à ne pas négliger.

The post 11 thèmes incroyables pour Bootstrap first appeared on Undisconnected.]]> https://undisconnected.com/12-themes-incroyables-pour-bootstrap/feed/ 2 Créer un backend simplement avec Bootstrap https://undisconnected.com/creer-un-backend-simplement-avec-bootstrap/ https://undisconnected.com/creer-un-backend-simplement-avec-bootstrap/#comments Thu, 16 May 2013 15:18:26 +0000 https://undisconnected.com/?p=2023 Bootstrap est un framework permettant de développer des interfaces graphiques professionelles très simplement et très…

The post Créer un backend simplement avec Bootstrap first appeared on Undisconnected.]]> Bootstrap est un framework permettant de développer des interfaces graphiques professionelles très simplement et très rapidement. Pour preuve du sérieux, le framework est développé et maintenu par Twitter! Je vais vous présenter rapidement dans cet article les différentes composantes du framework.

Les différentes composantes de Bootstrap

Bootstrap se compose de plusieurs éléments aidant la fondation d’un bon design web.

Scafolding

  • Utilisation de HTML5
  • Un « reset » CSS très simple basé sur Normalize.css
  • Un système de grille css (grid system)
  • Un système simple de « layout »
  • Un système pour faire un site « responsive » vraiment très bien fait

Framework CSS

  • Un système de typographique
  • Gestion des styles et « helper » pour les tableau HTML
  • Gestion des éléments de formulaire
  • Des boutons personnalisables (très chics)
  • « helper » pour les images
  • Un kit d’icônes d’actions fournis par Glyphicons

Composants de design 

  • Groupes de boutons
  • « Labels » et badges
  • Fils d’ariane (breadcrumbs)
  • « Alerts box » : Info, succès, échec, attention
  • Barres de progression
  • « Thumbnails »
  • …

Framework Javascript

  • « Modal box » très bien faites et facile à modifier
  • Gestion des transitions
  • Système de « tabs »
  • Système de « tooltips »
  • Alert javascript amélioré
  • Autocompletion pour formulaire
  • Système de « Popover » très bien fait
  • …

Boostrap est hautement « skinable »

Le plus interessant avec Bootstrap, c’est qu’on peut créer des thèmes (« skins ») assez facilement. La cerise sur le gâteau c’est que, à l’instart de WordPress, il existe des thèmes gratuit ou payant développés par une communauté grandissante. VOus en trouverez une bonne quantité sur le site http://wrapbootstrap.com

Conclusion sur Bootstrap

Bootstrap est définitivement un outil à connaître pour tout bon développeur web. Il permet de créer des interfaces très rapidement et très proprement. Je ferais quelques tutoriels dans les prochains articles. 

Ressources pour le framework Bootstrap

The post Créer un backend simplement avec Bootstrap first appeared on Undisconnected.]]> https://undisconnected.com/creer-un-backend-simplement-avec-bootstrap/feed/ 3 Tutoriel : Introduction à la librarie javascript d3.js https://undisconnected.com/tutoriel-introduction-d3-js/ https://undisconnected.com/tutoriel-introduction-d3-js/#comments Mon, 01 Apr 2013 16:05:08 +0000 https://undisconnected.com/?p=1926 Voici le premier d’une longue lignée (je l’espère) de tutoriaux en français portant sur la…

The post Tutoriel : Introduction à la librarie javascript d3.js first appeared on Undisconnected.]]> Voici le premier d’une longue lignée (je l’espère) de tutoriaux en français portant sur la librarie d3.js. Pour en savoir plus sur cette librairie reportez vous à la présentation que j’en ai fait sur ce post. L’objectif de ce premier tutoriel est de faire quelques exemples d’utilisation très simple de la librairie.

A l’instart de Jquery, d3.js est une librarie qui permet de manipuler le DOM. Mais là où d3.js est très efficace est dans la manipulation de SVG.

Manipuler ou créer une div avec d3.js

Ajouter et manipuler un rectangle SVG

Dessiner plusieurs éléments dans un groupe svg

Gérer des données au format JSON et dessiner en fonction de ces données

Dans ce dernier exemple, nous allons construire des nodes qui sont en fait des groupes svg ayant la class « node ». Ensuite, on va dessiner, suivant les données (variable data) un cercle et afficher le nom de ce cercle dans celui -ci.

Le dernier exemple introduit plusieurs nouveaux concepts : selectAll(), data(), et enter().

selectAll()

la methode de selection selectAll permet, comme son nom l’indique de selectionner les éléments définis par le selecteur css passé en argument. selectAll(« p ») va selectionner tous les éléments présents dans le DOM.

data()

La methode data() permet de « binder » (attacher) des données à des éléments sélectionnés par la methode selectAll(). Ces données une fois attachées seront utilisables dans la suite du chainage. Exemple : attr(« fill »,function(d){return d.color});

enter()

Cette fonction va « binder » les données à des éléments et créer les éléments sélectionnés par selectAll(). Si vous n’utilisez pas enter() alors aucun élément ne sera crée. Seul les éléments existants seront utilisés et donc s’il sont inexistant, rien ne s’affichera.

Ressources

The post Tutoriel : Introduction à la librarie javascript d3.js first appeared on Undisconnected.]]> https://undisconnected.com/tutoriel-introduction-d3-js/feed/ 7