Formation Intranet - IUFM Aix-Marseille

Niveaux :

base

initié

avancé

Organisation générale de l'intranet :structure et navigation

I. Intranet et réseau pédagogique d'établissement: une approche globale
L'intranet : un élément du Réseau Pédagogique d'Etablissement Informatique scolaire: problèmes juridiques

II. Les éléments d'un intranet:
A. Le matériel existant B. Les applications possibles C. Un site web pour centraliser et organiser les accès D. Un environnement pour favoriser la publication de ressources pédagogiques

III. Les niveaux d'organisation à gérer :
A. Les règles de navigation dans le site : Organisation technique : l'arborescence de l'intranet

Niveaux :

base

initié

avancé

Gestion de la mise en page commune à toute les pages du site avec des feuilles de style CSS.

1. Rappel : notions de base sur les balises HTML
1. Commencer avec les feuilles de style

Niveaux :

base

initié

avancé

Interactions et automatisations dans un site avec JavaScript

I. Notions de base pour commencer avec JavaScript
A. Pour débuter avec JavaScript... B. Manipulation de contenu dans une page C. Utilisation de fonctions D. Utilisation des méthodes du DOM pour accéder aux éléments de contenu ou de style

A. Pour débuter avec JavaScript...

Cette page contient des exemples de scripts illustrant le fonctionnement de base de JavaScript.
Pour mieux les comprendre, il est conseillé de la consulter en parallèle avec le code source des différents exercices. Pour chaque exemple vous trouverez un lien vers une page contenant le code étudié.
Il est conseillé de télécharger cette page (clic droit > "Enregistrer sous..." dans un dossier de travail sur votre poste puis de l'éditer avec un éditeur HTML ou texte (HAPedit par ex.).

Cette premiere série d'exemples utilise des balises SCRIPT intégrées à différents endroits du fichier HTML et qui contiennent du code JavaScript.
Le lancement de ce code peut se faire de différents manières: les exemples ci-dessous illustrent les possibilités existantes.

Exemple 1: lancement direct par intégration d'une balise SCRIPT dans la page (BODY)

Lancement direct: ce texte est créé par le script placé dans la balise P juste avant l'alerte. La fonction write() utilisée intègre le texte exactement au point d'ouverture de la balise SCRIPT qui la contient.

code de la balise SCRIPT intégré dans la page:
<script language="JavaScript"> document.write("Lancement direct: ce texte est créé par le script placé dans la balise P juste avant l'alerte. La fonction write() utilisée intègre le texte exactement au point d'ouverture de la balise SCRIPT qui la contient."); </script>

Réalisez un script qui lance une fenètre d'avertissement avec le texte suivant : "Bonjour tout le monde"
Vous utiliserez la fonction alert() de façon similaire à write().

Exemple 2: lancement anticipé par une balise SCRIPT dans la balise HEAD de la page

L'énervante boite de dialogue que vous subissez au chargement de cette page est générée par une fonction alert() lancée par un script situé dans la balise HEAD de cette page.
Code de ce script:
<script language="JavaScript"> alert("Je suis créé par un script intégré dans la balise HEAD de cette page.\n Tant que vous ne cliquerez pas, la suite de cette page (BODY) attendra son affichage !"); </script>

Exemple 3: lancement par un évènement du navigateur

Cet exemple illustre l'utilisation du gestionnaire d'évènement onLoad appliqué à la balise BODY: il permet de déclencher un script lorsque le chargement de l'élément auquel il est appliqué (BODY dans cet exemple) est terminé.
D'un façon plus générale, les gestionnaires d'évènements sont des attributs de balise HTML qui prennent comme valeur du code JavaScript.
Si vous consultez le pied de cette page vous trouverez le résultat d'un appel JavaScript qui modifie la propriété innerHTML pour ajouter à la page du code HTML (dans cet exemple le code est ajouté à la fin de la balise BODY, ce qui le fait apparaître en bas de page).
Code HTML de cet exemple:
<body onLoad="document.body.innerHTML += '<p class=\'genereJS\'>Je suis ajouté au code HTML de la page par <b>BODY onload= ...cettePage.innerHTML += ...</b> je suis donc placé en bas de page...<br><a href=\'#ex3\'>Retour exemple 3</a></p>';">

Réalisez un script qui lance une fenètre d'avertissement avec le texte suivant : "Au revoir tout le monde" lorsque l'on quitte la page.
Vous utiliserez la fonction alert() et le gestionnaire d'évènement onUnload().

Exemple 4: lancement par un évènement utilisateur

Cliquez ici pour l'alerte: 1ère méthode pour lancer par un lien une fonction javascript (alert() dans cet exemple)
code HTML de ce lien:
<a href="JavaScript:alert('Vous avez cliqué ici !');">Cliquez ici pour l'alerte</a>

Cliquez maintenant ici: autre méthode pour lancer une fonction javascript à partir d'un lien
code HTML de ce lien:
<a href="#" onClick="alert('Vous cliquez vraiment n\'importe où !');">Cliquez maintenant ici: </a>
onClick est un autre exemple de gestionnaire d'évènement: le code JavaScript qu'il contient est lancé lorsque l'utilisateur clique sur le lien.
Parmi les autres gestionnaires d'évènements couramment utilisés: onMouseover (déclenché lorsque la souris survole l'élément), onMouseout (la souris quitte l'élément), onSelect lorsqu'un élément de formulaire est sélectionné. Pour plus de détails sur les gestionnaires d'évènements, consultez cette page (site SELFHTML).

Réalisez un script avec la fonction saisie2alerte() qui lance une fenètre demandant la saisie d'un texte par l'utilisateur puis affiche la saisie dans une boite d'avertissement. Vous utiliserez la fonction JavaScript prompt("texte de la boite de saisie").
La valeur saisie est récupérée en attribuant une valeur à l'appel de prompt : var_txt = prompt("texte...");
La valeur récupérée sera affichée par une boite d'averissement (fonction alert() ). avec le texte suivant : "Au revoir tout le monde" lorsque l'on quitte la page.
Vous utiliserez un lien avec une URL du type href="JavaScript: saisie2alerte();" pour lancer la fonction

B. Manipulation de contenu dans une page

Les exemples de la partie I. permettent également d'illustrer les différentes méthodes permettant d'ajouter ou de modifier le contenu d'une page HTML à l'aide de JavaScript.

Utilisation de la méthode write() : Exemple 1
Ajout par modification du contenu d'une balise (identifiée par un attribut ID) en utilisant la propriété innerHTML : Exemple 3

Exemple 5: utilisation d'une fonction pour ajouter du code HTML

Utilisation d'une fonction utilisateur ajouter_html("html à ajouter" , "ID_balise_cible") permettant d'ajouter n'importe quel portion de code HTML ("html à ajouter") à n'importe quelle balise de la page ayant un identifiant ID= "ID_balise_cible".
Cette fonction est stockée dans la balise HEAD de la page: étant ainsi lue par le navigateur avant d'afficher le BODY, elle peut donc être appelée depuis n'importe où dans la page.

Appel de la fonction ecrire_html() avec les paramètres '<br><p>Je suis le code à écrire</p>' et 'cible_exemple5':

Balise P avec ID="cible_exemple5" => le contenu HTML envoyé par le script de cet exemple vient se mettre ici.

Code HTML de l'appel de la fonction avec ses paramètres pour le onClick="..." du bouton ci-dessus:
onClick="ecrire_html('<br><p>Je suis le code à écrire</p>' , 'cible_exemple5')"

Code JavaScript de la fonction ecrire_html() :
function ecrire_html(code_html , id_balise) { document.getElementById(id_balise).innerHTML += code_html; }
=> cette fonction modifie la propriété innerHTML de la balise cible (balise ayant un ID = cible_exemple5) en lui ajoutant ( += ) le code HTML <br><p>Je suis le code à écrire</p> .

Réalisez un script avec la fonction saisie2txt() qui lance une fenètre demandant la saisie d'un texte par l'utilisateur puis affiche la saisie dans un cadre à fond gris flottant à droite de la page. Ce cadre aura comme id affichage
Pour éviter de réécrire du code, vous réutiliserez la fonction saisie2alerte() que vous combinerez avec votre fonction ecrire_html() pour obtenir la fonction finale saisie2txt()
Vous utiliserez un lien avec une URL du type href="saisie2txt();" pour lancer la fonction.

C. Utilisation de fonctions

L'utilisation de JavaScript dans une page web sera facilitée par l'usage de fonctions définies par l'auteur. L'idée est de structurer le code pour limiter au maximum la répétition des portions de code ayant une fonctionnalité identique

Code JavaScript pour la déclaration d'une fonction:
function nom_de_la_fonction () { instruction 1 ; instruction 2 ; = ensemble d'instructions délimité par des accolades }
Exemple de code HTML permettant d'appeler cette fonction à partir d'un évènement onLoad ou onClick:
<body onload="nom_de_la_fonction()"> <button onclick="nom_de_la_fonction()">

On peut ensuite faire appel à ces différentes fonctions dans le reste de la page ce qui permet d'utiliser plusieurs fois le même code.
Dans la même optique on essayera (lorsque cela n'alourdi pas trop le temps de développement du code...) de faire des fonctions "modulables" en utilisant des paramètres.
L'exemple 5 montre un cas simple d'utilisation d'une fonction avec 2 paramètres.

Exemple 6: utilisation de paramètres avec une fonction

Les boutons suivant lancent la même fonction que celle de l'exemple 5, ecrire_html() mais avec des paramètres différents:

ici la balise P avec l'id cible2

	paramètre 1: code à écrire = '<p style=\'font-size:200%; font-weight:bolder\'>Je suis gros et gras !</p>'
	paramètre 2: ID de la balise cible = 'cible2' (cad le paragraphe au-dessus).
	paramètre 1: code à écrire = '<p style=\'font-size:75%; color:red\'>Je suis petit et rouge !</p>'
	paramètre 2: ID de la balise cible = 'cible3' (cad ce paragraphe).

ici la balise P avec l'id cible3

La fonction ecrire_html() utilise les 2 paramètres de la manière suivante:
paramètre 1 est envoyé comme code HTML à ajouter ( ...innerHTML += ...) à celui de la balise ayant comme ID paramètre 2

Code JavaScript de la fonction ecrire_html ( paramètre 1 , paramètre 2 ) :
function ecrire_html(code_html , id_balise) { document.getElementById(id_balise).innerHTML += code_html; }

On peut constater que les 2 paramètres sont désignés par des variables (dans cet exemple il s'agit de code_html et id_balise) dans les instructions de la fonction.
Lors du lancement de la fonction, les valeurs passées en paramètres à la fonction prendront la place de ces variables.

D. Utilisation des méthodes du DOM pour accéder aux éléments de contenu ou de style

II. Exemples d'utilisations combinant les techniques de base
E. Afficher / masquer, modifier le style des contenus F. Modifier les contenus d'une page HTML affichée G. Créer un menu de navigation dynamiquement (utilisation de tableaux):

E. Afficher / masquer, modifier le style des contenus

F. Modifier les contenus d'une page HTML affichée

G. Créer un menu de navigation dynamiquement (utilisation de tableaux):

III. Combinaisons de scripts récupérés : les choses sérieuses commencent...
H. Combiner et modifier des scripts récupérés : fabrication d'un menu flottant automatique I. Automatisation et centralisation des éléments répétés dans les pages (Exercice 3) :

H. Combiner et modifier des scripts récupérés : fabrication d'un menu flottant automatique

fichiers de l'exercice :
1er fichier récupéré : menu vertical avec effets
[ menu_vertical_effets.htm ]
2eme fichier récupéré : menu flottant barre latérale gauche (slidebar)
[ menu_slidebar.htm]
résultat :
menu flottant, vertical, avec effets
[ total_menu.htm ]
le fichier js externe du menu :
[ total_menu.js ]

Les fichiers de départ :
[ total_menu.htm]
intègre total_menu.js et les styles CSS dans le HEAD
[total_menu.js]
stocke l'ensemble des scripts de menu_vertical_effets.htm et menu_slidebar.htm

Ces deux fichiers contiennent un script (dans le HEAD pour menu_slidebar.htm, au début du BODY pour menu_vertical_effets.htm) et une balise de style CSS.
Le but de l'exercice est de réaliser une fusion des 2 scripts pour avoir un menu "slidebar", vertical avec des effets. On se débrouillera de plus pour qu'il soit compatible avec un tableau de disciplines de la forme : tabTotal = [ ['http://url_discipline_1', 'titre discipline 1'], ['http://url_discipline_2.htm', 'titre discipline 2'],['http://url_discipline_3.htm', 'titre discipline 3'] ] pour la création des items dans le tableau vertical.
La stratégie choisie est d'intégrer l'élégant menu vertical DANS le vilain cadre créé par le menu slidebar.
On va donc opérer en plusieurs étapes :

D'abord transformer menu_vertical_effets.htm pour qu'il soit compatible avec le tableau de discipline tabTotal[ ]
modifier la fonction printMenu() qui lance la création du menu pour qu'elle crée une variable htm_men qui contiendra l'ensemble du code HTML généré par la fonction. Cette variable sera retournée lors de la fin de la fonction :

function printMenu () { .... htm_men = '<div id="Menu">'; htm_men += ... return (htm_men); }
De cette manière un appel à la fonction printMenu () évite l'appel à la méthode document.write() ce qui permettra de l'utiliser n'importe où (par ex. AVANT que le cade du menu n'ait été créé).
On externalise alors le script de menu_vertical_effets.htm dans total_menu.js.
Il faut alors créer un fichier total_menu.htm qui intègre total_menu.js lors de son chargement et les définitions CSS de menu_vertical_effets.htm ainsi que celle de menu_slidebar.htm (balises <style> dans le HEAD). On se débrouillera pour que le background-color (couleur de fond) des 2 éléments soit coordonné.
On peut alors compléter total_menu.js avec le code contenu dans le script principal de menu_slidebar.htm
Il faut ensuite remplacer la routine qui écrit le contenu du cadre flottant par l'appel à la fonction printMenu(). De cette façon le cadre flottant aura comme contenu le menu vertical avec effets.

I. Automatisation et centralisation des éléments répétés dans les pages (Exercice 3) :

Fichiers de l'exercice :
[ pack_integration.zip ]
[ Exemple de résultat ]
(affichez le code-source
pour voir l'intégration du script)
[ lanceur.js corrigé ]
[ automat.js corrigé ]
[ tete_pied.js corrigé ]

Le but de l'exercice est d'intégrer et de configurer un ensemble de scripts qui permet de réaliser automatiquement dans chaque page du site intranet un en-tête et un pied de page pour permettre la navigation entre les parties.
L'architecture du système à mettre en oeuvre est la suivante:

dans chaque répertoire où se trouvent des fichiers HTML on place une copie du fichier lanceur.js et on l'intègre par un lien dans le HEAD de toutes les pages. Chaque page va alors appeler lors de son chargement (gestionnaire d'évènement onLoad dans la balise BODY) la fonction lanceur( ) qui permet:
- de définir les variables chem_base (chemin relatif du répertoire de base du site) et chem_obj (chemin relatif du répertoire objet du site, par ex general_objets)
- d'intégrer les fichier automat.js et tete_pied.js stockés dans le répertoire objet du site ainsi que n'inporte quel autre fichier de script centralisé (l'idée est aussi de pouvoir rajouter en fonction des besoins d'autres fonctions)
le fichier automat.js va alors:
- créer les conteneurs de l'en-tête et du pied de page (balises DIV) et les placer dans la page
- intégrer les fichiers CSS du site (generale.css et imprim.css par exemple) ainsi qu'un fichier de style spécifique de l'en-tête et du pied de page (automat.css). De même que pour l'intégration des fichiers de scripts (.js), il est possible d'ajouter d'autres fichiers de CSS en fonction des besoins.
- lancer les fonctions de création du contenu de l'en-tête et du pied de page stokées dans tete_pied.js.
  Ces fonctions sont totalement configurables et comportent une partie basée sur des tableaux javascripts qui stockent les caractéristiques des différentes sous-parties du site intranet.

On obtient donc une présentation globale des pages du site uniforme et modifiable facilement puisqu'il suffit de modifier les fichiers tete_pied.js et automat.css pour que l'ensemble des pages reflètent directement les changements.

Travail à faire:

téléchargez le fichier pack_integration.zip qui contient les différents fichiers à configurer et placez les dans votre répertoire objet de site.
Il est conseillé de travailler en local, sur une copie de votre arborescence d'intranet (si vous ne disposez pas de cette arborescence, téléchargez celle proposée dans l'exo 1).
éditez lanceur.js et configurez les quelques éléments indiqués pour qu'il soit compatible avec votre site.
copiez ce fichier dans tous les répertoire ayant des fichiers HTML de votre site et à l'aide des fonctions "rechercher/remplacer" intégrez l'appel de ce fichier dans la balise HEAD de toutes les pages.
De la même manière modifiez le BODY de toutes les pages pour qu'elles appelent la fonction lanceur() lors de leur chargement (ce qui doit donner: <body onload="lanceur(xxx)">, xxx en fonction de votre configuration de site).
éditez automat.js pour configurer l'intégration des fichiers CSS dont vous avez besoin (au minimum automat.css).
éditez tete_pied.js et automat.css pour configurer le contenu et le style de l'en-tête et du pied de page automatique.
Vérifiez que les pages de votre site affichent bien toutes cet en-tête et ce pied de page et mettez le en ligne sur votre site de travail.

En-tête et du pied de page automatiques: un exemple de résultat => voir lanceur.js automat.js tete_pied.js

Niveaux :

base

initié

avancé

Mise en oeuvre et intégration d'applications web dans l'intranet.

I. Quelles applications pour un intranet scolaire ?
Les différents type d'applications que l'on peut rencontrer dans un intranet / extranet scolaire

Les différents type d'applications que l'on peut rencontrer dans un intranet / extranet scolaire

Applications en test sur ce site:

application de suivi de la validation du B2i:
GIBII
systèmes de publication assisté:
SPIP, DOTCLEAR (blog)
applications de travail collaboratif à distance:
EDITDOC, ESPAR
application de gestion de ressources:
GRR
application "tout intégrée":
CHRONOSITE

Quels critères de choix ?

A l'heure actuelle les applications web utilisables dans un intranet scolaire sont nombreuses et il est parfois difficile de choisir parmi celles-ci. L'idée principale est d'abord d'éviter les doublons de fonctions entre les différents outils installés : par exemple on évitera d'avoir 2 systèmes de publications en parallèles sous peine de difficultés de navigations pour les utilisateurs et de maintenance complexe pour les administrateurs...

Il faut donc choisir un ensemble d'applications complémentaires en fonction des besoins des utilisateurs et des contraintes de configuration et d'environnement : une application de travail colaboratif accessible depuis l'internet aura une utilité quasi-nulle pour un établissement connecté par une liaison RNIS (64 Ko) alors quelle sera rapidement indispensable pour un collège ordina13 situé dans une zone de hauts-débits avec des élèves originaires de milieux aisés (l'exemple est grossier et les situations très variables...).

On se retrouve rapidement confronté à un premier choix : est il préférable d'utiliser une application "tout intégrée" ie qui propose l'installation d'un ensemble d'outils standards rassemblés sous une même interface (style Chronosite ou PHARE) ou vaut il mieux choisir un petit nombre d'applications spécialisés (par exemple une combinaison SPIP + ESPAR + GRR + GIBII)?
Bien évidemment il n'existe pas de réponse définitive à ce problème mais dans tous les cas il conviendra de prendre en compte les paramètres suivants :
(il va de soit que dans le cadre des directives ministérielles concernant les logiciels libres et le respect des standards, tout système propriétaire ou dont le code source n'est pas ouvert est disqualifié d'office !)

combien de comptes différents (login + mot de passe) auront à gérer les utilisateurs ?
les outils installés sont ils tous pertinents pour un établissement scolaire d'un niveau donné ?
la mise en oeuvre annuelle des comptes utilisateurs est elle réalisable "en masse" : peut on importer les comptes à partir des bases GEP ou des comptes IACA ?
la navigation entre les différents outils peut elle être intégrée avec le restant du site intranet ("labyrinthe" pour les utilisateurs et/ou "usine à gaz" pour les administrateurs) ?
l'outils offre t'il des options de gestion d'espaces privés (à accès restreints) ? La confidentialité des données (entre profs par ex.) est elle possible ?
la configuration et maintenance d'une application sont elles suffisament bien renseignées ? Les taches peuvent elles êtres déléguées ?
les niveaux d'autorisations et les différents types d'utilisateurs sont ils adaptés à un environnement scolaire ?
la prise en main des fonctions de base de l'application nécessite elle une formation spécifique (pour les profs et/ou les élèves) ?
si l'application est hébergée sur un serveur "externe" (rectorat, hébergeur privé...) la sécurisation des données et des accès est elle correctement assurée ? Quid de la fiabilité de l'hébergement et des délais de retour à la normale en cas de problème de surcharge ou de problème technique ?
les possibilités "d'habillage" (skins ,squelettes et autres templates) d'une application sont elles suffisante pour que l'on puisse envisager une intégration de la charte graphique du site intranet ?
les possibilités de configuration offertes par l'application et les compétences en "bidouillage" du webmestre sont elles à la hauteur de ses exigences en matière d'intégration des applications dans le plan de navigation ?
existe t'il un outil de sauvegarde intégré ? Les sauvegardes peuvent elles êtres automatisées ?
... et de nombreux autres facteurs peuvent intervenirs : humains, financiers, politiques... pour compliquer le choix d'outils qui doivent avant tout êtres adaptés à une utilisation pédagogique au risque qu'ils soient parfois rudimentaires (on pourra tester par exemple EDITDOC)

Quelles catégories ?

Une approche plus "fonctionnelle" permet de distinguer quelques catégories pour les applications "spécialisées" :

applications de saisie et de traitement "administratifs" : notes, absences, suivi de la validation du B2i ...
Systèmes de publication assistés (CMS = création et publication de pages web assistées)
applications de travail collaboratif à distance (transferts de fichiers, forums, listes de diffusion...)
application de gestion de ressources (salles spécialisées, parc de matériel audio ou vidéo, gestion des machines du réseau...)
des outils complémentaires permettant la gestion de l'intranet (gestion des transferts FTP par groupes d'utilisateurs, systèmes de gestion des sauvegardes des bases de données...)

En parallèle les solutions "tout intégrées" offrent un mixage d'outils, avec les mêmes fonctionnalités, soit "propriétaires" soit en intégrant ces mêmes applications (par exemple MRBS intégré dans PHARE). Dans l'ensemble la configuration de ces applications semble plus délicate et leur fonctionnement plus susceptible de problèmes vu leur complexité.

A terme le serveur de DMZ ?

On notera également l'existence de solutions sous Linux qu'un établissement (doté d'une connection haut-débit et d'un serveur EOLE/AMON avec la DMZ activée) peut installer et gérer : une solution robuste et très complète est fournie par le serveur Free-eos (http://www.free-eos.org/) qui intègre un grand nombre d'applications préinstallées sous forme "d'ateliers" que l'on active sans avoir la moindre configuration à faire (SPIP par exemple). Dans ce cas ce sont plutôt les compétences de l'administrateur de réseau qui devront êtres à la hauteur des ambitions "d'autonomie" du webmestre de l'intranet...
Il semble néanmoins que le passage de l'intranet (y compris avec une partie "externe") à un véritable extranet favorise ce genre de solutions en assurant un accès au serveur garant d'une configuration la plus adaptée possibles aux besoins des utilisateurs et aux exigences de fiabilité et de maintenance (cf les exigences de configuration d'Apache imposées par la solution WIMS, variante de wiki permettant la publication web de langage mathématique directement à partir d'une interface graphique ).

II. Installation d'une configuration minimum pour publier sur le réseau de l'établissement
A. Installation de EasyPHP (= serveur Apache + serveur MySQL + interface de gestion PHPMyAdmin) B. Installer un serveur FTP et configurer les accès des utilisateurs avec FileZilla Server C. configurer les restrictions d'accès sur les dossiers réservés (dossiers "profs") avec les fichiers .htaccess

A. Installation de EasyPHP (= serveur Apache + serveur MySQL + interface de gestion PHPMyAdmin)

B. Installer un serveur FTP et configurer les accès des utilisateurs avec FileZilla Server

FileZilla Serveur est un serveur FTP pour machine sous Windows (la plupart des distributions Linux intègrent un serveur de ce type : dans de nombreux cas il s'agit de ProFTPd). On peut donc configurer des comptes FTP avec des droits d'accès en fonction des utilisateurs et/ou de leur groupe d'appartenance (classe, discipline, prof/élèves...) ce qui évite de gérer des partages réseau sur la machine qui fait le serveur Web (si le webmestre ne dispose pas des doits d'administration sur cette machine par ex.).
Cette configuration impose aux utilisateurs d'utiliser un client de FTP à la place de leur explorateur Windows s'ils veulent gérer directement leurs fichiers sur le serveur (dépot de pages HTML ou de fichiers associés dans la partie du site qu'ils gèrent) mais puisque ce sera obligatoire dans le cas d'une migration du serveur en extranet, autant prendre les bonnes habitudes dès le départ !

1. Installation du serveur FTP Filezilla Server:

Page d'accueil de Filezilla Server: http://filezilla.sourceforge.net/

Télécharger la dernière version de Filezilla Server sur cette page:
http://sourceforge.net/project/showfiles.php?group_id=21558

Vous pourrez également télécharger et installer le client FTP Filezilla si vous souhaitez tester un logiciel de FTP simple et freeware.
Lancer l'installation (fichier FileZilla_Server_0_8_8.exe), choisir le dossier d'installation D:\votre_dossier_de_travail\filezilla_server
Lorsque l'installation est terminée, lancez le serveur (FileZilla Server.exe).

2. Configuration des comptes d'accès FTP:

Lancez l'interface d'administration de Filezilla Server (FileZilla Server Interface.exe) et utilisez le menu Edit > Users pour configurer les comptes suivants:
- un compte administrateur loggin "admin", mot de passe "secret" qui aura comme répertoire par défaut la racine de votre site intranet (D:\votre_dossier_de_travail\easyphp\www si vous avez respecté les consignes de l'exo précédent).
  Ce compte aura tous les droits (écriture, création, modification...) sur le répertoire racine et tous les sous-répertoires.
- autant de comptes que vous avez de disciplines ayant un dossier de publication avec les caractéristiques suivantes:
  - login = "nom de la discipline" (par svt)
  - mot de passe = idem loggin (on va éviter de se compliquer la vie pour ce TD mais dans votre établissement vous choisirez des mots de passes plus complexes...)
Utilisez un logiciel de FTP (client Filezilla si vous l'avez installé) pour vérifier que vous avez bien accès à la machine (hôte = nom de la machine) pour pouvoir déposer des fichiers avec:
- le compte admin (accès à tous les sous-répertoires du site)
- un compte de discipline (accès uniquement au répertoire de la discipline)

C. configurer les restrictions d'accès sur les dossiers réservés (dossiers "profs") avec les fichiers .htaccess

Afin de protéger les répertoires réservés aux profs des différentes disciplines, on utilisera une caractéristique propre aux serveurs web Apaches: les fichiers .htaccess. Ces fichiers (de type texte simple) doivent êtres placés dans les répertoires à protéger: lorsque le serveur apache doit extraire une page HTML du dossier, il constate la présence du fichier .htaccess et génère une boite de dialogue de demande de mot de passe.
La vérification du login + mot de passe se fait à partir d'un fichier .htusers qui stocke la liste des utilisateurs et de leurs mots de passe. On peut compléter cette configuration avec un fichier .htgroups qui permet de constituer des groupes d'utilisateurs et de configurer l'accès pour un groupe (c'est à dire tous les utilisateurs ayant un compte valide dans .htusers et inclus dans le groupe).
De façon complémentaire, il semble évident que les fichiers .htusers et .htgroups doivent êtres stockés dans un dossier centralisé lui-même protégé par un .htaccess => le dossier \general_objets\tech semble bien adapté pour cet usage.

Généralités sur les fichiers .htaccess:

La syntaxe d'un fichier .htaccess est la suivante (exemple pour protéger le répertoire \general_objets\stocks, accès réservé aux utilisateurs administrateurs admin1 et admin2 ou au groupe des administrateurs)
# fichier .htaccess pour le répertoire www\general_objets\stocks\ AuthType Basic AuthName "Répertoire réservé aux administrateurs de l'intranet" AuthUserFile D:\votre_dossier_de_travail\easyphp\www\general_objets\tech\.htusers AuthGroupFile D:\votre_dossier_de_travail\easyphp\www\general_objets\tech\.htgroups require user admin1 admin2br> # require group admins # alternative pour l'utilisation d'un groupe

Explications:
# met en commentaire la suite de la ligne
# fichier .htaccess pour le répertoire www\general_objets\stocks\ AuthType Basic => type d'autenfication utilisée: ne pas modifier
AuthName "Répertoire réservé aux administrateurs de l'intranet" => pour info sur le répertoire protégé
AuthUserFile D:\votre_dossier_de_travail\easyphp\www\general_objets\stocks\.htusers => chemin du fichier des utilisateurs .htusers. Ce chemin est absolu par rapport à la machine (ici on suppose que EasyPHP est installé selon la config définie dans les étapes précédentes cad sur une machine Windows).

Si votre site est hébergé sur une machine Linux (serveur de DMZ, serveur du rectorat ou majorié des hébergeurs privés), les choses se compliquent puisque vous devez mettre le chemin absolu de votre répertoire de publication sur cette machine. Il faudra donc connaitre ce chemin (cf l'aide technique de votre hébergeur et/ou sa FAQ hébergement web).
Pour le serveur du rectorat le chemin est du type :
/outils/sites/www.lyc-truc/www/ pour le lycée Truc ou /outils/sites/www.col-machin/www/ pour le collège Machin ou /outils/sites/www.lp-bidule/www/ pour le lycée professionnel Bidule

AuthGroupFile D:\votre_dossier_de_travail\easyphp\www\general_objets\stocks\.htgroups => chemin du fichier de définition des groupes .htgroups
require user admin1 admin2 => le nom des utilisateurs autorisés à l'accès, ici admin1 et admin2 (si login + mdp valides...)
require group admins => alternative pour l'utilisation d'un groupe d'utilisateurs (ici admins, dans lequel on regroupera les comptes d'administrateurs de l'intranet).

Exemple de fichier des utilisateurs .htusers (sera placé dans le répertoire défini par la directive AuthUserFile # Fichier d'utilisateurs pour le site intranet admin1:secret admin2:secret prof1:mdp_prof1 prof2:mdp_prof2 prof3:mdp_prof3
Ce fichier est constitué par les paires login:mot_de_passe de tous les comptes ayant accès à une zone protégée. Il sera donc unique pour l'ensemble de l'intranet.

Pour un serveur sous Linux la sécurité est augmentée par le cryptage des mots de passe (alors qu'ils sont en clair sous Windows...), il est donc nécessaire d'utiliser un outils de cryptage pour générer les mots de passe. On peut utiliser l'application en ligne suivante : http://home.golden.net/generator/ pour générer les lignes du fichier .htusers.

Exemple de fichier des groupes .htgroups (sera placé dans le répertoire défini par la directive AuthUserFile):
# Fichier de groupe pour le site intranet admins: admin1 admin2 profs: prof1 prof2 prof3

Travail à réaliser:

A partir de ces exemples, configurez la sécurité des répertoires profs de votre intranet en créant:

un fichier .htusers pour 2 administrateurs et 5 comptes profs (admin1 et2, prof1 à 6, mots de passe = login).
un fichier .htgroups pour 3 groupes:
- un groupe admins qui regroupe les administrateurs
- un groupe svt qui regroupe les profs de SVT prof1 et prof2
- un groupe allemand qui regroupe les profs d'allemand prof3 et prof4
- un groupe techno qui regroupe les profs de techno prof5 et prof6
3 fichiers .htaccess qui permettront de restreindre les accès de la manière suivante:
- le répertoire \general_objets\stocks aura un accès réservé au groupe des utilisateurs et à prof1
- le répertoire \svt\profs sera réservé aux profs de svt
- le répertoire \allemand\profs sera réservé aux profs de d'allemand
- le répertoire \techno\profs sera réservé aux profs de de techno
Placez ces fichiers dans les répertoires voulus et testez votre configuration.
Vous n'oublierez pas que les administrateurs doivent avoir accès à tous les répertoires...

Pour une documentation complète sur l'utilisation avancée des fichiers .htaccess, consultez cette page (site SELFHTML)

III. Exemples d'intégration d'applications
A. Installation de SPIP et intégration minimum avec le site web B. Installation d'un espace de travail collaboratif ESPAR C. intégration d'une application de service : GRR, un planning pour salles spécialisées ou matériels D. Gestion des logins multiples pour les comptes utilisateurs : un exemple de solution utilisant JavaScript

A. Installation de SPIP et intégration minimum avec le site web

1. Installation de SPIP

Page d'accueil de SPIP:http://www.spip.net/

Télécharger la dernière version de SPIP sur cette page: http://www.spip.net/spip-dev/DISTRIB/
Décompactez le fichier zip obtenu dans un dossier temporaire et copiez l'ensemble des fichiers et dossiers obtenus dans un nouveau répertoire à la racine de votre site intranet (D:\votre_dossier_de_travail\easyphp\www\spip si vous avez respecté les dossiers préconisés jusqu'ici)
Lancer l'installation en vous connectant avec votre navigateur dans le dossier /ecrire/ de votre SPIP (adresse du style: http://nom_de_la_machine_serveur_web/spip/ecrire/ ) et suivez les instructions: les paramètres à fournir seront les suivants:
"Adresse de la base de données" = localhost
"Login de connexion" = root
"mot de passe de connexion" = vide
"Choix de la base" = "Créer une nouvelle base de données :" que vous appelerez spip
Remplissez ensuite les informations personnelles de l'administrateur à votre convenance (attention! vous ne devez pas oublier le mot de passe, alors choisissez le bien...)

2. Création des rubriques du SPIP adaptées à votre intranet:

Une fois l'installation terminé, le système vous propose d'accéder à "l'espace privé" ce que vous faites pour pouvoir créer les différentes "rubriques" (cad les sous-parties du SPIP) correspondant à votre intranet.
Dans la page "Edition du site" > "Rubriques" utilisez le bouton "Créer une rubrique" pour créer autant de rubriques (à la racine du site!) que vous avez de disciplines.
Avec la page "Edition du site" > "Auteurs", bouton "Créer un nouvel auteur", créez ensuite les comptes utilisateurs selon les règles suivantes:
comptes d'administrateurs de rubriques:
un compte d'administrateur (login = "admin_nom_de_la_rubrique", mot de passe = "secret", Statut de cet auteur = "administrateur") par rubrique (= discipline).
une fois un compte créé de ce type créé, il faut restreindre ses droits à l'administration de cette rubrique uniquement => la page renvoyée après la validation permet de choisir la rubrique que ce compte aura le droit d'administrer (champ tout en bas de la page). (Attention il faudra remplir à nouveau les champs nom, login et mot de passe...)
En effet il est nécessaire que l'administrateur de la SVT (par ex.) ne puisse pas modifier le contenu de la rubrique "Lettres" par inadvertance...
comptes des rédacteurs (tous les utilisateurs qui seront autorisés à proposer des articles)
6 comptes profs (de prof1 à prof6, mot de passe = login)

3. Intégrer SPIP dans le site intranet:

Pour pouvoir visualiser les rubriques de SPIP, il faut qu'elles contiennent au moins un article ou une brève => créez ces articles à partir de "Edition du site" > "Créer un nouvel article dans cette rubrique".
Pour chacun de ces articles vous utiliserez un login prof différent (utilisez le bouton "Se déconnecter" pour pouvoir changer d'utilisateur à chaque fois).
Une fois les articles (bidons) rédigés, connectez vous avec les comptes administrateurs pour valider la mise en ligne de ces articles.

A partir de ce moment il faut intégrer votre SPIP dans le site intranet:

faites un lien dans la page d'accueil de chaque discipline pour pouvoir accéser directement à la bonne rubrique du SPIP (celle de la discipline concernée...).
dans la page index du dossier \profs (protégé par le .htaccess), faites un lien sur le dossier \ecrire du SPIP pour que les profs puissent accéder à l'interface de rédation du SPIP.

B. Installation d'un espace de travail collaboratif ESPAR

Procédure d'installation d'une plate forme ESPAR avec EasyPhp

Créez une nouvelle base de donnée en utilisant PhpMyAdmin (cf installation de SPIP) : par exemple espar Déterminez :
l'identifiant et le mot de passe de l'utilisateur mysql qui aura tous les droits sur la base de données.
Par défaut votre système n'acceptant pas l'envoi de message par SMTP il faudra désactiver la fonction Diffusion et l'envoi des notifications de nouveautés quotidien et hebdomadaire
Il faudra configurer le serveur FTP (FilleZilla serveur) pour créer un compte FTP ayant le droit d'écriture sur le dossier sas de l'application, notez l'adresse du serveur FTP, l'identifiant et le mot de passe du compte.
Décompressez le fichier espar_v_x_xx.zip dans un répertoire vide de votre ordinateur
Ouvrez le fichier init.inc.php avec un éditeur de texte (HAP Edit par exmple) et complétez les lignes suivantes en indiquant les valeurs entre les guillemets :
$_SESSION['host'] = "localhost"; // adresse ip serveur mysql
$_SESSION['user'] = "root"; // nom de l'utilisateur mysql ayant les droits sur la base
$_SESSION['passwd'] = ""; // mot de passe de l'utilisateur
$_SESSION['base'] = "espar"; // nom de la base
Enregistrez ce fichier
Déposez le contenu du répertoire de décompression dans le répertoire qui sera la racine de l'application sur le serveur Apache (espar/ par exemple).
À l'aide du navigateur web, lancez le script install.php placé à la racine de l'application.
Une fois l'installation achevée, supprimer le script install.php du serveur afin d'éviter le risque d'écrasement des données par un nouveau lancement de ce script.
Vous pouvez alors ouvrir le script admin.php (à la racine de l'application) pour créer votre premier site espar.

Remarque

Il est possible de faire cohabiter plusieurs plate-formes Espar ; il suffit de les placer dans des répertoires différents de votre serveur Apache et de leur attribuer des bases de données différentes.

En cas de difficultés : consulter la documentation sur http://www.aix-mrs.iufm.fr/espar/ et choisir l'espar consacré à ESPAR (!) : [libre] Applications et documents en licence libre

C. intégration d'une application de service : GRR, un planning pour salles spécialisées ou matériels

1. Installation des fichiers

Page d'accueil de GRR: http://www.lpi.ac-poitiers.fr/grr_lpi/

Télécharger la dernière version de GRR sur cette page: http://www.lpi.ac-poitiers.fr/grr_lpi/rubrique.php3?id_rubrique=4
Pour la documentation complète (en français) : consultez : http://www.lpi.ac-poitiers.fr/grr_lpi/rubrique.php3?id_rubrique=5
Décompater le fichier zip dans un dossier temporaire.
Créer un nouveau sous-dossier dans la racine de votre dossier intranet (ici nous prendrons "grr"), y copier l'ensemble des fichiers présents dans le sous-dossier "web" du dossier temporaire obtenu après décompaction du zip.

2. Configuration de l'application:

L'ensemble de la config de l'appli se fait par l'intermédiaire du fichier "config.inc" présent dans le répertoire "grr" de votre répertoire intranet.
Editez ce fichier (avec HAPEdit par ex) et réalisez les modifications suivantes en fonction des besoins de votre établissement:

a) Configuration de la base de données:

Choix du type de base de données: pour EasyPHP choisir :
$dbsys = "mysql";
(laissez la ligne #$dbsys = "pgsql"; en commentaire cad précédée d'un # )
Type d’accès : la variable $authentification_obli : Cette variable permet de contrôler si l’accès à la page d’accueil de visualisation des réservations de salles est possible sans être connecté ou non :
- $authentification_obl=1 : il est obligatoire de se connecter pour accéder au site, même pour une simple consultation des réservation.
- $authentification_obli=0 : Il n’est pas nécessaire de se connecter pour consulter les réservations mais la connexion est obligatoire si l’utilisateur veut réserver ou modifier une réservation. Si GRR est accessible de l’internet (et non pas uniquement d’un intranet), vos ressources et les réservations seront alors visibles par tous.

b) Paramétrages du calendrier:

Durée des blocs de réservation:
Pour un établissement scolaire le plus courant est 1 heure:
$resolution = 3600;
Déburt et fin de journée:
Premier bloc 8 heures:
$morningstarts = 8;
Dernier bloc à partir de 17 heures:
$eveningends = 17;
Pour que les semaines commencent à lundi (défaut = dimanche)
$weekstarts = 1;

c) Autres options:

Consulter les commentaires directement dans le fichier config.inc dans le dossier de décompaction du zip

3. Installation de la base de donnée:

Ouvrez l'interface d'administration de EasyPHP (clic droit sur son icone dans le systray et choisissez "Administration" puis le lien "Gestion BDD" dans le paragraphe "PHPMyAdmin" de la fenêtre qui s'ouvre.
Créez une nouvelle base de donnée "grr" en utilisant l'interface de PHPMyAdmin
lancez un navigateur et connectez-vous au site en tapant l’adresse complète du genre : http://www.monsite.fr/grr/ ou http://127.0.0.1/grr/ si vous êtes sur une machine utilisant EasyPhp (et non pas en accès direct par les fichiers avec une adresse du type file:///d:/easy_php/www/grr/ : il FAUT passer par le serveur web !) : vous devriez arriver sur une page vous proposant d'installer la base mysql
renseignez l'adresse du serveur de la base de donnée MySQL (localhost pour EasyPhp et la majorité des hébergeurs), le login de votre compte MySQL et son mot de passe (root, pas de mot de passe pour EasyPhp). Si la connexion à la base est réussie passez à l'étape suivante, sinon recherchez dans vos archives le message de votre hébergeur web qui vous indiquait ces 3 paramètres...)
choisissez votre base (grr dans notre exemple). L'étape suivante ne devrait pas poser de problèmes et vous amener à la fin de l'installation. Vous pourrez alors vous connecter avec le compte admin et le mot de passe azerty, mot de passe qu'il faudra immédiatement changer avec l'interface "Gérer mon compte". Le lien "Administration" vous amènera à l'interface d'administration de GRR à travers laquelle se font l'ensemble des opérations suivantes.

4. Configuration des utilisateurs autorisés:

2 niveaux d'utilisateurs doivent êtres définis:

administrateurs: ils seront peu nombeux et leurs comptes saisis "à la main" : lien "Ajouter un utilisateur"
utilisateurs autorisés à réserver (par ex les profs): s'agissant d'une importation en masse, on utilisera un fichier .csv généré à partir d'une extraction des comptes IACA (avec leurs mots de passe !) : lien "Importer dans GRR un fichier d'utilisateurs au format CSV".
Ce fichier (comme indiqué dans l'interface de l'application) devra avoir les paramètres suivants :
- format csv (séparateur : point-virgule)
- champs nécessaires :
  - Identifiant : l'identifiant de l'utilisateur
  - Nom
  - Prénom
  - Mot de passe
  - Adresse email

5. Configuration des ressources à gérer avec GRR:

Avec votre navigateur web connectez vous sur la page d'administration avec le compte admin et utilisez l'interface "Domaines et ressources" pour commencer par ajouter un "domaine" (un ensemble de ressource : par ex lycee et lyceePro si votre établissement est une citée scolaire avec un lycée un un lycée professionnel).
Vous pouvez alors définir vos ressources : celles-ci sont rangées par "domaine", chaque domaineayant une ou plusieurs ressources . Pour exemple, créez 3 domaines:
- "CDI" avec comme ressources "Salle de travail" et "postes de recherches"
- "Matériel commun" avec comme ressources "vidéoprojecteur 1" et "vidéoprojecteur 2"
- "Salles spécialisées" avec comme ressources "Salle multimédia" et "Labo de langues"

6. Utilisation du calendrier de réservation:

Placez un lien vers le répertoire qui contient GRR(du style http://nom_de_la_machine_serveur_web/grr/ ) dans la page qui y donnera accès (par ex la partie commune réservée aux profs) et diffusez les paramètres du (des) compte(s) à utiliser pour faire les réservations.

Essayez de faire une réservation un peu complexe (par ex vidéoprojecteur 1 pour une période de 2 heures, tous les Lundis de 8 à 10 heure du 24 février) au 31 mars.
L'intégration complète de cette appli nécessiterait également une page d'aide à l'utilisation pour les profs afin qu'ils comprennent les différentes options qui leurs sont proposées...

D. Gestion des logins multiples pour les comptes utilisateurs : un exemple de solution utilisant JavaScript

Le problème des logins multiples

Une solution intégrant directement la gestion des utilisateurs à partir de fichiers .csv dans l'interface de Spip et autres applis est en cours de mise au point => merci de votre patience...

Pour faciliter l'accès aux différentes applications installées dans l'intranet de l'établissement, il convient qu'un utilisateur puisse avoir le même login et mot de passe quelque soit l'application qu'il utilise. Pour simplifier encore, on choisira comme "compte de base" le login de son compte IACA.
Cela permet que les profs aient le même login + lot de passe pour:

se loger avec IACA
publier par FTP sur le serveur web (dans le dossier de leur discipline) en passant par le serveur Filezilla
accéder au dossier prof de la discipline
gérer les réservations avec MRBS

De la même manière, pour les élèves, on peut générer un compte d'accès FTP sur leur dossier de publication HTML et un compte de rédacteur dans SPIP toujours avec le même login que IACA.

Une solution utilisant JavaScript

L'idée est de partir du fichier des mots de passe extrait de IACA, de le modifier pour ajouter les infos supplémentaires nécessaires à la création des comptes pour les différentes applications (pour cela on pourra utiliser un tableur avec enregistrement au format texte) afin d'obtenir une liste qui sera "moulinée" par le javascript.
A partir de cette liste, le script génère les éléments pour pouvoir créer les comptes suivants:

rédacteurs SPIP
compte FTP sur le serveur FTP Filezilla
comptes .htusers pour les dossiers protégés "profs"
comptes utilisateurs MRBS

Accès à l'utilitaire

Les limites de JavaScript : l'intégration des comptes générés est manuelle...

Une fois les différents éléments générés, il faudra les intégrer dans les fichiers de configuration de ces application (ou dans la base de données des utilisateurs pour SPIP):

format .htusers pour intégrer dans le fichier .htuser de votre dossier \general_objets\tech\
format MySQL que vous pourrez intégrer directement dans la base des utilisateurs de SPIP:
interface PHPMyAdmin de EasyPHP > Base de donnée = spip > table = spip_auteurs > onglet SQL > Exécuter une ou des requêtes sur la base webtice => copiez dans la fenêtre de saisie le contenu du texte obtenu puis validez.
format texte directement intégrable dans le fichier XML des utilisateurs de Filezilla: FileZilla Server.xml localisé dans le répertoire d'installation de Filezilla Server.
format texte directement intégrable dans le fichier config.inc.php (section "Authentication settings") du répertoire d'installation de MRBS.

Cette page et son script sont téléchargeables ici.

Niveaux :

base

initié

avancé

Références, tutoriels, outils, composants des exercices.

En ligne : En ligne :
L'ESPAR des stages 2004-05 4 exemples d'intranets/extranets d'établissements : Les spécifications ministérielles : Le dispositif @CAR dans l'académie d'Aix-Marseille :

Tutoriels: Tutoriels:
HTML CSS JavaScript

Références langages:
Le site de référence pour HTML, JavaScript et DOM : SELFHTML Syntaxe des feuilles de styles CSS : les propriétés les plus courantes Le site de référence pour les feuilles de style CSS

Applications pour intranet scolaire
Les applications intranet en démonstration sur le site de l'IUFM
Systèmes de publication assistés (CMS) Travail collaboratif à distance Gestion de ressources Gestion B2i Plates-formes intranet scolaire Outils complémentaires

Systèmes de publication assistés (CMS)
SPIP Un weblog : Dotclear WikiNi

Travail collaboratif à distance
ESPAR

Gestion de ressources
GRR GLPI

GRR GRR niveau:

GLPI GLPI niveau:

Gestion B2i Gestion B2i
GIBII

Plates-formes intranet scolaire
Chronosite PHARE

Chronosite Chronosite niveau:

PHARE PHARE

Outils complémentaires
Net2FTP

Net2FTP Net2FTP niveau:

Net2FTP est une interface web pour gérer des transferts FTP avec de nombreuses possibilités de restrictions en fonction des utilisateurs et des répertoires.
Bien paramétré (voire bricolée pour désactiver certaine fonctions trop dangereuses par ex), elle permettra d'offrir un accès FTP aux différents utilisateurs (ou groupes d'utilisateurs). cela peut permettre d'offrir un accès privilégié à un petit nombre d'utilisateurs auxquels on pourra ainsi déléguer des taches de maintenance (surveillance de l'accumulation des fichiers dans les espaces de publication par ex) ou des possibilités de configuration étendues (création / modification de squelettes pour SPIP)...
Pour le gestionnaire d'un intranet / extranet sur une machine à accès FTP uniquement (serveur de DMZ ou site hébergé par le serveur académique), c'est un bon outil pour partager un compte FTP sans (trop) devoir compromettre sa confidentialité.
Les options de configuratins sont peu fournies mais le code suffisament simple pour que l'on puisse envisager une intégration comme module supplémentaire dans d'autres applications (SPIP par ex). C'est en plus, dans certains cas, un moyen élégant de contourner les problèmes de pare-feu...
Cette application très ergonomique et robuste présente le défaut de ne pas avoir de traduction française de l'interface (mais de toute façon ça n'est jamais qu'une sorte d'explorateur de fichier).

Fonctionnalités de Net2FTP:
- http://www.net2ftp.com/index.php?state=homepage&state2=features

Site: http://www.net2ftp.com/
Téléchargement:
- http://www.net2ftp.com/index.php?state=homepage&state2=download

Tutoriels:

"How to" pour les différents types d'utilisateurs:
- http://www.net2ftp.com/help.html

Compléments:

Instuctions pour l'installation:
- http://www.net2ftp.com/index.php?state=homepage&state2=help_install

Livres: Livres:
HTML 4 DHTML et CSS pour le world wide web JavaScript:Totale_Initiation() JavaScript, la référence

Outils: Outils:
Version en ligne du CD ressources PSPad : éditeur de texte évolué TopStyle : éditeur CSS évolué (en anglais exclusivement) Mozilla : navigateur web Filezilla : FTP JR Screen Ruler : mesure des pixels à l'écran easyphp : serveur web perso Générateur de CSS en ligne : version simple Générateur de CSS en ligne : version avancée

Sommaire

Sommaire

Organisation

Organisation

CSS

CSS

JavaScript

JavaScript

Applications

Applications

Références

Références

Références, tutoriels, outils, composants des exercices. Références, tutoriels, outils, composants des exercices. tabh3_Sak101 = new Array(); tab_tabh.push(tabh3_Sak101); En ligne : Tutoriels: Références langages: Applications pour intranet scolaire Livres: Outils: Composants des exercices :

L'intranet : un élément du Réseau Pédagogique d'Etablissement L'intranet : un élément du Réseau Pédagogique d'Etablissement niveau:

Informatique scolaire: problèmes juridiques Informatique scolaire: problèmes juridiques niveau:

III. Les niveaux d'organisation à gérer : III. Les niveaux d'organisation à gérer : tabh3_117 = new Array(); tab_tabh.push(tabh3_117); A. Les règles de navigation dans le site : Organisation technique : l'arborescence de l'intranet

1. Rappel : notions de base sur les balises HTML 1. Rappel : notions de base sur les balises HTML tabh3_O112_3 = new Array(); tab_tabh.push(tabh3_O112_3); 1. Commencer avec les feuilles de style

Exemple 1: lancement direct par intégration d'une balise SCRIPT dans la page (BODY)

Exemple 2: lancement anticipé par une balise SCRIPT dans la balise HEAD de la page

Exemple 3: lancement par un évènement du navigateur

Exemple 4: lancement par un évènement utilisateur

Exemple 5: utilisation d'une fonction pour ajouter du code HTML

Exemple 6: utilisation de paramètres avec une fonction

Travail à faire:

I. Quelles applications pour un intranet scolaire ? I. Quelles applications pour un intranet scolaire ? tabh3_O114_3 = new Array(); tab_tabh.push(tabh3_O114_3); Les différents type d'applications que l'on peut rencontrer dans un intranet / extranet scolaire

Quels critères de choix ?

Quelles catégories ?

A terme le serveur de DMZ ?

1. Installation du serveur web:

2. Transfert du site intranet dans le répertoire de publication de EasyPHP:

1. Installation du serveur FTP Filezilla Server:

2. Configuration des comptes d'accès FTP:

Généralités sur les fichiers .htaccess:

Travail à réaliser:

1. Installation de SPIP

2. Création des rubriques du SPIP adaptées à votre intranet:

3. Intégrer SPIP dans le site intranet:

Procédure d'installation d'une plate forme ESPAR avec EasyPhp

Remarque

1. Installation des fichiers

2. Configuration de l'application:

a) Configuration de la base de données:

b) Paramétrages du calendrier:

c) Autres options:

3. Installation de la base de donnée:

4. Configuration des utilisateurs autorisés:

5. Configuration des ressources à gérer avec GRR:

6. Utilisation du calendrier de réservation:

Le problème des logins multiples

Une solution utilisant JavaScript

Les limites de JavaScript : l'intégration des comptes générés est manuelle...

En ligne : En ligne : tabh3_125 = new Array(); tab_tabh.push(tabh3_125); L'ESPAR des stages 2004-05 4 exemples d'intranets/extranets d'établissements : Les spécifications ministérielles : Le dispositif @CAR dans l'académie d'Aix-Marseille :

4 exemples d'intranets/extranets d'établissements : 4 exemples d'intranets/extranets d'établissements : niveau:

Tutoriels: Tutoriels: tabh3_126 = new Array(); tab_tabh.push(tabh3_126); HTML CSS JavaScript

Les bases du langage HTML Les bases du langage HTML niveau:

Langage HTML avancé Langage HTML avancé niveau:

Utiliser les feuilles de style CSS Utiliser les feuilles de style CSS niveau:

Les bases de JavaScript Les bases de JavaScript niveau:

Maitriser JavaScript Maitriser JavaScript niveau:

Références langages: Références langages: tabh3_127 = new Array(); tab_tabh.push(tabh3_127); Le site de référence pour HTML, JavaScript et DOM : SELFHTML Syntaxe des feuilles de styles CSS : les propriétés les plus courantes Le site de référence pour les feuilles de style CSS

Le site de référence pour HTML, JavaScript et DOM : SELFHTML Le site de référence pour HTML, JavaScript et DOM : SELFHTML niveau:

Syntaxe des feuilles de styles CSS : les propriétés les plus courantes Syntaxe des feuilles de styles CSS : les propriétés les plus courantes niveau:

Le site de référence pour les feuilles de style CSS Le site de référence pour les feuilles de style CSS niveau:

Les applications intranet en démonstration sur le site de l'IUFM Les applications intranet en démonstration sur le site de l'IUFM niveau:

SPIP SPIP niveau:

Un weblog : Dotclear Un weblog : Dotclear niveau:

Compléments:

WikiNi WikiNi niveau:

ESPAR ESPAR niveau:

GRR GRR niveau:

GLPI GLPI niveau:

Présentation site officiel:

GIBII GIBII niveau:

Chronosite Chronosite niveau:

Net2FTP Net2FTP niveau:

Tutoriels:

Compléments:

Livres: Livres: tabh3_129 = new Array(); tab_tabh.push(tabh3_129); HTML 4 DHTML et CSS pour le world wide web JavaScript:Totale_Initiation() JavaScript, la référence

HTML 4 HTML 4 niveau:

DHTML et CSS pour le world wide web DHTML et CSS pour le world wide web niveau:

Références, tutoriels, outils, composants des exercices.
En ligne : Tutoriels: Références langages: Applications pour intranet scolaire Livres: Outils: Composants des exercices :

L'intranet : un élément du Réseau Pédagogique d'Etablissement niveau:

Informatique scolaire: problèmes juridiques niveau:

III. Les niveaux d'organisation à gérer :
A. Les règles de navigation dans le site : Organisation technique : l'arborescence de l'intranet

1. Rappel : notions de base sur les balises HTML
1. Commencer avec les feuilles de style

I. Quelles applications pour un intranet scolaire ?
Les différents type d'applications que l'on peut rencontrer dans un intranet / extranet scolaire

En ligne : En ligne :
L'ESPAR des stages 2004-05 4 exemples d'intranets/extranets d'établissements : Les spécifications ministérielles : Le dispositif @CAR dans l'académie d'Aix-Marseille :

4 exemples d'intranets/extranets d'établissements : niveau:

Tutoriels: Tutoriels:
HTML CSS JavaScript

Les bases du langage HTML niveau:

Utiliser les feuilles de style CSS niveau:

Références langages:
Le site de référence pour HTML, JavaScript et DOM : SELFHTML Syntaxe des feuilles de styles CSS : les propriétés les plus courantes Le site de référence pour les feuilles de style CSS

Le site de référence pour HTML, JavaScript et DOM : SELFHTML niveau:

Syntaxe des feuilles de styles CSS : les propriétés les plus courantes niveau:

Le site de référence pour les feuilles de style CSS niveau:

Les applications intranet en démonstration sur le site de l'IUFM niveau:

Livres: Livres:
HTML 4 DHTML et CSS pour le world wide web JavaScript:Totale_Initiation() JavaScript, la référence

DHTML et CSS pour le world wide web niveau:

JavaScript:Totale_Initiation() niveau:

JavaScript, la référence niveau:

Version en ligne du CD ressources niveau: