Installation de IIS (Windows Server 2012)

Avant de pouvoir déployer mon application web de Visual Studio vers mon serveur, il faut préparer celui : nous allons y installer IIS.

Allons dans le gestionnaire de serveur (Server Manager) :gestionnaire_serveur

Dans « Gérer », choisissons « Ajouter des rôles et fonctionnalités » : add_roleOn passe l’étape « avant de commencer », on choisi l’installation basée sur un rôle ou une fonctionnalité, et on sélectionne le serveur.

install_typeselect_server

Nous choisissons alors le rôle Server web (IIS)

roleNous validons les dépendances :

role_depDans les fonctionnalités, nous ajoutons sous « .NET Framework 4.5 Features » ASP.NET 4.5 : fonctionnalitesDans les « Services de rôle », nous ajoutons ASP.NET 4.5 et ses dépendances :services_role services_role_depIl n’y a plus qu’à lancer l’installation :

install

Changer la langue du serveur (Windows Server 2012)

Mon serveur est actuellement en anglais, et je veux le mettre en français :

Allons dans le Panneau de configuration (Control panel) :

configOn sélectionne la catégorie « Clock, Language, and Region » :clockPuis on sélectionne Language :languageIci on peut visualisé les langues installées, et en ajouter : Add a language :add_languageA noter qu’on aurait pu directement choisir le Add a language directement dans le Control panel.add_language_directOn choisie la langue à ajouter : français et la région : français (France).

select_language region_language

La langue est ajoutée dans le menu :

languefr1Nous allons descente la langue « English » (ou monter la langue « francais ») afin de positionner la langue « français » au dessus :

languageup

languagedown

Nous  rentrons dans la langue « francais » et téléchargeons le paquet :download_languageL’installation s’effectue :

dllanguagedownloadok

Au redémarrage, le serveur est en français :

okfr

Renommer un serveur (Windows Server 2012)

Pour renommer un serveur, il faut aller dans le gestionnaire de serveur (Server Manager) :gestionnaire_serveur

Puis dans Local Server et sur le nom du serveur (ici : « MonServeur »).

localserverCela va ouvrir la page System Properties. On clic sur Change.systemPropertiesOn peut alors changer le nom du serveur (ici « MonServeur » en « Server_Prod »).

oldNamenewName

On enregistre, et on redémarre le serveur.

saveAu redémarrage, le nom du serveur a bien été modifier.

localServername

 

Faire pointer tous les sous-domaines vers le domaine principal chez ovh

Souhaitant rediriger tous les sous-domaines vers le domaine principal (pour ensuite pouvoir résoudre ces sous-domaines côté serveur), j’ai ajouté sur OVH une entrée DNS CNAME :

– Dans la partie Domaine & DNS, il faut séléctionner Zone DNS

zdns

– On ajoute une entrée de type CNAME

zdns2

On veut faire pointer *.lucrece.net vers lucrece.net

cname

On peut alors vérifier dans la liste la prise en compte de cet alias :

confirm

Retrouver l’Outil Capture (SnippingTool.exe) sur windows server 2012.

Pour retrouver l’Outil Capture qui n’est pas directement présent dans windows server 2012, il faut installer le service Desktop Experience que l’on trouve dans les Features sous User Interface and Infrastructure.SnippingTool1

On accepte les dépendances :

SnippingTool2

On vérifie les installations :

SnippingTool3

Enfin, on laisse les installations se faire :

SnippingTool4

Après redémarrage du serveur, on retrouve l’outil dans les tuiles ou dans system32 :

%windir%\system32\.exe.

SnippingTool6

SnippingTool5

Ajout d’un menu dans l’interface d’administration de WordPress

La seconde étape dans la création de mon plugin « MyBookCase » est l’ajout d’un menu dans l’interface d’administration de WordPress :

On souhaite un menu de type :menu MyBookCaseDans le fichier du plugin on ajoute une fonction register_MyBookCaseMenu. dans cette fonction on appelle la fonction wordpress add_menu_page (codex wordpress).

<?php

function register_MyBookCaseMenu() {
   add_menu_page('MyBookCase', 'MyBookCase', 'manage_options', 'lcrc_mybookcase', '',   '', 30);
}

?>

avec en paramètre :

  1. le titre de la page : ‘MyBookCase’
  2. le titre du menu : ‘MyBookCase’
  3. le niveau d’autorisation utilisateur pour voir le menu : ‘manage_options’
  4. le nom référence du menu : ‘lcrc_mybookcase’
  5. la fonction d’affiche de la page :’ ‘
  6. l’icône du menu : ‘ ‘
  7. la position dans l’interface d’administration : 30 pour être entre les commentaires (25) et la barre de séparation (59)

Maintenant nous allons ajouter les sous-menu en appelant la fonction wordpress add_submenu_page (codex wordpress).

<?php
function register_MyBookCaseMenu() {
   add_menu_page('MyBookCase', 'MyBookCase', 'manage_options', 'lcrc_mybookcase', '',   '', 30);
   add_submenu_page('lcrc_mybookcase', 'Tous les livres',
        'Tous les livres', 'manage_options', 'lcrc_mybookcase','');
   add_submenu_page('lcrc_mybookcase', 'Ajouter un livre', 
        'Ajouter un livre', 'manage_options', 'MyBookCase/lcrc_mybookcase.php','');
}
?>

