Semantic-UI.js

Semantic-UI.js

TP : Page de recherche d’amis ( IHM )

Nicolas Choquet.

Sommaire

  • Introduction : Présentation de Semantic-ui.js
  • Objectifs du framework
  • Caractéristiques
  • Installation
  • TP : IHM d’une page de recherche d’amis d’un réseau social

 

Introduction :

Présentation de Semantic-ui.js

 

Semantic-ui.js est un framework CSS du même type que BootStrap ou Materialize.

Il met as disposition un grand nombre de classes html qui vont donner accès à des couleurs, animations, formes, et autres sans avoir à toucher au CSS et au JavaScript.

 

Objectif

Selon le site Web de Semantic-ui, l'objectif du framework est de permettre aux concepteurs et aux développeurs de « créer une langue pour le partage de l'interface utilisateur » en tirant parti d'un langage sémantique, descriptif pour ses classes et ses conventions de nommage. Au lieu d'utiliser des abréviations, comme d'autres framework font, il utilise de vrais mots d'une manière plus proche de l'anglais ordinaire.

 

Caractéristiques

 

  • Un élément UI est un élément de base. Il peut apparaître seul ou en groupes homogènes. Par exemple, un bouton peut être indépendant ou mis dans un groupe de boutons. 

  • Une collection UI est un groupe de différents types d'éléments qui sont interdépendants. Par exemple, un formulaire Web peut avoir des boutons, des entrées, des cases à cocher, des icônes, et ainsi de suite. 

  • Une View UI représente une pièce commune du contenu du site. Par exemple, une section d'alimentation ou commentaires. 

  • Un module UI est un composant avec des fonctionnalités JavaScript interactives. Les exemples incluent un accordéon, un gradateur, modal, et ainsi de suite. 

  • Un Comportement UI est un composant qui ne peut pas exister de façon indépendante, mais est utilisé pour injecter la fonctionnalité dans d' autres composants. Par exemple, le comportement de validation des formulaires fournissent la fonctionnalité de validation pour le composant formulaire. 

 

Installation

 

Pour installer Semantic-ui.js il y a différentes manières :

– avec npm :

          curl --silent --location https://deb.nodesource.com/setup_6.x | sudo bash - sudo apt-        get install --yes nodejs

          npm install -g gulp

          npm install semantic-ui --save

          cd semantic/

          gulp build

– avec Git :

          git clone https://github.com/Semantic-Org/Semantic-UI.git semantic

– avec le Zip :

          Télécharger ici

– avec les CDN :

          ajouter ces lignes de code dans le <head></head> de votre page HTML :

          <script src="https://semantic-ui.com/introduction/dist/semantic.min.js"></script>

          <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-                hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="                 crossorigin="anonymous"></script>

          <link rel="stylesheet" type="text/css" class="ui" href="https://semantic-ui.com/introduction/dist/semantic.min.css">

 

TP :

IHM d’une page de recherche d’amis d’un réseau social

 

Capture d'écran du résultat

capture d'écran du résultat avec la sidebar

 

Dans ce TP j’utiliserais les composants suivants :

  • Icon
  • Sidebar
  • Menu
  • Button
  • Gride
  • Header

Dans un premier temps, nous allons commencer par créer le squelette de la page HTML. Pour cela, nous allons créer la page index.html puis y mettre le code suivant :

 

<!DOCTYPE html>

<html lang="fr">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

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

<title>Contribution technique - Semantic-ui</title>

<link rel="stylesheet" type="text/css" href="Semantic-UI/dist/semantic.css">

<link rel="stylesheet" type="text/css" href="css/Fonts.css">

<link rel="stylesheet" type="text/css" href="css/bg-colors.css">

<link rel="stylesheet" type="text/css" href="css/text-aligns.css">

<link rel="stylesheet" type="text/css" href="css/elements.css">

<link rel="stylesheet" type="text/css" href="css/alphabet_letters.css">

<script src="https://code.jquery.com/jquery-3.2.1.js"

integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="

crossorigin="anonymous"></script>

<script type="application/javascript" src="Semantic-UI/dist/semantic.js"></script>

<script type="application/javascript" src="js/jquery_plugins/add_friend_button.js"></script>

<script type="application/javascript" src="js/jquery_plugins/count_found_friends_tag.js"></script>

</head>

<body>

</body>

</html>

 

Créer ensuite un répertoire ‘css’ et un répertoire ‘js/jquery_plugins’.

Maintenant que nous avons créer le squelette, nous allons pouvoir attaquer le framework.

Dans un premier temps, nous allons créer la sidebar dans la balise <body></body>.

insérez le code suivant :

<div class="ui left vertical inverted sidebar labeled icon menu">

<a class="item">

<i class="facebook f icon"></i>

Facebook

</a>

<a class="item">

<i class="twitter icon"></i>

