Ce podcast traite de la modification de la signature d’un virus, c’est une technique qui fut beaucoup utilisée, il y a quelques années, lorsque les éditeurs d’antivirus ne se basaient que sur la base virale pour détecter un virus.

La majeure partie de ce podcast est une démonstration, où un anti-virus qui au départ, comportait des signatures virales, n’en possède plus à la fin et marche toujours aussi bien.

Bon visionnage !

Je vous invite à lire le podcast si dessous en plein écran et en résolution 720p, dans une qualité inférieure, les textes peuvent ne pas être visibles.

J’ai parcouru de nombreux articles explicatifs et de nombreux forums sans trouver une solution suffisamment efficace pour intégrer de façon clair des UITextView dans un UICell au sein d’un UITableView, mais surtout sans trouver de solution a une problématique qui est de conserver le UITextField visible lors de la frappe au clavier. En effet la majeure partie des solutions décalent la vue sans se soucier de la possibilité de scroll, ce qui provoque des décalages impressionnants et une impossibilité de revenir voir les champs précédents. Ce tutorial propose une solution, tout en expliquant pas à pas depuis la création de la UITableView, en passant par l’intégration des UITextField, et en finissant par les différents calculs permettant d’arriver à un résultat satisfaisant (avec utilisation de Core Animation). Nous verrons également comment mettre des informations avant notre UITableView dans une même UIScrollView sans utiliser la ScrollView par défaut du TableView.

Arborescence virtuelle

Préliminaire

Lancez XCode et créez un nouveau projet de type iOS>View-Based Application pour iPhone (vous pouvez décocher Include Unit Tests dans l’assistant de création, nous ne nous servirons pas des tests unitaires). J’ai nommé le mien « JT_Blog_CocoaTouch_1″, si vous retrouvez cette chaine dans le tuto, ce sera votre nom de projet qui la remplacera.

Par défaut XCode dispose tout les fichiers à la racine de l’espace de travail du projet, je ne trouve pas cette disposition très claire et préfère créer des groupes dans l’arborescence virtuelle tels que ci-contre

Vous remarquerez que mes Headers « .h » sont à un emplacement différent de son « .m », je fais ceci tout simplement pour éviter d’alourdir visuellement l’arborescence (mon dossier Headers est toujours fermé), pour accéder aux headers, il suffit de faire glisser trois doigts vers le haut ou vers le bas du Trackpad ou d’appuyer sur Command+Option+Haut ou Command+Option+Bas.

Cellule éditable

Delegates

Maintenant, créez, dans le dossier Delegates, une nouvelle classe (Cocoa Touch > Objective-C class) qui hérite de UITableViewCell nommée « UITableViewCellEditable« , n’oubliez pas de glisser le header dans le dossier Headers/Delegates de l’arborescence.

Complétez le header de la façon suivante :

#import

@class UITableViewCellEditable;

@protocol UITableViewCellEditableDelegate
- (void)editDidFinish:(NSMutableDictionary *)result; //Méthode du delegate à implémenter dans notre UITableViewController qui sera appelée lors de la fin de l'édition du UITextField

@optional
- (void)editDidBegin:(UITextField *)field; //Méthode appelée lorsque le focus passe sur le UITextField

@end

@interface UITableViewCellEditable : UITableViewCell  { //ne pas oublier d'implémenter le delegate du UITextField
    IBOutlet UITextField *textField; //le UITextField qu'on associera à notre vue dans IB
    id  delegate; //déclaration du delegate
    NSString *key; //clé associé à notre UITextField
}

@property (nonatomic, retain) IBOutlet UITextField *textField;
@property (nonatomic, assign) id  delegate;
@property (nonatomic, retain) NSString *key;

@end

Rien de bien compliqué pour le moment.

Passons maintenant à l’implémentation des différentes méthodes de notre classe dans le « UITableViewCellEditable.m »

Vous n’avez pas besoin des méthodes d’initialisation, ni des méthodes déjà implémentées dans UITableViewCell, nous allons nous contenter de rediriger le textFieldDidBeginEditing (méthode déléguée de UITextField) vers notre fonction editDidBegin. Bien entendu ne pas oublier le dealloc pour préserver la mémoire et éviter des fuites :

#import "UITableViewCellEditable.h"

@implementation UITableViewCellEditable

@synthesize textField, delegate, key;

- (void)textFieldDidBeginEditing:(UITextField *)txtField {
    [[self delegate] editDidBegin:txtField];
}

- (void)dealloc
{
    [textField release];
    [key release];
    [super dealloc];
}

@end

Désormais nous avons un nouveau type de cellule pouvant être insérée dans le UITableView, qui délègue les différentes méthodes nécessaires à l’utilisation d’un UITextField en son sein.

Et dans IB ?

Passons un peu du côté d’interface builder, afin de créer notre model de cellule. Pour ce faire, dans le dossier/groupe Views, créez un nouveau xib vierge (New File > iOS > User Interface > Empty) pour iPhone et nommez le UITVCellEditable (TV=TableView).

Ajoutez dans cette vue un nouvel Objet « Table View Cell » (UITableViewCell) et renseignez notre classe dans l’onglet Identity Inspector : Class= UITableViewCellEditable.

Enfin ajoutez un « Text Field » (UITextField) dans notre « Table View Cell Editable ». Puis configurez de la façon suivante :

* Agrandissez le de façon à ce qu’il touche presque les deux bords de notre Table View Cell (laissez une marge, ce n’est pas vraiment visuel sans marge, surtout si la table view cell est utilisée en mode Grouped, avec des bords arrondis).

* Dans l’onglet Size Inspector du « UITextField », cochez l’autosizing de façon à ce que le TextField puisse s’agrandir horizontalement (toutes les flèches horizontales), puis faites de même avec l’autosizing de la « Table View Cell Editable ».

* Dans l’onglet Attribute Inspector du « UITextField », il est possible de personnaliser le UITextField de sorte à l’intégrer parfaitement à notre Cellule, pour ce faire, mettez un Border Style invisible, niveau accessibilité, mettez le Clear Button (petite croix pour vider le champs) à « Appears while editing »

* Dans l’onglet Attributes Inspector de « Table View Cell Editable », passez « Selection » à « None », pour désactiver le clic de sélection sur la cellule.

N’oubliez pas de lier le TextField à notre TableViewCell, en faisant un clic droit (ou ctrl+clic) et un glissement de la tableview au textfield, et sélectionnez textfield (vous pouvez lier en faisant un clic droit et en glissant textField sur l’objet correspondant).

Interface de notre application

Dans IB

Maintenant, nous allons nous occuper d’ajouter une UITableView à notre application, pour ce faire, ouvrez votre xViewController.xib (x est à remplacer par le nom de votre application, c’est la vue depuis laquelle MainWindow.xib charge sa vue au lancement de l’application).

Nous allons faire une interface de saisie d’information pour un utilisateur.

Par défaut, seule une vue est présente. Dans cette vue, ajoutez une « Scroll View » (UIScrollView). Puis à l’intérieur de cette ScrollView, ajoutez deux « Label » (UILabel) (l’un représentera le prénom l’autre le nom, deux champs qui seront juste affichés sans être éditables). Enfin, au même niveau, ajoutez une « Table View » (UITableView).

Maintenant passons à la configuration de tout ce beau monde.

Comme une image vaut mieux que 1000 explications, voici le rendu final dans Interface Builder :

Vue sous IB

Pour arriver à ce résultat, il ne faut pas hésitez à utilisation la fonction « Arrange » de l’onglet Size Inspector, pour étendre le Scroll View et la Table View aux bonnes dimensions.

Pour les deux labels, je pense qu’il n’y a pas besoin d’explication.

Quant à la Table View, changez le style en « Grouped », changez « Separator » à « None » (c’est plus joli), puis désactivez « Show selection on Touch) et désactivez le « Scrolling », pour l’empêcher de prendre la main en cas de scroll, nous laisserons cela à la Scroll View. Dans cette dernière (la Scroll View), sélectionnez pour Background : « Group Table View Background Color », en effet la Table View avec son background particulier ne couvre pas toute la Scroll.

Au niveau de l’autosizing, qui permet d’étendre les vues automatiquement en fonction des modifications de taille de l’élément parent, allez dans l’onglet « Size Inspector » de la « Table View », et coller à droite, en haut, à gauche, étendre horizontalement doivent être cochés (décochez donc coller en bas et étendre verticalement). Faites de même pour la « Scroll View ».

Maintenant faites un bouton de droite sur la « Table View » et liez le « datasource » et le « delegate » au « File’s Owner » (la classe correspondante au « File’s Owner » est contenu dans le fichier « .m » de même nom).

Déclaration des IBOutlets et des liaisons IB

Puis ouvrez le header du ViewController correspondant à la vue que vous venez d’éditer dans Interface Builder, remplissez le comme suit :

#import

#import "UITableViewCellEditable.h" //ne pas oubliez d'importer le Headers du UITableViewCellEditable

@interface JT_Blog_CocoaTouch_1ViewController : UIViewController  {
    IBOutlet UITableView* tblView;
    IBOutlet UIScrollView* scrlView;
    IBOutlet UILabel* lblFirstName;
    IBOutlet UILabel* lblLastName;
    UITextField* curTextField; //le UITextField actuellement en cours d'édition (nous verrons tout à l'heure l'utilité)

