TP 5 Les CMS, la forme et le fond Internet et Outils (IO2)
|
|
- Marie-Madeleine Perrot
- il y a 8 ans
- Total affichages :
Transcription
1 TP 5 Les CMS, la forme et le fond Internet et Outils (IO2) Un site, tel que vous avez appris à en programmer jusqu à maintenant, contenant un ensemble de pages HTML embellies de quelques feuilles de styles, constitue une application web dans un sens assez large. On parle souvent de web statique car les pages ne peuvent pas réagir aux actions de l utilisateur. Les CMS (Content Managing System) sont des application web, dites dynamiques, qui permettent d organiser du contenu et de le publier en ligne sans que les auteurs, éditeurs,... (c.à.d. ceux qui produisent le contenu) aient à se soucier de la difficulté de la programmation web. Toute la difficulté des langages web (HTML, CSS, PHP, MySQL, mais aussi ASP,.NET,... ) est confié aux développeurs et webmaîtres qui s occupent respectivement de coder l application et de veiller au bon fonctionnement du site. Néanmoins, tous les CMS exposent au moins en partie les couches profondes de l application afin de permettre aux utilisateurs avancés d accomplir certaines tâches techniques. Dans ce TP, forts de nos connaissances de HTML et CSS, on va se placer du côté des auteurs éclairés et on va interagir avec deux CMS différents afin de personnaliser les affichages. Le rôle du développeur sera l objet des prochains TPs. Avant de commencer Firebug Attention : pour ce TP il est fortement conseillé de travailler sous FreeBSD car Firebug y est déjà installé par défaut. 1 Quand on veut étudier des gros documents HTML, lire les sources dans un éditeur peut devenir pénible. Des outils avancés existent pour parcourir et éditer à la volée la structure d un document HTML, le plugin Firebug pour Firefox est l un d entre eux. Exercice 1 Premiers pas avec Firebug Ouvrez la page poemes.html du TP4 dans Firefox et tapez F12, l éditeur Firebug s ouvre 2. Naviguez dans la structure du document jusqu à trouver la balise <link> qui relie la feuille de style, ouvrez-la. Remarquez que les feuilles de style sont affichées de façon plus pratique par l onglet CSS de firebug. 1. Cliquez avec le bouton droit sur la balise <link> et choisissez Supprimer l élément. Que se passe-t-il? 2. Maintenant cliquez sur le bouton Inspecter (ou l icône, selon la version), déplacez la souris dans la page web et cherchez la balise qui contient le texte Mignonne, allons voir si la rose. Cliquez, firebug vous positionne sur la balise ; changez le texte en Quand vous serez bien vieille et le <em> en <u>. (Indice : le bouton Éditer peut vous aider). 3. Tapez à nouveau F12 pour fermer l éditeur, rafraîchissez (Ctrl+R, ou F5, ou par les menus). Observez que les modifications faites par firebug ne sont pas sauvegardées dans votre fichier : firebug fait une copie privée du fichier et travaille sur celle-ci, ce qui vous permet de modifier aussi bien des pages qui ne vous appartiennent pas (essayez avec un site de votre choix). 1 Si vous travaillez sur ordinateur portable, ou si vous êtes allergiques à FreeBSD, vérifiez que vous avez au moins 12Mo libres dans votre espace de stockage et copiez ce lien dans firefox : 2 Si rien ne se passe, c est que firebug n est pas installé sur votre machine. Dans ce cas, suivez les instructions ci-dessus pour l installer. 1
2 1 Première partie Claroline Le didel n est rien d autre qu une application web dynamique, il est construit sur la plate-forme Claroline ( Claroline est un CMS spécialisé dans la gestion de contenus didactiques, parfois on appelle LMS (pour Learning Managment System) ce genre d applications web. Dans cette partie on va étudier comment Claroline permet de gérer les contenus. Connectez-vous sur le didel et allez sur la page du cours. Dans le menu de gauche sélectionnez Groupes mon groupe Documents et liens. 1.1 Générer du HTML Exercice 2 L outil Document et liens Dans cet outil, créez un répertoire à votre nom et entrez-y. Choisissez Créer un document, donnez un nom au document et dans l éditeur décrivez en au moins deux paragraphes la façon dont vous êtes habillé aujourd hui et la dernière musique que vous avez écouté (si les sujets ne vous conviennent pas, vous pouvez en choisir des autres, vous adapterez le reste de l exercice en conséquence). 1. Faites une liste (numérotée ou non ) pour vos éléments vestimentaires, ajoutez du gras et de l italique là ou il vous semble bon. 2. Ajoutez au moins une image (, google images peut vous aider si vous manquez d inspiration) et un lien ( ). 3. Centrez le deuxième paragraphe. 4. Créez un dernier paragraphe contenant les textes Valider HTML et Valider CSS ; collez sur les textes des liens, respectivement, vers et Sauvegardez. Votre fichier est créé. Vous pouvez le visionner en cliquant dessus. Exercice 3 Editer le HTML Visionnez le code source du document que vous venez de créer. Remarquez que le code produit par Claroline est propre, comprehensible et respecte assez bien les standards ; neanmoins il se sert d attributs qui ne sont pas permis en XHTML Strict tel align="center". Revenez à l outil Documents et liens et éditez le contenu de votre fichier. Cette fois-ci on ne se servira pas de l éditeur WYSIWYG, mais on editera directement le code HTML grâce au bouton. 1. Eliminez l attribut align là où il apparaît, donnez une classe aux paragraphes qui doivent être centrés. D une façon générale, éliminez tous les attributs qui servent à faire de la mise en page. 2. Changez le paragraphe conenant les deux liens Valider... en un <div>. Regroupez dans deux <div> différents la discussion sur votre habillement et la discussion sur la musique. Donnez un id à chaque div. 3. Entourez chaque nom de couleur apparaissant dans votre texte d une balise <span>, donnez une classe à chaque balise span (même classe à même couleur, bien évidemment!). Si vos vêtements n ont pas de couleur, c est qu il y a un problème... remediez-y! Sauvegardez. Visualisez à nouveau le document et cliquez sur le lien Valider HTML, ceci vous redirige vers le validateur w3c. Vous pouvez constater que la page ne valide pas, et pour cause : les entêtes ne contiennent même pas la balise <title>. 2
3 Exercice 4 Soyons stricts Claroline ne permet pas une gestion assez fine du code HTML généré, on va donc devoir retourner aux vieilles manières. Téléchargez (avec click droit Enregistrer la cible du lien sous... ) le fichier que vous avez crée et ouvrez-le avec votre éditeur de texte. 1. Ajoutez une DTD XHTML Strict (souvenez-vous du squelette qu on vous a donné en cours), complétez les entêtes et éditez le fichier jusqu à ce que ça valide. Vous remarquerez qu en local le lien Valider HTML ne marche plus, pourquoi? 2. Ajoutez une balise <link> qui relie une feuille de style que vous allez aussitot créer. Uploadez le document ainsi modifié dans l outil Documents et liens en vous servant du lien Ajouter un fichier, ignorez d éventuels messages d erreur concernant les images. Visionnez le fichier et cliquez sur le lien Valider HTML, si ça ne valide pas c est que vous avez commis un erreur... revenez à la case de départ! 1.2 Ajouter du style Claroline ne permet pas de gérer la mise en page des documents, pour cette partie on va devoir travailler en local et uploader le résultat dans Documents et liens. Exercice 5 Mettre du style Si ce n est déjà fait, créez le fichier de style relié à la page HTML sur laquelle vous avez travaillé auparavant. À partir de ce moment vous n avez plus droit de toucher au fichier HTML. Faites en sorte que 1. Les éléments qui doivent être centrés soient centrés. 2. Les noms de couleurs s affichent dans la couleur correspondente. 3. Tous les <div> aient une bordure et largeur 40%. En considerant les <div> dans l ordre d affichage, donnez une marge inférieure de 50px au premier, une marge supérieure de 50px au deuxième et une hauteur de 80px au troisième. 4. Faites sortir le troisième <div> du flux d affichage en modifiant son attribut position et essayez de le caser dans l espace blanc entre le premier et le deuxième <div>. Que remarquez-vous? 5. Faites en sorte que les images ne soient plus des éléments inline : chacune doit resider seule sur sa propre ligne. Faites en sorte que chaque image soit centrée sur sa propre ligne. (Indice : allez voir les propriétés display et margin:auto. 3 ) 6. Faites disparaître tout le texte en gras, d abord en utilisant display, ensuite visibility. Quelle est la différence? 7. Faites en sorte que les liens Valider... s affichent comme des éléments d une liste (la propriété display est encore votre amie). Uploadez la feuille de style dans l outil Documents et liens, visonnez la page HTML et validez le CSS en cliquant sur le lien. 2 Deuxième partie Wordpress Wordpress est un CMS spécialisé dans la publication de blogs. Il est bien plus puissant que Claroline et il compte parmi ses utilisateurs le New York Times et Le Monde. Visitez le site et créez-vous un compte (ne changez pas les options : les valeurs par défaut vont bien), seulement les sont acceptées. Allez consulter votre boîte à courriels et suivez les instructions pour activer votre blog. 3 Ni selfhtml, ni w3schools documentent très bien le modèle par boîtes, les marges collapsables et margin:auto ; pour une reférence complète on pourra consulter 3
4 2.1 Créer du contenu Suivez le lien View your site ou, si vous êtes déjà loggués dans le panneau d administation, cliquez sur le bouton Visit site tout en haut. Ceci est votre blog, pas bien rempli pour l instant : il contient un billet et un commentaire. On va commencer par ajouter des billets à ce blog. Exercice 6 Votre premier billet Grâce aux liens dans le menu de droite, logguez-vous (le mot de passe vous a été envoyé par mail) ou, si c est déjà fait, allez dans Site admin. Ceci est le panneau d administration de Wordpress, il vous permet de gérer vos billets, de modifier l affichage, d ajouter d autres auteurs à votre blog et fournit plein d autres fonctionnalités qu on vous invite à explorer aussi en dehors des TPs. Pour cette partie on va se limiter à l édition des billets : le menu Posts (post = billet) est votre ami. 1. Mettez à la poubelle le billet généré automatiquement Hello world. 2. Créez un nouveau billet décrivant votre habillement, créez-en un autre qui parle de musique. Ajoutez des images ( ), des liens, du gras, des listes comme pour l exercice 2. Pas la peine de créer les liens Valider... : Wordpress s en charge pour vous! 3. Publiez 4 les billets. Sans vous délogguer, sortez du panneau d administration pour aller voir le résultat dans le blog. Cliquez sur le lien Valid XHTML pour vérifier que Wordpress a bien généré du code valide. Explorez le code source de la page pour vous faire une idée du code HTML généré ; étant donnée la complexité du code, firebug vous rendra un grand service! 4. Revenez au panneau d administration et éditez le deuxième billet en centrant le texte. L onglet HTML vous permet d éditer directement le code HTML du billet, allez voir le code et regardez quelle technique Wordpress utilise pour centrer le texte. Cette technique respecte-t-elle les standards? Vous vérifierez à l aide du lien Valid XHTML. 5. En utilisant l onglet HTML, mettez des <span> autour des noms de couleurs et donnez des classes appropriées. 6. Vous pouvez ranger vos billets par catégories 5. Créez au moins une catégorie TP et assignez-y tous les billets qu on vous demande de créer en TP ; créez au moins une autre catégorie et assignez-y un billet. 7. Pour ceux qui vont trop vite Worpdress intègre aussi un concept de pages : une page n est rien d autre qu un billet doté d un lien permanent dans la barre des menus du blog. À l aide de l outil Pages du panneau d administration, créez une page qui parle de vous. 8. Pour ceux qui vont vraiment trop vite Explorez les outils Media et Links. 2.2 Donner de la forme Si la gestion du contenu dans Wordpress est simple, intuitive et XHTML Strict (!), il en est pas de même pour la gestion de la forme. Wordpress intègre un concept de thèmes et de widgets : les premiers contrôlent l affichage global du site, les deuxièmes contrôlent le contenu du menu. Exercice 7 Gestion utilisateur de l affichage Dans l outil Appearence, sélectionnez Themes, changez le thème d affichage et allez vérifier le résultat. Revenez à Appearence et sélectionnez Widgets, à l aide de la souris composez votre menu en traînant vos widgets dans Sidebar, n oubliez pas d inclure le widget Meta. Allez voir le résultat. Si vous souhaitez revenir aux widgets par défaut, il vous suffit de vider à nouveau la boîte Sidebar. 4 La boîte Publish vous permet de sauvegarder un brouillon Save Draft, prévisualiser Preview ou publier Publish un billet 5 La boîte Categories sur la droite vous permet de créer des catégories et d y assigner des billets 4
5 Tout ça est bien pratique, mais très décevant pour nous, experts de CSS. Les développeurs de Wordpress ont estimé, probablement pas à tort, que la gestion fine du style d affichage est une tâche qu il faut réserver aux développeurs de thèmes et plugins. Pour vous éviter la difficulté d aller bidouiller avec le code PHP de Wordpress, vos enseignants ont développé un plugin, nommé (ironiquement?) Buddhist Gardener, qui vous permet d aller retoucher les feuilles de style des pages. Ce plugin est expérimental, n hésitez pas à nous signaler tout comportement qui ressemble à un bug. Exercice 8 Gestion avancée de l affichage Assurez-vous que le thème IO2 soit le thème actif. Dans l outil Appearence, sélectionnez Buddhist Gardener. Un éditeur de css s affiche, pas très différent de l éditeur de billets, de fait le concept de Buddhist Gardener est très simple : une feuille de style est la même chose qu un billet! Créez un nouveau style qui : 1. Affiche tout le texte en sans-sérif 14pt, 2. donne la bonne couleur aux <span> que vous avez mis dans vos billets, 3. fait en sorte que toutes les images contenues dans un billet (et seulement celles-ci) soient seules sur leur propre ligne et centrées. (Indice : servez-vous de firebug pour répérer les <div> qui contiennent des billets, identifiez quelle classe 6 est commune à tous les billets). Validez votre code à l aide du bouton dans la boîte Actions. Donnez un nom à la feuille de style, ajoutez une description, sauvegardez et allez voir le résultat. Exercice 9 Des styles en cascade On va maintenant étudier comment se comporte une page à laquelle on applique plusieurs feuilles de style (en cascade). 1. Créez une autre feuille de style qui: affiche tout le texte en sérif 10pt, contienne la directive span{color:black;}, donne une couleur de fond de votre choix au billet qui parle de votre habillement, fait apparaître des bordures quand la souris passe sur le billet qui parle de musique, fait disparaître un widget de votre choix. 2. Sauvegardez et allez voir le résultat. Regardez le code source à l aide de firebug et repérez les balises <link> qui introduisent des feuilles de style, notez bien l ordre. Revenez à l outil Appearence, cliquez sur Choix des styles et changez l ordre des feuilles de style. Allez voir le résultat. Que remarquez-vous? 3. Ajoutez une feuille de style contenant la directive span{color:black!important;}. Que remarquez-vous? Exercice 10 Pour ceux qui vont vite Créez encore une feuille de style qui 1. déplace le menu de droite à gauche, 2. numérote les billets dans une page, 3. donne place à votre imagination! 6 Vous remarquerez que Wordpress assigne plusieurs classes à une même balise, ceci est possible grâce à la syntaxe <div class="classe1 classe2 classe3">. 5
Publier dans la Base Documentaire
Site Web de l association des ingénieurs INSA de Lyon Publier dans la Base Documentaire Remarque : la suppression des contributions n est pas possible depuis le Front-Office. lbuisset Page 1 18/09/2008
Plus en détailUtilisation de l éditeur.
Utilisation de l éditeur. Préambule...2 Configuration du navigateur...3 Débloquez les pop-up...5 Mise en évidence du texte...6 Mise en évidence du texte...6 Mise en page du texte...7 Utilisation de tableaux....7
Plus en détailPublier un Carnet Blanc
Site Web de l association des ingénieurs INSA de Lyon Publier un Carnet Blanc Remarque : la suppression des contributions n est pas possible depuis le Front-Office. lbuisset Page 1 18/09/2008 Publication,
Plus en détail145A, avenue de Port Royal, Bonaventure (Québec) G0C 1E0 Sans frais : 1 888 765 4636 www.solutioninfomedia.com
Guide de l utilisateur CMS 1 Navigation dans le CMS... 2 1.1 Menu principal... 2 1.2 Modules tableau... 3 1.3 Modules formulaire... 5 1.4 Navigation dans le site Web en mode édition... 6 2 Utilisation
Plus en détailUtiliser un CMS: Wordpress
Utiliser un CMS: Wordpress Annie Danzart Annie.Danzart@telecom-paristech.fr Wordpress Concevoir un site web statique Concevoir un site web dynamique Choisir un hébergement Choix du CMS Wordpress: installation
Plus en détailCRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING
CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING Durée : 3J / 21H Formateur : Consultant expert en PAO et Web-marketing. Groupe de : 4 max Formation au web marketing Objectifs : Mettre en oeuvre des
Plus en détailINTRODUCTION AU CMS MODX
INTRODUCTION AU CMS MODX Introduction 1. Créer 2. Organiser 3. Personnaliser UNE PETITE INTRODUCTION QUEST-CE QU UN CMS? CMS est l acronyme de Content Management System. C est outil qui vous permet de
Plus en détailEXTENSION WORDPRESS. Contact Form 7. Proposé par :
Contact Form 7 Proposé par : Sommaire Sommaire... 2 Présentation... 3 I. Le Tutoriel... 3 1) Espace de travail... 3 2) Téléchargez les extensions nécessaires... 3 3) Configuration du Formulaire... 7 1)
Plus en détailComment utiliser WordPress»
Comment utiliser WordPress» Comment utiliser WordPress» Table des matières» Table des matières Guide de démarrage rapide»... 2 Tableau de bord de WordPress»... 3 Rédiger un article»... 3 Modifier l article»...
Plus en détailTutoriel d utilisation du Back-Office du site de la ligue
Tutoriel d utilisation du Back-Office du site de la ligue Sommaire 1) Accès au back office 2) Espace de gestion 3) Menu «Administration» 4) Menu «Publications» 5) Menu «Widgets» 6) Menu «Newsletters» 7)
Plus en détailComment utiliser la feuille de style «CMLF2010.dot»
Comment utiliser la feuille de style «CMLF2010.dot» TELECHARGER LA FEUILLE DE STYLE...1 OUVRIR UN NOUVEAU DOCUMENT WORD...2 ATTACHER LA FEUILLE DE STYLE AU DOCUMENT...2 AFFICHER LES STYLES DISPONIBLES...2
Plus en détailPRISE EN MAIN D UN TABLEUR. Version OPEN OFFICE
PRISE EN MAIN D UN TABLEUR Version OPEN OFFICE Prise en main d un tableur page 2 1. L utilisation de la souris Pour faire fonctionner un tableur, on utilise le clavier mais aussi la souris. Rappelons,
Plus en détailmon site web via WordPress
mon site web via WordPress Vocabulaire CMS : Content Management System WordPress fait partie de cette famille de logiciels destinés à la conception et à la mise à jour dynamique de sites Web ou d applications
Plus en détailContactForm et ContactFormLight - Gestionnaires de formulaire pour Prestashop Edité par ARETMIC S.A.
ContactForm et ContactFormLight - Gestionnaires de formulaire pour Prestashop Edité par ARETMIC S.A. - 1 - PREAMBULE Les conditions générales d utilisation détaillant l ensemble des dispositions applicables
Plus en détailOptimiser pour les appareils mobiles
chapitre 6 Optimiser pour les appareils mobiles 6.1 Créer un site adapté aux terminaux mobiles avec jquery Mobile... 217 6.2 Transformer son site mobile en application native grâce à PhoneGap:Build...
Plus en détailDans cette Unité, nous allons examiner
13.0 Introduction Dans cette Unité, nous allons examiner les fonctionnements internes d une des plateformes de publication web les plus largement utilisées de nos jours sur l Internet, WordPress. C est
Plus en détail< Atelier 1 /> Démarrer une application web
MES ANNOTATIONS SONT EN ROUGE : Axel < Atelier 1 /> Démarrer une application web Microsoft France Tutorial Découverte de ASP.NET 2.0 Sommaire 1 INTRODUCTION... 3 1.1 CONTEXTE FONCTIONNEL... 3 1.2 CONTEXTE
Plus en détailSoyez accessible. Manuel d utilisation du CMS
Soyez accessible. Manuel d utilisation du CMS Nameo : mode d emploi Nameo est une agence web basée en Alsace, à Strasbourg. Son champ d action : création ou refonte de sites internet, stratégie et mise
Plus en détailManuel d utilisation du site web de l ONRN
Manuel d utilisation du site web de l ONRN Introduction Le but premier de ce document est d expliquer comment contribuer sur le site ONRN. Le site ONRN est un site dont le contenu est géré par un outil
Plus en détailGuide Reseller Onbile
Guide Reseller Onbile Cher Revendeur, Avez-vous un doute en ce qui concerne le fonctionnement du Panneau d Administration du Plan Reseller de Onbile? Le guide Reseller Onbile est ce dont vous avez besoin!
Plus en détailTapez le titre de la page «BASTIA ville méditerranéenne», puis allez deux fois à la ligne à l aide de la touche Entrée.
Créer un site Internet à l aide du logiciel NVU Le logiciel NVU, permet l édition Wysiwyg (What You See, Is What You Get, ce que vous voyez, est ce que vous obtenez ) d un site internet. Vous rédigez le
Plus en détail1 CRÉER UN TABLEAU. IADE Outils et Méthodes de gestion de l information
TP Numéro 2 CRÉER ET MANIPULER DES TABLEAUX (Mise en forme, insertion, suppression, tri...) 1 CRÉER UN TABLEAU 1.1 Présentation Pour organiser et présenter des données sous forme d un tableau, Word propose
Plus en détailNotes pour l utilisation d Expression Web
EICW Formation Webmaster Notes pour l utilisation d Expression Web G. Barmarin 2008-2009 1 /21 Table des matières 1 Introduction... 3 2 Installer Expression Web... 4 3 Explorer et personnaliser l interface
Plus en détailMAILING KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4
MAILING Table des matières KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4 INSERER UNE IMAGE (OU UNE PHOTO) PAS DE COPIER / COLLER... 5 INSERER UN TABLEAU...
Plus en détailTP1 - Prise en main de l environnement Unix.
Mise à niveau UNIX Licence Bio-informatique TP1 - Prise en main de l environnement Unix. Les sujets de TP sont disponibles à l adresse http://www.pps.jussieu.fr/~tasson/enseignement/bioinfo/ Les documents
Plus en détailTroisième projet Scribus
Sommaire 1. Réponse à la question du deuxième projet... 2 2. Présentation du projet... 2 2.1. Organiser son travail... 2 3. Réalisation... 2 3.1. Préparation du texte... 2 3.1.1. Les styles «Dys»... 3
Plus en détailAide Webmail. L environnement de RoundCube est très intuitif et fonctionne comme la plupart des logiciels de messagerie traditionnels.
Aide Webmail 1. Découverte de l environnement : L environnement de RoundCube est très intuitif et fonctionne comme la plupart des logiciels de messagerie traditionnels. 1. La barre d application (1) Les
Plus en détailManuel d utilisation du web mail Zimbra 7.1
Manuel d utilisation du web mail Zimbra 7.1 ma solution de communication intelligente Sommaire 1 Connexion à la messagerie Zimbra p.4 1.1 Prérequis p.4 1.1.1 Ecran de connexion à la messagerie p.4 2 Presentation
Plus en détailCréez et gérez votre site/blog avec Wordpress, l outil le plus efficace et le plus facile à utiliser.
Créez et gérez votre site/blog avec Wordpress, l outil le plus efficace et le plus facile à utiliser. 2 Sommaire INTRODUCTION 4 INSTALLATION 5 ACHETEZ VOTRE NOM DE DOMAINE ET VOTRE HEBERGEMENT 5 INSTALLEZ
Plus en détailPrise en main rapide
Prise en main rapide 4 Dans cette leçon, vous découvrirez les fonctionnalités de création de page web de Dreamweaver et apprendrez à les utiliser dans l espace de travail. Vous apprendrez à : définir un
Plus en détailAfin d accéder à votre messagerie personnelle, vous devez vous identifier par votre adresse mail et votre mot de passe :
1 CONNEXION A LA MESSAGERIE ZIMBRA PAR LE WEBMAIL Ecran de connexion à la messagerie Rendez vous dans un premier temps sur la page correspondant à votre espace webmail : http://webmailn.%votrenomdedomaine%
Plus en détailSommaire : Pourquoi créer un site web? Qu est-ce qu un site Web? Les différents types de sites. Quelles solutions peuvent être employées?
Sommaire : Pourquoi créer un site web? Qu est-ce qu un site Web? Les différents types de sites Quelles solutions peuvent être employées? Présentation d une des solutions Conclusion Aujourd hui le web est
Plus en détailLes outils numériques permettant l enregistrement de documents audiovisuels diffusés sur Internet sont nombreux. Certains sont gratuits.
outil Technique 9 Comment télécharger un document audiovisuel? Mise en garde importante Les outils numériques permettant l enregistrement de documents audiovisuels diffusés sur Internet sont nombreux.
Plus en détailPrésentation de Firefox
Présentation de Firefox A l ouverture la fenêtre ressemble a ceci. (A noter qu ici j ai ouvert la page d accueil GOOGLE) Firefox présente toutes les fonctionnalités de base d un navigateur comme Internet
Plus en détailIntroduction aux concepts d ez Publish
Introduction aux concepts d ez Publish Tutoriel rédigé par Bergfrid Skaara. Traduit de l Anglais par Benjamin Lemoine Mercredi 30 Janvier 2008 Sommaire Concepts d ez Publish... 3 Système de Gestion de
Plus en détailIntroduction à Expression Web 2
Introduction à Expression Web 2 Définitions Expression Web 2 est l éditeur HTML de Microsoft qui répond aux standard dew3c. Lorsque vous démarrez le logiciel Expression Web 2, vous avez le choix de créer
Plus en détailOuvrir le compte UQÀM
Cliquez sur le titre pour visionner 1 Cliquez sur le titre pour visionner 2! Préliminaires! Ouvrir le compte UQÀM! Accéder au compte UQÀM! Paramètres de configuration! Les dossiers! Gérer les dossiers!
Plus en détailcreer votre site internet en html/css
3 jours (21 heures) 1110 HT (Inter) 2670 HT (Intra) Toute personne (particulier ou professionnel) souhaitant créer son site Internet Créez son site Internet Assurez sa mise en ligne Gérer les mises à jour
Plus en détailFormation Webmaster : Création de site Web Initiation + Approfondissement
Contactez notre équipe commerciale au 09.72.37.73.73 Aix en Provence - Bordeaux - Bruxelles - Geneve - Lille - Luxembourg - Lyon - Montpellier - Nantes - Nice - Paris - Rennes - Strasbourg - Toulouse Formation
Plus en détailCréation d un site Internet
Création d un site Internet Weebly.com Johanne Raymond Collège Lionel Groulx, mai 2010 Service du soutien à l enseignement et Plan de réussite Ouvrir un compte sur Weebly... 1 Modifier le modèle... 2 Ajouter
Plus en détailGuide d utilisation 2012
Guide d utilisation 2012 Tout ce dont vous avez besoin pour bien démarrer REACOM La performance marketing SOMMAIRE Démarrez avec reagiciel Accédez à votre console d administration 4 Gestion internet Aperçu
Plus en détailTP 6 Installation et configuration d une site internet avec un CMS Illustration avec Wordpress
TP 6 Installation et configuration d une site internet avec un CMS Illustration avec Wordpress Présentation du TP...1 I Installation du site localement...2 1 Base de données...2 2 Fichiers...2 3 Paramétrages
Plus en détailComment utiliser RoundCube?
Comment utiliser RoundCube? La messagerie RoundCube est très intuitive et fonctionne comme la plupart des logiciels de messagerie traditionnels. A. Découverte de l'environnement 1/ La barre d application
Plus en détailVOCABULAIRE LIÉ AUX ORDINATEURS ET À INTERNET
VOCABULAIRE LIÉ AUX ORDINATEURS ET À INTERNET Brancher / débrancher l ordinateur de la prise Allumer / éteindre l ordinateur : pour allumer ou éteindre l ordinateur vous devez appuyer sur le bouton On/off
Plus en détailProjet en nouvelles technologies de l information et de la communication
Projet en nouvelles technologies de l information et de la communication Site Web universitaire du Prof. Jacques Moeschler. Nono Steeve Semestre de printemps 2013 Sous la direction du Prof Luka Nerima
Plus en détailCOURS WINDEV NUMERO 3
COURS WINDEV NUMERO 3 01/02/2015 Travailler avec un fichier de données Etude du gestionnaire d analyse, Manipulation des tables mémoires, Manipulation de données, Création d états, Pré requis : Cours WinDev
Plus en détailTutoriel BLOGGER. Pour vous donner une idée, voici un exemple de blog : http://formationlaragne.blogspot.fr/
Tutoriel BLOGGER Blogger est un outil Google gratuit de publication de blogs qui permet de partager du texte, des photos et des vidéos. C est un outil simple, bénéficiant du référencement de Google, ce
Plus en détailIndiquer l'espace libre sur le disque dur
ordinateur les plus Indiquer l'espace libre sur le disque dur - Nettoyer le disque dur - Défragmenter le disque dur Graver un CD ou un DVD - Installer un antivirus - Désinstaller un programme Copier des
Plus en détailcbox VOS FICHIERS DEVIENNENT MOBILES! INTERFACE WEB MANUEL D UTILISATION
cbox VOS FICHIERS DEVIENNENT MOBILES! INTERFACE WEB MANUEL D UTILISATION BV Introduction L application cbox peut-être installée facilement sur votre ordinateur. Une fois l installation terminée, le disque
Plus en détailCMS Made Simple Version 1.4 Jamaica. Tutoriel utilisateur Récapitulatif Administration
CMS Made Simple Version 1.4 Jamaica Système de gestion de contenu CMS Made Simple est entièrement gratuit sous licence GPL. Tutoriel utilisateur Récapitulatif Administration Le système de gestion de contenu
Plus en détailTutoriel. Votre site web en 30 minutes
Tutoriel Votre site web en 30 minutes But du tutoriel Nous allons vous présenter comment réaliser rapidement votre site avec Web Creator Pro 6 en vous basant sur l utilisation des modèles fournis avec
Plus en détailLe logiciel de création de site internet IZISPOT est un outil très puissant et qui est assez simple après quelques temps d utilisation.
1 Le logiciel de création de site internet IZISPOT est un outil très puissant et qui est assez simple après quelques temps d utilisation. Voici un mode opératoire qui vous guidera dans l utilisation de
Plus en détailDécouvrir l'ordinateur (niveau 2)
I. Module Initiation Découvrir l'ordinateur (niveau 2) Médiathèque de Haguenau - mediatheque.ville-haguenau.fr Espace Cyber-base de la médiathèque de Haguenau 1 Sommaire Sommaire 2 I. Rappel : Comment
Plus en détailPublication dans le Back Office
Site Web de l association des ingénieurs INSA de Lyon Publication dans le Back Office Note : dans ce guide, l'appellation GI signifie Groupe d'intérêt, et GR Groupe Régional laure Buisset Page 1 17/09/2008
Plus en détailGUIDE D UTILISATION DE LA PLATEFORME D ENVOI DE COURRIELS
GUIDE D UTILISATION DE LA PLATEFORME D ENVOI DE COURRIELS Table des matières Présentation de la plateforme d envoi de courriels... 4 1- Gestion des contacts... 5 1.1. Base de données... 5 1.1.1- Création
Plus en détailBureautique Initiation Excel-Powerpoint
Module de Formation Personnalisée : Bureautique Initiation Excel-Powerpoint Durée : jours ouvrables Prix : Formation personnalisée en vue d obtenir les notions de base indispensables pour : Excel Office
Plus en détailAvant-propos FICHES PRATIQUES EXERCICES DE PRISE EN MAIN CAS PRATIQUES
Avant-propos Conçu par des pédagogues expérimentés, son originalité est d être à la fois un manuel de formation et un manuel de référence complet présentant les bonnes pratiques d utilisation. FICHES PRATIQUES
Plus en détailLe service de création de site Internet : Mode d emploi. La Création de Site Internet
Le service de création de site Internet : Mode d emploi Sommaire 1) Comment se connecter à votre interface client? 2) Comment démarrer la création de votre site Internet? 3) Comment gérer les pages de
Plus en détailCréation WEB avec DreamweaverMX
Creation Web avec DreamweaverMX MX Initiation Sommaire.preparation.mise en forme.liens hypertextes.images.liens sur images.images avec zones sensibles.images survolees.liens de type courriel.apercu dans
Plus en détailÉdu-groupe - Version 4.3
Édu-groupe - Version 4.3 Guide de l utilisateur Gestion des fichiers Société GRICS, Équipe Évaluation Août 2012 2 CONSIDÉRATIONS GÉNÉRALES A. Importante mise en garde concernant les types de fureteur Les
Plus en détailCREG : http://www.creg.ac- versailles.fr/spip.php?article803
OUTILS NUMERIQUES Édu-Sondage : concevoir une enquête en ligne Rédacteur : Olivier Mondet Bla. 1 Présentation Parmi les pépites que contient l Édu-Portail, l application Édu-Sondage est l une des plus
Plus en détailAdministration du site
Administration du site 1 TABLE DES MATIÈRES Administration du site... 1 Accéder à la console d administration... 3 Console d administration... 4 Apparence... 4 Paramètres... 5 Allez sur le site... 5 Edition
Plus en détailComment accéder à d Internet Explorer
Comment accéder à d Pour ouvrir l application, vous n avez qu à doublecliquer sur l icône de celle-ci : ou vous pouvez encore allez le chercher par le raccourci dans la barre des tâches : Lorsque l application
Plus en détailSOMMAIRE 1 INTRODUCTION 4 2 GUIDE D UTILISATION ET TUTORIAUX VIDEOS EN LIGNE 4 3 CONTACTER VOTRE SUPPORT 4 4 RACCOURCIS CLAVIER 5
SOMMAIRE 1 INTRODUCTION 4 2 GUIDE D UTILISATION ET TUTORIAUX VIDEOS EN LIGNE 4 3 CONTACTER VOTRE SUPPORT 4 4 RACCOURCIS CLAVIER 5 5 ADMINISTRER SON SITE WEBGAZELLE CMS 2.0 5 5.1 Configuration minimale
Plus en détailTutoriel : Ecrire un article sur le site de la TEAM GSAS
Tutoriel : Ecrire un article sur le site de la TEAM GSAS Dans ce document vous est présenté comment écrire un article sur le site http://teamgsas.com. Pour créer un article, il suffit d être inscrit sur
Plus en détailCréer son site internet avec Jimdo. Web business
Créer son site internet avec Jimdo Web business Créer vous-même votre site internet avec Jimdo. En quelques clics, vous pourrez créer gratuitement un site dédié à votre activité et donnez de la visibilité
Plus en détailGuide de l utilisateur. Faites connaissance avec la nouvelle plateforme interactive de
Guide de l utilisateur Faites connaissance avec la nouvelle plateforme interactive de Chenelière Éducation est fière de vous présenter sa nouvelle plateforme i+ Interactif. Conçue selon vos besoins, notre
Plus en détailNouveautés de la version moodle 2.7
Nouveautés de la version moodle 2.7 Atto Éditeur de texte facile Le nouveau éditeur de texte dans Moodle à été développé spécialement pour convivialité et accessibilité. Au-dessus de la zone d'écriture
Plus en détailCréer un site Internet dynamique
Créer un site Internet dynamique avec SPIP (version 3) Document de référence Denise St-Pierre animatrice au service local du Récit 1. Qu est-ce que SPIP?... 3 2. Caractéristiques de SPIP... 3 3. Quelques
Plus en détailIntégrateur Web HTML5 CSS3
Intégrateur Web HTML5 CSS3 L objectif de la 3W Academy est de former des petits groupes d élèves à l intégration de sites internet ainsi qu à la création d applications web simples telles qu un blog ou
Plus en détailGUIDE Excel (version débutante) Version 2013
Table des matières GUIDE Excel (version débutante) Version 2013 1. Créer un nouveau document Excel... 3 2. Modifier un document Excel... 3 3. La fenêtre Excel... 4 4. Les rubans... 4 5. Saisir du texte
Plus en détailSOMMAIRE. 1. Connexion à la messagerie Zimbra 4 1.1.Pré-requis 4 1.2.Ecran de connexion à la messagerie 4
Messagerie Zimbra version 7 Prise en main Nadège HARDY-VIDAL 2 septembre 20 SOMMAIRE. Connexion à la messagerie Zimbra 4..Pré-requis 4.2.Ecran de connexion à la messagerie 4 2. Présentation générale de
Plus en détailCréation d un formulaire de contact Procédure
Création d un formulaire de contact Procédure Description : Cette procédure explique en détail la création d un formulaire de contact sur TYPO3. Outil Procédure CMS: TYPO3 Auteur : hemmer.ch SA Extension:
Plus en détailManuel d utilisation de l outil collaboratif
Manuel d utilisation de l outil collaboratif Réf OCPD-V2 Page 1 / 24 a mis en œuvre un outil collaboratif qui permet de partager des informations entre collaborateurs. Il permet à des utilisateurs travaillant
Plus en détailManuel utilisateur du CMS Anan6
Manuel utilisateur du CMS Anan6 Sommaire Fonctionnalités générales 05 - Paramétrage du navigateur 06 - Connexion au CMS Anan6 07 - Visualisation de l interface du CMS 08 - Détails de la liste des composants
Plus en détailCréer un site WordPress
Utilisation pédagogique d une solution de gestion de contenu Créer un site WordPress Portfolio, Blog, plateforme,... Les blogs et les plateformes d enseignants sont un moyen de poursuivre la relation élèveenseignant
Plus en détailHTML. Notions générales
1 HTML Le langage HTML est le langage de base permettant de construire des pages web, que celles-ci soient destinées à être affichées sur un iphone/android ou non. Dans notre cas, HTML sera associé à CSS
Plus en détailGroupe Eyrolles, 2003, ISBN : 2-212-11317-X
Groupe Eyrolles, 2003, ISBN : 2-212-11317-X 3 Création de pages dynamiques courantes Dans le chapitre précédent, nous avons installé et configuré tous les éléments indispensables à la mise en œuvre d une
Plus en détailNotice d installation et d utilisation du blog nomade avec un nouveau blog
Notice d installation et d utilisation du blog nomade avec un nouveau blog Pour utiliser le blog nomade, il faut avoir un blog en ligne (fait avec wordpress 1 ) que nous synchronisons avec le blog sur
Plus en détailManuel du composant CKForms Version 1.3.2
Manuel du composant CKForms Version 1.3.2 Ce manuel vous présente les principales fonctionnalités du composant CKForms y compris le module et le plug-in CKForms 1.3 est la nouvelle version du composant
Plus en détailOrganiser le disque dur Dossiers Fichiers
Ce document contient des éléments empruntés aux pages d aide de Microsoft Organiser le disque dur Dossiers Fichiers Généralités La connaissance de la logique d organisation des données sur le disque dur
Plus en détail.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15
.. CSS Damien Nouvel Damien Nouvel (Inalco) CSS 1 / 15 Feuilles de styles Plan 1. Feuilles de styles 2. Sélecteurs 3. Attributs Damien Nouvel (Inalco) CSS 2 / 15 Feuilles de styles Déportation des styles
Plus en détailManuel v. 6sV Simplement surfer. Simplement cliquer. Simplement bloguer.
Manuel v. 6sV Simplement surfer. Simplement cliquer. Simplement bloguer. Sommaire 1. Se loguer 2. Ta place de travail (Tableau de bord) 3. Créer ton article 3.1«Ajouter» un article 3.2 Ta feuille de papier
Plus en détailRapport de stage. Création d un site web. Stage du 20/01/2013 au 21/02/2013
Rapport de stage Création d un site web Stage du 20/01/2013 au 21/02/2013 Auteur : Antoine Luczak Tuteur professionnel : M. Tison Tuteur scolaire : Mme Girondon Année scolaire : 2013/2014 1 Table des matières
Plus en détailOCLOUD BACKUP GUIDE DE REFERENCE POUR ANDROID
OCLOUD BACKUP GUIDE DE REFERENCE POUR ANDROID http://ocloud.pripla.com/ Copyright 2014 Private Planet Ltd. Certaines applications ne sont pas disponibles dans tous les pays. La disponibilité des applications
Plus en détailSérère Sine Network Diokodial : Bienvenue sur le Réseau Social Sérère Sine
Tutorial 1.0-0-2010 Sérère Sine Network Créez votre site et Communiquez! Sérère Sine Network Diokodial : Bienvenue sur le Réseau Social Sérère Sine Tutorial (Comment procéder) Comment construire les pages
Plus en détailclaroline classroom online
de la plate-forme libre d'apprentissage en ligne Claroline 1.4 Manuel Révision du manuel: 06/2003 Créé le 07/09/2003 12:02 Page 1 Table des matières 1) INTRODUCTION...3 2) AFFICHER LA PAGE DE DEMARRAGE...3
Plus en détailCréer son compte del.icio.us
1 Créer son compte del.icio.us Del.icio.us (à lire delicious, délicieux en anglais...) est un site gratuit en anglais très populaire grâce aux fonctions originales qu'il propose : Il permet de sauvegarder
Plus en détailFormation Découverte du Web
Catégorie : internet Formation Découverte du Web Niveau requis : savoir utiliser un ordinateur (clavier, souris, traitement de texte) Public : personnel administratif et responsables de communication souhaitant
Plus en détailGUIDE D UTILISATION DU BACKOFFICE
GUIDE D UTILISATION DU BACKOFFICE 1. Modifier les pages du site : - Aller dans l onglet «PAGE HTML», puis «Liste des pages HTML» - Pour visualiser votre page, cliquer sur le nom écrit en vert, dans la
Plus en détailTable des matières. 1 À propos de ce manuel...5 1.1 Icônes utilisées dans ce manuel... 5. 1.2 Public visé... 5. 1.3 Commentaires...
Manuel utilisateur Table des matières 1 À propos de ce manuel...5 1.1 Icônes utilisées dans ce manuel... 5 1.2 Public visé... 5 1.3 Commentaires... 5 2 Généralités sur les applications web... 7 3 Module
Plus en détailFICHIERS ET DOSSIERS
La différence entre fichier et dossier FICHIERS ET DOSSIERS La première notion à acquérir est la différence entre un dossier et un fichier Un dossier est une sorte de classeur dans lequel on range divers
Plus en détailDocument d accompagnement pour l utilisation du Cartable en ligne Lycée des Métiers Fernand LÉGER 2013/2014
Document d accompagnement pour l utilisation du Cartable en ligne Lycée des Métiers Fernand LÉGER 2013/2014 Le Cartable en ligne est un Environnement numérique de travail (ENT) dont la vocation est de
Plus en détailGUIDE DE DEMARRAGE RAPIDE:
GUIDE DE DEMARRAGE RAPIDE: COMMENT CREER VOTRE BOUTIQUE EN LIGNE Vous voulez créer votre propre boutique en ligne? C est désormais plus simple que jamais. Suivez simplement les instructions de ce guide
Plus en détailPRÉSENTÉ PAR : NOVEMBRE 2007
MANUEL D UTILISATION DU FICHIER EXCEL DE GESTION DES OPÉRATIONS DANS LE CADRE DU PROGRAMME FOR@C D AIDE AUX PME DE L INDUSTRIE DES PRODUITS FORESTIERS PRÉSENTÉ PAR : NOVEMBRE 2007 Table des matières Manuel
Plus en détailKompoZer. Composition du site : _ une page d'accueil : index.html. _ une page pour la théorie : theorie.html. _ une page pour les photos : photos.
KompoZer Créer un site «simple» Composition du site : _ une page d'accueil : index.html _ une page pour la théorie : theorie.html _ une page pour les photos : photos.html _ une page avec la galerie : galerie.html
Plus en détailManuel d utilisation Mailchimp
Manuel d utilisation Mailchimp Sommaire I) L onglet «My Account»... 2 Pour gérer vos utilisateurs... 3 Pour gérer votre facturation et vos abonnements... 3 II) L onglet «Campaigns»... 4 Les différents
Plus en détail