Bootstrap

C’est quoi Bootstrap ?

Bootstrap

Bootstrap c’est la petite languette qui permet d’enfiler la botte, en informatique c’est une petite application qui permet ou qui facilite le lancement d’une autre.

Alors Bootstrap c’est un peu le programme qui vous mettra le pied à l’étrier pour réaliser un plus gros projet HTLM5/CSS/JS

Concrétement Bootstrap c’est une boite à outils CSS & Javascript complète permettant de mettre en place très simplement des menus et des widgets qui donneront à votre site de l’attractivité et de l’efficacité. Il s’agit du Framework développé par Twitter publié sous licence libre Apache.
Basé sur JQuery qui fera bientôt l’objet d’un article.

Get started

  1. Tout d’abord rendez-vous sur le site http://twitter.github.com/bootstrap/ on y trouve les archives et de nombreux exemples clairs et explicites
  2. Télécharger Bootstrap
  3. Dans votre page HTML il suffit d’inclure le CSS et les JS

    Le CSS dans le head

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

    Les fichiers JS en fin de body.

    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="lecheminvers/js/bootstrap.min.js"></script>

Un petit aperçu

Menu contextuel : toggeable

<div class="well sidebar-nav span2">
    <ul class="nav nav-list nav-stacked">
     <li class="nav-header">Titre1 </li>
     <li ><a href="#">Choix 1</a></li>
     <li><a href="#">Choix 2</a></li>
     <li class="divider"></li>
     <li class="nav-header">Titre 2</li>
     <li><a href="#">Choix 1</a></li>
    </ul>
</div>

Breadcrumb

<ul class="breadcrumb">
  <li><i class="icon-home"></i><a href="http://www.isnlab.fr">Home</a> <span class="divider">></span></li>
  <li><a href="http://www.isnlab.fr/category/outils/">Outils pour l'ISN</a> <span class="divider">></span></li>
  <li class="active">Découvrir Twitter Bootstrap</li>
</ul>

Accordéon

  • Seconde
    • Première L
    • Première ES
    • Première S
    • Terminale L
    • Terminale ES
    • Terminale S
    tux-school

    tux-schoolArticle en cours de réalisation …

     

    Cet expérience remonte à l’année scolaire 2009/2010, j’ai installé et intégrer au réseau scolaire elorraine une vingtaine de machines sous Linux Ubuntu 10.10. Le but était de proposer aux élèves un environnent de travail complet intégrant leurs homes issue de l’active directory et de permettre l’indetification via le LDAP.

    Les packages nécessaires

    samba smbclient libpam-krb5 winbind smbfs libpam-mount ntpdate

    1 Paramétrer les interfaces réseau

    Cela se fait dans le fichier  /etc/network/interfaces exemple pour une carte ethernet

    2 Configurer les noms d’hôtes

     

    Pour configurer le réseau , il faut attribuer des noms d’hôtes à chacune des adresses IP. Cela se fait dans le fichier /etc/hosts

    3 Synchronisation de l’heure

    sudo ntpdate nom_serveur_ntp

    4 Configurer et tester Kerberos

    « Kerberos est un protocole d’authentification réseau qui repose sur un mécanisme de clés secrètes (chiffrement symétrique) et l’utilisation de tickets, et non de mots de passe en clair, évitant ainsi le risque d’interception frauduleuse des mots de passe des utilisateurs.  » dixit wikipedia.

    NB : Pour intégrer une machine au domaine, il faut faire partie du groupe administrateur !

    C’est Kerberos qui va permettre de nous identifier, il faut le configurer . Cela se fait dans le fichier  /etc/krb5.conf 

    Tester Kerberos :

    sudo kinit  nom_user

    sudo klist

    5 Joindre le domaine

    Il faut configurer  /etc/samba/smb.conf  puis  redemarrer samba  sudo  /etc/init.d/samba restart

    puis :

    sudo net join -U Admin -S nom_active_directory

    Test

    sudo net ads testjoin

    Redemarrer winbind

    sudo /etc/init.d/winbind restart

    6 authentification

    /etc/nsswitch.conf

    7 Test

    sudo getent passwd

    sudo getent group

    8 Montage des disques réseau avec PAM

    /etc/pam.d/common-account common-auth common-session sudo gdm gdm-autologin gnomescreensaver

    Configurer les montages pam-mount  /etc/security/pam-mount.conf.xml

    9 Autorisations local group (montage cle usb etc …)

    /etc/security/group.conf

    doublerangev_1
    23 février 2013

    Projet : Virtual Guitar Hero

    binary-worldL’idée de base des élèves est de réaliser une guitare ou un clavier virtuel, de générer les sons soit à la souris soit au clavier.

    Après s’être documentés, ils ont dégagé plusieurs pistes et différentes technologies :

    • Flash et Actionscript :
      Actionscript est un langage Opensource mais le logiciel Flash est un logiciel propriétaire d’Adobe dont nous ne possédons pas de licence.
    • Python avec Tkinter d’après un tuto de l’excellent  siteduzero
      from Tkinter import *
      # création d'une instance de la classe TK, que l'on affecte à l'objet "root"
      root = Tk()
      # Quelques exemples de touches
      root.bind("<UP>", maFonction) # Flèche haut
      root.bind("<DOWN>", maFonction2) # Bas
      root.bind("<LEFT>", maFonction3) # Gauche
      root.bind("<RIGHT>", maFonction4) # Droite>
    • HTLM5 et javascript : l’avantage avec HTML5 est que le navigateur va gérer l’interface graphique et les évènements Clavier et Souris. De plus il permet une version en ligne, ce qui n’est a priori pas le cas avec python.

    Le xylophone HTMl5 & Javascript

    Dans une page HTML :
    1) On charge les différents sons avec la balise audio HTML5. On donne un identifiant à chacun de ces sons :

    <audio id="son1" preload="auto" >
    <source src="http://www.isnlab.fr/wp-content/uploads/2013/02/xylo_01.mp3" type="audio/mp3" />
    <source src="http://www.isnlab.fr/wp-content/uploads/2013/02/xylo_01.ogg" type="audio/ogg" />
    </audio>

    2) On affiche une image et on déclenche une fonction (javascript) au survol de l’image onmouseover

    <img onmouseover="click1(); return false" alt="" src="images/touche1.png" />

    3) Dans la partie javascript, déclaration et récupération des sons

    var audio1 = document.getElementById("son1");
    //la fonction click1 déclenche le son
    function click1() {
          audio1.play();
    }

    4) Évènement clavier

    On récupère les évènements clavier avec la commande :

    window.document.onkeydown = checkKey;

    Puis lorsque la touche A code ASCII 65  est préssée on déclenche la fonction click1()

    function checkKey(e) {
      if (e.keyCode == 65) click1() ;
    }

    Pour Aller plus loin

    5) BUZZ une Bibliothèque JS dédiée au son

    buzz

    http://buzz.jaysalvat.com/

    Connexion en wifi (client serveur)
    21 février 2013

    Projet : AR.Drone open API

    image009L’ARdrone est un hélicoptère autonome que l’on peut diriger avec une tablette ou d’un smartphone à l’aide d’application iOS et  android.

    À côté de ça il existe plusieurs projets libres permettant d’accéder au drone.

    Après avoir téléchargé et décompressé l’archive ARDrone_SDK_2_0_1.tar.gz sur la page du https://projects.ardrone.org/

    pour compiler les sources, il faut :

    • éditer le fichier ARDroneLib/Soft/Build/custom.makefile avant de compiler.
      il faut modifier la ligne 17 et préciser l’ OS en passant de no à yes

       USE_LINUX = yes
    • un script très pratique qui teste les dépendances :
      ARDrone_SDK_Versionxxxxx/ARDroneLib/Soft/Build/check_dependencies.sh
    • ensuite on exécute ./ardrone_navigation dans le répertoire
      /Examples/Linux/Build/Release/
    • puis on peut piloter son ARDrone à l’aide d’une manette de PS2

     

    Lecture de Trames Réseau :

    En utilisant Wireshark on peut étudier les requêtes clients serveur entre le drone et l’ordinateur qui le pilote.

    This is a file from the Wikimedia Commons.Capture d

    Capture d’écran de Wireshark 1.0 on ubuntu

    Programmation  en Python à l’aide de la bibliothèque python-ardrone

    En fait ce drone est aussi un robot qui peut être programmé pour réaliser automatiquement des tâches préprogrammées. Le drone reçoit des ordres via wifi sous forme de commandes AT  comme on a pu l’analyser grâce aux lectures des trames avec Wireshark. La bibliothèque python-ardrone met à disposition du développeur des méthodes  qui déclenche les commandes AT correspondantes.

    À télécharger ici : https://github.com/venthur/python-ardrone

    On se connecte au drone en wifi. Puis l’utilisation de la bibliothèque est très simple voici un exemple :

    #!/usr/bin/env python
    import time, libardrone
    
    #declaration de l'objet drone
    drone = libardrone.ARDrone()
    
    # decollage 
    drone.takeoff()
    time.sleep(5)
    
    #on avance droit devant pendant 2 secondes
    drone.speed = 0.2
    drone.move_forward()
    time.sleep(2)
    
    #on tourne à gauche pendant 10 secondes
    drone.turn_left()
    time.sleep(10)
    
    #puis on avance tout droit pendant 2 secondes
    drone.move_forward()
    time.sleep(2)
    
    # pour finir on attérit
    drone.land()

    Voilà ce que cela donne en vidéo :