    NSArray* tableViewDataSource; //le DataSource (contenu) de notre tableView
    BOOL dataLoaded; //YES lorsque toutes les données de la tableview sont chargées, nous verrons l'utilité plus tard
    NSMutableDictionary* userDataSource; //le DataSource contenant les informations de l'utilisateur (vous remarquerez le "Mutable" qui signifie que le dictionnaire peut-être modifié)

    CGRect viewNormalFrame; //la taille originale de la vue (avant nos redimensionnements, histoire d'éviter des calculs pour la repositionner)
    CGRect keyboardFrame; //dimension du clavier
    BOOL keyboardOut; //est-ce que le clavier est affiché ?
    float keyboardAnimationDuration; //durée de l'apparition du clavier
    int keyboardAnimationCurve; //comportement dans le temps de l'animation (exemple: lent au début, plus rapide au milieu, lent à la fin)
}

- (void)keyboardWillShow:(NSNotification *)notification; //méthode appelé par une notification que l'on capturera

@end

Liaisons

Retournez ensuite dans votre vue sur InterfaceBuilder et faites les liaisons suivantes :

• File’s Owner : scrlView => Scroll View
• File’s Owner : tblView => Table View
• File’s Owner : lblFirstName => Label – Prénom
• File’s Owner : lblLastName => Label – Nom

N’oubliez pas d’enregistrer le fichier.

Un peu de code maintenant

Méthodes utilisées

Dirigez vous ensuite vers le « .m » correspondant :

#import "JT_Blog_CocoaTouch_1ViewController.h"

@implementation JT_Blog_CocoaTouch_1ViewController

- (void)dealloc
{
    /* ne pas oublier les release pour préserver la mémoire vive */
    [super dealloc];
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    return (interfaceOrientation == UIInterfaceOrientationPortrait);
}

#pragma mark - Keyboard Handling
- (void)keyboardWillShow:(NSNotification *)notification {
    /* lorsque le clavier apparait pour la première fois, nous allons initialiser nos variables concernant le clavier */
}

#pragma mark - Text Field delegate
-(void)textFieldDidBeginEditing:(UITextField *)textField{
    /* animation de la vue afin de la réduire et de la mettre au bon niveau, en positionnant le scroll au bon endroit */
}

-(BOOL)textFieldShouldReturn:(UITextField *)textField{
	/* appellée lors de la fin d'édition, juste avant la disparition du clavier, la vue originale doit être restaurée */
}

#pragma mark - View lifecycle
- (void)viewDidLoad
{
    /* Préparation de notre DataSource */
    [super viewDidLoad];
}

- (void)viewDidAppear:(BOOL)animated{
    /*
     * Préparation des tailles et positions des différentes parties
     * Ajout d'un Observer sur l'apparition du clavier
     */
    [super viewDidAppear:animated];
}

-(void)viewWillDisappear:(BOOL)animated{
    /* On enlève l'Observer sur l'apparition du clavier, pour éviter d'utiliser des ressources en envoyant des notifications qui n'aboutiront nul part */
    [super viewWillDisappear:animated];
}

#pragma mark - TableView
- (void)editDidFinish:(NSMutableDictionary *)result {
    /* Fin de l'édition d'un champs, enregistrement de la valeur dans un tableau (généralement on utilise Core Data, mais ce n'est pas l'objectif de ce tutorial) */
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    /* UITableViewCell à afficher pour la cellule à l'index indexPath */
}

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    /* nombre total de section (groupes) dans la tableView en mode "grouped" */
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    /* nombre total de ligne dans la tableView dans la section/groupe section */
}

@end

Passons directement à la programmation de toutes ces méthodes.

viewDidLoad

Pour créer les différentes informations qui seront demandées, nous allons créer une arborescence de notre invention, je vous propose la suivante : un « NSArray » contient les sections, chaque section est un « NSArray » qui contient des « NSDictionnary » représentants chacun la clé et le label d’un champs. Pour le « userDataSource », rien de bien compliqué, cela peut-être un objet d’un model de CoreData, mais nous allons pour l’exemple, nous contenter d’un simple « NSMutableDictionary », nous allons renseigner deux valeurs qui devront, au final, apparaitre dans les champs textes correspondants.

- (void)viewDidLoad
{
    /* Préparation de notre DataSource */
    NSArray* sectionAddress = [[NSArray alloc] initWithObjects:
                               [[NSDictionary alloc] initWithObjectsAndKeys:
                                @"address", @"key",
                                @"Addresse", @"label",
                                nil],
                               [[NSDictionary alloc] initWithObjectsAndKeys:
                                @"city", @"key",
                                @"Ville", @"label",
                                nil],
                               [[NSDictionary alloc] initWithObjectsAndKeys:
                                @"zipCode", @"key",
                                @"Code postal", @"label",
                                nil],
                               nil];

    NSArray* sectionContact = [[NSArray alloc] initWithObjects:
                               [[NSDictionary alloc] initWithObjectsAndKeys:
                                @"phone", @"key",
                                @"Téléphone", @"label",
                                nil],
                               [[NSDictionary alloc] initWithObjectsAndKeys:
                                @"mail", @"key",
                                @"e-mail", @"label",
                                nil],
                               nil];

    NSArray* sectionProfil = [[NSArray alloc] initWithObjects:
                              [[NSDictionary alloc] initWithObjectsAndKeys:
                               @"hobbies", @"key",
                               @"Loisirs", @"label",
                               nil],
                              [[NSDictionary alloc] initWithObjectsAndKeys:
                               @"like", @"key",
                               @"Intérêts", @"label",
                               nil],
                              [[NSDictionary alloc] initWithObjectsAndKeys:
                               @"hate", @"key",
                               @"Déteste", @"label",
                               nil],
                              [[NSDictionary alloc] initWithObjectsAndKeys:
                               @"sports", @"key",
                               @"Sports", @"label",
                               nil],
                              [[NSDictionary alloc] initWithObjectsAndKeys:
                               @"movies", @"key",
                               @"Films", @"label",
                               nil],
                              [[NSDictionary alloc] initWithObjectsAndKeys:
                               @"musics", @"key",
                               @"Musiques", @"label",
                               nil],
                              [[NSDictionary alloc] initWithObjectsAndKeys:
                               @"books", @"key",
                               @"Livres", @"label",
                               nil],
                              [[NSDictionary alloc] initWithObjectsAndKeys:
                               @"videogames", @"key",
                               @"Jeux vidéos", @"label",
                               nil],
                              nil];

    tableViewDataSource = [[NSArray alloc] initWithObjects:sectionAddress,sectionContact,sectionProfil,nil];

    [sectionAddress release];
    [sectionContact release];
    [sectionProfil release];

    userDataSource = [[NSMutableDictionary alloc] initWithObjectsAndKeys:
                      @"Bordeaux",@"city",
                      @"33000",@"zipCode",
                      @"basket, footing, ...",@"sports",
                      nil];

    dataLoaded=NO; /* les données ne sont pas encore dans la table view, nous verrons plus tard pourquoi nous faisons cela */

    [super viewDidLoad];
}

numberOfSectionsInTableView:

Doit retourner le nombre de sections contenues dans la Table View, ça correspond pour nous au nombre d’éléments dans « arrTblViewDataSource ».

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    /* nombre total de section (groupes) dans la tableView en mode "grouped" */
    return [tableViewDataSource count];
}

tableView: numberOfRowsInSection:

Ici non plus, rien de bien compliqué, il faut récupérer le nombre d’élément dans la section.

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    /* nombre total de ligne dans la tableView dans la section/groupe section */
    return [[tableViewDataSource objectAtIndex:section] count];
}

tableView: cellForRowAtIndexPath:

En entrée de cette méthode, on a le tableView qui est en train de s’afficher, et l’indexPath qui correspond à la cellule actuellement à afficher.

A partir de ces informations, nous allons construire une cellule et lui retourner.

Quelques explications pour le code qui va suivre :

• Notez l’utilisation de « dequeueReusableCellWithIdentifier » qui permet de charger la cellule en copiant une cellule déjà existante, dans le cas où aucune cellule n’est écrite avant, alors nous en créons une nouvelle.
• Il ne faut pas non plus oublier de paramétrer les « delegate » des deux éléments de notre cellule
• Enfin, il ne reste plus qu’a mettre les bonnes valeurs aux bons endroits !

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    /* UITableViewCell à afficher pour la cellule à l'index indexPath */
    static NSString *CellIdentifier = @"Cell";
    UITableViewCellEditable *cell = (UITableViewCellEditable *) [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

    if (cell == nil){
        NSArray *topLevelObjects = [[NSBundle mainBundle] loadNibNamed:@"UITVCellEditable" owner:nil options:nil];
        for(id currentObject in topLevelObjects) {
            if([currentObject isKindOfClass:[UITableViewCellEditable class]]) {
                cell = (UITableViewCellEditable *) currentObject;
                break;
            }
        }
    }

    [cell setDelegate:self];
    [cell.textField setDelegate:self];

    NSDictionary* cellInfos=[[tableViewDataSource objectAtIndex:indexPath.section] objectAtIndex:indexPath.row];
    cell.key = [cellInfos objectForKey:@"key"];
    cell.textField.text = [userDataSource objectForKey:[cellInfos objectForKey:@"key"]];
    cell.textField.placeholder = [cellInfos objectForKey:@"label"];

    return cell;

}

editDidFinish:

Rien de bien compliqué, result correspond à un NSMutableDictionary, contenant toute les infos du textField dont l’édition vient de finir, il n’y a plus qu’à enregistrer ces infos (dans l’idéal en core data, mais pour l’exemple : ) dans notre « userDataSource ».

- (void)editDidFinish:(NSMutableDictionary *)result {
    /* Fin de l'édition d'un champs, enregistrement de la valeur dans un tableau (généralement on utilise Core Data, mais ce n'est pas l'objectif de ce tutorial) */
    [userDataSource setValue:[result objectForKey:@"text"]
                      forKey:[result objectForKey:@"key"]
     ];
}

dealloc

Finalement on termine par notre dealloc :

- (void)dealloc
{
    /* ne pas oublier les release pour préserver la mémoire vive */
    [userDataSource release];
    [tableViewDataSource release];
    [super dealloc];
}

Si vous avez été attentif jusque là, si vous avez suivit à la lettre ce tutorial, alors, vous pouvez lancer la compilation et démarrer le simulateur (bouton Play). L’application devrait être quasiment fonctionnelle.

Mais il y a quelques petits soucis, notamment l’impossibilité de scroller, mais aussi quelques soucis lors de l’édition, les champs ne se positionnant pas correctement. Nous allons voir comment résoudre tout ces petits soucis.

Finitions

Correction du Scroll

Le composant UITableView est fait de tel manière que seulement ce qui est affiché est chargé, c’est à dire, que si seulement 10 lignes sont visibles sur 20, l’appel à « - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath » ne se fera que 10 fois, ceci afin d’économiser les ressources, lors d’appel à des dataSources très couteux ou de plusieurs centaines de lignes.

Le petit hic, c’est que nous avons besoin de redimensionner la taille du tableView, afin que toute la tableView soit affichée (même en dehors de l’écran), dans la scrollView, ceci dans le but de pouvoir tout scroller, grâce à une seule et unique scrollView. Mais pour arriver à faire cela, il nous faut récupérer la hauteur du contenu de la tableView, cela se fait généralement grâce à la propriété « contentSize », mais cette propriété n’est valable que pour les cellules déjà chargées ! C’est à dire qu’avec notre exemple précédent, nous n’aurions la taille que de seulement 10 lignes sur 20…

Pour résoudre ce problème, nous allons, à l’apparition de la Vue globale, rafraîchir le UITableView avec la méthode « reloadData ». Aussi bizarre que cela puisse être, cette méthode fonctionne différemment du premier chargement et charge toutes les données et cellules. Une fois chargées, nous avons accès à la propriété contentSize qui contient désormais la bonne valeur à exploiter !

Afin de préparer nos opérations sur le clavier plus tard, nous allons observer les notifications sur l’apparition du clavier. Nous sauvegardons également la frame de la vue globale, afin d’éviter de la recalculer lorsque nous la redimensionnerons.

- (void)viewDidAppear:(BOOL)animated{
    /*
     * Préparation des tailles et positions des différentes parties
     * Ajout d'un Observer sur l'apparition du clavier
     */
    dataToLoad=YES;
    [tblView reloadData];

    [tblView setFrame:CGRectMake(tblView.frame.origin.x, tblView.frame.origin.y, tblView.frame.size.width, tblView.contentSize.height)];
    scrlView.contentSize=CGSizeMake(scrlView.frame.size.width, tblView.frame.origin.y+tblView.frame.size.height);
    viewNormalFrame=self.view.frame;

    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillShow:) name:UIKeyboardWillShowNotification object:nil];

    [super viewDidAppear:animated];
}

-(void)viewWillDisappear:(BOOL)animated{
    /* On enlève l'Observer sur l'apparition du clavier, pour éviter d'utiliser des ressources en envoyant des notifications qui n'aboutiront nul part */
    [[NSNotificationCenter defaultCenter] removeObserver:self name:UIKeyboardWillShowNotification object:nil];
	[super viewWillDisappear:animated];
}

Vous souvenez vous de dataToLoad ? Je vous avez dit que nous en aurions besoin plus tard, je vais donc vous expliquez à quoi il va servir. Comme au chargement de la vue, nous rafraichissons manuellement la tableView, alors nous n’avons pas besoin de charger des lignes lorsqu’elle s’affiche la premiere fois, nous pouvons faire une économie de mémoire et de processeur à ce niveau là. Comme précédemment, nous avons passé à YES, dataToLoad, nous savons désormais quand le reloadData est appelé, nous pouvons donc modifier le delegate qui retourne le nombre de section, pour lui demander de retourner 0 lorsque dataToLoad est à NO, si il n’y a pas de section, aucune cellule ne sera chargée.

Modifiez la fonction « numberOfSectionsInTableView » tel que :

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    /* nombre total de section (groupes) dans la tableView en mode "grouped" */
    return dataToLoad ? [tableViewDataSource count]:0;
}

Testez, le scroll marche, tout les champs s’affichent désormais !

Désormais il nous reste seulement que quelques petits problèmes à régler :

Animer et montrer les cellules lorsque le clavier s’active

Avant toute chose, nous allons initialiser quelques variables dont nous allons avoir besoin, pour cela, ajoutez au début de la méthode « - (void)viewDidLoad » les initialisations suivantes :

        keyboardOut=NO;
        keyboardAnimationCurve=0;
        keyboardFrame=CGRectMake(0, 0, 0, 0);
        keyboardAnimationDuration=-1;
        curTextField=nil;

Nous allons utiliser la notification d’apparition du clavier pour récupérer les différents réglages d’animation du clavier afin de les reproduire. Une fois fait, nous pouvons supprimer « l’observer » d’apparition du clavier, nous n’en nécessiterons plus ensuite.

Enfin, nous verrons tout de suite après pourquoi, nous appelons la méthode « textFieldDidBeginEditing:curTextField ». En effet, dans cette méthode si nous n’avons pas encore récupéré les réglages, nous devons le faire avant (enregistrer le textField cliqué dans « curTextField »), et donc rappeler la méthode une fois fait.

- (void)keyboardWillShow:(NSNotification *)notification {
    /* lorsque le clavier apparait pour la première fois, nous allons initialiser nos variables concernant le clavier */
    if(keyboardAnimationDuration==-1 && curTextField!=nil){
        keyboardAnimationCurve=[[[notification userInfo] objectForKey:UIKeyboardAnimationCurveUserInfoKey] intValue];
        keyboardAnimationDuration=[[[notification userInfo] objectForKey:UIKeyboardAnimationDurationUserInfoKey] doubleValue];
        keyboardFrame=[[[notification userInfo] objectForKey:UIKeyboardFrameEndUserInfoKey] CGRectValue];
        [[NSNotificationCenter defaultCenter] removeObserver:self name:UIKeyboardWillShowNotification object:nil];
        [self textFieldDidBeginEditing:curTextField];
    }

}

Les petits calculs ^^

C’est maintenant qu’il va falloir être attentif… Nous allons faire quelques petits calculs.

Dans tout les cas, on ajuste la vue en hauteur juste au dessus du clavier.

Lors du clic sur un textField, s’il n’est pas visible, on va positionner le scroll de façon à ce qu’il le devienne.

On utilise bien entendu Core Animation avec les même réglages que possède le clavier afin d’obtenir une animation semblable.

Suivez les commentaires du code ci-dessous. En réfléchissant 5 minutes tout est normalement compréhensible.

-(void)textFieldDidBeginEditing:(UITextField *)textField{
    /* animation de la vue afin de la réduire et de la mettre au bon niveau, en positionnant le scroll au bon endroit */
    curTextField=textField;
    if(keyboardAnimationDuration!=-1) { //sinon on attend que keyboardwillappear soit executé
        CGRect viewFrame = self.view.frame;
        CGPoint contentOffset=scrlView.contentOffset; //position actuelle du scroll
        CGRect cellFrame = textField.superview.superview.frame; //correspond à la cellule en cours (deux vues au dessus de notre textfield
        int top=tblView.frame.origin.y+cellFrame.origin.y; //origine verticale de la cellule depuis le haut de la scrollView
        int newFrameHeight=viewNormalFrame.size.height-keyboardFrame.size.height; //on réajuste la vue en hauteur, de façon à ce que le bas de la vue globale soit coincide avec le haut de la frame du clavier

        if((top+cellFrame.size.height)-contentOffset.y>newFrameHeight) //si le bas du textinput plus bas que l'affichage
            contentOffset.y=top+cellFrame.size.height-newFrameHeight;
        else if(top-contentOffset.y<0) //si le haut du textinput plus haut que l'affichage
            contentOffset.y=top;

        [UIView beginAnimations:nil context:NULL]; //à partir de là on utilise Core Animation
        [UIView setAnimationDuration:keyboardAnimationDuration];
        [UIView setAnimationCurve:keyboardAnimationCurve];
        [scrlView setContentOffset:contentOffset animated:YES]; //on positionne le scroll au bon endroit, calculé précédemment, attention, setContentOffset ne fonctionne pas avec UIView beginAnimation, il faut specifier animated:YES
        if(!keyboardOut){ //si le clavier est déjà sorti, pas besoin de redimensionner la vue
            viewFrame.size.height=newFrameHeight;
            [self.view setFrame:viewFrame];
        }
        [UIView commitAnimations]; //et enfin on lance les animations

        keyboardOut=YES; //désormais, on peut dire que le clavier est sorti
    }
}

Fin d’édition

Finalement, il ne nous reste plus qu’a définir les actions lorsque nous avons finit d’éditer un textField. Si le clavier était sorti, il va se fermer, nous allons donc repositionner notre vue globale à son état d’origine.

-(BOOL)textFieldShouldReturn:(UITextField *)textField{
	/* appellée lors de la fin d'édition, juste avant la disparition du clavier, la vue originale doit être restaurée */
    [textField resignFirstResponder];

    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationDuration:keyboardAnimationDuration];
    [UIView setAnimationCurve:keyboardAnimationCurve];

    if(keyboardOut)
        [self.view setFrame:viewNormalFrame];

    [UIView commitAnimations];

    keyboardOut=NO;
    return YES;

}

A bientôt

Et oui ! C’est désormais fini ! Normalement tout fonctionne parfaitement bien ! Merci de m’avoir suivit pendant ce cours tuto ! Ne ratez pas la suite .

Le programme de cette certification se concentre essentiellement sur l’attaque et très peu sur la défense. Il est en effet pratique de savoir comment attaquer afin d’être efficace lorsqu’il s’agit de défendre. Un des projets sur lesquels je travaille est le mécanisme de défense des anti-virus et comment le contourner.

La finalité de ce projet est la création d’un virus totalement indétectable par les anti-virus. Ce podcast, que j’ai réalisé pour mon école Ingésup, est en quelque sorte une préface à toute une série d’articles sur ce projet.

Google Storage for Developpers fournit un espace de stockage illimité et hautement disponible, ainsi qu’une interface RESTFull, ce n’est pas la peine de le comparer avec Dropbox, mais avec le service d’amazon : Amazon S3 (que dropbox utilise).

Organisation

Chaque fichier envoyé sera stocké sur le Cloud Google, c’est à dire sur une multitude de serveurs répartis à travers le monde. Chaque fichier pourra donc être accessible de n’importe, le serveur sera choisit de manière transparente en fonction de son temps de réponse. Les données étant répliquées sur plusieurs serveur, plus besoin de sauvegarde, si un des serveurs tombe, le fichier sera toujours disponible grâce aux autres serveurs.

Comme sur Amazon, des répertoires racines doivent être créés. Appelés Bucket, ces répertoires doivent avoir un nom en minuscule selon le principe d’un alias de nom de domaine. Ce bucket pourra en effet être atteint depuis un alias de l’url de google storage : nom_du_bucket.commondatastorage.googleapis.com .

Chaque bucket peut ensuite contenir :

• des fichiers
• des dossiers
• des buckets

Une gestion des ACL (Access Control List ou encore gestion des droits) fait également partie intégrante du système de fichiers, il existe 3 droits pouvant être appliqués à des domaines mails ou encore des comptes google spécifiés explicitement.

• READ : droit de lecture uniquement
• WRITE : droit de lecture et d’écriture
• FULLCONTROL : ce droit permet d’attribuer tout les droits à un fichier, y compris les droits de modification des ACL

Une fonctionnalité interessante est la possibilité de reprendre un envoi ou un téléchargement, imaginons qu’un envoi d’un très gros fichier de plusieurs centaines de Mo ai été interrompu par une coupure de connection, il est possible de reprendre l’upload exactement où la coupure c’est produite.

Par contre, c’est dommage (mais en même temps très dur à gérer), mais un fichier sur le serveur ne peut être modifié. Ainsi, lors de la modification d’un fichier, ce fichier est supprimé, puis renvoyé. Il est considéré comme un fichier totalement différent du premier, et sa date de « modification » devient donc sa date de création, le libéllé dans l’explorateur est « Last upload ».

La compression du flux est également gérée, en envoyant un fichier, il est possible d’utiliser la compression gZip, le temps de transfert sera réduit, la bande passante (BP facturée ^^)  sera également réduite.

Lors de l’envoi d’un fichier, ce fichier est considéré comme inexistant, et n’apparait donc pas dans notre bucket. Dès que le serveur a entièrement reçu le fichier, il apparait instantanément, et est immédiatement disponible. De la même façon, une fois supprimé, il n’apparait plus et renvoi une 404 immédiatement.

Google storage utilise le protocole HTTPS pour l’échange de fichier, nos données sont donc sécurisées (relativement bien) pendant toute la durée du transit.

Interface Web

Mieux vaut une petite démonstration avec quelques screenshot que des explications imbuvables :

Ligne de commande

Là une partie un tout petit peu plus technique… Google fournit un utilitaire développé en Python qui est un client RESTFull pour Google Storage.

L’avantage par rapport à l’interface Web est que nous avons accès à la quasi-totalité des fonctions REST, notamment la gestion des ACL que nous n’avons pas encore sur l’interface Web.

Cet utilitaire s’appelle GSUtil et son utilisation est plutôt simple :

Pour reprendre le même exemple que ci-dessus :

Création d’un bucket : gsutil mb gs://jeremy

Création d’un dossier : gsutil mb gs://jeremy/test

Envoi d’un fichier : gsutil cp Lorem\ Ipsum.txt gs://jeremy/

Liste du dossier : gsutil ls -l gs://jeremy

Affichage du fichier : gsutil cat gs://jeremy/Lorem\ Ipsum.txt

Suppression de fichier : gsutil rm gs://jeremy/Lorem\ Ipsum.txt

Gestion des acls :

• Tout d’abord récupérer la configuration acl existante : gsutil getacl gs://jeremy/Lorem\ Ipsum.txt > acl.txt
• Ensuite éditer ce fichier en fonction des nouvelles ACL
• Puis renvoyer le fichier : gsutil setacl acl.txt gs://jeremy/Lorem\ Ipsum.txt

Prix

Je vous ai dit en début d’article que l’espace de stockage était illimité ? oui, mais pas sans coût.

Voici le tableau de prix donné par google, la facturation se fait en fonction de la taille des données transitants entre l’utilisateur et les serveurs, et de l’espace de stockage utilisé.

• Utilisation d’espace de stockage : $0.17/Go/mois
• Réseau
  • Envoi des données
    • $0.10/Go
  • Téléchargement des données
    • $0.15/Go pour l’Amerique, l’Europe, le Moyen-Orient et l’Afrique
    • $0.30/Go pour l’Asie-Pacifique
• Requêtes
  • PUT, POST, LIST—$0.01 pour 1,000 requêtes
  • GET, HEAD—$0.01 pour 10,000 requêtes

La syntaxe du javascript n’est régie par aucune norme prédéfinie, ainsi n’importe qui peut programmer de la manière qu’il veut.

Pour ma part ces derniers temps je  me suis penché sur l’optimisation de mon code javascript en me basant sur trois points :

• gagner du temps en programmant => code simple à écrire, facilement lisible pour y revenir plus tard
• optimisation de la vitesse d’exécution du code
• diminution de la taille de notre javascript => les compresseurs automatiques existent, mais leurs algorithmes ne permettent pas de tout réduire, un code faisant 150ko pourra être réduit à 40ko, mais ce même code programmé d’une autre façon pourra très bien être réduit à 30ko. Bien entendu, nous ne sommes plus aussi attentif qu’avant sur la taille de nos fichiers grâce à l’ADSL, mais n’oublions pas nos clients mobile, et surtout la charge en moins que la bande passante de notre serveur évitera.

Les Trois « if »

Afin de connaitre facilement duquel on parle dans la suite de l’article, j’ai décidé de les nommer de cette façon : if explicite, if implicite et if ternaire. Je rajouterai bientôt le Switch dans ces graphiques.

Attention tout de même, ils ne permettent pas tous la même chose !

If Explicite

Bon celui-là tout le monde le connait, et si vous ne le connaissez pas, je pense que vous vous êtes trompé de site !

if ( variable1 === 'valeur 1' ) {
//alors
} else {
//sinon
}

« Ah ah, le noob… il a même pas mit les elseif !!! »
En fait les « else if » sont simplement des « else » ou dans le bloc nous avons un « if », mais comme vous le savez, nous pouvons omettre les accolades lorsque le bloc suivant ne contient qu’une instruction.

Ainsi le code suivant :

if ( variable1 === 'valeur 1' ) {
//alors
} else if ( variable1 === 'valeur 2' ) {
//sinon si
}
else{
//sinon
}

est l’équivalent de celui-ci :

if ( variable1 === 'valeur 1' ) {
//alors
} else {
if ( variable1 === 'valeur 2' ) {
//sinon si
}
else{
//sinon
}
}

Voici un petit graphe qui compare la vitesse d’exécution de cette structure afin de faire une simple affectation.
Cette structure contient 1 if, 4 elseif et 1 else, chaque niveau correspond à un if/else différent (level 0=if, level 5=else).

Et là grande surprise, remarquez comme la dernière version de firefox, l’air de rien, arrive en tête de se classement ! Firefox n’étant pourtant pas réputé pour son moteur de javascript très performant, il arrive a se démarquer des autres sur les tests conditionnels/affectation de façon impressionnante. Safari 5 en version PC est quant à lui, un peu à la traîne, je rajouterai bientôt le même comparatif en utilisant les navigateurs sous OS X. Opera qui a également amélioré son moteur javascript, se trouve dans la même unité de grandeur que les autres avec un peu d’avance par rapport à Chrome. J’ai été déçu par les résultats de ce dernier sur ce test. Finalement Internet Explorer 9, pourtant prometteur (voir mon autre test) ne se met pas non plus en avant sur ce test.

If Ternaire

Beaucoup de gens l’utilisent également, il est très pratique et surtout lisible quand il s’agit de faire un choix entre deux valeurs en inline. Il marchera même en plein milieu d’une chaîne de caractère ou d’une instruction.

var nb=5,
	s='Il y a '+nb+' utilisateur'+((nb>1)?'s':'')+' sur ce site'; //ici 5 est supérieur à 2, nous aurons donc un S à la fin de utilisateurs

Bon pas trop mal n’est-ce pas, mais ça devient très vite imbuvable et illisible si on veut faire un peu plus compliqué :

var nb=5,
	s='il y a '+((nb>1)?nb+' utilisateurs':((nb>0)?1:'aucun')+' utilisateur')+' sur ce site';

Au niveau du petit combat entre navigateur :

Graphique de comparaison d'un If ternaire sur les navigateurs PC

Toujours firefox de loin en tête, pas de majeurs changement par rapport au test précédent.

If Implicite

Alors là, nous allons un peu jouer avec les spécificités du langage Javascript. Cette structure conditionnelle est très peu utilisée, un peu moins lisible que le if explicite ou ternaire dans certains cas, mais beaucoup plus rapide à écrire et à lire dans d’autres.

Imaginons que nous avons un objet appelé « O », et que nous voudrions appeler la fonction « f » de cet objet seulement dans le cas où cette fonction existe, ainsi avec un if explicite nous ferions :

if(O.f)
	O.f();

Maintenant en if implicite :

O.f && O.f();

Bon on ne gagne pas grand chose ici n’est-ce pas ?

Imaginons une petite fonction getter/setter pour des inputs :

function iV(idt,v){
	var el=document.getElementById(idt) || {};
	el= (el.value && el) || {value:''};
	return el.value =  (arguments>1 && v) || el.value;
}

Ce code est un exemple extrême peu optimisé, mais qui donne un bon aperçu de la syntaxe.
Que fait le code ?
ligne 2 : on récupère notre input et s’il n’existe pas, on retourne simplement un objet vierge pour ne pas générer une erreur javascript ensuite.
ligne 3 : si notre objet contient un champs value, c’est bon, donc on retourne notre objet, sinon, on retourne un objet vierge contenant un champs value pour ne pas non plus générer une erreur javascript ensuite.
ligne 4 : si nous avons plus d’un argument, alors nous affectons notre deuxième argument (v) au champs value de notre input, sinon, on ne change rien, on le réaffecte lui-même. Finalement on retourne tout ça !

Pourquoi ne pas directement à la ligne 3 passer la « value » dans une variable ?
Tout simplement car la « value » n’est pas un objet, et ici ce ne sera pas le pointeur qui sera copié, mais la valeur. Il ne faut pas oublier qu’en javascript les objets sont passé par référence et String/int/Bool/… sont passé par valeur.

Nous enregistrons également notre élément dans une variable el, car document.getElementById prend du temps à s’exécuter, étant donné qu’elle parcourt le Dom de notre page. Ainsi on ne l’appelle ici qu’une seule fois.

Un code équivalent avec une structure if/else :

function iV(idt,v){
	var el;

	if(el=document.getElementById(idt)){
		if(arguments.length>1){
			if(el.value){
				return el.value=v;
			}
			else
				return v;
		}
		else if(el.value)
			return el.value;
	}
	else if(arguments.length>1)
		return v;
	return false;
}

Si on traduit ligne à ligne en structure conditionnelle implicite :

function iV(idt,v){
    var el;
    return (
        (el=document.getElementById(idt)) && (
            (
                arguments.length>1 && (
                    (el.value && (el.value=v))
                    || v
                )
            )
            || el.value
        )
    )
    || (arguments.length>1 && v)
    || false;
}

En réduisant :

function iV(idt,v){
    var el;
    return ((el=document.getElementById(idt)) && ((arguments.length>1 && ( (el.value && (el.value=v)) || v)) || el.value)) || (arguments.length>1 && v) || false;
}

Maintenant les deux codes compressés :

function iV(a,v){var b;if(b=document.getElementById(a)){if(arguments.length >1){if(b.value){return b.value=v}else return v}else if(b.value)return b.value} else if(arguments.length>1)return v;return false}

et

function iV(a,v){var b;return((b=document.getElementById(a))&&((arguments .length>1&&((b.value&&(b.value=v))||v))||b.value))|| (arguments.length>1&&v)||false}

Et on se retrouve avec un code à 156 caractères en if implicite et un à 202 caractères en if explicite, soit 25% de moins ce qui est énorme.

Je pense notamment à ce concours : 10K Apart dont le but était de faire une application web impressionnante, dont la taille serait la plus petite possible, avec une limite de 10kb. Avec cette méthode, j’ai réussi à rapporter le code du gagnant de 6,9kb à 4,1kb. Plutôt sympas non ? pour perdre son temps !

Vous l’aurez donc compris, ce code est très utile pour des structures très simple, tel que pour vérifier l’existence d’attributs d’objets, mais très dur à lire dès qu’on arrive dans des structures complexes (et sans habitude ). Toutefois, nous nous rapprochons d’un langage plus brut, et il est donc plus petit au final. Je pense notamment au

Voici pour le petit graphique :

Graphique de comparaison d'un If Implicite sur les navigateurs PC

Ici encore nous tombons sur des résultats sensiblement pareils. Ce qui va être intéressant maintenant, c’est au sein d’un navigateur, quel if est le plus rapide ? C’est l’objet de la partie suivante.

Comparaison des « If »

Voici les comparaisons des trois If par navigateur, les graphiques suffisent à eux-même.

Benchmark if sous Firefox 3.6 PC

Benchmark if sous Internet Explorer 9

Benchmark if sous Opera 10.62

Benchmark if sous Safari 5 PC

Benchmark if sous Chrome 6 PC

Ainsi nous pouvons voir, qu’il faudra privilégier les If Implicites aux If Ternaires qui sont fortement moins performants sur la plupart des navigateurs.
Il est ici impossible de tenir compte de Firefox étant donné l’ordre de grandeur 10 fois moindre, les différences entre les trois if ne sont donc, sur ce navigateur, pas représentatives.

Ce qu’il faut retenir

• En règle générale, utiliser des if explicites (lisibilité, performance, au détriment du poids)
• Utiliser des If implicites en lieu et place des If ternaires moins performants (performance)
• Utiliser des If implicites pour une simple vérification de valeur et une action ou une autre (lisibilité, performance, nombre de caractère plus petit)
• Pour les grandes structures conditionnelles : utiliser des If Explicites à moins de vouloir à tout pris gagner des kilo-octets sur le poids du fichier script (lisibilité)

A bientôt !

(PS: je n’ai pas corrompu les résultats de Firefox, mon navigateur favori étant Safari)

gMail permet de rajouter un « +cequonveut » juste avant le @, ainsi toto+nimportequoi@gmail.com est la même chose que toto@gmail.com, cela peut-être très utile pour savoir de qui viennent les spams, ou encore savoir qui vend illégalement des listes d’adresses. J’ai ainsi prit l’habitude à chaque inscription sur un site ou une newsletter de rajouter le nom du site après le +, exemple : monprenom.monnom+gizmodo.fr@gmail.com . Si un jour je reçois du spam sur cette adresse je saurais donc à qui m’en prendre ! Bien entendu les applications sont multiples et variées, notamment avec l’application des filtres ! Ainsi quand j’envois un mail à monprenom.monnom+note@gmail.com je le reçois directement (grâce à un filtre) dans mon dossier Notes… De la même façon il est possible de rajouter des points n’importe où dans l’adresse, gmail ne fera pas la différence ! ex: mon.prenom.mon.n.o.m@gmail.com est l’équivalent de monprenom.monnom@gmail.com lui même équivalent à monprenommonnom@gmail.com !

Mais il y a un petit hic dans tout ça ! Beaucoup de sites n’acceptent pas des emails avec des + ou d’autres caractères spéciaux !

Valide ou pas valide alors ???

Normes

Voici donc un petit tuto bien sympathique en php, une vérification de mail…
« Mais il en traine plein sur internet ??? »

et même PHP fournit une fonction déjà toute prête pour vérifier les mails :

filter_var($email, FILTER_VALIDATE_EMAIL)

Et oui, mais les adresses emails sont régis par des normes RFC5321 et RFC5322, des documents imbuvables que personne ne lit jamais… Du coup, il est rare qu’un regexp soit en accord avec ces normes, à vrai dire, il semblerait bien qu’il n’y en ai qu’un seul qui respecte ces normes (celui de Michael Rushton). La fonction filter_var avec FILTER_VALIDATE_EMAIL ne prenait pas du tout en compte ces normes là et majorité d’emails sortant de l’ordinaire étaient invalides pour elle. Depuis le 2 avril 2010 (révision 297350 de php), ce regexp est inclut directement avec cependant quelques petites suppressions dans FILTER_VALIDATE_EMAIL. Toutefois, la version de PHP contenant cette mise à jour n’et pas encore sortie.

Ce que nous allons faire aujourd’hui est utiliser ce regexp pour vérifier nos adresses emails, mais également vérifier si le nom de domaine utilisé dans l’adresse email existe et est enregistré sur les serveurs DNS.

Application

Le Regexp

Voici le fameux regexp en php (accrochez-vous bien) :

$regexp = '/^(?!(?:\x22?(?:\x5C[\x00-\x'
.'7E]|[^\x22\x5C])\x22?){255,})(?!(?:\x'
.'22?(?:\x5C[\x00-\x7E]|[^\x22\x5C])\x2'
.'2?){65,}@)(?:[\x21\x23-\x27\x2A\x2B\x'
.'2D\x2F-\x39\x3D\x3F\x5E-\x7E]+|(?:\x2'
.'2(?:[\x01-\x08\x0B\x0C\x0E-\x1F\x21\x'
.'23-\x5B\x5D-\x7F]|\x5C[\x00-\x7F])*\x'
.'22))(?:\.(?:[\x21\x23-\x27\x2A\x2B\x2'
.'D\x2F-\x39\x3D\x3F\x5E-\x7E]+|(?:\x22'
.'(?:[\x01-\x08\x0B\x0C\x0E-\x1F\x21\x2'
.'3-\x5B\x5D-\x7F]|\x5C[\x00-\x7F])*\x2'
.'2)))*@(?:(?:(?!.*[^.]{64,})(?:(?:xn--'
.')?[a-z0-9]+(?:-[a-z0-9]+)*\.){0,126}('
.'?:xn--)?[a-z0-9]+(?:-[a-z0-9]+)*)|(?:'
.'\[(?:(?:IPv6:(?:(?:[a-f0-9]{1,4}(?::['
.'a-f0-9]{1,4}){7})|(?:(?!(?:.*[a-f0-9]'
.'[:\]]){8,})(?:[a-f0-9]{1,4}(?::[a-f0-'
.'9]{1,4}){0,6})?::(?:[a-f0-9]{1,4}(?::'
.'[a-f0-9]{1,4}){0,6})?)))|(?:(?:IPv6:('
.'?:(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){'
.'5}:)|(?:(?!(?:.*[a-f0-9]:){6,})(?:[a-'
.'f0-9]{1,4}(?::[a-f0-9]{1,4}){0,4})?::'
.'(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){0,'
.'4}:)?)))?(?:25[0-5]|2[0-4][0-9]|1[0-9'
.']{2}|[1-9]?[0-9])(?:\.(?:25[0-5]|2[0-'
.'4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}))\'
.']))$/iD';'

Alors ça rigole moins là hein ! Bon je ne vais pas détailler l’expression, sachez juste qu’elle permet de vérifier notre mail selon les dernières normes RFC (sauf cas particulier non connus).

Et maintenant on va faire appel à une fonction bien pratique en php : checkdnsrr qui va vérifier l’enregistrement DNS en champs MX (domaines pour les mails) de ce qu’on lui passe en paramètre. « afzxgdegedsgesd.com » renverra FALSE tandis que « gmail.com » renverra TRUE :

$domain=substr(strchr($email,'@'),1); //on récupère la partie après le dernier @
if(checkdnsrr($domain,'MX')) //on vérifie l'enregistrement
return true; //tout est bon on retourne TRUE

Notre fonction complète sera donc :

function checkMail($mail){
	$regexp = '/^(?!(?:\x22?(?:\x5C[\x00-\x'
	.'7E]|[^\x22\x5C])\x22?){255,})(?!(?:\x'
	.'22?(?:\x5C[\x00-\x7E]|[^\x22\x5C])\x2'
	.'2?){65,}@)(?:[\x21\x23-\x27\x2A\x2B\x'
	.'2D\x2F-\x39\x3D\x3F\x5E-\x7E]+|(?:\x2'
	.'2(?:[\x01-\x08\x0B\x0C\x0E-\x1F\x21\x'
	.'23-\x5B\x5D-\x7F]|\x5C[\x00-\x7F])*\x'
	.'22))(?:\.(?:[\x21\x23-\x27\x2A\x2B\x2'
	.'D\x2F-\x39\x3D\x3F\x5E-\x7E]+|(?:\x22'
	.'(?:[\x01-\x08\x0B\x0C\x0E-\x1F\x21\x2'
	.'3-\x5B\x5D-\x7F]|\x5C[\x00-\x7F])*\x2'
	.'2)))*@(?:(?:(?!.*[^.]{64,})(?:(?:xn--'
	.')?[a-z0-9]+(?:-[a-z0-9]+)*\.){0,126}('
	.'?:xn--)?[a-z0-9]+(?:-[a-z0-9]+)*)|(?:'
	.'\[(?:(?:IPv6:(?:(?:[a-f0-9]{1,4}(?::['
	.'a-f0-9]{1,4}){7})|(?:(?!(?:.*[a-f0-9]'
	.'[:\]]){8,})(?:[a-f0-9]{1,4}(?::[a-f0-'
	.'9]{1,4}){0,6})?::(?:[a-f0-9]{1,4}(?::'
	.'[a-f0-9]{1,4}){0,6})?)))|(?:(?:IPv6:('
	.'?:(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){'
	.'5}:)|(?:(?!(?:.*[a-f0-9]:){6,})(?:[a-'
	.'f0-9]{1,4}(?::[a-f0-9]{1,4}){0,4})?::'
	.'(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){0,'
	.'4}:)?)))?(?:25[0-5]|2[0-4][0-9]|1[0-9'
	.']{2}|[1-9]?[0-9])(?:\.(?:25[0-5]|2[0-'
	.'4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}))\'
	.']))$/iD';

	if(!preg_match($regexp, $mail))
		return false;

	$domain=substr(strchr($email,'@'),1);
	return checkdnsrr($parts[1], "MX");
}

Elle est jolie, non ?

Le mail suivant est donc valide : $%^%JerE_my*&&1@gmail.com

Mais celui là non : !def!xyz%abc@@gmail.com

Conclusion

Vous savez désormais créer une fonction de validation mail digne de ce nom, quelques améliorations peuvent y être apportée, principalement vérifier si la partie après le dernier @ est une IP (ipv4, ipv6, …) ou un domaine composé, dans ce cas il ne faut pas faire la vérification de champs MX car elle n’aboutira à rien.

Mais au moins n’importe qui pourra entrer ces adresses spéciales sans que ce ne soit considéré comme invalide. Du moins en attendant que le dernier FILTER_VALIDATE_EMAIL intégré à PHP ne sorte.

Il est possible de faire une base de donnée en google doc spreadsheet… « Hein que quoi ?! on m’aurait caché des choses ? »

Yep yep, et c’est super simple. Bien entendu nous parlons d’une base de donnée locale utilisable uniquement dans notre document, nous ne pourrons pas la requêter facilement de l’extérieur.

Cette fonction est super utile pour gérer des plannings et connaitre approximativement le coût final sachant que chaque tâche peut être un type de travail différent.

Pratique

Tout d’abord nous allons nous créer une feuille de tableur toute simple récapitulant nos différents prix (faux les prix ) :

Feuille Tarifs

Puis maintenant notre planning de base, trois colonne Nom de la tache, Type de la tache correspondant à la référence dans la page Tarif, et la durée horaire de chaque tâche :

Planning étape 1

A présent comme vous l’aurez deviné le but du jeu est de faire remplir la 4e colonne avec les bons montants en utilisant la feuille Tarifs.

Pour cela nous allons utiliser la fonction QUERY(). Le premier paramètre est la plage de donnée que nous voulons requêter, c’est donc ici la plage A:C (les collonnes A à C) de la page Tarifs, donc la plage : Tarifs!A2:C10 par exemple, mais il faut rajouter nos $ pour ne pas modifier ces valeurs lorsque nous allons répliquer la formule : Tarifs!$A$2:$C$10

Le deuxième paramètre est notre requête, ici nous voulons récupérer le tarif horaire correspondant à la référence dans la colonne B de notre feuille Planning. Notre requête pour la tâche 1 va donc être :

SELECT B WHERE A=B2

Et oui mais petit problème, on mixe deux pages là, on veut bien récupérer le contenu de la colonne Tarifs!B lorsque Tarifs!A=Planning!B2, mais comment google spreadsheets saura que B2 fait partie de la feuille planning ???

Il nous suffit de concaténer :

CONCATENATE("SELECT B WHERE A='",B2,"'")

Notre requête finale sera donc :

=QUERY(Tarifs!$A$2:$C$10,CONCATENATE("SELECT B WHERE A='",B2,"'"))*C2

Vous remarquez le petit *C2 pour prendre en compte le nombre d’heures.

Maintenant appliquons la requête dans une cellule et dupliquons là dans les autres et cela nous donne :

Feuille planning - Etape 2

Conclusion

Vous avez maintenant appris à requêter en google spreadsheets, les possibilités sont impressionnantes et seulement une d’entre elle est survolée par cet article. J’avais cependant envie de vous la faire découvrir étant donné le gain de temps apporté.

Si vous voulez plus d’infos, je vous invite à consulter la page de google concernant ce langage de requêtage : http://code.google.com/intl/fr/apis/visualization/documentation/querylanguage.html

A bientôt !

Générique HIMYM

Et oui !!! hier fut le grand retour d’une de mes séries favorites pour une 6ème saison : How I met your mother.

Vous en avez surement entendu parler, une série où nous sommes en 2030 et où le protagoniste Ted Mosby, raconte à ces enfants agés de 15 et 16ans comment il a rencontré leur mère ! L’entière série est donc un retour en arrière qui suit notre époque. Bien entendu, nous n’avons jamais vu la mère tout au long des 6 saisons, ni sut qui elle est.

HIMYM - 601 - Enfants de Ted

Nous avons cependant quelques informations :

• Elle suit des cours dans l’université où enseigne Ted, un jour qu’il s’est trompé de cours, elle était dans la salle…
• Nous connaissons sa colocataire, Cyndi, une ex petite amie à Ted
• Nous avons aperçu chez Cyndi un bout de son pied et sa cheville
• Ted possède un parapluie jaune qu’il a trouvé dans une soirée, et qui lui a appartenu
• Ted habite enfin dans la maison qu’il partagera avec elle et ces enfants dans le futur
• surement deux ou trois autres que j’oublie

Cet épisode nous en apprend un autre plutôt sympathique.

Attention SPOIL

Dans cet épisode, par déduction, nous commençons par ce qu’il semble être la fin de la saison 6, un fameux mariage auquel Ted et Marshall sont présent, et au cour duquel sa dulcinée sera présente. Nous apprenons à la fin de l’épisode, qu’il est le témoin de ce mariage, ce n’est donc pas le sien, mais celui d’une connaissance commune à Ted et Marshall… Barney ? Robin ? nous n’en savons pas plus, mais il semblerait bizarre que ce soit l’un de ces deux là au vu de leur réticence au mariage.

HIMYM - 601 - Mariage, Ted témoin

Après la première minute, un gros retour en arrière, pour nous montrer une occasion quelque mois auparavant où Ted est stressé et gratte l’étiquette de sa bierre. Tout l’épisode se passe à ce moment là.

Parallèlement, Marshall et Lily essayent d’avoir des enfants, mais le fait que Marshall partage ça avec tout le monde, ces collègues, sa famille, ses voisins, ne semble pas particulièrement enthousiasmer Lily… Ajoutons à cela le caractère plus qu’envahissant du père de Marshall, et ce dernier devra se retenir plus longtemps encore !

HIMYM - 601 - Cindy changing her side

Nous retrouvons également Cindy (sensée détester Ted), et une fille blonde que Ted voudrait approcher, qui pensons nous pourrait n’être autre que sa colocataire, et pourquoi pas la mère tant recherchée, mais bon la deuxième idée est que c’est impossible en début de saison ^.

A un moment de l’épisode, Cindy voit Ted et surprise ! Elle lui pardonne et le remercie de lui avoir ouvrir les yeux qu’elle a compris pourquoi ils n’étaient pas fait l’un pour l’autre. Soulagement de Ted qui se dit qu’il pourrait ainsi plus facilement approcher sa blonde de copine…

Cependant il n’est pas au bout de ses peines, et quand enfin il prend le courage d’aller voir la blonde, arf, pile le moment qu’elles choisissent avec Cindy pour s’embrasser !!!

Nous retrouvons bien évidemment les deux derniers protagonistes principaux dans la personne de Robin, déprimée et addict aux gâteaux, vêtements amples et appliquant la consigne : « la crasse protège des microbres », ainsi que Barney, toujours le même, toujours aussi manipulateur, abusant de son coté des « Preums »…

HIMYM - 601 - Robin déprimée

Du côté de Robin, c’est bizarre mais elle est plus déprimée encore depuis ça rupture avec Don que lorsqu’elle a rompu avec Ted ou avec Barney.

Bien entendu toujours des petits retours en arrières anecdotique bien sympathique.

Si toute la saison se calque sur le même plan, nous aurons à chaque épisode des informations sur le mariage (dernier épisode de la saison selon l’hypothèse), puis un retour en arrière dans lequel se déroulera l’action.

Si je calcule bien : le présent est en 2030 <- le moment raconté est en 2011 (mariage) <- l’action se passe en 2010 (épisode) <- et nous avons des anecdotes du passé

Tout ceci peut sembler bien embrouillant, mais que nenni, il n’en est rien, ça accentue le suspens et va en continuité avec l’esprit original de la série.

Bref cela promet une suite de saison plutôt sympathique, même si on aimerait bien enfin rencontrer la mère… Mais bon, tant qu’il y aura de l’audience, il y aura un scénario, et tant qu’il y a un scénario, nous ne rencontrerons pas la mère car nous aurions affaire à une aberration avec le titre et l’essence même de la série.

Demain, un petit tuto bien sympathique sur google Spreadsheets…

Il y a quelques jour, le navigateur haït par tout développeur Web quel qu’il soit est sortie dans une nouvelle mouture dont le slogan est : « Bienvenue dans un monde plus beau ».

En passant leur banière est absolument horrible :

Bannière IE9 "Bienvenue dans un monde plus beau"

MEEEEEESSSS YEUUUXXXXXX !!! C’est quoi ce noir qui sort de nul part contrastant bien entendu avec le blanc, mais pas du tout avec l’arrière plan ! Cela ferait hérisser les cheveux de n’importe quel ergonome Web, en passant  en Noir et Blanc, le noir ne se différencie que très peu du bleu…

Bon une fois Internet Explorer 9 béta lancé, une erreur comme quoi la page ne peut se charger, amélioration ici, le message d’erreur est discret et non bloquant. Un petit click sur OK et … ah ! un autre message d’erreur… bon ben on reclic sur OK… ah ! nous revoilà sur le premier message d’erreur… Bon je suis mauvaise langue, c’est une béta, c’est normal.

Un message nous indiquant que le chargement de la page est surement ralentie par l’utilisation de plugin et nous invite à les désactiver en un clic. Petite interface bien pratique.

Nous apprenons ici que IE9 gère chaque page indépendamment, le premier onglet était buggé, mais pas le navigateur.

Au niveau du navigateur en lui-même quelques changements :

Interface IE9 béta

Et surprise, à l’instar de google chrome nous retrouvons une certaine simplicité d’utilisation : notamment avec la barre unique servant à la fois à la recherche et à entrer des urls. A l’ouverture d’un onglet nous avons également l’affichage des sites récents introduits il y a quelques temps par Safari. Je ne m’en sers que rarement mais nombre de gens y trouveront leur bonheur.

Maintenant du côté technique, IE9 est-il aussi respectueux des standards qu’il le prétend ?

Technique

Acid3

Pour savoir cela direction Acid3 :

IE9 et acid3

Pour rappel, voici les scores des autres navigateurs :

• Firefox 3.6 : 94%
• Safari 5 : 100%
• Chrome : 100%
• IE6 : 12%
• IE7 : 14%
• IE8 : 20%

Quand on voit le retard des précédentes version de Internet Explorer, la réussite presque parfaite de ce test montre une grande évolution, mais surtout permet d’envisager une perte de temps négligeable pour les développeurs.

Précédemment, il fallait gérer tout les cas particuliers, majoritairement présents sur IE6, IE7 et IE8, désormais il faudra toujours gérer IE7 et IE8, mais IE9 s’en sortira de lui même. (comment ça IE6 a disparut de ma liste… )

Javascript

Maintenant continuons nos investigations par un petit test de performance Javascript.

Pour réaliser ce test j’ai utilisé SunSpider, en fermant toutes les applications éventuellement nuisibles aux résultats sur le PC. Tout les navigateurs sont testés dans les même conditions.

Le score indiqué en nombre de point et la somme du classement des navigateurs pour chaque tâche. (Ainsi sur crypto-md5, IE9 arrive 3e il a donc 1 point, Firefox arrive dernier 0 points, Safari 1er donc 3 points et enfin Chrome 2eme par conséquent 2points)

Total Benchmarks Javascript

Voici le test complet en PDF téléchargeable ici :
Benchmarks Javascript – comparatifs IE9, Safari, Firefox et Chrome
Ou une lecture en ligne est disponible ici :
Benchmarks Javascript – lecture en ligne

Quelle ne fut pas ma surprise de voir le score de IE9 monter à 38 points, suivant de près Safari à 44 points et aussi de près chrome à 59 points. Firefox est tellement lent qu’il est presque hors concours : 11 points, avec des temps très longs, et même trop longs pour des fonctions simples.

