was successfully added to your cart.
Category

Informatique

Image de une du tutoriel du plus ou moins

Le jeu du plus ou moins en Python

By | Informatique | No Comments

Vous avez sans doute tous déjà entendu parler du jeu basique en programmation « C’est plus, c’est moins« , et bien aujourd’hui, je vous propose de le développer ensemble.
C’est un jeu basique, que l’on crée lorsque l’on apprend à programmer.

Je vous rappelle les règles :

  • L’ordinateur choisit un nombre entier positif (compris entre 0 et 100 par exemple)
  • Nous devons taper un nombre :
    • Si le nombre tapé est plus grand que le nombre tiré par l’ordinateur, le message « C’est moins » apparaît à l’écran
    • Si le nombre tapé est plus grand que le nombre tiré par l’ordinateur, le message « C’est plus » apparaît à l’écran
    • Si le nombre tapé est égal au nombre tiré par l’ordinateur, un message de félicitation apparaît à l’écran

Après avoir pris connaissance des règles, passons à la partir programmation.
Grace aux règles énoncées si dessus, vous devriez commencer à voir quel type de programme nous allons devoir faire. Nous allons utiliser la boucle « while », ainsi que les conditions.

Tout d’abord, vous aurez besoin d’importer un module pour que l’ordinateur tire aléatoirement un nombre entier.
Pour cela, il suffit d’écrire :

1
import random as rd

Ensuite, nous devons déclarer une variable afin que l’ordinateur tire un nombre au hasard.

1
nombreTire = rd.randint(0, 100)  #La fonction "randint" de la bibliothèque « random » tire un nombre entier

Initialisons une variable qui prendra comme argument le nombre que l’on tapera sur le clavier.

1
nombreTape = 0

Maintenant, il suffit de créer la boucle afin de tester les conditions.

1
2
3
4
5
6
7
8
9
10
11
while nombreTape != nombreTire : 
      print("Tapez un nombre entier :")
      nombreTape = int(input())
      if nombreTape > nombreTire :
            print("c'est moins\n\n")
 
      elif nombreTape < nombreTire:
            print("c'est plus\n\n")
 
      else :
            print("c'est gagné")

 

Capture d'écran du script plus ou moins

Capture du script du jeu plus ou moins sur Python IDLE

 

Résultat du jeu plus ou moins

Capture d’écran de la console Python exécutant le script du plus ou moins

 

Après enregistrement et lancement du jeu, vous devriez avoir une fenêtre comme celle affichée.

Bon jeu.

NB : la balise « \t » permet de créer une tabulation La balise « \n » permet de créer un saut de ligne.
La dernière ligne de code « os.system(« pause ») » permet de stopper le programme et fermer la fenêtre. Elle n’est pas obligatoire. Sans ce bout de code, votre programme se fermera aussi, mais vous noterez une différence. (A vous d’en faire l’expérience).

Gregoire A.

Image de une du tutoriel de connexion SSH sur mac

Connexion SSH sur Mac OS

By | Informatique | No Comments

Bonjour,
Depuis le début, sur notre site, vous pouvez trouver des tutoriels sur l’utilisation des GPIO du raspberry, de capteurs spécifiques pour l’Arduino, etc… Mais nous n’avons jamais vraiment pris la peine de commencer par le début, en présentant simplement la manière de se connecter en ssh sur un ordinateur Mac ou linux afin de prendre le contrôle de votre Raspberry Pi à distance. Sur Windows, nous avons Putty qui nous permet de gérer simplement les connexions ssh. Pour Mac et Linux, l’opération est tout aussi simple mais elle nécessite de connaitre quelques commandes de console pour la mener à bien. Voici donc la marche à suivre.

Pour se connecter en ssh via Mac ou Linux, ouvrez l’application « Terminal » et entrez-y la commande suivante :

1
ssh pi@IpDuRaspberry

si vous vous connectez avec l’utilisateur « pi ».

Si vous avez déjà configuré le profil « root », vous pouvez vous y connecter avec la commande suivante :

1
ssh root@IpDuRaspberry

(Pour activer le profil « root », rendez-vous dans le tutoriel suivant : Mise en place du profil root.)

Vous avez alors la fenêtre suivante. Il faut accepter en entrant « yes », puis tapez sur « Entrée ».

Puis entrez le mot de passe requis.

Demande du mot de passe pour la connexion en ssh

Demande du terminal mac du mot de passe ssh de connexion au Raspberry

Vous êtes à présent connecté à votre raspberry.

Résultat de la connexion en ssh

Résultat obtenu sur le terminal mac une fois que la connexion en ssh est établie

Lors de la prochaine connexion un message d’erreur vous sera peut être affiché. C’est un problème d’identification.

Pour résoudre cela, tapez la commande suivante :

1
ls ~/.ssh

puis tapez la commande afin de supprimer les clés déjà existantes

1
ssh-keygen -R IpDuRaspberry

Reconnectez vous avec la commande :

1
ssh root@IpDuRaspberry

 

Gregoire A.

Illustration du premier tutoriel C#

[Tuto 1]Découvrez le C# et la création d’apps Windows

By | Informatique | 2 Comments
    • I. Introduction

      Cela fait un petit bout de temps que l’idée mûrit dans ma tête. Etant fervent utilisateur de Windows, possédant un téléphone sous Windows Phone et voyant l’arrivée de Windows 10 avec les applications universelles pour les versions de Windows Bureau, Tablette et Phone comme une opportunité pour développer et répandre les applications, je me suis lancé dans l’apprentissage du langage C# prononcé « Cé-charpe ».
      Cela permettra de continuer le projet SimpleDomo sur cette plateforme.

 

    • II. Quel logiciel pour développer ?

      Afin de développer en C# il vous faudra un éditeur de code ainsi que d’un compilateur.
      Je vous conseille d’utiliser, à l’heure actuelle Visual Studio Express 2013 ou Visual Studio Community 2013.
      Vous pouvez dès à présent télécharger Visual Studio Community 2015 ICI et l’installer.
      Une fois installé, vous pouvez créer un nouveau projet en cliquant sur « File » puis sur « new » et « new project ». Une fenêtre comme suit va s’ouvrir:

      Fenetre Création de projet Visual Studio 2015

      Capture d’écran de la fenêtre de création de projet sous visual studio 2015 (community)

      Nous allons dans un premier temps apprendre à développer en C# à l’aide d’application console. Grâce à ses applications vous allez acquérir les bases nécessaires pour la réalisation de vos futures applications.
      Sélectionnez « Console Application » ( 3 ) puis nommez votre projet au ( 4 ).

 

    • III. Les bases

      Comme je l’ai expliqué précédemment, nous allons découvrir le C# à travers le programme console.
      A quoi ressemble une console ? En voici un bref aperçu :

      Console Windows

      Aperçu de la console Windows lancée via Visual Studio 2015 (community)

      Remarque: Vous pouvez commenter vos lignes de codes en faisant « // » suivi de votre commentaire sur une ligne de code, ou alors vous pouvez commenter un bloc de code en suivant la syntaxe suivante

      1
      2
      3
      4
      
      /* Bonjour
      * je commente
      * sur plusieurs lignes
      */
      Capture d'écran des commentaires en C#

      Capture d’écran d’un script d’exemple contenant des commentaires en C# sous Visual Studio 2015 (community)

 

    • 1. Nos premières lignes de code

      En C# comme dans d’autres langages, toutes les instructions de terminent par un point-virgule « ; ». Sans ce point-virgule, le programme ne se compilera pas.
      Prenez donc le réflexe de toujours mettre un point-virgule après vos instructions.
      Pour ajouter du texte sur la console, il suffit d’écrire l’instruction :

      1
      
      Console.WriteLine(« Hello World ! »);

       

      Premier programme C# executé

      Aperçu du premier programme créé C# après exécution via Visual Studio 2015 (community)

      Vous pouvez remarquer que j’ai ajouté l’instruction :

      1
      
      Console.ReadLine();

       

      A la ligne 14 afin de laisser la console ouverte après exécution. En effet, si vous ne mettez pas cette instruction vous n’aurez le temps de voir votre message car le temps de compilation est dans ce cas de l’ordre de quelques millisecondes.

 

    • 2. Les variables

      Oui, le C#, comme tous les langages de programmations possèdent des variables susceptibles de sauvegarder des données. Ce sont en quelque sorte un « espace de stockage » qui peut contenir des nombres, des dates, des chaînes de caractères, des tableaux…
      Il existe pour cela différents types de variables. Je vous résume les plus utilisées dans le tableau ci-dessous.

      Type Description
      byte Entier de 0 à 255
      short Entier de -32768 à 32767
      int Entier de -2147483648 à 2147483647
      long Entier de -9223372036854775808 à 9223372036854775807
      float Nombre simple, précision de -3,402823e38 à 3,402823e38
      double Nombre simple, précision de -1,79769313486232e308 à 1,79769313486232e308
      decimal Nombre décimal
      char Représente un caractère
      string Représente une chaine de caractère
      bool Représente une valeur booléenne (true or false)

      Pour définir des variables, il suffit de spécifier le type, puis le nom de la variable puis sa valeur.
      Exemple :

      1
      2
      
      String nom = « Thomas »; //un String se définit toujours avec des guillemets)
      int age = 21;

 

    • 3. Ecrire dans la console

      Nous avons déjà vu un peu plus tôt comment écrire dans la console grâce à l’instruction Console.WriteLine(« Hello World ! ») ;
      Vous pouvez aussi afficher des variables dans la console. Pour cela, il suffit d’écrire par exemple :

      1
      2
      
      String nom = "Thomas";
      Console.WriteLine("Bonjour je m’appelle" + nom);

      Vous allez obtenir le résultat suivant:

      Exemple affichage de texte dans la console

      Exécution du programme d’exemple expliquant la méthode pour afficher du texte dans la console Windows

 

    • 4. Interaction avec la console

      Que serait un programme sans pouvoir interagir avec ?
      Il est temps d’utiliser l’instruction Console.ReadLine() ;
      Pour récupérer les commandes tapées dans la console par votre clavier il faut utiliser la fonction Console.ReadLine().

      1
      
      String age = Console.ReadLine();
      Exécution d'un programme d'exemple d'input console

      Exécution d’un programme permettant la récupération d’un chaine de caractère saisie par l’utilisateur

Voilà pour le tutoriel de programmation du week-end !
Nous espérons que vous prenez autant de plaisir à la lecture de nos articles que celui que nous ressentons lors de leurs écritures.
A bientôt !

Thomas A.

illustration_tutorielJava1

[Tuto 1]Développer vos applis Android en JAVA

By | Informatique | No Comments
  • Introduction

    Depuis longtemps déjà, lorsque j’apprenais à développer des programmes basiques en C++ et JAVA, j’avais pour objectif de concevoir des applications pour les plateformes mobiles. Aujourd’hui, le développement sur ce genre de plateforme s’est simplifié, chaque concepteur d’OS mobile a développé un langage dédié à ses plateformes. Tous, sauf un, Android, développé par Google, qui a décidé d’utiliser le très connu JAVA pour la conception de ses applications.
    En fait, au-delà d’un simple JAVA, c’est un couple de langage que Google a choisi d’intégrer pour la conception d’applications. En effet, tout comme sur Windows Phone, l’utilisation du langage XAML a été privilégiée pour la mise en place des interfaces graphiques. En fait, cela peut paraitre plus complexe mais nous verrons ensemble par la suite à quel point cette structure particulière va nous permettre de simplifier nos scripts.
    Tout au long de ces tutoriels, j’aurai pour objectif de vous amener à la création de votre première application mobile. Pour suivre ce cours, vous n’aurez besoin d’aucune connaissance préliminaire dans un quelconque langage. Je vais vous apprendre toutes les fonctions de bases qui nous seront utiles par la suite. Bien évidemment, des connaissances en JAVA ou plus généralement, sur les structures des langages pourront vous être d’une grande utilité si vous voulez accélérer votre apprentissage.

  • Les Bases

    Avant de rentrer dans le monde de la programmation JAVA, je vous propose de faire le point sur les outils dont nous aurons besoin. Pour écrire nos programmes JAVA, nous aurons besoin d’un éditeur de script, de préférence avec une coloration syntaxique. Ensuite, pour les exécuter, nous aurons besoin d’un compilateur qui se chargera de préparer nos programmes à l’exécution. Nous aurons aussi besoin d’un gestionnaire de projet afin d’éviter d’avoir un grand nombre de fichiers différents à gérer depuis des dossiers différents. Et bien sachez que sur le terrain des environnements de développement, nous n’avons pas à nous plaindre. En effet, il existe un logiciel complet et puissant, Eclipse, qui va nous permettre à la fois d’éditer nos scripts, de les exécuter et de gérer le projet qu’ils constituent. Je vous propose donc de télécharger gratuitement ce logiciel à l’adresse suivante: https://www.eclipse.org/downloads/
    Prenez bien soin de choisir Eclipse IDE for Java Developers. Ensuite, vous pourrez installer cet IDE. Vous aurez besoin de télécharger et installer le JDK java correspondant à la version de java installée sur votre ordinateur. Vous devrez aussi télécharger et installer le JRE correspondant à votre version de Java. Personnellement, tout au long de ce tutoriel, j’utiliserai en majorité Java 7 ( et donc JRE 7 ) puisque c’est la version installée sur mon ordinateur pour des besoins de développement.
    Bien, désormais, tous nos outils sont en place. Vous pouvez dès à présent ouvrir Eclipse et choisir le répertoire par défaut de vos programmes grâce à la boite de dialogue qui s’ouvrira.
    Maintenant, vous devriez vous retrouver face à cette interface qui ne vous est pas forcément encore très familière:

     

    inteface_eclipse

    Interface du logiciel Eclipse IDE Java au démarrage

     

    Il est maintenant temps d’entrer dans le vif du sujet en créant votre premier projet Java. Pour cela, je vous propose de cliquer sur cette icône:

     

    barre_outilsEclipse_newProject

    Icône à sélectionner pour créer un nouveau projet

     

    Plus précisément, je vous propose de cliquer sur la petite flèche noire à côté de cette icône puis de choisir « Java Project »
    Là, vous devriez arriver sur la fenêtre suivante:

     

    fenetre_newProjectEclipse

    Fenêtre de dialogue ouverte lors de la création d’un projet Eclipse

     

    Bien que les options semblent nombreuses, nous n’avons ici qu’à saisir un nom de projet dans « Project Name », un dossier dans lequel notre projet sera créé en modifiant l’entrée « Location » (vous pouvez aussi choisir, comme moi, d’utiliser le répertoire par défaut que vous avez spécifié au lancement d’Eclipse ). Enfin, nous devons spécifier le « Java Runtime Environment » (JRE que vous avez installé précédemment ). Cependant, si toutes les installations se sont correctement déroulées, vous devriez avoir, par défaut, le JRE installée de présélectionné.
    Ensuite, nous pouvons cliquer sur Finish, ce qui aura pour effet de créer notre projet et ainsi d’ajouter un « dossier » sur la colonne gauche de l’interface d’Eclipse.
    Pour ma part, j’ai décidé d’appeler le projet Tutoriel_SimpleDuino.
    Nous allons désormais créer notre premier programme mais avant, il faut que vous sachiez que Java est un langage plutôt orienté objet, c’est-à-dire qu’il facilite l’implémentation de librairie personnelle (en quelque sorte). Ainsi, notre projet créé ne représente qu’un dossier dans lequel seront stockés nos scripts mais nous allons devoir créer une sorte de « librairie par défaut », un « package » en langage Java. Pour cela, nous pouvons dérouler le dossier de notre projet dans la colonne de gauche d’Eclipse puis effectuer un clic droit sur le dossier « src ». Nous sélectionnons ensuite New puis Package. Finalement, nous nous retrouvons face à la fenêtre suivante:

     

    fenetre_creationPackageEclipse

    Fenêtre de dialogue ouverte lors de la création d’un Package sous Eclipse

     

    Encore ici, nous n’avons qu’à spécifier un nom de Package dans le champ « Name ». Pour ma part, je choisis d’entrer le nom « part1 ». En cliquant sur Finish, vous pourrez apprécier la création du Package en déroulant le dossier « src » contenu dans votre projet. Maintenant, nous allons créer notre première classe. Nous allons écrire nos scripts dans une classe pour débuter puisque la programmation orientée objet fera l’objet d’un prochain tutoriel.
    Pour créer cette classe, nous allons effectuer un clic droit sur le Package récemment créé et nous allons choisir New puis Class. Désormais, nous sommes donc face à cette fenêtre:

     

    fenetre_creationClassEclipse

    Fenêtre de dialogue ouverte lors de la création d’une classe dans un Package sous Eclipse

     

    La création d’une classe est légèrement plus complexe. Evidemment, nous allons spécifier un nom pour la classe que nous allons créer. Pour ma part, je choisis « main » puisque ce sera la classe principale de mon Package « part1 ». Après avoir entré le nom de votre nouvelle classe, je vous propose de cocher la case « public static void main(String[] args) ». Cela aura pour effet de « dire » au programme que cette classe sera la principale, celle qu’il faudra exécuter par défaut. En fait, nous aurions pu écrire le code que cette case va générer à la main mais puisque Eclipse nous propose une telle option, autant en profiter. Enfin, après avoir nommé votre nouvelle classe et coché cette case pour spécifier le caractère principale de notre classe, vous pourrez cliquer sur Finish, ce qui aura pour effet d’ajouter la classe dans le Package créé précédemment et de l’ouvrir dans l’éditeur de scripts d’Eclipse.
    Notre première classe est créée, nous allons pouvoir commencer ensemble à développer un programme.
    La manipulation précédente doit avoir donné naissance au script suivant:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    
    package part1;
     
    public class Main {
     
    public static void main(String[] args) {
     
    // TODO Auto-generated method stub
     
    }

    Je vous propose d’ajouter la possibilité d’afficher un texte à notre fichier main. Pour cela, nous allons utiliser la fonction « println() » héritée de « out », elle-même héritée de « System ». En effet, il faudra vous y faire, comme je l’ai écrit précédemment, Java est un langage orienté objet et privilégie donc la mise en place de librairies personnalisées. Vous serez donc régulièrement confrontés à des « fonctions » composées comme le « println() ». En fait, ce système a aussi un avantage: Vous constaterez rapidement que l’héritage des fonctions semble logique et qu’il vous permettra de mieux vous repérer dans votre script.
    Au final, la fonction « println() » est donc la suivante:

    1
    
    System.out.println("Hello World");

    Et nous devrions avoir au final le script suivant:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    
    package part1;
     
    public class Main {
     
    	public static void main(String[] args) {
    		// TODO Auto-generated method stub
    		System.out.println("Hello World");
     
    	}
     
    }

    Désormais, pour l’exécuter, il nous suffit alors d’utiliser cette icône située dans la barre d’outils:

     

    barre_outilsEclipse_Compiler

    Icône à sélectionner pour lancer la compilation de votre premier programme

     

    Nous devrions alors nous retrouver avec le résultat suivant sur notre interface Eclipse. Notez bien l’impression du message dans la console.

     

    PremierProgramme_compilation

    Résultat attendu de votre premier programme JAVA une fois compilé

     

Merci d’avoir suivi cette première partie du tutoriel Java pour le développement d’applications Android, j’espère que celui-ci vous aura plu.
A bientôt pour un prochain tutoriel.

Fabien A.

illustration tutoriel SWIFT

[Tuto 1]Découvrir Swift pour iOS et OS X

By | Informatique | No Comments

I. Introduction

Depuis pas mal de temps je me disais qu’apprendre le langage Swift afin de développer des applications pour ma propre utilisation me serait plus que bénéfique. Je me suis enfin décidé à sauter le pas. Cela permettra également de continuer le projet Simple-Domo en l’adaptant à la plateforme iOS.
Je vais essayer d’être le plus clair possible afin que vous puissiez vous aussi apprendre ce langage. Nous verrons ensemble si nous avons besoin d’apprendre l’Objective-C.

II. Plan

Dans ce tutoriel, je vais aborder les bases du langage Swift. Le plan sera régulièrement mis à jour puisque ce tutoriel sera complété par d’autres articles pour continuer notre apprentissage.
Dans un premier temps, nous allons donc aborder les bases.

III. Les bases

A. Les Variables et Constantes

Qu’est ce qu’une variable ?
Une variable est un paramètre que l’on déclare en général en début de programme. C’est un « espace de stockage » que l’on attribue à un résultat.
Cette variable peut être un Nombre (Simple, Double), mais aussi un Caractère.

Pour déclarer une variable, on utilise l’acronyme « var »

1
2
3
4
5
var exemple1: Int = 13 // exemple1 ne peut être qu’un "entier"
var exemple2 = 1.5
var exemple3 = "jour" // Les chaînes de caractères de déclarent entres guillemets "ceciEstUnCaractère"
var x = 1, y = 4, z = 5 // Permet de déclarer plusieurs variables à la suite
exemple1 = 3 // exemple1 vaut à present 3

Les variables sont susceptibles de changer de valeur au cours du programme contrairement aux constantes que l’on déclare de la manière suivante :

1
2
3
4
5
let constante1 = 12
let constante2 = "lundi"
let x = 5, y = 3 z = constante2 // Permet de déclarer plusieurs variables à la suite
let jours = 7
let nombreJours = "La semaine compte \(jours)" // la commande \(Fonction) permet de récupérer et afficher la valeur de la fonction

B. Impression d’une fonction à l’écran

Le Langage Swift permet une syntaxe relativement facile pour afficher un texte à l’écran.

1
2
let dateAnniversaire = 13
println("L’anniversaire d’Hugo est le \(dateAnniversaire)") // Cette fonction vous permet d’afficher la phrase dans la console

Vous pouvez tester cette fonction en créant le fameux « Hello World ».

Exemple : Afficher « Hello World » à l’écran

1
println("Hello World") // C’est aussi simple que ça

Compilez et regardez la console.

C. Les tableaux

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var tableau1 = ["Lundi", "Mardi", "Mercredi", "Jeudi"]
tableau1.append("Vendredi")
println(tableau1) // [Lundi, Mardi, Mercredi, Jeudi, Vendredi]
 
var tableau2: [String] = [ ]
tableau2.append("4")
println(tableau2)
 
var tableau3: [Int] = [ ]
tableau3.append(4)
 
var tableau4: [Float] = [ ]
tableau4.append(5.4)
 
var semaine = ["Lundi", "Mardi", "Mercredi", "Vendredi"]
semaine.insert("Jeudi", atIndex: 3) // Ajouter "Jeudi" à la quatrième position dans le tableau "semaine"

Attention, dans un tableau, la première valeur correspond à l’indice 0. C’est à dire que pour l’exemple précédent, Lundi correspond à 0, Mardi à 1 et ainsi de suite.

1
2
3
var semaine = ["Lundi", "Mardi", "Mercredi", "Vendredi"]
semaine.insert("Jeudi", atIndex: 3)
semaine.removeAtIndex(2) // Permet de supprimer la valeur à la troisième position. C’est à dire Mercredi

D. Les Conditions

Après avoir appris comment déclarer des fonctions, nous allons apprendre les conditions.
Les conditions en Swift, se font de la même manière que les autres langages que l’on peut rencontrer. On utilise un « if ».

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
let heure = 19
if heure <= 12 {
      println("C’est le matin")
}
else if heure <= 19 {
      println("C’est l’après-midi")
}
else {
      println("C’est la nuit")
}
 
// C’est l’après-midi
 
let jours = 13
switch jours {
      case 1:
            println("Nous sommes le 1")
      case 2...15:
            println("Nous sommes entre le 2 et le 15")
      case 16, 17:
            println("Nous sommes le 16 ou 17 ")
      default:
            println("Nous sommes entre le 17 et la fin du mois")
}
 
// Nous sommes entre le 2 et le 15

E. Les Boucles

Les boucles « for » sont des actions qui se répètent autant de fois qu’on le souhaite.
« for » signifie « pour »

1
2
3
4
5
6
7
8
for var id = 1; id < 4; ++id {
      println("ajouter")
}
 
let couleur = ["Rouge", "Rose", "Vert"]
for k in couleur {
      println("Couleur : \(k)")
}
1
2
3
// Couleur : Rouge
// Couleur : Rose
// Couleur : Vert

Les boucles « while », « tant que » en français, exécutent une action tant que les conditions ne sont pas vérifiées.

1
2
var compteur = 0
while compteur < 10 { println("Je suis a \(compteur)") ++compteur } // tant que compteur est inférieur a 10, on affiche "Je suis a …" F.

F. Les Fonctions

À présent, nous allons apprendre à créer des fonctions.
Procédez de la manière suivante:

1
2
3
func addition(a: Int, b: Int) -> Int {
      return a + b
}

Au final, vous devriez avoir un éditeur xCode (PlayGround) qui ressemble à celui-ci:

ScreenShot Swift 1

Première capture d’écran du résultat attendu sur le tutoriel 1 Swift

ScreenShot Swift 2

Seconde capture d’écran du résultat attendu sur le tutoriel 1 Swift

Merci d’avoir suivi ce tutoriel.
Je vous prépare déjà la suite de ce cours qui vous permettra d’approfondir encore vos connaissances.

Grégoire A.

Image de une du tutoriel HTML/CSS

Tutoriel basique HTML/CSS

By | Informatique | No Comments

Bonjour à tous,

Nouveau tuto aujourd’hui pour vous présenter une partie de programmation dont vous aurez certainement besoin si vous souhaitez par la suite développer un système domotique relativement puissant et surtout agréable à utiliser. En effet, les deux langages que nous allons aborder aujourd’hui : HTML et CSS sont des langages qui vont vous permettre de développer des interfaces web et donc de donner un « visage » à votre application.

Vous allez pouvoir constater que ces langages ne sont pas complexes dans la mesure où ils sont assez « logiques ».

Dans un premier temps, nous allons aborder la programmation HTML, c’est la programmation essentielle à connaitre puisqu’elle va donner une forme à votre page. Le CSS lui sera chargé d’améliorer l’aspect de votre page, c’est-à-dire de styliser votre page.

Nous partons du principe que vous avez déjà téléchargé et installé Notepad++ ou équivalent (Sublime text 2, etc…). Pour tester vos pages html, il suffira de les enregistrer au format .html et de les ouvrir grâce à un navigateur classique : Google Chrome, Firefox, Opera, Internet Explorer

Ainsi, en html, il y a un « format  » de page que vous réutiliserez à chaque fois :

1
2
3
4
5
6
7
8
<!DODCTYPE html>
<html>
   <head>
   </head>
 
   <body>
   </body>
</html>

Nous allons détailler ligne par ligne cette partie essentielle à votre page.

1
2
3
4
5
 <!DOCTYPE html><!--Permet de signaler au navigateur que le code que nous allons écrire est du html. Sans cette ligne, chacun des navigateurs interprétera le script à sa propre manière.>
 <html></html><!--Ici, on dis que le code html sera compris entre ces deux balises et donc qu’il faudra interpréter tout ce que nous écrirons à l’intérieur comme tel.
<head></head><!--On va déclarer l’en-tête de notre page. Ce sont un peu les "options" de notre page, elles ne modifierons pas le contenu de la page.>
 
<body></body><!-- C’est entre ces deux balises que nous allons écrire notre page. La plupart du temps, tout ce que nous modifierons entre ces balises modifiera le contenu et/ou l’aspect du site.>

Ensuite, il y a quelques balises html à connaitre :

1
2
<p></p> <!-- C’est la balise "paragraphe ", c’est elle qui encadrera le plus souvent notre texte à
<h1></h1> <!--de <h1> à <h6>, ces balises sont des balises de titres, sous-titres, sous-sous-titres, etc… -->

Et enfin, la balise qui permet le retour à la ligne :

1
    <br/>

Vous remarquerez la plupart des balises est de la forme <ouverture><fermeture/>, c’est la forme la plus courante des balises html.

Toutes ces balises nous permettrons de constituer le corps de la page, mais en fait, que mettons-nous dans l’en-tête ?

Et bien nous allons définir l’encodage des caractères (les normes de caractères qui permettront par exemple d’afficher les é, è, à, etc…) ainsi que le titre qui s’affichera dans l’onglet du navigateur et enfin, les feuilles de styles (.css) qui s’occuperont de l’apparence de notre site.

Allez, c’est parti ! Codons notre première page :

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
 
<html>
 
<head>
 
</head>
 
<body>
 
<h1>Ma première page web

<p>Voici la première page web que j’ai codé grâce au tutoriel disponible sur <a href= »http://simple-duino.com »>Simple-Duino

</body> </html>

Hein ? Quoi ?! Mais c’est tout moche !

Et bien oui, nous n’avons pas spécifié d’encodage dans notre en-tête donc les caractères spéciaux ne s’affichent pas. Pour l’encodage, je vous conseil la norme utf-8 qui contient la plupart des caractères spéciaux européens.

Ajoutons donc cette ligne :

1
    <meta charset="utf-8" />

dans notre en-tête et profitons-en pour ajouter un nom dans l’onglet du navigateur, toujours dans l’en-tête en ajoutant la balise :

1
Nom de ma page;

Vous remarquerez que j’utilise la balise qui permet de placer des liens sur ma page. En fait, elle utilise une « condition  » : href qui va permettre de spécifier le lien. Ensuite, on place le texte souhaité entre les et notre lien est en place.

Maintenant, vous savez coder votre première page internet mais elle est quand même fade vous ne trouvez pas ? Allez, allons égayer tout ça.

Pour améliorer l’aspect de notre page, nous allons avoir besoin d’aborder la notion de classes. En fait, on peut spécifier des classes à chacune des balises html. On fait cela de manière très simple en ajoutant simplement class= « nom_de_la_classe  » à l’interieur de la balise :

On peut spécifier plusieurs classes en les séparant par un espace.

Bien, vous êtes désormais en mesure d’attribuer des classes à chacun des éléments de votre page. Nous allons donc créer un fichier style.css, l’enregistrer dans le même répertoire que votre première page et lier la page html au style css grâce à la balise suivante : à placer dans l’en-tête de votre page.

En attribuant une classe à chaques élements, on arrive donc au script de page html suivant :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
 
<html>
 
<head>
 
<meta charset="utf-8" />
 
<link rel="stylesheet" href="style.css" />
 
<title>Nom de ma page
 
</head>
 
<body>
 
<h1 class="titre1" >Ma première page web

<p class= »paragraphe1″ >Voici la première page web que j’ai codé grâce au tutoriel disponible sur Simple-Duino

</body> </html>

Maintenant, nous allons aborder les bases du css mais sachez qu’il existe une infinité de possibilité pour styliser votre page. Il existe de très nombreuses balises disponibles, tellement nombreuses que nous ne pouvons pas toutes les présenter.

Tout d’abord, il faut savoir que la structure de notre fichier .css est totalement différente de celle de notre page html. En effet, ici, on utilisera une structure de la forme suivante :

1
2
3
4
5
.class
 
{
 
}

Ou alors

1
2
3
4
5
Balise
 
{
 
}

Nous allons modifier un peu notre page.

Commençons par modifier la police utilisée sur notre site :

1
2
3
4
5
6
7
*
 
{
 
font-family: sans-serif;
 
}

L’étoile nous permet de spécifier que toutes les balises devront adopter cette police de caractères.

Modifions aussi la couleur du texte :

1
color: #333333;

à ajouter entre les deux {} que nous avons mis en place précédemment.

Pour centrer notre texte, utilisons l’instruction suivante :

1
2
3
4
5
6
7
body
 
{
 
text-align :center ;
 
}

Modifions la couleur d’arrière-plan :

1
background-color : #eeeeee ;

à ajouter entre les deux {} du body précédemment défini

Soulignons notre titre :

1
2
3
4
5
6
7
.titre1
 
{
 
text-decoration : underline ;
 
}

Et faisons en sorte que notre lien soit en gras non-souligné :

1
2
3
4
5
6
7
8
9
a
 
{
 
text-decoration: none;
 
font-weight: bold;
 
}

Et qu’il change d’apparence lors du survol :

1
2
3
4
5
6
7
a:hover
 
{
 
opacity:0.7;
 
}

Et voilà ! Votre page commence à avoir un peu plus de style mais son apparence peut encore être améliorée.

apperçu

Vous avez désormais des bases essentielles en programmation html et css. En complément, nous ne pouvons que vous conseiller de visiter l’excellent tutoriel disponible sur le site d’openclassroom, ex-site du zéro réalisé par Mathieu Nebra :

http://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3

Merci d’avoir suivi notre tutoriel et bonne continuation dans vos projets futurs…

A plus !