Décrire ici « ModuleConstruireSiteweb ». Cette page vise à fournir des ressources utiles à la construction d'un site Internet.

Auteur JudithHorman

Page en construction constr_matmatic_free_fr.jpeg

Retour vers le site Claroline du cours

Voir le plan du wiki de notre cours CarteWiki

Ressources utiles à la construction de votre mini-site Internet.

Guide de planification et réalisation du mini-site Internet. Voir des conseils et les critères d'évaluation de vos sites. Explorez le lien vers un site qui résume l'utilité des sites Internet en éducation.

Deux logiciels essentiels à télécharger sur votre ordinateur personnel : un éditeur de code html et un logiciel de traitement d'images :

Pour en savoir plus, voir la présentation de Gimp sur le site le site de Framasoft et la présentation de KompoZer sur le site Framasoft

Logiciels portables à installer sur votre clé USB

Deux sites où vous trouverez des versions portables des logiciels dont nous aurons besoin pour le site web et bien d'autres logiciels tels que Audacity pour le traitement du son et Open Office pour les outils bureautiques : Framakey et Portable Apps Télécharger une adaptation française de la Framakey.

Le logiciel KompoZer est toujours téléchargé en anglais mais on ajoute un fichier ou extension qui effectuera la traduction soit le fichier Langpack FR-fr.

Procédure de téléchargement et d'installation sur la clé USB:

Étape 1- Téléchargez le fichier Kompozer et le fichier langpack français ;

Étape 2- Placez ces deux fichiers sur la clé USB, près du «Drive» de la clé (ne pas créer un dossier pour mettre ces fichiers) ;

Étape 3- Cliquez sur le fichier Kompozer pour l'inataller (près du «Drive» de votre clé) ;

Étape 4-Ouvrir KompoZer et cliquez sur tools / extension / install / parcourrir (browse) et sélectionnez le fichier langpacks pour l'installer ;

Étape 5- Fermer et redémarrer Kompozer. Il devrait être en français.

Étape 6-Pour utiliser le logiciel il faut ouvir le dossier kompozer portable et cliquer sur l'icone.

(Notez : le fichier de traduction en français s'installe et fonctionne aussi sur la version de Kompozer que nous installons sur nos ordinateurs personnels.)

Exercice avec Gimp

Changer le fond d'une image Tutoriel de Lili

Créer une bannière et des boutons de navigation : avec des scripts et à partir d'un nouveau fichier.

Lien images- exercice

Lien ressources pour site web (à utiliser seulement dans le cadre des exercices fait en classe)

Faire une carte cliquable avec Gimp :

1-Télécharger l'image de la carte (Source)

2-Ouvrir l'image avec Gimp et suivre les étapes suivantes (voir le fichier odt)

3-Enregister l'image dans le dossier de votre site web

4-Dans la barre tâche de Gimp allez dans filtre/web/image cliquable . Alors une fenètre de dialoque s'ouvrira contenant votre image

5-Choisir un outils de slection et tracer une zone que vous voulez rendre cliquable sur l'image

6-Double cliquez afin d'ouvir la boîte de dialogue qui permet d'entrer le mom de la cible (un fichier html de votre site wb ou un site web externe). Appliquez et validez l'url entrée.

7-Créer aurant de zones cliquable que vous voulez.

8-A patir de la fenêtre de dialogue enregistrez votre carte cliquable en format html (ceci crée une page web). Il vous suffira de faire un lien cliquable vers cette page comme vous le faites pour les autres pages de votre site.

9-Pour insérer votre image cliquable dans une page web déjà créée il suffit de copier le code source généré par Gimp : allez dans affichage/source et copiez le code ; puis allez coller ce code dans le code source de votre page html à l'endroit où vous souhaitez voir apparaître votre carte cliquable

Ressources additionnelles :

Lien vers le site web utilisé en classe afin illustrer les procédures de base et les erreurs les plus fréquentes lors de la construction d'un site web: voirsite vers 3

Tutoriel pourKompoZerparPatrick -KompoZerTutoriel «Faire un montage photo avec Gimp»

Tutoriel pour GIMP sur framsoft

Tutoriel de base pour Gimp en français

Comment créer une image transparente avec Gimp Tutoriel suggéré par le RÉCIT

Banque d'images pour le préscolaire offert par le RECIT

Tutotriel : Construire un site web -élémentaire

Tutoriel :Html et CSS

Voir ncolor pour connaître les codes couleurs et tester vos contrastes texte et fond.

Des sites où on trouve des fonds d'écran et autres éléments web Icone Bazaar ; Animation Factory ( il faut être membre mais le site offre certains items gratuitements. ) ;

Pour les plus aventurier et aventurière voici un tutoriel qui montre comment créer un arrière-plan (textures) pour vos pages web

Utilisation pédagogique des sites Internet :

Site web et éducation: ressources du gouvernement du Québec

Le web pédagogique(voir sur l'usage des blogs en éducation)

Visitez le site de L'École Fernand-Séguin. On peut accéder aux activités en ligne des classes.

Usage de blogue et cyberfolio à l'Institut St-Joseph.

Le projet Creatic propose des ressources aux enseignants. Il faut voir le site web des élèves.

Création de sites web par des enfants

Web junior, un site qui offre des ressources aux enfants qui veulent créer un site web.

Le projet Creatic propose des ressources aux enseignants. Il faut voir le site web des élèves.

Le blogue de l'éducation Comportement.net

Un colloque entièrement en ligne sur la réussite scolaire au collégial et l'apport des TIC Colloque qui URL