Un total de 20 pages ont été trouvées avec le mot clé Programmer et développer.
  • Les remues méninges Outils-Réseaux


Comment choisir un CMS


[mm]

Administrer Wikini


Un administrateur est un utilisateur qui maitrise quelques fonctionnalités avancées et qui peut guider, aider les membres d'un groupe pour qu'ils utilisent cet outil.

I. Suivre la vie du site


1. Des pages qui montrent toute l'activité


  • En bas de chaque page, un clic sur la date permet de visualiser l'historique

  • La page DerniersChangements permet de visualiser les modifications qui ont été apportées, et voir les versions antérieures.



2. Les flux RSS


Offrent une façon simple, de produire et lire, de façon standardisée (via des fichiers XML), des fils d'actualité sur internet.



II. Droits et restrictions


1. Devenir propriétaire d'une page


  • Le propriétaire d'une page est celui qui l'a créée en étant identifié.

  • Une page créée par quelqu'un de pas identifié n'a pas de propriétaire, on peut s'approprier une page en cliquant sur : Appropriation (menu en bas de page).

2. Changer les droits d'accès


  • Lorsqu'on est propriétaire d'une page, on voit apparaître l'option "Éditer permissions" qui permet de modifier les droits en lecture / écriture / commentaire.

  • On peut ainsi indiquer :
    • le nom d'un ou plusieurs utilisateurs : par exemple  MathildE
    • le caractère * désignant tous les utilisateurs (par défaut)
    • le caractère + désignant les utilisateurs enregistrés
    • le caractère ! signifiant la négation : par exemple ! MathildE signifie que  MathildE ne doit pas avoir accès à cette page

III. Organiser, jardiner son wiki


1. Supprimer une page

  • La page doit être "orpheline" (aucun lien ne pointe vers elle).
  • On doit en être propriétaire
  • On peut alors la supprimer (cf. lien en bas de page).

Le menu gauche

C'est une page comme les autres, on peut modifier son contenu en éditant la page PageMenu

Les "actions" Wikini

Voir : ListeDesActionsWikini

Base de données



Definition


Une base de données, usuellement abrégée en BD ou BDD, est un ensemble structuré et organisé d'informations.

Les informations sont placées dans des fichiers, et organisées de manière à pouvoir être accessibles plus rapidement et plus facilement par le biais d'un logiciel spécialisé appelé système de gestion de base de données (abrégé: SGBD)


Utilisation


Les bases de donnees sont omnipresentes : aussi bien en tant que support de stockage organise d'une application (un CMS, un Wiki, un gestionnaire de calendrier, un annuaire), qu'en tant qu'outil de stockage de donnees.

Fonctions


  • Ajout de données : Un SGBD doit permettre l'ajout de données. Pour cela, il est tout d'abord nécessaire de pouvoir décrire les données avec un langage de description de données. Une fois les données décrites, on peut ajouter des valeurs qui correspondent à la description qu'on a faite.

  • Mise à jour des données : Les données doivent être modifiables.

  • Recherche des données : La recherche des données est un point crucial. Il faut que le SGBD puisse restituer les données rapidement. La recherche des données s'établit en effectuant une requête, en interrogeant une base de données auprès de laquelle on souhaite obtenir une information.


Volets de la modelisations


  • Dynamique : qui fait quoi ?
  • Statique : Contraintes Schema de base de donnes : SQL, BDD, + saisie
  • Cinematique : programmes, execution


Logiciels


Quelques exemples :

  • SGBD à base de logiciels libres :
    • MySQL
  • SGBD à base de logiciels propriétaires :
    • Access de Microsoft
    • Oracle de Oracle Corporation
    • SQL Server de Microsoft


Discussion / Definitions


  • Tableur ou base de donnees ? (Avantage et inconvenient)
  • Banque de donnees : concerne plutôt le contenu, on parlera par exemple d'un banque de donnees de releves phytosociologique, la structure sous-jacente, le contenant, reposant sur une base de donnees (mais pas obligatoirement !).
  • SQL : langage de requete

Cas pratique


  • Cas pratique : S.I d'un ZOO

  • grenier
  • vivipare
  • 4
  • riviere
  • devore
  • 8
  • ovipare
  • coussin
  • 4
  • tisse
  • ronronne
  • ovipare




  • Recherche des attributs types
  • Definition entites

  • vert
  • grise
  • penelope
  • pantagruel
  • Gorby
  • gargantua
  • jaune et noir

  • Association type.
  • Entite / Association / Attribut
  • Clef


Charte graphique internet


Ensemble des règles fondamentales d'utilisation des signes graphiques