avec en paramètre :

  1. le nom référence du menu parent : ‘lcrc_mybookcase’
  2. le titre de la page : ‘Tous les livres’ ou ‘Ajouter un livre’
  3. le titre du sous-menu : ‘Tous les livres’ ou ‘Ajouter un livre’
  4. le niveau d’autorisation utilisateur pour voir le sous-menu : ‘manage_options’
  5. le nom référence du menu : ‘lcrc_mybookcase’ ou ‘MyBookCase/lcrc_mybookcase.php’
  6. la fonction d’affiche de la page :’ ‘

Il ne nous reste plus qu’à déclencher notre fonction register_MyBookCaseMenu avec la fonction wordpress add_action (codex wordpress).

<?php

add_action('admin_menu', 'register_MyBookCaseMenu');

?>

avec en paramètre :

  1. le nom de la fonction à laquelle on va attacher notre nouvelle fonction : ‘admin_menu’
  2. le nom de la fonction à attacher : ‘register_MyBookCaseMenu’

Ce qui donne dans son ensemble :

<?php
/*
Plugin Name: MyBookCase
Plugin URI: http://dev.lucrece.net/mybookcase/
Description: Gestion de livres : lus, en cours, à lire.
Version: 0.1
Author: Lucrèce
Author URI: http://dev.lucrece.net/
*/

add_action('admin_menu', 'register_MyBookCaseMenu');

function register_MyBookCaseMenu() {
   add_menu_page('MyBookCase', 'MyBookCase', 'manage_options', 'lcrc_mybookcase', '',   '', 30);
   add_submenu_page('lcrc_mybookcase', 'Tous les livres',
        'Tous les livres', 'manage_options', 'lcrc_mybookcase','');
   add_submenu_page('lcrc_mybookcase', 'Ajouter un livre', 
        'Ajouter un livre', 'manage_options', 'MyBookCase/lcrc_mybookcase.php','');
}
?>

Déclaration d’un document HTML5

Ceci est un sous-article de l’article : Structure d’un document HTML5
  • Doctype :

Pour identifier un document comme étant de l’HTML5, on commence par déclarer son doctype :

<!DOCTYPE html>
  • <html>, <head> & <body> :

Ce sont des tags facultatifs.

– L’élément <html> est la racine du document. En plus des attributs habituels, il possède un attribut manifest qui référence l’adresse du cache manifest du document. il contient les éléments <head> et <body>.

– L’élément <head> contient les informations relatif au document : il possède obligatoirement un élément <title> qui indique le titre du document. Il peux également contenir les éléments suivant :

  • <meta>

– Définir le charset :

<head>
  <meta charset="UTF-8">
</head>

– Paire name/content pour les keywords, informations sur l’auteur, ou autres metadata :

<head>
  <meta name="keywords" content="HTML5, Microsoft, 70-480">
  <meta name="author" content="Lucrèce">
</head>

– Entête HTTP (ex : rafraichissement de la page, ou redirection)

<head>
  <meta http-equiv="refresh" content="10">
</head>
  • <style>

Permet de définir une région CSS dans le <head>. Cette balise peux également être utilisée dans le body en précisant l’attribut scoped.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Titre de la page</title>
    <style>
       body {background: black; }
       p {color: red;}
    </style>
  </head>
  <body>
    <p>
      Paragraphe rouge.
    </p>
    <div>
      <style scoped="scoped">
       p {color: blue;}
      </style>
      <p>
        Paragraphe bleu.
      </p>
    </div>
  </body>
</html>
  • <link>

Cette balise définie un lien vers une ressource externe, la plupart du temps une feuille de style CSS :

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
  • <base>

Cette balise permet de définir une url de base pour les liens relatifs ainsi que leur comportement. Dans cette exemple les url relatives seront préfixées par  « http://dev.lucrece.net/images/ », et tous les liens seront ouverts dans une nouvelle fenêtre.

<head>
  <base href="http://dev.lucrece.net/images/" target="_blank">
</head>
  • <script>

cette balise définie ou inclut du script client (comme du Javascript) : Elle peux définir le type de langage et son charset par ses attributs type et charset. Elle peut inclure un fichier externe par son attribut src (la balise est alors vide). Les attributs defer et async permettent d’exécuter le script après le chargement de la page (defer) ou de façon asynchrone (async).

<head>
  <script type="text/javascript">
     alert("Hello World");
  </script>
<script src="javascript.js" defer="defer" ></script>
</head>
  • <noscript>

Cette balise permet d’ajouter du contenu spécifique si les scripts sont désactivés sur le client.

<head>
  <script>
    alert("Hello World");
  </script>
  <noscript>
    <link rel="stylesheet" type="text/css" href="noscript_style.css">
  </noscript>
</head>
<body>
  <noscript>Les scripts sont désactivés</noscript>
</body>

– L’élément <body> défini le corps du document.

<!DOCTYPE html>
<html>
  <head>
    <title>Titre de la page</title>
  </head>
  <body>
    <h1>Titre</h1>
    <p>Paragraphe.</p>
  </body>
</html>

Structure d’un document HTML5

Item : Implement and Manipulate Document Structures and Objects (24%) >>> Create the document structure

Détail :This objective may include but is not limited to: structure the UI by using semantic markup, including for search engines and screen readers (Section, Article, Nav, Header, Footer, and Aside); create a layout container in HTML.

1. Déclaration d’un document HTML5

2. Mise en page du texte HTML5

3. Nouveaux  tags sémantiques HTML5

Cet article est en cours d’élaboration.