IE9 arrive même à être le premier sur plusieurs temps de test, ce qui était in-envisageable précédemment.

WebSockets

Petite déception également, IE9 ne gère pas les WebSockets qui est quand même une évolution majeure en Web. Connaissant la rétiscence de Microsoft à intégrer de nouvelles technologies dans son navigateur, nous en avons pour quelques années encore avant que cela ne soit géré.

Pour ceux qui se demandent ce qu’est un WebSocket je vais le détailler rapidement. Je ferais surement un article plus complet avec node.js et les websockets dans le futur.

Lorsque un navigateur demande une page à un serveur, il ouvre une session, puis une connexion. Dès que le serveur retourne un message, la connexion se ferme. La session quant à elle reste ouverte plus longtemps, jusqu’à ce que le client devienne inactif et ne demande plus de pages pendant une certaine durée. Le problème est que nous avons deux transactions unidirectionnelles, d’un côté on fait une demande, de l’autre on retourne une réponse, mais dès que la réponse est arrivée la connexion se coupe et le serveur ne peut par conséquent plus envoyer de données jusqu’à ce que le client lui en redemande.

C’est très handicapant pour un chat par exemple, des méthodes existent pour outrepasser cette limitation, notamment utiliser du Pull grâce à ajax (rester en attente de donnée, et dès que des données arrivent depuis le serveur, on se remet en attente juste après la clôture de la connexion), ou tout simplement demander, toujours en ajax, toutes les X millisecondes si de nouveaux messages ne sont pas arrivés sur le serveur. Du coup les performances sont fortement réduites, le serveur tout le temps sollicité en connexion, etc…

Les websockets permettent justement de laisser une connexion ouverte en permanence depuis le serveur, ce dernier peut donc envoyer des infos quand il le veut, tout comme le client, nous avons donc une communication bidirectionnelle, voir omnidirectionnel en cas de communication à plusieurs, nous pourrons même nous affranchir du passage par le serveur.

The end…

Je pense que IE9 béta est il est vrai une grande évolution de Internet Explorer, plus respectueux des standards, plus performant au niveau Javascript, intégrant une gestion indépendante des onglets, en bref possédant ce qu’il doit avoir, pour un vrai navigateur moderne.

Bon, bien sur le mot de la fin est que je ne quitterai pas ni mon safari sous mac où mon chrome sous windows pour IE9, je trouve que l’interface a trop de fioritures, tels que les dégradés un peu partout, où encore le texte des onglets qui ne se différencie pas correctement de leur arrière plan. L’œil est inconsciemment attiré par ces détails, et le cerveau se concentre moins sur l’essentiel.

See you soon !!!

Posons le décor : tu viens d’arriver dans un hôtel, tu t’installes confortablement afin de profiter de la connexion internet offerte gratuitement et de pouvoir téléphoner à ta tante Gertrude gratuitement grâce à ton compte SIP, et là ! Misère de misère, les ports SIP sont  bloqués, logique, l’hôtelier préfère faire payer les communications avec une légère surtaxe ! [IRONIE ON] Oui oui, cet exemple est sorti de mon imagination, non non, ça ne m’est jamais arrivé… [IRONIE OFF]

Le problème est le même si tu désires jouer à un jeu dont les ports sont bloqués.

Ce qu’on va donc réaliser, c’est un VPN entre son ordinateur, appelons le A, et son serveur personnel S situé chez soi ou encore chez un hébergeur, S doit bien entendu être affranchi de toute limitation au niveau des ports. S doit également posséder un serveur SSH accessible depuis un port débloqué à l’hôtel. Généralement le port 22 par défaut est débloqué, cela ne devrait donc pas poser de problème.

Pour rappel un VPN (Virtual Private Network) permet de se connecter à un réseau distant et d’envoyer tout le trafic réseau par cette nouvelle connexion.

Mais quels sont les avantages de cette méthode par rapport à un VPN PPTP, L2TP ou OpenVPN ???

Pratiquement aucun, ce tunnel va juste être très rapide à configurer, seulement quelques lignes de commandes seront nécessaires, sécurisé grâce au tunnel SSH, et souvent les ports requis par PPTP ou L2TP sont bloqués.

Bon, un petit schémas pour résumer peut-être ?

VPN et tunnel SSH, schémas

C’est plus clair ? En fin de compte, tout le trafic transitera au travers d’un tunnel SSH, notre ordinateur sera donc connecté au réseau distant (192.168.0.0) comme s’il en faisait parti.

Bien maintenant, on sait où on va, mais on sait pas trop comment ! Pas de panique je ne te largue pas comme ça juste avec le principe ^^, la théorie est faite, place à la pratique.

Configuration du server SSH

Quelques petits prérequis afin que notre tunnel s’établisse correctement, nous allons devoir modifier un petit peu la configuration de notre serveur SSH :

Ce fichier est généralement situé ici : /etc/ssh/sshd_config
Vous devez vérifier que les réglages suivant soit paramétrés comme ceci :

X11Forwarding yes

PermitTunnel yes

PermitRootLogin yes

Ensuite il nous faut activer la redirection des paquets, désactivé par défaut sur la majorité des Linux.

sudo echo 1 > /proc/sys/net/ipv4/ip_forward

Puis finalement redemarrer le serveur SSH :

sudo /etc/init.d/sshd restart

Création du Tunnel SSH

Sur la machine cliente (Ordinateur A sur notre schémas), la commande permettant de creer le tunnel est celle-ci :

sudo ssh -NTfv -w 11:10 root@ip_du_serveur_S

Passons en revu les différentes options :

• N : empêche l’execution d’une commande
• T : n’alloue pas un terminal TTY à cette instance de connection SSH
• f : executé en arrière plan
• v : mode verbose, afin d’afficher les différents messages
• w : lie deux interfaces, nous allons avoir l’interface tun11 sur Ordinateur A et tun10 sur Serveur S. Les deux auraient pu être tun10 ou encore tun0, mais je voulais bien les différencier pour ne pas les confondre. De plus dans mon cas tun0 est déjà utilisé sur mon serveur pour un VPN.
• C : je ne l’ai pas mise, à essayer avec, cette option permet de compresser les données, du coup gain énorme de bande passante, mais perte de réactivité, pour des jeux à bannir, pour des page web à utiliser.

Désormais, si tout c’est bien passé, nous avons notre tunnel SSH entre notre serveur et notre pc, il ne nous reste plus qu’a configurer les interfaces TUN et rediriger tout le traffic vers ce tunnel pour faire un pseudo-vpn.

Configuration des interfaces TUN

Sur notre machine cliente Ordinateur A :

sudo ifconfig tun11 192.168.0.61 pointopoint 192.168.0.60

si Ordinateur A tourne sous osx :

sudo ifconfig tun11 192.168.0.61 192.168.0.60

et sur notre serveur distant S :

sudo ifconfig tun10 192.168.0.60 pointopoint 192.168.0.61

ou sous osx :

sudo ifconfig tun10 192.168.0.60 192.168.0.61

Ces deux commandes a exécuter permette de définir une adresse ip aux interfaces TUN et de les lier en mode point-à-point pour simplifier les choses à l’interface distante.

Pour tester la configuration, faites un ping vers 192.168.0.60 depuis l’ordinateur A :

ping 192.168.0.60

Si 192.168.0.60 répond, c’est que vous êtes correctement relié au réseau distant.

Faites de même avec 192.168.0.61 depuis le serveur S pour tester dans l’autre sens.

Redirection du trafic et création des routes

Depuis le serveur S, nous allons redirigé tout le traffic envoyé par l’ordinateur A au travers de l’interface eth0 relié au réseau local.

sudo arp -sD 192.168.0.61 eth0 pub

Désormais, tout est bouclé du côté serveur, vous pouvez fermer votre terminal distant.

Maintenant sur ordinateur A, nous allons configurer les routes.

Pour voir les routes déjà configurée :

netstat -nr

sur linux :

sudo route add -net 192.168.0.0 netmask 255.255.255.0 gw 192.168.0.61 tun11
sudo route add ip_du_serveur_S gw 172.16.0.254 eth0
sudo route del default gw 172.16.0.254 eth0
sudo route add default gw 192.168.0.61 tun11

sur mac :

sudo route add -net 192.168.0/24 192.168.0.61
sudo route add ip_du_serveur_S 172.16.0.254
sudo route delete default 172.16.0.254
sudo route add default 192.168.0.61

And it’s done !!!

Un petit test dans un navigateur depuis Ordinateur A sur le site http://monip.org devra montrer l’IP internet du réseau du serveur S. Si ce n’est pas le cas, il faut retester les ping, puis si tout est bon, vérifier les routes, il y a surement une erreur de ce coté là.

Edit: Il se peut que vous n’arriviez pas à joindre des adresses Web, si c’est votre cas,un petit ping des dns google :

ping 8.8.8.8

Si le ping passe, alors c’est que vos DNS ne sont pas correct, allez dans vos préférences réseau et changez les par :

8.8.8.8
4.4.4.4

(Ce sont les serveurs DNS de google).

Et normalement tout devrais fonctionner.

Si le ping 8.8.8.8 ne passe pas, vous devez surement avoir un problème dans votre configuration des routes, vérifiez là.