> identité visuelle d'une organisation, d'un projet, d'une entreprise.



I. But et intérêts de la charte graphique


Conserver une cohérence

L'intérêt de réaliser une charte graphique est double :

  • L'identité graphique reste intacte.

  • Le récepteur identifie facilement l'émetteur et se repère dans les différentes réalisations.


II. Le contenu d'une Charte graphique papier


Il ne s'agit pas d'appliquer les codes dans leur intégralité mais d'en sélectionner quelques-uns.

La charte graphique s'applique à définir :

  1. Le logotype
  2. Les polices de caractères
  3. Les jeux de couleurs
  4. L'utilisation des éléments graphiques
  5. Les principes du choix des images et des illustrations.


III. Le contenu d’une Charte graphique internet/intranet


Définir la position les différents éléments, valider les fondations de votre site internet : accessibilité, lisibilité, ergonomie

IV. Une charte graphique se construit sur des règles


1. Accessibilité

choix du nom de domaine, compatibilité des navigateurs, choix des applications, standards W3C

Au départ de votre projet, se pose 3 questions qui vont construire les bases de votre site :
  • "A quoi sert le site ?"
  • "Quels sont les contenus proposés?"
  • "Comment faire en sorte qu'ils soient accessibles à tous ?"

2. Rationaliser les contenus, séparation du fond et de la forme

> harmoniser les modes de navigation, gain ergonomique.

3. Lisibilité

  • Votre nom, votre logo et l’objet de votre site,
  • Taille du site
  • Taille des caractères de police et largeur des paragraphes
  • Choix des couleurs : fond et textes...

4. Ergonomie = facilité d’utilisation
  • L'arborescence : logique, vulgarisée,
  • Le menu : repérable, mot clairs et concis,
  • Navigation : souple.

Conseil : l'internaute doit trouver en 3 clics l'information qu'il cherche.

V. La création de la matrice graphique


1. Charte graphique internet = règles (accessibilité, lisibilité, ergonomie) + identité graphique

L'identité graphique doit prendre en considération :
  • la sémantique des couleurs
  • le vécu collectif, les références historiques.
  • l'imaginaire populaire

2. Les différents éléments à définir :

  • le gabarit (conseil : 960px de largeur, 60ko / page)

  • les couleurs : plaire est une affaire de goût. L’important est de vous assurer que votre choix colorimétrique est lisible (conseil : Les couleurs doivent être au service de la lisibilité et de la convivialité).

  • le bandeau : avec le logo et le nom de la structure, l'objet du site. On peut aussi y trouver les menus rapides (Aide, Plan, contact...).

  • la page contenu : il est important de faire des pages concises. Il faut définir comment se présentent : le contenu, les polices, les titres, les images, les liens

  • le pied de page : les mention légales, technologies utilisées.

  • les menus : les menus communs se placent généralement en haut à gauche. Clarté des mots et espacement entre les rubriques (conseil : un sous-menu maximum pour chaque rubrique).

  • les menus rapides : entre 3 et 5 (conseil : placer les "menus rapides" dans le bandeau, si le fond le permet, ou en haut à droite de votre page).

En conclusion


N'oubliez pas que la charte graphique, c'est l'art et la manière de rendre votre site internet ergonomique, facile et agréable à consulter.


Bonus pratiques : en VRAC


> Le design de votre site est une clé déterminante dans le rapport de confiance et de professionnalisme que vous aurez avec vos interlocuteurs. Une mise en page mauvaise, une mauvaise impression, trop de textes... rebuteront vos internautes plus que de les aider.

> Une bonne mise en page n'augmente pas les performances mais contribue largement à la satisfaction de l'internaute.

> Un lien colorisé est plus cliqué qu'un lien noir car il est plus facilement repérable.

> Il est important de prendre en compte la catégorie de vos utilisateurs dans le choix de mettre une icône, un lien ou les deux. Les liens sous format texte sont plus souvent cliqués car compris plus rapidement.

> Un bon principe pour les icônes : les faire les plus grandes possible, les mettre dans une zone permanente et les disposer horizontalement.

> L'acceptation et l'impact d'une animation sont augmentés lorsque l'usager est prévenu et invité à lancer son démarrage quand il le souhaite.

> L'utilisation d'espaces blancs entre les paragraphes et pour les marges gauche et droite augmente la compréhension de 20 %.

> De façon générale, une page dense avec beaucoup de liens mets plus de temps à être assimilée ; néanmoins, un alignement répétitif n'augmente pas la compréhension.

> Les avertissements conduisent, le plus souvent, à une acceptation et incitent l'internaute à poursuivre sa recherche.