Twitter

</a>

<a class="item">

<i class="user icon"></i>

Mon profil

</a>

</div>

<div class=”pusher”></div>

puis dans la balise <head></head> à la suite insérez une balise <script></script> puis insérez y le code suivant :

 

$(document).ready(function () {

$('.content.icon').on('click', function () {

$('.ui.labeled.icon.sidebar').sidebar('toggle');

});

});

ce qui vas activer la sidebar au clique sur un bouton sandwich qui n’existe pas encore.

insérez ensuite le code suivant dans la balise <div class=”pusher”></div> :

 

<div class="ui top attached menu">

<div class="launch icon item">

<i class="content icon"></i>

</div>

<div class="right menu">

<div class="ui right aligned category search item">

<div class="ui transparent icon input">

<input class="prompt" type="text" placeholder="Search animals...">

<i class="search link icon"></i>

</div>

<div class="results"></div>

</div>

</div>

</div>

nous allons ensuite créer le header.

pour cela, insérez le code suivant à la suite :

 

<br />

<h2 class="ui center aligned icon header">

<i class="circular users icon"></i>

Amis

</h2>

<hr />

Nous allons ensuite créer notre grille :

 

<div class="ui grid">

<div class="two wide column"></div>

<div class="twelve wide column body">

 <div class="two wide column"></div>

</div>

Nous allons ensuite écrire le code qui composera le corp de la page donc la partie qui affichera les amis et le nombre d’amis trouvés.

insérer le code suivant dans la div avec la classe ‘body’ :


<div class="ui attached segment count-found-friends-tag">

</div>

<h3 class="ui top attached header grid">

<div class="eight wide column">

<i class="circular icon bg-blue letter-j"></i> Jean Dupond

</div>

<div class="eight wide column right-align add-friend" friend-id="1">

</div>

</h3>

<h3 class="ui attached header grid">

<div class="eight wide column">

<i class="circular icon bg-blue letter-j"></i> Jess Tyler

</div>

<div class="eight wide column right-align add-friend" friend-id="2">

</div>

</h3>

<h3 class="ui attached header grid">

<div class="eight wide column">

<i class="circular icon bg-gray letter-n"></i> Nico Titon

</div>

<div class="eight wide column right-align add-friend" friend-id="3">

</div>

</h3>

<h3 class="ui attached header grid">

<div class="eight wide column">

<i class="circular icon bg-purple letter-t"></i> Thomas Tentel

</div>

<div class="eight wide column right-align add-friend" friend-id="4">

</div>

</h3>

<h3 class="ui attached header grid">

<div class="eight wide column">

<i class="circular icon bg-gray letter-n"></i> Nicolas Prouesse

</div>

<div class="eight wide column right-align add-friend" friend-id="5">

</div>

</h3>

<h3 class="ui attached header grid">

<div class="eight wide column">

<i class="circular icon bg-skyblue letter-z"></i> Zephire Pretresse

</div>

<div class="eight wide column right-align add-friend" friend-id="6">

</div>

</h3>

<h3 class="ui attached header grid">

<div class="eight wide column">

<i class="circular icon bg-red letter-q"></i> Quentin Tarantino

</div>

<div class="eight wide column right-align add-friend" friend-id="7">

</div>

</h3>

<h3 class="ui attached header grid">

<div class="eight wide column">

<i class="circular icon bg-orange letter-f"></i> François Tarantino

</div>

<div class="eight wide column right-align add-friend" friend-id="8">

</div>

</h3>

Créer un fichier js/jquery_plugins/add_friend_button.js etjs/jquery_plugins/count_found_friends_tag.js

dans add_friend_button.js ajouter le code suivant :

 

$.fn.add_friend_button = function() {

   $(this).each(function () {

       if($(this).attr('friend-id')) {

           $(this).append('<div class="ui right pointing gray basic label">' +

               'Ajouter' +

               '</div>' +

               '<i class="circular add user icon"></i>');

       }

   });

};

et dans le fichier count_found_friends_tag.js :

 

$.fn.count_found_friend_tag = function() {

   var cmp = 0;

   $('html *').each(function () {

       if($(this).attr('friend-id')) {

           cmp++;

       }

   });
   $(this).each(function () {

       $(this).append('<div class="ui labeled button" tabindex="0">' +

           '<div class="ui grey button">' +

           '<i class="users icon"></i> Amis trouvés\n' +

           '</div>' +

           '<a class="ui basic grey left pointing label">' +

           cmp +

           '</a>' +

           '</div>');

   });

};

 

puis à la suite dans la balise <script></script>, ajouter le code suivant qui va permettre de d’initialiser les  plugins créés au par avant.

$('.add-friend').add_friend_button();

$('.count-found-friends-tag').count_found_friend_tag();

voici le lien vers le zip du projet au complet

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *