MICROsouffle

Articles avec #tuto tag

Astuce : Replier tous les nœuds dans un fichier de code Visual Studio.

13 Mars 2018 , Rédigé par Antoine SEJALON Publié dans #Astuces, #Visual studio, #tuto

Astuce : Replier tous les nœuds dans un fichier de code Visual Studio.

Bonjour, aujourd'hui une petite astuce Visual Studio qui vous facilitera la vie.

Il arrive que l'on veuille replier les nœuds des différentes fonctions dans un fichier de class pour avoir une meilleure visibilité de notre code. Pour ce faire, vous pouvez utiliser le raccourci suivant :

 

Ctrl + m

 

une indication apparaît en bas de l'écran

 

 

Astuce : Replier tous les nœuds dans un fichier de code Visual Studio.

 

Cliquez ensuite sur :

 

Ctrl + a

 

Tous les nœuds se replient.

Pour revenir au mode normal, refaites la combinaison Ctrl + m.

 

Profitez bien de cette astuce et bon code =)

Lire la suite

HTML/Css : Agencer les éléments html facilement grâce au "display flex"

12 Mars 2018 , Rédigé par Antoine SEJALON Publié dans #tuto, #Astuces, #html-css

Bonjour et bienvenue dans ce tuto. Nous allons voir comment utiliser l'attribut css "FLEX".

qu'est-ce que "flex" ?

Flex est un attribut css de la propriété "display". A la différence des display inline et block (pour les plus courants), flex permet plus de précision dans le placement d’éléments html.

Nous allons pouvoir placer les éléments enfant suivant 2 axes, nous donnant par défaut 9 positions :

HTML/Css : Agencer les éléments html facilement grâce au "display flex"

Ce schéma vous donne les différentes positions (basiques) possibles avec flex.

Mise en pratique

Pour tester vous pouvez créer une page html vide sous notepad++ (ou votre éditeur préféré).

Dans la balise body, ajoutez une balise <div id="test">.

Définissez la taille de votre div à width et height 100% et la taille de la div à width et height 20%. Ajoutez un background-color à la div pour la reconnaître.

 

exemple : https://jsfiddle.net/hgxdwg6q/

 

Par défaut, la balise body est en display:block

votre div se retrouve alors en haut à gauche de la fenêtre.

La première chose à faire est de passer le display à "flex" (nb: un display se pose sur le parent pour agir sur le positionnement des enfants). Nous allons ensuite utiliser la propriété "flex-flow" pour indiquer si nous voulons aligner les éléments enfants sur une ligne ou une colonne et spécifier si les éléments enfants doivent revenir à la ligne si la place ne suffit pas.

syntaxe :

  • flex-flow: row no-wrap
  • flex-flow: row wrap
  • flex-flow: column no-wrap
  • flex-flow: column wrap

 

Pour agir sur le placement, utilisez "justify-content" et "align-items". Ces propriétés possèdent les mêmes attributs (en voici les principaux) :

  • flex-start
  • flex-end
  • center

deux attributs sont un peu spécifique :

  • space-around (aligne les éléments enfant, un espace identique est ajouté entre les éléments ainsi qu'avant le premier et après le dernier)
  • space-between (ajoute un espace de taille équivalent entre les éléments mais colle le premier et dernier élément aux bord  du parent)

un petit exemple (jouez avec les propriétés de flex pour vous faire la main) : https://jsfiddle.net/nght044p/

 

Quelques exemples pour illustrer :

display:flex;

flex-flow:row no-wrap;

justify-content:center;

align-items:center;

HTML/Css : Agencer les éléments html facilement grâce au &quot;display flex&quot;

display:flex;

flex-flow:row no-wrap;

justify-content:flex-start

align-items:flex-start;

HTML/Css : Agencer les éléments html facilement grâce au &quot;display flex&quot;

display:flex;

flex-flow:row no-wrap;

justify-content:flex-end;

align-items:center;

HTML/Css : Agencer les éléments html facilement grâce au &quot;display flex&quot;

Le mot de la fin

Pour bien comprendre le fonctionnement de flex, il est impératif de faire des essais et de tester. D'autres option plus avancées existent.

 

A vos claviers et bon code =)

Lire la suite

Modifier la master page de SharePoint via SharePoint Designer 2013

4 Février 2016 , Rédigé par Antoine SEJALON Publié dans #SharePoint, #tuto

Modifier la master page de SharePoint via SharePoint Designer 2013

Bonjour,

Aujourd'hui je vais vous expliquer la marche à suivre pour modifier la master page de SharePoint en passant par SharePoint Designer 2013.

Vous devez avoir :

- Un SharePoint avec des droits de modification.

- SharePoint Designer installé.

Pour commencer, ouvrez SP Designer. Vous devriez tomber sur la page d'accueil.

Modifier la master page de SharePoint via SharePoint Designer 2013

Cliquez sur la vignette "Ouvrir le site". Vous allez alors avoir accès à une fenêtre d'explorateur Windows qui va vous permettre de choisir votre site SP.

Modifier la master page de SharePoint via SharePoint Designer 2013

Un login / mdp vous sera surement demandé. Entrez les et SP Designer s'ouvre sur le site sélectionné.

Dans la barre de gauche, vous allez trouver toutes les catégories qui vont vous servir à modifier de nombreux paramètres.

Ici, nous allons nous intéresser au menu "Page maître". Cliquez dessus.

Modifier la master page de SharePoint via SharePoint Designer 2013

Pour ajouter une page maître, cliquez sur le type de page maitre voulu dans la barre de menu.

Modifier la master page de SharePoint via SharePoint Designer 2013

Votre page maitre apparait dans la liste des pages maîtres.

Modifier la master page de SharePoint via SharePoint Designer 2013

Il ne vous reste plus qu'à cliquer sur son nom pour entrer dans la vue de parametre de la page et de cliquer sur "Modifier le fichier".

Modifier la master page de SharePoint via SharePoint Designer 2013

Conclusion :

Grâce à la modification de la page maître existante ou à la création d'une nouvelle page maître, vous pourrez personnaliser à souhait votre site SP.

Dans l'onglet "Tous les dossiers" (en dessous de "Pages maîtres) vous pourrez y stocker les fichier CSS et JS qui vous permettront de customiser encore plus votre site SP.

Merci de votre lecture.

AS

Lire la suite