> La multiplication des menus entraîne l'internaute à parcourir votre site plus que ça ne l'aide à trouver une information.

> Les internautes sont plus patients lorsque le contenu est de qualité.

> Une page d'accueil trop agressive et chargée ne donne pas envie à l'internaute de naviguer plus loin.

> Le rendu final d'une page Web n'est pas le produit figé des règles de présentation fixée par son auteur : il résulte de la combinaison des 3 sources de styles : l'auteur, l'agent utilisateur et de l'utilisateur lui-même.


Ressources


Charte graphique
Ergonomie
Accessibilité :
Couleur, palette graphique
Guide
Banques d'images libres

Habillage de Yeswiki par l'extension template

template
Creative Commons par mrbill

Comprendre le fonctionnement de l'extension template:
  • L'installer, l'utiliser
  • Ajouter des thèmes
  • Créer ses propres thèmes

Installation


Structure des dossiers

  • templates/actions : les actions utilisables avec la syntaxe {{action}}
  • templates/handlers : les actions utilisables en mettant derrière l'url /action (/widget par exemple)
  • templates/themes : liste des thèmes installés (on va en profiter pour copier par FTP les nouveaux thèmes)

Changement de thème

En mode édition (/edit), en bas de page, apparait une liste déroulante


Personnaliser son propre thème : checklist de départ


Personnaliser son propre thème : les images


Personnaliser son propre thème : les css


Personnaliser son propre thème : les squelettes


Changement des options générales de wikini

Editer le fichier wakka.config.php, on ajoute

Changer les paramètres pour le thème de votre choix

Modifier l'apparence d'un site Wikini

Vous connaissez les principes des feuilles de style en css.

Dans ce cours, voyons comment mettre en pratique ces notions avec l'exemple de Wikini.

Wikini n'a pas de squelette, l'essentiel des modifications se fera via le fichier wakka.css


Avec Web Developer : modifier le css en ligne et pré-visualiser le résultat


-> La barre d'outils "Web Developer" dans Firefox permet de modifier en ligne les feuilles de style et de pré-visualiser le résultat.

Exemple
edit css

Lorsque le résultat semble satisfaisant, il ne reste plus qu'à sauvegarder (en cliquant sur l'icône disquette) puis à envoyer ce fichier via FTP, sur notre hébergement. On remplace alors le fichier CSS qui définissait auparavant le style de notre site Internet.

Le fichier wakka.css


  • le fichier wakka.css contient toutes les règles qui concourent à la mise en forme graphique de WikiNi.

=> En connaissant les principales propriétés CSS, vous pouvez ainsi très facilement changer la couleur, la taille de la police, des titres (H1, H2, H3...), la couleur du fonds, des liens, le style des liste à puces...

Quelques éléments à modifier facilement


Couleur de fond
Pour modifier la couleur de fond il faut changer la propriété background-color du sélecteur body ; la ligne :
  • body { background-color: #F5F5F5; color: black; }
  • deviendra par exemple :
  • body { background-color: red; color: black; }
  • pour avoir un fond rouge

Quelques éléments à modifier facilement


Couleur des caractères
Pour modifier la couleur des caractères on agira sur la propriété color du sélecteur body ; la ligne :
  • body { background-color: #F5F5F5; color: black; }
  • deviendra par exemple :
  • body { background-color: #F5F5F5; color: maroon; }
  • pour avoir un caractère de couleur marron

Quelques éléments à modifier facilement


Couleur de fond de la page
Pour changer la couleur de fond des pages, Il vous suffit de modifier la ligne
  • .page { background-color: #ffffff; padding: 10px; border: 1px inset; border-bottom: none; }
  • de votre fichier css en changeant #ffffff pour la couleur de votre choix

Quelques éléments à modifier facilement


Modifier les liens
Pour changer la couleur des liens, Il suffit de modifier la ligne
  • a { color: #993333; }
  • de votre fichier css en changeant #993333 pour la couleur de votre choix.

Avec Web Developer : faire apparaître les blocs qui composent la page


On peut entourer (onglet "outline") et faire apparaître le nom des blocs (onglet "Information")

Exemple :
structure d'un Wikini

Ressources

Outils nécessitant une installation sur serveur

De nombreux outils gratuits (souvent Libres) existent pour la création de sites Webs ou encore la mise en œuvre de listes de diffusion ou de forums. Leur installation (souvent la même est bien spécifique ) par rapport à l'installation de logiciels sur son ordinateur.

Schéma général d'installation

image InstallationCms.png (0.1MB)

Nom de domaine

Pour se rendre chez quelqu'un il faut son adresse... Sur le web aussi ! Intrinsèquement il s'agit d'une série de nombres séparés par un point. Bref, d'une adresse IP (91.121.72.213 par exemple). Pas simple de mémoriser la chose pour s'y rendre...

Un système d’identifiant plus simple a été mis en place : les nom de domaines : www.Monsiteamoi.net (par exemple)

Pour réserver un nom de domaine, vous devez passer par des organismes en ligne habilités à les délivrer.

Hébergement web

Pour héberger un site web en ligne, il faut... un serveur Web ! Seul les geek hébergent leur sites par leur propres moyens (machines). il vous faudra réserver (louer) un hébergement web en ligne.

Voici quelques références pour le faire

  • Hébergement gratuit et sans publicité
  • Hébergement payant et sans publicité
    • OVH
    • 1and1
    • associatif local (Infini à Brest), permettant souvent en outre un accompagnement (technique et usages)

En complément pour choisir par les offres
Choisir un hébergeur pour votre site Internet professionnel

Réserver un hébergement et un nom de domaine en même temps

Les hébergeurs web proposent de réserver à la foi le nom de domaine et l'hébergement. C'est la solution la plus simple

Utilisation d'un logiciel client FTP

Installer d'une application web (site web, forum, autres...) nécessite un logiciel dit "client FTP" pour transférer des fichiers sur un serveur web.

Et après l'installation ?

Une fois l'installation réalisée, certains CMS nécessitent des connaissances en HTML et CSS pour les modifier en profondeur selon ses besoins.

Ses deux langages de balisage peuvent s'apprendre en ligne.

Squelettes html et feuilles de style en CSS


Dans les sites dynamiques, sont séparés :


  • le fond : le contenu texte est stocké et classé dans des bases de données

  • la forme : on associe un squelette html à une feuille de style en css


Le squelette HTML = l'ossature d'un site web


squelettes

Lors de la conception d'un site internet, il peut être utile de concevoir une page unique, un modèle qui sera utilisé par toutes les autres pages du site internet pour :
  • faciliter les mise à jour ultérieures du site,
  • faciliter la navigation des visiteurs,
  • assurer une cohérence structurelle sur toutes les pages du site.

Cette page unique, est parfois appelée squelette du site web, ou kit graphique, ou template.

Le langage et la structure HTML


HTML : un type de document structuré

Un organisme, le W3C est chargé de proposer une structure de document respectée par tous, pour permettre un accès universel aux documents sur Internet.

Architecture de base

<html>
<head>
</head>
<body>
</body>
</html>

Faire clic droit "Code source" de la page dans le navigateur pour voir le code HTML d'une page Internet.

Les feuilles de style en CSS


pingouins

Le même squelette peut être "habillé" avec différents styles.


On utilise le langage informatique CSS (Cascading Style Sheets : feuilles de style en cascade) : HTML ne décrit que l'architecture interne, tandis que CSS décrit tous les aspects de la présentation (couleur, taille, police des textes, emplacement, taille, couleur ou image de fonds des blocs).

Cette séparation permet :
  • d'améliorer l'accessibilité,
  • de changer plus facilement de présentation,
  • de réduire la complexité de l'architecture d'un document.

La syntaxe CSS


  • Une règle se présente de la manière suivante : body { background-color: #FFD688; color: black }

  • Une règle est composée d'un sélecteur précisant son champ d'application. Par exemple : body

  • Après le sélecteur vient la déclaration : { background-color: #FFD688; color: black }

  • La déclaration est elle-même formée d'une ou plusieurs propriétés : background-color, font-style, etc.

  • Ces propriétés sont affectées d'une valeur. Par exemple : color: red indique que la propriété color prend la valeur red

  • les éléments de la déclaration sont séparés entre eux par un point-virgule.

Ressources

Codes couleurs

Techniques CSS

Images
Astuce CSS : les extensions de Firefox

Les standards


On parle aussi de formats ouverts, d'inter-opérabilité...

Pourquoi des standards ?


  • Pour permettre aux outils de communiquer entre eux !

  • Et importer des données d'un logiciel à l'autre, d'une plate-forme à une autre et entre utilisateurs.

  • Le Web, outil du partage et de l'interconnexion de données par définition, ne fonctionne que si des standards sont respectés.


Distinction entre standard et norme (le terme est le même en anglais)


  • pour créer une norme, il suffit d'en décrire les principes, en se préoccupant seulement du fait que ces utilisateurs la respectent, sans se préoccuper du fait que le nombre de ses utilisateurs soit grand.

  • une "norme" devient un "standard" lorsque "tout le monde" l'utilise.


Définition légale en France


La loi n° 2004-575 du 21 juin 2004 pour « la confiance dans l'économie numérique » définit ainsi l'ouverture des formats :

« On entend par standard ouvert tout protocole de communication, d'interconnexion ou d'échange et tout format de données interopérable et dont les spécifications techniques sont publiques et sans restriction d'accès ni de mise en œuvre. »

Exemples de formats standards

  • HTML
  • RSS
  • Ical
  • CSS
  • PNG
  • PDF
  • RTF

Installer, configurer les extensions Yeswiki


"Une extension (à ne pas confondre avec un plugin) est un programme facultatif qui peut s'ajouter à certains logiciels."
Définition de Wikipédia

Les "tools" de wikini ce sont donc des éléments complémentaires, mais facultatifs au logiciel Wikini.

Tools Wikini et "Outils-réseaux"


Wikini est un logiciel d'écriture partagée, simple d'utilisation et facile à installer (voir les cours sur Wikini).

Autour du moteur Wikini nous avons développé une boîte à outils qui rassemble des fonctionnalités qui nous semblaient indispensables pour une meilleure coopération.

Tous sont sous licence libre et disponibles sur la page téléchargement.

Installer un tools


"A la main"

  • 1. installer (ou avoir déjà) un wikini version 0.5
  • 2. récupérer le dossier contenant votre "tools",
  • 3. le décompresser (éventuellement)
  • 4. l'installer par ftp dans le répertoire "tools" de wikini
Et voilà !

"Clés en main"

  • Installer la version avec les extensions courantes de wikini (existe en version 0.4 ou 0.5)
Et voilà !

"A la machine"

Avec le "gestionnaire d'extensions".

Utiliser les tools


Pour certains tools, il n'y a besoin d'aucune manipulation : quand ils sont installés par ftp, ils fonctionnent. C'est le cas par exemple de l'antispam.

Pour les autres, il y a généralement des "actions wikini" associées.

Par exemple : on écrit {{login}} pour faire apparaître la boite d'identification générée par l'extension "login" :
Déjà membre
Nouveau membre
 S'inscrire

Les "tools de base"


Ils sont prêts à l'emploi dans la version "clés en main".

antispam

Un système simple et efficace pour éviter le spam sur son wikini.

ace editor

La barre d'outils qui facilitent l'édition. On sélectionne son texte en le surlignat puis on clique sur les différents pictogrammes (B pour gras, I pour Italique...)

attach

Cette extension permet de télécharger un fichier sur le wiki. Selon le type de fichier :
  • celui ci s'affichera (jpg, png, gif, mm),
  • un lecteur spécifique permettra de le lire (flv, mp3),
  • un lien permettra de le télécharger et ce sont les applications installées sur l'ordinateur qui le prendront en charge (odt, doc, ppt, wma...)

=> Mode d'emploi et démonstration

Remarques : par défaut, la taille maximum d'un fichier à envoyer est de 8 Megaoctets

tableau

Pour pouvoir faire des tableaux, comme ceci :
blabla bla
blabla bla


Les "tools de base"


navigation

Cette extension permet de créer un menu gauche pour faciliter la navigation sur le site.

templates

Cette extension, très riche, permet de complétement configurer l'apparence graphique de son wikini.

Attention : par défaut, c'est l'extension "navigation" qui est installée, il faut la supprimer pour que l'extension "templates" fonctionne !

=> Mode d'emploi
=> Demonstrations : quelques templates libres

D'autres "tools"


tag

L'extension tags permet plein de choses :
  • tagger des pages (ajouter des mots clef)
  • on pourra ensuite générer
    • Un nuage de mots clef dont la taille est proportionnelle à leur nombre d'utilisation
    • Du flux rss par mot clef
    • Et des microblogs !!!
    • d'activer ou de désactiver les commentaires en bas de chaque page
    • mais pas encore le café

=> Mode d'emploi et démonstration
=> Mode d'emploi et démonstration miniblog

D'autres "tools"


syndication

Pour afficher un flux RSS provenant d'autres sites.
Expl : http://outils-reseaux.org/SyndicatioN

contact

Cette extension permet :
  • de générer un formulaire de contact
  • de s'abonner par mail à une liste de discussion ou de se désabonner
=> Mode d'emploi

D'autres "tools"


login

Cette extension permet d'afficher une boite d'identification.
=> Mode d'emploi

chatmot

L'extension Chatmot est faite pour les fainéants. Elle permet de créer une nouvelle page en utilisant la syntaxe wiki à votre place :
  • Entrer votre nom de page dans l'espace "nouvelle page :" en toutes lettres style "réunion du 25 mai 2010"
  • cliquer sur créer et le lien suivant s'affiche dans votre page [[Reuniondu25mai2010 réunion du 25 mai 2010]]
  • une page Reuniondu25mai2010 est donc créée.
  • par défaut le lien se place en bas de page, mais vous pouvez sélectionner en cliquant dans la page un autre endroit.
Remarques : Nécessite l'installation de l'extension aceditor

Vous aussi participez !


Vous êtes informaticien ?

Participez à nos développements sur la forge des extensions Wikini

Vous êtes utilisateur ?


Contrat Creative Commons
sous licence Creative Commons.
Auteurs : David Delon

Le transfert FTP

  • Objectif pédagogique : transférer des fichiers sur un hébergement Internet via un logiciel de transfert FTP.
  • Résumé : utilisation de Filezila
  • Contenus : support de cours -> Diapos
  • Documents annexes :
Téléchargement

Notion de squelettes en html et de feuille de style en css


Contrat Creative Commons
sous licence Creative Commons.
Auteurs : Mathilde Guiné
Illustrations : Jessica Deschamps

Notion de squelettes en html et de feuille de style en css

  • Objectif pédagogique : comprendre ce qu'est un squelette html et une feuille de style en css
  • Résumé : concepts et notions : squelettes html, feuille de style en css et syntaxe css
  • Contenus : support de cours -> Diapos
  • Documents annexes :

Contrat Creative Commons
sous licence Creative Commons.
Auteurs : Mathilde Guiné
Citations : Wikipédia
Illustration : Wikipédia

Standards

  • Objectif pédagogique : comprendre ce qu'est un standard en informatique
  • Résumé : définitions, notions et exemples de standars informatiques.
  • Contenus : support de cours -> Diapos
  • Documents annexes :

Contrat Creative Commons
sous licence Creative Commons.
Auteurs : Laurent Marseault, Fabien Thubert, David Delon, Mathilde Guiné

Usages de Wikini

  • Objectif pédagogique : envisager l'étendue des possibles
  • Résumé : des exemples d'utilisation de Wikini : site éducatif, associatifs, intranet, sites de projets...
  • Contenus : support de cours -> Diapos
  • Documents annexes :

Blog

De "Web - log" : au départ, sortes de journaux intimes en ligne, ils se sont imposés sur la toile, pour devenir les supports d'une expression publique diverse : opinion, parole citoyenne, militante, témoignages, récit...
Il en existe différents types : services clés en main fournis (plateformes de blog) ou logiciels libres à installer sur un serveur. Leur point commun : ils permettent à un non-technicien d'écrire et publier des articles qui seront ensuite triés par dates.

Outils

CMS

Content Management System, ou Système de Gestion de Contenu. Désigne une catégorie de logiciels facilitant la création, la mise à jour et la publication du contenu d'un site web. Parmi les outils les plus connus de cette catégorie : SPIP, Joomla, ez Publish, Typo 3, Wordpress ...

Ces outils nécessitent l'acquisition de compétences spécifiques quand à leur installation.

Outils (liste non exhaustive, il en existe beaucoup ! Ces trois outils sont libres et gratuits)

Wiki

"Wiki Wiki" signifie "rapide" en Hawaïen.
Les Wiki sont des sites Web que l'on peut modifier de façon simple, rapide et interactive, sans connaissance technique et, la plupart du temps, sans avoir besoin d'utiliser un identifiant et un mot de passe.
Voir : la définition de "Wiki" dans Wikipédia"

Outils

Les standards

Auteur de la fiche : Mathilde Guiné, Outils Réseaux
En introduction : Pourquoi des standards ?

 - Pour permettre aux outils de communiquer entre eux ! 

 - Et importer des données d'un logiciel à l'autre, d'une plate-forme à une autre et entre utilisateurs.

 - Le Web, outil du partage et de l'interconnexion de données par définition, ne fonctionne que si des standards sont respectés.
bf_imageStandards.jpg
Présentation du concept abordé : Distinction entre standard et norme (le terme est le même en anglais)

 - pour créer une norme, il suffit d'en décrire les principes, en se préoccupant seulement du fait que ces utilisateurs la respectent, sans se préoccuper du fait que le nombre de ses utilisateurs soit grand.

 - une "norme" devient un "standard" lorsque "tout le monde" l'utilise.

Résumé, traits caractéristiques : Définition légale en France

La loi n° 2004-575 du 21 juin 2004 pour « la confiance dans l'économie numérique » définit ainsi l'ouverture des formats :

« On entend par standard ouvert tout protocole de communication, d'interconnexion ou d'échange et tout format de données interopérable et dont les spécifications techniques sont publiques et sans restriction d'accès ni de mise en œuvre. »

Exemples de formats standards
    - HTML
    - RSS
    - Ical
    - CSS
    - PNG
    - PDF 
    - RTF
Pour aller plus loin : - Norme de métadonnées
- Site officiel du W3C

LimeSurvey

Auteur de la fiche : Outils Réseaux et SupAgro Florac
En introduction : Logiciel libre pour la création de formulaires et d'enquêtes. Le grand frère de Google Formulaire : + de possibilité et d'option mais demande plus de temps de prise en main.
bf_imageLimeSurvey.png
Site officiel : http://www.limesurvey.org/fr
Famille d'outils : Sondages
Présentation :
  • Présentation en anglais
Pré-requis :
Quelques applications :
  • Fiche de présentation des membres d'un réseau ou des participants à un colloque
  • Bilan d'une opération
  • Inscription à une rencontre
  • Recueil des compétences ou des besoins des membres d'un groupe
  • Sondage d'opinion
Pour aller plus loin :
Avantages :
  • Permet de récolter des données, des avis, très facilement et sous un format facilement traitable (beaucoup moins lourd à traiter qu'un formulaire papier)
  • De nombreuses options permettant de personnaliser son formulaire
  • Logiciel libre, les données recueillies sont sur le serveur (on ne les "donne" pas à Google)
  • Pas de limitation du nombre de participants
  • Possibilité d'exporter les résultats sous un format Calc ou Excel
Inconvénients :
  • Doit être installé sur un serveur
  • Ergonomie demandant un temps de prise en main
Licence : Licence libre, Gratuit
Utilisation : Il y a plus facile mais aussi plus compliqué
Installation : Réservé aux Jedis de l'informatique

Réaliser son dispositif Web coopératif

Héberger et installer une application Web

Choisir son hébergeur, réserver un nom de domaine, installer ou faire installer, le transfert FTP, les bases de données MYSQL, le langage PHP (notions)

Public

  • webmaster
  • animateur de réseaux ou de groupes de travail prêts à se confronter aux aspects techniques

En savoir plus

> Pré-requis


  • ne pas avoir de blocages par rapport à la technique, avoir envie de mettre "les mains dans le cambouis",
  • être un utilisateur d'outils coopératifs (wiki ou autres)

> Objectifs pédagogiques


A l'issue de ce module, le public est capable d'être autonome !
  • comprendre globalement le fonctionnement d'Internet
  • choisir et réserver un nom de domaine et un hébergement sur Internet
  • être autonome dans l'installation et la configuration d'applications Web coopératives (transfert ftp et manipulation de fichiers de configuration en php).

> Déroulement


  • présentation théorique
  • mise en pratique

Séquence

  • Introduction
  • Niveau/Attente
  • Recueil des représentations : qu'est qu'une application web collaborative ?
  • Definitions
  • Atelier 1 : choisir son hébergement
  • Atelier 2 : installer Wikini / Joomla /SPIP (suivant thème principal du module)
  • Atelier 3 : installer autre, ou modules complémentaires, squelettes, personnalisation...
  • Bilan

Timing


> Supports de cours



 Partager

Licence Creative Commons Contrat Creative Commons
Auteur : Association Outils-Réseaux

Hébergement et nom de domaine

  • Objectif pédagogique : comprendre l'univers Internet (notions d'hébergement et de nom de domaine)
  • Résumé : concepts et définitions : univers Internet, serveurs Web, navigateurs, adresse url, nom de domaine, adresse IP
  • Contenus : support de cours -> Diapos

Choisir un hébergement et un nom de domaine


Contrat Creative Commons
sous licence Creative Commons.
Auteurs : Florian Schmitt

Choisir un hébergement et un nom de domaine

  • Objectif pédagogique : Choisir un hébergement et un nom de domaine
  • Résumé : présentation des différents types d'hébergements et des critères de choix.
  • Contenus : support de cours -> Diapos
  • Documents annexes :


Contrat Creative Commons
sous licence Creative Commons.
Auteurs : David Delon

Le transfert FTP

  • Objectif pédagogique : transférer des fichiers sur un hébergement Internet via un logiciel de transfert FTP.
  • Résumé : utilisation de Filezila
  • Contenus : support de cours -> Diapos
  • Documents annexes :
Téléchargement


Contrat Creative Commons
sous licence Creative Commons.
Auteurs : Association Outils-réseaux, Sandrine Poyet

Installer Wikini



Contrat Creative Commons
sous licence Creative Commons.
Auteurs : Association "Outils-réseaux"

Installer joomla

  • Objectif pédagogique : Installer joomla
  • Pré-requis :
  • Résumé : Ce module décrit l'installation de Joomla, système de gestion de contenu pour Internet (CMS) en logiciel libre, de la récupération du fichier d'installation jusqu'à la mise en ligne.
  • Contenus : support de cours -> Diapos
  • Documents annexes :


Contrat Creative Commons
sous licence Creative Commons.
Auteur : Association outils-Réseaux

Installer un calendrier

  • Objectif pédagogique : Installer un calendrier
  • Pré-requis :
  • Résumé : Installer un calendrier distant, consultable en ligne (Php-Icalendar) : récupération des archives, transfert ftp et configuration des applications.
  • Contenus :


Contrat Creative Commons
sous licence Creative Commons.
Auteurs : Mathilde Guiné, Florian Schmitt
Citations : Supports de cours repris d'un cours sous Creative Commons sur Spip-contrib

Installer SPIP


Document du stagiaire

A télécharger (cours sur le transfert ftp)
Auteurs : David Delon
Licence :
Contrat Creative Commons
Ce cours est mis à disposition sous un contrat Creative Commons.
Filtrer :   Partager et diffuser sa veille  A_Rafraichir  access  actualités  AdWords  agrégateur  agrégateurs  agrégation  AJAX  alertes  animation  apprentissage  arborescence  archivage  Article de fond  astuces  Audrey : responsable formationde ma structure  auto-organisation  blog  blogosphere  blogues  bookmarking  Boxnet  brainstorming  brevet  carte mentale  Cascading Style Sheets  cloud  CMS  code  codéveloppement  collaboration  communauté  communication  Communiquer et échanger  concept  conception  conceptuel  Concevoir et animer un projet  contenu  contenu-editorial  coop-tic  coopération  copyright  creative-commons  Créer un réseau (et fonctionner...)  Créer/fonctionner en réseau  CSS  curation  D-manager  DCMS  Delicious  démarrer  démocratie participative  démocratie-participative  design  développement-durable  diaporama  Didapage  DNS  données  dotclear  droit-auteur  Dropbox  e-administration  e-learning  écosystèmes  Enseigner/former  ergonomie-editoriale  éthique  Evernote  excel  Exelearning  extensions  Facebook  facettes  flux  flux RSS  FOAD  formation  formatrice  forum  Framasoft  Freemind  Freeplane  Gandi  GIMP  GoogleReader  graphisme  Gratos  gratos du mois  gratuit  groupe  habillage graphique  Hadopi  héberger  Hot Potatoes  HTML  Imagination Cubed  infobésité  information  installer  intelligence-collective  interaction  interface  Javascript  je suis intéressée aussi bien à titre personnel que pour conseiller cette formation à d'autres!  Jing  Jog the Web  Joomla  libéralisme  licence-GPL  licences-libres  Linux  logiciel  logiciel_propretaire  logiciel-libre  logiciels  loi  matrice-sagace  médias  mediawiki  méthode  microblog  mindmapping  Mindmeister  Mindomo  module  Moodle  MySQL  n  Netvibes  Ning  normes  Offerte  OMPI  Openweb  optimisation  organisation  Organiser et planifier  Organiser un évènement  Organiser un évènement à plusieurs  outil  outil éducatif  outlook  OVH  Paper li  partage  Partager et construire collectivement des ressources  Partager et construire des ressources  Partager et diffuser sa veille  partager ses médias  Pearltrees  pédagogie  PHP  PI  plagia  plateforme  powerpoint  prezi  Produire et gérer du contenu  Programmer et développer  propriété-intellectuelle  quizz  reader  Recette libre  redaction web  redactionweb  référencement  réseau  réseau-coopératif  Réseaux  Revue-reseau-tic  rewriting  RSS  sauvegarde  schéma  Scoop it  Scribus  serveurs  SGC  site  Social Bookmarking  SPIP  squelette  stockage  SugarSynch  support de cours  support decours  syndication  synthèse  tag  Tagcrowd  technologies  Télétravailler  templates  territoires de veille  texte ajouté  Thunderbird  TIC  Travailler à distance  Travailler ensemble et à distance  tutoriel  Twitter  Typo3  valoriser un territoire  veille  Veiller  vidéo  Visualiser des données  W3C  web2.0  webcopieur  webdesign  websocial  webzine  widget  wiki  wikini  Wink  word  Wordle  wordpress  Yahoo Pipes  yeswiki